/* ============================
   Filestash Custom Theme (Auto)
   Accent color: Orange (#ff7a00)
   ============================ */

/* Cor de destaque comum */
:root {
  --accent-color: #ff7a00;
  --accent-hover: #ff9a33;
  --font-family: "Inter", "Segoe UI", sans-serif;
}

/* ======================================
   MODO CLARO
   ====================================== */
@media (prefers-color-scheme: light) {
  :root {
    --text-color: #222;
    --background-color: #fafafa;
    --bg-header: #fff;
    --bg-sidebar: #fff;
    --table-header-bg: #ff7a00;
    --table-hover-bg: rgba(255, 122, 0, 0.1);
  }

  body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
  }

  a, .link, .icon.active {
    color: var(--accent-color) !important;
  }
  a:hover, .link:hover, .icon.active:hover {
    color: var(--accent-hover) !important;
  }

  header, .sidebar {
    background-color: var(--bg-header);
    border-bottom: 2px solid var(--accent-color);
  }
  .sidebar .nav-item.active,
  .sidebar .nav-item:hover {
    background-color: var(--accent-color) !important;
    color: #fff !important;
  }

  button, .btn, .button {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    border: none;
    transition: background 0.2s;
  }
  button:hover, .btn:hover, .button:hover {
    background-color: var(--accent-hover) !important;
  }

  input:focus, select:focus, textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 3px var(--accent-color);
  }

  .table thead {
    background-color: var(--table-header-bg);
    color: #fff;
  }
  .table tbody tr:hover {
    background-color: var(--table-hover-bg);
  }

  .progress-bar {
    background-color: var(--accent-color) !important;
  }

  .login-form button {
    background-color: var(--accent-color);
  }
  .login-form button:hover {
    background-color: var(--accent-hover);
  }
}

/* ======================================
   MODO ESCURO
   ====================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-dark: #121212;
    --bg-medium: #1e1e1e;
    --bg-light: #2b2b2b;
    --text-color: #e0e0e0;
    --text-muted: #999;
  }

  body {
    background-color: var(--bg-dark);
    color: var(--text-color);
    font-family: var(--font-family);
  }

.dark-mode [is="component_submenu"] .component_submenu .action button img {
    filter: brightness(0%) invert(1);
}

  a, .link, .icon.active {
    color: var(--accent-color) !important;
  }
  a:hover, .link:hover, .icon.active:hover {
    color: var(--accent-hover) !important;
  }

  header {
    background-color: var(--bg-medium);
    border-bottom: 2px solid var(--accent-color);
  }
  .sidebar {
    background-color: var(--bg-medium);
    color: var(--text-muted);
  }
  .sidebar .nav-item.active,
  .sidebar .nav-item:hover {
    background-color: var(--accent-color) !important;
    color: #fff !important;
  }

  button, .btn, .button {
    background-color: var(--accent-color) !important;
    border: none !important;
    color: #fff !important;
    transition: background 0.2s;
  }
  button:hover, .btn:hover, .button:hover {
    background-color: var(--accent-hover) !important;
  }

  input, select, textarea {
    background-color: var(--bg-light);
    color: var(--text-color);
    border: 1px solid #444;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 4px var(--accent-color);
  }

  .table {
    background-color: var(--bg-light);
    color: var(--text-color);
  }
  .table thead {
    background-color: var(--bg-medium);
    color: var(--accent-color);
  }
  .table tbody tr:hover {
    background-color: rgba(255, 122, 0, 0.1);
  }

  .progress-bar {
    background-color: var(--accent-color) !important;
  }

  .login-form {
    background-color: var(--bg-medium);
    color: var(--text-color);
    border: 1px solid #333;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }
  .login-form button {
    background-color: var(--accent-color);
  }
  .login-form button:hover {
    background-color: var(--accent-hover);
  }
}