/* Alliance design tokens — dark mode overrides */

[data-theme="dark"] {

  /* Brand — alliance slate (#304A63), unified with the light-mode brand.
     The base is dark, so interactive states LIFT lighter on hover (a lighter
     slate reads on the #121212 page, where darkening would just sink in).
     Same family / same gradient structure as before — only the direction of
     the shift flips (darker→lighter) to suit the darker base. */
  --primary: #304a63;
  --primary-hover: #3b5d7d;                /* lighter lift on hover */
  --primary-contrast: #ffffff;             /* 9.2:1 on --primary (AAA) */
  --primary-accent: #7195b7;               /* light slate — for icon/accent tints that
                                              must stay visible on dark chrome (#121212) */
  --primary-soft: rgba(48, 74, 99, 0.22);          /* 48,74,99 = #304A63; alpha lifted so the
                                                      darker base still reads as a tint */
  --primary-soft-strong: rgba(48, 74, 99, 0.42);

  --primary-gradient-light: linear-gradient(180deg, #304a63 0%, #436a8e 100%);  /* base → lighter */
  --primary-gradient-dark: linear-gradient(180deg, #3b5d7d 0%, #304a63 100%);   /* lift → base (default fill) */
  --primary-gradient-hover: linear-gradient(180deg, #436a8e 0%, #3b5d7d 100%);  /* lifts lighter on hover */

  --state-color: var(--primary);
  --state-darker-color: #3a4250;
  --state-lighter-color: #7e8a9c;
  --state-contrast-color: var(--primary-contrast);
  --light-primary: #7e8a9c;
  --dark-primary: #3a4250;
  --dash-dark: #3a4250;

  --primary-up-1: color-mix(in srgb, var(--primary) 80%, #ffffff);
  --primary-up-2: color-mix(in srgb, var(--primary) 60%, #ffffff);
  --primary-down-1: color-mix(in srgb, var(--primary) 80%, #000000);
  --primary-down-2: color-mix(in srgb, var(--primary) 60%, #000000);
  --primary-soft-08: color-mix(in srgb, var(--primary) 14%, transparent);
  --primary-soft-14: color-mix(in srgb, var(--primary) 22%, transparent);
  --primary-soft-22: color-mix(in srgb, var(--primary) 32%, transparent);

  /* Surfaces */
  --surface-base: #121212;   /* near-black surface (also resolves to --surface-dark and --card-bg) */
  --surface-deep: #222222;   /* dark-mode page bg — softer than --surface-base */
  --surface-1: #2c2c2e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --surface-overlay: rgba(0, 0, 0, 0.55);
  --surface-translucent: rgba(28, 28, 30, 0.72);
  --surface-translucent-strong: rgba(44, 44, 46, 0.85);

  --surface-light: var(--surface-1);
  --surface-light-alt: var(--surface-2);
  --surface-light-hover: var(--surface-3);
  --surface-dark: var(--surface-base);
  --surface-dark-alt: var(--surface-1);
  --surface-dark-hover: var(--surface-2);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(235, 235, 245, 0.78);
  --text-tertiary: rgba(235, 235, 245, 0.55);
  --text-disabled: rgba(235, 235, 245, 0.35);
  --text-inverse: #000000;
  --text-on-primary: var(--primary-contrast);
  --text-link: var(--primary);

  --text-on-light: rgba(0, 0, 0, 0.65);
  --text-on-dark: var(--text-primary);
  --text-white: #ffffff;
  --text-black: #ffffff;
  --text-link: #a3cfff;          /* clear sky-blue, link affordance preserved, AAA on black */
  --text-link-hover: #cce3ff;    /* lifted on hover */

  /* Borders */
  --border-strong: #38383a;
  --border-subtle: rgba(84, 84, 88, 0.65);
  --border-translucent: rgba(255, 255, 255, 0.06);

  --border-light: rgba(220, 232, 244, 0.12);
  --border-dark: var(--border-subtle);

  /* Chart palette (brighter for OLED contrast against black) */
  --chart-1: #0a84ff;
  --chart-2: #30d158;
  --chart-3: #ff9f0a;
  --chart-4: #bf5af2;
  --chart-5: #ff453a;
  --chart-6: #64d2ff;
  --chart-7: #8e8e93;
  --chart-8: #ffd60a;
  --chart-grid: rgba(235, 235, 245, 0.10);
  --chart-axis-label: var(--text-secondary);

  /* Semantic */
  --success: #30d158;
  --success-soft: rgba(48, 209, 88, 0.18);
  --warning: #ff9f0a;
  --warning-soft: rgba(255, 159, 10, 0.18);
  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.18);
  --info: #0a84ff;
  --info-soft: rgba(10, 132, 255, 0.18);

  --sidebar-bg-dark: linear-gradient(180deg, #121212 0%, #2c2c2e 100%);
  --sidebar-text: rgba(255, 255, 255, 0.82);
  --sidebar-text-strong: #ffffff;
  --sidebar-divider: rgba(255, 255, 255, 0.08);
  --sidebar-active-dark: var(--primary-soft-strong);
  --sidebar-active-dark-border: var(--primary-accent);   /* crisp edge on the active item — --primary slate is too faint on the dark sidebar */
  --sidebar-hover-dark: rgba(255, 255, 255, 0.06);
  --sidebar-brand-bg-dark: #121212;

  /* Navbar — intentionally NOT inheriting sidebar gradient */
  --navbar-bg-dark: #121212;
  --navbar-bg: var(--navbar-bg-dark);
  --navbar-border: var(--border-subtle);
  --navbar-text: var(--text-secondary);
  --navbar-shadow: 0 16px 36px rgba(0, 0, 0, 0.50);

  /* Component slots */
  --card-bg: var(--surface-base);   /* simple alias — single source of truth for all card backgrounds */
  --card-border: var(--border-subtle);

  --input-bg: rgba(118, 118, 128, 0.24);
  --input-border: var(--border-strong);
  --input-focus-ring: color-mix(in srgb, var(--primary) 50%, transparent);

  --modal-bg: #48484a; /* one tier brighter than --surface-3 so it lifts off pure-black body */
  --modal-scrim: rgba(0, 0, 0, 0.75);
  --modal-border: rgba(255, 255, 255, 0.20);
  --modal-edge-highlight: rgba(255, 255, 255, 0.12);
  --dropdown-bg: var(--surface-2);

  --shadow-card: none;
  --shadow-overlay: 0 16px 36px rgba(0, 0, 0, 0.50);

  /* Bootstrap bridge */
  --bs-body-bg: var(--surface-deep);
  --bs-body-color: var(--text-primary);
  --bs-card-bg: var(--card-bg);
  --bs-card-color: var(--text-primary);
  --bs-card-border-color: var(--card-border);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-3);
  --bs-border-color: var(--border-strong);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-tertiary);
  --bs-link-color: var(--text-link);
  --bs-link-hover-color: var(--text-link-hover);
  --bs-form-control-bg: var(--input-bg);
  --bs-form-control-color: var(--text-primary);
  --bs-modal-bg: var(--modal-bg);
  --bs-modal-color: var(--text-primary);
  --bs-modal-border-color: var(--card-border);
  --bs-dropdown-bg: var(--dropdown-bg);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--surface-3);
  --bs-dropdown-border-color: var(--card-border);
}

/* Navbar translucent chrome (Apple-style blur) */
[data-theme="dark"] .layout-navbar,
[data-theme="dark"] .navbar.layout-navbar {
  background: var(--navbar-bg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--navbar-border);
}

/* Opaque dropdowns */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .select2-dropdown {
  background: var(--dropdown-bg) !important;
  border: 1px solid var(--card-border) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1 !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: var(--text-primary) !important;
}

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

[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}
/* Choice remove (×) glyph — keep readable on the new solid-blue chip */
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary-contrast) !important;
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-results__option {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_length {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .fc {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .fc .fc-toolbar-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-theme-standard .fc-scrollgrid,
[data-theme="dark"] .fc-theme-standard td,
[data-theme="dark"] .fc-theme-standard th {
  border-color: var(--border-subtle) !important;
}

[data-theme="dark"] .fc .fc-daygrid-day,
[data-theme="dark"] .fc .fc-timegrid-slot {
  background-color: var(--surface-1) !important;
}

[data-theme="dark"] .fc .fc-day-today {
  background-color: var(--primary-soft) !important;
}

[data-theme="dark"] .fc .fc-button {
  background-color: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active,
[data-theme="dark"] .fc .fc-button-primary:not(:disabled):active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

[data-theme="dark"] .map-container,
[data-theme="dark"] .leaflet-container,
[data-theme="dark"] .gm-style,
[data-theme="dark"] .chart-container,
[data-theme="dark"] .chartjs-render-monitor {
  background-color: var(--surface-1) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem var(--input-focus-ring) !important;
}

[data-theme="dark"] .modal-content,
.dark-style .modal-content {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--modal-border) !important;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.85),
    0 12px 24px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 var(--modal-edge-highlight) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
.dark-style .modal-header,
.dark-style .modal-footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Modal body + footer share the modal surface (#48484A in dark) so the
   content reads as one elevated panel against the dark scrim. */
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer,
.dark-style .modal-body,
.dark-style .modal-footer {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-backdrop.show,
.dark-style .modal-backdrop.show {
  opacity: 1;
  background-color: var(--modal-scrim) !important;
}

[data-theme="dark"] .modal .modal-header .btn-close,
[data-theme="dark"] .modal .modal-content>.btn-close {
  background-color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.45);
  filter: none !important;
}

[data-theme="dark"] .modal-footer .btn-secondary,
[data-theme="dark"] .modal-footer .btn-outline-secondary,
[data-theme="dark"] .modal-footer .btn-label-secondary,
[data-theme="dark"] .modal-footer .btn-outline-primary,
[data-theme="dark"] .modal-footer .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-close) {
  background-color: #ffffff !important;
  color: #1c1c1e !important;
  border: 1px solid #ffffff !important;
}
[data-theme="dark"] .modal-footer .btn-secondary:hover,
[data-theme="dark"] .modal-footer .btn-outline-secondary:hover,
[data-theme="dark"] .modal-footer .btn-label-secondary:hover,
[data-theme="dark"] .modal-footer .btn-outline-primary:hover,
[data-theme="dark"] .modal-footer .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-close):hover {
  background-color: #e5e5ea !important;
  color: #000000 !important;
  border-color: #e5e5ea !important;
}

.dark-style .ui-refined-layout #layout-menu.alliance-sidebar.bg-menu-theme,
.dark-style .ui-refined-layout #layout-menu.alliance-sidebar,
[data-theme="dark"] .ui-refined-layout #layout-menu.alliance-sidebar.bg-menu-theme,
[data-theme="dark"] .ui-refined-layout #layout-menu.alliance-sidebar {
  background: var(--sidebar-bg-dark) !important;
  background-color: transparent !important;
}

.dark-style .menu-vertical .menu-inner,
[data-theme="dark"] .menu-vertical .menu-inner {
  background: linear-gradient(180deg, #121212 0%, #202020 100%) !important;
  background-color: transparent !important;
}

.dark-style .ui-refined-layout #layout-menu.alliance-sidebar .alliance-sidebar-brand,
.dark-style .ui-refined-layout #layout-menu.alliance-sidebar .app-brand,
.dark-style .ui-refined-layout .menu-vertical .app-brand,
[data-theme="dark"] .ui-refined-layout #layout-menu.alliance-sidebar .alliance-sidebar-brand,
[data-theme="dark"] .ui-refined-layout #layout-menu.alliance-sidebar .app-brand,
[data-theme="dark"] .ui-refined-layout .menu-vertical .app-brand {
  background: #121212 !important;
  background-color: #121212 !important;
}

/* Dark-mode text-visibility overrides */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-select {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-control::-webkit-input-placeholder,
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field::placeholder,
[data-theme="dark"] .select2-search--dropdown .select2-search__field::placeholder {
  color: rgba(235, 235, 245, 0.55) !important;
  opacity: 1 !important;
}

[data-theme="dark"] table,
[data-theme="dark"] table tbody td,
[data-theme="dark"] table tbody th,
[data-theme="dark"] .table,
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th,
[data-theme="dark"] .dataTables_wrapper table tbody td,
[data-theme="dark"] .dataTables_wrapper table tbody th {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > *,
[data-theme="dark"] table.dataTable > tbody > tr.odd > *,
[data-theme="dark"] table.dataTable > tbody > tr.even > *,
[data-theme="dark"] table.dataTable > tbody > tr:nth-child(odd) > *,
[data-theme="dark"] table.dataTable > tbody > tr:nth-child(even) > * {
  color: var(--text-primary) !important;
}

/* Table bg + striping + hover + borders + links — supersede Bootstrap/Vuexy
   defaults (which paint odd rows with `--bs-emphasis-color-rgb` tinted in
   maroon/red on dark mode). */
[data-theme="dark"] .table,
.dark-style .table {
  --bs-table-bg: var(--surface-1);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--text-primary);
  /* Distinct slate-tinted hover — must clearly differ from the even row
     (#2c2c2e) and the odd stripe, not the old near-invisible white 6%. */
  --bs-table-hover-bg: color-mix(in srgb, var(--primary-accent) 35%, var(--surface-3));
  --bs-table-hover-color: var(--text-primary);
  --bs-table-accent-bg: transparent;
  background-color: var(--surface-1) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .table > :not(caption) > * > *,
.dark-style .table > :not(caption) > * > * {
  background-color: var(--bs-table-bg) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-subtle) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="dark"] table.dataTable.stripe > tbody > tr.odd > *,
[data-theme="dark"] table.dataTable.display > tbody > tr.odd > *,
[data-theme="dark"] table.dataTable > tbody > tr:nth-of-type(odd) > *,
.dark-style .table-striped > tbody > tr:nth-of-type(odd) > *,
.dark-style table.dataTable.stripe > tbody > tr.odd > *,
.dark-style table.dataTable.display > tbody > tr.odd > *,
.dark-style table.dataTable > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-striped-bg) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-theme="dark"] table.dataTable.hover > tbody > tr:hover > *,
[data-theme="dark"] table.dataTable.display > tbody > tr:hover > *,
.dark-style .table-hover > tbody > tr:hover > *,
.dark-style table.dataTable.hover > tbody > tr:hover > *,
.dark-style table.dataTable.display > tbody > tr:hover > * {
  background-color: var(--bs-table-hover-bg) !important;
}

/* Row hover — distinct slate tint for EVERY dark datatable, not just the
   .table-hover / .dataTable.hover / .display ones above. Covers plain .table,
   .table-striped (e.g. the plan list), .dataTable(.stripe/.display) and the
   refined-layout tables. High specificity + !important so it beats the
   odd-stripe rules AND the style.css `.ui-refined-layout .table … tr:hover td`
   rule that resolved hover to surface-2 (= the even row). Opaque so every
   hovered row reads the same regardless of its odd/even base. */
[data-theme="dark"] .table > tbody > tr:hover > td,
[data-theme="dark"] .table > tbody > tr:hover > th,
[data-theme="dark"] .table-striped > tbody > tr:hover > td,
[data-theme="dark"] table.dataTable > tbody > tr:hover > td,
[data-theme="dark"] table.dataTable.stripe > tbody > tr:hover > td,
[data-theme="dark"] table.dataTable.display > tbody > tr:hover > td,
[data-theme="dark"] .ui-refined-layout .table tbody tr:hover > td,
[data-theme="dark"] .ui-refined-layout .table tbody tr:hover > th,
.dark-style .table > tbody > tr:hover > td,
.dark-style .table > tbody > tr:hover > th,
.dark-style .table-striped > tbody > tr:hover > td,
.dark-style table.dataTable > tbody > tr:hover > td,
.dark-style table.dataTable.stripe > tbody > tr:hover > td,
.dark-style table.dataTable.display > tbody > tr:hover > td,
.dark-style .ui-refined-layout .table tbody tr:hover > td,
.dark-style .ui-refined-layout .table tbody tr:hover > th {
  background-color: var(--bs-table-hover-bg, color-mix(in srgb, var(--primary-accent) 35%, var(--surface-3))) !important;
}

/* Table header — graphite surface, secondary text */
[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] table.dataTable > thead > tr > th,
.dark-style .table > thead > tr > th,
.dark-style table.dataTable > thead > tr > th {
  background-color: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border-strong) !important;
}

/* Links inside tables — readable on graphite, no harsh navy.
   In dark mode use a soft slate-blue (--text-link is already #8fb5d1). */
[data-theme="dark"] .table a,
[data-theme="dark"] table.dataTable a,
[data-theme="dark"] .dataTables_wrapper table a,
[data-theme="dark"] table.dataTable a.event-link,
[data-theme="dark"] .dataTable a.event-link,
.dark-style .table a,
.dark-style table.dataTable a,
.dark-style .dataTables_wrapper table a,
.dark-style table.dataTable a.event-link,
.dark-style .dataTable a.event-link {
  color: var(--text-link) !important;
  text-decoration: none !important;
}
[data-theme="dark"] .table a:hover,
[data-theme="dark"] table.dataTable a:hover,
[data-theme="dark"] .dataTables_wrapper table a:hover,
.dark-style .table a:hover,
.dark-style table.dataTable a:hover,
.dark-style .dataTables_wrapper table a:hover {
  color: var(--text-link-hover) !important;
  text-decoration: underline !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder {
  color: rgba(235, 235, 245, 0.55) !important;
}

[data-theme="dark"] .form-label,
[data-theme="dark"] label,
[data-theme="dark"] .form-text,
[data-theme="dark"] small.form-text {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .form-text.text-muted,
[data-theme="dark"] small.text-muted,
[data-theme="dark"] .text-muted {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] table tbody tr td *,
[data-theme="dark"] .table tbody tr td *,
[data-theme="dark"] .dataTables_wrapper table tbody tr td *,
[data-theme="dark"] table tbody tr td span,
[data-theme="dark"] table tbody tr td div,
[data-theme="dark"] table tbody tr td small,
[data-theme="dark"] table tbody tr td p {
  color: var(--text-primary) !important;
}
[data-theme="dark"] table tbody tr td a,
[data-theme="dark"] .table tbody tr td a,
[data-theme="dark"] .dataTables_wrapper table tbody tr td a {
  color: var(--text-link) !important;
  text-decoration: underline;
}
[data-theme="dark"] table tbody tr td a:hover,
[data-theme="dark"] .table tbody tr td a:hover {
  color: var(--text-link-hover) !important;
}
[data-theme="dark"] table tbody tr td .text-muted,
[data-theme="dark"] table tbody tr td .text-secondary,
[data-theme="dark"] table tbody tr td small.text-muted {
  color: var(--text-secondary) !important;
}

/* Semantic STATUS colours must survive in dark table cells — the `td *`/`td p` rule above
   forces --text-primary (white) and out-specifies Bootstrap's .text-success/.warning/.danger.
   Re-assert the semantic tokens at higher specificity so status (e.g. Completed/Running/Error) stays coloured. */
[data-theme="dark"] table tbody tr td .text-success,
[data-theme="dark"] .table tbody tr td .text-success,
[data-theme="dark"] .dataTables_wrapper table tbody tr td .text-success {
  color: var(--success) !important;
}
[data-theme="dark"] table tbody tr td .text-warning,
[data-theme="dark"] .table tbody tr td .text-warning,
[data-theme="dark"] .dataTables_wrapper table tbody tr td .text-warning {
  color: var(--warning) !important;
}
[data-theme="dark"] table tbody tr td .text-danger,
[data-theme="dark"] .table tbody tr td .text-danger,
[data-theme="dark"] .dataTables_wrapper table tbody tr td .text-danger {
  color: var(--danger) !important;
}
[data-theme="dark"] table tbody tr td .text-info,
[data-theme="dark"] .table tbody tr td .text-info,
[data-theme="dark"] .dataTables_wrapper table tbody tr td .text-info {
  color: var(--info) !important;
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn.btn-outline-primary,
[data-theme="dark"] .btn.btn-outline-secondary {
  color: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  background-color: transparent !important;
}
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn.btn-outline-primary:hover,
[data-theme="dark"] .btn.btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
}

/* Mapbox loads a native dark style (dark-v11) via JS in dark mode, so it must NOT be
   CSS-inverted: inverting double-darkens the tiles back to LIGHT (dark land #1f1f1f ->
   ~#bbbbbb) and hue-rotates the heatmap (red dots -> orange). Only Leaflet uses light
   raster tiles that need the invert trick, so scope these rules to Leaflet only.
   Do NOT add #map-graph / .mapboxgl-map back here. */
[data-theme="dark"] .leaflet-container {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.95);
}
[data-theme="dark"] .leaflet-container img {
  filter: invert(1) hue-rotate(180deg);
}

[data-theme="dark"] .bs-stepper,
[data-theme="dark"] .bs-stepper-header,
[data-theme="dark"] .bs-stepper-content,
[data-theme="dark"] .bs-stepper .step,
[data-theme="dark"] .bs-stepper .step-trigger {
  background-color: transparent !important;
  background: transparent !important;
}
[data-theme="dark"] .bs-stepper {
  background-color: var(--surface-1) !important;
}
[data-theme="dark"] .bs-stepper .step-trigger {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .bs-stepper .step-trigger:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .bs-stepper .bs-stepper-title,
[data-theme="dark"] .bs-stepper .step .step-trigger .bs-stepper-label .bs-stepper-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .bs-stepper .step:not(.active) .bs-stepper-title {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .bs-stepper .bs-stepper-circle {
  background-color: var(--surface-3) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}
[data-theme="dark"] .bs-stepper .step.active .bs-stepper-circle {
  background: var(--primary-gradient-dark) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
}
[data-theme="dark"] .bs-stepper .step.crossed .bs-stepper-circle {
  background-color: var(--success) !important;
  color: var(--text-white) !important;
}
[data-theme="dark"] .bs-stepper-line,
[data-theme="dark"] .bs-stepper .line {
  background-color: var(--border-strong) !important;
}

/* ------------------------------------------------------------------
   Vertical / wizard-vertical stepper — supersede the slate-navy gradients
   in style.css §7400+ that affect both DRE and SVR DPS wizards.
   High specificity so we beat .dark-style .bs-stepper.wizard-vertical
   .bs-stepper-header .step:not(.active) .step-trigger (0,5,0).
   ------------------------------------------------------------------ */

[data-theme="dark"] .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger,
[data-theme="dark"] .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger,
.dark-style .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger,
.dark-style .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
[data-theme="dark"] .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
.dark-style .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
.dark-style .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover {
  background: var(--surface-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover *,
[data-theme="dark"] .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover *,
.dark-style .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover *,
.dark-style .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover * {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .bs-stepper.vertical .bs-stepper-header .step.active .step-trigger,
[data-theme="dark"] .bs-stepper.wizard-vertical .bs-stepper-header .step.active .step-trigger,
.dark-style .bs-stepper.vertical .bs-stepper-header .step.active .step-trigger,
.dark-style .bs-stepper.wizard-vertical .bs-stepper-header .step.active .step-trigger {
  background: var(--primary-gradient-dark) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}
[data-theme="dark"] .bs-stepper.vertical .bs-stepper-header .step.active .step-trigger *,
[data-theme="dark"] .bs-stepper.wizard-vertical .bs-stepper-header .step.active .step-trigger *,
.dark-style .bs-stepper.vertical .bs-stepper-header .step.active .step-trigger *,
.dark-style .bs-stepper.wizard-vertical .bs-stepper-header .step.active .step-trigger * {
  color: var(--primary-contrast) !important;
}

[data-theme="dark"] .bs-stepper.vertical .bs-stepper-header .step:not(.active) .bs-stepper-circle,
[data-theme="dark"] .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .bs-stepper-circle,
.dark-style .bs-stepper.vertical .bs-stepper-header .step:not(.active) .bs-stepper-circle,
.dark-style .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .bs-stepper-circle {
  background: var(--surface-3) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}

[data-theme="dark"] .bs-stepper.vertical .bs-stepper-header .step.active .bs-stepper-circle,
[data-theme="dark"] .bs-stepper.wizard-vertical .bs-stepper-header .step.active .bs-stepper-circle,
[data-theme="dark"] .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover .bs-stepper-circle,
[data-theme="dark"] .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover .bs-stepper-circle,
.dark-style .bs-stepper.vertical .bs-stepper-header .step.active .bs-stepper-circle,
.dark-style .bs-stepper.wizard-vertical .bs-stepper-header .step.active .bs-stepper-circle,
.dark-style .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover .bs-stepper-circle,
.dark-style .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover .bs-stepper-circle {
  background: rgba(255, 255, 255, 0.16) !important;
  color: var(--primary-contrast) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}


/* ------------------------------------------------------------------
   Flatpickr — dark-mode tokenization. Supersedes style.css §2922–2962
   (which uses `#161d31` navy border + `#202020` body + slate var calls).
   Use graphite surfaces matching the dropdown style.
   ------------------------------------------------------------------ */

[data-theme="dark"] .flatpickr-calendar,
.dark-style .flatpickr-calendar {
  background: var(--dropdown-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month .numInputWrapper,
[data-theme="dark"] .flatpickr-current-month input.cur-year,
.dark-style .flatpickr-months,
.dark-style .flatpickr-month,
.dark-style .flatpickr-current-month,
.dark-style .flatpickr-monthDropdown-months,
.dark-style .flatpickr-current-month .numInputWrapper,
.dark-style .flatpickr-current-month input.cur-year {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month,
.dark-style .flatpickr-prev-month,
.dark-style .flatpickr-next-month {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}
[data-theme="dark"] .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-next-month svg,
.dark-style .flatpickr-prev-month svg,
.dark-style .flatpickr-next-month svg {
  fill: var(--text-primary) !important;
}
[data-theme="dark"] .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-next-month:hover,
.dark-style .flatpickr-prev-month:hover,
.dark-style .flatpickr-next-month:hover {
  background-color: var(--surface-2) !important;
}

[data-theme="dark"] .flatpickr-weekday,
.dark-style .flatpickr-weekday {
  color: var(--text-secondary) !important;
  background: transparent !important;
}

[data-theme="dark"] .flatpickr-days,
.dark-style .flatpickr-days {
  background: transparent !important;
  border: 0 !important;
}

[data-theme="dark"] .flatpickr-day,
.dark-style .flatpickr-day {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .flatpickr-day:hover,
.dark-style .flatpickr-day:hover {
  background: var(--surface-2) !important;
  border-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-day.nextMonthDay,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
.dark-style .flatpickr-day.nextMonthDay,
.dark-style .flatpickr-day.prevMonthDay,
.dark-style .flatpickr-day.flatpickr-disabled {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .flatpickr-day.today,
.dark-style .flatpickr-day.today {
  border-color: var(--primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.selected:hover,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange,
.dark-style .flatpickr-day.selected,
.dark-style .flatpickr-day.selected:hover,
.dark-style .flatpickr-day.startRange,
.dark-style .flatpickr-day.endRange {
  background: var(--primary-gradient-dark) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .flatpickr-time,
.dark-style .flatpickr-time {
  background: var(--dropdown-bg) !important;
  border-top: 1px solid var(--border-subtle) !important;
}
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm,
.dark-style .flatpickr-time input,
.dark-style .flatpickr-time .flatpickr-am-pm {
  background: transparent !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .flatpickr-time input:hover,
[data-theme="dark"] .flatpickr-time input:focus,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus,
.dark-style .flatpickr-time input:hover,
.dark-style .flatpickr-time input:focus,
.dark-style .flatpickr-time .flatpickr-am-pm:hover,
.dark-style .flatpickr-time .flatpickr-am-pm:focus {
  background: var(--surface-2) !important;
}

[data-theme="dark"] .flatpickr-monthDropdown-months option,
.dark-style .flatpickr-monthDropdown-months option {
  background: var(--dropdown-bg) !important;
  color: var(--text-primary) !important;
}


/* ------------------------------------------------------------------
   Select2 — global dark-mode override. Supersedes style.css §836+
   which uses `#2f3349` (navy) + `#fff` border + `#b6bee3` text.
   Apply alliance graphite tokens so all dropdowns match the theme.
   ------------------------------------------------------------------ */

[data-theme="dark"] .select2-container--default .select2-selection,
[data-theme="dark"] .select2-container .select2-selection,
.dark-style .select2-container--default .select2-selection,
.dark-style .select2-container .select2-selection {
  background-color: var(--surface-2) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection,
[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection,
[data-theme="dark"] .select2-container.select2-container--focus .select2-selection,
[data-theme="dark"] .select2-container.select2-container--open .select2-selection,
.dark-style .select2-container--default.select2-container--focus .select2-selection,
.dark-style .select2-container--default.select2-container--open .select2-selection,
.dark-style .select2-container.select2-container--focus .select2-selection,
.dark-style .select2-container.select2-container--open .select2-selection {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem var(--input-focus-ring) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered,
.dark-style .select2-container--default .select2-selection__rendered,
.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered,
.dark-style .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection__placeholder,
[data-theme="dark"] .select2-container .select2-selection__placeholder,
.dark-style .select2-container--default .select2-selection__placeholder,
.dark-style .select2-container .select2-selection__placeholder {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
.dark-style .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary) !important;
}

/* (deleted: earlier .custom-card gradient override is no longer needed
   — every .custom-card rule across style.css / style_dre.css / tokens
   now resolves background through var(--card-bg) directly.) */
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.dark-style .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary-contrast) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
.dark-style .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--surface-1) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field,
.dark-style .select2-container--default .select2-search--inline .select2-search__field {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .select2-container--default .select2-search__field::-webkit-input-placeholder,
[data-theme="dark"] .select2-container--default .select2-search__field::placeholder,
.dark-style .select2-container--default .select2-search__field::-webkit-input-placeholder,
.dark-style .select2-container--default .select2-search__field::placeholder {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection,
.dark-style .select2-container--default.select2-container--disabled .select2-selection {
  background-color: var(--surface-1) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-tertiary) !important;
}


/* ------------------------------------------------------------------
   FullCalendar — semantic event colors. The legacy palette
   (`#384955` finalized / `#4c5f71` draft) is slate-blue and clashes
   with the alliance graphite theme. JS bridge tokens follow.
   ------------------------------------------------------------------ */

/* NOTE: intentionally NOT on :root — these dark values must only apply in dark
   mode. alliance-dark.css is always loaded, so a :root here would override the
   light values (e.g. --row-stale-bg #ffe4e4) since this file loads last. */
[data-theme="dark"],
.dark-style {
  --event-finalized: #5a5a5c;   /* graphite, committed — pops on pure black body */
  --event-draft: #8a8a8c;       /* lighter graphite, in-progress */
  /* Stale-row indicator (event report >6 days late, .report-tr). */
  --row-stale-bg: #7c2c2e;
  --row-stale-border: #ff4c51;
  --row-stale-text: var(--text-primary);
}

[data-theme="dark"] .fc-event,
[data-theme="dark"] .fc-h-event,
[data-theme="dark"] .fc-daygrid-event,
.dark-style .fc-event,
.dark-style .fc-h-event,
.dark-style .fc-daygrid-event {
  border-color: transparent !important;
}

[data-theme="dark"] .fc .fc-toolbar.fc-header-toolbar,
.dark-style .fc .fc-toolbar.fc-header-toolbar {
  border-color: var(--border-subtle) !important;
}


/* ------------------------------------------------------------------
   Stale-event row (.report-tr) — supersedes style.css §3401-3418 +
   §7193-7208 which paint a heavy `#371B1B` / `#b5635e` block over
   the whole row. Use tokenized soft tint + left-edge accent so the
   alert reads but doesn't dominate the table.
   ------------------------------------------------------------------ */

[data-theme="dark"] .report-tr,
[data-theme="dark"] tr.report-tr,
[data-theme="dark"] tr.report-tr.odd,
[data-theme="dark"] tr.report-tr.even,
[data-theme="dark"] tr.report-tr:hover,
.dark-style .report-tr,
.dark-style tr.report-tr,
.dark-style tr.report-tr.odd,
.dark-style tr.report-tr.even,
.dark-style tr.report-tr:hover {
  background-color: var(--row-stale-bg) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

[data-theme="dark"] .report-tr > *,
[data-theme="dark"] tr.report-tr > td,
[data-theme="dark"] tr.report-tr.odd > td,
[data-theme="dark"] tr.report-tr.even > td,
[data-theme="dark"] tr.report-tr:hover > td,
.dark-style .report-tr > *,
.dark-style tr.report-tr > td,
.dark-style tr.report-tr.odd > td,
.dark-style tr.report-tr.even > td,
.dark-style tr.report-tr:hover > td {
  background-color: var(--row-stale-bg) !important;
  color: var(--row-stale-text) !important;
}

/* Refined-layout scope (engagement list uses this wrapper) */
[data-theme="dark"] .ui-refined-layout .table tbody tr.report-tr td,
[data-theme="dark"] .ui-refined-layout .table tbody tr.report-tr.odd td,
[data-theme="dark"] .ui-refined-layout .table tbody tr.report-tr.even td,
[data-theme="dark"] .ui-refined-layout .table tbody tr.report-tr:hover td,
.dark-style .ui-refined-layout .table tbody tr.report-tr td,
.dark-style .ui-refined-layout .table tbody tr.report-tr.odd td,
.dark-style .ui-refined-layout .table tbody tr.report-tr.even td,
.dark-style .ui-refined-layout .table tbody tr.report-tr:hover td {
  background: var(--row-stale-bg) !important;
  color: var(--row-stale-text) !important;
}

/* ============================================================
   Dark-mode primary actions — blue accent
   Buttons, nav-pills, nav-tabs, btn-groups: active vs inactive
   variation against #222 page + #2c2c2e card surfaces.
   ============================================================ */

/* .btn-primary — explicit fill (Vuexy default ignores --primary in dark) */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn.btn-primary,
.dark-style .btn-primary,
.dark-style .btn.btn-primary {
  background: var(--primary-gradient-dark) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* Nav-pills — active filled, inactive muted, hover preview */
[data-theme="dark"] .nav-pills .nav-link,
.dark-style .nav-pills .nav-link {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
}
[data-theme="dark"] .nav-pills .nav-link:hover,
.dark-style .nav-pills .nav-link:hover {
  background-color: var(--primary-soft) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .nav-pills .nav-link.active,
[data-theme="dark"] .nav-pills .show > .nav-link,
.dark-style .nav-pills .nav-link.active,
.dark-style .nav-pills .show > .nav-link {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* Nav-tabs rules moved to alliance.css as a base — they now share
   the same pill-fill styling as .nav-pills, in both light and dark. */

/* Btn-group segmented control — active fill, inactive muted, hover preview */
[data-theme="dark"] .btn-group > .btn:not(.active):not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger),
.dark-style .btn-group > .btn:not(.active):not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger) {
  background-color: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .btn-group > .btn:not(.active):not(.btn-primary):hover,
.dark-style .btn-group > .btn:not(.active):not(.btn-primary):hover {
  background-color: var(--primary-soft) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-group > .btn.active,
[data-theme="dark"] .btn-group > input[type="radio"]:checked + .btn,
[data-theme="dark"] .btn-group > input[type="checkbox"]:checked + .btn,
.dark-style .btn-group > .btn.active,
.dark-style .btn-group > input[type="radio"]:checked + .btn,
.dark-style .btn-group > input[type="checkbox"]:checked + .btn {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* schedule-list-tab (custom pill container already styled in alliance.css §864)
   — re-skin in dark mode so the border + active match the blue accent */
[data-theme="dark"] .schedule-list-tab .nav-pills,
.dark-style .schedule-list-tab .nav-pills {
  border-color: var(--primary) !important;
}
[data-theme="dark"] .schedule-list-tab .nav-pills .nav-item:not(:last-child) .nav-link,
.dark-style .schedule-list-tab .nav-pills .nav-item:not(:last-child) .nav-link {
  border-right-color: var(--primary) !important;
}
[data-theme="dark"] .schedule-list-tab .nav-pills .nav-link.active,
.dark-style .schedule-list-tab .nav-pills .nav-link.active {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* ============================================================
   Dark-mode icon tint — navbar, hamburger, sidebar menu icons
   pick up --primary so the chrome reads as one cohesive accent.
   ============================================================ */

/* Navbar font icons + hamburger.
   Must beat style.css:6417 `.dark-style .ui-refined-layout .layout-menu-toggle .ti` (0,4,0)
   and Vuexy `.bg-menu-theme .menu-link i`. Use 5-class chain to win. */
.dark-style .ui-refined-layout .layout-menu-toggle .ti.ti,
.dark-style .ui-refined-layout .layout-navbar .ti.ti,
.dark-style .ui-refined-layout .layout-navbar .nav-link .ti,
.dark-style .ui-refined-layout .layout-navbar .dropdown-toggle .ti,
.dark-style .ui-refined-layout .layout-navbar .dropdown-menu .dropdown-item .ti,
[data-theme="dark"] .ui-refined-layout .layout-menu-toggle .ti.ti,
[data-theme="dark"] .ui-refined-layout .layout-navbar .ti.ti,
[data-theme="dark"] .ui-refined-layout .layout-navbar .nav-link .ti,
[data-theme="dark"] .ui-refined-layout .layout-navbar .dropdown-toggle .ti,
[data-theme="dark"] .ui-refined-layout .layout-navbar .dropdown-menu .dropdown-item .ti {
  color: var(--primary-accent) !important;
}
/* Generic fallback for any nav-bar/menu-toggle icon outside .ui-refined-layout */
html[data-theme="dark"] body .layout-navbar i,
html[data-theme="dark"] body .layout-menu-toggle i,
html.dark-style body .layout-navbar i,
html.dark-style body .layout-menu-toggle i {
  color: var(--primary-accent) !important;
}

/* Navbar inline SVGs — override `stroke`/`fill` attribute values */
[data-theme="dark"] .layout-navbar svg path[stroke]:not([stroke="none"]),
.dark-style .layout-navbar svg path[stroke]:not([stroke="none"]) {
  stroke: var(--primary-accent) !important;
}
[data-theme="dark"] .layout-navbar svg[fill]:not([fill="none"]),
[data-theme="dark"] .layout-navbar svg path[fill]:not([fill="none"]),
.dark-style .layout-navbar svg[fill]:not([fill="none"]),
.dark-style .layout-navbar svg path[fill]:not([fill="none"]) {
  fill: var(--primary-accent) !important;
}

/* Sidebar menu icons — html+body chain + double class trick to beat
   `.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) { color: #fff !important }`
   which has (0,6,0) specificity. Our chain produces (0,7,2). */
html[data-theme="dark"] body .bg-menu-theme.menu-vertical .menu-item .menu-link .menu-icon,
html[data-theme="dark"] body .bg-menu-theme.menu-vertical .menu-item.active .menu-link .menu-icon,
html[data-theme="dark"] body .bg-menu-theme.menu-vertical .menu-item .menu-link i,
html[data-theme="dark"] body .bg-menu-theme.menu-vertical .menu-item.active .menu-link i,
html.dark-style body .bg-menu-theme.menu-vertical .menu-item .menu-link .menu-icon,
html.dark-style body .bg-menu-theme.menu-vertical .menu-item.active .menu-link .menu-icon,
html.dark-style body .bg-menu-theme.menu-vertical .menu-item .menu-link i,
html.dark-style body .bg-menu-theme.menu-vertical .menu-item.active .menu-link i {
  color: var(--menu-icon-color) !important;   /* gold accent — same token as light mode */
}

/* Active sidebar item — text → white on the soft tint (icon stays gold via --menu-icon-color) */
[data-theme="dark"] .menu-vertical .menu-item.active > .menu-link,
[data-theme="dark"] .menu-vertical .menu-item.active > .menu-link > div,
.dark-style .menu-vertical .menu-item.active > .menu-link,
.dark-style .menu-vertical .menu-item.active > .menu-link > div {
  color: var(--sidebar-text-strong) !important;
}

/* ============================================================
   Validation error messages must stay RED in dark mode.
   The dark text rules — `[data-theme="dark"] table tbody tr td *`
   (§539, color: var(--text-primary)) and the .form-label/.form-text
   whitening — turn jQuery-validate / Laravel error text white,
   especially inside tables (e.g. the DRE pulse table). The
   table-scoped selectors below resolve to (0,2,4), beating the
   (0,1,4) `td *` rule. Uses --danger so the red is theme-appropriate.
   ============================================================ */
[data-theme="dark"] .invalid-feedback,
[data-theme="dark"] .text-error,
[data-theme="dark"] .text-danger,
[data-theme="dark"] label.error,
[data-theme="dark"] table tbody tr td .invalid-feedback,
[data-theme="dark"] table tbody tr td .text-error,
[data-theme="dark"] table tbody tr td .text-danger,
[data-theme="dark"] table tbody tr td label.error,
.dark-style .invalid-feedback,
.dark-style .text-error,
.dark-style .text-danger,
.dark-style label.error,
.dark-style table tbody tr td .invalid-feedback,
.dark-style table tbody tr td .text-error,
.dark-style table tbody tr td .text-danger,
.dark-style table tbody tr td label.error {
  color: var(--danger) !important;
}