/* Alliance design tokens — light mode + base */

:root,
[data-theme="light"] {

  /* Primitive grays */
  --gray-0: #ffffff;
  --gray-1: #f8fafc;
  --gray-2: #eef2f6;
  --gray-3: #e2e8f0;
  --gray-4: #cbd5e1;
  --gray-5: #8e8e93;
  --gray-6: #636366;
  --gray-7: #48484a;
  --gray-8: #3a3a3c;
  --gray-9: #2c2c2e;
  --gray-10: #1c1c1e;
  --gray-11: #0e1014;
  --gray-12: #000000;

  /* Brand */
  --primary: #637687;
  --primary-hover: #4c5f71;
  --primary-contrast: #ffffff;
  --primary-soft: rgba(99, 118, 135, 0.08);
  --primary-soft-strong: rgba(99, 118, 135, 0.18);

  --primary-gradient-light: linear-gradient(180deg, #637687 0%, #5e7184 100%);
  --primary-gradient-dark: linear-gradient(180deg, #4c5f71 0%, #637687 100%);
  --primary-gradient-hover: linear-gradient(180deg, #1f2c3c 0%, #4c5f71 100%);

  --state-color: var(--primary);
  --state-darker-color: var(--primary-hover);
  --state-lighter-color: color-mix(in srgb, var(--primary) 40%, #ffffff);
  --state-contrast-color: var(--primary-contrast);
  --light-primary: color-mix(in srgb, var(--primary) 40%, #ffffff);
  --dark-primary: var(--primary-hover);
  --dash-dark: var(--primary-hover);
  --text-white: #ffffff;
  --text-black: #000000;

  --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) 8%, transparent);
  --primary-soft-14: color-mix(in srgb, var(--primary) 14%, transparent);
  --primary-soft-22: color-mix(in srgb, var(--primary) 22%, transparent);

  /* Surfaces */
  --surface-base: #f3f4f6;
  --surface-1: #ffffff;
  --surface-2: #eef2f6;
  --surface-3: #e2e8f0;
  --surface-overlay: rgba(15, 23, 42, 0.45);
  --surface-translucent: rgba(255, 255, 255, 0.72);
  --surface-translucent-strong: rgba(255, 255, 255, 0.85);

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

  /* Text */
  --text-primary: #202020;
  --text-secondary: rgba(32, 32, 32, 0.65);
  --text-tertiary: rgba(32, 32, 32, 0.45);
  --text-disabled: rgba(32, 32, 32, 0.30);
  --text-inverse: #ffffff;
  --text-on-primary: var(--primary-contrast);
  --text-link: var(--primary);
  --text-link-hover: var(--primary-hover);

  --text-on-light: var(--text-secondary);
  --text-on-dark: rgba(214, 227, 239, 1);

  /* Borders */
  --border-strong: #cbd5e1;
  --border-subtle: rgba(15, 23, 42, 0.10);
  --border-translucent: rgba(15, 23, 42, 0.05);

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

  /* Radius — single source of truth. Use --driven-component-radius
     in new code; --radius is kept as a backward-compat alias. */
  --driven-component-radius: 10px;
  --radius: var(--driven-component-radius);
  --radius-pill: 999px;

  /* Chart palette (categorical series — read by alliance-toggle.js) */
  --chart-1: #3474ea;
  --chart-2: #28c76f;
  --chart-3: #ff9f43;
  --chart-4: #7367f0;
  --chart-5: #ea5455;
  --chart-6: #00cfe8;
  --chart-7: #82868b;
  --chart-8: #fdac34;
  --chart-grid: rgba(15, 23, 42, 0.08);
  --chart-axis-label: var(--text-secondary);

  /* Semantic */
  --success: #28c76f;
  --success-soft: rgba(40, 199, 111, 0.10);
  --warning: #ff9f43;
  --warning-soft: rgba(255, 159, 67, 0.10);
  --danger: #ea5455;
  --danger-soft: rgba(234, 84, 85, 0.10);
  --info: #019efb;
  --info-soft: rgba(1, 158, 251, 0.10);

  /* Semantic button gradients (theme-invariant — preserve the refined-layout button look in
     both themes). Mirrors the --primary-gradient-* pattern. */
  --success-gradient: linear-gradient(180deg, #28c76f 0%, #1f9d56 100%);
  --success-gradient-hover: linear-gradient(180deg, #1f9d56 0%, #28c76f 100%);
  --danger-gradient: linear-gradient(180deg, #ea5455 0%, #c93f40 100%);
  --danger-gradient-hover: linear-gradient(180deg, #c93f40 0%, #ea5455 100%);
  --warning-gradient: linear-gradient(180deg, #ff9f43 0%, #e08327 100%);
  --warning-gradient-hover: linear-gradient(180deg, #e08327 0%, #ff9f43 100%);

  /* Data-visualisation category palette (legends, demographic splits, budget bars).
     Bespoke DISTINCT data-series colours; theme-invariant by design so a category keeps its
     colour in both themes (matches the original hardcoded swatches). */
  --legend-male: #93cfd8;
  --legend-female: #e797b9;
  --budget-used: #a50f15;
  --budget-remaining: #ff5a5a;
  --demographic-1: #63abfd;
  --demographic-2: #fb7f8e;
  --demographic-3: #f4b587;
  --demographic-4: #ba91d3;
  --demographic-5: #90f2e0;
  --demographic-6: #98eb9c;
  --demographic-7: #aed663;
  --demographic-8: #d9eeda;

  /* Report row "stale/flagged" state (.report-tr) — fixed muted reds, theme-invariant. */
  --report-stale-bg: #371b1b;        /* dark maroon — refined layout (all themes) + dark .report-tr */
  --report-stale-bg-light: #b5635e;  /* lighter red-brown — non-refined light .report-tr */
  --report-stale-border: #a7453f;    /* non-refined light .report-tr border */

  /* Sidebar */
  --sidebar-bg-light: linear-gradient(180deg, #1f2c3c 0%, #4c5f71 35%, #566173 100%);
  --sidebar-bg-dark: linear-gradient(180deg, #121212 0%, #2c2c2e 100%);
  --sidebar-text: rgba(237, 243, 248, 0.82);
  --sidebar-text-strong: #ffffff;
  /* Menu (sidebar) icon colour */
  --menu-icon-color: #cfd9e6;
  --sidebar-divider: rgba(86, 108, 132, 0.22);
  --sidebar-brand-bg-light: rgba(20, 29, 41, 0.12);
  --sidebar-brand-bg-dark: linear-gradient(180deg, #151d27 0%, #121922 100%);
  --sidebar-active-light: rgba(223, 231, 241, 0.20);
  --sidebar-active-light-border: rgba(162, 196, 232, 0.55);
  --sidebar-active-dark: linear-gradient(180deg, rgba(102, 132, 164, 0.34) 0%, rgba(73, 99, 126, 0.34) 100%);
  --sidebar-active-dark-border: rgba(126, 157, 189, 0.36);
  --sidebar-hover-light: rgba(255, 255, 255, 0.08);
  --sidebar-hover-dark: rgba(255, 255, 255, 0.06);

  /* Navbar */
  --navbar-bg-light: rgba(255, 255, 255, 0.72);
  --navbar-bg-dark: linear-gradient(180deg, #151d27 0%, #121922 100%);
  --navbar-bg: var(--navbar-bg-light);
  --navbar-border-light: rgba(176, 189, 205, 0.45);
  --navbar-border-dark: rgba(86, 108, 132, 0.22);
  --navbar-border: var(--navbar-border-light);
  --navbar-text-light: #58718d;
  --navbar-text-dark: #d3e1ef;
  --navbar-text: var(--navbar-text-light);
  --navbar-shadow-light: 0 16px 36px rgba(71, 85, 105, 0.10);
  --navbar-shadow: var(--navbar-shadow-light);

  /* Component slots */
  --card-bg: var(--surface-1);
  --card-border: var(--border-subtle);

  --input-bg: var(--surface-1);
  --input-border: var(--text-primary);
  --input-focus-ring: color-mix(in srgb, var(--primary) 35%, transparent);

  --modal-bg: var(--surface-1);
  --modal-scrim: var(--surface-overlay);
  --dropdown-bg: var(--surface-1);

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-overlay: 0 16px 36px rgba(71, 85, 105, 0.10);
}

/* Bootstrap bridge */
:root,
[data-theme="light"] {
  --bs-body-bg: var(--surface-base);
  --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);
}

/* Utility classes */
.bg-surface-base {
  background-color: var(--surface-base) !important;
}

.bg-surface-1 {
  background-color: var(--surface-1) !important;
}

.bg-surface-2 {
  background-color: var(--surface-2) !important;
}

.bg-surface-3 {
  background-color: var(--surface-3) !important;
}

.bg-primary-soft {
  background-color: var(--primary-soft) !important;
}

.text-primary-token {
  color: var(--text-primary) !important;
}

.text-secondary-token {
  color: var(--text-secondary) !important;
}

.text-tertiary-token {
  color: var(--text-tertiary) !important;
}

.text-on-primary {
  color: var(--text-on-primary) !important;
}

.border-subtle {
  border-color: var(--border-subtle) !important;
}

.border-strong {
  border-color: var(--border-strong) !important;
}

.border-translucent {
  border-color: var(--border-translucent) !important;
}

/* Navbar theme-toggle button */
.layout-navbar .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0.375rem 0.5rem;
}

.layout-navbar .theme-toggle .theme-icon {
  font-size: 2.16rem;
  line-height: 1;
  color: inherit;
}

.layout-navbar .theme-toggle:hover .theme-icon {
  opacity: 0.85;
}

/* Component overrides — re-route hardcoded grays through tokens */

.dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--card-border) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1 !important;
}

.dropdown-menu .dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

.select2-container--open .select2-dropdown,
.select2-dropdown {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1 !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--text-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-tertiary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.light-style .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 solid primary chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.light-style .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary-contrast) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.select2-container--default .select2-results__option {
  color: var(--text-primary) !important;
}

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

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--primary-soft) !important;
  color: var(--text-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected=true]:hover {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  color: var(--text-secondary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
}

.fc {
  color: var(--text-primary) !important;
}

.fc .fc-toolbar-title {
  color: var(--text-primary) !important;
}

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {
  border-color: var(--border-subtle) !important;
}

.fc .fc-daygrid-day,
.fc .fc-timegrid-slot {
  background-color: var(--surface-1) !important;
}

.fc .fc-day-today {
  background-color: var(--primary-soft) !important;
}

.fc .fc-button {
  background-color: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

.map-container,
.leaflet-container,
.gm-style,
.chart-container,
.chartjs-render-monitor,
#map,
[id^="map-"],
.map,
.mapboxgl-map,
#map-graph {
  background-color: var(--surface-1) !important;
}

.apexcharts-canvas,
.apexcharts-svg,
.apexcharts-inner {
  background: transparent !important;
}

.apexcharts-text,
.apexcharts-xaxis text,
.apexcharts-yaxis text,
.apexcharts-legend-text {
  fill: var(--text-secondary) !important;
  color: var(--text-secondary) !important;
}

.apexcharts-gridline {
  stroke: var(--border-subtle) !important;
}

.apexcharts-tooltip {
  background: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--card-border) !important;
}

.apexcharts-tooltip-title {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--card-border) !important;
}

.apexcharts-menu {
  background: var(--dropdown-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--card-border) !important;
}

canvas[class*="chart"],
.ct-chart,
.chartjs-size-monitor {
  background: transparent !important;
}

.watchlist-card-inner {
  background-color: var(--surface-1) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .watchlist-card-inner {
  background-color: var(--surface-1) !important;
  box-shadow: none !important;
}

.total-cost-item {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .total-cost-item {
  background-color: var(--surface-2) !important;
}

.form-control,
.form-select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.form-control::placeholder {
  color: var(--text-tertiary) !important;
}

[role="textbox"],
span.form-control[role="textbox"],
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--input-border) !important;
}

.form-control:focus,
.form-select:focus,
[role="textbox"]:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem var(--input-focus-ring) !important;
}

.input-group .input-group-text {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-secondary) !important;
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
  border-color: var(--primary) !important;
}

.modal-content {
  position: relative;
  overflow: visible !important;
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--primary-hover) !important;
  border-radius: var(--driven-component-radius) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--card-border) !important;
}

.modal .modal-header {
  background: var(--primary-gradient-dark) !important;
  color: var(--primary-contrast) !important;
  border-bottom: 0 !important;
}
.modal .modal-header .modal-title,
.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header h4,
.modal .modal-header h5,
.modal .modal-header h6 {
  color: var(--primary-contrast) !important;
}
.modal .modal-header .btn-close {
  filter: none;
}

.modal-backdrop.show {
  opacity: 1;
  background-color: var(--modal-scrim) !important;
}

.modal .modal-header {
  position: relative;
  overflow: visible !important;
  padding-right: 3rem;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.modal .modal-header .modal-title,
.modal .modal-header h1.modal-title,
.modal .modal-header h2.modal-title,
.modal .modal-header h3.modal-title,
.modal .modal-header h4.modal-title,
.modal .modal-header h5.modal-title,
.modal .modal-header h6.modal-title {
  color: var(--primary-contrast) !important;
}

.bootbox.modal .modal-title {
  color: var(--primary-contrast) !important;
}

.modal .modal-header .btn-close,
.modal .modal-content>.btn-close,
.ui-refined-layout .modal .modal-header .btn-close,
body:has(.ui-refined-layout) .modal .modal-header .btn-close {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-end: 0.8125rem;
  top: auto;
  right: auto;
  z-index: 5;
  margin: 0;
  width: 0.65rem;
  height: 0.65rem;
  padding: 0.614rem;
  box-sizing: content-box;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232f2b3d'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.65rem auto !important;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0 1px 6px 0 rgba(47, 43, 61, 0.10);
  transform: translate(12px, -12px);
  transition: transform 0.23s ease 0.1s, box-shadow 0.23s ease;
  opacity: 1 !important;
  filter: none !important;
}

.modal .modal-header .btn-close:hover,
.modal .modal-header .btn-close:focus,
.modal .modal-header .btn-close:active,
.modal .modal-content>.btn-close:hover {
  opacity: 1 !important;
  outline: 0;
  transform: translate(9px, -9px);
}

.modal .modal-footer {
  justify-content: flex-end !important;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.modal .modal-body:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.ui-refined-layout .modal .modal-content,
body:has(.ui-refined-layout) .modal .modal-content {
  border-radius: var(--driven-component-radius) !important;
  overflow: visible !important;
}

.light-style .menu-vertical .menu-inner,
[data-theme="light"] .menu-vertical .menu-inner {
  background: transparent !important;
  background-color: transparent !important;
}

/* Sidebar menu icons — gold accent via --menu-icon-color (client-tunable, one
   value for both themes since the sidebar is dark in light + dark mode).
   Theme-agnostic html+body chain (0,6,2) beats Vuexy's active-white rule
   `.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)`
   (0,6,0) in every theme state (default / light-style / data-theme). The dark
   mirror in alliance-dark.css carries higher specificity but resolves the same
   token, so the colour is identical. */
html body .bg-menu-theme.menu-vertical .menu-item .menu-link .menu-icon,
html body .bg-menu-theme.menu-vertical .menu-item.active .menu-link .menu-icon,
html body .bg-menu-theme.menu-vertical .menu-item .menu-link i,
html body .bg-menu-theme.menu-vertical .menu-item.active .menu-link i {
  color: var(--menu-icon-color) !important;
}

/* Primary button hover deepens into the previous brand slate */
.ui-refined-layout .btn.btn-primary:hover,
.ui-refined-layout .btn.btn-primary:focus,
.ui-refined-layout .btn-refined-add:hover,
.ui-refined-layout .btn-refined-add:focus,
.ui-refined-layout .btn-refined-save:hover,
.ui-refined-layout .btn-refined-save:focus,
.ui-refined-layout .btn-refined-next:hover,
.ui-refined-layout .btn-refined-next:focus,
.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-gradient-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
}
/* Uniform 10px border radius — Option C policy.
   Exempt: .badge (pill), .modal .btn-close (Vuexy 4px spec),
           .bs-stepper-circle (50% circle), .rounded-circle/-pill utilities. */
.ui-refined-layout .btn,
.ui-refined-layout .btn-sm,
.ui-refined-layout .btn-lg,
.ui-refined-layout .card,
.ui-refined-layout .accordion-item,
.ui-refined-layout .alert,
.ui-refined-layout .nav-pills .nav-link,
.ui-refined-layout .nav-tabs .nav-link,
.ui-refined-layout .modal-content,
.ui-refined-layout .modal-dialog .modal-content,
.btn:not(.btn-close),
.card,
.accordion-item,
.alert,
.nav-pills .nav-link,
.nav-tabs .nav-link,
.modal-content,
.form-control:not([type="checkbox"]):not([type="radio"]),
.form-select,
.input-group .form-control,
.input-group .form-select,
.input-group-text,
.dropdown-menu,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.list-group,
.list-group-item:first-child,
.list-group-item:last-child {
  border-radius: var(--radius) !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.badge,
.ui-refined-layout .badge {
  border-radius: var(--radius-pill) !important;
}

/* ------------------------------------------------------------------
   Vertical / wizard-vertical stepper — supersede the slate-navy
   gradients in style.css §7400+ that affect DRE and SVR DPS wizards
   in light mode (inactive `#f6f8fb`, hover/active slate gradient
   `linear-gradient(#6d89a7 → #55718d)`). High specificity to beat
   `.light-style .bs-stepper.wizard-vertical .bs-stepper-header
    .step:not(.active) .step-trigger` (0,5,0).
   ------------------------------------------------------------------ */

/* Inactive step — solid tinted bg (color-mix keeps it opaque + visibly blue)
   + clear primary border so it reads as "interactive, related to active step".
   Both themes (tokens resolve per-theme). Doubled `.bs-stepper` to bump
   specificity above any single-class rule. */
.light-style .bs-stepper.bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger,
.light-style .bs-stepper.bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger,
.dark-style .bs-stepper.bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger,
.dark-style .bs-stepper.bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger,
[data-theme="light"] .bs-stepper.bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger,
[data-theme="light"] .bs-stepper.bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger,
[data-theme="dark"] .bs-stepper.bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger,
[data-theme="dark"] .bs-stepper.bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent) !important;
  color: var(--text-primary) !important;
}

.light-style .bs-stepper.bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
.light-style .bs-stepper.bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
.dark-style .bs-stepper.bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
.dark-style .bs-stepper.bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
[data-theme="light"] .bs-stepper.bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
[data-theme="light"] .bs-stepper.bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
[data-theme="dark"] .bs-stepper.bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover,
[data-theme="dark"] .bs-stepper.bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover {
  background: color-mix(in srgb, var(--primary) 28%, var(--surface-2)) !important;
  border-color: var(--primary) !important;
  color: var(--text-primary) !important;
}
.light-style .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover *,
.light-style .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 *,
[data-theme="light"] .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover *,
[data-theme="light"] .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover *,
[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 * {
  color: var(--text-primary) !important;
}

.light-style .bs-stepper.vertical .bs-stepper-header .step.active .step-trigger,
.light-style .bs-stepper.wizard-vertical .bs-stepper-header .step.active .step-trigger,
[data-theme="light"] .bs-stepper.vertical .bs-stepper-header .step.active .step-trigger,
[data-theme="light"] .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;
}
.light-style .bs-stepper.vertical .bs-stepper-header .step.active .step-trigger *,
.light-style .bs-stepper.wizard-vertical .bs-stepper-header .step.active .step-trigger *,
[data-theme="light"] .bs-stepper.vertical .bs-stepper-header .step.active .step-trigger *,
[data-theme="light"] .bs-stepper.wizard-vertical .bs-stepper-header .step.active .step-trigger * {
  color: var(--primary-contrast) !important;
}

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

.light-style .bs-stepper.vertical .bs-stepper-header .step.active .bs-stepper-circle,
.light-style .bs-stepper.wizard-vertical .bs-stepper-header .step.active .bs-stepper-circle,
.light-style .bs-stepper.vertical .bs-stepper-header .step:not(.active) .step-trigger:hover .bs-stepper-circle,
.light-style .bs-stepper.wizard-vertical .bs-stepper-header .step:not(.active) .step-trigger:hover .bs-stepper-circle,
[data-theme="light"] .bs-stepper.vertical .bs-stepper-header .step.active .bs-stepper-circle,
[data-theme="light"] .bs-stepper.wizard-vertical .bs-stepper-header .step.active .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;
}

/* ------------------------------------------------------------------
   Light-mode table links — supersede style.css §3567
   (`.dataTable a.event-link { color: var(--light-primary) }`)
   which paints links light slate-blue. Use alliance --text-link
   (warm bronze) so links match the alliance non-blue palette.
   ------------------------------------------------------------------ */

.light-style .table a,
.light-style table.dataTable a,
.light-style .dataTables_wrapper table a,
.light-style table.dataTable a.event-link,
.light-style .dataTable a.event-link,
[data-theme="light"] .table a,
[data-theme="light"] table.dataTable a,
[data-theme="light"] .dataTables_wrapper table a,
[data-theme="light"] table.dataTable a.event-link,
[data-theme="light"] .dataTable a.event-link {
  color: var(--text-link) !important;
  text-decoration: none !important;
}
.light-style .table a:hover,
.light-style table.dataTable a:hover,
.light-style .dataTables_wrapper table a:hover,
.light-style table.dataTable a.event-link:hover,
.light-style .dataTable a.event-link:hover,
[data-theme="light"] .table a:hover,
[data-theme="light"] table.dataTable a:hover,
[data-theme="light"] .dataTables_wrapper table a:hover,
[data-theme="light"] table.dataTable a.event-link:hover,
[data-theme="light"] .dataTable a.event-link:hover {
  color: var(--text-link-hover) !important;
  text-decoration: underline !important;
}

/* ------------------------------------------------------------------
   FullCalendar event semantic tokens (light mode).
   Read by resources/assets/js/schedule/calander/index-event.js so
   the calendar events + status legend stay theme-aware instead of
   the old hardcoded slate `#384955` / `#4c5f71` palette.
   ------------------------------------------------------------------ */
:root,
.light-style,
[data-theme="light"] {
  --event-finalized: #637687;   /* alliance primary slate, "committed" */
  --event-draft: #94a3b8;       /* lighter neutral slate, "in progress" */
  /* Stale-row indicator (event report >6 days late, .report-tr). */
  --row-stale-bg: #ffe4e4;
  --row-stale-border: #f57c00;
  --row-stale-text: var(--text-primary);
}

/* ------------------------------------------------------------------
   Stale-event row (.report-tr) — light-mode overrides for style.css
   §3406-3418 + §7193-7208 (which paint the whole row `#b5635e`).
   Use tokenized soft tint + left-edge accent.
   ------------------------------------------------------------------ */

.light-style .report-tr,
.light-style tr.report-tr,
.light-style tr.report-tr.odd,
.light-style tr.report-tr.even,
.light-style tr.report-tr:hover,
[data-theme="light"] .report-tr,
[data-theme="light"] tr.report-tr,
[data-theme="light"] tr.report-tr.odd,
[data-theme="light"] tr.report-tr.even,
[data-theme="light"] tr.report-tr:hover {
  background-color: var(--row-stale-bg) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.light-style .report-tr > *,
.light-style tr.report-tr > td,
[data-theme="light"] tr.report-tr > td {
  background-color: var(--row-stale-bg) !important;
  color: var(--row-stale-text) !important;
}
.light-style .ui-refined-layout .table tbody tr.report-tr td,
.light-style .ui-refined-layout .table tbody tr.report-tr.odd td,
.light-style .ui-refined-layout .table tbody tr.report-tr.even td,
.light-style .ui-refined-layout .table tbody tr.report-tr:hover td,
[data-theme="light"] .ui-refined-layout .table tbody tr.report-tr td,
[data-theme="light"] .ui-refined-layout .table tbody tr.report-tr:hover td {
  background: var(--row-stale-bg) !important;
  color: var(--row-stale-text) !important;
}
.schedule-list-tab .nav-pills {
  display: inline-flex;
  border: 1px solid var(--primary) !important;
  border-radius: var(--driven-component-radius);
  overflow: hidden;
  background: transparent;
}
.schedule-list-tab .nav-pills .nav-item {
  flex: 0 0 auto;
}
.schedule-list-tab .nav-pills .nav-link {
  border-radius: 0;
  padding: 0.5rem 1rem;
  color: var(--text-primary);
  background: transparent;
  font-weight: 500;
}
.schedule-list-tab .nav-pills .nav-item:not(:last-child) .nav-link {
  border-right: 1px solid var(--primary);
}
.schedule-list-tab .nav-pills .nav-link:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.schedule-list-tab .nav-pills .nav-link.active {
  background: var(--primary) !important;
  color: var(--text-white) !important;
  box-shadow: none;
}

input[type="file"]::file-selector-button,
input[type="file"].form-control::file-selector-button {
  background: var(--primary-gradient-dark) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--driven-component-radius) !important;
  padding: 0.4rem 0.95rem !important;
  margin-right: 0.85rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"].form-control:hover::file-selector-button,
input[type="file"].form-control::file-selector-button:hover {
  background: var(--primary-gradient-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
}

/* ============================================================
   .nav-tabs — segmented-control look (same pattern as
   .schedule-list-tab .nav-pills): single outer border, internal
   dividers, only the active tab fills. Both themes.
   Theme-scoped variants needed to beat style.css §1089/1104
   `.light-style .nav-tabs.admin-tabs` (0,3,0). 4-class chain wins.
   ============================================================ */
.nav.nav-tabs,
.light-style .nav-tabs.nav-tabs.admin-tabs,
.dark-style .nav-tabs.nav-tabs.admin-tabs,
.light-style .nav.nav-tabs.admin-tabs,
.dark-style .nav.nav-tabs.admin-tabs {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  border: 1px solid var(--primary) !important;
  border-top: 1px solid var(--primary) !important;
  border-bottom: 1px solid var(--primary) !important;
  border-left: 1px solid var(--primary) !important;
  border-right: 1px solid var(--primary) !important;
  border-radius: var(--driven-component-radius) !important;
  overflow: hidden;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0.5rem;
}
.nav.nav-tabs .nav-item,
.light-style .nav-tabs.admin-tabs .nav-item,
.dark-style .nav-tabs.admin-tabs .nav-item {
  flex: 0 0 auto;
  margin: 0 !important;
}
.nav.nav-tabs .nav-link,
.light-style .nav-tabs.admin-tabs .nav-link,
.dark-style .nav-tabs.admin-tabs .nav-link {
  color: var(--text-primary) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500;
}
.nav.nav-tabs .nav-item:not(:last-child) .nav-link,
.light-style .nav-tabs.admin-tabs .nav-item:not(:last-child) .nav-link,
.dark-style .nav-tabs.admin-tabs .nav-item:not(:last-child) .nav-link {
  border-right: 1px solid var(--primary) !important;
}
.nav.nav-tabs .nav-link:hover,
.light-style .nav-tabs.admin-tabs .nav-link:hover,
.dark-style .nav-tabs.admin-tabs .nav-link:hover {
  background-color: var(--primary-soft) !important;
  color: var(--text-primary) !important;
}
.nav.nav-tabs .nav-link.active,
.nav.nav-tabs .nav-item.show .nav-link,
.light-style .nav-tabs.admin-tabs .nav-link.active,
.dark-style .nav-tabs.admin-tabs .nav-link.active {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
}
.nav.nav-tabs .nav-link.active::after,
.nav.nav-tabs .nav-link::after,
.light-style .nav-tabs.admin-tabs .nav-link.active::after,
.dark-style .nav-tabs.admin-tabs .nav-link.active::after {
  display: none !important;
}

/* ============================================================
   .btn-secondary — outline style using --primary so it reads as
   "secondary action" cohesive with the primary button family,
   not a dead gray. Both themes (tokens resolve per-theme).
   Bumped specificity (doubled class + explicit ui-page-dre-wizard
   scope) to beat style_dre.css §1326 which forces a slate fill.
   ============================================================ */
.btn.btn-secondary.btn-secondary,
.light-style .btn.btn-secondary.btn-secondary,
.dark-style .btn.btn-secondary.btn-secondary,
.light-style .ui-page-dre-wizard .btn.btn-secondary,
.dark-style .ui-page-dre-wizard .btn.btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
}
.btn.btn-secondary.btn-secondary:hover,
.btn.btn-secondary.btn-secondary:focus,
.btn.btn-secondary.btn-secondary:active,
.light-style .btn.btn-secondary.btn-secondary:hover,
.light-style .btn.btn-secondary.btn-secondary:focus,
.dark-style .btn.btn-secondary.btn-secondary:hover,
.dark-style .btn.btn-secondary.btn-secondary:focus,
.light-style .ui-page-dre-wizard .btn.btn-secondary:hover,
.dark-style .ui-page-dre-wizard .btn.btn-secondary:hover {
  background-color: var(--primary-soft) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
/* Disabled state — keep readable but muted */
.btn.btn-secondary.btn-secondary:disabled,
.btn.btn-secondary.btn-secondary.disabled {
  background-color: transparent !important;
  border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
  color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
}

.change-status-btn,
.wrecker-change-status-btn {
  border-radius: 0.25rem !important;
  height: 1.8rem !important;
}

.table a.table-btn.change-status-btn,
.table a.table-btn.wrecker-change-status-btn {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white) !important;
}

.dark-style .apexcharts-theme-light .apexcharts-menu-item:hover {
    background: var(--primary-hover);
}

.dark-style .apexcharts-menu-item:hover {
    background: var(--primary-hover);
}