/* Dark mode overrides for the SB Admin 2 based theme.
   Activated when <html class="dark">, toggled by the inline <script> in
   partials/header.php / partials/header-auth.php (js/theme-toggle.js was
   removed -- the toggle logic had to move inline to avoid a race condition
   where a click could land before an external script finished loading). */

html.dark {
  --dm-bg:          #12151c;
  --dm-surface:     #1b1f28;
  --dm-surface-alt: #232732;
  --dm-border:      #333a48;
  --dm-text:        #dfe3ea;
  --dm-text-muted:  #9aa1ac;
  --dm-link:        #7c9cf0;
}

html.dark body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}
html.dark #wrapper #content-wrapper {
  background-color: var(--dm-bg);
}

/* ---------- Topbar ---------- */
html.dark .topbar.navbar-light {
  background-color: var(--dm-surface) !important;
  border-bottom: 1px solid var(--dm-border);
}
html.dark .topbar .navbar-search .form-control {
  background-color: var(--dm-surface-alt) !important;
  color: var(--dm-text);
  border-color: var(--dm-border) !important;
}
html.dark .topbar-divider {
  border-left: 1px solid var(--dm-border) !important;
}

/* ---------- Sidebar ----------
   Deliberately no html.dark overrides here: the sidebar's own color scheme
   (2026-08-30 redesign, see css/theme.css) uses plain :root variables that
   are the same regardless of the page's light/dark mode, matching the
   existing "sidebar color is independent of page theme" design. */

/* ---------- Cards ---------- */
html.dark .card {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .card-header,
html.dark .card-footer {
  background-color: var(--dm-surface-alt);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .bg-light {
  background-color: var(--dm-surface-alt) !important;
}
html.dark .bg-light,
html.dark .bg-light * {
  color: var(--dm-text);
}
html.dark .shadow,
html.dark .shadow-sm {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(0,0,0,0.35) !important;
}

/* ---------- Progress bars (e.g. dashboard "My Leave Balance") ---------- */
html.dark .progress {
  background-color: var(--dm-border);
}

/* ---------- Modals ---------- */
html.dark .modal-content {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html.dark .modal-header,
html.dark .modal-footer {
  border-color: var(--dm-border);
}
html.dark .modal-header .close {
  color: var(--dm-text);
  text-shadow: none;
}

/* ---------- Text / heading utility classes SB Admin 2 uses everywhere ---------- */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
  color: var(--dm-text);
}
html.dark .text-gray-800,
html.dark .text-dark {
  color: var(--dm-text) !important;
}
html.dark .text-gray-600,
html.dark .text-gray-400,
html.dark .text-muted {
  color: var(--dm-text-muted) !important;
}
html.dark a {
  color: var(--dm-link);
}
html.dark hr,
html.dark .sidebar-divider {
  border-color: var(--dm-border);
}

/* ---------- Tables ---------- */
html.dark .table {
  color: var(--dm-text);
}
html.dark .table th,
html.dark .table td {
  border-color: var(--dm-border);
}
html.dark .table thead th {
  background-color: var(--dm-surface-alt);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html.dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.03);
}
html.dark .table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.06);
  color: var(--dm-text);
}
html.dark .table-bordered {
  border-color: var(--dm-border);
}

/* ---------- Forms ---------- */
html.dark .form-control,
html.dark select.form-control,
html.dark textarea {
  background-color: var(--dm-surface-alt);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .form-control:focus {
  background-color: var(--dm-surface-alt);
  color: var(--dm-text);
}
html.dark .form-control::placeholder {
  color: var(--dm-text-muted);
}
html.dark .form-control[readonly],
html.dark .form-control:disabled {
  background-color: var(--dm-surface);
  color: var(--dm-text-muted);
}
html.dark .input-group-append .btn,
html.dark .input-group-text {
  background-color: var(--dm-surface-alt);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .custom-control-label {
  color: var(--dm-text);
}
html.dark .custom-control-label::before {
  background-color: var(--dm-surface-alt);
  border-color: var(--dm-border);
}
/* SB Admin 2 hardcodes #858796 (calibrated for a white background) for a
   disabled checkbox/radio's label -- needs its own dark-mode value, and
   needs to match the [disabled]/:disabled sibling-combinator specificity
   to actually win instead of losing to it. */
html.dark .custom-control-input[disabled] ~ .custom-control-label,
html.dark .custom-control-input:disabled ~ .custom-control-label {
  color: var(--dm-text-muted);
}

/* ---------- Buttons ---------- */
/* Solid buttons rendered as <a> tags (e.g. "Back" links styled as buttons)
   otherwise lose their text color to the generic `html.dark a` link-color
   rule below, since that rule's specificity (2 type selectors) beats a
   plain `.btn-secondary` class selector (1 class) -- these explicit
   two-class overrides win on specificity regardless of tag. */
html.dark a.btn-primary,
html.dark a.btn-secondary,
html.dark a.btn-success,
html.dark a.btn-danger,
html.dark a.btn-info,
html.dark a.btn-dark {
  color: #fff;
}
html.dark a.btn-warning {
  color: #212529;
}
html.dark .btn-outline-secondary {
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html.dark .btn-outline-secondary:hover {
  background-color: var(--dm-surface-alt);
  color: #fff;
}
html.dark .btn-outline-primary {
  color: #8ab4ff;
  border-color: #8ab4ff;
}
html.dark .btn-outline-primary:hover {
  background-color: #375a9e;
  color: #fff;
}
html.dark .btn-light {
  background-color: var(--dm-surface-alt);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* ---------- Dropdowns / modals / popovers ---------- */
html.dark .dropdown-menu {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
html.dark .dropdown-item {
  color: var(--dm-text);
}
html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
  background-color: var(--dm-surface-alt);
  color: #fff;
}
html.dark .dropdown-divider {
  border-color: var(--dm-border);
}
html.dark .modal-content {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
/* Base list-group-item: Bootstrap 4.6.0 itself hardcodes background-color:#fff
   with no dark variant at all -- only the color-flavored variants below had a
   dark override, so a plain `.list-group-item` with no `-primary`/`-warning`/
   etc. class (e.g. pages/client-profile.php's Recent Activity feed) rendered
   as a solid white row on an otherwise dark page. Placed before the variant
   rules below: those are equal specificity to this one, so source order
   decides, and an element carrying both classes (e.g. dashboard.php's
   "list-group-item list-group-item-primary") needs its variant's color to
   still win. */
html.dark .list-group-item { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); }
html.dark .list-group-item-warning   { background-color: rgba(255, 167, 11, .16); color: #f2c876; border-color: rgba(255, 167, 11, .3); }
html.dark .list-group-item-danger    { background-color: rgba(211, 64, 83, .18); color: #f2b4bb; border-color: rgba(211, 64, 83, .3); }
html.dark .list-group-item-secondary { background-color: var(--dm-surface-alt); color: var(--dm-text-muted); border-color: var(--dm-border); }
html.dark .list-group-item-dark      { background-color: var(--dm-surface-alt); color: var(--dm-text); border-color: var(--dm-border); }
html.dark .list-group-item-primary   { background-color: rgba(60, 80, 224, .22); color: #a9b6f5; border-color: rgba(60, 80, 224, .35); }
html.dark .modal-header,
html.dark .modal-footer {
  border-color: var(--dm-border);
}
html.dark .close {
  color: var(--dm-text);
  text-shadow: none;
}

/* ---------- Alerts (keep semantic tints, just soften for dark background) ---------- */
html.dark .alert-info    { background-color: #16333f; border-color: #1f4a5c; color: #b7e3f2; }
html.dark .alert-success { background-color: #16321f; border-color: #205a34; color: #b6e8c4; }
html.dark .alert-warning { background-color: #3a2f12; border-color: #5c4a1a; color: #f2dca0; }
html.dark .alert-danger  { background-color: #3a1418; border-color: #5c2027; color: #f2b4bb; }

/* ---------- Pagination ---------- */
html.dark .page-link {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .page-item.disabled .page-link {
  background-color: var(--dm-surface-alt);
  color: var(--dm-text-muted);
}
html.dark .page-item.active .page-link {
  background-color: #4e73df;
  border-color: #4e73df;
  color: #fff;
}

/* ---------- Tabs (Rota Tools etc.) ---------- */
html.dark .nav-tabs {
  border-color: var(--dm-border);
}
html.dark .nav-tabs .nav-link {
  color: var(--dm-text-muted);
}
html.dark .nav-tabs .nav-link.active {
  background-color: var(--dm-surface);
  border-color: var(--dm-border) var(--dm-border) var(--dm-surface);
  color: var(--dm-text);
}
html.dark .tab-content.border {
  border-color: var(--dm-border) !important;
}

/* ---------- Footer / scroll-to-top ---------- */
html.dark .sticky-footer.bg-white {
  background-color: var(--dm-surface) !important;
  border-top: 1px solid var(--dm-border);
  color: var(--dm-text-muted);
}
html.dark .scroll-to-top {
  background-color: var(--dm-surface-alt);
}

/* ---------- Login / auth page ---------- */
html.dark body.bg-gradient-primary {
  background-color: var(--dm-bg);
  background-image: none;
}

/* ---------- Theme toggle switch (base look lives in theme.css) ---------- */
html.dark .dm-switch {
  background: var(--dm-surface-alt);
}
html.dark .dm-switch.on {
  background: var(--primary);
}

/* ---------- Team Today dashboard widget (base look lives in theme.css) ---------- */
html.dark .team-today-panel {
  background: var(--dm-surface-alt);
  border-color: var(--dm-border);
}
html.dark .team-today-panel-header,
html.dark .team-today-empty {
  color: var(--dm-text-muted);
}
