/* ==========================================================================
   THEME (Light baseline untouched; Dark via [data-theme="dark"])
   Accent color is dynamic via CSS variables (default = green).
   ========================================================================== */

/* Accent tokens (used primarily in dark mode; JS updates these live) */
:root{
  --accent:            #22c55e;              /* default green */
  --accent-contrast:   #ffffff;              /* ink on solid accent */
  --accent-soft-16:    rgba(34,197,94,.16);  /* soft surfaces/hover */
  --accent-soft-22:    rgba(34,197,94,.22);  /* focus rings, etc. */
}

/* ---- Theme tools (top-right) ------------------------------------------- */
.theme-tools{
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Dark/Light toggle button keeps Bootstrap look; we only set placement above */

/* Accent dropdown */
#accent-dropdown{ position: relative; }
#accent-button{
  display: inline-flex; align-items: center; gap:.5rem;
  font: inherit; line-height: 1; padding: .35rem .5rem .35rem .4rem;
  background: transparent; border: 1px solid currentColor; border-radius: .5rem;
  color: inherit; cursor: pointer;
}
#accent-button .swatch{
  width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--accent); outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 1px; display:inline-block;
}
#accent-menu{
  position: absolute; top: calc(100% + .35rem); right: 0;
  min-width: 11rem; padding: .35rem; border-radius: .6rem;
  display: grid; gap: .25rem; grid-template-columns: 1fr 1fr 1fr;
  background: #fff; border: 1px solid #e3e6ea; box-shadow: 0 6px 32px #0002;
}
#accent-menu[hidden]{ display: none !important; }
#accent-menu .item{
  display:flex; align-items:center; gap:.35rem; padding:.35rem .45rem; border-radius:.45rem;
  border:1px solid transparent; background: transparent; cursor:pointer; color:#111;
}
#accent-menu .item .dot{
  width:.9rem; height:.9rem; border-radius:50%; outline:2px solid #0002; outline-offset:1px;
}
#accent-menu .item[aria-checked="true"]{
  background: #f6f7f9; border-color: #e3e6ea;
}

/* When dark theme is on, dropdown follows dark surface tokens (defined below) */
:root[data-theme="dark"] #accent-menu{
  background: var(--surface); border-color: var(--border); color: var(--text);
  box-shadow: 0 8px 36px rgba(0,0,0,.4);
}
:root[data-theme="dark"] #accent-menu .item{ color: var(--text); }
:root[data-theme="dark"] #accent-menu .item[aria-checked="true"]{
  background: var(--surface-2); border-color: var(--border);
}

/* ==========================================================================
   DARK MODE ONLY (Light mode: no visual changes)
   ========================================================================== */
:root[data-theme="dark"]{
  /* Neutral charcoal set (no blue cast) */
  --bg:        #0b0c0e;   /* page canvas */
  --surface:   #131417;   /* cards/panels */
  --surface-2: #0f1012;   /* subtle bands/headers */
  --border:    #2a2e33;   /* lines */
  --text:      #e8eaed;
  --muted:     #aeb4bb;

  --link:      var(--accent);   /* links pick accent in dark */
  --msg-bg:    rgba(0,0,0,.60);

  /* Check/radio reuse the accent; JS updates --accent live */
  --dm-check-fill:   var(--accent);
  --dm-check-border: var(--accent);

  /* NEW: Divider tokens (used for <hr> and friends) */
  --divider:         var(--accent-soft-22);
  --divider-strong:  var(--accent);
}

/* Page base */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body{
  background: var(--bg);
  color: var(--text);
}

/* Links/focus */
:root[data-theme="dark"] a{ color: var(--link); }
:root[data-theme="dark"] a:hover{ color: var(--link); filter: brightness(1.08); }
:root[data-theme="dark"] :focus{ outline-color: var(--accent); }

/* Common surfaces (Bootstrap-ish) */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .offcanvas,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .toast{
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Admin panel headers follow surface-2 */
:root[data-theme="dark"] .admin-panel .card-header{
  background: var(--surface-2);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1; /* preserve your sticky header */
}

/* Tables */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table *{ border-color: var(--border) !important; }
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--surface-2);
}

/* Forms (containers) */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text{
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="dark"] .form-control::placeholder{ color: var(--muted); }

/* Form focus uses accent */
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .16rem var(--accent-soft-22);
  color: var(--text);
}

/* Buttons — accent driven (dark only) */
:root[data-theme="dark"] .btn-primary{
  background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
:root[data-theme="dark"] .btn-primary:hover{ filter: brightness(0.96); }

:root[data-theme="dark"] .btn-outline-primary{
  color: var(--accent); border-color: var(--accent);
}
:root[data-theme="dark"] .btn-outline-primary:hover{
  background-color: var(--accent); color: var(--accent-contrast);
}
:root[data-theme="dark"] .btn-outline-secondary{
  color: var(--text); border-color: var(--border);
}
:root[data-theme="dark"] .btn-outline-secondary:hover{ background: var(--surface-2); }

/* Message bar (top-center) */
:root[data-theme="dark"] #message-bar{
  background: var(--msg-bg) !important;
  color: var(--text);
  border: 2px solid transparent;
  border-radius: 12px;
  font-weight: 700;
}
:root[data-theme="dark"] #message-bar.state-success{
  color: #40d689; border-color: #198754;
}
:root[data-theme="dark"] #message-bar.state-error{
  color: #ff6b6b; border-color: #dc3545;
}

/* ==================== App-specific blocks ==================== */

/* Fix hard-coded light backgrounds from inline styles on these IDs if present */
:root[data-theme="dark"] #content-wrapper,
:root[data-theme="dark"] #palette-row,
:root[data-theme="dark"] #filter-menu{
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* NSN block outer panels: subtle white outline so they stand off page canvas */
:root[data-theme="dark"] .nsn-tree-block{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Section headings inside NSN blocks */
:root[data-theme="dark"] .nsn-tree-block strong{ color: var(--text); }

/* Lanes (dashed) — readable on dark */
:root[data-theme="dark"] .role-lane{
  border: 1px dashed rgba(255,255,255,.55) !important;
  background: transparent;
}
:root[data-theme="dark"] .role-lane:hover{
  border-color: rgba(255,255,255,.75) !important;
  background: rgba(255,255,255,.03);
}

/* User tiles (pastels) — keep YOUR look:
   - pastel backgrounds from app
   - black inner border (1.5px)
   - black text
   - add crisp WHITE outer ring (1.5px) so they don’t vanish on dark */
:root[data-theme="dark"] .role-lane .items-container .user-item{
  color: #000 !important;
  border: 1.5px solid #000 !important;       /* your inner border */
  background: inherit;                        /* keep the pastel fill */
  box-shadow: 0 0 0 1.5px #fff;               /* outer ring for contrast */
}
:root[data-theme="dark"] .role-lane .items-container .user-item *{
  color: #000 !important;
}

/* Trash can panel: red-ish but still dark */
:root[data-theme="dark"] #trash-can-list{
  background: rgba(220,53,69,.10);
  border-color: #dc3545 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Move role zones — vibrant again */
:root[data-theme="dark"] .move-role-zone{
  background: rgba(64,150,255,.20) !important;
  border: 2px dashed rgba(64,150,255,.95) !important;
  color: rgb(170,210,255) !important;
  box-shadow: inset 0 0 0 1px rgba(64,150,255,.6);
}
:root[data-theme="dark"] .move-role-down-zone{
  background: rgba(40,200,120,.20) !important;
  border: 2px dashed rgba(40,200,120,.95) !important;
  color: rgb(170,245,205) !important;
  box-shadow: inset 0 0 0 1px rgba(40,200,120,.6);
}

/* Palette chips keep dark text (they’re also pastel) */
:root[data-theme="dark"] .role-palette-item{ color: #000 !important; }

/* ==================== Dark-mode inputs (accent-driven) ==================== */

/* Checkboxes — thin outline, proper tick, accent fill when checked */
:root[data-theme="dark"] .form-check-input[type="checkbox"],
:root[data-theme="dark"] .above-nsn-checkbox{
  appearance: none; -webkit-appearance: none;
  width: 1rem; height: 1rem; border-radius: .25rem;
  border: 1px solid #3a3f45; background: transparent;
  position: relative; vertical-align: text-bottom; cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
:root[data-theme="dark"] .form-check-input[type="checkbox"]::after,
:root[data-theme="dark"] .above-nsn-checkbox::after{
  content: ""; position: absolute; width: .52rem; height: .28rem;
  top: 50%; left: 50%;
  transform: translate(-50%, -65%) rotate(-45deg) scale(0);
  border-left: 2px solid #0e2d1d; border-bottom: 2px solid #0e2d1d; /* dark tick */
  transition: transform .12s ease-in-out;
}
:root[data-theme="dark"] .form-check-input[type="checkbox"]:checked,
:root[data-theme="dark"] .above-nsn-checkbox:checked{
  background-color: var(--dm-check-fill);
  border-color: var(--dm-check-border);
}
:root[data-theme="dark"] .form-check-input[type="checkbox"]:checked::after,
:root[data-theme="dark"] .above-nsn-checkbox:checked::after{
  transform: translate(-50%, -65%) rotate(-45deg) scale(1);
}
:root[data-theme="dark"] .form-check-input[type="checkbox"]:focus,
:root[data-theme="dark"] .above-nsn-checkbox:focus{
  outline: none; box-shadow: 0 0 0 .18rem var(--accent-soft-22);
}

/* Radios — match checkboxes, accent fill + white inner dot */
:root[data-theme="dark"] .form-check-input[type="radio"]{
  appearance: none; -webkit-appearance: none;
  inline-size: 18px; block-size: 18px; margin-top: .2em;
  border-radius: 50%; background: #0f1113; border: 1.5px solid rgba(255,255,255,.35);
  position: relative; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
:root[data-theme="dark"] .form-check-input[type="radio"]:hover,
:root[data-theme="dark"] .form-check-input[type="radio"]:focus{
  box-shadow: 0 0 0 3px var(--accent-soft-16); border-color: rgba(255,255,255,.55);
}
:root[data-theme="dark"] .form-check-input[type="radio"]:checked{
  background: var(--accent); border-color: var(--accent);
}
:root[data-theme="dark"] .form-check-input[type="radio"]:checked::after{
  content: ""; position: absolute; inset: 0; margin: auto;
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: #fff;
}
:root[data-theme="dark"] .form-check-input[type="radio"]:disabled{
  opacity: .45; cursor: not-allowed; box-shadow: none;
}

/* ========================================================================== */
/* PRINT: (same as your earlier intent; hide UI when printing)                */
/* ========================================================================== */
@media print{
  #theme-tools, #accent-dropdown, #filter-toolbar, #message-bar, #filter-menu, #palette-row{ display:none !important; }
  #content-wrapper{ margin-left:0 !important; overflow:visible !important; }
  @page{ size: landscape; }
}

/* =========================================================
   ACCENTS
   - tokens (default = green)
   - top-right dot button + vertical dot-only menu
   ========================================================= */

/* Accent tokens (updated live by theme.js when user picks a color) */
:root{
  --accent:            #22c55e;              /* default green */
  --accent-contrast:   #ffffff;              /* ink on solid accent */
  --accent-soft-16:    rgba(34,197,94,.16);  /* subtle focus/hover */
  --accent-soft-22:    rgba(34,197,94,.22);
}

/* In dark, links/controls use the accent automatically */
:root[data-theme="dark"]{
  --link: var(--accent);
  --dm-check-fill:   var(--accent);
  --dm-check-border: var(--accent);
}

/* Top-right tools container (theme toggle + accent dot) */
.theme-tools{
  position: fixed;
  top: .75rem;
  right: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  z-index: 1200;
}

/* Dot button that shows the current accent */
#accent-toggle{
  inline-size: 36px;
  block-size: 36px;
  border-radius: 10px;
  border: 1px solid var(--dm-contrast-border, var(--border));
  background: var(--surface);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
#accent-toggle:hover,
#accent-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
#accent-toggle .swatch{
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--accent); /* theme.js updates this variable */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(0,0,0,.25);
}

/* Vertical dropdown of color dots */
#accent-menu{
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--dm-contrast-border, var(--border));
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45),
              0 0 0 1px rgba(255,255,255,.06) inset;
  padding: .35rem;
  min-inline-size: 48px;

  display: flex;                /* vertical list */
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  z-index: 1201;
}
#accent-menu[hidden]{ display: none !important; }

/* Each option = a single dot with a comfy hit area */
.accent-option{
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 100%;
  padding: .25rem .35rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.accent-option:hover,
.accent-option:focus-visible{
  background: var(--surface-2);
  outline: none;
}
.accent-option .swatch{
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--sw);                    /* set inline: style="--sw:#xxxxxx" */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
/* Selected dot: accent ring + crisp white halo */
.accent-option[aria-checked="true"] .swatch{
  box-shadow:
    0 0 0 3px var(--sw),                    /* inner accent ring */
    0 0 0 5px rgba(255,255,255,.90),        /* outer white halo */
    inset 0 0 0 1px rgba(0,0,0,.25);
}

/* ========================================================================== */
/* === DARK-ONLY: high-contrast Accent scrollbars + border dividers ========= */
/* ========================================================================== */

/* 1) Scrollbars — SOLID accent thumb (Firefox + Chromium/WebKit) */
:root[data-theme="dark"]{
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface-2);
}

/* Chromium/WebKit */
:root[data-theme="dark"] *::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}
:root[data-theme="dark"] *::-webkit-scrollbar-track{
  background: var(--surface-2);
}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb{
  background-color: var(--accent);          /* solid, not translucent */
  border-radius: 10px;
  border: 3px solid var(--surface-2);       /* keeps the thumb visible */
}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{
  filter: brightness(0.93);
}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb:active{
  filter: brightness(0.87);
}

/* 2) Dividers — target the utilities your HTML actually uses */
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .dropdown-divider{
  border: 0;
  height: 1px;
  background-color: var(--accent);
  opacity: 1;                                /* override Bootstrap’s opacity */
}

/* Bootstrap border utilities: color them with the accent in dark mode */
:root[data-theme="dark"] .border-top    { border-top-color:    var(--accent) !important; }
:root[data-theme="dark"] .border-bottom { border-bottom-color: var(--accent) !important; }
:root[data-theme="dark"] .border-start  { border-left-color:   var(--accent) !important; }
:root[data-theme="dark"] .border-end    { border-right-color:  var(--accent) !important; }

/* Optional: stronger divider when you add .strong on the element */
:root[data-theme="dark"] hr.strong,
:root[data-theme="dark"] .dropdown-divider.strong{
  height: 2px;
  background-color: var(--accent);
}

/* If there are places you DON'T want accent borders, add .neutral-dividers
   on a container to revert just inside that subtree. */
:root[data-theme="dark"] .neutral-dividers .border-top    { border-top-color:    var(--border) !important; }
:root[data-theme="dark"] .neutral-dividers .border-bottom { border-bottom-color: var(--border) !important; }
:root[data-theme="dark"] .neutral-dividers .border-start  { border-left-color:   var(--border) !important; }
:root[data-theme="dark"] .neutral-dividers .border-end    { border-right-color:  var(--border) !important; }

/* =====================================================================================
   DARK MODE — Unified divider system (accent-tinted, never touches Light Mode)
   Place at the END of theme.css
   ===================================================================================== */

/* 0) Tokens: coherent divider colors derived from the current Accent + dark surfaces */
:root[data-theme="dark"]{
  /* Primary divider for borders and rules */
  --divider: color-mix(in oklab, var(--accent) 32%, var(--surface) 68%);
  /* Softer inner outline for inset lines and hairlines */
  --divider-inset: color-mix(in oklab, var(--accent) 18%, var(--surface) 82%);
}

/* Fallback if color-mix isn't supported (keeps it readable, still accent-aware) */
@supports not (color: color-mix(in oklab, #000, #fff)) {
  :root[data-theme="dark"]{
    --divider: var(--accent-soft-22);
    --divider-inset: var(--accent-soft-16);
  }
}

/* 1) Bootstrap variables — make components/utility borders inherit our divider */
:root[data-theme="dark"]{
  --bs-border-color: var(--divider);
  --bs-border-color-translucent: var(--divider-inset);
  --bs-border-opacity: 1; /* ensure borders aren’t faded in dark */
}

/* 2) Semantic rules */
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .dropdown-divider{
  height: 1px;
  border: 0;
  background-color: var(--divider);
  opacity: 1;
}
:root[data-theme="dark"] hr.strong,
:root[data-theme="dark"] .dropdown-divider.strong{
  height: 2px;
  background-color: var(--accent);
}

/* 3) Utilities and shells that frequently form “random seams” */
:root[data-theme="dark"] .border            { border-color: var(--divider) !important; }
:root[data-theme="dark"] .border-top        { border-top-color: var(--divider) !important; }
:root[data-theme="dark"] .border-bottom     { border-bottom-color: var(--divider) !important; }
:root[data-theme="dark"] .border-start      { border-left-color: var(--divider) !important; }
:root[data-theme="dark"] .border-end        { border-right-color: var(--divider) !important; }
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .container-fluid,
:root[data-theme="dark"] .row,
:root[data-theme="dark"] [class*="col-"]{
  /* If utilities land here, force their line color to the token */
  --bs-border-color: var(--divider);
}

/* 4) Components that draw their own borders */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card *{
  border-color: var(--divider) !important;
}
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .offcanvas,
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table *{
  border-color: var(--divider) !important;
}
:root[data-theme="dark"] .admin-panel .card-header{
  border-bottom-color: var(--divider) !important;
}

/* 5) Your custom panels that used white-ish inner outlines — retint them */
:root[data-theme="dark"] .nsn-tree-block{
  border-color: var(--divider) !important;
  box-shadow: inset 0 0 0 1px var(--divider-inset); /* replaces the faint white */
}

/* 6) Fake “lines” that are actually 1px inset box-shadows (common hairline trick) */
:root[data-theme="dark"] #content-wrapper [style*="box-shadow"][style*="inset 0 0 0 1px"]{
  box-shadow: inset 0 0 0 1px var(--divider-inset) !important;
}

/* 7) Truly stubborn inline styles that hard-code border colors.
      Scoped narrowly to the main content area so we don’t touch your pastel tiles. */
:root[data-theme="dark"] #content-wrapper [style*="border:"],
:root[data-theme="dark"] #content-wrapper [style*="border-top"],
:root[data-theme="dark"] #content-wrapper [style*="border-bottom"],
:root[data-theme="dark"] #content-wrapper [style*="border-left"],
:root[data-theme="dark"] #content-wrapper [style*="border-right"]{
  border-color: var(--divider) !important;
}

/* 8) Optional escape hatch — mark any subtree as neutral if you don’t want accent lines */
:root[data-theme="dark"] .neutral-dividers,
:root[data-theme="dark"] .neutral-dividers *{
  --bs-border-color: var(--border) !important;
  border-color: var(--border) !important;
}

/* 9) (Already fixed earlier) High-contrast scrollbars in dark mode — kept here for completeness */
:root[data-theme="dark"]{
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface-2);
}
:root[data-theme="dark"] *::-webkit-scrollbar{ width:12px; height:12px; }
:root[data-theme="dark"] *::-webkit-scrollbar-track{ background: var(--surface-2); }
:root[data-theme="dark"] *::-webkit-scrollbar-thumb{
  background-color: var(--accent);
  border-radius: 10px;
  border: 3px solid var(--surface-2);
}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{ filter: brightness(.93); }
:root[data-theme="dark"] *::-webkit-scrollbar-thumb:active{ filter: brightness(.87); }

/* ==========================================================================
   DARK MODE • Filter Pane icons: Close “X” + Date calendar buttons
   Scope: #filter-menu only (does not affect Light Mode or other areas)
   ========================================================================== */

/* Close (“X”) button — draw the glyph with the current Accent via CSS mask */
:root[data-theme="dark"] #filter-menu .btn-close{
  /* Size & hit area */
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: .35rem;
  border: 0;
  opacity: 1;

  /* Make the icon itself the Accent color */
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<path fill='currentColor' d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 1 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/>\
</svg>") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<path fill='currentColor' d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 1 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/>\
</svg>") center/100% 100% no-repeat;
  box-shadow: none;
}
:root[data-theme="dark"] #filter-menu .btn-close:hover{ filter: brightness(.92); }
:root[data-theme="dark"] #filter-menu .btn-close:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Date inputs — recolor the calendar picker button to Accent */
:root[data-theme="dark"] #filter-menu input[type="date"]{
  color-scheme: dark;               /* keeps native popover readable */
  padding-right: 2.25rem;           /* room for the custom icon */
}

/* Chromium/WebKit: calendar indicator */
:root[data-theme="dark"] #filter-menu input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 1;
  background: var(--accent);        /* the color of the icon */
  border-radius: .375rem;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<path fill='currentColor' d='M5 1h1v2H5V1zm5 0h1v2h-1V1zM2 3h12v2H2V3zm0 3h12v9H2V6z'/>\
</svg>") center/16px 16px no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<path fill='currentColor' d='M5 1h1v2H5V1zm5 0h1v2h-1V1zM2 3h12v2H2V3zm0 3h12v9H2V6z'/>\
</svg>") center/16px 16px no-repeat;
}
:root[data-theme="dark"] #filter-menu input[type="date"]::-webkit-calendar-picker-indicator:hover{
  filter: brightness(.92);
}

/* ==========================================================================
   Hide Accent Selector in Light Mode (show only in Dark)
   ========================================================================== */
:root:not([data-theme="dark"]) #accent-toggle,
:root:not([data-theme="dark"]) #accent-menu{
  display: none !important;
}

/* =============================================================================
   DARK MODE • Make filtered highlights legible (override forced black text)
   ============================================================================= */

/* Keep any fill/glow you use, but don't darken the text via background tints */
:root[data-theme="dark"] .highlight-match{
  background-color: transparent !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* User tiles + palette items: force readable (usually white) copy when highlighted */
:root[data-theme="dark"] .role-lane .items-container .user-item.highlight-match,
:root[data-theme="dark"] .role-lane .items-container .user-item.highlight-match *,
:root[data-theme="dark"] .role-palette-item.highlight-match,
:root[data-theme="dark"] .role-palette-item.highlight-match *{
  color: var(--accent-contrast) !important;   /* computed by theme.js (white for dark accents) */
}

/* Optional: if you’d rather use the standard dark-mode text color instead of accent-contrast,
   swap the line above for this one:  color: var(--text) !important; */

/* Keep the accent outline/glow (tune as you like) */
:root[data-theme="dark"] .user-item.highlight-match{
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 4px var(--accent),
    0 0 14px 2px color-mix(in oklab, var(--accent) 26%, transparent);
}

/* ====================================================================== */
/* DARK • Editor: make readonly/disabled inputs match dark theme          */
/* ====================================================================== */

:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly],
:root[data-theme="dark"] .form-select:disabled,
:root[data-theme="dark"] .form-select[readonly]{
  background-color: var(--surface-2) !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;  /* Chromium */
  border-color: var(--border) !important;
  opacity: 1 !important;  /* override Bootstrap’s dimming */
}

:root[data-theme="dark"] .form-control[readonly]:hover,
:root[data-theme="dark"] .form-select[readonly]:hover{
  background-color: var(--surface-2) !important;
}

/* Date/time inputs specifically (when readonly/disabled in the Editor) */
:root[data-theme="dark"] input[type="date"][readonly],
:root[data-theme="dark"] input[type="date"]:disabled,
:root[data-theme="dark"] input[type="datetime-local"][readonly],
:root[data-theme="dark"] input[type="datetime-local"]:disabled,
:root[data-theme="dark"] input[type="time"][readonly],
:root[data-theme="dark"] input[type="time"]:disabled{
  background-color: var(--surface-2) !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* Placeholder tone for readonly fields */
:root[data-theme="dark"] .form-control[readonly]::placeholder,
:root[data-theme="dark"] input[type="date"][readonly]::placeholder,
:root[data-theme="dark"] input[type="datetime-local"][readonly]::placeholder{
  color: var(--muted) !important;
}

/* Keep input-group adornments dark as well */
:root[data-theme="dark"] .input-group .input-group-text{
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}