/* =============================================================
   THEMES  —  accent palettes + dark-mode mapping
   -------------------------------------------------------------
   Driven by two attributes on <html>, written by the theme picker
   (templates/partials/navbar.html) and restored from localStorage
   by the no-flash script in base.html:

       <html data-theme="light|dark" data-accent="teal|blue|…">

   Imported LAST from index.css so it can override component
   defaults and AdminLTE's hard-coded accent classes.
   ============================================================= */

/* -------------------------------------------------------------
   1. ACCENT PALETTES
   ------------------------------------------------------------- */
:root[data-accent="teal"] {
  --accent: #17a2b8; --accent-hover: #138496; --accent-active: #0f6674;
  --accent-soft: rgba(23, 162, 184, 0.12);
}
:root[data-accent="blue"] {
  --accent: #007bff; --accent-hover: #0069d9; --accent-active: #0056b3;
  --accent-soft: rgba(0, 123, 255, 0.12);
}
:root[data-accent="gold"] {
  --accent: #c9a227; --accent-hover: #a5851d; --accent-active: #8a6f18;
  --accent-soft: rgba(201, 162, 39, 0.14);
}
:root[data-accent="purple"] {
  --accent: #6f42c1; --accent-hover: #5e37a6; --accent-active: #4e2d8b;
  --accent-soft: rgba(111, 66, 193, 0.12);
}
:root[data-accent="green"] {
  --accent: #2e9e5b; --accent-hover: #26834b; --accent-active: #1f6b3d;
  --accent-soft: rgba(46, 158, 91, 0.12);
}
:root[data-accent="rose"] {
  --accent: #e0407f; --accent-hover: #c7336e; --accent-active: #a52a5b;
  --accent-soft: rgba(224, 64, 127, 0.12);
}

/* The chosen accent drives the primary/info token families, so every
   token-driven component in the design system follows automatically. */
:root {
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-active: var(--accent-active);
  --primary-soft: var(--accent-soft);
  --info: var(--accent);
  --info-soft: var(--accent-soft);
  --sidebar-active-bg: var(--accent);
}

/* -------------------------------------------------------------
   2. Map AdminLTE's hard-coded accent classes onto the token,
      so the picker actually recolours the whole app.
      (Semantic success / warning / danger are left alone.)
   ------------------------------------------------------------- */
.btn-primary,
.btn-info {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-contrast);
}
.btn-outline-primary, .btn-outline-info { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover, .btn-outline-info:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header { background-color: var(--accent); }
.card-primary.card-outline, .card-info.card-outline { border-top-color: var(--accent); }

/* Secondary / neutral (the old gray) card headers — refined slate gradient
   instead of AdminLTE's flat #6c757d. Dark-mode aware via tokens, and the
   leading marker is recoloured to the accent so the chosen palette still
   reads through while primary/secondary hierarchy is preserved.
   (equal specificity to the sheen rule in components.css, but loads later). */
.card-secondary:not(.card-outline) > .card-header:not(.p-0),
.card-dark:not(.card-outline) > .card-header:not(.p-0) {
  background-color: var(--header-neutral-bg);
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0) 42%,
      rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(135deg,
      var(--header-neutral-bg) 0%,
      var(--header-neutral-bg-2) 100%);
  color: #fff;
}
.card-secondary:not(.card-outline) > .card-header:not(.p-0)::before,
.card-dark:not(.card-outline) > .card-header:not(.p-0)::before {
  background: var(--accent);
}
.card-secondary.card-outline,
.card-dark.card-outline { border-top-color: var(--header-neutral-bg); }

.bg-primary, .bg-info { background-color: var(--accent) !important; }
.text-primary, .text-info { color: var(--accent) !important; }
.badge-primary, .badge-info { background-color: var(--accent); }

.main-sidebar .nav-sidebar .nav-link.active { background-color: var(--accent); color: #fff; }

.form-control:focus, .custom-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* pagination is fully handled in components.css (palette + dark-mode aware) */

/* -------------------------------------------------------------
   3. DARK MODE — repaint the surfaces AdminLTE hard-codes white.
      (Token values themselves are re-mapped in theme.css.)
   ------------------------------------------------------------- */

/* theme.css pins --primary-soft to a blue tint for dark; re-assert the
   accent here (same specificity, but this file loads later) so the picker
   still drives focus rings / soft tints in dark mode.
   The sidebar + app footer are dark brand bars in both modes, so in dark
   mode we deepen them (rather than lighten) to keep the contrast ladder. */
:root[data-theme="dark"] {
  --primary-soft: var(--accent-soft);
  --info-soft: var(--accent-soft);

  --sidebar-bg: #0d161b;
  --sidebar-bg-2: #080e12;

  --footer-bg: #0a161b;
  --footer-bg-2: #050c10;
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .wrapper,
:root[data-theme="dark"] .content-wrapper {
  background: var(--background);
  color: var(--text-primary);
}

:root[data-theme="dark"] .card { background: var(--surface); border-color: var(--border-color); }
:root[data-theme="dark"] .card-footer { background: var(--surface-2); border-color: var(--border-color); }
:root[data-theme="dark"] .card.card-outline > .card-header { color: var(--text-primary); }

:root[data-theme="dark"] .content-header { background: var(--surface-2); border-color: var(--border-color); }
:root[data-theme="dark"] .content-header h1 { color: var(--text-primary) !important; }

:root[data-theme="dark"] .main-header.navbar-white,
:root[data-theme="dark"] .main-header.navbar-light {
  background: var(--surface);
  border-color: var(--border-color);
}
:root[data-theme="dark"] .navbar-light .nav-link { color: var(--text-secondary); }
:root[data-theme="dark"] .navbar-light .nav-link:hover { color: var(--text-primary); }

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] textarea.form-control {
  background-color: var(--surface-2);
  border-color: var(--border-color);
  color: var(--text-primary);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); }
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly] { background-color: var(--surface-2); opacity: 0.75; }
:root[data-theme="dark"] .input-group-text { background: var(--surface-2); border-color: var(--border-color); color: var(--text-secondary); }
:root[data-theme="dark"] label,
:root[data-theme="dark"] .control-label { color: var(--text-secondary); }

:root[data-theme="dark"] .table { color: var(--text-primary); }
:root[data-theme="dark"] .table thead th { color: var(--text-secondary); border-bottom-color: var(--border-strong); }
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th { border-top-color: var(--border-color); }
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); }
:root[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--surface-hover); }
:root[data-theme="dark"] .table-bordered,
:root[data-theme="dark"] .table-bordered td,
:root[data-theme="dark"] .table-bordered th { border-color: var(--border-color); }

:root[data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border-color); }
:root[data-theme="dark"] .dropdown-item { color: var(--text-primary); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus { background: var(--surface-hover); color: var(--text-primary); }
:root[data-theme="dark"] .dropdown-divider { border-color: var(--border-color); }

:root[data-theme="dark"] .modal-content { background: var(--surface); color: var(--text-primary); }
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { border-color: var(--border-color); }
:root[data-theme="dark"] .close { color: var(--text-primary); text-shadow: none; }

/* the custom multi-select widget used on the permissions/shortcuts pages */
:root[data-theme="dark"] .multi-select .multi-select-header,
:root[data-theme="dark"] .multi-select .multi-select-options { background-color: var(--surface); border-color: var(--border-color); color: var(--text-primary); }
:root[data-theme="dark"] .multi-select .multi-select-option:hover,
:root[data-theme="dark"] .multi-select .multi-select-all:hover { background-color: var(--surface-hover); }
:root[data-theme="dark"] .multi-select .multi-select-header-option { background-color: var(--surface-2); color: var(--text-primary); }
:root[data-theme="dark"] .multi-select .multi-select-search { background: var(--surface-2); border-color: var(--border-color); color: var(--text-primary); }