/* ============================================================
   Ledger — Crisp Enterprise
   Salesforce-Lightning-flavored: one trustworthy UI blue,
   cool neutrals, hairline borders, dense tables, flat elevation.
   Every rule scoped under html[data-theme="ledger"].
   Absence of the attribute = vanilla Bootstrap (safe default).
   ============================================================ */

/* ---- 1. Bootstrap CSS variable overrides --------------------- */
html[data-theme="ledger"] {
  /* Brand blue — interactive surfaces only */
  --bs-primary: #0176d3;
  --bs-primary-rgb: 1, 118, 211;
  --bs-primary-text-emphasis: #0b5cad;
  --bs-primary-bg-subtle: #e8f1fb;
  --bs-primary-border-subtle: #b8d6f3;

  /* Links */
  --bs-link-color: #0b5cad;
  --bs-link-color-rgb: 11, 92, 173;
  --bs-link-hover-color: #074a8c;
  --bs-link-hover-color-rgb: 7, 74, 140;

  /* Surfaces & text — cool blue-cast neutrals */
  --bs-body-bg: #f4f5f7;
  --bs-body-bg-rgb: 244, 245, 247;
  --bs-body-color: #1b2733;
  --bs-body-color-rgb: 27, 39, 51;
  --bs-emphasis-color: #0b1620;
  --bs-emphasis-color-rgb: 11, 22, 32;
  --bs-secondary-color: rgba(27, 39, 51, 0.62);
  --bs-secondary-bg: #eceef1;
  --bs-secondary-bg-rgb: 236, 238, 241;
  --bs-tertiary-color: rgba(27, 39, 51, 0.5);
  --bs-tertiary-bg: #f3f4f6;
  --bs-tertiary-bg-rgb: 243, 244, 246;

  /* Borders carry the structure */
  --bs-border-color: #dcdfe6;
  --bs-border-color-translucent: rgba(27, 39, 51, 0.12);

  /* Tight radius */
  --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.1875rem;
  --bs-border-radius-lg: 0.3125rem;
  --bs-border-radius-xl: 0.375rem;

  /* Near-flat elevation */
  --bs-box-shadow: 0 1px 2px rgba(11, 22, 32, 0.06);
  --bs-box-shadow-sm: 0 1px 1px rgba(11, 22, 32, 0.05);
  --bs-box-shadow-lg: 0 4px 12px rgba(11, 22, 32, 0.1);

  /* Typography */
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Focus ring uses the brand blue */
  --bs-focus-ring-color: rgba(1, 118, 211, 0.25);
}

/* ---- 2. Base body -------------------------------------------- */
html[data-theme="ledger"] body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-font-sans-serif);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="ledger"] h1,
html[data-theme="ledger"] h2,
html[data-theme="ledger"] h3,
html[data-theme="ledger"] h4,
html[data-theme="ledger"] h5,
html[data-theme="ledger"] h6 {
  color: var(--bs-emphasis-color);
  letter-spacing: -0.01em;
}

html[data-theme="ledger"] h1.h3 {
  font-weight: 600;
}

html[data-theme="ledger"] a {
  text-underline-offset: 0.15em;
}

/* ---- 3. Sidebar ---------------------------------------------- */
/* Light cool half-step off content, 1px right edge, no shadow. */
html[data-theme="ledger"] .offcanvas-lg.bg-body,
html[data-theme="ledger"] .offcanvas-lg.offcanvas-start {
  background-color: #f4f5f7 !important;
  border-right: 1px solid var(--bs-border-color) !important;
  box-shadow: none;
}

/* Brand link */
html[data-theme="ledger"] .offcanvas-lg .fs-5.fw-semibold {
  color: var(--bs-emphasis-color);
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Org switcher trigger — quiet, neutral */
html[data-theme="ledger"] .offcanvas-lg .dropdown-toggle.btn,
html[data-theme="ledger"] .offcanvas-lg .form-select {
  font-size: 0.8125rem;
}

/* Nav pills — base (inactive) */
html[data-theme="ledger"] .nav-pills {
  --bs-nav-pills-border-radius: 0.25rem;
  --bs-nav-pills-link-active-bg: transparent;
  --bs-nav-pills-link-active-color: var(--bs-emphasis-color);
}

html[data-theme="ledger"] .nav-pills .nav-link {
  color: #475467;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.25rem;
  padding: 0.4rem 0.625rem;
  position: relative;
  transition: background-color 0.12s ease, color 0.12s ease,
    box-shadow 0.12s ease;
}

/* Hover — plain neutral, never reads as active */
html[data-theme="ledger"] .nav-pills .nav-link:hover {
  background-color: #eceef1;
  color: var(--bs-emphasis-color);
}

/* ---- Active nav: SLDS left accent bar ------------------------ */
html[data-theme="ledger"] .nav-pills .nav-link.active,
html[data-theme="ledger"] .nav-pills .show > .nav-link {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-emphasis-color);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

html[data-theme="ledger"] .nav-pills .nav-link.active:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.12);
}

html[data-theme="ledger"] .nav-pills .nav-link .bi {
  opacity: 0.9;
}

/* Collapsible group headings — dimmest tier, uppercase */
html[data-theme="ledger"] .nav-pills .nav-link.text-muted {
  color: #6f6f6f !important;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

html[data-theme="ledger"] .nav-pills .nav-link.text-muted:hover {
  background-color: transparent;
  color: #475467 !important;
}

/* Nested group border-start tint */
html[data-theme="ledger"] .nav-pills .border-start {
  border-color: var(--bs-border-color) !important;
}

/* Disabled (nav-gated) items — disabled state, WCAG-exempt */
html[data-theme="ledger"] .nav-pills .nav-link.disabled {
  color: #98a2b3 !important;
  opacity: 1;
}

/* ---- 4. Account footer — softer slate-navy ------------------- */
html[data-theme="ledger"] .offcanvas-lg .bg-dark {
  background-color: #1b2733 !important;
  border-radius: 0.25rem;
}

html[data-theme="ledger"] .offcanvas-lg .bg-dark .nav-link,
html[data-theme="ledger"] .offcanvas-lg .bg-dark .dropdown-toggle {
  color: #e7ebf0 !important;
}

html[data-theme="ledger"] .offcanvas-lg .bg-dark .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
}

/* ---- 5. Top navbar variant (when used instead of sidebar) ---- */
html[data-theme="ledger"] .navbar {
  border-bottom: 1px solid var(--bs-border-color);
}

html[data-theme="ledger"] .navbar .navbar-brand {
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

html[data-theme="ledger"] .navbar .nav-link.active {
  color: var(--bs-primary);
  font-weight: 600;
}

/* ---- 6. Cards — hairline, flat ------------------------------- */
html[data-theme="ledger"] .card {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px rgba(11, 22, 32, 0.05);
}

html[data-theme="ledger"] .card-header {
  background-color: #fbfbfc;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-emphasis-color);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  padding: 0.625rem 0.875rem;
}

html[data-theme="ledger"] .card-body {
  padding: 1rem;
}

/* KPI tiles — bare card with a big number */
html[data-theme="ledger"] .card .display-1,
html[data-theme="ledger"] .card .display-2,
html[data-theme="ledger"] .card .display-3,
html[data-theme="ledger"] .card .display-4,
html[data-theme="ledger"] .card .display-5,
html[data-theme="ledger"] .card .display-6,
html[data-theme="ledger"] .card .fs-1,
html[data-theme="ledger"] .card .fs-2 {
  color: var(--bs-emphasis-color);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Status accent cards keep their colored borders but stay flat */
html[data-theme="ledger"] .card.border-success {
  border-color: #2e844a !important;
}
html[data-theme="ledger"] .card.border-warning {
  border-color: #dd7a01 !important;
}

/* ---- 7. Tables — dense, SLDS column headers, no zebra -------- */
html[data-theme="ledger"] .table {
  --bs-table-bg: #ffffff;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: #f0f1f3;
  --bs-table-hover-bg: #f3f2f2;
  --bs-table-hover-color: var(--bs-emphasis-color);
  border-color: var(--bs-border-color);
  margin-bottom: 0;
  font-size: 0.875rem;
}

html[data-theme="ledger"] .table > thead {
  border-bottom: 1px solid var(--bs-border-color);
}

/* SLDS uppercase, letter-spaced muted column headers.
   No th border-bottom here — the thead already carries the seam. */
html[data-theme="ledger"] .table > thead > tr > th {
  background-color: var(--bs-tertiary-bg);
  color: #6f6f6f;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-bottom: 0;
  white-space: nowrap;
  vertical-align: middle;
}

/* Sortable header links inside th */
html[data-theme="ledger"] .table > thead > tr > th a {
  color: #6f6f6f;
  text-decoration: none;
}
html[data-theme="ledger"] .table > thead > tr > th a:hover {
  color: var(--bs-primary);
}

html[data-theme="ledger"] .table > tbody > tr > td {
  padding: 0.4rem 0.75rem;
  border-top: 1px solid #f0f1f3;
  border-bottom: 0;
  vertical-align: middle;
  height: 38px;
}

/* First data row sits flush against the header seam — no double line */
html[data-theme="ledger"] .table > tbody > tr:first-child > td {
  border-top: 0;
}

/* No zebra; neutral hover only */
html[data-theme="ledger"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  --bs-table-bg-type: transparent;
  background-color: transparent;
}

html[data-theme="ledger"] .table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

/* Tabular numerals on numeric cells (right-aligned columns) */
html[data-theme="ledger"] .table td.text-end,
html[data-theme="ledger"] .table th.text-end,
html[data-theme="ledger"] .table td.text-right,
html[data-theme="ledger"] .table .num,
html[data-theme="ledger"] .table .tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ---- 8. Badges ----------------------------------------------- */
html[data-theme="ledger"] .badge {
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  padding: 0.3em 0.55em;
  border-radius: 0.1875rem;
}

html[data-theme="ledger"] .badge.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* Soft/subtle badges read as enterprise tags */
html[data-theme="ledger"] .badge.text-bg-secondary,
html[data-theme="ledger"] .badge.bg-secondary {
  background-color: #eceef1 !important;
  color: #475467 !important;
}

html[data-theme="ledger"] .badge.text-bg-success {
  background-color: #ecf6ef !important;
  color: #1d6635 !important;
}

html[data-theme="ledger"] .badge.text-bg-warning {
  background-color: #fdf3e6 !important;
  color: #8a4f02 !important;
}

/* ---- 9. Buttons ---------------------------------------------- */
html[data-theme="ledger"] .btn {
  --bs-btn-border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    color 0.12s ease, box-shadow 0.12s ease;
}

html[data-theme="ledger"] .btn-sm {
  font-size: 0.8125rem;
}

html[data-theme="ledger"] .btn-primary {
  --bs-btn-bg: #0176d3;
  --bs-btn-border-color: #0176d3;
  --bs-btn-hover-bg: #0b5cad;
  --bs-btn-hover-border-color: #0b5cad;
  --bs-btn-active-bg: #074a8c;
  --bs-btn-active-border-color: #074a8c;
  --bs-btn-disabled-bg: #88bce8;
  --bs-btn-disabled-border-color: #88bce8;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
}

html[data-theme="ledger"] .btn-outline-secondary {
  --bs-btn-color: #475467;
  --bs-btn-border-color: #c4c8d0;
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: #f3f4f6;
  --bs-btn-hover-border-color: #b0b6c0;
  --bs-btn-active-bg: #eceef1;
  --bs-btn-active-border-color: #b0b6c0;
  --bs-btn-active-color: var(--bs-emphasis-color);
}

html[data-theme="ledger"] .btn-outline-primary {
  --bs-btn-color: #0b5cad;
  --bs-btn-border-color: #0176d3;
  --bs-btn-hover-bg: #0176d3;
  --bs-btn-hover-border-color: #0176d3;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #0b5cad;
  --bs-btn-active-border-color: #0b5cad;
}

/* Focus ring */
html[data-theme="ledger"] .btn:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* ---- 10. Forms ----------------------------------------------- */
html[data-theme="ledger"] .form-control,
html[data-theme="ledger"] .form-select {
  background-color: #ffffff;
  border: 1px solid #c4c8d0;
  border-radius: 0.25rem;
  color: var(--bs-body-color);
  font-size: 0.875rem;
}

/* Placeholder bumped to AA-readable gray (#6b7280 = 4.83:1 on white) */
html[data-theme="ledger"] .form-control::placeholder {
  color: #6b7280;
  opacity: 1;
}

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

html[data-theme="ledger"] .form-control-sm,
html[data-theme="ledger"] .form-select-sm {
  font-size: 0.8125rem;
}

html[data-theme="ledger"] .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475467;
  margin-bottom: 0.25rem;
}

html[data-theme="ledger"] .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

html[data-theme="ledger"] .form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* Validation states — keep readable, thin theme-flat focus ring */
html[data-theme="ledger"] .form-control.is-invalid:focus,
html[data-theme="ledger"] .form-select.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(209, 51, 42, 0.22);
}
html[data-theme="ledger"] .form-control.is-valid:focus,
html[data-theme="ledger"] .form-select.is-valid:focus {
  box-shadow: 0 0 0 0.2rem rgba(46, 132, 74, 0.22);
}
html[data-theme="ledger"] .invalid-feedback {
  color: #a8200d;
}
html[data-theme="ledger"] .valid-feedback {
  color: #1d6635;
}

/* ---- 11. Alerts ---------------------------------------------- */
html[data-theme="ledger"] .alert {
  border-radius: 0.25rem;
  border-width: 1px;
  border-left-width: 3px;
  font-size: 0.875rem;
}

html[data-theme="ledger"] .alert-success {
  --bs-alert-color: #1d6635;
  --bs-alert-bg: #ecf6ef;
  --bs-alert-border-color: #2e844a;
}

html[data-theme="ledger"] .alert-warning {
  --bs-alert-color: #8a4f02;
  --bs-alert-bg: #fdf3e6;
  --bs-alert-border-color: #dd7a01;
}

html[data-theme="ledger"] .alert-danger {
  --bs-alert-color: #a8200d;
  --bs-alert-bg: #fdeceb;
  --bs-alert-border-color: #d1332a;
}

html[data-theme="ledger"] .alert-info {
  --bs-alert-color: #0b5cad;
  --bs-alert-bg: #e8f1fb;
  --bs-alert-border-color: #0176d3;
}

/* ---- 12. Breadcrumbs ----------------------------------------- */
html[data-theme="ledger"] .breadcrumb {
  font-size: 0.8125rem;
  --bs-breadcrumb-divider-color: #98a2b3;
}

html[data-theme="ledger"] .breadcrumb-item a {
  color: #0b5cad;
  text-decoration: none;
}

html[data-theme="ledger"] .breadcrumb-item a:hover {
  text-decoration: underline;
}

html[data-theme="ledger"] .breadcrumb-item.active {
  color: #6f6f6f;
}

/* ---- 13. Dropdown menus -------------------------------------- */
html[data-theme="ledger"] .dropdown-menu {
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-border-radius: 0.25rem;
  --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), 0.08);
  --bs-dropdown-link-active-color: var(--bs-emphasis-color);
  box-shadow: 0 4px 12px rgba(11, 22, 32, 0.1);
  font-size: 0.875rem;
  padding: 0.25rem;
}

html[data-theme="ledger"] .dropdown-item {
  border-radius: 0.1875rem;
  padding: 0.375rem 0.625rem;
}

html[data-theme="ledger"] .dropdown-item:active {
  background-color: var(--bs-primary);
  color: #ffffff;
}

/* ---- 14. Toasts ---------------------------------------------- */
html[data-theme="ledger"] .toast {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  box-shadow: 0 4px 12px rgba(11, 22, 32, 0.12);
  font-size: 0.875rem;
}

html[data-theme="ledger"] .toast-header {
  background-color: #fbfbfc;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

/* ---- 14b. Modals — match tight radius + flat elevation ------- */
html[data-theme="ledger"] .modal-content {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.3125rem;
  box-shadow: 0 8px 28px rgba(11, 22, 32, 0.18);
}

html[data-theme="ledger"] .modal-header,
html[data-theme="ledger"] .modal-footer {
  border-color: var(--bs-border-color);
}

html[data-theme="ledger"] .modal-title {
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

/* ---- 15. Right-side FILTER panel (a .card) ------------------- */
html[data-theme="ledger"] .filter-sidebar .card,
html[data-theme="ledger"] aside .card,
html[data-theme="ledger"] .filters .card {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
}

html[data-theme="ledger"] .filter-sidebar .card-header,
html[data-theme="ledger"] aside .card-header,
html[data-theme="ledger"] .filters .card-header {
  background-color: var(--bs-tertiary-bg);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #6f6f6f;
}

/* ---- 16. Pagination ----------------------------------------- */
html[data-theme="ledger"] .pagination {
  --bs-pagination-color: #475467;
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: 0.25rem;
  --bs-pagination-hover-bg: #f3f4f6;
  --bs-pagination-hover-color: var(--bs-emphasis-color);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
  font-size: 0.875rem;
}

/* ---- 17. Misc utilities ------------------------------------- */
html[data-theme="ledger"] .border,
html[data-theme="ledger"] .border-top,
html[data-theme="ledger"] .border-bottom,
html[data-theme="ledger"] .border-start,
html[data-theme="ledger"] .border-end {
  border-color: var(--bs-border-color) !important;
}

html[data-theme="ledger"] .text-muted {
  color: #6f6f6f !important;
}

html[data-theme="ledger"] hr {
  border-color: var(--bs-border-color);
  opacity: 1;
}

html[data-theme="ledger"] .nav-tabs {
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-primary);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color)
    var(--bs-border-color) #ffffff;
}

html[data-theme="ledger"] .nav-tabs .nav-link {
  color: #475467;
}

html[data-theme="ledger"] .nav-tabs .nav-link.active {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--bs-primary);
}

/* ---- 18. Third-party inputs (lazy-loaded) — readability ------ */
/* Tom Select: it renders its OWN control (does not inherit .form-control). */
html[data-theme="ledger"] .ts-wrapper .ts-control {
  background-color: #ffffff;
  border: 1px solid #c4c8d0;
  border-radius: 0.25rem;
  color: var(--bs-body-color);
  font-size: 0.875rem;
}

html[data-theme="ledger"] .ts-wrapper.focus .ts-control,
html[data-theme="ledger"] .ts-control:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

html[data-theme="ledger"] .ts-control input::placeholder {
  color: #6b7280;
}

html[data-theme="ledger"] .ts-dropdown {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  box-shadow: 0 4px 12px rgba(11, 22, 32, 0.1);
  font-size: 0.875rem;
  color: var(--bs-body-color);
}

html[data-theme="ledger"] .ts-dropdown .active {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

/* Tom Select pills (e.g. many_to_many multi-select) */
html[data-theme="ledger"] .ts-control .item {
  background-color: #eceef1;
  color: #475467;
  border-radius: 0.1875rem;
}

/* flatpickr: align its built-in blue accent to the brand blue */
html[data-theme="ledger"] .flatpickr-calendar {
  border-radius: 0.25rem;
  box-shadow: 0 4px 12px rgba(11, 22, 32, 0.12);
}

html[data-theme="ledger"] .flatpickr-day.selected,
html[data-theme="ledger"] .flatpickr-day.selected:hover,
html[data-theme="ledger"] .flatpickr-day.startRange,
html[data-theme="ledger"] .flatpickr-day.endRange {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

html[data-theme="ledger"] .flatpickr-day.today {
  border-color: var(--bs-primary);
}

html[data-theme="ledger"] .flatpickr-day:hover {
  background: #f3f4f6;
}

/* ============================================================================
   THEME: Slate — Modern Neutral
   Linear/Vercel-style chromatic restraint. Light mode only. All rules scoped
   under html[data-theme="slate"] so the absence of the attribute = stock
   Bootstrap. Web font (Inter) is loaded via <link>, never @import.
   ============================================================================ */

/* --- 1. Bootstrap CSS-variable overrides (recolor the whole component set) --- */
html[data-theme="slate"] {
  /* Brand / accent */
  --bs-primary: #5e6ad2;
  --bs-primary-rgb: 94, 106, 210;
  --bs-primary-text-emphasis: #4049a8;
  --bs-primary-bg-subtle: #eef0fb;
  --bs-primary-border-subtle: #cdd2f3;

  /* Surfaces */
  --bs-body-bg: #fafafa;
  --bs-body-bg-rgb: 250, 250, 250;
  --bs-secondary-bg: #f1f1f3;
  --bs-secondary-bg-rgb: 241, 241, 243;
  --bs-tertiary-bg: #f6f6f7;
  --bs-tertiary-bg-rgb: 246, 246, 247;

  /* Text */
  --bs-body-color: #2b2f36;
  --bs-body-color-rgb: 43, 47, 54;
  --bs-secondary-color: rgba(43, 47, 54, 0.70); /* AA-safe muted (was .62 ~4.0:1) */
  --bs-tertiary-color: rgba(43, 47, 54, 0.50);  /* placeholders/dividers (was .42) */
  --bs-emphasis-color: #111827;
  --bs-emphasis-color-rgb: 17, 24, 39;
  --bs-heading-color: #111827;

  /* Lines */
  --bs-border-color: #e8e8ea;
  --bs-border-color-translucent: rgba(17, 24, 39, 0.1);

  /* Links */
  --bs-link-color: #5e6ad2;
  --bs-link-color-rgb: 94, 106, 210;
  --bs-link-hover-color: #4049a8;
  --bs-link-hover-color-rgb: 64, 73, 168;

  /* Radii — larger, premium 12px on the big surfaces */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;

  /* Focus ring uses the one indigo */
  --bs-focus-ring-color: rgba(94, 106, 210, 0.25);

  /* Typography */
  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9375rem; /* 15px */
  --bs-body-line-height: 1.5;
}

/* --- 2. Base canvas + type --- */
html[data-theme="slate"] body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

html[data-theme="slate"] h1,
html[data-theme="slate"] h2,
html[data-theme="slate"] h3,
html[data-theme="slate"] h4,
html[data-theme="slate"] h5,
html[data-theme="slate"] h6 {
  color: var(--bs-heading-color);
  letter-spacing: -0.011em;
}
html[data-theme="slate"] h1.h3 {
  font-weight: 600;
  letter-spacing: -0.018em;
}

/* Numbers / counts line up + read like data */
html[data-theme="slate"] .table td,
html[data-theme="slate"] .badge,
html[data-theme="slate"] .card .display-6,
html[data-theme="slate"] .card .fs-1,
html[data-theme="slate"] .card .fs-2 {
  font-variant-numeric: tabular-nums;
}

html[data-theme="slate"] a {
  text-decoration-color: rgba(94, 106, 210, 0.32);
  text-underline-offset: 0.15em;
}

/* --- 3. Sidebar shell (near-white panel, hairline separator, no shadow) --- */
html[data-theme="slate"] .offcanvas-lg.offcanvas-start {
  background-color: #fafafa !important; /* same family as page */
  border-right: 1px solid var(--bs-border-color) !important;
  box-shadow: none;
}

/* Brand wordmark — quiet, near-black, tight tracking */
html[data-theme="slate"] .offcanvas-start .fs-5.fw-semibold {
  color: var(--bs-emphasis-color);
  letter-spacing: -0.02em;
}
html[data-theme="slate"] .offcanvas-title {
  color: var(--bs-emphasis-color);
}

/* --- 4. Nav: three-tier grayscale; active = neutral tint, NO bar --- */
html[data-theme="slate"] .nav-pills {
  --bs-nav-pills-border-radius: 0.5rem;
}

/* Inactive items: AA-safe gray, color signals state (not weight) */
html[data-theme="slate"] .nav-pills .nav-link {
  color: #565b63;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
html[data-theme="slate"] .nav-pills .nav-link:hover {
  color: var(--bs-emphasis-color);
  background-color: rgba(17, 24, 39, 0.04);
}

/* Active item: subtle neutral fill, darkened text, weight 600 — indigo stays OFF */
html[data-theme="slate"] .nav-pills .nav-link.active,
html[data-theme="slate"] .nav-pills .show > .nav-link {
  background-color: rgba(17, 24, 39, 0.06);
  color: var(--bs-emphasis-color);
  font-weight: 600;
  box-shadow: none;
}

/* Section / group headings: muted small-caps, the lowest text tier (AA-safe) */
html[data-theme="slate"] .nav-pills .nav-link.text-muted {
  color: #6b7280 !important; /* was #8a8f98 (~3.2:1, failed AA) */
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-theme="slate"] .nav-pills .nav-link.text-muted:hover {
  color: var(--bs-emphasis-color) !important;
  background-color: transparent;
}
/* an open group heading whose child is active */
html[data-theme="slate"] .nav-pills .nav-link.fw-semibold.text-reset {
  color: var(--bs-emphasis-color) !important;
}

/* Collapsible subgroup connector line */
html[data-theme="slate"] .nav-pills .border-start {
  border-left-color: var(--bs-border-color) !important;
}

/* Disabled (gated) items stay clearly secondary (disabled => WCAG-exempt) */
html[data-theme="slate"] .nav-pills .nav-link.disabled {
  color: #b6bac1 !important;
}

/* --- 5. Account footer: retire the dark block -> light secondary card --- */
html[data-theme="slate"] .offcanvas-start .bg-dark {
  background-color: var(--bs-secondary-bg) !important;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
}
html[data-theme="slate"] .offcanvas-start .bg-dark,
html[data-theme="slate"] .offcanvas-start .bg-dark .text-light {
  color: var(--bs-body-color) !important;
}
html[data-theme="slate"] .offcanvas-start .bg-dark a,
html[data-theme="slate"] .offcanvas-start .bg-dark .dropdown-toggle {
  color: var(--bs-body-color) !important;
}
html[data-theme="slate"] .offcanvas-start .bg-dark .text-light.small,
html[data-theme="slate"] .offcanvas-start .bg-dark .opacity-75 {
  color: var(--bs-secondary-color) !important;
}
/* 28px avatar circle if the account badge renders an initial/avatar */
html[data-theme="slate"] .offcanvas-start .bg-dark .rounded-circle {
  width: 28px;
  height: 28px;
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

/* --- 6. Cards: white surface, 12px radius, micro layered shadow, hover lift --- */
html[data-theme="slate"] .card {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
html[data-theme="slate"] .card:hover {
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.05);
  transform: translateY(-2px);
  border-color: #e0e0e3;
}
html[data-theme="slate"] .card-body {
  padding: 1.5rem; /* generous 24px */
}
html[data-theme="slate"] .card-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--bs-border-color);
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  padding: 1rem 1.5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  letter-spacing: -0.005em;
}

/* Right-side FILTER panel reads as a calmer, secondary card.
   No hover-lift on form/filter cards — they'd jitter while being filled. */
html[data-theme="slate"] aside .card,
html[data-theme="slate"] .filter-panel .card,
html[data-theme="slate"] form .card {
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
html[data-theme="slate"] aside .card:hover,
html[data-theme="slate"] .filter-panel .card:hover,
html[data-theme="slate"] form .card:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
html[data-theme="slate"] .card .card-header.bg-light,
html[data-theme="slate"] .card .card-header.bg-body-tertiary {
  background-color: var(--bs-tertiary-bg) !important;
}

/* KPI tiles: the big number gets emphasis + tight tracking */
html[data-theme="slate"] .card .display-6,
html[data-theme="slate"] .card .fs-1,
html[data-theme="slate"] .card .fs-2 {
  color: var(--bs-emphasis-color);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- 7. Tables: airy rows, muted small-caps headers, quiet dividers --- */
html[data-theme="slate"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-bg: rgba(94, 106, 210, 0.045);
  --bs-table-hover-color: var(--bs-emphasis-color);
  border-color: var(--bs-border-color);
}
html[data-theme="slate"] .table > thead th {
  background-color: transparent;
  color: #6b7280; /* was #8a8f98 (~3.2:1, failed AA for small bold uppercase) */
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bs-border-color);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  white-space: nowrap;
}
html[data-theme="slate"] .table > tbody > tr > td,
html[data-theme="slate"] .table > tbody > tr > th {
  padding-top: 0.6rem;   /* ~40px comfortable rows w/ 15px line-height */
  padding-bottom: 0.6rem;
  vertical-align: middle;
  border-bottom-color: var(--bs-border-color);
}
html[data-theme="slate"] .table > tbody > tr {
  transition: background-color 0.12s ease;
}
/* Bootstrap 5.3 hover state vars (was the deprecated --bs-table-accent-bg) */
html[data-theme="slate"] .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--bs-table-hover-bg);
  --bs-table-color-state: var(--bs-table-hover-color);
}

/* --- 8. Badges: soft, low-saturation, never loud --- */
html[data-theme="slate"] .badge {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  padding: 0.34em 0.6em;
  border-radius: 0.375rem;
}
html[data-theme="slate"] .badge.text-bg-primary {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
}
html[data-theme="slate"] .badge.text-bg-secondary {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}
html[data-theme="slate"] .badge.text-bg-success {
  background-color: #e4f5ec !important;
  color: #157347 !important;
}
html[data-theme="slate"] .badge.text-bg-warning {
  background-color: #fcf1dd !important;
  color: #9a6700 !important;
}
html[data-theme="slate"] .badge.text-bg-danger {
  background-color: #fbe7e9 !important;
  color: #b02a37 !important;
}
html[data-theme="slate"] .badge.text-bg-info {
  background-color: #e3f1fb !important;
  color: #2c6e9b !important;
}
html[data-theme="slate"] .badge.text-bg-light {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important; /* was secondary-color; ensure AA on tint */
}

/* --- 9. Buttons --- */
html[data-theme="slate"] .btn {
  --bs-btn-border-radius: 0.5rem;
  font-weight: 500;
  letter-spacing: -0.003em;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, color 0.15s ease;
}
html[data-theme="slate"] .btn-primary {
  --bs-btn-bg: #5e6ad2;
  --bs-btn-border-color: #5e6ad2;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #515cc4;
  --bs-btn-hover-border-color: #4b56bb;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #4049a8;
  --bs-btn-active-border-color: #4049a8;
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: #5e6ad2;
  --bs-btn-disabled-border-color: #5e6ad2;
  box-shadow: 0 1px 2px rgba(94, 106, 210, 0.25);
}
html[data-theme="slate"] .btn-primary:hover {
  box-shadow: 0 2px 6px rgba(94, 106, 210, 0.3);
}
html[data-theme="slate"] .btn-outline-secondary {
  --bs-btn-color: #4b5563;
  --bs-btn-border-color: #d8d9dd; /* was --bs-border-color (#e8e8ea), near-invisible */
  --bs-btn-bg: #ffffff;
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: #d6d6da;
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: #d6d6da;
  --bs-btn-active-color: var(--bs-emphasis-color);
}
html[data-theme="slate"] .btn-outline-primary {
  --bs-btn-color: #4049a8;
  --bs-btn-border-color: #c3c9ef;
  --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
  --bs-btn-hover-border-color: #b0b8ec;
  --bs-btn-hover-color: #3a4299;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-color: #ffffff;
}
html[data-theme="slate"] .btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  font-weight: 500;
}

/* --- 10. Forms: subtle controls + indigo focus ring (the one allowed pop) --- */
html[data-theme="slate"] .form-control,
html[data-theme="slate"] .form-select {
  background-color: #ffffff;
  border-color: var(--bs-border-color);
  border-radius: 0.5rem;
  color: var(--bs-body-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme="slate"] .form-control::placeholder {
  color: var(--bs-tertiary-color);
}
html[data-theme="slate"] .form-control:hover,
html[data-theme="slate"] .form-select:hover {
  border-color: #d6d6da;
}
html[data-theme="slate"] .form-control:focus,
html[data-theme="slate"] .form-select:focus {
  border-color: #a7afe6;
  box-shadow: 0 0 0 0.2rem rgba(94, 106, 210, 0.18);
}
/* Preserve Bootstrap validation rings on focus (theme focus rule would otherwise
   out-specify .is-invalid:focus / .is-valid:focus and drop the red/green ring). */
html[data-theme="slate"] .form-control.is-invalid:focus,
html[data-theme="slate"] .form-select.is-invalid:focus,
html[data-theme="slate"] .was-validated .form-control:invalid:focus,
html[data-theme="slate"] .was-validated .form-select:invalid:focus {
  border-color: #b02a37;
  box-shadow: 0 0 0 0.2rem rgba(176, 42, 55, 0.2);
}
html[data-theme="slate"] .form-control.is-valid:focus,
html[data-theme="slate"] .form-select.is-valid:focus,
html[data-theme="slate"] .was-validated .form-control:valid:focus,
html[data-theme="slate"] .was-validated .form-select:valid:focus {
  border-color: #157347;
  box-shadow: 0 0 0 0.2rem rgba(21, 115, 71, 0.2);
}
html[data-theme="slate"] .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
html[data-theme="slate"] .form-check-input:focus {
  border-color: #a7afe6;
  box-shadow: 0 0 0 0.2rem rgba(94, 106, 210, 0.18);
}
html[data-theme="slate"] .form-label {
  font-weight: 500;
  color: #4b5563;
  font-size: 0.875rem;
}
html[data-theme="slate"] .input-group-text {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}
/* Generic focus-visible ring across interactive chrome */
html[data-theme="slate"] .btn:focus-visible,
html[data-theme="slate"] .nav-link:focus-visible,
html[data-theme="slate"] .page-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(94, 106, 210, 0.3);
}

/* --- 11. Alerts: soft, low-chroma, calm --- */
html[data-theme="slate"] .alert {
  border-radius: 0.625rem;
  border-width: 1px;
}
html[data-theme="slate"] .alert-success {
  --bs-alert-bg: #ecf7f1;
  --bs-alert-border-color: #c8e8d6;
  --bs-alert-color: #14653a;
}
html[data-theme="slate"] .alert-warning {
  --bs-alert-bg: #fcf4e3;
  --bs-alert-border-color: #f1dfb4;
  --bs-alert-color: #8a5d00;
}
html[data-theme="slate"] .alert-danger {
  --bs-alert-bg: #fbeced;
  --bs-alert-border-color: #f3ccd0;
  --bs-alert-color: #9a2530;
}
html[data-theme="slate"] .alert-info {
  --bs-alert-bg: #ecf3fa;
  --bs-alert-border-color: #cbe0f1;
  --bs-alert-color: #1f5a82;
}

/* --- 12. Breadcrumbs: quiet, indigo links --- */
html[data-theme="slate"] .breadcrumb {
  --bs-breadcrumb-divider-color: var(--bs-tertiary-color);
  font-size: 0.85rem;
}
html[data-theme="slate"] .breadcrumb-item a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}
html[data-theme="slate"] .breadcrumb-item a:hover {
  color: var(--bs-link-color);
}
html[data-theme="slate"] .breadcrumb-item.active {
  color: var(--bs-body-color);
}

/* --- 13. Dropdowns: white sheet, soft shadow, indigo-tinted active --- */
html[data-theme="slate"] .dropdown-menu {
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-border-radius: 0.625rem;
  --bs-dropdown-link-active-bg: var(--bs-primary-bg-subtle);
  --bs-dropdown-link-active-color: var(--bs-primary-text-emphasis);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-color: var(--bs-body-color);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1), 0 2px 6px rgba(17, 24, 39, 0.06);
  padding: 0.35rem;
}
html[data-theme="slate"] .dropdown-item {
  border-radius: 0.375rem;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
}

/* --- 14. Toasts --- */
html[data-theme="slate"] .toast {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.625rem;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}
html[data-theme="slate"] .toast-header {
  background-color: #ffffff;
  border-bottom-color: var(--bs-border-color);
  color: var(--bs-emphasis-color);
}

/* --- 15. Modals: match the layered-shadow language of cards/dropdowns --- */
html[data-theme="slate"] .modal-content {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  box-shadow: 0 16px 48px rgba(17, 24, 39, 0.16);
}
html[data-theme="slate"] .modal-header,
html[data-theme="slate"] .modal-footer {
  border-color: var(--bs-border-color);
}

/* --- 16. Pagination --- */
html[data-theme="slate"] .pagination {
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-bg: #ffffff;
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-color: var(--bs-emphasis-color);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-border-radius: 0.5rem;
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(94, 106, 210, 0.25);
}

/* --- 17. Lazy libs (Tom Select, flatpickr) — match radius/focus, stay readable --- */
html[data-theme="slate"] .ts-control {
  background-color: #ffffff;
  border-color: var(--bs-border-color);
  border-radius: 0.5rem;
  color: var(--bs-body-color);
}
html[data-theme="slate"] .ts-wrapper.focus .ts-control,
html[data-theme="slate"] .ts-control.focus {
  border-color: #a7afe6;
  box-shadow: 0 0 0 0.2rem rgba(94, 106, 210, 0.18);
}
html[data-theme="slate"] .ts-dropdown {
  border-color: var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
  color: var(--bs-body-color);
}
html[data-theme="slate"] .ts-dropdown .active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
html[data-theme="slate"] .flatpickr-day.selected,
html[data-theme="slate"] .flatpickr-day.selected:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}
html[data-theme="slate"] .flatpickr-day.today {
  border-color: var(--bs-primary);
}

/* --- 18. Misc surfaces / utilities used by the shell --- */
html[data-theme="slate"] .border,
html[data-theme="slate"] .border-end,
html[data-theme="slate"] .border-start,
html[data-theme="slate"] .border-top,
html[data-theme="slate"] .border-bottom {
  border-color: var(--bs-border-color) !important;
}
html[data-theme="slate"] hr {
  border-color: var(--bs-border-color);
  opacity: 1;
}
html[data-theme="slate"] .text-muted {
  color: var(--bs-secondary-color) !important;
}
html[data-theme="slate"] .bg-body-tertiary {
  background-color: var(--bs-tertiary-bg) !important;
}
html[data-theme="slate"] code,
html[data-theme="slate"] kbd {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-primary-text-emphasis);
  border-radius: 0.3rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}

/* ============================================================
   DUSK — Warm Professional
   Stripe-warm canvas + blurple accent + brand navy.
   All rules scoped under html[data-theme="dusk"] so the three
   themes coexist and a missing attribute = vanilla Bootstrap.
   Light mode only.
   ============================================================ */

/* ---- 1. Bootstrap CSS variable overrides ---- */
html[data-theme="dusk"] {
  /* Brand accent: blurple */
  --bs-primary: #635bff;
  --bs-primary-rgb: 99, 91, 255;

  /* Links derive from the accent; darken slightly on hover for AA on warm bg */
  --bs-link-color: #4f46e8;
  --bs-link-color-rgb: 79, 70, 232;
  --bs-link-hover-color: #3f37c9;
  --bs-link-hover-color-rgb: 63, 55, 201;

  /* Warm canvas + ink */
  --bs-body-bg: #f8f7f4;
  --bs-body-bg-rgb: 248, 247, 244;
  --bs-body-color: #1b2733;
  --bs-body-color-rgb: 27, 39, 51;

  /* Emphasis / headings → deep brand navy */
  --bs-emphasis-color: #0a2540;
  --bs-emphasis-color-rgb: 10, 37, 64;
  --bs-heading-color: #0a2540;

  /* Surfaces (warm neutrals) */
  --bs-secondary-bg: #f0eee9;
  --bs-secondary-bg-rgb: 240, 238, 233;
  --bs-tertiary-bg: #faf9f7;
  --bs-tertiary-bg-rgb: 250, 249, 247;
  --bs-secondary-color: #667085;
  --bs-tertiary-color: #8a93a3;

  /* Warm hairline borders */
  --bs-border-color: #e7e3dd;
  --bs-border-color-translucent: rgba(10, 37, 64, 0.10);

  /* Generous, premium radius */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.625rem;
  --bs-border-radius-xl: 0.875rem;

  /* Brand-tinted elevation tokens (reused below) */
  --dusk-shadow-resting: 0 1px 3px rgba(50, 50, 93, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --dusk-shadow-raised: 0 6px 16px rgba(50, 50, 93, 0.14), 0 3px 6px rgba(10, 37, 64, 0.08);
  --dusk-shadow-overlay: 0 12px 28px rgba(50, 50, 93, 0.18), 0 6px 12px rgba(10, 37, 64, 0.10);
  --dusk-focus-ring: 0 0 0 0.2rem rgba(99, 91, 255, 0.25);

  /* Comfortable-generous reading */
  font-size: 15px;
  line-height: 1.5;
}

html[data-theme="dusk"] body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings carry the brand navy */
html[data-theme="dusk"] h1,
html[data-theme="dusk"] h2,
html[data-theme="dusk"] h3,
html[data-theme="dusk"] h4,
html[data-theme="dusk"] h5,
html[data-theme="dusk"] h6 {
  color: var(--bs-heading-color);
  letter-spacing: -0.01em;
}
html[data-theme="dusk"] h1.h3 {
  font-weight: 600;
}

/* Tabular figures on numeric content (money / usage) */
html[data-theme="dusk"] .table td,
html[data-theme="dusk"] .table th,
html[data-theme="dusk"] .badge,
html[data-theme="dusk"] .card .display-1,
html[data-theme="dusk"] .card .display-2,
html[data-theme="dusk"] .card .display-3,
html[data-theme="dusk"] .card .display-4,
html[data-theme="dusk"] .card .display-5,
html[data-theme="dusk"] .card .display-6,
html[data-theme="dusk"] .card .fs-1,
html[data-theme="dusk"] .card .fs-2 {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Subtle, consistent transitions */
html[data-theme="dusk"] .nav-link,
html[data-theme="dusk"] .btn,
html[data-theme="dusk"] .card,
html[data-theme="dusk"] .form-control,
html[data-theme="dusk"] .form-select,
html[data-theme="dusk"] .table tbody tr,
html[data-theme="dusk"] .badge {
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

/* ---- 2. Sidebar ---- */
html[data-theme="dusk"] .offcanvas-lg.bg-body,
html[data-theme="dusk"] .offcanvas-lg.offcanvas-start {
  background-color: #faf9f7 !important;
}
/* Warm hairline + whisper of brand-tinted shadow lifting the rail */
html[data-theme="dusk"] .offcanvas-lg.border-end {
  border-right: 1px solid var(--bs-border-color) !important;
  box-shadow: 1px 0 0 rgba(10, 37, 64, 0.02), 4px 0 16px rgba(50, 50, 93, 0.04);
}

/* Brand link in deep navy */
html[data-theme="dusk"] .offcanvas-lg .fs-5.fw-semibold,
html[data-theme="dusk"] .offcanvas-lg a.fs-5 {
  color: #0a2540 !important;
  letter-spacing: -0.015em;
}

/* ---- 3. Nav pills ---- */
html[data-theme="dusk"] .nav-pills {
  --bs-nav-pills-border-radius: 0.5rem;
}
html[data-theme="dusk"] .nav-pills .nav-link {
  color: #1b2733;
  border-radius: 0.5rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
}
html[data-theme="dusk"] .nav-pills .nav-link i,
html[data-theme="dusk"] .nav-pills .nav-link .bi {
  color: #667085;
  transition: color 0.15s ease;
}
/* Inactive hover = warm neutral */
html[data-theme="dusk"] .nav-pills .nav-link:hover,
html[data-theme="dusk"] .nav-pills .nav-link:focus {
  background-color: #f0eee9;
  color: #0a2540;
}
html[data-theme="dusk"] .nav-pills .nav-link:hover i,
html[data-theme="dusk"] .nav-pills .nav-link:focus i,
html[data-theme="dusk"] .nav-pills .nav-link:hover .bi,
html[data-theme="dusk"] .nav-pills .nav-link:focus .bi {
  color: #0a2540;
}

/* Active = soft blurple-tinted pill (no hard bar) */
html[data-theme="dusk"] .nav-pills .nav-link.active,
html[data-theme="dusk"] .nav-pills .show > .nav-link {
  background-color: rgba(99, 91, 255, 0.10);
  color: #4f46e8;
  font-weight: 600;
  box-shadow: none;
}
html[data-theme="dusk"] .nav-pills .nav-link.active i,
html[data-theme="dusk"] .nav-pills .nav-link.active .bi,
html[data-theme="dusk"] .nav-pills .show > .nav-link i,
html[data-theme="dusk"] .nav-pills .show > .nav-link .bi {
  color: #4f46e8;
}

/* Collapsible group headings — keep muted/uppercase even when their
   collapse target is open (.show) so they never read as an active pill */
html[data-theme="dusk"] .nav-link.text-muted,
html[data-theme="dusk"] .nav-pills .show > .nav-link.text-muted {
  color: #8a93a3 !important;
  background-color: transparent;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-theme="dusk"] .nav-link.text-muted:hover {
  color: #667085 !important;
  background-color: transparent;
}

/* ---- 4. Account footer (recolored to brand navy) ---- */
html[data-theme="dusk"] .bg-dark {
  background-color: #0a2540 !important;
}
html[data-theme="dusk"] .bg-dark.rounded,
html[data-theme="dusk"] .bg-dark.text-light {
  border-radius: 0.5rem !important;
  box-shadow: var(--dusk-shadow-resting);
}
html[data-theme="dusk"] .bg-dark.text-light,
html[data-theme="dusk"] .bg-dark .text-light {
  color: #eaf0f6 !important;
}
html[data-theme="dusk"] .bg-dark .text-muted,
html[data-theme="dusk"] .bg-dark small {
  color: #93a3b5 !important;
}
html[data-theme="dusk"] .bg-dark .dropdown-toggle {
  color: #eaf0f6;
}

/* ---- 5. Cards ---- */
html[data-theme="dusk"] .card {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: var(--dusk-shadow-resting);
}
html[data-theme="dusk"] .card-body {
  padding: 1.5rem;
}
html[data-theme="dusk"] .card-header {
  background-color: #faf9f7;
  border-bottom: 1px solid var(--bs-border-color);
  color: #0a2540;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
}

/* KPI tiles: big number in brand navy */
html[data-theme="dusk"] .card .display-1,
html[data-theme="dusk"] .card .display-2,
html[data-theme="dusk"] .card .display-3,
html[data-theme="dusk"] .card .display-4,
html[data-theme="dusk"] .card .display-5,
html[data-theme="dusk"] .card .display-6,
html[data-theme="dusk"] .card .fs-1,
html[data-theme="dusk"] .card .fs-2 {
  color: #0a2540;
  letter-spacing: -0.02em;
}

/* Accent status cards keep colored borders but warm subtle headers */
html[data-theme="dusk"] .card.border-success {
  border-color: #b7e0c4 !important;
}
html[data-theme="dusk"] .card.border-warning {
  border-color: #f3dca6 !important;
}

/* ---- 6. Right-side FILTER card ---- */
html[data-theme="dusk"] .card .card-header.bg-light,
html[data-theme="dusk"] aside .card-header {
  background-color: #f0eee9;
}

/* ---- 7. Tables ---- */
html[data-theme="dusk"] .table {
  --bs-table-bg: #ffffff;
  --bs-table-color: #1b2733;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-bg: #f6f4f0;
  --bs-table-hover-color: #0a2540;
  border-color: var(--bs-border-color);
  margin-bottom: 0;
}
html[data-theme="dusk"] .table > thead > tr > th {
  background-color: #faf9f7;
  color: #667085;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
html[data-theme="dusk"] .table > tbody > tr > td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom-color: #efece6;
  height: 44px;
}
html[data-theme="dusk"] .table-hover > tbody > tr:hover > * {
  background-color: #f6f4f0;
  color: #0a2540;
}

/* ---- 8. Badges ---- */
html[data-theme="dusk"] .badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 0.375rem;
  padding: 0.34em 0.6em;
}
html[data-theme="dusk"] .badge.bg-primary {
  background-color: rgba(99, 91, 255, 0.12) !important;
  color: #4f46e8 !important;
}
html[data-theme="dusk"] .badge.bg-secondary {
  background-color: #ece9e3 !important;
  color: #51596b !important;
}
html[data-theme="dusk"] .badge.bg-success {
  background-color: rgba(22, 137, 73, 0.12) !important;
  color: #157347 !important;
}
html[data-theme="dusk"] .badge.bg-warning {
  background-color: rgba(204, 148, 0, 0.16) !important;
  color: #8a6400 !important;
}
html[data-theme="dusk"] .badge.bg-danger {
  background-color: rgba(199, 56, 56, 0.12) !important;
  color: #b02a2a !important;
}
html[data-theme="dusk"] .badge.bg-info {
  background-color: rgba(10, 37, 64, 0.10) !important;
  color: #0a2540 !important;
}

/* ---- 9. Buttons ---- */
html[data-theme="dusk"] .btn {
  --bs-btn-border-radius: 0.5rem;
  font-weight: 500;
}
html[data-theme="dusk"] .btn-primary {
  --bs-btn-bg: #635bff;
  --bs-btn-border-color: #635bff;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #524bdb;
  --bs-btn-hover-border-color: #524bdb;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #4640c0;
  --bs-btn-active-border-color: #4640c0;
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: #635bff;
  --bs-btn-disabled-border-color: #635bff;
  --bs-btn-disabled-color: #ffffff;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.18), 0 1px 3px rgba(99, 91, 255, 0.20);
}
html[data-theme="dusk"] .btn-primary:hover {
  box-shadow: 0 3px 8px rgba(99, 91, 255, 0.28);
}
html[data-theme="dusk"] .btn-primary:focus,
html[data-theme="dusk"] .btn-primary:focus-visible {
  box-shadow: var(--dusk-focus-ring);
}

html[data-theme="dusk"] .btn-outline-secondary {
  --bs-btn-color: #51596b;
  --bs-btn-border-color: #d8d3ca;
  --bs-btn-bg: #ffffff;
  --bs-btn-hover-bg: #f0eee9;
  --bs-btn-hover-border-color: #c8c2b8;
  --bs-btn-hover-color: #0a2540;
  --bs-btn-active-bg: #e7e3dd;
  --bs-btn-active-border-color: #c8c2b8;
  --bs-btn-active-color: #0a2540;
}
html[data-theme="dusk"] .btn-outline-primary {
  --bs-btn-color: #4f46e8;
  --bs-btn-border-color: #635bff;
  --bs-btn-hover-bg: #635bff;
  --bs-btn-hover-border-color: #635bff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #524bdb;
  --bs-btn-active-border-color: #524bdb;
  --bs-btn-active-color: #ffffff;
}
html[data-theme="dusk"] .btn-outline-secondary:focus-visible,
html[data-theme="dusk"] .btn-outline-primary:focus-visible {
  box-shadow: var(--dusk-focus-ring);
}

/* Dropdown toggle buttons (Actions menu) align with outline-secondary */
html[data-theme="dusk"] .dropdown-toggle.btn-outline-secondary::after {
  color: #667085;
}

/* ---- 10. Forms ----
   IMPORTANT: base styling applies to all inputs, but themed border-color
   and the blurple focus ring are scoped to :not(.is-invalid):not(.is-valid)
   so Bootstrap's red/green validation borders + rings are NEVER overridden.
   Explicit validation focus rings are re-themed below to match. */
html[data-theme="dusk"] .form-control,
html[data-theme="dusk"] .form-select {
  background-color: #ffffff;
  color: #1b2733;
  border-radius: 0.5rem;
}
html[data-theme="dusk"] .form-control:not(.is-invalid):not(.is-valid),
html[data-theme="dusk"] .form-select:not(.is-invalid):not(.is-valid) {
  border-color: #ddd8d0;
}
html[data-theme="dusk"] .form-control::placeholder {
  color: #8a93a3;
  opacity: 1;
}
html[data-theme="dusk"] .form-control:focus:not(.is-invalid):not(.is-valid),
html[data-theme="dusk"] .form-select:focus:not(.is-invalid):not(.is-valid) {
  border-color: #635bff;
  box-shadow: var(--dusk-focus-ring);
}
/* Preserve Bootstrap validation affordance, re-themed to match radius/ring */
html[data-theme="dusk"] .form-control.is-invalid:focus,
html[data-theme="dusk"] .form-select.is-invalid:focus,
html[data-theme="dusk"] .was-validated .form-control:invalid:focus,
html[data-theme="dusk"] .was-validated .form-select:invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
html[data-theme="dusk"] .form-control.is-valid:focus,
html[data-theme="dusk"] .form-select.is-valid:focus,
html[data-theme="dusk"] .was-validated .form-control:valid:focus,
html[data-theme="dusk"] .was-validated .form-select:valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}
html[data-theme="dusk"] .form-check-input:checked {
  background-color: #635bff;
  border-color: #635bff;
}
html[data-theme="dusk"] .form-check-input:focus {
  border-color: #635bff;
  box-shadow: var(--dusk-focus-ring);
}
html[data-theme="dusk"] .form-label {
  color: #0a2540;
  font-weight: 500;
}

/* ---- 11. Alerts ---- */
html[data-theme="dusk"] .alert-success {
  --bs-alert-bg: #e8f5ee;
  --bs-alert-border-color: #b7e0c4;
  --bs-alert-color: #11623a;
  border-radius: 0.5rem;
}
html[data-theme="dusk"] .alert-warning {
  --bs-alert-bg: #fbf2da;
  --bs-alert-border-color: #f0d695;
  --bs-alert-color: #7a5800;
  border-radius: 0.5rem;
}
html[data-theme="dusk"] .alert-primary {
  --bs-alert-bg: #eeedff;
  --bs-alert-border-color: #cfcaff;
  --bs-alert-color: #3f37c9;
  border-radius: 0.5rem;
}
html[data-theme="dusk"] .alert-danger {
  --bs-alert-bg: #fbeaea;
  --bs-alert-border-color: #f0c2c2;
  --bs-alert-color: #9b2226;
  border-radius: 0.5rem;
}

/* ---- 12. Breadcrumbs ---- */
html[data-theme="dusk"] .breadcrumb {
  --bs-breadcrumb-divider-color: #b3aca0;
  font-size: 0.875rem;
}
html[data-theme="dusk"] .breadcrumb-item a {
  color: #667085;
  text-decoration: none;
}
html[data-theme="dusk"] .breadcrumb-item a:hover {
  color: #4f46e8;
}
html[data-theme="dusk"] .breadcrumb-item.active {
  color: #0a2540;
  font-weight: 500;
}

/* ---- 13. Dropdown menus ---- */
html[data-theme="dusk"] .dropdown-menu {
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-border-radius: 0.5rem;
  --bs-dropdown-link-hover-bg: #f0eee9;
  --bs-dropdown-link-active-bg: rgba(99, 91, 255, 0.10);
  --bs-dropdown-link-active-color: #4f46e8;
  background-color: #ffffff;
  box-shadow: var(--dusk-shadow-overlay);
}
html[data-theme="dusk"] .dropdown-item:active,
html[data-theme="dusk"] .dropdown-item.active {
  color: #4f46e8;
}

/* ---- 14. Toasts ---- */
html[data-theme="dusk"] .toast {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: var(--dusk-shadow-overlay);
}
html[data-theme="dusk"] .toast-header {
  background-color: #faf9f7;
  color: #0a2540;
  border-bottom: 1px solid var(--bs-border-color);
}

/* ---- 15. Modals ---- */
html[data-theme="dusk"] .modal-content {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.625rem;
  box-shadow: var(--dusk-shadow-overlay);
}
html[data-theme="dusk"] .modal-header {
  border-bottom-color: var(--bs-border-color);
  color: #0a2540;
}
html[data-theme="dusk"] .modal-footer {
  border-top-color: var(--bs-border-color);
}

/* ---- 16. Tom Select + flatpickr (no new JS libs; theming only) ---- */
html[data-theme="dusk"] .ts-wrapper.form-control,
html[data-theme="dusk"] .ts-wrapper.form-select,
html[data-theme="dusk"] .ts-control {
  background-color: #ffffff;
  border-color: #ddd8d0;
  color: #1b2733;
  border-radius: 0.5rem;
}
html[data-theme="dusk"] .ts-wrapper.focus .ts-control,
html[data-theme="dusk"] .ts-control:focus-within {
  border-color: #635bff;
  box-shadow: var(--dusk-focus-ring);
}
html[data-theme="dusk"] .ts-control .item {
  background-color: rgba(99, 91, 255, 0.12);
  color: #4f46e8;
  border-radius: 0.375rem;
}
html[data-theme="dusk"] .ts-dropdown {
  background-color: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: var(--dusk-shadow-overlay);
  color: #1b2733;
}
html[data-theme="dusk"] .ts-dropdown .active {
  background-color: rgba(99, 91, 255, 0.10);
  color: #4f46e8;
}
html[data-theme="dusk"] .flatpickr-calendar {
  border-radius: 0.5rem;
  box-shadow: var(--dusk-shadow-overlay);
}
html[data-theme="dusk"] .flatpickr-day.selected,
html[data-theme="dusk"] .flatpickr-day.selected:hover {
  background: #635bff;
  border-color: #635bff;
  color: #ffffff;
}
html[data-theme="dusk"] .flatpickr-day:hover {
  background: #f0eee9;
}

/* ---- 17. Misc surfaces ---- */
html[data-theme="dusk"] .border,
html[data-theme="dusk"] .border-top,
html[data-theme="dusk"] .border-bottom,
html[data-theme="dusk"] .border-start,
html[data-theme="dusk"] .border-end {
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dusk"] hr {
  border-top-color: var(--bs-border-color);
  opacity: 1;
}
html[data-theme="dusk"] a {
  text-decoration-color: rgba(79, 70, 232, 0.35);
}
html[data-theme="dusk"] .text-muted {
  color: #667085 !important;
}
html[data-theme="dusk"] .bg-body {
  background-color: var(--bs-body-bg) !important;
}
html[data-theme="dusk"] .bg-light {
  background-color: #f0eee9 !important;
}

/* Pagination picks up the accent */
html[data-theme="dusk"] .page-link {
  color: #4f46e8;
  border-color: var(--bs-border-color);
}
html[data-theme="dusk"] .page-item.active .page-link {
  background-color: #635bff;
  border-color: #635bff;
  color: #ffffff;
}
html[data-theme="dusk"] .page-link:focus {
  box-shadow: var(--dusk-focus-ring);
}