:root,
:root[data-tn-theme="light"] {
  /* Light theme palette (standardized):
     Subtle White #EEEEEE, Gainsboro #DDDDDD, Smooth Grey #CCCCCC,
     Silver Coin #BBBBBB, Dark Charcoal #333333 */
  --tn-bg: #eeeeee;
  --tn-surface: #dddddd;
  --tn-surface-alt: #cccccc;
  --tn-border: #bbbbbb;
  --tn-text: #333333;
  --tn-text-muted: #333333;
  --tn-primary: #333333;
  --tn-primary-hover: #333333;
  --tn-accent: #bbbbbb;
  --tn-accent-hover: #cccccc;
  --tn-accent-soft: #eeeeee;
  --tn-accent-border: #bbbbbb;
  --tn-accent-text: #333333;
  --tn-shadow-rgb: 51, 51, 51;
  --tn-link: var(--tn-primary);
  --tn-on-primary: #ffffff;
  --tn-table-striped-bg: var(--tn-surface-alt);
  --tn-table-hover-bg: var(--tn-accent-soft);
  --tn-placeholder: var(--tn-text-muted);
  --tn-focus-ring: rgba(var(--tn-shadow-rgb), 0.18);
  --tn-btn-warning-bg: var(--tn-accent);
  --tn-btn-warning-text: #ffffff;
  --tn-btn-warning-hover: var(--tn-accent-hover);

  --bs-body-bg: var(--tn-bg);
  --bs-body-color: var(--tn-text);
  --bs-border-color: var(--tn-border);
  --bs-secondary-color: var(--tn-text-muted);
  --bs-primary: var(--tn-primary);
  --bs-primary-rgb: 51, 51, 51;

  /* Keep warning family inside the same palette family. */
  --bs-warning: var(--tn-accent);
  --bs-warning-rgb: 187, 187, 187;
  --bs-warning-text-emphasis: var(--tn-accent-text);
  --bs-warning-bg-subtle: var(--tn-accent-soft);
  --bs-warning-border-subtle: var(--tn-accent-border);
}

/* Dark purple (legacy storage key "dark" still supported) */
:root[data-tn-theme="dark-purple"],
:root[data-tn-theme="dark"] {
  --tn-bg: #1A1A1D;
  --tn-surface: #3B1C32;
  --tn-surface-alt: #4a2140;
  --tn-border: #6A1E55;
  --tn-text: #f8eaf3;
  --tn-text-muted: #e8c4d8;
  --tn-link: #f5c6e6;
  --tn-primary: #d4569a;
  --tn-primary-hover: #e878b5;
  --tn-on-primary: #ffffff;
  --tn-accent: #A64D79;
  --tn-accent-hover: #c16291;
  --tn-accent-soft: #4a2140;
  --tn-accent-border: #6A1E55;
  --tn-accent-text: #ffd8ea;
  --tn-shadow-rgb: 0, 0, 0;
  --tn-table-striped-bg: #432039;
  --tn-table-hover-bg: #552548;
  --tn-placeholder: #c49ab2;
  --tn-focus-ring: rgba(166, 77, 121, 0.28);
  --tn-btn-warning-bg: #d4569a;
  --tn-btn-warning-text: #ffffff;
  --tn-btn-warning-hover: #e878b5;
  color-scheme: dark;

  --bs-body-bg: var(--tn-bg);
  --bs-body-color: var(--tn-text);
  --bs-border-color: var(--tn-border);
  --bs-secondary-color: var(--tn-text-muted);
  --bs-tertiary-bg: #241921;
  --bs-primary: var(--tn-primary);
  --bs-primary-rgb: 212, 86, 154;
  --bs-warning: var(--tn-accent);
  --bs-warning-rgb: 166, 77, 121;
  --bs-warning-text-emphasis: var(--tn-accent-text);
  --bs-warning-bg-subtle: var(--tn-accent-soft);
  --bs-warning-border-subtle: var(--tn-accent-border);
}

/* High contrast dark */
:root[data-tn-theme="contrast"] {
  --tn-bg: #141414;
  --tn-surface: #1c1c1c;
  --tn-surface-alt: #262626;
  --tn-border: #ffffff;
  --tn-text: #ffffff;
  --tn-text-muted: #e8e8e8;
  --tn-link: #7ee8ff;
  --tn-primary: #ffeb3b;
  --tn-primary-hover: #fff176;
  --tn-on-primary: #000000;
  --tn-accent: #ffeb3b;
  --tn-accent-hover: #fff176;
  --tn-accent-soft: #1a1a00;
  --tn-accent-border: #ffffff;
  --tn-accent-text: #000000;
  --tn-shadow-rgb: 255, 255, 255;
  --tn-table-striped-bg: #262626;
  --tn-table-hover-bg: #333333;
  --tn-placeholder: #cccccc;
  --tn-focus-ring: rgba(255, 235, 59, 0.35);
  --tn-btn-warning-bg: #ffeb3b;
  --tn-btn-warning-text: #000000;
  --tn-btn-warning-hover: #fff176;
  color-scheme: dark;

  --bs-body-bg: var(--tn-bg);
  --bs-body-color: var(--tn-text);
  --bs-border-color: var(--tn-border);
  --bs-secondary-color: var(--tn-text-muted);
  --bs-tertiary-bg: #1a1a1a;
  --bs-primary: var(--tn-primary);
  --bs-primary-rgb: 255, 235, 59;
  --bs-warning: var(--tn-accent);
  --bs-warning-rgb: 255, 235, 59;
  --bs-warning-text-emphasis: #000000;
  --bs-warning-bg-subtle: #1a1a00;
  --bs-warning-border-subtle: #ffffff;
}

:root[data-tn-theme="dark-purple"] html,
:root[data-tn-theme="dark"] html,
:root[data-tn-theme="dark-purple"] body,
:root[data-tn-theme="dark"] body {
  background-color: #1A1A1D !important;
}

:root[data-tn-theme="contrast"] html,
:root[data-tn-theme="contrast"] body {
  background-color: #141414 !important;
}

html, body {
  background: var(--tn-bg) !important;
  color: var(--tn-text) !important;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .wrap,
  .page-wrap,
  .main-container {
    max-width: 1400px;
  }
}

a {
  color: var(--tn-link, var(--tn-primary));
}

a:hover {
  color: var(--tn-primary-hover);
}

.card,
.card-dark {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: 14px;
  color: var(--tn-text);
  box-shadow: 0 8px 22px rgba(var(--tn-shadow-rgb), 0.08);
}

.muted {
  color: var(--tn-text-muted) !important;
}

.form-control,
.form-select,
textarea.form-control {
  background: var(--tn-surface);
  border-color: var(--tn-border);
  color: var(--tn-text);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background: var(--tn-surface);
  border-color: var(--tn-primary);
  color: var(--tn-text);
  box-shadow: 0 0 0 0.2rem rgba(var(--tn-shadow-rgb), 0.18);
}

:root[data-tn-theme="dark-purple"] .form-control, :root[data-tn-theme="dark"] .form-control, :root[data-tn-theme="contrast"] .form-control,
:root[data-tn-theme="dark-purple"] .form-select, :root[data-tn-theme="dark"] .form-select, :root[data-tn-theme="contrast"] .form-select,
:root[data-tn-theme="dark-purple"] textarea.form-control, :root[data-tn-theme="dark"] textarea.form-control, :root[data-tn-theme="contrast"] textarea.form-control {
  border-color: var(--tn-border);
}

:root[data-tn-theme="dark-purple"] .form-control::placeholder, :root[data-tn-theme="dark"] .form-control::placeholder,
:root[data-tn-theme="dark-purple"] textarea.form-control::placeholder, :root[data-tn-theme="dark"] textarea.form-control::placeholder,
:root[data-tn-theme="contrast"] .form-control::placeholder,
:root[data-tn-theme="contrast"] textarea.form-control::placeholder {
  color: var(--tn-placeholder);
}

:root[data-tn-theme="dark-purple"] .form-control:focus, :root[data-tn-theme="dark"] .form-control:focus, :root[data-tn-theme="contrast"] .form-control:focus,
:root[data-tn-theme="dark-purple"] .form-select:focus, :root[data-tn-theme="dark"] .form-select:focus, :root[data-tn-theme="contrast"] .form-select:focus,
:root[data-tn-theme="dark-purple"] textarea.form-control:focus, :root[data-tn-theme="dark"] textarea.form-control:focus, :root[data-tn-theme="contrast"] textarea.form-control:focus {
  border-color: var(--tn-primary);
  box-shadow: 0 0 0 0.2rem var(--tn-focus-ring);
}

.btn-primary {
  background: var(--tn-primary);
  border-color: var(--tn-primary);
  color: var(--tn-on-primary, #ffffff) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--tn-primary-hover);
  border-color: var(--tn-primary-hover);
  color: var(--tn-on-primary, #ffffff) !important;
}

.btn-warning {
  --bs-btn-bg: var(--tn-btn-warning-bg, var(--tn-accent));
  --bs-btn-border-color: var(--tn-btn-warning-bg, var(--tn-accent));
  --bs-btn-color: var(--tn-btn-warning-text, var(--tn-on-primary, #ffffff));
  --bs-btn-hover-bg: var(--tn-btn-warning-hover, var(--tn-accent-hover));
  --bs-btn-hover-border-color: var(--tn-btn-warning-hover, var(--tn-accent-hover));
  --bs-btn-hover-color: var(--tn-btn-warning-text, var(--tn-on-primary, #ffffff));
  background: var(--tn-btn-warning-bg, var(--tn-accent)) !important;
  border-color: var(--tn-btn-warning-bg, var(--tn-accent)) !important;
  color: var(--tn-btn-warning-text, var(--tn-on-primary, #ffffff)) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: var(--tn-btn-warning-hover, var(--tn-accent-hover)) !important;
  border-color: var(--tn-btn-warning-hover, var(--tn-accent-hover)) !important;
  color: var(--tn-btn-warning-text, var(--tn-on-primary, #ffffff)) !important;
}

.btn-outline-warning {
  color: var(--tn-accent-text);
  border-color: var(--tn-accent-border);
  background: var(--tn-surface);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  color: var(--tn-accent-text);
  border-color: var(--tn-accent);
  background: var(--tn-accent-soft);
}

.btn-outline-light {
  color: var(--tn-text);
  border-color: var(--tn-border);
  background: var(--tn-surface);
}

.btn-outline-light:hover {
  color: var(--tn-primary-hover);
  background: var(--tn-accent-soft);
  border-color: var(--tn-accent-border);
}

:root[data-tn-theme="dark-purple"] .btn-outline-light, :root[data-tn-theme="dark"] .btn-outline-light, :root[data-tn-theme="contrast"] .btn-outline-light {
  color: var(--tn-text);
  border-color: var(--tn-border);
  background: transparent;
}

:root[data-tn-theme="dark-purple"] .btn-outline-light:hover, :root[data-tn-theme="dark"] .btn-outline-light:hover, :root[data-tn-theme="contrast"] .btn-outline-light:hover,
:root[data-tn-theme="dark-purple"] .btn-outline-light:focus, :root[data-tn-theme="dark"] .btn-outline-light:focus, :root[data-tn-theme="contrast"] .btn-outline-light:focus {
  color: #ffffff !important;
  background: var(--tn-accent-soft);
  border-color: var(--tn-primary);
}

.table,
.table th,
.table td {
  color: var(--tn-text);
}

.table thead th,
.table tfoot th {
  background: var(--tn-surface-alt);
  border-bottom-color: var(--tn-border);
}

.table-dark,
.table-dark th,
.table-dark td {
  --bs-table-bg: var(--tn-surface) !important;
  --bs-table-striped-bg: var(--tn-surface-alt) !important;
  --bs-table-striped-color: var(--tn-text) !important;
  --bs-table-hover-bg: var(--tn-accent-soft) !important;
  --bs-table-hover-color: var(--tn-text) !important;
  --bs-table-active-bg: var(--tn-accent-soft) !important;
  --bs-table-active-color: var(--tn-text) !important;
  --bs-table-color: var(--tn-text) !important;
  --bs-table-border-color: var(--tn-border) !important;
}

.table.table-dark.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-table-hover-color) !important;
}

.table.table-dark .text-secondary {
  color: var(--tn-text-muted) !important;
}

.table.table-dark td a:not(.btn),
.table.table-dark .link-light:not(.btn) {
  color: var(--tn-link, var(--tn-primary)) !important;
}

.table.table-dark td a:not(.btn):hover,
.table.table-dark .link-light:not(.btn):hover {
  color: var(--tn-primary-hover) !important;
}

:root[data-tn-theme="dark-purple"] .table-dark, :root[data-tn-theme="dark"] .table-dark, :root[data-tn-theme="contrast"] .table-dark,
:root[data-tn-theme="dark-purple"] .table-dark th, :root[data-tn-theme="dark"] .table-dark th, :root[data-tn-theme="contrast"] .table-dark th,
:root[data-tn-theme="dark-purple"] .table-dark td, :root[data-tn-theme="dark"] .table-dark td, :root[data-tn-theme="contrast"] .table-dark td {
  --bs-table-bg: var(--tn-surface) !important;
  --bs-table-striped-bg: var(--tn-table-striped-bg) !important;
  --bs-table-striped-color: var(--tn-text) !important;
  --bs-table-hover-bg: var(--tn-table-hover-bg) !important;
  --bs-table-hover-color: var(--tn-text) !important;
  --bs-table-active-bg: var(--tn-accent-soft) !important;
  --bs-table-active-color: var(--tn-text) !important;
  --bs-table-color: var(--tn-text) !important;
  --bs-table-border-color: var(--tn-border) !important;
}

:root[data-tn-theme="dark-purple"] .table.table-dark .text-secondary, :root[data-tn-theme="dark"] .table.table-dark .text-secondary, :root[data-tn-theme="contrast"] .table.table-dark .text-secondary {
  color: var(--tn-text-muted) !important;
}

:root[data-tn-theme="dark-purple"] .table.table-dark td a:not(.btn), :root[data-tn-theme="dark"] .table.table-dark td a:not(.btn), :root[data-tn-theme="contrast"] .table.table-dark td a:not(.btn),
:root[data-tn-theme="dark-purple"] .table.table-dark .link-light:not(.btn), :root[data-tn-theme="dark"] .table.table-dark .link-light:not(.btn), :root[data-tn-theme="contrast"] .table.table-dark .link-light:not(.btn),
:root[data-tn-theme="dark-purple"] a:not(.btn):not(.ui-state-default), :root[data-tn-theme="dark"] a:not(.btn):not(.ui-state-default), :root[data-tn-theme="contrast"] a:not(.btn):not(.ui-state-default) {
  color: var(--tn-link, var(--tn-primary)) !important;
}

:root[data-tn-theme="dark-purple"] .table.table-dark td a:not(.btn):hover, :root[data-tn-theme="dark"] .table.table-dark td a:not(.btn):hover, :root[data-tn-theme="contrast"] .table.table-dark td a:not(.btn):hover,
:root[data-tn-theme="dark-purple"] .table.table-dark .link-light:not(.btn):hover, :root[data-tn-theme="dark"] .table.table-dark .link-light:not(.btn):hover, :root[data-tn-theme="contrast"] .table.table-dark .link-light:not(.btn):hover,
:root[data-tn-theme="dark-purple"] a:not(.btn):not(.ui-state-default):hover, :root[data-tn-theme="dark"] a:not(.btn):not(.ui-state-default):hover, :root[data-tn-theme="contrast"] a:not(.btn):not(.ui-state-default):hover {
  color: var(--tn-primary-hover) !important;
}

:root[data-tn-theme="dark-purple"] .bg-white, :root[data-tn-theme="dark"] .bg-white, :root[data-tn-theme="contrast"] .bg-white,
:root[data-tn-theme="dark-purple"] .list-group-item, :root[data-tn-theme="dark"] .list-group-item, :root[data-tn-theme="contrast"] .list-group-item,
:root[data-tn-theme="dark-purple"] .modal-content, :root[data-tn-theme="dark"] .modal-content, :root[data-tn-theme="contrast"] .modal-content,
:root[data-tn-theme="dark-purple"] .dropdown-menu, :root[data-tn-theme="dark"] .dropdown-menu, :root[data-tn-theme="contrast"] .dropdown-menu,
:root[data-tn-theme="dark-purple"] .card-hero, :root[data-tn-theme="dark"] .card-hero, :root[data-tn-theme="contrast"] .card-hero,
:root[data-tn-theme="dark-purple"] .card-dark, :root[data-tn-theme="dark"] .card-dark, :root[data-tn-theme="contrast"] .card-dark,
:root[data-tn-theme="dark-purple"] .quick-card, :root[data-tn-theme="dark"] .quick-card, :root[data-tn-theme="contrast"] .quick-card,
:root[data-tn-theme="dark-purple"] .stat-card, :root[data-tn-theme="dark"] .stat-card, :root[data-tn-theme="contrast"] .stat-card,
:root[data-tn-theme="dark-purple"] .summary-card, :root[data-tn-theme="dark"] .summary-card, :root[data-tn-theme="contrast"] .summary-card,
:root[data-tn-theme="dark-purple"] .card-header, :root[data-tn-theme="dark"] .card-header, :root[data-tn-theme="contrast"] .card-header,
:root[data-tn-theme="dark-purple"] .card-footer, :root[data-tn-theme="dark"] .card-footer, :root[data-tn-theme="contrast"] .card-footer,
:root[data-tn-theme="dark-purple"] .input-group-text, :root[data-tn-theme="dark"] .input-group-text, :root[data-tn-theme="contrast"] .input-group-text,
:root[data-tn-theme="dark-purple"] .metric-card, :root[data-tn-theme="dark"] .metric-card, :root[data-tn-theme="contrast"] .metric-card,
:root[data-tn-theme="dark-purple"] .report-card, :root[data-tn-theme="dark"] .report-card, :root[data-tn-theme="contrast"] .report-card,
:root[data-tn-theme="dark-purple"] .quick-link, :root[data-tn-theme="dark"] .quick-link, :root[data-tn-theme="contrast"] .quick-link,
:root[data-tn-theme="dark-purple"] .kpi-card, :root[data-tn-theme="dark"] .kpi-card, :root[data-tn-theme="contrast"] .kpi-card,
:root[data-tn-theme="dark-purple"] .location-card, :root[data-tn-theme="dark"] .location-card, :root[data-tn-theme="contrast"] .location-card,
:root[data-tn-theme="dark-purple"] .route-card, :root[data-tn-theme="dark"] .route-card, :root[data-tn-theme="contrast"] .route-card,
:root[data-tn-theme="dark-purple"] .readonly-box, :root[data-tn-theme="dark"] .readonly-box, :root[data-tn-theme="contrast"] .readonly-box,
:root[data-tn-theme="dark-purple"] [style*="background:#ffffff"], :root[data-tn-theme="dark"] [style*="background:#ffffff"], :root[data-tn-theme="contrast"] [style*="background:#ffffff"],
:root[data-tn-theme="dark-purple"] [style*="background: #ffffff"], :root[data-tn-theme="dark"] [style*="background: #ffffff"], :root[data-tn-theme="contrast"] [style*="background: #ffffff"],
:root[data-tn-theme="dark-purple"] [style*="background:#fff"], :root[data-tn-theme="dark"] [style*="background:#fff"], :root[data-tn-theme="contrast"] [style*="background:#fff"],
:root[data-tn-theme="dark-purple"] [style*="background: #fff"], :root[data-tn-theme="dark"] [style*="background: #fff"], :root[data-tn-theme="contrast"] [style*="background: #fff"],
:root[data-tn-theme="dark-purple"] [style*="background-color:#ffffff"], :root[data-tn-theme="dark"] [style*="background-color:#ffffff"], :root[data-tn-theme="contrast"] [style*="background-color:#ffffff"],
:root[data-tn-theme="dark-purple"] [style*="background-color: #ffffff"], :root[data-tn-theme="dark"] [style*="background-color: #ffffff"], :root[data-tn-theme="contrast"] [style*="background-color: #ffffff"],
:root[data-tn-theme="dark-purple"] [style*="background-color:#fff"], :root[data-tn-theme="dark"] [style*="background-color:#fff"], :root[data-tn-theme="contrast"] [style*="background-color:#fff"],
:root[data-tn-theme="dark-purple"] [style*="background-color: #fff"], :root[data-tn-theme="dark"] [style*="background-color: #fff"], :root[data-tn-theme="contrast"] [style*="background-color: #fff"] {
  background-color: var(--tn-surface) !important;
  color: var(--tn-text) !important;
  border-color: var(--tn-border) !important;
}

:root[data-tn-theme="dark-purple"] [style*="background:#f8fafc"], :root[data-tn-theme="dark"] [style*="background:#f8fafc"], :root[data-tn-theme="contrast"] [style*="background:#f8fafc"],
:root[data-tn-theme="dark-purple"] [style*="background: #f8fafc"], :root[data-tn-theme="dark"] [style*="background: #f8fafc"], :root[data-tn-theme="contrast"] [style*="background: #f8fafc"],
:root[data-tn-theme="dark-purple"] [style*="background-color:#f8fafc"], :root[data-tn-theme="dark"] [style*="background-color:#f8fafc"], :root[data-tn-theme="contrast"] [style*="background-color:#f8fafc"],
:root[data-tn-theme="dark-purple"] [style*="background-color: #f8fafc"], :root[data-tn-theme="dark"] [style*="background-color: #f8fafc"], :root[data-tn-theme="contrast"] [style*="background-color: #f8fafc"],
:root[data-tn-theme="dark-purple"] [style*="background:#f1f5f9"], :root[data-tn-theme="dark"] [style*="background:#f1f5f9"], :root[data-tn-theme="contrast"] [style*="background:#f1f5f9"],
:root[data-tn-theme="dark-purple"] [style*="background: #f1f5f9"], :root[data-tn-theme="dark"] [style*="background: #f1f5f9"], :root[data-tn-theme="contrast"] [style*="background: #f1f5f9"],
:root[data-tn-theme="dark-purple"] [style*="background-color:#f1f5f9"], :root[data-tn-theme="dark"] [style*="background-color:#f1f5f9"], :root[data-tn-theme="contrast"] [style*="background-color:#f1f5f9"],
:root[data-tn-theme="dark-purple"] [style*="background-color: #f1f5f9"], :root[data-tn-theme="dark"] [style*="background-color: #f1f5f9"], :root[data-tn-theme="contrast"] [style*="background-color: #f1f5f9"] {
  background-color: var(--tn-surface-alt) !important;
  color: var(--tn-text) !important;
  border-color: var(--tn-border) !important;
}

:root[data-tn-theme="dark-purple"] .bg-body-tertiary, :root[data-tn-theme="dark"] .bg-body-tertiary {
  background-color: #1A1A1D !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="contrast"] .bg-body-tertiary {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .text-muted, :root[data-tn-theme="dark"] .text-muted, :root[data-tn-theme="contrast"] .text-muted,
:root[data-tn-theme="dark-purple"] .text-secondary, :root[data-tn-theme="dark"] .text-secondary, :root[data-tn-theme="contrast"] .text-secondary,
:root[data-tn-theme="dark-purple"] .helper, :root[data-tn-theme="dark"] .helper, :root[data-tn-theme="contrast"] .helper,
:root[data-tn-theme="dark-purple"] .mini, :root[data-tn-theme="dark"] .mini, :root[data-tn-theme="contrast"] .mini,
:root[data-tn-theme="dark-purple"] .section-h, :root[data-tn-theme="dark"] .section-h, :root[data-tn-theme="contrast"] .section-h,
:root[data-tn-theme="dark-purple"] .summary-label, :root[data-tn-theme="dark"] .summary-label, :root[data-tn-theme="contrast"] .summary-label,
:root[data-tn-theme="dark-purple"] .page-sub, :root[data-tn-theme="dark"] .page-sub, :root[data-tn-theme="contrast"] .page-sub,
:root[data-tn-theme="dark-purple"] .small-note, :root[data-tn-theme="dark"] .small-note, :root[data-tn-theme="contrast"] .small-note,
:root[data-tn-theme="dark-purple"] .small-muted, :root[data-tn-theme="dark"] .small-muted, :root[data-tn-theme="contrast"] .small-muted,
:root[data-tn-theme="dark-purple"] .metric-label, :root[data-tn-theme="dark"] .metric-label, :root[data-tn-theme="contrast"] .metric-label,
:root[data-tn-theme="dark-purple"] .notes-preview, :root[data-tn-theme="dark"] .notes-preview, :root[data-tn-theme="contrast"] .notes-preview,
:root[data-tn-theme="dark-purple"] .collector-name, :root[data-tn-theme="dark"] .collector-name, :root[data-tn-theme="contrast"] .collector-name,
:root[data-tn-theme="dark-purple"] .form-text, :root[data-tn-theme="dark"] .form-text, :root[data-tn-theme="contrast"] .form-text,
:root[data-tn-theme="dark-purple"] [style*="color:#64748b"], :root[data-tn-theme="dark"] [style*="color:#64748b"], :root[data-tn-theme="contrast"] [style*="color:#64748b"],
:root[data-tn-theme="dark-purple"] [style*="color: #64748b"], :root[data-tn-theme="dark"] [style*="color: #64748b"], :root[data-tn-theme="contrast"] [style*="color: #64748b"],
:root[data-tn-theme="dark-purple"] [style*="color:#475569"], :root[data-tn-theme="dark"] [style*="color:#475569"], :root[data-tn-theme="contrast"] [style*="color:#475569"],
:root[data-tn-theme="dark-purple"] [style*="color: #475569"], :root[data-tn-theme="dark"] [style*="color: #475569"], :root[data-tn-theme="contrast"] [style*="color: #475569"] {
  color: var(--tn-text-muted) !important;
}

:root[data-tn-theme="dark-purple"] .page-title, :root[data-tn-theme="dark"] .page-title, :root[data-tn-theme="contrast"] .page-title,
:root[data-tn-theme="dark-purple"] .section-total, :root[data-tn-theme="dark"] .section-total, :root[data-tn-theme="contrast"] .section-total,
:root[data-tn-theme="dark-purple"] .summary-value, :root[data-tn-theme="dark"] .summary-value, :root[data-tn-theme="contrast"] .summary-value,
:root[data-tn-theme="dark-purple"] .metric, :root[data-tn-theme="dark"] .metric, :root[data-tn-theme="contrast"] .metric,
:root[data-tn-theme="dark-purple"] .totals-row, :root[data-tn-theme="dark"] .totals-row, :root[data-tn-theme="contrast"] .totals-row,
:root[data-tn-theme="dark-purple"] .location-heading, :root[data-tn-theme="dark"] .location-heading, :root[data-tn-theme="contrast"] .location-heading,
:root[data-tn-theme="dark-purple"] h1, :root[data-tn-theme="dark"] h1, :root[data-tn-theme="contrast"] h1,
:root[data-tn-theme="dark-purple"] h2, :root[data-tn-theme="dark"] h2, :root[data-tn-theme="contrast"] h2,
:root[data-tn-theme="dark-purple"] h3, :root[data-tn-theme="dark"] h3, :root[data-tn-theme="contrast"] h3,
:root[data-tn-theme="dark-purple"] h4, :root[data-tn-theme="dark"] h4, :root[data-tn-theme="contrast"] h4,
:root[data-tn-theme="dark-purple"] h5, :root[data-tn-theme="dark"] h5, :root[data-tn-theme="contrast"] h5,
:root[data-tn-theme="dark-purple"] h6, :root[data-tn-theme="dark"] h6, :root[data-tn-theme="contrast"] h6,
:root[data-tn-theme="dark-purple"] .form-label, :root[data-tn-theme="dark"] .form-label, :root[data-tn-theme="contrast"] .form-label,
:root[data-tn-theme="dark-purple"] [style*="color:#1f2937"], :root[data-tn-theme="dark"] [style*="color:#1f2937"], :root[data-tn-theme="contrast"] [style*="color:#1f2937"],
:root[data-tn-theme="dark-purple"] [style*="color: #1f2937"], :root[data-tn-theme="dark"] [style*="color: #1f2937"], :root[data-tn-theme="contrast"] [style*="color: #1f2937"],
:root[data-tn-theme="dark-purple"] [style*="color:#334155"], :root[data-tn-theme="dark"] [style*="color:#334155"], :root[data-tn-theme="contrast"] [style*="color:#334155"],
:root[data-tn-theme="dark-purple"] [style*="color: #334155"], :root[data-tn-theme="dark"] [style*="color: #334155"], :root[data-tn-theme="contrast"] [style*="color: #334155"] {
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .border, :root[data-tn-theme="dark"] .border, :root[data-tn-theme="contrast"] .border,
:root[data-tn-theme="dark-purple"] .border-bottom, :root[data-tn-theme="dark"] .border-bottom, :root[data-tn-theme="contrast"] .border-bottom,
:root[data-tn-theme="dark-purple"] .border-top, :root[data-tn-theme="dark"] .border-top, :root[data-tn-theme="contrast"] .border-top,
:root[data-tn-theme="dark-purple"] hr, :root[data-tn-theme="dark"] hr, :root[data-tn-theme="contrast"] hr,
:root[data-tn-theme="dark-purple"] [style*="border:1px solid #dbe3ef"], :root[data-tn-theme="dark"] [style*="border:1px solid #dbe3ef"], :root[data-tn-theme="contrast"] [style*="border:1px solid #dbe3ef"],
:root[data-tn-theme="dark-purple"] [style*="border: 1px solid #dbe3ef"], :root[data-tn-theme="dark"] [style*="border: 1px solid #dbe3ef"], :root[data-tn-theme="contrast"] [style*="border: 1px solid #dbe3ef"],
:root[data-tn-theme="dark-purple"] [style*="border-color:#dbe3ef"], :root[data-tn-theme="dark"] [style*="border-color:#dbe3ef"], :root[data-tn-theme="contrast"] [style*="border-color:#dbe3ef"],
:root[data-tn-theme="dark-purple"] [style*="border-color: #dbe3ef"], :root[data-tn-theme="dark"] [style*="border-color: #dbe3ef"], :root[data-tn-theme="contrast"] [style*="border-color: #dbe3ef"],
:root[data-tn-theme="dark-purple"] [style*="border-color:#cdd8e7"], :root[data-tn-theme="dark"] [style*="border-color:#cdd8e7"], :root[data-tn-theme="contrast"] [style*="border-color:#cdd8e7"],
:root[data-tn-theme="dark-purple"] [style*="border-color: #cdd8e7"], :root[data-tn-theme="dark"] [style*="border-color: #cdd8e7"], :root[data-tn-theme="contrast"] [style*="border-color: #cdd8e7"] {
  border-color: var(--tn-border) !important;
}

:root[data-tn-theme="dark-purple"] .badge-soft, :root[data-tn-theme="dark"] .badge-soft, :root[data-tn-theme="contrast"] .badge-soft,
:root[data-tn-theme="dark-purple"] .id-badge, :root[data-tn-theme="dark"] .id-badge, :root[data-tn-theme="contrast"] .id-badge {
  background: var(--tn-surface-alt) !important;
  border-color: var(--tn-border) !important;
  color: var(--tn-text-muted) !important;
}

:root[data-tn-theme="dark-purple"] .filter-input, :root[data-tn-theme="dark"] .filter-input, :root[data-tn-theme="contrast"] .filter-input {
  background: var(--tn-surface) !important;
  border-color: var(--tn-border) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .btn-ghost, :root[data-tn-theme="dark"] .btn-ghost, :root[data-tn-theme="contrast"] .btn-ghost,
:root[data-tn-theme="dark-purple"] .btn-outline-secondary, :root[data-tn-theme="dark"] .btn-outline-secondary, :root[data-tn-theme="contrast"] .btn-outline-secondary {
  background: transparent !important;
  border-color: var(--tn-border) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .btn-ghost:hover, :root[data-tn-theme="dark"] .btn-ghost:hover, :root[data-tn-theme="contrast"] .btn-ghost:hover,
:root[data-tn-theme="dark-purple"] .btn-outline-secondary:hover, :root[data-tn-theme="dark"] .btn-outline-secondary:hover, :root[data-tn-theme="contrast"] .btn-outline-secondary:hover {
  background: var(--tn-accent-soft) !important;
  border-color: var(--tn-accent-border) !important;
  color: var(--tn-accent-text) !important;
}

:root[data-tn-theme="dark-purple"] .totals-row, :root[data-tn-theme="dark"] .totals-row, :root[data-tn-theme="contrast"] .totals-row,
:root[data-tn-theme="dark-purple"] .location-heading, :root[data-tn-theme="dark"] .location-heading, :root[data-tn-theme="contrast"] .location-heading,
:root[data-tn-theme="dark-purple"] .section-row th, :root[data-tn-theme="dark"] .section-row th, :root[data-tn-theme="contrast"] .section-row th {
  background: var(--tn-surface-alt) !important;
  color: var(--tn-text) !important;
  border-color: var(--tn-border) !important;
}

:root[data-tn-theme="dark-purple"] .table-dark-blue, :root[data-tn-theme="dark"] .table-dark-blue, :root[data-tn-theme="contrast"] .table-dark-blue,
:root[data-tn-theme="dark-purple"] .table-dark-blue th, :root[data-tn-theme="dark"] .table-dark-blue th, :root[data-tn-theme="contrast"] .table-dark-blue th,
:root[data-tn-theme="dark-purple"] .table-dark-blue td, :root[data-tn-theme="dark"] .table-dark-blue td, :root[data-tn-theme="contrast"] .table-dark-blue td {
  --bs-table-bg: var(--tn-surface) !important;
  --bs-table-striped-bg: var(--tn-table-striped-bg) !important;
  --bs-table-hover-bg: var(--tn-table-hover-bg) !important;
  --bs-table-color: var(--tn-text) !important;
  --bs-table-striped-color: var(--tn-text) !important;
  --bs-table-hover-color: var(--tn-text) !important;
  --bs-table-border-color: var(--tn-border) !important;
  color: var(--tn-text) !important;
  border-color: var(--tn-border) !important;
}

:root[data-tn-theme="dark-purple"] .table thead th, :root[data-tn-theme="dark"] .table thead th, :root[data-tn-theme="contrast"] .table thead th,
:root[data-tn-theme="dark-purple"] .table tfoot th, :root[data-tn-theme="dark"] .table tfoot th, :root[data-tn-theme="contrast"] .table tfoot th {
  color: var(--tn-text) !important;
  background: var(--tn-surface-alt) !important;
  border-color: var(--tn-border) !important;
}

.theme-toggle {
  border: 1px solid var(--tn-border);
  background: var(--tn-surface);
  color: var(--tn-text);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 12px;
}

.theme-toggle:hover,
.theme-toggle:focus {
  background: var(--tn-accent-soft);
  border-color: var(--tn-accent-border);
  color: var(--tn-accent-text);
}

:root[data-tn-theme="light"] .theme-toggle .theme-toggle__state::before { content: "Light"; }
:root[data-tn-theme="dark-purple"] .theme-toggle .theme-toggle__state::before,
:root[data-tn-theme="dark"] .theme-toggle .theme-toggle__state::before { content: "Dark purple"; }
:root[data-tn-theme="contrast"] .theme-toggle .theme-toggle__state::before { content: "High contrast"; }

.btn-outline-light:hover,
.btn-outline-light:focus {
  color: var(--tn-primary-hover) !important;
}


/* Dark-theme form overrides (beats page-local light-only styles) */
:root[data-tn-theme="dark-purple"] .form-control,
:root[data-tn-theme="dark"] .form-control,
:root[data-tn-theme="contrast"] .form-control,
:root[data-tn-theme="dark-purple"] .form-select,
:root[data-tn-theme="dark"] .form-select,
:root[data-tn-theme="contrast"] .form-select,
:root[data-tn-theme="dark-purple"] textarea.form-control,
:root[data-tn-theme="dark"] textarea.form-control,
:root[data-tn-theme="contrast"] textarea.form-control {
  background: var(--tn-surface) !important;
  border-color: var(--tn-border) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .form-control:focus,
:root[data-tn-theme="dark"] .form-control:focus,
:root[data-tn-theme="contrast"] .form-control:focus,
:root[data-tn-theme="dark-purple"] .form-select:focus,
:root[data-tn-theme="dark"] .form-select:focus,
:root[data-tn-theme="contrast"] .form-select:focus,
:root[data-tn-theme="dark-purple"] textarea.form-control:focus,
:root[data-tn-theme="dark"] textarea.form-control:focus,
:root[data-tn-theme="contrast"] textarea.form-control:focus {
  background: var(--tn-surface) !important;
  border-color: var(--tn-primary) !important;
  color: var(--tn-text) !important;
  box-shadow: 0 0 0 0.2rem var(--tn-focus-ring) !important;
}

/* Buttons */
.btn-outline-primary {
  color: var(--tn-primary);
  border-color: var(--tn-primary);
  background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--tn-on-primary, #ffffff);
  background: var(--tn-primary);
  border-color: var(--tn-primary);
}

:root[data-tn-theme="dark-purple"] .btn-outline-primary,
:root[data-tn-theme="dark"] .btn-outline-primary,
:root[data-tn-theme="contrast"] .btn-outline-primary {
  color: var(--tn-link, var(--tn-primary));
  border-color: var(--tn-primary);
  background: transparent;
}

:root[data-tn-theme="dark-purple"] .btn-outline-primary:hover,
:root[data-tn-theme="dark"] .btn-outline-primary:hover,
:root[data-tn-theme="contrast"] .btn-outline-primary:hover,
:root[data-tn-theme="dark-purple"] .btn-outline-primary:focus,
:root[data-tn-theme="dark"] .btn-outline-primary:focus,
:root[data-tn-theme="contrast"] .btn-outline-primary:focus {
  color: var(--tn-on-primary, #ffffff);
  background: var(--tn-primary);
  border-color: var(--tn-primary);
}

:root[data-tn-theme="dark-purple"] .btn-primary,
:root[data-tn-theme="dark"] .btn-primary,
:root[data-tn-theme="contrast"] .btn-primary {
  background: var(--tn-primary) !important;
  border-color: var(--tn-primary) !important;
  color: var(--tn-on-primary, #ffffff) !important;
}

/* Close buttons on themed surfaces */
:root[data-tn-theme="dark-purple"] .modal-content .btn-close,
:root[data-tn-theme="dark"] .modal-content .btn-close,
:root[data-tn-theme="contrast"] .modal-content .btn-close,
:root[data-tn-theme="dark-purple"] .toast .btn-close,
:root[data-tn-theme="dark"] .toast .btn-close,
:root[data-tn-theme="contrast"] .toast .btn-close,
:root[data-tn-theme="dark-purple"] .alert .btn-close,
:root[data-tn-theme="dark"] .alert .btn-close,
:root[data-tn-theme="contrast"] .alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.85;
}

:root[data-tn-theme="contrast"] .modal-content .btn-close,
:root[data-tn-theme="contrast"] .toast .btn-close,
:root[data-tn-theme="contrast"] .alert .btn-close {
  opacity: 1;
}

:root[data-tn-theme="dark-purple"] #tnMobileNavOffcanvas .btn-close,
:root[data-tn-theme="dark"] #tnMobileNavOffcanvas .btn-close,
:root[data-tn-theme="contrast"] #tnMobileNavOffcanvas .btn-close,
:root[data-tn-theme="dark-purple"] #tnNavPaletteModal .btn-close,
:root[data-tn-theme="dark"] #tnNavPaletteModal .btn-close,
:root[data-tn-theme="contrast"] #tnNavPaletteModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.85;
}

/* Nav tabs */
:root[data-tn-theme="dark-purple"] .nav-tabs,
:root[data-tn-theme="dark"] .nav-tabs,
:root[data-tn-theme="contrast"] .nav-tabs {
  border-bottom-color: var(--tn-border);
}

:root[data-tn-theme="dark-purple"] .nav-tabs .nav-link,
:root[data-tn-theme="dark"] .nav-tabs .nav-link,
:root[data-tn-theme="contrast"] .nav-tabs .nav-link {
  color: var(--tn-text-muted);
  border-color: transparent;
  background: transparent;
}

:root[data-tn-theme="dark-purple"] .nav-tabs .nav-link:hover,
:root[data-tn-theme="dark"] .nav-tabs .nav-link:hover,
:root[data-tn-theme="contrast"] .nav-tabs .nav-link:hover,
:root[data-tn-theme="dark-purple"] .nav-tabs .nav-link:focus,
:root[data-tn-theme="dark"] .nav-tabs .nav-link:focus,
:root[data-tn-theme="contrast"] .nav-tabs .nav-link:focus {
  color: var(--tn-text);
  border-color: var(--tn-border) var(--tn-border) transparent;
}

:root[data-tn-theme="dark-purple"] .nav-tabs .nav-link.active,
:root[data-tn-theme="dark"] .nav-tabs .nav-link.active,
:root[data-tn-theme="contrast"] .nav-tabs .nav-link.active,
:root[data-tn-theme="dark-purple"] .nav-tabs .nav-item.show .nav-link,
:root[data-tn-theme="dark"] .nav-tabs .nav-item.show .nav-link,
:root[data-tn-theme="contrast"] .nav-tabs .nav-item.show .nav-link {
  color: var(--tn-text);
  background: var(--tn-surface);
  border-color: var(--tn-border) var(--tn-border) var(--tn-surface);
}

/* Alerts */
:root[data-tn-theme="dark-purple"] .alert,
:root[data-tn-theme="dark"] .alert,
:root[data-tn-theme="contrast"] .alert {
  border-width: 1px;
  border-style: solid;
}

:root[data-tn-theme="dark-purple"] .alert-info,
:root[data-tn-theme="dark"] .alert-info,
:root[data-tn-theme="contrast"] .alert-info {
  background: var(--tn-surface-alt);
  border-color: var(--tn-border);
  color: var(--tn-text);
}

:root[data-tn-theme="dark-purple"] .alert-success,
:root[data-tn-theme="dark"] .alert-success,
:root[data-tn-theme="contrast"] .alert-success {
  background: var(--tn-accent-soft);
  border-color: var(--tn-border);
  color: var(--tn-text);
}

:root[data-tn-theme="dark-purple"] .alert-warning,
:root[data-tn-theme="dark"] .alert-warning,
:root[data-tn-theme="contrast"] .alert-warning {
  background: var(--tn-accent-soft);
  border-color: var(--tn-accent-border);
  color: var(--tn-accent-text);
}

:root[data-tn-theme="contrast"] .alert-warning {
  color: var(--tn-text);
}

:root[data-tn-theme="dark-purple"] .alert-danger,
:root[data-tn-theme="dark"] .alert-danger,
:root[data-tn-theme="contrast"] .alert-danger {
  background: #3a1520;
  border-color: #ff6b6b;
  color: #ffb4b4;
}

:root[data-tn-theme="contrast"] .alert-danger {
  background: #2a0000;
  border-color: #ffffff;
  color: #ff8a80;
}

/* Semantic text utilities */
:root[data-tn-theme="dark-purple"] .text-warning,
:root[data-tn-theme="dark"] .text-warning,
:root[data-tn-theme="contrast"] .text-warning {
  color: var(--tn-accent-text) !important;
}

:root[data-tn-theme="contrast"] .text-warning {
  color: var(--tn-primary) !important;
}

:root[data-tn-theme="dark-purple"] .text-success,
:root[data-tn-theme="dark"] .text-success {
  color: #6ee7a0 !important;
}

:root[data-tn-theme="contrast"] .text-success {
  color: #69f0ae !important;
}

:root[data-tn-theme="dark-purple"] .text-danger,
:root[data-tn-theme="dark"] .text-danger {
  color: #ff8a8a !important;
}

:root[data-tn-theme="contrast"] .text-danger {
  color: #ff5252 !important;
}

:root[data-tn-theme="dark-purple"] .text-info,
:root[data-tn-theme="dark"] .text-info,
:root[data-tn-theme="contrast"] .text-info {
  color: var(--tn-link, var(--tn-primary)) !important;
}

/* Pagination */
:root[data-tn-theme="dark-purple"] .pagination .page-link,
:root[data-tn-theme="dark"] .pagination .page-link,
:root[data-tn-theme="contrast"] .pagination .page-link {
  background: var(--tn-surface);
  border-color: var(--tn-border);
  color: var(--tn-text);
}

:root[data-tn-theme="dark-purple"] .pagination .page-link:hover,
:root[data-tn-theme="dark"] .pagination .page-link:hover,
:root[data-tn-theme="contrast"] .pagination .page-link:hover {
  background: var(--tn-accent-soft);
  border-color: var(--tn-accent-border);
  color: var(--tn-accent-text);
}

:root[data-tn-theme="contrast"] .pagination .page-link:hover {
  color: var(--tn-text);
}

:root[data-tn-theme="dark-purple"] .pagination .page-item.active .page-link,
:root[data-tn-theme="dark"] .pagination .page-item.active .page-link,
:root[data-tn-theme="contrast"] .pagination .page-item.active .page-link {
  background: var(--tn-primary);
  border-color: var(--tn-primary);
  color: var(--tn-on-primary, #ffffff);
}

:root[data-tn-theme="dark-purple"] .pagination .page-item.disabled .page-link,
:root[data-tn-theme="dark"] .pagination .page-item.disabled .page-link,
:root[data-tn-theme="contrast"] .pagination .page-item.disabled .page-link {
  background: var(--tn-surface-alt);
  border-color: var(--tn-border);
  color: var(--tn-text-muted);
  opacity: 0.65;
}

/* Shared report / commission calendar widgets */
:root[data-tn-theme="dark-purple"] .week-link,
:root[data-tn-theme="dark"] .week-link,
:root[data-tn-theme="contrast"] .week-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--tn-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--tn-surface);
}

:root[data-tn-theme="dark-purple"] .week-link:hover,
:root[data-tn-theme="dark"] .week-link:hover,
:root[data-tn-theme="contrast"] .week-link:hover,
:root[data-tn-theme="dark-purple"] .week-link.active,
:root[data-tn-theme="dark"] .week-link.active,
:root[data-tn-theme="contrast"] .week-link.active {
  border-color: var(--tn-primary);
  background: var(--tn-accent-soft);
}

:root[data-tn-theme="dark-purple"] .week-day,
:root[data-tn-theme="dark"] .week-day,
:root[data-tn-theme="contrast"] .week-day {
  border-left-color: var(--tn-border);
}

:root[data-tn-theme="dark-purple"] .week-total,
:root[data-tn-theme="dark"] .week-total,
:root[data-tn-theme="contrast"] .week-total {
  background: var(--tn-surface-alt);
}

:root[data-tn-theme="dark-purple"] .day-name,
:root[data-tn-theme="dark"] .day-name,
:root[data-tn-theme="contrast"] .day-name {
  color: var(--tn-text-muted);
}

:root[data-tn-theme="dark-purple"] .day-total,
:root[data-tn-theme="dark"] .day-total,
:root[data-tn-theme="contrast"] .day-total {
  color: var(--tn-text-muted);
}

:root[data-tn-theme="dark-purple"] .week-total .day-total,
:root[data-tn-theme="dark"] .week-total .day-total,
:root[data-tn-theme="contrast"] .week-total .day-total {
  color: var(--tn-link, var(--tn-primary));
  font-weight: 700;
}

:root[data-tn-theme="dark-purple"] .stat-pill,
:root[data-tn-theme="dark"] .stat-pill,
:root[data-tn-theme="contrast"] .stat-pill {
  background: var(--tn-surface) !important;
  border: 1px solid var(--tn-border) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .table.report-table thead th,
:root[data-tn-theme="dark"] .table.report-table thead th,
:root[data-tn-theme="contrast"] .table.report-table thead th {
  background: var(--tn-surface-alt) !important;
  color: var(--tn-text) !important;
  border-color: var(--tn-border) !important;
}

:root[data-tn-theme="dark-purple"] .form-check:not(.form-switch),
:root[data-tn-theme="dark"] .form-check:not(.form-switch),
:root[data-tn-theme="contrast"] .form-check:not(.form-switch) {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  color: var(--tn-text);
}

:root[data-tn-theme="dark-purple"] .form-check:has(.form-check-input:checked),
:root[data-tn-theme="dark"] .form-check:has(.form-check-input:checked),
:root[data-tn-theme="contrast"] .form-check:has(.form-check-input:checked) {
  border-color: var(--tn-primary);
  background: var(--tn-accent-soft);
}

:root[data-tn-theme="dark-purple"] .kpi,
:root[data-tn-theme="dark"] .kpi,
:root[data-tn-theme="contrast"] .kpi {
  background: var(--tn-surface) !important;
  border: 1px solid var(--tn-border) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .kpi .label,
:root[data-tn-theme="dark"] .kpi .label,
:root[data-tn-theme="contrast"] .kpi .label {
  color: var(--tn-text-muted) !important;
}


:root[data-tn-theme="dark-purple"] .btn-outline-warning,
:root[data-tn-theme="dark"] .btn-outline-warning {
  color: var(--tn-btn-warning-bg, var(--tn-primary)) !important;
  border-color: var(--tn-btn-warning-bg, var(--tn-primary)) !important;
  background: transparent !important;
}

:root[data-tn-theme="dark-purple"] .btn-outline-warning:hover,
:root[data-tn-theme="dark"] .btn-outline-warning:hover,
:root[data-tn-theme="dark-purple"] .btn-outline-warning:focus,
:root[data-tn-theme="dark"] .btn-outline-warning:focus {
  color: var(--tn-btn-warning-text, #fff) !important;
  background: var(--tn-btn-warning-bg, var(--tn-primary)) !important;
  border-color: var(--tn-btn-warning-bg, var(--tn-primary)) !important;
}

:root[data-tn-theme="contrast"] .btn-outline-warning {
  color: #ffeb3b !important;
  border-color: #ffffff !important;
  background: transparent !important;
}

:root[data-tn-theme="contrast"] .btn-outline-warning:hover,
:root[data-tn-theme="contrast"] .btn-outline-warning:focus {
  color: #000000 !important;
  background: #ffeb3b !important;
  border-color: #ffffff !important;
}

/* jQuery UI datepicker */
:root[data-tn-theme="dark-purple"] .ui-datepicker,
:root[data-tn-theme="dark"] .ui-datepicker,
:root[data-tn-theme="contrast"] .ui-datepicker {
  background: var(--tn-surface) !important;
  border: 1px solid var(--tn-border) !important;
  color: var(--tn-text) !important;
  box-shadow: 0 8px 24px rgba(var(--tn-shadow-rgb), 0.25);
}

:root[data-tn-theme="dark-purple"] .ui-datepicker-header,
:root[data-tn-theme="dark"] .ui-datepicker-header,
:root[data-tn-theme="contrast"] .ui-datepicker-header {
  background: var(--tn-surface-alt) !important;
  border-color: var(--tn-border) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .ui-datepicker th,
:root[data-tn-theme="dark"] .ui-datepicker th,
:root[data-tn-theme="contrast"] .ui-datepicker th,
:root[data-tn-theme="dark-purple"] .ui-datepicker td,
:root[data-tn-theme="dark"] .ui-datepicker td,
:root[data-tn-theme="contrast"] .ui-datepicker td {
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .ui-datepicker td a,
:root[data-tn-theme="dark"] .ui-datepicker td a,
:root[data-tn-theme="contrast"] .ui-datepicker td a,
:root[data-tn-theme="dark-purple"] .ui-state-default,
:root[data-tn-theme="dark"] .ui-state-default,
:root[data-tn-theme="contrast"] .ui-state-default {
  background: var(--tn-surface) !important;
  border-color: var(--tn-border) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .ui-state-hover,
:root[data-tn-theme="dark"] .ui-state-hover,
:root[data-tn-theme="contrast"] .ui-state-hover,
:root[data-tn-theme="dark-purple"] .ui-state-focus,
:root[data-tn-theme="dark"] .ui-state-focus,
:root[data-tn-theme="contrast"] .ui-state-focus {
  background: var(--tn-accent-soft) !important;
  border-color: var(--tn-primary) !important;
  color: var(--tn-text) !important;
}

:root[data-tn-theme="dark-purple"] .ui-state-active,
:root[data-tn-theme="dark"] .ui-state-active,
:root[data-tn-theme="contrast"] .ui-state-active,
:root[data-tn-theme="dark-purple"] .ui-state-highlight,
:root[data-tn-theme="dark"] .ui-state-highlight,
:root[data-tn-theme="contrast"] .ui-state-highlight {
  background: var(--tn-primary) !important;
  border-color: var(--tn-primary) !important;
  color: var(--tn-on-primary, #ffffff) !important;
}

:root[data-tn-theme="dark-purple"] .ui-datepicker .ui-datepicker-prev,
:root[data-tn-theme="dark"] .ui-datepicker .ui-datepicker-prev,
:root[data-tn-theme="contrast"] .ui-datepicker .ui-datepicker-prev,
:root[data-tn-theme="dark-purple"] .ui-datepicker .ui-datepicker-next,
:root[data-tn-theme="dark"] .ui-datepicker .ui-datepicker-next,
:root[data-tn-theme="contrast"] .ui-datepicker .ui-datepicker-next {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.85;
}

:root[data-tn-theme="contrast"] .ui-datepicker .ui-datepicker-prev,
:root[data-tn-theme="contrast"] .ui-datepicker .ui-datepicker-next {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 1;
}

:root[data-tn-theme="dark-purple"] .ui-datepicker .ui-datepicker-title select,
:root[data-tn-theme="dark"] .ui-datepicker .ui-datepicker-title select,
:root[data-tn-theme="contrast"] .ui-datepicker .ui-datepicker-title select {
  background: var(--tn-surface);
  border-color: var(--tn-border);
  color: var(--tn-text);
}

/* Normalize legacy hardcoded colors to the light palette. */
:root[data-tn-theme="light"] [bgcolor="#000000"],
:root[data-tn-theme="light"] [bgcolor="#000"],
:root[data-tn-theme="light"] [bgcolor="#333333"],
:root[data-tn-theme="light"] [bgcolor="#333"],
:root[data-tn-theme="light"] [style*="background-color:black"],
:root[data-tn-theme="light"] [style*="background-color: black"],
:root[data-tn-theme="light"] [style*="background-color:#000"],
:root[data-tn-theme="light"] [style*="background-color: #000"],
:root[data-tn-theme="light"] [style*="background-color:#000000"],
:root[data-tn-theme="light"] [style*="background-color: #000000"],
:root[data-tn-theme="light"] [style*="background-color:#333"],
:root[data-tn-theme="light"] [style*="background-color: #333"],
:root[data-tn-theme="light"] [style*="background-color:#333333"],
:root[data-tn-theme="light"] [style*="background-color: #333333"],
:root[data-tn-theme="light"] [style*="background:black"],
:root[data-tn-theme="light"] [style*="background: black"],
:root[data-tn-theme="light"] [style*="background:#000"],
:root[data-tn-theme="light"] [style*="background: #000"],
:root[data-tn-theme="light"] [style*="background:#000000"],
:root[data-tn-theme="light"] [style*="background: #000000"],
:root[data-tn-theme="light"] [style*="background:#333"],
:root[data-tn-theme="light"] [style*="background: #333"],
:root[data-tn-theme="light"] [style*="background:#333333"],
:root[data-tn-theme="light"] [style*="background: #333333"] {
  background-color: var(--tn-surface) !important;
  color: var(--tn-text) !important;
  border-color: var(--tn-border) !important;
}

:root[data-tn-theme="light"] [style*="color:white"],
:root[data-tn-theme="light"] [style*="color: white"],
:root[data-tn-theme="light"] [style*="color:#fff"],
:root[data-tn-theme="light"] [style*="color: #fff"],
:root[data-tn-theme="light"] [style*="color:#ffffff"],
:root[data-tn-theme="light"] [style*="color: #ffffff"] {
  color: var(--tn-text) !important;
}

:root[data-tn-theme="light"] [style*="color:yellow"],
:root[data-tn-theme="light"] [style*="color: yellow"],
:root[data-tn-theme="light"] [style*="color:#ff1f1f"],
:root[data-tn-theme="light"] [style*="color: #ff1f1f"],
:root[data-tn-theme="light"] [style*="color:#FF1F1F"],
:root[data-tn-theme="light"] [style*="color: #FF1F1F"],
:root[data-tn-theme="light"] [style*="color:#ff4500"],
:root[data-tn-theme="light"] [style*="color: #ff4500"],
:root[data-tn-theme="light"] [style*="color:#FF4500"],
:root[data-tn-theme="light"] [style*="color: #FF4500"] {
  color: var(--tn-primary) !important;
}

:root[data-tn-theme="light"] [style*="border-color:#000"],
:root[data-tn-theme="light"] [style*="border-color: #000"],
:root[data-tn-theme="light"] [style*="border-color:#000000"],
:root[data-tn-theme="light"] [style*="border-color: #000000"],
:root[data-tn-theme="light"] [style*="border-color:#333"],
:root[data-tn-theme="light"] [style*="border-color: #333"],
:root[data-tn-theme="light"] [style*="border-color:#333333"],
:root[data-tn-theme="light"] [style*="border-color: #333333"] {
  border-color: var(--tn-border) !important;
}