/* static/css/theme.css — universal Dark/Light + optional accents
   Contract:
   - Light + No Accent  -> zero impact (your CSS wins)
   - Dark               -> styled only under [data-theme="dark"]
   - Accent             -> only when html[data-accent] != "none"
*/

/* ---------- Variables (no component styling here) ----------------------- */
:root{
  /* Light palette (reference only; not applied unless explicitly targeted) */
  --bg:#ffffff; --fg:#0f172a; --muted:#64748b; --surface:#f7f8fa; --border:#e5e7eb;

  /* Accent (overwritten by [data-accent]) */
  --accent:#22c55e;

  /* Text color when something is filled with accent; set in theme.js for contrast */
  --on-accent:#ffffff;

  /* Focus ring scaffold (refined per-theme) */
  --ring: color-mix(in srgb, var(--accent) 40%, transparent);

  color-scheme: light dark;
}

/* =======================================================================
   DARK THEME
   - All component styling lives behind [data-theme="dark"] so light mode
     (especially with No Accent) is unaffected.
   ======================================================================= */
html[data-theme="dark"]{
  --bg:#0b0d10; --fg:#e5e7eb; --muted:#9aa4b2; --surface:#12161c; --border:#1f2937;
  --ring: color-mix(in srgb, var(--accent) 45%, transparent);
}
html[data-theme="dark"] body{
  background:var(--bg); color:var(--fg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}

/* Base interactive */
html[data-theme="dark"] button,
html[data-theme="dark"] .btn{
  font:inherit; border:1px solid var(--border); background:var(--surface); color:var(--fg);
  padding:.5rem .75rem; border-radius:.5rem; cursor:pointer;
  display:inline-grid; place-items:center; line-height:1;
}
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] .btn:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px;
}

/* Form fields */
html[data-theme="dark"] :is(input,select,textarea){
  font:inherit; color:var(--fg); background:var(--surface);
  border:1px solid var(--border); border-radius:.375rem; padding:.5rem .625rem;
}

/* Code */
html[data-theme="dark"] pre, html[data-theme="dark"] code{ color:inherit }

/* Common containers */
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .table,
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .toast{
  background:var(--surface); color:var(--fg); border-color:var(--border);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content{ border:1px solid var(--border); }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
  background:var(--surface); color:var(--fg); border-color:var(--border);
}

/* Alerts in dark */
html[data-theme="dark"] .alert{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--fg);
  border: 1px solid var(--border);
}

/* Helpers */
.surface{ background:var(--surface); border:1px solid var(--border); border-radius:.75rem; }
.muted{ color:var(--muted); }
.pill{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.85rem; border:1px solid var(--border); }

/* =======================================================================
   ACCENT — global when chosen (both themes), otherwise inert
   ======================================================================= */
html:not([data-accent="none"]){ accent-color: var(--accent); }

/* link tint */
html:not([data-accent="none"]) a{
  color: color-mix(in srgb, var(--accent) 82%, var(--fg));
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, currentColor);
}
html:not([data-accent="none"]) a:hover{
  color: color-mix(in srgb, var(--accent) 92%, var(--fg));
  text-decoration-thickness: .12em;
}

/* border tinting: include Bootstrap via its CSS var */
html:not([data-accent="none"]){
  --bs-border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
html:not([data-accent="none"]) :is(.card, table, th, td, hr, details, summary, .pill,
  button, .btn, input, select, textarea, pre, code){
  border-color: var(--bs-border-color);
}

/* code block pop */
html:not([data-accent="none"]) pre{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* details summary uses accent */
html:not([data-accent="none"]) details > summary{
  color: color-mix(in srgb, var(--accent) 70%, var(--fg));
}

/* Scrollbars (best effort; engines vary) */
html:not([data-accent="none"]) body{
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--border))
                   color-mix(in srgb, var(--surface) 92%, transparent);
}
html:not([data-accent="none"]) body::-webkit-scrollbar{ width:12px;height:12px; }
html:not([data-accent="none"]) body::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 55%, var(--border));
  border:3px solid color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius:999px;
}
html:not([data-accent="none"]) *{
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--border))
                   color-mix(in srgb, var(--surface) 92%, transparent);
}
html:not([data-accent="none"]) *::-webkit-scrollbar{ width:12px;height:12px; }
html:not([data-accent="none"]) *::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 55%, var(--border));
  border:3px solid color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius:999px;
}

/* Progress/Range/Color input */
progress{ width:100%; height:.6rem; border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 80%, transparent); border-radius:999px; }
progress::-webkit-progress-bar{ background:transparent; border-radius:999px; }
progress::-webkit-progress-value{ background:var(--accent); border-radius:999px; }
progress::-moz-progress-bar{ background:var(--accent); }

input[type="range"]{ appearance:none; height:.35rem; background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--border); border-radius:999px; }
input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:1rem; height:1rem; border-radius:999px; background:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent); border:none; margin-top:-.35rem;
}
input[type="range"]::-moz-range-thumb{
  width:1rem; height:1rem; border-radius:999px; background:var(--accent);
  border:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent);
}

input[type="color"]{
  width:100%; height:2.25rem; padding:0; background:transparent;
  border:1px solid var(--border); border-radius:.4rem; cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
input[type="color"]::-webkit-color-swatch{ border:none; border-radius:.3rem; }
input[type="color"]::-moz-color-swatch{ border:none; border-radius:.3rem; }

/* Accent demo opt-ins */
.btn.is-accent{
  background: var(--accent);
  color: var(--on-accent);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.btn.is-accent:hover{
  background: color-mix(in srgb, var(--accent) 88%, white 12%);
}
.tag.is-accent{
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
              0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Focus & selection when accent chosen */
html:not([data-accent="none"]) :where(input,select,textarea,button,a.btn,.btn):focus,
html:not([data-accent="none"]) :where(input,select,textarea,button,a.btn,.btn):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent),
             0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}
html:not([data-accent="none"]) :where(input,select,textarea):focus{
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
}
:root{ caret-color: var(--accent); }
::selection{ background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--on-accent); }
::-moz-selection{ background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--on-accent); }

/* =======================================================================
   Theme tools (top-right controls)
   ======================================================================= */
.theme-tools{ position:fixed; top:.75rem; right:.75rem; display:flex; gap:.5rem; z-index:2147483647; }
.theme-tools #theme-toggle,
.theme-tools #accent-toggle{
  width:2.25rem; height:2.25rem; display:grid; place-items:center; padding:0; line-height:0;
  background:var(--surface); border:1px solid var(--border); border-radius:.65rem;
  box-shadow:0 2px 10px color-mix(in srgb, var(--fg) 8%, transparent);
}
.theme-tools #accent-toggle .swatch{
  display:block; width:1.25rem; height:1.25rem; margin:auto; border-radius:999px; background: var(--accent);
  position:relative; box-shadow:0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent),
                                   0 0 10px color-mix(in srgb, var(--accent) 60%, transparent),
                                   0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* palette menu */
#accent-menu[hidden]{ display:none; }
#accent-menu{
  position:absolute; top:calc(100% + .4rem); right:0;
  background:var(--surface); border:1px solid var(--border); padding:.5rem; border-radius:.8rem;
  display:flex; flex-direction:column; gap:.4rem;
  box-shadow:0 10px 28px color-mix(in srgb, var(--fg) 14%, transparent);
}
#accent-menu .accent-option{
  width:2.2rem; height:2.2rem; display:grid; place-items:center; padding:0; line-height:0;
  border:1px solid var(--border); background:var(--surface); border-radius:.65rem; cursor:pointer; transition:transform .12s ease;
}
#accent-menu .accent-option:hover{ transform:translateY(-1px); }
#accent-menu .accent-option .swatch{
  display:block; width:1.25rem; height:1.25rem; margin:auto; border-radius:999px; background:var(--sw,var(--accent)); position:relative;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent),
             0 0 10px color-mix(in srgb, var(--sw,var(--accent)) 60%, transparent),
             0 0 18px color-mix(in srgb, var(--sw,var(--accent)) 40%, transparent);
}
#accent-menu .accent-option[aria-checked="true"] .swatch{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--surface) 70%, transparent),
             0 0 0 5px color-mix(in srgb, var(--sw,var(--accent)) 90%, transparent),
             0 0 22px color-mix(in srgb, var(--sw,var(--accent)) 55%, transparent);
}
#accent-menu .accent-option.none .swatch{ background:transparent; border:2px solid var(--border); }
#accent-menu .accent-option.none .swatch::after{
  content:""; position:absolute; left:16%; right:16%; top:50%; height:2px; background:#ef4444; transform:rotate(-45deg);
}
#accent-toggle.is-none .swatch{ background:transparent !important; border:2px solid var(--border); }
#accent-toggle.is-none .swatch::after{
  content:""; position:absolute; left:16%; right:16%; top:50%; height:2px; background:#ef4444; transform:rotate(-45deg);
}

/* =======================================================================
   Bootstrap “bridge” — DARK ONLY
   Remap BS variables & harden components so they use our tokens.
   ======================================================================= */

/* Variables that BS uses internally */
html[data-theme="dark"]{
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-heading-color: var(--fg);

  --bs-border-color: var(--border);

  --bs-card-bg: var(--surface);
  --bs-card-color: var(--fg);
  --bs-card-border-color: var(--border);

  --bs-table-color: var(--fg);
  --bs-table-bg: var(--surface);
  --bs-table-striped-bg: color-mix(in srgb, var(--surface) 86%, transparent);
  --bs-table-hover-bg:   color-mix(in srgb, var(--surface) 82%, transparent);
  --bs-table-border-color: var(--border);

  --bs-nav-link-color: var(--fg);
  --bs-nav-tabs-link-active-color: var(--fg);
  --bs-nav-tabs-link-hover-border-color: var(--border);
  --bs-nav-tabs-border-color: var(--border);

  --bs-alert-bg: color-mix(in srgb, var(--surface) 90%, transparent);
  --bs-alert-border-color: var(--border);

  /* Bootstrap subtle backgrounds still readable in dark */
  --bs-primary-bg-subtle:  color-mix(in srgb, #0d6efd 18%, var(--surface));
  --bs-success-bg-subtle:  color-mix(in srgb, #198754 18%, var(--surface));
  --bs-info-bg-subtle:     color-mix(in srgb, #0dcaf0 18%, var(--surface));
  --bs-warning-bg-subtle:  color-mix(in srgb, #ffc107 18%, var(--surface));
  --bs-danger-bg-subtle:   color-mix(in srgb, #dc3545 18%, var(--surface));
  --bs-secondary-bg-subtle:color-mix(in srgb, #6c757d 18%, var(--surface));
}

/* Utilities that often force light look */
html[data-theme="dark"] :is(.bg-white, .bg-light, .bg-body, .bg-transparent){
  background: var(--surface) !important;
  color: var(--fg) !important;
}
html[data-theme="dark"] :is(.text-muted, .text-secondary, .small, small){
  color: color-mix(in srgb, var(--fg) 70%, #0000) !important;
}

/* Sub-parts */
html[data-theme="dark"] :is(.card-header, .card-footer,
                            .dropdown-header, .dropdown-divider,
                            .modal-header, .modal-footer,
                            .toast-header){
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border);
}

/* Nav tabs/pills */
html[data-theme="dark"] .nav-tabs{ border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .nav-tabs .nav-link{
  color: var(--fg); background: var(--surface); border: 1px solid var(--border);
}
html[data-theme="dark"] .nav-tabs .nav-link:hover{
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
html[data-theme="dark"] .nav-tabs .nav-link.active{
  color: var(--fg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-color: var(--border);
}
html[data-theme="dark"]:not([data-accent="none"]) .nav-pills .nav-link.active{
  background: var(--accent); color: var(--on-accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}

/* Tables */
html[data-theme="dark"] .table{
  color: var(--fg); border-color: var(--border); background: var(--surface);
}
html[data-theme="dark"] .table thead th{
  color: var(--fg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-color: var(--bs-border-color);
}
html[data-theme="dark"] .table tbody tr{ background: color-mix(in srgb, var(--surface) 92%, transparent); }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd){
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
html[data-theme="dark"] .table-hover tbody tr:hover{
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
html[data-theme="dark"] .table :is(th, td){ border-color: var(--bs-border-color); }

/* Dropdowns */
html[data-theme="dark"] .dropdown-menu{ background: var(--surface); color: var(--fg); border-color: var(--border); }
html[data-theme="dark"] .dropdown-item{ color: var(--fg); }
html[data-theme="dark"] .dropdown-item:hover{ background: color-mix(in srgb, var(--surface) 86%, transparent); }
html[data-theme="dark"]:not([data-accent="none"]) .dropdown-item.active,
html[data-theme="dark"]:not([data-accent="none"]) .dropdown-item:active{
  background: var(--accent); color: var(--on-accent);
}

/* List groups */
html[data-theme="dark"] .list-group-item{
  background: var(--surface); color: var(--fg); border-color: var(--border);
}
html[data-theme="dark"] .list-group-item.active{
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--fg); border-color: var(--border);
}
html[data-theme="dark"]:not([data-accent="none"]) .list-group-item.active{
  background: var(--accent); color: var(--on-accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}

/* Pagination */
html[data-theme="dark"] .page-link{
  background: var(--surface); color: var(--fg); border-color: var(--border);
}
html[data-theme="dark"] .page-link:hover{ background: color-mix(in srgb, var(--surface) 90%, transparent); }
html[data-theme="dark"] .page-item.active .page-link{
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--fg); border-color: var(--border);
}
html[data-theme="dark"]:not([data-accent="none"]) .page-item.active .page-link{
  background: var(--accent); color: var(--on-accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}

/* Badges that default to light */
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.bg-white{
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  color: var(--fg) !important;
}

/* Outline/secondary buttons (legibility) */
html[data-theme="dark"] .btn-outline-secondary{
  color: var(--fg); background: var(--surface); border-color: var(--bs-border-color);
}
html[data-theme="dark"] .btn-outline-secondary:hover{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

/* Map primary to accent in dark or when accent chosen */
html:not([data-accent="none"]) .btn-primary,
html[data-theme="dark"] .btn-primary{
  background: var(--accent); color: var(--on-accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}
html:not([data-accent="none"]) .btn-primary:hover,
html[data-theme="dark"] .btn-primary:hover{
  background: color-mix(in srgb, var(--accent) 88%, white 12%);
}

/* Checks/radios */
html[data-theme="dark"] .form-check-input{
  background-color: var(--surface); border-color: var(--border);
}
html[data-theme="dark"] .form-check-input:focus{
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}
html[data-theme="dark"] .form-check-input:checked{
  background-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}

/* Alerts / Toasts already normalized above */
html[data-theme="dark"] .toast{ background: var(--surface); color: var(--fg); border-color: var(--border); }

/* Lines */
html[data-theme="dark"] hr{ border-color: var(--bs-border-color); }

/* Any hard-coded whites */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .bg-white .btn{
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  color: var(--fg) !important;
  border-color: var(--bs-border-color) !important;
}

/* ===== Site bridges for Employee/GM/Admin dashboards — DARK ONLY ===== */

/* Header container blocks that were still white */
html[data-theme="dark"] :is(.page-header, .dashboard-container){
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
}

/* Those large “button-like” spans used as headings (Employee Dashboard / NSN xxxx) */
html[data-theme="dark"] .fancy-btn{
  display:inline-block;
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
}
html[data-theme="dark"]:not([data-accent="none"]) .fancy-btn.is-accent,
html[data-theme="dark"]:not([data-accent="none"]) .fancy-btn.accent,
html[data-theme="dark"]:not([data-accent="none"]) .fancy-btn.dashboard-btn.accent,
html[data-theme="dark"]:not([data-accent="none"]) .fancy-btn.nsn-btn.accent{
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
}

/* Dividers/lines between dashboard sections */
html[data-theme="dark"] .divider{
  background: transparent !important;
  border-top: 1px solid var(--bs-border-color) !important;
}

/* Tab containers (safety: in case local CSS overrides) */
html[data-theme="dark"] :is(.tab-content, .tab-pane){
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--bs-border-color) !important;
}

/* Table “no rows” cells that looked inverted */
html[data-theme="dark"] .table .text-muted{
  color: color-mix(in srgb, var(--fg) 70%, transparent) !important;
}

/* ===== FullCalendar (fc-*) — DARK ONLY ================================ */
html[data-theme="dark"] .fc{
  color: var(--fg);
}
html[data-theme="dark"] .fc .fc-toolbar-title{ color: var(--fg); }

html[data-theme="dark"] .fc :is(.fc-scrollgrid, .fc-col-header, .fc-col-header-cell,
                                .fc-daygrid-day, .fc-daygrid, .fc-timegrid,
                                .fc-list, .fc-list-table){
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-daygrid-day-number,
html[data-theme="dark"] .fc .fc-list-event-title{
  color: var(--fg) !important;
}

/* Accent the primary buttons and active view buttons */
html[data-theme="dark"]:not([data-accent="none"]) .fc .fc-button-primary{
  background: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
  color: var(--on-accent) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) .fc .fc-button-primary.fc-button-active{
  background: color-mix(in srgb, var(--accent) 86%, var(--surface)) !important;
}

/* Grids and today/hover states */
html[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today{
  background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%) !important;
}
html[data-theme="dark"] .fc .fc-daygrid-day:hover{
  background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
}

/* List view borders */
html[data-theme="dark"] .fc .fc-list-event,
html[data-theme="dark"] .fc .fc-list-day{
  border-color: var(--bs-border-color) !important;
}

/* ===== Make sure Bootstrap borders/HRs stay accented in dark ========= */
html[data-theme="dark"] hr{ border-top-color: var(--bs-border-color) !important; }
html[data-theme="dark"] :is(.border, .border-top, .border-end, .border-bottom, .border-start){
  border-color: var(--bs-border-color) !important;
}

/* ========================= */
/* Palacios-style components */
/* (Dark-only + optional accent) */
/* ========================= */

/* 1) Dashboard header “card” and its fancy button spans  */
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .dashboard-container {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: .75rem;
}
html[data-theme="dark"] .fancy-btn,
html[data-theme="dark"] .dashboard-btn,
html[data-theme="dark"] .nsn-btn {
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* 2) Employee dashboard container + common “divider” line */
html[data-theme="dark"] .employee-dashboard,
html[data-theme="dark"] .employee-dashboard .tab-content {
  background: var(--surface) !important;
  color: var(--fg) !important;
}
html[data-theme="dark"] .divider,
html[data-theme="dark"] .employee-dashboard .divider {
  height: 1px;
  background: var(--border) !important;
  border: 0 !important;
}

/* 3) Main nav tabs row + the nested sub-tabs */
html[data-theme="dark"] .employee-dashboard__nav-tabs,
html[data-theme="dark"] .employee-dashboard__sub-nav-tabs,
html[data-theme="dark"] .nav-tabs {
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="dark"] .employee-dashboard__nav-tabs .nav-link,
html[data-theme="dark"] .employee-dashboard__sub-nav-tabs .nav-link,
html[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--fg) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .employee-dashboard__nav-tabs .nav-link.active,
html[data-theme="dark"] .employee-dashboard__sub-nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link.active {
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  border-color: var(--border) !important;
}

/* If using pills anywhere, let the active one be truly accented */
html[data-theme="dark"]:not([data-accent="none"]) .nav-pills .nav-link.active {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
}

/* 4) Tables (your ticket/history/blackout tables already carry .table) */
html[data-theme="dark"] .table {
  --row-bg: color-mix(in srgb, var(--surface) 92%, transparent);
  --row-alt: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--fg) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .table thead th {
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .table tbody tr { background: var(--row-bg) !important; }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: var(--row-alt) !important; }
html[data-theme="dark"] .table-hover tbody tr:hover { background: color-mix(in srgb, var(--surface) 82%, transparent) !important; }
html[data-theme="dark"] .table :is(th, td) { border-color: var(--border) !important; }

/* 5) FullCalendar (fc-*) — make it legible in dark */
html[data-theme="dark"] .fc,
html[data-theme="dark"] .fc-theme-standard {
  color: var(--fg);
}
html[data-theme="dark"] .fc-theme-standard td,
html[data-theme="dark"] .fc-theme-standard th {
  border-color: var(--border);
}
html[data-theme="dark"] .fc .fc-toolbar-title { color: var(--fg); }
html[data-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-daygrid-day-number { color: var(--fg); }
html[data-theme="dark"] .fc .fc-daygrid-day-frame { background: color-mix(in srgb, var(--surface) 95%, transparent); }
html[data-theme="dark"] .fc .fc-day-today .fc-daygrid-day-frame { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* Calendar buttons */
html[data-theme="dark"] .fc .fc-button-primary {
  background: color-mix(in srgb, var(--surface) 85%, var(--accent) 15%);
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
  color: var(--fg);
}
html[data-theme="dark"]:not([data-accent="none"]) .fc .fc-button-primary,
html:not([data-accent="none"]) .fc .fc-button-primary {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  color: var(--on-accent);
}
html[data-theme="dark"] .fc .fc-button-primary:hover {
  filter: brightness(1.05);
}

/* 6) Close (“×”) button in modals/toasts (Bootstrap’s is too dark in dark mode) */
html[data-theme="dark"] .btn-close { filter: invert(1); opacity: .8; }

/* 7) Make sure any “bg-*” helpers never flash white in dark */
html[data-theme="dark"] :is(.bg-white, .bg-light, .bg-body, .bg-transparent) {
  background: var(--surface) !important;
  color: var(--fg) !important;
}

/* 8) Accent border tint — include more structural pieces */
html:not([data-accent="none"]) :is(
  .page-header,
  .dashboard-container,
  .fancy-btn,
  .employee-dashboard__nav-tabs,
  .employee-dashboard__nav-tabs .nav-link,
  .employee-dashboard__sub-nav-tabs,
  .employee-dashboard__sub-nav-tabs .nav-link,
  .divider,
  .navbar,
  .modal-content,
  .dropdown-menu,
  .list-group-item
){
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
}

/* 9) Accent states where ink sits on the accent color */
html:not([data-accent="none"]) .fancy-btn.accent,
html[data-theme="dark"]:not([data-accent="none"]) .btn-primary,
html[data-theme="dark"]:not([data-accent="none"]) .badge.bg-primary {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
}

/* ——— Switches (form-switch) ———
   Fixes the “two white dots” by removing Bootstrap's background-images
   and drawing a single thumb with ::after. Works in Light/Dark/Accent.
*/

/* base geometry (applies to all themes) */
.form-switch .form-check-input{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  position:relative; width:2.6rem; height:1.4rem; border-radius:999px;
  background: var(--surface); border:1px solid var(--border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 50%, transparent);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  background-image:none; /* kill Bootstrap SVG knob */
}

/* draw the single thumb */
.form-switch .form-check-input::after{
  content:""; position:absolute; top:50%; left:2px; translate:0 -50%;
  width:1rem; height:1rem; border-radius:999px;
  background: #ffffff;                 /* light thumb by default */
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* checked state uses accent for the track and auto-contrasting thumb */
.form-switch .form-check-input:checked{
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.form-switch .form-check-input:checked::after{
  transform: translateX(1.2rem);
  background: var(--on-accent);        /* computed in theme.js with fallback */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent),
              0 1px 2px rgba(0,0,0,.25);
}

/* disabled */
.form-switch .form-check-input:disabled{
  opacity:.55; cursor:not-allowed;
}
.form-switch .form-check-input:disabled::after{
  box-shadow:none;
}

/* focus rings—respect accent if chosen */
html:not([data-accent="none"]) .form-switch .form-check-input:focus,
html:not([data-accent="none"]) .form-switch .form-check-input:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
html[data-accent="none"] .form-switch .form-check-input:focus,
html[data-accent="none"] .form-switch .form-check-input:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ring) 40%, transparent);
}

/* DARK refinements — ensure legible track & thumb when unchecked */
html[data-theme="dark"] .form-switch .form-check-input{
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: var(--border);
}
html[data-theme="dark"] .form-switch .form-check-input::after{
  background: color-mix(in srgb, var(--fg) 95%, #0000); /* light thumb against dark track */
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* When accent is on, tint the outline on hover slightly */
html:not([data-accent="none"]) .form-switch .form-check-input:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* ------------------------------------------------------------------
   GM & Manager dashboards: same dark rules as Employee/Admin
   (mirror selectors so they “just work” by role)
   ------------------------------------------------------------------ */

/* Containers */
html[data-theme="dark"] :is(.gm-dashboard, .manager-dashboard){
  background: var(--surface) !important;
  color: var(--fg) !important;
}

/* Header blocks (page header / dashboard container) */
html[data-theme="dark"] :is(.gm-dashboard .page-header,
                            .gm-dashboard .dashboard-container,
                            .manager-dashboard .page-header,
                            .manager-dashboard .dashboard-container){
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
  border-radius: .75rem;
}

/* “Fancy” heading spans */
html[data-theme="dark"] :is(.gm-dashboard .fancy-btn,
                            .gm-dashboard .dashboard-btn,
                            .gm-dashboard .nsn-btn,
                            .manager-dashboard .fancy-btn,
                            .manager-dashboard .dashboard-btn,
                            .manager-dashboard .nsn-btn){
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  color: var(--fg) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
}

/* Dividers */
html[data-theme="dark"] :is(.gm-dashboard .divider, .manager-dashboard .divider){
  height: 1px;
  background: var(--bs-border-color) !important;
  border: 0 !important;
}

/* Tabs (main and sub-tabs) */
html[data-theme="dark"] :is(.gm-dashboard .nav-tabs,
                            .gm-dashboard .gm-dashboard__nav-tabs,
                            .gm-dashboard .gm-dashboard__sub-nav-tabs,
                            .manager-dashboard .nav-tabs,
                            .manager-dashboard .manager-dashboard__nav-tabs,
                            .manager-dashboard .manager-dashboard__sub-nav-tabs){
  border-bottom: 1px solid var(--bs-border-color) !important;
}
html[data-theme="dark"] :is(.gm-dashboard .nav-tabs .nav-link,
                            .gm-dashboard .gm-dashboard__nav-tabs .nav-link,
                            .gm-dashboard .gm-dashboard__sub-nav-tabs .nav-link,
                            .manager-dashboard .nav-tabs .nav-link,
                            .manager-dashboard .manager-dashboard__nav-tabs .nav-link,
                            .manager-dashboard .manager-dashboard__sub-nav-tabs .nav-link){
  color: var(--fg) !important;
  background: var(--surface) !important;
  border: 1px solid var(--bs-border-color) !important;
}
html[data-theme="dark"] :is(.gm-dashboard .nav-tabs .nav-link.active,
                            .gm-dashboard .gm-dashboard__nav-tabs .nav-link.active,
                            .gm-dashboard .gm-dashboard__sub-nav-tabs .nav-link.active,
                            .manager-dashboard .nav-tabs .nav-link.active,
                            .manager-dashboard .manager-dashboard__nav-tabs .nav-link.active,
                            .manager-dashboard .manager-dashboard__sub-nav-tabs .nav-link.active){
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  border-color: var(--bs-border-color) !important;
}

/* Tab content panes */
html[data-theme="dark"] :is(.gm-dashboard .tab-content,
                            .gm-dashboard .tab-pane,
                            .manager-dashboard .tab-content,
                            .manager-dashboard .tab-pane){
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--bs-border-color) !important;
}

/* Tables inside GM/Manager views */
html[data-theme="dark"] :is(.gm-dashboard .table, .manager-dashboard .table){
  --row-bg:  color-mix(in srgb, var(--surface) 92%, transparent);
  --row-alt: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--fg) !important;
  background: var(--surface) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] :is(.gm-dashboard .table thead th, .manager-dashboard .table thead th){
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  color: var(--fg) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] :is(.gm-dashboard .table tbody tr, .manager-dashboard .table tbody tr){
  background: var(--row-bg) !important;
}
html[data-theme="dark"] :is(.gm-dashboard .table-striped tbody tr:nth-of-type(odd),
                            .manager-dashboard .table-striped tbody tr:nth-of-type(odd)){
  background: var(--row-alt) !important;
}
html[data-theme="dark"] :is(.gm-dashboard .table-hover tbody tr:hover,
                            .manager-dashboard .table-hover tbody tr:hover){
  background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
}
html[data-theme="dark"] :is(.gm-dashboard .table :is(th,td),
                            .manager-dashboard .table :is(th,td)){
  border-color: var(--bs-border-color) !important;
}

/* Optional: accent the active pill/tab ONLY when an accent is chosen */
html[data-theme="dark"]:not([data-accent="none"]) :is(.gm-dashboard .nav-pills .nav-link.active,
                                                      .manager-dashboard .nav-pills .nav-link.active){
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
}

/* ------------------------------------------------------------------
   Admin dashboard: same dark rules as Employee/Admin
   (mirror selectors so they “just work” by role)
   ------------------------------------------------------------------ */

/* Containers */
html[data-theme="dark"] .admin-dashboard{
  background: var(--surface) !important;
  color: var(--fg) !important;
}

/* Header blocks (page header / dashboard container) */
html[data-theme="dark"] :is(.admin-dashboard .page-header,
                            .admin-dashboard .dashboard-container){
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
  border-radius: .75rem;
}

/* “Fancy” heading spans */
html[data-theme="dark"] :is(.admin-dashboard .fancy-btn,
                            .admin-dashboard .dashboard-btn,
                            .admin-dashboard .nsn-btn){
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  color: var(--fg) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
}

/* Dividers */
html[data-theme="dark"] .admin-dashboard .divider{
  height: 1px;
  background: var(--bs-border-color) !important;
  border: 0 !important;
}

/* Tabs (main and sub-tabs) */
html[data-theme="dark"] :is(.admin-dashboard .nav-tabs,
                            .admin-dashboard .admin-dashboard__nav-tabs,
                            .admin-dashboard .admin-dashboard__sub-nav-tabs){
  border-bottom: 1px solid var(--bs-border-color) !important;
}
html[data-theme="dark"] :is(.admin-dashboard .nav-tabs .nav-link,
                            .admin-dashboard .admin-dashboard__nav-tabs .nav-link,
                            .admin-dashboard .admin-dashboard__sub-nav-tabs .nav-link){
  color: var(--fg) !important;
  background: var(--surface) !important;
  border: 1px solid var(--bs-border-color) !important;
}
html[data-theme="dark"] :is(.admin-dashboard .nav-tabs .nav-link.active,
                            .admin-dashboard .admin-dashboard__nav-tabs .nav-link.active,
                            .admin-dashboard .admin-dashboard__sub-nav-tabs .nav-link.active){
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  border-color: var(--bs-border-color) !important;
}

/* Tab content panes */
html[data-theme="dark"] :is(.admin-dashboard .tab-content,
                            .admin-dashboard .tab-pane){
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--bs-border-color) !important;
}

/* Tables inside Admin views */
html[data-theme="dark"] .admin-dashboard .table{
  --row-bg:  color-mix(in srgb, var(--surface) 92%, transparent);
  --row-alt: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--fg) !important;
  background: var(--surface) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] .admin-dashboard .table thead th{
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  color: var(--fg) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] .admin-dashboard .table tbody tr{
  background: var(--row-bg) !important;
}
html[data-theme="dark"] .admin-dashboard .table-striped tbody tr:nth-of-type(odd){
  background: var(--row-alt) !important;
}
html[data-theme="dark"] .admin-dashboard .table-hover tbody tr:hover{
  background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
}
html[data-theme="dark"] .admin-dashboard .table :is(th,td){
  border-color: var(--bs-border-color) !important;
}

/* Optional: accent the active pill/tab ONLY when an accent is chosen */
html[data-theme="dark"]:not([data-accent="none"]) .admin-dashboard .nav-pills .nav-link.active{
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
}

/* ================================================================
   DARK THEME ACCENTED CHROME
   - accents borders, tabs, tables, dividers, and primary buttons
   - only active when an accent is chosen (not "none")
   - light theme remains unchanged
   ================================================================ */

html[data-theme="dark"]:not([data-accent="none"]) {
  /* Harmonized accent tints for borders/fills */
  --accent-strong: var(--accent);
  --accent-mid:    color-mix(in srgb, var(--accent) 55%, var(--border));
  --accent-subtle: color-mix(in srgb, var(--accent) 28%, var(--border));
  --accent-bg:     color-mix(in srgb, var(--accent) 14%, var(--surface));

  /* If you use Bootstrap classes, steer them to your accent: */
  --bs-primary: var(--accent-strong);
  --bs-link-color: var(--accent-strong);
  --bs-primary-bg-subtle: var(--accent-bg);
  --bs-primary-border-subtle: var(--accent-subtle);
  --bs-primary-text-emphasis: var(--accent-strong);
}

/* Dividers / <hr> */
html[data-theme="dark"]:not([data-accent="none"]) :is(.divider, hr){
  background: var(--accent-subtle) !important;
  border-color: var(--accent-subtle) !important;
}

/* Tabs */
html[data-theme="dark"]:not([data-accent="none"]) :is(.nav-tabs, .gm-dashboard__nav-tabs, .gm-dashboard__sub-nav-tabs,
                                                       .manager-dashboard__nav-tabs, .manager-dashboard__sub-nav-tabs,
                                                       .admin-dashboard__nav-tabs, .admin-dashboard__sub-nav-tabs){
  border-bottom-color: var(--accent-subtle) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) :is(.nav-tabs .nav-link){
  border-color: var(--accent-subtle) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) :is(.nav-tabs .nav-link.active){
  border-color: var(--accent-mid) !important;
  box-shadow: inset 0 -2px 0 var(--accent-strong) !important; /* subtle active underline */
}

/* Tables */
html[data-theme="dark"]:not([data-accent="none"]) :is(.table){
  border-color: var(--accent-subtle) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) :is(.table thead th){
  color: var(--accent-strong) !important;
  border-top-color: var(--accent-mid) !important;
  border-bottom-color: var(--accent-subtle) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) :is(.table :is(th, td)){
  border-color: var(--accent-subtle) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) :is(.table-hover tbody tr:hover){
  outline: 1px solid var(--accent-mid) !important;
  outline-offset: -1px;
}

/* Primary buttons + outline variants that should use the accent */
html[data-theme="dark"]:not([data-accent="none"]) :is(.btn-primary, .btn-accent){
  background: var(--accent-strong) !important;
  border-color: color-mix(in srgb, var(--accent) 80%, #000) !important;
  color: var(--on-accent) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) :is(.btn-outline-primary, .btn-outline-accent){
  color: var(--accent-strong) !important;
  border-color: var(--accent-mid) !important;
  background: transparent !important;
}
html[data-theme="dark"]:not([data-accent="none"]) :is(.btn-outline-primary:hover, .btn-outline-accent:hover,
                                                      .btn-outline-primary:focus, .btn-outline-accent:focus){
  background: var(--accent-strong) !important;
  color: var(--on-accent) !important;
  border-color: var(--accent-strong) !important;
}

/* Badges / pills (optional but nice for list/table labels) */
html[data-theme="dark"]:not([data-accent="none"]) :is(.badge.bg-primary, .badge.badge-accent, .nav-pills .nav-link.active){
  background: var(--accent-strong) !important;
  color: var(--on-accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
}

/* Form controls focus ring */
html[data-theme="dark"]:not([data-accent="none"]) :is(.form-control:focus, .form-select:focus, .form-check-input:focus){
  border-color: var(--accent-mid) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) .form-check-input:checked{
  background-color: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
}

/* Pagination / table controls (if used) */
html[data-theme="dark"]:not([data-accent="none"]) .page-link:focus,
html[data-theme="dark"]:not([data-accent="none"]) .page-item.active .page-link{
  border-color: var(--accent-mid) !important;
  background: var(--accent-bg) !important;
  color: var(--fg) !important;
}

/* ================================================================
   DARK THEME — ACCENT ICON BUTTONS (Font Awesome)
   Accents the <i class="fa…"> icons and their button containers
   ================================================================= */

/* 1) default icon color inside any .btn in dark+accent */
html[data-theme="dark"]:not([data-accent="none"]) .btn
  :is(i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands){
  color: var(--accent) !important;
}

/* 2) outline/ghost-style icon buttons: tint border; fill on hover/focus */
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark, .btn-outline-info){
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border)) !important;
  background: transparent !important;
  color: var(--accent) !important; /* if there’s any text */
}
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(.btn-outline-primary:hover, .btn-outline-primary:focus,
      .btn-outline-secondary:hover, .btn-outline-secondary:focus,
      .btn-outline-light:hover, .btn-outline-light:focus,
      .btn-outline-dark:hover, .btn-outline-dark:focus,
      .btn-outline-info:hover, .btn-outline-info:focus){
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(.btn-outline-primary:hover i, .btn-outline-primary:focus i,
      .btn-outline-secondary:hover i, .btn-outline-secondary:focus i,
      .btn-outline-light:hover i, .btn-outline-light:focus i,
      .btn-outline-dark:hover i, .btn-outline-dark:focus i,
      .btn-outline-info:hover i, .btn-outline-info:focus i){
  color: var(--on-accent) !important;
}

/* 3) neutral icon buttons (.btn, .btn-light, .btn-secondary) → accent on hover */
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(.btn, .btn-light, .btn-secondary):not(.btn-primary, .btn-outline-*, .btn-danger, .btn-success){
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(.btn, .btn-light, .btn-secondary):not(.btn-primary, .btn-outline-*, .btn-danger, .btn-success):hover,
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(.btn, .btn-light, .btn-secondary):not(.btn-primary, .btn-outline-*, .btn-danger, .btn-success):focus{
  background: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important;
  border-color: var(--accent) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(.btn, .btn-light, .btn-secondary):not(.btn-primary, .btn-outline-*, .btn-danger, .btn-success):hover i,
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(.btn, .btn-light, .btn-secondary):not(.btn-primary, .btn-outline-*, .btn-danger, .btn-success):focus i{
  color: var(--accent) !important;
}

/* 4) solid primary icon buttons should already be accented; ensure icon is readable */
html[data-theme="dark"]:not([data-accent="none"]) .btn-primary
  :is(i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands){
  color: var(--on-accent) !important;
}

/* 5) if there are bare icons (links/spans) in Actions cells with no .btn wrapper,
      accent them too */
html[data-theme="dark"]:not([data-accent="none"]) 
  :is(td, th, .actions, .table, .card, .toolbar)
  :is(i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands){
  color: var(--accent) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) 
  a:hover :is(i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands){
  color: color-mix(in srgb, var(--accent) 85%, #000) !important;
}

/* ================================================================
   DARK THEME — TICKET CHAT WIDGET
   Targets: #ticket-messaging-box + nested elements
   (Light theme unaffected)
   ================================================================ */

html[data-theme="dark"] #ticket-messaging-box.messaging-box{
  --muted: color-mix(in srgb, var(--fg) 62%, transparent);
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .75rem !important;
  box-shadow: none !important;
}

/* Header bar */
html[data-theme="dark"] #ticket-messaging-box .messaging-header{
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  border-top-left-radius: .75rem !important;
  border-top-right-radius: .75rem !important;
}

/* Header title text */
html[data-theme="dark"] #ticket-messaging-box .messaging-header > span{
  color: var(--fg) !important;
  opacity: .85;
}

/* Messages pane */
html[data-theme="dark"] #ticket-messaging-box .chat-messages{
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  color: var(--fg) !important;
  border-top: 1px solid var(--bs-border-color) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Individual messages */
html[data-theme="dark"] #ticket-messaging-box .chat-message{
  color: var(--fg) !important;
}
html[data-theme="dark"] #ticket-messaging-box .chat-message strong{
  color: var(--fg) !important;
  opacity: .95;
}
html[data-theme="dark"] #ticket-messaging-box .chat-message .timestamp{
  color: var(--muted) !important;
}

/* Input row */
html[data-theme="dark"] #ticket-messaging-box .input-group{
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  border-bottom-left-radius: .75rem !important;
  border-bottom-right-radius: .75rem !important;
}
html[data-theme="dark"] #ticket-messaging-box .form-control{
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
  color: var(--fg) !important;
  border: 1px solid var(--bs-border-color) !important;
}
html[data-theme="dark"] #ticket-messaging-box .form-control::placeholder{
  color: color-mix(in srgb, var(--fg) 50%, transparent) !important;
}
html[data-theme="dark"] #ticket-messaging-box .file-preview{
  color: var(--muted) !important;
}

/* ---------- Buttons in header / composer ---------- */

/* Primary (Send) follows your accent */
html[data-theme="dark"]:not([data-accent="none"]) #ticket-messaging-box .btn-primary{
  background: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 80%, #000) !important;
  color: var(--on-accent) !important;
}
html[data-theme="dark"]:not([data-accent="none"]) #ticket-messaging-box .btn-primary:hover,
html[data-theme="dark"]:not([data-accent="none"]) #ticket-messaging-box .btn-primary:focus{
  background: color-mix(in srgb, var(--accent) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--accent) 88%, #000) !important;
}

/* Secondary (attach / toggle) — neutral dark styling */
html[data-theme="dark"] #ticket-messaging-box .btn-secondary{
  background: color-mix(in srgb, var(--surface) 85%, #000) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--fg) !important;
}
html[data-theme="dark"] #ticket-messaging-box .btn-secondary:hover,
html[data-theme="dark"] #ticket-messaging-box .btn-secondary:focus{
  background: color-mix(in srgb, var(--surface) 80%, #000) !important;
}

/* Danger (Quick Close) — dark-friendly red */
html[data-theme="dark"] #ticket-messaging-box .btn-danger{
  background: #b91c1c !important;       /* 700 red */
  border-color: #dc2626 !important;     /* 600 red */
  color: #fff !important;
}
html[data-theme="dark"] #ticket-messaging-box .btn-danger:hover,
html[data-theme="dark"] #ticket-messaging-box .btn-danger:focus{
  background: #991b1b !important;       /* 800 red */
  border-color: #b91c1c !important;
}

/* Warning (Awaiting Response) — readable ink on amber */
html[data-theme="dark"] #ticket-messaging-box .btn-warning{
  background: #f59e0b !important;       /* amber 500 */
  border-color: #d97706 !important;     /* amber 600 */
  color: #0b0d10 !important;            /* dark ink for contrast */
}
html[data-theme="dark"] #ticket-messaging-box .btn-warning:hover,
html[data-theme="dark"] #ticket-messaging-box .btn-warning:focus{
  background: #d97706 !important;       /* amber 600 */
  border-color: #b45309 !important;     /* amber 700 */
  color: #0b0d10 !important;
}

/* Icon-only secondary in header (the "–" button) */
html[data-theme="dark"] #ticket-messaging-box .messaging-header .btn.btn-secondary{
  background: color-mix(in srgb, var(--surface) 88%, #000) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--fg) !important;
}

/* Optional: subtle inner border on the whole widget for definition */
html[data-theme="dark"] #ticket-messaging-box.messaging-box{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent) !important;
}