/* ============================================================
   TRDSLTN — Night Mode (eye-comfort)
   Activated when <html class="dark"> is present.
   Warm charcoal surfaces + soft cream text: low blue light,
   clear readable contrast, gentle on the eyes for night use.
   Overrides common Tailwind utility classes + custom component
   classes. Loaded AFTER output.css so these unlayered rules win
   over Tailwind's layered utilities.
   ============================================================ */

html.dark {
  color-scheme: dark;

  --dm-bg:          #282624; /* main page background (warm dark) */
  --dm-surface:     #322f2c; /* cards / bg-white                 */
  --dm-surface-2:   #393633; /* bg-gray-50 / gray-100            */
  --dm-surface-3:   #45413c; /* bg-gray-200/300 / hover          */
  --dm-surface-4:   #504b45; /* bg-gray-300/400                  */

  --dm-border:      #504a44;
  --dm-border-soft: #423e39;
  --dm-border-strong:#5c554e;

  --dm-text:        #ece5d6; /* primary text — warm cream        */
  --dm-text-2:      #d8d1c2; /* gray-700/800                     */
  --dm-muted:       #ada494; /* gray-500/600                     */
  --dm-faint:       #8c8477; /* gray-400                         */
}

/* ---------- Base ---------- */
html.dark body {
  background: var(--dm-bg);
  color: var(--dm-text);
}
html.dark .root-layout main {
  background: var(--dm-bg);
}

/* ---------- Backgrounds (grays) ---------- */
html.dark .bg-white      { background-color: var(--dm-surface)   !important; }
html.dark .bg-gray-50    { background-color: var(--dm-surface-2) !important; }
html.dark .bg-gray-100   { background-color: var(--dm-surface-2) !important; }
html.dark .bg-gray-200   { background-color: var(--dm-surface-3) !important; }
html.dark .bg-gray-300   { background-color: var(--dm-surface-4) !important; }
html.dark .bg-slate-50   { background-color: var(--dm-surface-2) !important; }
html.dark .bg-slate-100  { background-color: var(--dm-surface-2) !important; }

/* Pale colored tints -> subtle warm dark tints (keep text readable) */
html.dark .bg-blue-50    { background-color: #2b333f !important; }
html.dark .bg-blue-100   { background-color: #313b49 !important; }
html.dark .bg-blue-200   { background-color: #384453 !important; }
html.dark .bg-green-50   { background-color: #2c3327 !important; }
html.dark .bg-green-100  { background-color: #323b2c !important; }
html.dark .bg-red-50     { background-color: #392f2c !important; }
html.dark .bg-red-100    { background-color: #443633 !important; }
html.dark .bg-red-200    { background-color: #4d3c37 !important; }
html.dark .bg-yellow-50  { background-color: #383219 !important; }
html.dark .bg-yellow-100 { background-color: #40391d !important; }
html.dark .bg-amber-50   { background-color: #383219 !important; }

/* ---------- Text ---------- */
html.dark .text-black    { color: #f2ecdd !important; }
html.dark .text-gray-900 { color: #f2ecdd !important; }
html.dark .text-gray-800 { color: var(--dm-text)   !important; }
html.dark .text-gray-700 { color: var(--dm-text-2) !important; }
html.dark .text-gray-600 { color: #c3bbab !important; }
html.dark .text-gray-500 { color: var(--dm-muted)  !important; }
html.dark .text-gray-400 { color: var(--dm-faint)  !important; }
html.dark .text-slate-600{ color: #c3bbab !important; }
html.dark .text-slate-500{ color: var(--dm-muted)  !important; }
html.dark .text-slate-400{ color: var(--dm-faint)  !important; }

/* Colored text — softened & warmed so it reads clearly but is gentle at night */
html.dark .text-blue-800 { color: #9cbce0 !important; }
html.dark .text-blue-700 { color: #93b4da !important; }
html.dark .text-blue-600 { color: #8fb1d8 !important; }
html.dark .text-blue-500 { color: #86a9d2 !important; }
html.dark .text-green-800{ color: #a6cd8c !important; }
html.dark .text-green-700{ color: #a6cd8c !important; }
html.dark .text-green-600{ color: #9dc683 !important; }
html.dark .text-red-700  { color: #e6a29b !important; }
html.dark .text-red-600  { color: #e2968e !important; }
html.dark .text-amber-800{ color: #e0c079 !important; }
html.dark .text-amber-700{ color: #e0c079 !important; }
html.dark .text-amber-600{ color: #dab766 !important; }
html.dark .text-indigo-700{ color: #a8aee0 !important; }
html.dark .text-red-500  { color: #e2968e !important; }
html.dark .text-green-500{ color: #9dc683 !important; }
html.dark .text-blue-400 { color: #86a9d2 !important; }
html.dark .text-green-400{ color: #9dc683 !important; }

/* ---------- Borders ---------- */
html.dark .border-gray-100 { border-color: var(--dm-border-soft)  !important; }
html.dark .border-gray-200 { border-color: var(--dm-border-soft)  !important; }
html.dark .border-gray-300 { border-color: var(--dm-border)       !important; }
html.dark .border-gray-400 { border-color: var(--dm-border-strong)!important; }
html.dark .border-gray-500 { border-color: var(--dm-border-strong)!important; }
html.dark .border-gray-600 { border-color: #6b6459 !important; }
html.dark .border-gray-700 { border-color: #5c554e !important; }
html.dark .border-slate-200{ border-color: var(--dm-border-soft)  !important; }
html.dark .border-slate-300{ border-color: var(--dm-border)       !important; }

/* ---------- Hover states (grays) ---------- */
html.dark .hover\:bg-gray-50:hover  { background-color: var(--dm-surface-3) !important; }
html.dark .hover\:bg-gray-100:hover { background-color: var(--dm-surface-3) !important; }
html.dark .hover\:bg-gray-200:hover { background-color: var(--dm-surface-4) !important; }
html.dark .hover\:bg-blue-50:hover  { background-color: #313b49 !important; }
html.dark .hover\:text-gray-900:hover { color: #f2ecdd !important; }

/* ---------- Form controls (only those without an explicit bg/text utility) ---------- */
html.dark input:not([class*="bg-"]):not([type="checkbox"]):not([type="radio"]),
html.dark select:not([class*="bg-"]),
html.dark textarea:not([class*="bg-"]) {
  background-color: var(--dm-surface);
}
html.dark input:not([class*="text-"]):not([type="checkbox"]):not([type="radio"]),
html.dark select:not([class*="text-"]),
html.dark textarea:not([class*="text-"]) {
  color: var(--dm-text);
}
html.dark ::placeholder { color: var(--dm-muted); opacity: 1; }

/* Cells without explicit border/bg utility get a soft dark border */
html.dark td:not([class*="border-"]),
html.dark th:not([class*="border-"]) { border-color: var(--dm-border-soft); }

/* ---------- Custom component classes (from input.css) ---------- */
html.dark .sidebar {
  background: #26241f;
  border-right-color: var(--dm-border);
}
html.dark .sidebar-header,
html.dark .sidebar-footer {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}
html.dark .sidebar-header small { color: var(--dm-muted) !important; }

html.dark .nav-link { color: var(--dm-text-2); }
html.dark .nav-link:hover { background: var(--dm-surface-2); }
html.dark .nav-link.active {
  background: #3a4034;
  border-left-color: #b8bb26;
  color: #d5d99a;
}
html.dark .nav-link-category { color: var(--dm-text-2); }
html.dark .nav-link-category:hover {
  background: rgba(184, 187, 38, 0.12);
  border-left-color: #b8bb26;
}

html.dark .submenu { border-left-color: var(--dm-border); }
html.dark .submenu a,
html.dark .submenu .sub-link { color: var(--dm-text-2); }
html.dark .submenu a::before,
html.dark .submenu .sub-link::before { background: var(--dm-border); }
html.dark .submenu a:hover,
html.dark .submenu .sub-link:hover { background: var(--dm-surface-2); color: #f2ecdd; }
html.dark .submenu a.active,
html.dark .submenu .sub-link.active {
  background: #3a4034;
  border-left-color: #b8bb26;
  color: #d5d99a;
}
html.dark .submenu .sub-link.sub-parent { color: var(--dm-text-2); }

/* Search box / view-mode toggle / favorites area */
html.dark .search-input {
  background: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html.dark .view-mode-toggle,
html.dark .favorites-list-header,
html.dark .add-favorites-panel { border-color: var(--dm-border); }

/* Old-school widgets */
html.dark .tree-view,
html.dark .org-list {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .org-item { border-color: var(--dm-border-soft); }
html.dark .org-item:hover { background: var(--dm-surface-3); }
html.dark .org-item.selected { background: var(--dm-surface-4); }
html.dark .form-input,
html.dark .form-select,
html.dark .form-button {
  background: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border-strong);
}

/* Reconnect modal box */
html.dark .reconnect-box { background: var(--dm-surface); }
html.dark .reconnect-title { color: var(--dm-text) !important; }

/* ---------- App header bar (PageHeader.razor uses inline styles) ---------- */
/* Inline styles need !important from a stylesheet to be overridden.
   Scoped to the header's two top-level content areas so the
   notification / chatbot overlays (white popups) are left untouched. */
html.dark .app-header {
  background: var(--dm-surface) !important;
  border-bottom-color: var(--dm-border) !important;
}
html.dark .app-header > div:first-child h1 { color: var(--dm-text) !important; }
html.dark .app-header > div:first-child button { color: var(--dm-text-2) !important; }
html.dark .app-header > div:nth-child(2) button { color: var(--dm-muted) !important; }
html.dark .app-header > div:first-child button:hover,
html.dark .app-header > div:nth-child(2) button:hover { color: var(--dm-text) !important; }

/* ---------- Theme toggle button ---------- */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.15rem;
  font-size: 0.7rem;
  line-height: 1;
  color: #374151;
  border-radius: 0.25rem;
}
.theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.06); }
html.dark .theme-toggle-btn { color: #e0c079; }
html.dark .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); }


/* ============================================================
   QuoteFlow (qf-*) — night mode
   ------------------------------------------------------------
   quoteflow.css is written light-first, so the whole design
   system needs a dark counterpart. Two layers:

     1. Re-point the --qf-* tokens at this file's warm charcoal
        palette. Everything in quoteflow.css that already uses
        var() follows automatically — surfaces, borders, inputs,
        section headers, the split panels.
     2. Override the rules where quoteflow.css hardcoded a
        colour: table heads, tiles, chips, meters, tabs, modals.

   Loaded after quoteflow.css and scoped to html.dark, so these
   win on cascade order + specificity — no !important needed
   except where the markup carries an inline style.
   ============================================================ */

html.dark {
  --qf-blue:        #7ea6d8;  /* softened: full #2563eb glares on charcoal */
  --qf-blue-dark:   #6d97cd;
  --qf-blue-ink:    #9cbce0;
  --qf-blue-soft:   #313b49;  /* section header bars */
  --qf-blue-faint:  #2b333f;  /* row hover */

  --qf-line:        #5c554e;
  --qf-line-soft:   #4a443e;
  --qf-bg:          #282624;
  --qf-bg-soft:     #322f2c;

  --qf-ink:         #ece5d6;
  --qf-ink-2:       #d8d1c2;
  --qf-muted:       #ada494;
}

/* ---------- Shell ---------- */
html.dark .qf { color: var(--dm-text-2); }
html.dark .qf-shell { background: var(--dm-bg); }
html.dark .qf-pane,
html.dark .qf-sec,
html.dark .qf-fieldset,
html.dark .qf-side { background: var(--dm-surface); border-color: var(--dm-border); }
html.dark .qf-legend { color: var(--dm-text-2); }

html.dark .qf-scroll { scrollbar-color: #6b645a var(--dm-surface-2); }
html.dark .qf-scroll::-webkit-scrollbar-track,
html.dark .qf-scroll::-webkit-scrollbar-corner { background: var(--dm-surface-2); }
html.dark .qf-scroll::-webkit-scrollbar-thumb {
  background: #6b645a;
  border-color: var(--dm-surface-2);
}
html.dark .qf-scroll::-webkit-scrollbar-thumb:hover { background: #7d7568; }

/* ---------- Section headers ---------- */
html.dark .qf-sec-head { background: var(--qf-blue-soft); border-bottom-color: var(--dm-border); }
html.dark .qf-sec-head-gray { background: var(--dm-surface-2); }
html.dark .qf-sec-title { color: var(--qf-blue-ink); }
html.dark .qf-sec-head-gray .qf-sec-title { color: var(--dm-text-2) !important; }

/* ---------- Summary tiles ---------- */
html.dark .qf-tile { background: var(--dm-surface-2); border-color: var(--dm-border); }
html.dark .qf-tile-label,
html.dark .qf-tile-sub { color: var(--dm-muted); }

html.dark .qf-t-slate  { background: #343330; border-color: #4f4a44; }
html.dark .qf-t-slate  .qf-tile-value { color: #cfc8ba; }
html.dark .qf-t-blue   { background: #2b333f; border-color: #3d4a5c; }
html.dark .qf-t-blue   .qf-tile-value { color: #9cbce0; }
html.dark .qf-t-green  { background: #2c3327; border-color: #414d38; }
html.dark .qf-t-green  .qf-tile-value { color: #a6cd8c; }
html.dark .qf-t-amber  { background: #383219; border-color: #514726; }
html.dark .qf-t-amber  .qf-tile-value { color: #e0c079; }
html.dark .qf-t-red    { background: #392f2c; border-color: #543f3a; }
html.dark .qf-t-red    .qf-tile-value { color: #e6a29b; }
html.dark .qf-t-indigo { background: #2f2f42; border-color: #43436b; }
html.dark .qf-t-indigo .qf-tile-value { color: #a8aee0; }
html.dark .qf-t-purple { background: #362e3d; border-color: #4d4159; }
html.dark .qf-t-purple .qf-tile-value { color: #c6a6da; }
html.dark .qf-t-teal   { background: #263533; border-color: #37504c; }
html.dark .qf-t-teal   .qf-tile-value { color: #8ccbc2; }

/* ---------- Form controls ---------- */
html.dark .qf-input,
html.dark .qf-select,
html.dark .qf-textarea {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .qf-input:focus,
html.dark .qf-select:focus,
html.dark .qf-textarea:focus {
  border-color: var(--qf-blue);
  box-shadow: 0 0 0 2px rgba(126, 166, 216, 0.22);
}
html.dark .qf-input[readonly],
html.dark .qf-input:disabled,
html.dark .qf-select:disabled,
html.dark .qf-textarea:disabled {
  background: #2f2d2a;
  color: var(--dm-faint);
}
/* Key fields keep their "fill this in" tint, warmed for night. */
html.dark .qf-input-key,
html.dark .qf-input-key[readonly] { background: #3a3524; color: var(--dm-text); }
html.dark .qf-input-auto { background: #35322a; color: var(--dm-muted); }

html.dark .qf-row > label,
html.dark .qf-fld > label,
html.dark .qf-radioset { color: var(--dm-text-2); }
html.dark .qf-radioset { background: var(--dm-surface-2); border-color: var(--dm-border); }
html.dark .qf-pick-btn { background: var(--qf-blue); border-color: var(--qf-blue); color: #22201d; }
html.dark .qf-pick-btn:hover { background: var(--qf-blue-dark); }

/* ---------- Tables ---------- */
html.dark .qf-grid { border-color: var(--dm-border); }

/* Statement section rows sit ON the paper rows, so they need the night surfaces too. */
html.dark .qf-pl-head td { background: var(--dm-surface-2); color: var(--dm-muted); }
html.dark .qf-pl-total td { background: var(--dm-surface-3); }
html.dark .qf-pl-result td {
  background: var(--qf-blue-soft);
  border-top-color: var(--qf-blue);
  border-bottom-color: var(--qf-blue);
  color: var(--qf-blue-ink);
}

/* The night equivalent of the paper rows: the panel surface, never an actual #fff. */
html.dark .qf-grid-paper .qf-table tbody tr { background: var(--dm-surface); }
html.dark .qf-grid-paper .qf-table tbody tr:hover { background: var(--qf-blue-faint); }
html.dark .qf-table thead th,
html.dark .qf-table tfoot td {
  background: var(--dm-surface-3);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .qf-table tbody td { border-color: var(--dm-border-soft); }
html.dark .qf-table tbody tr:hover { background: var(--qf-blue-faint); }
html.dark .qf-table tbody tr.qf-sel,
html.dark .qf-table tbody tr.qf-sel:hover { background: #37424f; }
html.dark .qf-th-sort:hover { background: var(--dm-surface-4); }

html.dark .qf-searchrow td { background: #2f3843; }
html.dark .qf-colsearch { color: var(--dm-text); }
html.dark .qf-colsearch::placeholder { color: var(--dm-muted); }

html.dark .qf-empty { color: var(--dm-faint); }
html.dark .qf-link { color: #9cbce0; }
html.dark .qf-muted { color: var(--dm-muted); }

html.dark .qf-cell-input { color: var(--dm-text); }
html.dark .qf-cell-input:hover { border-color: var(--dm-border); }
html.dark .qf-cell-input:focus { border-color: var(--qf-blue); background: var(--dm-surface-2); }

/* ---------- Status chips ---------- */
html.dark .qf-chip           { background: var(--dm-surface-3); color: var(--dm-text-2); }
html.dark .qf-chip-draft     { background: #3a3733; color: #cfc8ba; }
html.dark .qf-chip-sent      { background: #313b49; color: #9cbce0; }
html.dark .qf-chip-viewed    { background: #2f2f42; color: #a8aee0; }
html.dark .qf-chip-accepted,
html.dark .qf-chip-paid,
html.dark .qf-chip-done      { background: #2c3327; color: #a6cd8c; }
html.dark .qf-chip-rejected,
html.dark .qf-chip-overdue   { background: #392f2c; color: #e6a29b; }
html.dark .qf-chip-changes,
html.dark .qf-chip-due       { background: #3a3122; color: #e0b98a; }
html.dark .qf-chip-partial   { background: #383219; color: #e0c079; }
html.dark .qf-chip-expired   { background: #35322e; color: var(--dm-muted); }
html.dark .qf-chip-converted { background: #263533; color: #8ccbc2; }
html.dark .qf-chip-upcoming  { background: #2b333f; color: #93b4da; }

html.dark .qf-ch-wa { background: #2c3327; color: #a6cd8c; }
html.dark .qf-ch-em { background: #313b49; color: #9cbce0; }
html.dark .qf-ch-cl { background: #362e3d; color: #c6a6da; }

/* ---------- Notifications page ---------- */
/* .qfn-unread is authored inline in QfNotifications.razor with a light-blue fill; this is its
   dark counterpart, so an unread row still reads as highlighted without glaring on charcoal. */
html.dark .qfn-row { border-bottom-color: var(--dm-border-soft); }
html.dark .qfn-unread { background: rgba(126, 166, 216, 0.14); }

/* ---------- Pager ---------- */
html.dark .qf-pager { background: var(--dm-surface-2); border-color: var(--dm-border); }
html.dark .qf-pager-info { color: var(--dm-muted); }
html.dark .qf-pg {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text-2);
}
html.dark .qf-pg:hover:not(:disabled) { background: var(--dm-surface-3); }
html.dark .qf-pg.qf-pg-on { background: #3d5a80; border-color: #3d5a80; color: #eef3fa; }

/* ---------- Two-panel entry ---------- */
html.dark .qf-side-filter,
html.dark .qf-side-list { border-bottom-color: var(--dm-border); }
html.dark .qf-side-item { border-bottom-color: var(--dm-border-soft); }
html.dark .qf-side-item:hover { background: var(--dm-surface-2); }
html.dark .qf-side-item.qf-sel { background: #3d5a80; color: #eef3fa; }
html.dark .qf-side-item.qf-sel .qf-side-item-sub { color: #c4d5e8; }
html.dark .qf-side-item-sub { color: var(--dm-muted); }
html.dark .qf-side-foot { background: var(--dm-surface-2); color: var(--dm-muted); }
html.dark .qf-side-toggle { background: var(--qf-blue); color: #22201d; }
html.dark .qf-side-toggle:hover { background: var(--qf-blue-dark); }

/* ---------- Dashboard bits ---------- */
html.dark .qf-quick-btn {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text-2);
}
html.dark .qf-quick-btn:hover { background: var(--qf-blue-faint); border-color: var(--qf-blue); }
html.dark .qf-bar { background: linear-gradient(180deg, #7ea6d8 0%, #4f7cb0 100%); }
html.dark .qf-bar-alt { background: linear-gradient(180deg, #a6cd8c 0%, #6f9b57 100%); }
html.dark .qf-bar-lbl { color: var(--dm-muted); }
html.dark .qf-meter { background: var(--dm-surface-4); }
html.dark .qf-meter-fill { background: #6f9b57; }
html.dark .qf-meter-fill-warn { background: #b8963f; }
html.dark .qf-meter-fill-bad { background: #b0655c; }

/* ---------- Totals ---------- */
html.dark .qf-total-grand { border-top-color: var(--dm-border-strong); color: var(--qf-blue-ink); }

/* ---------- Tabs ---------- */
html.dark .qf-tabs { border-bottom-color: var(--dm-border); }
html.dark .qf-tab { color: var(--dm-muted); }
html.dark .qf-tab:hover { background: var(--dm-surface-2); color: var(--dm-text); }
html.dark .qf-tab.qf-tab-on {
  background: var(--dm-surface);
  color: var(--qf-blue-ink);
  border-color: var(--dm-border);
  border-bottom-color: var(--dm-surface);
}

/* ---------- Modal ---------- */
html.dark .qf-overlay { background: rgba(0, 0, 0, 0.66); }
html.dark .qf-modal { background: var(--dm-surface); }
html.dark .qf-modal-head { background: var(--dm-surface-2); border-bottom-color: var(--dm-border); }
html.dark .qf-modal-title { color: var(--dm-text); }
html.dark .qf-modal-x { color: #e2968e; }
html.dark .qf-modal-x:hover { background: #392f2c; }
html.dark .qf-modal-foot { background: var(--dm-surface-2); border-top-color: var(--dm-border); }

/* ---------- Notes / misc ---------- */
html.dark .qf-note {
  background: #2b333f;
  border-color: #3d4a5c;
  color: #9cbce0;
}
html.dark .qf-note-warn {
  background: #383219;
  border-color: #514726;
  color: #e0c079;
}
html.dark .qf-note-ok {
  background: #24331f;
  border-color: #3c5232;
  color: #a6cd8c;
}
html.dark .qf-pos { color: #a6cd8c; }
html.dark .qf-neg { color: #e6a29b; }
html.dark .qf-warn { color: #e0c079; }
html.dark .qf-ink-danger { color: #e2968e; }
html.dark .qf-hr { border-top-color: var(--dm-border); }
html.dark .qf-avatar { background: #3f4266; color: #c3c8ee; }
html.dark .qf-strong { color: var(--dm-text); }
html.dark .qf-req { color: #e2968e; }

/* ---------- Ghost / neutral buttons ---------- */
/* The solid brand buttons (primary, success, danger…) read fine on charcoal and are left
   alone; only the ones that were white-on-white need help. */
html.dark .qf-btn { background: transparent; color: var(--dm-text-2); }
html.dark .qf-btn-ghost {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text-2);
}
html.dark .qf-btn-ghost:hover:not(:disabled) { background: var(--dm-surface-3); }

/* ---------- Public quotation page ---------- */
html.dark .qf-public { background: #211f1d; }
html.dark .qf-paper {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
html.dark .qf-paper-head { border-bottom-color: var(--qf-blue); }
html.dark .qf-paper-foot { background: var(--dm-surface-2); border-top-color: var(--dm-border); }
html.dark .qf-brand { background: #3d5a80; color: #eef3fa; }
html.dark .qf-attach { border-color: var(--dm-border); }
html.dark .qf-attach-head { background: var(--dm-surface-2); border-bottom-color: var(--dm-border); }

/* Inline styles on a few QuoteFlow screens hardcode near-black text on what is now a dark
   surface. These are the ones that would otherwise disappear. */
html.dark .qf-paper-head div[style*="color:#111827"],
html.dark .qf-sec-body div[style*="color:#111827"] { color: var(--dm-text) !important; }

/* ---------- Template designer ---------- */
/* GrapesJS already ships a dark UI, so only the surround needs re-pointing. The canvas itself
   stays white on purpose: the design being drawn is printed on paper and emailed to customers,
   so previewing it on a dark ground would misrepresent it. */
html.dark .qf-tpl-wrap {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}
html.dark .qf-tpl-preview { background: #fff; }

/* Gallery cards keep a white thumbnail — it is a preview of printed paper, not of the app. */
html.dark .qf-gal-card {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}
html.dark .qf-gal-shot { background: #fff; border-bottom-color: var(--dm-border); }

/* ---------- Public invoice balance band ---------- */
html.dark .qf-bill-band { background: #26333f; border-bottom-color: var(--dm-border); color: #cfe0f5; }
html.dark .qf-bill-late { background: #3a2626; color: #f8b4b4; }
html.dark .qf-bill-clear { background: #24352a; color: #a7e2b8; }

/* ---------- Business type picker + feature switches (phase 5) ---------- */
html.dark .qf-kindcard,
html.dark .qf-typecard,
html.dark .qf-switch {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
}
html.dark .qf-kindcard:hover,
html.dark .qf-typecard:hover,
html.dark .qf-switch:hover { border-color: var(--qf-blue); }
html.dark .qf-kindcard.qf-on,
html.dark .qf-typecard.qf-on {
  border-color: var(--qf-blue);
  box-shadow: 0 0 0 2px #313b49;
}
html.dark .qf-kindcard-name,
html.dark .qf-typecard-name,
html.dark .qf-switch-name { color: var(--dm-text); }
html.dark .qf-kindcard-sub,
html.dark .qf-typecard-sub,
html.dark .qf-switch-help { color: var(--dm-muted); }

/* ---------- Setup stepper (phase 5) ---------- */
html.dark .qf-step { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-muted); }
html.dark .qf-step-no { background: var(--dm-surface-3); color: var(--dm-text-2); }
html.dark .qf-step.qf-on { background: var(--qf-blue-faint); border-color: var(--qf-blue); color: var(--qf-blue-ink); }
html.dark .qf-step.qf-on .qf-step-no { background: var(--qf-blue); color: #22201d; }
html.dark .qf-step.qf-done .qf-step-no { background: #4f7a4a; color: #e9f2e6; }
html.dark .qf-step-line { background: var(--dm-border); }

/* ── QuoteFlow dashboard charts ─────────────────────────────────────────────
   Only the tokens move. The series colours are desaturated the same way the
   rest of this file treats blue: full-strength #2563eb-class hues vibrate
   against warm charcoal, and six of them side by side vibrate six times. */
html.dark {
  --qf-s1: #7ea6d8;
  --qf-s2: #8fbf7a;
  --qf-s3: #d8ab5e;
  --qf-s4: #b191d0;
  --qf-s5: #74b8ae;
  --qf-s6: #d68c85;
  --qf-s7: #9b9285;
  --qf-chart-grid: #453f39;
  --qf-chart-track: #35322e;
}

/* Funnel labels sit ON the bar, so they follow the bar into the dark palette
   rather than staying white against a now-pale fill. */
html.dark .qf-funnel-bar { color: #22201d; }
html.dark .qf-donut-centre b    { color: var(--dm-text); }
html.dark .qf-donut-centre span { color: var(--dm-muted); }
html.dark .qf-key,
html.dark .qf-key-pct { color: var(--dm-text-2); }
html.dark .qf-key-pct { color: var(--dm-muted); }
html.dark .qf-chart-foot b { color: var(--dm-text); }
html.dark .qf-hbar-head b  { color: var(--dm-text-2); }
html.dark .qf-hbar-head .qf-push { color: var(--dm-text); }

/* ── Header section strip ─────────────────────────────────────────────────── */
html.dark .hdr-links { border-left-color: var(--dm-border); }
/* The strip's slim scrollbar, in the same palette as .qf-scroll above. */
html.dark .hdr-links { scrollbar-color: #6b645a var(--dm-surface-2); }
html.dark .hdr-links::-webkit-scrollbar-track { background: var(--dm-surface-2); }
html.dark .hdr-links::-webkit-scrollbar-thumb { background: #6b645a; }
html.dark .hdr-links::-webkit-scrollbar-thumb:hover { background: #7d7568; }
html.dark .hdr-links-label { color: var(--dm-faint); }
html.dark .hdr-links-icon { background: #2b333f; color: #9cbce0; }
html.dark .hdr-link { color: var(--dm-text-2); }
html.dark .hdr-link:hover { background: var(--dm-surface-3); color: var(--dm-text); }
html.dark .hdr-link.active,
html.dark .hdr-link.active:hover { background: #3d5a80; color: #eef3fa; }
html.dark .nav-link-category.active,
html.dark .nav-link-category.active:hover {
  background: #313b49;
  border-left-color: #7ea6d8;
  color: #9cbce0;
}

/* ── Sign-in panel ────────────────────────────────────────────────────────── */
html.dark .lgp { color: var(--dm-text-2); }
html.dark .lgp-title { color: var(--dm-text); }
html.dark .lgp-hint { color: var(--dm-muted); }
html.dark .lgp-field > label { color: var(--dm-text-2); }
html.dark .lgp-field input,
html.dark .lgp-field select {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html.dark .lgp-err { background: #392f2c; border-color: #6d4b46; color: #e6a29b; }
html.dark .lgp-x:hover { background: var(--dm-surface-3); color: var(--dm-text); }
html.dark .lgp-foot { border-top-color: var(--dm-border); }
html.dark .lgp-go { color: #22201d; }

/* ── App theme toggle ─────────────────────────────────────────────────────── */
html.dark .app-theme-toggle {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-muted);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
html.dark .app-theme-toggle:hover { color: var(--dm-text); }
html.dark .hdr-theme-toggle { color: var(--dm-muted); }
html.dark .hdr-theme-toggle:hover { color: var(--dm-text); }

/* ── Public shell (PublicLayout) ──────────────────────────────────────────── */
html.dark .pub-shell { background: var(--dm-bg); }
html.dark .pub-head,
html.dark .pub-foot {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}
html.dark .pub-brand { color: var(--dm-text); }
html.dark .pub-foot { color: var(--dm-muted); }
html.dark .pub-foot-brand { color: var(--dm-text-2); }
html.dark .pub-theme-toggle { color: var(--dm-muted); }
html.dark .pub-theme-toggle:hover { background: var(--dm-surface-3); color: var(--dm-text); }

/* ── Sign-up tips ─────────────────────────────────────────────────────────── */
html.dark .qf-tips {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text-2);
}
html.dark .qf-tips-title,
html.dark .qf-tips-list b { color: var(--dm-text); }
html.dark .qf-tips-en { color: var(--dm-muted); }
html.dark .qf-tips-foot { border-top-color: var(--dm-border); }
html.dark .qf-tips-note {
  background: #383219;
  border-color: #6b5e2a;
  color: #e0c079;
}
html.dark .qf-tips-note .qf-tips-en { color: #c9a95e; }
html.dark .qf-tips a { color: #93b4da; }
html.dark .pub-signin-pop {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
}

/* ── Grid search row and pager ────────────────────────────────────────────── */
html.dark .qf-filter-row > th {
  background: var(--dm-surface-2);
  border-bottom-color: var(--dm-border);
}
html.dark .qf-grid-foot {
  background: var(--dm-surface-2);
  border-top-color: var(--dm-border);
}

/* ── Combo box ────────────────────────────────────────────────────────────── */
html.dark .qfc-menu {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
html.dark .qfc-opt { color: var(--dm-text-2); }
html.dark .qfc-opt:hover,
html.dark .qfc-opt.qfc-on { background: #4a4020; color: #f0dfa8; }
html.dark .qfc-caret { color: var(--dm-muted); }
html.dark .qfc-caret:hover:not(:disabled) { color: var(--dm-text); }

/* ── Category tree ────────────────────────────────────────────────────────── */
html.dark .qf-tree-row { color: var(--dm-text-2); }
html.dark .qf-tree-row:hover { background: var(--dm-surface-2); }
html.dark .qf-tree-row.qf-sel { background: #2b333f; color: #9cbce0; }
html.dark .qf-tree-count { background: var(--dm-surface-3); color: var(--dm-muted); }
html.dark .qf-tree-icon { color: #8fb1d8; }
html.dark .qf-tree-actions { color: var(--dm-muted); }
html.dark .qf-tree-actions i:hover { color: #9cbce0; }
html.dark .qf-warn-row > td { background: #383219; }
html.dark .qf-warn-text { color: #e0c079; }

/* ---------- Sign-up: menus and starter data ---------- */
html.dark .qf-tagmini { background: var(--qf-blue-soft); color: var(--qf-blue-ink); }
html.dark .qf-chippick,
html.dark .qf-catcard {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text-2);
}
html.dark .qf-chippick:hover,
html.dark .qf-catcard.qf-on { border-color: var(--qf-blue); }
html.dark .qf-chippick.qf-on {
  background: var(--qf-blue-faint);
  border-color: var(--qf-blue);
  color: var(--qf-blue-ink);
}

/* ---------- POS panels ----------
   The till bar and the two columns hardcoded #fff, which is why the basket's
   rows came out white here while the same qf-table on a goods receipt came out
   dark: the rows themselves are transparent, so they show whatever panel they
   sit on. Same surface as .qf-pane / .qf-fieldset, so a basket line and a
   counted-in line are now the same colour. */
html.dark .qf-pos-bar,
html.dark .qf-pos-pick,
html.dark .qf-pos-cart { background: var(--dm-surface); border-color: var(--dm-border); }

/* And the basket rows with them. The light rule paints them white; the night
   equivalent of "paper" is the panel surface, never an actual #fff. */
html.dark .qf-pos-lines .qf-table tbody tr { background: var(--dm-surface); }
html.dark .qf-pos-lines .qf-table tbody tr:hover { background: var(--qf-blue-faint); }

/* ---------- POS filters and the customer row ---------- */
html.dark .qf-pos-seg { background: var(--dm-surface-2); border-color: var(--dm-border); }
html.dark .qf-pos-segbtn { color: var(--dm-muted); }
html.dark .qf-pos-segbtn:hover { color: var(--dm-text); }
html.dark .qf-pos-segbtn.qf-on { background: var(--qf-blue); color: #22201d; }
html.dark .qf-pos-customer { background: var(--dm-surface-2); border-color: var(--dm-border); }
html.dark .qf-pos-fld > label { color: var(--dm-muted); }
html.dark .qf-pos-fld .qf-cell-input { background: var(--dm-surface); border-color: var(--dm-border); }

/* ── The AI assistant panel ───────────────────────────────────────────────────
   The panel is a popup the white-theme rules cannot reach: the light sheet uses
   #fff and gray-50 directly, so the dark theme restates the surfaces here, the
   same way it does for the other overlays. */
html.dark .qfc-panel      { background: var(--dm-surface); border-color: var(--dm-border); }
html.dark .qfc-head       { background: var(--dm-surface); border-bottom-color: var(--dm-border-soft); }
html.dark .qfc-title      { color: var(--dm-text); }
html.dark .qfc-sub        { color: var(--dm-muted); }
html.dark .qfc-brand      { color: var(--dm-text); }
html.dark .qfc-icon-btn   { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text-2); }
html.dark .qfc-icon-btn:hover { background: var(--dm-surface-4); }
html.dark .qfc-hero-art   { background: radial-gradient(circle at 30% 25%, var(--dm-surface-2), var(--dm-surface) 72%); }
html.dark .qfc-hero-title { color: var(--dm-text); }
html.dark .qfc-hero-sub   { color: var(--dm-muted); }
html.dark .qfc-body       { background: var(--dm-bg); }
html.dark .qfc-bot        { background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border-soft); }
html.dark .qfc-chip       { background: var(--dm-surface); color: var(--dm-text-2); border-color: var(--dm-border); }
html.dark .qfc-chip:hover { border-color: #6d9ef7; color: #9cbce0; background: var(--dm-surface-2); }
html.dark .qfc-foot       { background: var(--dm-surface); border-top-color: var(--dm-border-soft); }
html.dark .qfc-input      { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); }
html.dark .qfc-input:focus { background: var(--dm-surface-2); }
html.dark .qfc-send:disabled { background: var(--dm-surface-4); }
html.dark .qfc-typing span { background: var(--dm-muted); }
html.dark .qfc-note       { color: var(--dm-muted); }
html.dark .qfc-time       { color: var(--dm-muted); opacity: .8; }