/* =============================================================================
   crm-dark.css — Dark mode for every CRM page (amgcrm.in)
   -----------------------------------------------------------------------------
   Activated by  <html data-theme="dark">  (set before first paint by the inline
   script in each page head; toggled by assets/crm-theme.js). Nothing here
   applies in light / normal mode.

   Structure:
     1. Shared palette — remaps the design tokens every page already uses
        (style.css tokens + each tool page's own :root names).
     2. Global surfaces — body, generic cards, inputs, tables, scrollbars.
     3. Theme toggle button.
     4. Per-page overrides (one block per page) for the hard-coded light
        colours that live in each page's inline <style>.
   Specificity note: page styles are written as plain `.class` rules in the
   page head; `html[data-theme="dark"] .class` (0,1,1 + class) outranks them
   without !important, which is only used to beat inline style="" attrs.
   ============================================================================= */

/* ------------------------------------------------------------------------- */
/* 1. SHARED PALETTE                                                          */
/* ------------------------------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    /* style.css tokens (dashboard) */
    --ink:        #e6edf7;
    --ink-2:      #c3cee0;
    --muted:      #8fa0b8;
    --line:       #243147;
    --line-2:     #2f3e58;
    --bg:         #0a1020;
    --surface:    #121b2d;
    --surface-2:  #182338;
    --navy:       #0b1220;
    --navy-2:     #101d36;
    --brand:      #5b9cff;
    --brand-deep: #3b82f6;
    --accent:     #22d3ee;
    --danger:     #f87171;
    --success:    #4ade80;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .35);
    --sh-2: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -10px rgba(0, 0, 0, .6);
    --sh-3: 0 8px 20px rgba(0, 0, 0, .5), 0 32px 64px -18px rgba(0, 0, 0, .7);

    /* tool-page tokens (invoices / chat / documents / pitch / pricing) */
    --blue:  #5b9cff;
    --green: #4ade80;

    /* calculations.php tokens */
    --header-bg:    #121b2d;
    --inr-bg:       #3a3210;
    --inr-bg-hover: #4a4014;
    --inr-ink:      #fde68a;
    --inr-warn:     #fb923c;

    /* extra shared dark helpers for the per-page blocks below */
    --dk-bg:       #0a1020;
    --dk-surface:  #121b2d;
    --dk-surface2: #182338;
    --dk-surface3: #1f2b42;
    --dk-line:     #243147;
    --dk-line2:    #2f3e58;
    --dk-ink:      #e6edf7;
    --dk-ink2:     #c3cee0;
    --dk-muted:    #8fa0b8;
    --dk-input:    #0f172a;
    --dk-hover:    #1a2740;
    --dk-brand:    #5b9cff;
    --dk-brand-bg: rgba(91, 156, 255, .14);
    --dk-ok-bg:    rgba(74, 222, 128, .14);
    --dk-ok-ink:   #86efac;
    --dk-warn-bg:  rgba(251, 191, 36, .16);
    --dk-warn-ink: #fde68a;
    --dk-bad-bg:   rgba(248, 113, 113, .16);
    --dk-bad-ink:  #fca5a5;
}

/* ------------------------------------------------------------------------- */
/* 2. GLOBAL SURFACES                                                         */
/* ------------------------------------------------------------------------- */
html[data-theme="dark"] body {
    background: var(--dk-bg);
    color: var(--dk-ink);
}
html[data-theme="dark"] ::selection { background: rgba(91, 156, 255, .35); }

/* generic cards / panels used across pages */
html[data-theme="dark"] .card,
html[data-theme="dark"] .screen .card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3 { color: var(--dk-ink); }
html[data-theme="dark"] .sub,
html[data-theme="dark"] .card .sub,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .card small { color: var(--dk-muted); }
html[data-theme="dark"] hr { border-color: var(--dk-line); }

/* form controls — every page */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--dk-input);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6b7a92; }
html[data-theme="dark"] select option { background: var(--dk-input); color: var(--dk-ink); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { border-color: var(--dk-brand); box-shadow: 0 0 0 2px rgba(91, 156, 255, .25); }
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled { background-color: #0c1424; color: var(--dk-muted); }
html[data-theme="dark"] input[type="file"] { color: var(--dk-ink2); }
html[data-theme="dark"] label,
html[data-theme="dark"] .f > span { color: var(--dk-ink2); }

/* tables — cell dividers; stage-coloured rows keep their inline colours */
html[data-theme="dark"] table td { border-color: var(--dk-line); }
html[data-theme="dark"] table th { border-color: var(--dk-line2); }

/* code chips (placeholder names on the pitch page etc.) */
html[data-theme="dark"] code { background: var(--dk-brand-bg); color: #a5c4ff; }

/* scrollbars */
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #2f3e58; border: 2px solid transparent; background-clip: content-box; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #3f5075; border: 2px solid transparent; background-clip: content-box; }

/* ------------------------------------------------------------------------- */
/* 3. THEME TOGGLE — lives on the dark hero strips, so it is glass in BOTH    */
/*    modes (same recipe as the other hero capsules).                          */
/* ------------------------------------------------------------------------- */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(2, 8, 23, .24), inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.theme-toggle:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .10));
    border-color: rgba(255, 255, 255, .36);
    transform: translateY(-1px);
}
.theme-toggle:active { transform: scale(.96); }
.theme-toggle:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.theme-toggle .tt-ico { font-size: 13px; line-height: 1; }
/* inside the dashboard hero it also carries .btn.light — keep it compact */
.hero .menu .theme-toggle { padding: 6px 12px; }
/* login screen: centred pill below the card */
.theme-toggle--login {
    display: flex;
    margin: 14px auto 0;
    width: max-content;
    background: rgba(15, 23, 42, .55);
    border-color: rgba(255, 255, 255, .18);
}

/* printing from a dark page must still produce a light sheet */
@media print {
    html[data-theme="dark"] body,
    html[data-theme="dark"] .card { background: #fff !important; color: #000 !important; }
    .theme-toggle { display: none !important; }
}

/* ------------------------------------------------------------------------- */
/* 4. PER-PAGE OVERRIDES — appended below                                     */
/* ------------------------------------------------------------------------- */


/* ===================== BLOCK: shared-css ===================== */
/* =============================================================================
   DARK MODE — SHARED STYLESHEETS  (style.css  +  assets/crm-premium.css)
   -----------------------------------------------------------------------------
   Overrides for the hard-coded LIGHT colours in the two shared sheets only.
   Everything in style.css that is token-driven (--surface, --line, --ink ...)
   is already remapped by the palette block above and is NOT repeated here.
   Deliberately untouched: the navy hero / topbar strips and their glass
   capsules, the glass login card, the presence list, stage-coloured surfaces,
   the dark .bulk-action-bar (index.php).

   Cascade: style.css -> crm-premium.css -> crm-dark.css (last). Repeating the
   original selector behind  html[data-theme="dark"]  adds (0,1,1) and wins
   without !important. Reach: crm-dark.css is linked by all 8 pages, style.css
   only by index.php, so style.css-only classes are scoped to .app / .screen
   where a rule could otherwise land on another page's identically named class.
   Specificity reminder: the GLOBAL text-input rule in section 2 is (0,6,2) —
   any input override below that must beat it is written to (0,6,3)+.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   A. style.css
   --------------------------------------------------------------------------- */

/* A1. Secondary button (.btn.light).
   Generic rule stays low-specificity via :where(); it excludes the hero /
   topbar glass capsules, the glass login card, the dark bulk-action bar and
   the theme toggle (crm-theme.js adds .btn.light to it inside .hero .menu).
   crm-premium re-declares the button inside .screen .card (0,4,0) and
   body > .modal-bg (0,3,1) — those get explicit higher-specificity copies. */
html[data-theme="dark"] .btn.light:where(:not(.hero *, .topbar *, .login-card *, .bulk-action-bar *, .theme-toggle)),
html[data-theme="dark"] .screen .card .btn.light,
html[data-theme="dark"] body > .modal-bg .btn.light {
    background: var(--dk-surface2);
    color: var(--dk-ink);
    border: 1px solid var(--dk-line2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .btn.light:where(:not(.hero *, .topbar *, .login-card *, .bulk-action-bar *, .theme-toggle)):hover,
html[data-theme="dark"] .screen .card .btn.light:hover,
html[data-theme="dark"] body > .modal-bg .btn.light:hover {
    background: var(--dk-surface3);
    border-color: var(--dk-brand);
    color: var(--dk-brand);
    box-shadow: 0 5px 12px -4px rgba(0, 0, 0, .55);
}

/* A2. Primary button (.btn.dark) — INTENTIONAL DESIGN CHANGE.
   The navy gradients (#16233c->#0b1220 in style.css, #1e293b->#0f172a in
   crm-premium) are practically invisible on a #121b2d card, so content-area
   primaries become the brand-blue gradient the hero CTA / login button use.
   Hero, topbar, login card and bulk bar keep their own look. */
html[data-theme="dark"] .btn.dark:where(:not(.hero *, .topbar *, .login-card *, .bulk-action-bar *)),
html[data-theme="dark"] .screen .card .btn.dark,
html[data-theme="dark"] body > .modal-bg .btn.dark {
    background: linear-gradient(160deg, #3b82f6, #2563eb 80%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .btn.dark:where(:not(.hero *, .topbar *, .login-card *, .bulk-action-bar *)):hover,
html[data-theme="dark"] .screen .card .btn.dark:hover,
html[data-theme="dark"] body > .modal-bg .btn.dark:hover {
    background: linear-gradient(160deg, #60a5fa, #3b82f6 80%);
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* A3. Alerts — style.css (.alert.*) and crm-premium (.screen .alert.*) share
   the same light tints; both selectors get the tinted dark pairs. Only
   index.php uses these colour classes (other pages use .alert.is-err). */
html[data-theme="dark"] .alert.amber,
html[data-theme="dark"] .screen .alert.amber {
    background: var(--dk-warn-bg);
    color: var(--dk-warn-ink);
    border-color: rgba(251, 191, 36, .38);
}
html[data-theme="dark"] .alert.red,
html[data-theme="dark"] .screen .alert.red {
    background: var(--dk-bad-bg);
    color: var(--dk-bad-ink);
    border-color: rgba(248, 113, 113, .38);
}
html[data-theme="dark"] .alert.blue,
html[data-theme="dark"] .screen .alert.blue {
    background: var(--dk-brand-bg);
    color: #a5c4ff;
    border-color: rgba(91, 156, 255, .38);
}
/* the glass login card's own alert keeps its exact crm-premium look
   (the generic .alert.red rule above would otherwise out-rank it) */
html[data-theme="dark"] .login-card .alert.red {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
    color: #fca5a5;
}

/* A4. Small pills / status chips */
html[data-theme="dark"] .readonly-pill {
    background: var(--dk-surface3);
    color: var(--dk-ink2);
}
html[data-theme="dark"] .instant-save-status {
    background: var(--dk-surface3);
    color: var(--dk-muted);
}
html[data-theme="dark"] .instant-save-status.saving {
    background: var(--dk-warn-bg);
    color: var(--dk-warn-ink);
}
html[data-theme="dark"] .instant-save-status.saved {
    background: var(--dk-ok-bg);
    color: var(--dk-ok-ink);
}
html[data-theme="dark"] .instant-save-status.error {
    background: var(--dk-bad-bg);
    color: var(--dk-bad-ink);
}

/* A5. Hover tints that were pale red / pale blue / pale grey.
   .x is scoped to index.php's containers because chat.php styles its own
   .modal-head .x (transparent, white on hover) and must not be touched.
   (The lead drawer's .x is re-styled with !important in index.php's own
   <style> — that belongs to the index.php block.) */
html[data-theme="dark"] .app .x:hover,
html[data-theme="dark"] .screen .x:hover {
    background: var(--dk-bad-bg);
    border-color: rgba(248, 113, 113, .45);
    color: var(--dk-bad-ink);
}
html[data-theme="dark"] .quote-row button:hover {
    background: var(--dk-brand-bg);
    border-color: var(--dk-brand);
}
html[data-theme="dark"] .date-tree-toggle:hover {
    background: var(--dk-surface3);
}

/* A6. Table row hover — brightness(.955) is invisible on dark rows; brighten
   instead (still visible on the pale-yellow / grey stage rows). Scoped to
   the style.css containers so pitch / calculations tables (own hover rules)
   are not filtered. */
html[data-theme="dark"] .app tbody tr:hover,
html[data-theme="dark"] .screen tbody tr:hover {
    filter: brightness(1.12);
}

/* A7. Overlays — deepen the drawer / modal backdrops on a dark page */
html[data-theme="dark"] .drawer-bg,
html[data-theme="dark"] .modal-bg {
    background: rgba(2, 6, 23, .66);
}

/* A8. Firefox scrollbar colour on the scrolling containers (WebKit thumbs are
   already covered by the global *::-webkit-scrollbar-thumb rule). */
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .th-filter-menu {
    scrollbar-color: #2f3e58 transparent;
}

/* A9. Glass login card — restore its translucent inputs. The global input
   rule (0,6,2) flattens .login-card .input (0,2,0) to a solid #0f172a box;
   five repeated classes give (0,7,1) without !important. */
html[data-theme="dark"] .login-card .input.input.input.input.input {
    background-color: rgba(255, 255, 255, .05);
    border-color: rgba(148, 163, 184, .2);
    color: #ffffff;
}
html[data-theme="dark"] .login-card .input.input.input.input.input:focus {
    background-color: rgba(255, 255, 255, .08);
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .22);
}

/* ---------------------------------------------------------------------------
   B. assets/crm-premium.css — tool-page cards (admin / validation / logs)
   --------------------------------------------------------------------------- */

/* B1. Card shell — bg/border/text come from the global .card rule; only the
   light-tuned shadow and secondary text need attention. */
html[data-theme="dark"] .screen .card,
html[data-theme="dark"] .screen .grid2 > .card {
    box-shadow: var(--sh-1);
}
html[data-theme="dark"] .screen .card .text-muted,
html[data-theme="dark"] .screen .card p {
    color: var(--dk-muted);
}
html[data-theme="dark"] .screen .empty-state,
html[data-theme="dark"] .screen .card .hint {
    color: var(--dk-muted);
}

/* B2. Inputs inside tool cards — crm-premium sets #fafafa with higher
   specificity than the global select / textarea rules and turns the field
   WHITE on focus; both are neutralised here. Colour longhands only, so the
   select chevron image is never wiped. */
html[data-theme="dark"] .screen .card .input,
html[data-theme="dark"] .screen .card select.input,
html[data-theme="dark"] .screen .card textarea.input {
    background-color: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] .screen .card .input:focus,
html[data-theme="dark"] .screen .card select.input:focus,
html[data-theme="dark"] .screen .card textarea.input:focus {
    background-color: var(--dk-input);
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 3px rgba(91, 156, 255, .25);
}
html[data-theme="dark"] .screen .card input[type="file"].input {
    background-color: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink2);
}
html[data-theme="dark"] input[type="file"]::file-selector-button {
    background: var(--dk-surface3);
    color: var(--dk-ink);
    border: 1px solid var(--dk-line2);
    border-radius: 6px;
}
/* select chevron: the inline SVG stroke is #64748b — lift it for dark inputs */
html[data-theme="dark"] .screen .card select.input,
html[data-theme="dark"] .screen .card select.input:hover,
html[data-theme="dark"] .screen .card select.input:focus,
html[data-theme="dark"] .screen > form.card.filters select.input,
html[data-theme="dark"] .screen > form.card.filters select.input:hover,
html[data-theme="dark"] .screen > form.card.filters select.input:focus,
html[data-theme="dark"] body > .modal-bg .modal.lead-modal .lead-edit-grid select.input,
html[data-theme="dark"] body > .modal-bg .modal.lead-modal .lead-edit-grid select.input:hover,
html[data-theme="dark"] body > .modal-bg .modal.lead-modal .lead-edit-grid select.input:focus{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238fa0b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:11px 11px;
}

/* B3. User boxes (admin user list) */
html[data-theme="dark"] .screen .user-box {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .screen .user-box:hover {
    background: var(--dk-hover);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .screen .user-box b {
    color: var(--dk-ink);
}
html[data-theme="dark"] .screen .user-box > div {
    color: var(--dk-muted);
}

/* B4. Validation value chips (scoped to .screen — pitch.php has its own
   unrelated .chip) */
html[data-theme="dark"] .screen .chip {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}
html[data-theme="dark"] .screen .chip:hover,
html[data-theme="dark"] .screen .chips .chip:hover {
    background: var(--dk-surface3);
    border-color: var(--dk-line2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .screen .chip.readonly-chip {
    background: var(--dk-brand-bg);
    border-color: rgba(91, 156, 255, .35);
}
html[data-theme="dark"] .screen .chip .readonly-pill {
    background: rgba(91, 156, 255, .22);
    color: #a5c4ff;
}

/* B5. Logs filter card */
html[data-theme="dark"] .screen > form.card.filters {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    box-shadow: var(--sh-1);
}
html[data-theme="dark"] .screen > form.card.filters label > span {
    color: var(--dk-muted);
}
html[data-theme="dark"] .screen > form.card.filters select.input {
    background-color: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] .screen > form.card.filters select.input:focus {
    background-color: var(--dk-input);
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 3px rgba(91, 156, 255, .25);
}

/* B6. Tables on logs / login-logs (sticky light header, light dividers) */
html[data-theme="dark"] .screen .card .table-wrap {
    border-top-color: var(--dk-line);
}
html[data-theme="dark"] .screen .card table thead th {
    background: var(--dk-surface3);
    color: var(--dk-ink2);
    border-bottom-color: var(--dk-line2);
}
html[data-theme="dark"] .screen .card table tbody td {
    color: var(--dk-ink2);
    border-bottom-color: var(--dk-line);
}
html[data-theme="dark"] .screen .card table tbody tr:hover {
    background: var(--dk-hover);
}

/* ---------------------------------------------------------------------------
   C. assets/crm-premium.css — modals (Add / Edit Lead, delete, move month, undo)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] body > .modal-bg {
    background: rgba(2, 6, 23, .78);
}
html[data-theme="dark"] body > .modal-bg .modal {
    background: var(--dk-surface);
    color: var(--dk-ink);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 0 0 1px var(--dk-line),
        0 32px 80px -20px rgba(0, 0, 0, .7),
        0 12px 24px -8px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] body > .modal-bg .modal-head {
    border-bottom-color: var(--dk-line);
}
html[data-theme="dark"] body > .modal-bg .modal-head h2 {
    color: var(--dk-ink);
}
html[data-theme="dark"] body > .modal-bg .modal-head .x {
    background: var(--dk-surface2);
    border-color: var(--dk-line2);
    color: var(--dk-ink2);
}
html[data-theme="dark"] body > .modal-bg .modal-head .x:hover {
    background: var(--dk-bad-bg);
    border-color: rgba(248, 113, 113, .45);
    color: var(--dk-bad-ink);
}
html[data-theme="dark"] body > .modal-bg .modal p {
    color: var(--dk-ink2);
}
html[data-theme="dark"] body > .modal-bg .modal .soft-box {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}
html[data-theme="dark"] body > .modal-bg .modal .input,
html[data-theme="dark"] body > .modal-bg .modal select.input,
html[data-theme="dark"] body > .modal-bg .modal textarea.input {
    background-color: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] body > .modal-bg .modal .input:focus,
html[data-theme="dark"] body > .modal-bg .modal select.input:focus,
html[data-theme="dark"] body > .modal-bg .modal textarea.input:focus {
    background-color: var(--dk-input);
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 3px rgba(91, 156, 255, .25);
}
html[data-theme="dark"] body > .modal-bg .modal-actions {
    border-top-color: var(--dk-line);
}
html[data-theme="dark"] body > .modal-bg .modal.lead-modal .lead-edit-grid label > span {
    color: var(--dk-muted);
}
/* read-only continent field keeps its "locked" look — (0,6,3) so it beats the
   global text-input rule (0,6,2); the markup is <input readonly class="input
   continent-input"> */
html[data-theme="dark"] body > .modal-bg .modal.lead-modal input.continent-input[readonly] {
    background-color: #0c1424;
    color: var(--dk-muted);
}
html[data-theme="dark"] body > .modal-bg .modal .money-input > span {
    color: var(--dk-muted);
}
html[data-theme="dark"] body > .modal-bg .modal .quote-row button {
    background: var(--dk-surface2);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] body > .modal-bg .modal .quote-row button:hover {
    background: var(--dk-surface3);
    border-color: var(--dk-brand);
}
html[data-theme="dark"] body > .modal-bg .modal .quote-row .other-currency {
    background-color: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] body > .modal-bg .modal #duplicateLeadBox.alert {
    background: var(--dk-warn-bg);
    color: var(--dk-warn-ink);
    border-color: rgba(251, 191, 36, .38);
}
/* searchable autocomplete popover (shell only — its option rows are styled in
   the dashboard page's own <style>) */
html[data-theme="dark"] body > .modal-bg .modal .searchable-select-options {
    background: var(--dk-surface3);
    border-color: var(--dk-line2);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, .65);
}

/* ---------------------------------------------------------------------------
   D. assets/crm-premium.css — floating chat panel
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .chat-panel {
    background: var(--dk-surface);
    border-color: var(--dk-line2);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
}
html[data-theme="dark"] .chat-head {
    background: var(--dk-surface2);
    border-bottom-color: var(--dk-line);
}
html[data-theme="dark"] .chat-peer {
    color: var(--dk-ink);
}
html[data-theme="dark"] .chat-close {
    color: var(--dk-muted);
}
html[data-theme="dark"] .chat-close:hover {
    background: var(--dk-surface3);
    color: var(--dk-ink);
}
html[data-theme="dark"] .chat-messages {
    background: var(--dk-bg);
}
html[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb {
    background: var(--dk-line2);
}
html[data-theme="dark"] .chat-msg .chat-bubble {
    background: var(--dk-surface3);
    color: var(--dk-ink);
}
/* own messages stay brand-blue (re-stated: the generic bubble rule above is
   (0,3,1) and would otherwise flatten crm-premium's (0,3,0) is-mine rule) */
html[data-theme="dark"] .chat-msg.is-mine .chat-bubble {
    background: #2563eb;
    color: #ffffff;
}
html[data-theme="dark"] .chat-msg .chat-time,
html[data-theme="dark"] .chat-empty {
    color: var(--dk-muted);
}
html[data-theme="dark"] .chat-compose {
    background: var(--dk-surface);
    border-top-color: var(--dk-line);
}
/* .chat-input is a <textarea>: base colours already come from the global
   textarea rule; the WHITE focus background (0,2,0) still has to be beaten */
html[data-theme="dark"] .chat-input {
    background-color: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] .chat-input:focus {
    background-color: var(--dk-input);
    border-color: var(--dk-brand);
}
/* send button was #0f172a on white — invisible on a dark panel */
html[data-theme="dark"] .chat-send {
    background: var(--dk-brand);
    color: #ffffff;
}
html[data-theme="dark"] .chat-send:hover {
    background: #3b82f6;
}
html[data-theme="dark"] .chat-send:disabled {
    background: var(--dk-surface3);
    color: var(--dk-muted);
}

/* ---------------------------------------------------------------------------
   E. assets/crm-premium.css — role & permissions editor (admin page)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .role-editor {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .role-editor summary {
    color: var(--dk-ink2);
}
html[data-theme="dark"] .role-pill.role-user {
    background: var(--dk-surface3);
    color: var(--dk-ink2);
}
html[data-theme="dark"] .role-pill.role-manager {
    background: var(--dk-brand-bg);
    color: #a5c4ff;
}
html[data-theme="dark"] .role-pill.role-admin {
    background: var(--dk-ok-bg);
    color: var(--dk-ok-ink);
}
html[data-theme="dark"] .role-form {
    border-top-color: var(--dk-line);
}
html[data-theme="dark"] .role-select-row {
    color: var(--dk-ink2);
}
html[data-theme="dark"] .perm-item {
    background: var(--dk-surface);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .perm-item:hover {
    border-color: var(--dk-brand);
}
html[data-theme="dark"] .perm-item b {
    color: var(--dk-ink);
}
html[data-theme="dark"] .perm-item small {
    color: var(--dk-muted);
}


/* ===================== BLOCK: index-main ===================== */
/* =========================================================================
   index.php — MAIN DASHBOARD ("Monthly CRM Lead Flow") — dark overrides
   -------------------------------------------------------------------------
   Covers the dashboard document only: page cards, filters row, stage cards,
   lead table, column-filter menus, filter summary, pagination, lead drawer,
   modals (Add/Edit/Delete/Move/Undo), chat panel, bell panel. The hero,
   the sticky thead and the bulk-action bar are already dark and untouched.
   Load order is crm-premium.css -> crm-dark.css -> the page's inline
   <style>, so equal-specificity ties go to the page; every rule here is
   written to outrank the page rule it replaces. !important is used only
   where the page itself uses !important or where an inline style=""
   attribute has to be beaten.
   ========================================================================= */

/* ---- 1. PAGE CHROME & CARDS -------------------------------------------- */
html[data-theme="dark"] .app .card{
    box-shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.6);
}
/* Firefox scrollbar colour (webkit thumbs are handled by the global rule) */
html[data-theme="dark"] .app .table-wrap,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] body > .modal-bg .modal{ scrollbar-color:var(--dk-line2) transparent; }
/* flash message under the hero (style.css .alert.* hard-codes light tints) */
html[data-theme="dark"] .app .alert.blue{ background:var(--dk-brand-bg); color:#a5c4ff; border-color:rgba(91,156,255,.35); }
html[data-theme="dark"] .app .alert.amber{ background:var(--dk-warn-bg); color:var(--dk-warn-ink); border-color:rgba(251,191,36,.4); }
html[data-theme="dark"] .app .alert.red{ background:var(--dk-bad-bg); color:var(--dk-bad-ink); border-color:rgba(248,113,113,.4); }

/* ---- 2. FILTERS CARD (Month / Search / bell / Stage) ------------------- */
html[data-theme="dark"] .app > .card.filters{
    background:var(--dk-surface);
    border-color:var(--dk-line);
    box-shadow:0 12px 24px -16px rgba(0,0,0,.65), 0 2px 4px -1px rgba(0,0,0,.4);
}
html[data-theme="dark"] .app > .card.filters label > span{ color:var(--dk-muted); }
/* the two <select class="input"> controls: the page rule (0,4,1) outranks the
   global select rule (0,1,2). background-color (not the shorthand) keeps the
   chevron / magnifier background-image alive. */
html[data-theme="dark"] .app > .card.filters .input,
html[data-theme="dark"] .app > .card.filters select.input{
    background-color:var(--dk-input);
    color:var(--dk-ink);
    border-color:var(--dk-line2);
}
/* The page's :hover/:focus rules use the `background` SHORTHAND, which resets
   background-repeat to "repeat" — so the chevron tiled across the whole box.
   Pin every background longhand in ALL states. */
html[data-theme="dark"] .app > .card.filters select.input,
html[data-theme="dark"] .app > .card.filters select.input:hover,
html[data-theme="dark"] .app > .card.filters select.input:focus{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238fa0b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:11px 11px;
}
html[data-theme="dark"] .app > .card.filters .input:hover,
html[data-theme="dark"] .app > .card.filters select.input:hover{
    background-color:var(--dk-hover);
    border-color:#3f5075;
}
html[data-theme="dark"] .app > .card.filters .input:focus,
html[data-theme="dark"] .app > .card.filters select.input:focus{
    background-color:var(--dk-input);
    border-color:var(--dk-brand);
    box-shadow:0 0 0 3px rgba(91,156,255,.25);
}
html[data-theme="dark"] .search-clear{ color:var(--dk-muted); }
html[data-theme="dark"] .search-clear:hover{ background:var(--dk-hover); color:var(--dk-ink); }
/* bell button that sits in the filters row */
html[data-theme="dark"] #bellBtn{ background:var(--dk-input); border-color:var(--dk-line2); }
html[data-theme="dark"] #bellBtn:hover{ background:var(--dk-hover); border-color:#3f5075; }
html[data-theme="dark"] .bell-badge{ border-color:var(--dk-surface); }

/* ---- 3. STAGE CARDS ---------------------------------------------------- */
html[data-theme="dark"] .app .stage-card{
    border-color:rgba(255,255,255,.10);
    box-shadow:0 1px 0 0 rgba(255,255,255,.14) inset,
               0 0 0 1px rgba(255,255,255,.05) inset,
               0 6px 16px -6px rgba(0,0,0,.6),
               0 1px 2px rgba(0,0,0,.4);
}
/* tone the liquid-glass film down so dark cards don't get a white bloom */
html[data-theme="dark"] .app .stage-card::before{
    background:radial-gradient(120% 100% at 88% -20%, rgba(255,255,255,.14), transparent 55%),
               linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.22) 100%);
}
html[data-theme="dark"] .app .stage-card:hover{
    border-color:rgba(255,255,255,.18);
    box-shadow:0 1px 0 0 rgba(255,255,255,.18) inset,
               0 0 0 1px rgba(255,255,255,.07) inset,
               0 14px 26px -10px rgba(0,0,0,.7),
               0 2px 4px rgba(0,0,0,.4);
}
html[data-theme="dark"] .app .stage-grid.stage-grid-compact .stage-card{ box-shadow:0 4px 12px rgba(0,0,0,.45); }
html[data-theme="dark"] .app .stage-grid.stage-grid-compact .stage-card:hover{ box-shadow:0 10px 22px rgba(0,0,0,.6); }
/* active ring: page-bg gap + brand halo instead of white + blue */
html[data-theme="dark"] .app .stage-grid .stage-card.is-active,
html[data-theme="dark"] .app .stage-grid.stage-grid-compact .stage-card.is-active{
    box-shadow:0 0 0 2px var(--dk-bg), 0 0 0 5px var(--dk-brand), 0 14px 28px rgba(0,0,0,.55);
}
/* Light stage colours are set inline by PHP ($STAGES) — All (#ffffff),
   Following Up (#fff), Conversation (#e8e8e8), Sample Asked (#fff2cc).
   Re-tint them as dark surfaces with light text; every other stage keeps
   its colour. The "#fff;" form (with semicolon) is deliberate so it does
   not also match "#fff2cc". */
html[data-theme="dark"] .stage-card[style*="background:#ffffff"],
html[data-theme="dark"] .stage-card[style*="background:#fff;"]{
    background:var(--dk-surface2) !important;
    color:var(--dk-ink) !important;
}
html[data-theme="dark"] .stage-card[style*="background:#e8e8e8"]{
    background:#263042 !important;
    color:var(--dk-ink) !important;
}
html[data-theme="dark"] .stage-card[style*="background:#fff2cc"]{
    background:#3b3312 !important;
    color:#fde68a !important;
}

/* ---- 4. LEAD TABLE ----------------------------------------------------- */
/* Sl.No header was slate-600 on the navy thead — lift it */
html[data-theme="dark"] #leadListTable th.sl-no-th{ color:var(--dk-muted); }
/* row hover: brightness(.955) is invisible on dark rows — brighten instead */
html[data-theme="dark"] #leadListTable tbody tr:hover{ filter:brightness(1.18); }
/* light stage rows (inline style from renderLeadRow, also used by the
   global-search AJAX rows) -> dark surfaces */
html[data-theme="dark"] tr.lead-list-row[style*="background:#fff;"],
html[data-theme="dark"] tr.lead-list-row[style*="background:#ffffff"],
html[data-theme="dark"] tr.lead-list-row[style*="background:#FFFFFF"]{
    background:var(--dk-surface) !important;
    color:var(--dk-ink) !important;
}
html[data-theme="dark"] tr.lead-list-row[style*="background:#e8e8e8"]{
    background:#1f2838 !important;
    color:var(--dk-ink) !important;
}
html[data-theme="dark"] tr.lead-list-row[style*="background:#fff2cc"]{
    background:#3b3312 !important;
    color:#fde68a !important;
}
/* selection states — must outrank the inline-style rules above (they use
   the #leadListTable id for that), and the page's own !important rules */
html[data-theme="dark"] #leadListTable tr.lead-list-row.is-active{
    background:#173058 !important;
    color:#dbe7ff !important;
    box-shadow:inset 4px 0 0 0 var(--dk-brand);
}
html[data-theme="dark"] #leadListTable tr.lead-list-row.is-multi-selected{
    background:#3a2f0e !important;
    color:#fde68a !important;
    box-shadow:inset 4px 0 0 0 #f59e0b;
}
html[data-theme="dark"] #leadListTable tr.lead-list-row.is-multi-cursor{ box-shadow:inset 6px 0 0 0 #fbbf24; }
/* rework flag: brighter red so it stays readable on dark rows */
html[data-theme="dark"] #leadListTable tr.lead-list-row.is-rework td,
html[data-theme="dark"] #leadListTable tr.lead-list-row.is-rework td a{ color:#f87171 !important; }
/* "Lead given by" pills (inline style from displayLeadField) */
html[data-theme="dark"] span[style*="background:#dbeafe"]{
    background:rgba(91,156,255,.22) !important;
    color:#a5c4ff !important;
}
html[data-theme="dark"] span[style*="background:#fce7f3"]{
    background:rgba(244,114,182,.22) !important;
    color:#f9a8d4 !important;
}
/* copy buttons: translucent chip that inherits the row's text colour */
html[data-theme="dark"] .copy-value-btn{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.22);
    color:inherit;
    box-shadow:0 1px 3px rgba(0,0,0,.4);
}
html[data-theme="dark"] .copy-value-btn:hover{ background:rgba(255,255,255,.22); }
html[data-theme="dark"] .drawer-head .copy-value-btn,
html[data-theme="dark"] .detail-grid .copy-value-btn{
    background:var(--dk-surface3);
    border-color:var(--dk-line2);
    color:var(--dk-ink);
}
html[data-theme="dark"] .drawer-head .copy-value-btn:hover,
html[data-theme="dark"] .detail-grid .copy-value-btn:hover{ background:var(--dk-hover); }
html[data-theme="dark"] .copy-value-btn.copied{
    background:var(--dk-ok-bg);
    border-color:rgba(74,222,128,.5);
    color:var(--dk-ok-ink);
}
/* live-cursor initials badge ring (its fill colour is set per user by JS) */
html[data-theme="dark"] .row-cursor-badge{ box-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 0 1.5px rgba(255,255,255,.6); }

/* ---- 5. COLUMN FILTER MENUS (Excel-style) ------------------------------ */
html[data-theme="dark"] .th-filter-menu{
    background:var(--dk-surface3);
    color:var(--dk-ink);
    border-color:var(--dk-line2);
    box-shadow:0 24px 60px -12px rgba(0,0,0,.75), 0 8px 16px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="dark"] .th-filter-menu-title{ color:var(--dk-muted); }
html[data-theme="dark"] .th-filter-menu-actions,
html[data-theme="dark"] .th-quick-date-row{ border-bottom-color:var(--dk-line2); }
/* page uses !important on these buttons */
html[data-theme="dark"] .th-filter-menu-actions button{
    background:var(--dk-surface2) !important;
    color:var(--dk-ink2) !important;
    border-color:var(--dk-line2) !important;
}
html[data-theme="dark"] .th-filter-menu-actions button:hover{
    background:var(--dk-brand-bg) !important;
    color:#a5c4ff !important;
    border-color:rgba(91,156,255,.45) !important;
}
html[data-theme="dark"] .th-filter-menu-actions .filter-apply-btn{
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}
html[data-theme="dark"] .th-filter-menu-actions .filter-apply-btn:hover{
    background:#1d4ed8 !important;
    color:#ffffff !important;
    border-color:#1d4ed8 !important;
}
/* search box inside the menu: focus ring in brand blue (bg comes from the
   global input rule) */
html[data-theme="dark"] .th-filter-menu input[type="text"]:focus{
    background-color:var(--dk-input);
    border-color:var(--dk-brand);
    box-shadow:0 0 0 3px rgba(91,156,255,.25);
}
html[data-theme="dark"] .th-filter-menu label{ color:var(--dk-ink); }
html[data-theme="dark"] .th-filter-menu label:hover{ background:var(--dk-hover); }
html[data-theme="dark"] .th-filter-option{ color:var(--dk-ink); }
html[data-theme="dark"] .th-filter-option:hover{ background:var(--dk-hover); }
html[data-theme="dark"] .th-filter-option.date-year{ background:var(--dk-surface2); }
html[data-theme="dark"] .th-filter-empty{ color:var(--dk-muted); background:var(--dk-surface2); }
/* quick-date preset pills */
html[data-theme="dark"] .th-quick-date-row button{
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.35);
    color:#a5c4ff;
}
html[data-theme="dark"] .th-quick-date-row button:hover{
    background:rgba(91,156,255,.24);
    border-color:rgba(91,156,255,.55);
}
html[data-theme="dark"] .th-quick-date-row button:active{ background:rgba(91,156,255,.32); }
html[data-theme="dark"] .th-quick-date-row button.is-active{ background:#1d4ed8; border-color:#1d4ed8; color:#ffffff; }
html[data-theme="dark"] .th-quick-date-row button.is-active:hover{ background:#1e40af; border-color:#1e40af; }
/* date tree +/- toggles */
html[data-theme="dark"] .date-tree-toggle{
    background:var(--dk-surface2);
    border-color:var(--dk-line2);
    color:var(--dk-ink);
}
html[data-theme="dark"] .date-tree-toggle:hover{ background:var(--dk-hover); }
/* searchable autocomplete dropdown (Country / Lead given by in the lead modal) */
html[data-theme="dark"] .searchable-select-options,
html[data-theme="dark"] body > .modal-bg .modal .searchable-select-options{
    background:var(--dk-surface3);
    border-color:var(--dk-line2);
    box-shadow:0 12px 28px rgba(0,0,0,.6);
}
html[data-theme="dark"] .searchable-select-option{ color:var(--dk-ink); }
html[data-theme="dark"] .searchable-select-option:hover,
html[data-theme="dark"] .searchable-select-option.is-highlighted{
    background:rgba(91,156,255,.22);
    color:var(--dk-ink);
}
html[data-theme="dark"] .searchable-select-option strong{ color:#7db3ff; }
html[data-theme="dark"] .searchable-select-option.is-highlighted strong{ color:#a5c4ff; }
html[data-theme="dark"] .searchable-select-empty{ color:var(--dk-muted); }

/* ---- 6. FILTER SUMMARY BAR --------------------------------------------- */
html[data-theme="dark"] .lead-filter-summary{
    background:var(--dk-brand-bg);
    color:#a5c4ff;
    border-color:rgba(91,156,255,.35);
}
html[data-theme="dark"] .lead-filter-summary button{
    background:var(--dk-surface3);
    color:#a5c4ff;
    border-color:rgba(91,156,255,.5);
}

/* ---- 7. PAGINATION BAR ------------------------------------------------- */
html[data-theme="dark"] .lead-pagination{ background:var(--dk-surface); border-top-color:var(--dk-line); }
html[data-theme="dark"] .lead-pagination .page-arrow{
    background:var(--dk-surface2);
    border-color:var(--dk-line2);
    color:var(--dk-ink2);
}
html[data-theme="dark"] .lead-pagination .page-arrow:hover{
    background:var(--dk-hover);
    border-color:#3f5075;
    color:var(--dk-ink);
}
/* <select> — the page rule (0,2,1) outranks the global select rule (0,1,2) */
html[data-theme="dark"] .lead-pagination .page-select,
html[data-theme="dark"] .lead-pagination .page-select:hover,
html[data-theme="dark"] .lead-pagination .page-select:focus{
    background-color:var(--dk-surface2);
    color:var(--dk-ink);
    border-color:var(--dk-line2);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' stroke='%238fa0b8' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position:right 6px center;
    background-size:11px 11px;
}
html[data-theme="dark"] .lead-pagination .page-select:hover{ border-color:#3f5075; }
html[data-theme="dark"] .lead-pagination .page-select:focus{ border-color:var(--dk-brand); box-shadow:0 0 0 3px rgba(91,156,255,.25); }
html[data-theme="dark"] .lead-pagination .page-range,
html[data-theme="dark"] .page-range-muted{ color:var(--dk-muted); }
html[data-theme="dark"] .lead-pagination .page-show-all{
    background:var(--dk-surface2);
    border-color:var(--dk-line2);
    color:var(--dk-ink2);
}
html[data-theme="dark"] .lead-pagination .page-show-all:hover{
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.45);
    color:#a5c4ff;
}

/* ---- 8. LEAD DRAWER ---------------------------------------------------- */
/* shell — page uses !important here */
html[data-theme="dark"] aside.drawer{
    background:var(--dk-surface) !important;
    border-left-color:var(--dk-line) !important;
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.75), -8px 0 16px -4px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] aside.drawer .drawer-head{ border-bottom-color:var(--dk-line); }
html[data-theme="dark"] aside.drawer .drawer-head h2{ color:var(--dk-ink) !important; }
html[data-theme="dark"] aside.drawer .drawer-head p{ color:var(--dk-muted) !important; }
html[data-theme="dark"] aside.drawer .drawer-head .x{
    background:var(--dk-surface2) !important;
    border-color:var(--dk-line2) !important;
    color:var(--dk-ink2) !important;
}
html[data-theme="dark"] aside.drawer .drawer-head .x:hover{
    background:var(--dk-bad-bg) !important;
    border-color:rgba(248,113,113,.5) !important;
    color:var(--dk-bad-ink) !important;
}
/* stage switcher buttons — colours come inline per stage; re-tint the light ones */
html[data-theme="dark"] aside.drawer .drawer-stages button{ border-color:rgba(255,255,255,.14); }
html[data-theme="dark"] aside.drawer .drawer-stages button:hover{ border-color:var(--dk-brand); }
html[data-theme="dark"] aside.drawer .drawer-stages button[style*="background:#fff;"]{
    background:var(--dk-surface2) !important;
    color:var(--dk-ink) !important;
}
html[data-theme="dark"] aside.drawer .drawer-stages button[style*="background:#e8e8e8"]{
    background:#263042 !important;
    color:var(--dk-ink) !important;
}
html[data-theme="dark"] aside.drawer .drawer-stages button[style*="background:#fff2cc"]{
    background:#3b3312 !important;
    color:#fde68a !important;
}
/* rework toggle */
html[data-theme="dark"] aside.drawer .rework-toggle{
    color:var(--dk-bad-ink);
    background:var(--dk-bad-bg);
    border-color:rgba(248,113,113,.4);
}
html[data-theme="dark"] aside.drawer .rework-status{ color:var(--dk-ok-ink); }
/* BD Comments / Q&A panel */
html[data-theme="dark"] aside.drawer .drawer-comment-panel{
    background:var(--dk-surface2) !important;
    border-color:var(--dk-line) !important;
}
html[data-theme="dark"] aside.drawer .drawer-comment-panel b{ color:var(--dk-muted) !important; }
/* invoice chips */
html[data-theme="dark"] aside.drawer .drawer-invoices > b{ color:var(--dk-muted); }
html[data-theme="dark"] aside.drawer .drawer-inv-chip{
    background:var(--dk-warn-bg);
    border-color:rgba(251,191,36,.4);
    color:var(--dk-warn-ink);
}
html[data-theme="dark"] aside.drawer .drawer-inv-chip span{ color:#fcd34d; }
html[data-theme="dark"] aside.drawer .drawer-inv-chip em{ background:#b45309; color:#fff7ed; }
html[data-theme="dark"] aside.drawer .drawer-inv-chip.paid{
    background:var(--dk-ok-bg);
    border-color:rgba(74,222,128,.4);
    color:var(--dk-ok-ink);
}
html[data-theme="dark"] aside.drawer .drawer-inv-chip.paid span{ color:var(--dk-ok-ink); }
html[data-theme="dark"] aside.drawer .drawer-inv-chip.drafting{
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.5);
    color:#a5c4ff;
}
html[data-theme="dark"] aside.drawer .drawer-inv-chip:hover{ filter:brightness(1.15); }
/* attachments block */
html[data-theme="dark"] aside.drawer .drawer-attachments{ background:var(--dk-surface2); border-color:var(--dk-line); }
html[data-theme="dark"] .drawer-attachments-title-row b{ color:var(--dk-muted) !important; }
html[data-theme="dark"] .drawer-attachments-hint{ color:var(--dk-muted); }
html[data-theme="dark"] .attachment-slot{ background:var(--dk-surface); border-color:var(--dk-line2); }
html[data-theme="dark"] .attachment-head{ color:var(--dk-ink); }
html[data-theme="dark"] .attachment-file{
    color:var(--dk-ink);
    background:var(--dk-input);
    border-color:var(--dk-line2);
}
html[data-theme="dark"] .attachment-file.attachment-empty{ color:var(--dk-muted); }
html[data-theme="dark"] .attachment-form{ border-top-color:var(--dk-line2); }
/* file chooser text: page rule ties the global input[type=file] rule at
   (0,2,1) and loads later, so it needs its own override */
html[data-theme="dark"] .attachment-form input[type="file"]{ color:var(--dk-ink2); }
/* detail tiles (page uses !important) */
html[data-theme="dark"] aside.drawer .detail-grid > *{
    background:var(--dk-surface2) !important;
    border-color:var(--dk-line) !important;
}
html[data-theme="dark"] aside.drawer .detail-grid > *:hover{
    background:var(--dk-hover) !important;
    border-color:var(--dk-line2) !important;
}
html[data-theme="dark"] aside.drawer .detail-grid > div span{ color:var(--dk-muted); }
html[data-theme="dark"] aside.drawer .detail-tile-label{ color:var(--dk-muted) !important; }
html[data-theme="dark"] aside.drawer .detail-tile-value{ color:var(--dk-ink) !important; }
html[data-theme="dark"] aside.drawer .detail-grid .detail-money-input > span{ color:var(--dk-muted); }
/* inline-editable tile inputs / Pay Mode select (page: white !important).
   background-color, not the shorthand, so the select keeps its arrows. */
html[data-theme="dark"] aside.drawer .instant-edit-field input,
html[data-theme="dark"] aside.drawer .instant-edit-field select,
html[data-theme="dark"] aside.drawer .detail-tile-input{
    background-color:var(--dk-input) !important;
    color:var(--dk-ink) !important;
}
html[data-theme="dark"] aside.drawer .detail-tile-input:disabled{
    background-color:#0c1424 !important;
    color:var(--dk-muted) !important;
}
/* $ / € / £ currency buttons beside Quoted Price */
html[data-theme="dark"] aside.drawer .detail-grid .qcurr-btn{
    background:var(--dk-surface3);
    border-color:var(--dk-line2);
    color:var(--dk-ink);
}
html[data-theme="dark"] aside.drawer .detail-grid .qcurr-btn:hover:not(:disabled){
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.5);
    color:#a5c4ff;
}
html[data-theme="dark"] aside.drawer .detail-grid .qcurr-btn:active:not(:disabled){ background:rgba(91,156,255,.3); }
/* auto-save status pill (also "Locked for this month") */
html[data-theme="dark"] .instant-save-status{ background:var(--dk-surface3); color:var(--dk-muted); }
html[data-theme="dark"] .instant-save-status.saving{ background:var(--dk-warn-bg); color:var(--dk-warn-ink); }
html[data-theme="dark"] .instant-save-status.saved{ background:var(--dk-ok-bg); color:var(--dk-ok-ink); }
html[data-theme="dark"] .instant-save-status.error{ background:var(--dk-bad-bg); color:var(--dk-bad-ink); }

/* ---- 9. BUTTONS (drawer + modals) -------------------------------------- */
/* style.css .btn.light hard-codes navy text; scoped to the drawer so the
   hero pills / bulk bar / other documents are untouched */
html[data-theme="dark"] .drawer .btn.light{
    background:var(--dk-surface2);
    color:var(--dk-ink);
    border-color:var(--dk-line2);
}
html[data-theme="dark"] .drawer .btn.light:hover{
    background:var(--dk-hover);
    border-color:var(--dk-brand);
    color:#a5c4ff;
}
/* navy-gradient .btn.dark vanishes on dark surfaces — use the brand gradient */
html[data-theme="dark"] .drawer .btn.dark,
html[data-theme="dark"] body > .modal-bg .btn.dark{
    background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color:#ffffff;
    border:0;
    box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 4px 10px -2px rgba(37,99,235,.45);
}
html[data-theme="dark"] .drawer .btn.dark:hover,
html[data-theme="dark"] body > .modal-bg .btn.dark:hover{
    background:linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}
html[data-theme="dark"] body > .modal-bg .btn.light{
    background:var(--dk-surface2);
    color:var(--dk-ink);
    border-color:var(--dk-line2);
}
html[data-theme="dark"] body > .modal-bg .btn.light:hover{
    background:var(--dk-hover);
    border-color:#3f5075;
}

/* ---- 10. MODALS (Add/Edit Lead, Delete, Move, Undo) -------------------- */
html[data-theme="dark"] body > .modal-bg .modal{
    background:var(--dk-surface);
    color:var(--dk-ink);
    box-shadow:0 0 0 1px var(--dk-line2), 0 32px 80px -20px rgba(0,0,0,.8), 0 12px 24px -8px rgba(0,0,0,.5);
}
html[data-theme="dark"] body > .modal-bg .modal-head{ border-bottom-color:var(--dk-line); }
html[data-theme="dark"] body > .modal-bg .modal-head h2{ color:var(--dk-ink); }
html[data-theme="dark"] body > .modal-bg .modal-head .x{
    color:var(--dk-ink2);
    background:var(--dk-surface2);
    border-color:var(--dk-line2);
}
html[data-theme="dark"] body > .modal-bg .modal-head .x:hover{
    background:var(--dk-bad-bg);
    border-color:rgba(248,113,113,.5);
    color:var(--dk-bad-ink);
}
html[data-theme="dark"] body > .modal-bg .modal p{ color:var(--dk-ink2); }
html[data-theme="dark"] body > .modal-bg .modal .soft-box{
    background:var(--dk-surface2);
    border-color:var(--dk-line);
    color:var(--dk-ink);
}
/* selects / textareas in modals outrank the global input rule */
html[data-theme="dark"] body > .modal-bg .modal select.input,
html[data-theme="dark"] body > .modal-bg .modal textarea.input{
    background-color:var(--dk-input);
    color:var(--dk-ink);
    border-color:var(--dk-line2);
}
html[data-theme="dark"] body > .modal-bg .modal .input:focus,
html[data-theme="dark"] body > .modal-bg .modal select.input:focus,
html[data-theme="dark"] body > .modal-bg .modal textarea.input:focus{
    background-color:var(--dk-input);
    border-color:var(--dk-brand);
    box-shadow:0 0 0 3px rgba(91,156,255,.25);
}
/* locked-month fields for non-admins: disabled controls must read as
   disabled. input.input[disabled] is (0,6,3) so it outranks the global
   input rule (0,6,2); select/textarea need only beat the rules above. */
html[data-theme="dark"] body > .modal-bg .modal .lead-edit-grid input.input[disabled],
html[data-theme="dark"] body > .modal-bg .modal select.input:disabled,
html[data-theme="dark"] body > .modal-bg .modal textarea.input:disabled{
    background-color:#0c1424;
    color:var(--dk-muted);
}
html[data-theme="dark"] body > .modal-bg .modal-actions{ border-top-color:var(--dk-line); }
html[data-theme="dark"] .lead-modal .modal-actions{ background:var(--dk-surface); border-top-color:var(--dk-line); }
html[data-theme="dark"] body > .modal-bg .modal.lead-modal .lead-edit-grid label > span{ color:var(--dk-muted); }html[data-theme="dark"] body > .modal-bg .modal.lead-modal .lead-edit-grid select.input,
html[data-theme="dark"] body > .modal-bg .modal.lead-modal .lead-edit-grid select.input:hover,
html[data-theme="dark"] body > .modal-bg .modal.lead-modal .lead-edit-grid select.input:focus{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238fa0b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 9px center;
    background-size:10px 10px;
}
/* read-only Continent field: input.continent-input[readonly] is (0,6,3) so
   it outranks the global input rule (0,6,2) */
html[data-theme="dark"] body > .modal-bg .modal.lead-modal input.continent-input[readonly]{
    background-color:#0c1424;
    color:var(--dk-muted);
}
html[data-theme="dark"] body > .modal-bg .modal .money-input > span{ color:var(--dk-muted); }
html[data-theme="dark"] body > .modal-bg .modal .quote-row button{
    background:var(--dk-surface2);
    border-color:var(--dk-line2);
    color:var(--dk-ink);
}
html[data-theme="dark"] body > .modal-bg .modal .quote-row button:hover{
    background:var(--dk-hover);
    border-color:#3f5075;
}
html[data-theme="dark"] body > .modal-bg .modal #duplicateLeadBox.alert{
    background:var(--dk-warn-bg);
    color:var(--dk-warn-ink);
    border-color:rgba(251,191,36,.4);
}

/* ---- 11. CHAT PANEL (bottom-right) ------------------------------------- */
html[data-theme="dark"] .chat-panel{
    background:var(--dk-surface);
    border-color:var(--dk-line2);
    box-shadow:0 20px 50px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="dark"] .chat-head{ background:var(--dk-surface2); border-bottom-color:var(--dk-line); }
html[data-theme="dark"] .chat-peer{ color:var(--dk-ink); }
html[data-theme="dark"] .chat-close{ color:var(--dk-muted); }
html[data-theme="dark"] .chat-close:hover{ background:var(--dk-hover); color:var(--dk-ink); }
html[data-theme="dark"] .chat-messages{ background:var(--dk-input); }
html[data-theme="dark"] .chat-msg .chat-bubble{ background:var(--dk-surface3); color:var(--dk-ink); }
html[data-theme="dark"] .chat-msg.is-mine .chat-bubble{ background:#2563eb; color:#ffffff; }
html[data-theme="dark"] .chat-msg .chat-time,
html[data-theme="dark"] .chat-empty{ color:var(--dk-muted); }
html[data-theme="dark"] .chat-sender{ color:#a5b4fc; }
html[data-theme="dark"] .chat-compose{ background:var(--dk-surface); border-top-color:var(--dk-line); }
/* the textarea turns white on focus in crm-premium.css */
html[data-theme="dark"] .chat-input:focus{ background-color:var(--dk-input); border-color:var(--dk-brand); }
html[data-theme="dark"] .chat-send{ background:#2563eb; color:#ffffff; }
html[data-theme="dark"] .chat-send:hover{ background:#1d4ed8; }
html[data-theme="dark"] .chat-send:disabled{ background:var(--dk-line2); color:var(--dk-muted); }

/* ---- 12. BELL / PAYMENT NOTIFICATIONS PANEL ---------------------------- */
html[data-theme="dark"] .bell-panel{
    background:var(--dk-surface3);
    box-shadow:0 16px 44px rgba(0,0,0,.75), 0 0 0 1px var(--dk-line2);
}
html[data-theme="dark"] .bell-item{ border-top-color:var(--dk-line); }
html[data-theme="dark"] .bell-item:hover{ background:var(--dk-hover); }
html[data-theme="dark"] .bell-item.is-unread{ background:rgba(91,156,255,.10); }
html[data-theme="dark"] .bell-item.is-unread:hover{ background:rgba(91,156,255,.18); }
html[data-theme="dark"] .bell-ico.k-paid{ background:var(--dk-ok-bg); }
html[data-theme="dark"] .bell-ico.k-failed{ background:var(--dk-bad-bg); }
html[data-theme="dark"] .bell-ico.k-cancelled{ background:var(--dk-warn-bg); }
html[data-theme="dark"] .bell-ico.k-viewed{ background:var(--dk-brand-bg); }
html[data-theme="dark"] .bell-title{ color:var(--dk-ink); }
html[data-theme="dark"] .bell-details{ color:var(--dk-ink2); }
html[data-theme="dark"] .bell-time,
html[data-theme="dark"] .bell-empty{ color:var(--dk-muted); }


/* ===================== BLOCK: index-views ===================== */
/* =============================================================================
   index.php — LOGIN + TOOL VIEWS (Admin · Data Validation · Bank · Logs)
   -----------------------------------------------------------------------------
   Scope: the login document and the four documents rendered through
   pageHeader() (wrapper <div class="screen">). The dashboard (<div class="app">)
   is covered elsewhere. Every selector below exists in index.php, style.css or
   assets/crm-premium.css.
   Specificity: the page's strongest rule is `.screen > form.card.filters
   select.input:focus` (0,5,2); the html[data-theme="dark"] prefix plus the same
   chain always wins without !important. !important is used ONLY to beat inline
   style="" attributes on the Logs / Admin markup.
   NOTE (Bank): the bank document never closes .screen, so its .modal-bg is a
   descendant of .screen, NOT a child of body — crm-premium's `body > .modal-bg`
   rules do not reach it and the modal is styled by style.css (.modal, .x,
   .btn.light …). The modal rules below therefore use the descendant form
   `.modal-bg .modal.bank-modal`, which matches whether or not .screen is closed.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. LOGIN — already dark by design (navy gradient page, glass card, dark
      inputs, blue CTA, red-tinted error). The global input rule turns the
      glass inputs into solid --dk-input boxes, which reads fine on the glass
      card. Only the page backdrop colour is pinned behind the gradient.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .login-page { background-color: var(--dk-bg); }

/* ---------------------------------------------------------------------------
   2. TOOL-PAGE SHELL — shared by Admin / Validation / Bank / Logs
   --------------------------------------------------------------------------- */
/* cards: deepen the near-invisible light shadow (bg/border come from global) */
html[data-theme="dark"] .screen .card,
html[data-theme="dark"] .screen .grid2 > .card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .55);
}
/* muted copy inside cards was #64748b / #94a3b8 */
html[data-theme="dark"] .screen .card p,
html[data-theme="dark"] .screen .card .text-muted { color: var(--dk-muted); }
html[data-theme="dark"] .screen .card .hint,
html[data-theme="dark"] .screen .empty-state { color: var(--dk-muted); }

/* text inputs: the global rule already paints them, but the page's
   `.screen .card .input:focus` (0,4,0) sets background:#ffffff and beats the
   global input:focus (0,2,1) — pin the focused background */
html[data-theme="dark"] .screen .card .input:focus {
    background-color: var(--dk-input);
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 3px rgba(91, 156, 255, .22);
}
/* selects / textareas / file inputs inside cards — the page's (0,3,1) rules
   out-rank the global select/textarea rule. The select chevron is re-drawn in
   --dk-muted (the page's #64748b stroke is 2.9:1 on --dk-input) and re-applied
   on :focus because the page's `background:#ffffff` shorthand wipes it. */
html[data-theme="dark"] .screen .card select.input,
html[data-theme="dark"] .screen .card textarea.input {
    background-color: var(--dk-input);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .screen .card select.input,
html[data-theme="dark"] .screen .card select.input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238fa0b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 11px;
}
html[data-theme="dark"] .screen .card select.input:focus,
html[data-theme="dark"] .screen .card textarea.input:focus {
    background-color: var(--dk-input);
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 3px rgba(91, 156, 255, .22);
}
html[data-theme="dark"] .screen .card input[type="file"].input {
    background-color: var(--dk-input);
    color: var(--dk-ink2);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .screen .card input[type="file"].input::file-selector-button {
    background: var(--dk-surface3);
    color: var(--dk-ink);
    border: 1px solid var(--dk-line2);
    border-radius: 6px;
    padding: 3px 10px;
    margin-right: 10px;
    cursor: pointer;
}

/* buttons on card surfaces
   .btn.light was a white pill with #0f172a text; .btn.dark was a
   #1e293b->#0f172a navy gradient that vanishes against a navy card, so the
   primary becomes the brand-blue gradient the login CTA uses. Red stays. */
html[data-theme="dark"] .screen .card .btn.light {
    background: var(--dk-surface2);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .screen .card .btn.light:hover {
    background: var(--dk-surface3);
    border-color: var(--dk-brand);
    color: var(--dk-brand);
}
html[data-theme="dark"] .screen .card .btn.dark {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 6px 14px -4px rgba(37, 99, 235, .55);
}
html[data-theme="dark"] .screen .card .btn.dark:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}
/* variant-less .btn (the "Edit" button on validation chips) — give it a real
   surface instead of the UA button face */
html[data-theme="dark"] .screen .chip .val-edit {
    background: var(--dk-surface3);
    color: var(--dk-ink);
    border: 1px solid var(--dk-line2);
}
html[data-theme="dark"] .screen .chip .val-edit:hover { border-color: var(--dk-brand); color: var(--dk-brand); }

/* flash / alerts (blue = info, red = error, amber = warning) */
html[data-theme="dark"] .screen .alert.blue {
    background: var(--dk-brand-bg);
    color: #a5c4ff;
    border-color: rgba(91, 156, 255, .35);
}
html[data-theme="dark"] .screen .alert.red {
    background: var(--dk-bad-bg);
    color: var(--dk-bad-ink);
    border-color: rgba(248, 113, 113, .35);
}
html[data-theme="dark"] .screen .alert.amber {
    background: var(--dk-warn-bg);
    color: var(--dk-warn-ink);
    border-color: rgba(251, 191, 36, .35);
}

/* ---------------------------------------------------------------------------
   3. ADMIN — user list, lockout pills, role & permissions editor, import box
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .screen .user-box {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .screen .user-box:hover {
    background: var(--dk-hover);
    border-color: var(--dk-line2);
    box-shadow: none;
}
html[data-theme="dark"] .screen .user-box b { color: var(--dk-ink); }
html[data-theme="dark"] .screen .user-box > div { color: var(--dk-muted); }

/* failed-sign-in / locked-out pills are inline-styled → attribute overrides
   (strings match index.php exactly: no space after the colon) */
html[data-theme="dark"] .screen .user-box span[style*="background:#fef2f2"] {
    background: var(--dk-bad-bg) !important;
    color: var(--dk-bad-ink) !important;
    border-color: rgba(248, 113, 113, .4) !important;
}
html[data-theme="dark"] .screen .user-box span[style*="background:#fffbeb"] {
    background: var(--dk-warn-bg) !important;
    color: var(--dk-warn-ink) !important;
    border-color: rgba(251, 191, 36, .4) !important;
}

/* role editor (<details>) — plain-class rules in crm-premium.css */
html[data-theme="dark"] .role-editor {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .role-editor summary { color: var(--dk-ink2); }
html[data-theme="dark"] .role-editor summary:hover { color: var(--dk-ink); }
html[data-theme="dark"] .role-pill.role-user    { background: var(--dk-surface3); color: var(--dk-ink2); }
html[data-theme="dark"] .role-pill.role-manager { background: var(--dk-brand-bg); color: #a5c4ff; }
html[data-theme="dark"] .role-pill.role-admin   { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
html[data-theme="dark"] .role-form { border-top-color: var(--dk-line); }
html[data-theme="dark"] .role-select-row { color: var(--dk-ink2); }
html[data-theme="dark"] .perm-item {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .perm-item:hover { border-color: var(--dk-brand); background: var(--dk-hover); }
html[data-theme="dark"] .perm-item b { color: var(--dk-ink); }
html[data-theme="dark"] .perm-item small { color: var(--dk-muted); }

/* ---------------------------------------------------------------------------
   4. DATA VALIDATION — value chips, read-only chips, bulk-select bar
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .screen .chip {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}
html[data-theme="dark"] .screen .chip:hover,
html[data-theme="dark"] .screen .chips .chip:hover {
    background: var(--dk-hover);
    border-color: var(--dk-line2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .screen .chip.readonly-chip {
    background: var(--dk-brand-bg);
    border-color: rgba(91, 156, 255, .3);
}
html[data-theme="dark"] .readonly-pill,
html[data-theme="dark"] .screen .chip .readonly-pill {
    background: rgba(91, 156, 255, .22);
    color: #a5c4ff;
}
html[data-theme="dark"] .val-selall { color: var(--dk-ink2); }

/* ---------------------------------------------------------------------------
   5. LOGS — filter card, sticky table header, rows, inline-styled cells
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .screen > form.card.filters {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .screen > form.card.filters label > span { color: var(--dk-muted); }html[data-theme="dark"] .screen > form.card.filters select.input,
html[data-theme="dark"] .screen > form.card.filters select.input:hover,
html[data-theme="dark"] .screen > form.card.filters select.input:focus{
    background-color: var(--dk-input);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238fa0b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 11px center;
    background-size:11px 11px;
}
html[data-theme="dark"] .screen > form.card.filters select.input:focus {
    background-color: var(--dk-input);
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 3px rgba(91, 156, 255, .22);
}

/* table shell — style.css hard-codes a #b6c5d8 Firefox scrollbar-color; the
   WebKit thumb is already handled by the global *::-webkit-scrollbar-thumb */
html[data-theme="dark"] .screen .card .table-wrap {
    border-top-color: var(--dk-line);
    scrollbar-color: #2f3e58 transparent;
}
html[data-theme="dark"] .screen .card table thead th {
    background: var(--dk-surface2);
    color: var(--dk-ink2);
    border-bottom-color: var(--dk-line2);
}
html[data-theme="dark"] .screen .card table tbody td {
    color: var(--dk-ink2);
    border-bottom-color: var(--dk-line);
}
html[data-theme="dark"] .screen .card table tbody tr:hover { background: var(--dk-hover); }

/* inline-styled bits: "Pick a log type" empty card, login-log rows */
html[data-theme="dark"] .screen .card [style*="color:#0f172a"] { color: var(--dk-ink) !important; }
html[data-theme="dark"] .screen .card [style*="color:#64748b"] { color: var(--dk-muted) !important; }
html[data-theme="dark"] .screen .card [style*="color:#15803d"] { color: var(--dk-ok-ink) !important; }
html[data-theme="dark"] .screen .card tr[style*="background:#ecfdf5"] { background: var(--dk-ok-bg) !important; }

/* ---------------------------------------------------------------------------
   6. BANK — Excel-styled account cards + add/edit modal
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .bank-page-head h1 { color: var(--dk-ink); }
html[data-theme="dark"] .bank-page-head .sub { color: var(--dk-muted); }
html[data-theme="dark"] .bank-section-title {
    color: var(--dk-ink);
    border-left-color: var(--dk-brand);
}
html[data-theme="dark"] .bank-section-title.bank-section-crypto {
    color: var(--dk-ink);
    border-left-color: #4ade80;
}
html[data-theme="dark"] .bank-empty {
    color: var(--dk-muted);
    background: var(--dk-surface);
    border-color: var(--dk-line2);
}

/* page-level buttons (outside .card): "+ Add Bank", "Edit" on each card —
   style.css .btn.light has hard-coded #101d36 text, .btn.dark a navy gradient */
html[data-theme="dark"] .bank-page-wrap .btn.light {
    background: var(--dk-surface2);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
    box-shadow: none;
}
html[data-theme="dark"] .bank-page-wrap .btn.light:hover {
    background: var(--dk-surface3);
    border-color: var(--dk-brand);
    color: var(--dk-brand);
}
html[data-theme="dark"] .bank-page-wrap .btn.dark {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 6px 14px -4px rgba(37, 99, 235, .55);
}
html[data-theme="dark"] .bank-page-wrap .btn.dark:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}
/* .bank-add-crypto keeps its green !important — visible on dark as-is */

/* the card */
html[data-theme="dark"] .bank-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .bank-card-actions {
    background: var(--dk-surface2);
    border-bottom-color: var(--dk-line);
}
html[data-theme="dark"] .bank-card-actions .left { color: var(--dk-muted); }
html[data-theme="dark"] .bank-card-actions .left .inactive-pill {
    background: var(--dk-bad-bg);
    color: var(--dk-bad-ink);
}
/* internal-only strips keep their meaning: "yellow" label → amber tint with
   yellow text (same tokens as the INR rows on calculations), red warning
   → red text on the card surface */
html[data-theme="dark"] .bank-label-strip {
    background: var(--inr-bg);
    color: var(--inr-ink);
    border-bottom-color: #a16207;
}
html[data-theme="dark"] .bank-warning-strip {
    background: var(--dk-surface);
    color: #f87171;
}
/* client-facing block (on screen only — the copy routine inlines its own
   light colours onto the cloned HTML, so e-mails are unaffected) */
html[data-theme="dark"] .bank-intro { color: var(--dk-ink); }
html[data-theme="dark"] .bank-detail-table th,
html[data-theme="dark"] .bank-detail-table td {
    background: var(--dk-surface);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .bank-detail-table th { background: var(--dk-surface2); }
html[data-theme="dark"] .bank-notes { color: var(--dk-ink2); }
html[data-theme="dark"] .bank-notes-title { color: var(--dk-ink); }

/* add / edit modal — descendant form (see header note); scoped to
   .bank-modal so the dashboard's modals are left to their own block.
   Effective light rules: style.css .modal / .x / .btn.light / .btn.dark and
   crm-premium's body > .modal-bg chain if .screen is ever closed properly. */
html[data-theme="dark"] .modal-bg .modal.bank-modal {
    background: var(--dk-surface);
    color: var(--dk-ink);
    scrollbar-color: #2f3e58 transparent;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 0 0 1px var(--dk-line),
        0 32px 80px -20px rgba(0, 0, 0, .7),
        0 12px 24px -8px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .modal-bg .modal.bank-modal .modal-head { border-bottom-color: var(--dk-line); }
html[data-theme="dark"] .modal-bg .modal.bank-modal .modal-head h2 { color: var(--dk-ink); }
html[data-theme="dark"] .modal-bg .modal.bank-modal .modal-head .x {
    background: var(--dk-surface2);
    border-color: var(--dk-line2);
    color: var(--dk-muted);
}
html[data-theme="dark"] .modal-bg .modal.bank-modal .modal-head .x:hover {
    background: var(--dk-bad-bg);
    border-color: rgba(248, 113, 113, .45);
    color: var(--dk-bad-ink);
}
html[data-theme="dark"] .modal-bg .modal.bank-modal .edit-grid label { color: var(--dk-ink2); }
html[data-theme="dark"] .modal-bg .modal.bank-modal .edit-grid label > span { color: var(--dk-ink2); }
html[data-theme="dark"] .modal-bg .modal.bank-modal .field-hint { color: var(--dk-muted); }
/* inputs: global rule paints them; pin the focused background because
   crm-premium's `body > .modal-bg .modal .input:focus` sets #ffffff and the
   textarea (0,3,2) out-ranks the global textarea rule */
html[data-theme="dark"] .modal-bg .modal.bank-modal textarea.input {
    background-color: var(--dk-input);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .modal-bg .modal.bank-modal .input:focus,
html[data-theme="dark"] .modal-bg .modal.bank-modal textarea.input:focus {
    background-color: var(--dk-input);
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 3px rgba(91, 156, 255, .22);
}
html[data-theme="dark"] .modal-bg .modal.bank-modal .modal-actions { border-top-color: var(--dk-line); }
html[data-theme="dark"] .modal-bg .modal.bank-modal .btn.light {
    background: var(--dk-surface2);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
    box-shadow: none;
}
html[data-theme="dark"] .modal-bg .modal.bank-modal .btn.light:hover {
    background: var(--dk-surface3);
    border-color: var(--dk-brand);
    color: var(--dk-brand);
}
html[data-theme="dark"] .modal-bg .modal.bank-modal .btn.dark {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 6px 14px -4px rgba(37, 99, 235, .55);
}
html[data-theme="dark"] .modal-bg .modal.bank-modal .btn.dark:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}


/* ===================== BLOCK: invoices ===================== */
/* =========================================================================
   INVOICES (invoices.php) — dark overrides for the main app document only.
   Scope: topbar + bell panel, list table + chips, invoice editor form,
   companies / online-payments settings cards, Wise cards, modals, alerts.
   NOT touched: the public client token page, @media print, and the on-screen
   A4 .sheet (kept as a white paper preview — see the "sheet guard" section).
   ========================================================================= */

/* ---- Topbar --------------------------------------------------------------
   The strip is already dark (#0b1220) but the dark page bg (#0a1020) is
   almost the same colour, so give it a hairline so it still reads as a bar.
   Nav pills / bell / close button are crm-premium.css glass — untouched. */
html[data-theme="dark"] .topbar{border-bottom:1px solid var(--dk-line)}

/* ---- Notification bell panel ------------------------------------------- */
html[data-theme="dark"] .bell-panel{
    background:var(--dk-surface3);
    border:1px solid var(--dk-line2);
    box-shadow:0 16px 44px rgba(0,0,0,.6);
}
html[data-theme="dark"] .bell-head{border-bottom:1px solid var(--dk-line)}
html[data-theme="dark"] .bell-item{border-top-color:var(--dk-line)}
html[data-theme="dark"] .bell-item:hover{background:var(--dk-hover)}
html[data-theme="dark"] .bell-item.is-unread{background:var(--dk-brand-bg)}
html[data-theme="dark"] .bell-item.is-unread:hover{background:rgba(91,156,255,.24)}
html[data-theme="dark"] .bell-ico.k-paid{background:var(--dk-ok-bg)}
html[data-theme="dark"] .bell-ico.k-failed{background:var(--dk-bad-bg)}
html[data-theme="dark"] .bell-ico.k-cancelled{background:var(--dk-warn-bg)}
html[data-theme="dark"] .bell-ico.k-viewed{background:var(--dk-brand-bg)}
html[data-theme="dark"] .bell-ico.k-wise_unmatched{background:rgba(159,232,112,.18)}
html[data-theme="dark"] .bell-title{color:var(--dk-ink)}
html[data-theme="dark"] .bell-details{color:var(--dk-muted)}
html[data-theme="dark"] .bell-time,
html[data-theme="dark"] .bell-empty{color:var(--dk-muted)}

/* ---- Flash / alerts ------------------------------------------------------ */
html[data-theme="dark"] .alert{
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.4);
    color:#c7dbff;
}
html[data-theme="dark"] .alert.is-err{
    background:var(--dk-bad-bg);
    border-color:rgba(248,113,113,.45);
    color:var(--dk-bad-ink);
}

/* ---- Cards (bg/border/text come from the global rule; deepen the shadow) */
html[data-theme="dark"] .card{box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* ---- Buttons. The generic dark .btn (0,2,1) outranks the page's own
        .btn.primary / .btn.wise (0,2,0), so those are re-asserted here.
        Primary is pinned to #2563eb (white text 5.2:1) rather than the
        remapped --blue #5b9cff (3.2:1, fails AA). ------------------------ */
html[data-theme="dark"] .btn{
    background:var(--dk-surface2);
    border-color:var(--dk-line2);
    color:var(--dk-ink);
}
html[data-theme="dark"] .btn:hover{background:var(--dk-surface3);border-color:#3a4c6b}
html[data-theme="dark"] .btn.primary{background:#2563eb;border-color:#2563eb;color:#fff}
html[data-theme="dark"] .btn.primary:hover{background:#1d4ed8;border-color:#1d4ed8}
html[data-theme="dark"] .btn.wise{background:#9fe870;border-color:#9fe870;color:#163300}
html[data-theme="dark"] .btn.wise:hover{background:#8fdc60;border-color:#8fdc60}
html[data-theme="dark"] .btn.danger{
    background:var(--dk-surface2);
    color:var(--dk-bad-ink);
    border-color:rgba(248,113,113,.45);
}
html[data-theme="dark"] .btn.danger:hover{background:var(--dk-bad-bg)}
html[data-theme="dark"] .btn.emailed{
    background:var(--dk-ok-bg);
    border-color:rgba(74,222,128,.4);
    color:var(--dk-ok-ink);
}
html[data-theme="dark"] .btn.emailed:hover{background:rgba(74,222,128,.24)}

/* ---- Form controls the global rule does NOT reach ------------------------
   The page's `label.f input{background:#fff;color:var(--ink)}` also hits
   file pickers and range sliders, which the global control rule excludes
   on purpose. Without these the file inputs are light text on white and the
   three logo/signature/stamp sliders paint a white box on the dark card. */
html[data-theme="dark"] label.f input[type="file"]{
    background:var(--dk-input);
    border-color:var(--dk-line2);
    color:var(--dk-ink2);
}
html[data-theme="dark"] label.f input[type="range"]{
    background:transparent;
    border-color:var(--dk-line);
}
/* size sliders carry an inline accent-color:#2563eb */
html[data-theme="dark"] input[type="range"][style*="accent-color"]{accent-color:var(--dk-brand)!important}

/* ---- List table ---------------------------------------------------------- */
html[data-theme="dark"] .inv-table{
    background:var(--dk-surface);
    border-color:var(--dk-line);
    box-shadow:0 1px 3px rgba(0,0,0,.4);
}
html[data-theme="dark"] .inv-table th{background:var(--dk-surface3);color:var(--dk-ink2)}
html[data-theme="dark"] .inv-table tr:hover td{background:var(--dk-hover)}
html[data-theme="dark"] .inv-table .item-line + .item-line{border-top-color:var(--dk-line2)}
html[data-theme="dark"] .inv-table .amt{color:var(--dk-ok-ink)}
/* PAID rows — keep the green meaning as a dark tint (was #d3f5df, which
   would put light --ink text on a light surface). The page's own
   `.inv-table tr.is-paid-row .paid-chip` (0,3,1) beats a plain prefixed
   `.paid-chip` (0,2,1), so the blue paid-row variants are re-specified. */
html[data-theme="dark"] .inv-table tr.is-paid-row td{background:rgba(74,222,128,.12)}
html[data-theme="dark"] .inv-table tr.is-paid-row:hover td{background:rgba(74,222,128,.2)}
html[data-theme="dark"] .inv-table tr.is-paid-row .paid-chip,
html[data-theme="dark"] .inv-table tr.is-paid-row .viewed-chip{
    background:var(--dk-brand-bg);
    color:#a5c4ff;
    border-color:rgba(91,156,255,.45);
}
html[data-theme="dark"] .inv-table tr.is-paid-row .view-info-btn{
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.45);
    color:#a5c4ff;
}
html[data-theme="dark"] .inv-table tr.is-paid-row .view-info-btn:hover{background:rgba(91,156,255,.28)}
/* DISABLED-link rows — red tint */
html[data-theme="dark"] .inv-table tr.is-disabled-row td{background:var(--dk-bad-bg)}
html[data-theme="dark"] .inv-table tr.is-disabled-row:hover td{background:rgba(248,113,113,.26)}

/* ---- Status chips / pills (list + invoice header) ------------------------ */
html[data-theme="dark"] .paid-chip{background:var(--dk-ok-bg);color:var(--dk-ok-ink)}
html[data-theme="dark"] .viewed-chip{
    background:var(--dk-ok-bg);
    color:var(--dk-ok-ink);
    border-color:rgba(74,222,128,.4);
}
html[data-theme="dark"] .notviewed-chip{background:var(--dk-warn-bg);color:var(--dk-warn-ink)}
html[data-theme="dark"] .disabled-chip{
    background:var(--dk-surface3);
    color:var(--dk-ink2);
    border-color:var(--dk-line2);
}
html[data-theme="dark"] .emailed-chip{
    background:var(--dk-brand-bg);
    color:#a5c4ff;
    border-color:rgba(91,156,255,.45);
}
html[data-theme="dark"] .email-sent-chip{
    background:var(--dk-ok-bg);
    color:var(--dk-ok-ink);
    border-color:rgba(74,222,128,.4);
}
html[data-theme="dark"] .paid-badge.is-paid{
    background:var(--dk-ok-bg);
    color:var(--dk-ok-ink);
    border-color:rgba(74,222,128,.4);
}
html[data-theme="dark"] .paid-badge.is-unpaid{
    background:var(--dk-surface3);
    color:var(--dk-ink2);
    border-color:var(--dk-line2);
}
html[data-theme="dark"] .paid-badge.is-viewed{
    background:var(--dk-ok-bg);
    color:var(--dk-ok-ink);
    border-color:rgba(74,222,128,.4);
}
html[data-theme="dark"] .paid-badge.is-notviewed{
    background:var(--dk-warn-bg);
    color:var(--dk-warn-ink);
    border-color:rgba(251,191,36,.4);
}
html[data-theme="dark"] .paid-badge.is-disabled{
    background:var(--dk-surface3);
    color:var(--dk-ink2);
    border-color:var(--dk-line2);
}
html[data-theme="dark"] .iv-first{background:var(--dk-ok-bg);color:var(--dk-ok-ink)}
html[data-theme="dark"] .wh-ok{color:var(--dk-ok-ink)}
html[data-theme="dark"] .wh-bad,
html[data-theme="dark"] .payacc-hint{color:var(--dk-warn-ink)}
html[data-theme="dark"] .pd-fee{color:var(--dk-bad-ink)}
html[data-theme="dark"] .pd-net{color:var(--dk-ok-ink)}

/* "i" view-log button (green pill outside paid rows) */
html[data-theme="dark"] .view-info-btn{
    background:var(--dk-ok-bg);
    border-color:rgba(74,222,128,.4);
    color:var(--dk-ok-ink);
}
html[data-theme="dark"] .view-info-btn:hover{background:rgba(74,222,128,.24)}

/* ---- Copy buttons (webhook box + share link; the ones inside the white
        .sheet are re-pinned light in the sheet guard below) --------------- */
html[data-theme="dark"] .copy-btn{
    background:var(--dk-surface2);
    border-color:var(--dk-line2);
    color:var(--dk-ink2);
}
html[data-theme="dark"] .copy-btn:hover{
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.5);
    color:#a5c4ff;
}
html[data-theme="dark"] .copy-btn.copied,
html[data-theme="dark"] .copy-btn.copied:hover{
    background:var(--dk-ok-bg);
    border-color:rgba(74,222,128,.4);
    color:var(--dk-ok-ink);
}

/* ---- Modals: view log, payment receipt, e-mail compose, list-views ------- */
html[data-theme="dark"] .iv-overlay{background:rgba(2,8,23,.72)}
html[data-theme="dark"] .iv-modal{
    background:var(--dk-surface);
    border:1px solid var(--dk-line2);
    box-shadow:0 20px 50px rgba(0,0,0,.65);
}
html[data-theme="dark"] .iv-head{border-bottom:1px solid var(--dk-line)}
html[data-theme="dark"] .iv-table th{background:var(--dk-surface3);color:var(--dk-ink2)}
html[data-theme="dark"] .iv-table tr:hover td{background:var(--dk-hover)}
html[data-theme="dark"] .iv-ua{color:var(--dk-muted)}
html[data-theme="dark"] .pd-table td.k{color:var(--dk-muted)}
/* "Already sent N×" note in the e-mail dialog (inline light-green style) */
html[data-theme="dark"] .iv-modal small[style*="background:#f0fdf4"]{
    background:var(--dk-ok-bg)!important;
    border-color:rgba(74,222,128,.4)!important;
    color:var(--dk-ok-ink)!important;
}

/* ---- Editor form: labels, item rows, payment accounts -------------------- */
html[data-theme="dark"] .payacc-title,
html[data-theme="dark"] .payacc-group > b{color:var(--dk-ink2)}
html[data-theme="dark"] .item-row{background:var(--dk-surface2);border-color:var(--dk-line)}
html[data-theme="dark"] .item-row .del-item{color:var(--dk-muted)}
html[data-theme="dark"] .item-row .del-item:hover{background:var(--dk-bad-bg);color:var(--dk-bad-ink)}
html[data-theme="dark"] .payacc-add{background:var(--dk-surface2);border-color:var(--dk-line)}

/* PAID-lock notice + duplicate payment-link warning (amber) */
html[data-theme="dark"] .paid-lock-note{
    background:var(--dk-warn-bg);
    border-color:rgba(251,191,36,.4);
    border-left-color:#f59e0b;
    color:var(--dk-warn-ink);
}
html[data-theme="dark"] .paid-lock-note label{color:var(--dk-warn-ink)}
html[data-theme="dark"] .paylink-warn{
    background:var(--dk-warn-bg);
    border-color:rgba(251,191,36,.4);
    color:var(--dk-warn-ink);
}

/* "Generate Invoice from CRM lead" banner */
html[data-theme="dark"] .lead-banner{
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.35);
    border-left-color:var(--dk-brand);
}
html[data-theme="dark"] .lead-banner-main b{color:#dbe7ff}
html[data-theme="dark"] .lead-banner-main span{color:#a5c4ff}
html[data-theme="dark"] .lead-banner-main small{color:var(--dk-ink2)}
html[data-theme="dark"] .lead-banner-warn{
    background:var(--dk-warn-bg);
    border-color:rgba(251,191,36,.4);
    color:var(--dk-warn-ink);
}
html[data-theme="dark"] .lead-banner-warn a{color:var(--dk-brand)}
html[data-theme="dark"] .lead-banner-warn em{color:var(--dk-ok-ink)}
/* "X is already creating an invoice for this lead" — inline amber box */
html[data-theme="dark"] .lead-banner small[style*="background:#fffbeb"]{
    background:var(--dk-warn-bg)!important;
    border-color:rgba(251,191,36,.4)!important;
    color:var(--dk-warn-ink)!important;
}

/* ---- Companies / settings cards ------------------------------------------ */
html[data-theme="dark"] .co-row{border-top-color:var(--dk-line)}
/* Image wells stay WHITE on purpose: company logos, signatures and stamps are
   dark ink on transparent PNGs and vanish on a dark surface. They preview
   what prints on white paper, so they are shown as paper swatches with a
   visible light border (the inline `border:1px dashed var(--line)` would
   otherwise be a dark hairline on white). */
html[data-theme="dark"] .co-logo{background:#fff;border-color:#cbd5e1}
html[data-theme="dark"] label.f div[style*="background:#fbfdff"]{
    background:#fff!important;
    border-color:#94a3b8!important;
}
html[data-theme="dark"] label.f small img{
    background:#fff;
    border-radius:3px;
    padding:1px 3px;
    box-sizing:content-box;
}

/* Webhook URL box */
html[data-theme="dark"] .webhook-box{
    background:var(--dk-brand-bg);
    border-color:rgba(91,156,255,.35);
    color:#c7dbff;
}
html[data-theme="dark"] .webhook-box code{
    background:var(--dk-input);
    border-color:rgba(91,156,255,.4);
    color:#a5c4ff;
}
/* "Last Wise webhook contact" status line — colour is set inline by PHP */
html[data-theme="dark"] .webhook-box span[style*="color:#166534"]{color:var(--dk-ok-ink)!important}
html[data-theme="dark"] .webhook-box span[style*="color:#b91c1c"]{color:var(--dk-bad-ink)!important}
/* amber inline notes: "(sandbox)", "(no pay link …)", "Company could not be
   matched", "No Wise webhook has reached this server yet." */
html[data-theme="dark"] .card [style*="color:#b45309"],
html[data-theme="dark"] .lead-banner [style*="color:#b45309"]{color:var(--dk-warn-ink)!important}

/* ---- Wise cards (settings + invoice view) -------------------------------- */
html[data-theme="dark"] .wise-box{
    background:rgba(159,232,112,.10);
    border-color:rgba(159,232,112,.35);
}
html[data-theme="dark"] .wise-box h3{color:#d9f7c2}
html[data-theme="dark"] .wise-box p{color:#b7e88f}
html[data-theme="dark"] .wise-cred{border-top-color:rgba(159,232,112,.25)}
html[data-theme="dark"] .wise-cred .amt{color:#d9f7c2}
html[data-theme="dark"] .wise-cred .meta{color:var(--dk-ink2)}
html[data-theme="dark"] .wise-cred .meta small{color:var(--dk-muted)}
html[data-theme="dark"] .wise-cred .amt small[style*="color:#64748b"]{color:var(--dk-muted)!important}

/* ---- Sheet guard — the on-screen A4 invoice stays a white paper preview.
        Re-pin the page tokens inside it and undo the three global dark rules
        that would otherwise leak in (hr border, table td borders) so it
        looks exactly like the PDF. Everything else in the sheet uses its
        own hard-coded light colours and needs nothing. ------------------- */
html[data-theme="dark"] .sheet{
    --ink:#0f172a;
    --muted:#64748b;
    --line:#e2e8f0;
    --blue:#2563eb;
    background:#fff;
    color:#0f172a;
    border-color:#e2e8f0;
    box-shadow:0 2px 14px rgba(0,0,0,.55);
}
html[data-theme="dark"] .sheet hr.inv-rule{border-color:#cbd5e1}
html[data-theme="dark"] .sheet .inv-items td{border-color:#e2e8f0}
html[data-theme="dark"] .sheet .inv-bank td{border-color:#cbd5e1}
html[data-theme="dark"] .sheet .copy-btn{background:#fff;border-color:#cbd5e1;color:#475569}
html[data-theme="dark"] .sheet .copy-btn:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
html[data-theme="dark"] .sheet .copy-btn.copied,
html[data-theme="dark"] .sheet .copy-btn.copied:hover{background:#dcfce7;border-color:#86efac;color:#15803d}


/* ===================== BLOCK: chat ===================== */
/* =============================================================================
   chat.php — Team Chat (full-tab page)
   -----------------------------------------------------------------------------
   Kept as-is (already dark): .topbar (#0b1220) + .topbar-title p (#7dd3fc) +
   .topbar-user (#94a3b8), the glass .tab-close-btn (crm-premium.css, !important)
   and the .theme-toggle crm-theme.js mounts beside it, the .modal-head strip
   (#0b1220 / #94a3b8 close x), .msg.is-mine .bubble (#2563eb / #fff),
   the blue primaries (.side-newgroup / .compose button / .btn-primary /
   .link-btn), avatar backgrounds + per-sender name colours (JS PALETTE from
   userColor(), carry per-user meaning).
   Fixes below target the white / slate-100 surfaces in the page's inline
   <style> (incl. its "2026-08 polish" block) and the .chat-head gradient that
   crm-premium.css paints because the class name is shared with the floating
   mini-chat panel. Load order: inline <style> -> crm-premium.css -> crm-dark.css,
   so plain html[data-theme="dark"] prefixes outrank everything; !important is
   used once, to beat the inline-styled "Members" caption.
   ============================================================================= */

/* ---- Layout shells --------------------------------------------------------- */
html[data-theme="dark"] .chat-app { background: var(--dk-bg); }
html[data-theme="dark"] .main     { background: var(--dk-bg); }

/* ---- Sidebar --------------------------------------------------------------- */
html[data-theme="dark"] .side { background: var(--dk-surface); }
/* .side-search bg / text / border / placeholder / focus: the global input rule
   (0,6,2) already outranks the page's #f1f5f9, #cfd9e6 border and :focus #fff */
html[data-theme="dark"] .side-section { color: var(--dk-muted); }
/* only button inside .side-list is the "retry" .link-btn in .side-empty */
html[data-theme="dark"] .side-list button:hover { background: var(--dk-hover); }

/* conversation rows */
html[data-theme="dark"] .conv { border-bottom-color: var(--dk-line); }
html[data-theme="dark"] .conv:hover { background: var(--dk-hover); }
html[data-theme="dark"] .conv.is-active { background: var(--dk-brand-bg); box-shadow: inset 3px 0 0 var(--dk-brand); }
/* presence-dot ring was a white 2px border — seat it on the surface instead
   (applies to sidebar rows and the .chat-head avatar, both on --dk-surface) */
html[data-theme="dark"] .conv-avatar .dot { border-color: var(--dk-surface); }
html[data-theme="dark"] .conv-name .deact { color: var(--dk-muted); }
/* unread count pill: remapped --green (#4ade80) needs dark ink for AA */
html[data-theme="dark"] .conv-badge { background: var(--green); color: #052e16; }

/* ---- Conversation header --------------------------------------------------- */
/* crm-premium.css re-paints .chat-head with a #fafbfc->#fff gradient and a
   #f1f5f9 border; the `background` shorthand here clears that gradient while
   leaving its layout properties (padding / justify-content) alone.           */
html[data-theme="dark"] .chat-head { background: var(--dk-surface); border-bottom-color: var(--dk-line); color: var(--dk-ink); }
html[data-theme="dark"] .chat-back { color: var(--dk-ink2); }
html[data-theme="dark"] .chat-back:hover { background: var(--dk-hover); }

/* ---- Empty / placeholder states ------------------------------------------- */
html[data-theme="dark"] .main-placeholder { color: var(--dk-muted); }
html[data-theme="dark"] .main-placeholder h2 { color: var(--dk-ink2); }
html[data-theme="dark"] .chat-empty-msg { background: var(--dk-surface3); border-color: var(--dk-line2); color: var(--dk-muted); }

/* ---- Message list ---------------------------------------------------------- */
/* polish block flattened the dotted pattern to #eef2f8 — keep it flat, dark */
html[data-theme="dark"] .messages { background: var(--dk-bg); }
html[data-theme="dark"] .day-sep {
    background: var(--dk-surface3);
    border-color: var(--dk-line2);
    color: var(--dk-ink2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .msg .bubble { box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* their bubbles: white -> dark raised surface with light text (mine stay blue) */
html[data-theme="dark"] .msg.is-theirs .bubble {
    background: var(--dk-surface2);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .msg .meta  { color: var(--dk-muted); }
html[data-theme="dark"] .msg .ticks { color: var(--dk-muted); }
html[data-theme="dark"] .msg .ticks.is-read { color: #38bdf8; }
html[data-theme="dark"] .load-older { background: var(--dk-surface3); border-color: var(--dk-line2); color: var(--dk-brand); }
html[data-theme="dark"] .load-older:hover { background: var(--dk-brand-bg); }
html[data-theme="dark"] .load-older:disabled { color: var(--dk-muted); }

/* 6px scrollbars: the global thumb recipe (2px transparent border +
   content-box clip) would leave a 2px sliver at this width — paint these two
   plainly. The :hover pair is needed because the global :hover rule re-applies
   the border at the same specificity (0,2,2).                                 */
html[data-theme="dark"] .side-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .messages::-webkit-scrollbar-thumb { background: #2f3e58; border: 0; background-clip: border-box; border-radius: 999px; }
html[data-theme="dark"] .side-list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .messages::-webkit-scrollbar-thumb:hover { background: #3f5075; border: 0; background-clip: border-box; }

/* ---- Composer -------------------------------------------------------------- */
html[data-theme="dark"] .compose { background: var(--dk-surface); border-top-color: var(--dk-line); }
html[data-theme="dark"] .compose textarea { background: var(--dk-input); color: var(--dk-ink); border-color: var(--dk-line2); }
/* page rule `.compose textarea:focus{background:#fff}` (0,2,1) outranks the
   global base `textarea` rule (0,1,2) — keep the focused composer dark        */
html[data-theme="dark"] .compose textarea:focus {
    background: var(--dk-input);
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 3px rgba(91, 156, 255, .25);
}
html[data-theme="dark"] .compose button:disabled { background: var(--dk-line2); color: var(--dk-muted); box-shadow: none; }
html[data-theme="dark"] .compose-err {
    background: var(--dk-bad-bg);
    color: var(--dk-bad-ink);
    border-top-color: rgba(248, 113, 113, .35);
}

/* ---- New-group modal ------------------------------------------------------- */
html[data-theme="dark"] .overlay { background: rgba(2, 6, 23, .72); }
html[data-theme="dark"] .modal {
    background: var(--dk-surface);
    color: var(--dk-ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px var(--dk-line2);
}
/* .modal-head is already the dark #0b1220 strip — just seat it on the surface */
html[data-theme="dark"] .modal-head { border-bottom: 1px solid var(--dk-line); }
html[data-theme="dark"] .modal-body label.field span { color: var(--dk-ink2); }
/* "Members" caption is an inline-styled span (color:#475569) */
html[data-theme="dark"] .modal-body span[style*="color:#475569"] { color: var(--dk-ink2) !important; }
html[data-theme="dark"] .modal-body label.field input:focus { box-shadow: 0 0 0 2px rgba(91, 156, 255, .28); }
html[data-theme="dark"] .member-row { border-bottom-color: var(--dk-line); color: var(--dk-ink); }
html[data-theme="dark"] .member-row:hover { background: var(--dk-hover); }
html[data-theme="dark"] .member-row small { color: var(--dk-muted); }
html[data-theme="dark"] .modal-err { color: var(--dk-bad-ink); }

/* ---- Secondary buttons ----------------------------------------------------- */
html[data-theme="dark"] .btn-light { background: var(--dk-surface2); color: var(--dk-ink); border-color: var(--dk-line2); }
html[data-theme="dark"] .btn-light:hover { background: var(--dk-hover); }
html[data-theme="dark"] .btn-primary:disabled { background: var(--dk-line2); color: var(--dk-muted); }


/* ===================== BLOCK: documents ===================== */
/* =========================================================================
   documents.php — dark overrides
   -------------------------------------------------------------------------
   Page tokens (--ink/--muted/--line/--blue) are remapped by the shared
   palette above, so only the hard-coded light colours from the page's inline
   <style> are handled here. The topbar strip and its glass ✕ Close button
   (crm-premium.css) are already dark and are kept as-is.
   ========================================================================= */

/* ---- Topbar: #0b1220 is almost the same as the dark page bg (#0a1020),
        so give the strip a divider to keep it visually separated -------- */
html[data-theme="dark"] .topbar {
    border-bottom: 1px solid var(--dk-line);
}

/* ---- Flash / error alerts (were #eff6ff / #fef2f2 with dark ink) ------ */
html[data-theme="dark"] .alert {
    background: var(--dk-brand-bg);
    border-color: rgba(91, 156, 255, .35);
    color: #93c5fd;
}
html[data-theme="dark"] .alert.is-err {
    background: var(--dk-bad-bg);
    border-color: rgba(248, 113, 113, .35);
    color: var(--dk-bad-ink);
}

/* ---- Admin upload card (was #fff) ------------------------------------- */
html[data-theme="dark"] .upload-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    color: var(--dk-ink);
    box-shadow: var(--sh-1);
}

/* File picker: the page paints a light dashed box (#f6f9fc / #cfd9e6) that
   the global input rule intentionally skips ([type=file]), while the global
   file-input rule still lightens the text — light-on-light without this. */
html[data-theme="dark"] input[type="file"] {
    background: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink2);
}
/* (0,3,1): outranks the page's .upload-card input[type=file] { color:#475569 }
   instead of tying with it at (0,2,1) and relying on stylesheet order. */
html[data-theme="dark"] .upload-card input[type="file"] {
    color: var(--dk-ink2);
}
html[data-theme="dark"] input[type="file"]:focus-visible {
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 2px rgba(91, 156, 255, .25);
    outline: none;
}
/* "Choose files" button was #0b1220 — invisible on the dark input; raise it */
html[data-theme="dark"] input[type="file"]::file-selector-button {
    background: var(--dk-surface3);
    color: var(--dk-ink);
    border: 1px solid var(--dk-line2);
}
html[data-theme="dark"] input[type="file"]::file-selector-button:hover {
    background: #27364f;
    border-color: #3a4a66;
}

/* Primary Upload button: keep it a blue primary, but --blue remaps to
   #5b9cff which is only ~3:1 against white text. #2563eb (the page's
   original blue) is 5.2:1 (AA). Because this selector (0,2,2) outranks the
   page's :hover / :disabled rules (0,2,1), both are re-declared here. */
html[data-theme="dark"] .upload-card button {
    background: #2563eb;
    color: #fff;
}
html[data-theme="dark"] .upload-card button:hover { background: #1d4ed8; }
html[data-theme="dark"] .upload-card button:disabled {
    background: var(--dk-surface3);
    color: var(--dk-muted);
}
/* progress track (was #e2e8f0); the fill uses --blue which is remapped */
html[data-theme="dark"] .upload-progress { background: var(--dk-line2); }

/* ---- Toolbar search pill (page sets background:#fff at (0,2,1)) ------- */
html[data-theme="dark"] .toolbar input[type="search"] {
    background-color: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
/* the page's own :focus (0,3,1) beats the global dark focus ring (0,2,1) */
html[data-theme="dark"] .toolbar input[type="search"]:focus {
    border-color: var(--dk-brand);
    box-shadow: 0 0 0 2px rgba(91, 156, 255, .25);
}

/* ---- Document list (table, and the same class wrapping the empty state) */
html[data-theme="dark"] .doc-table {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    box-shadow: var(--sh-1);
}
/* header was #1e293b / #e2e8f0 — already dark, nudged onto the palette.
   td border-top (#f1f5f9) is already remapped by the global table td rule. */
html[data-theme="dark"] .doc-table th {
    background: var(--dk-surface3);
    color: var(--dk-ink2);
}
/* row hover was #f8fafc */
html[data-theme="dark"] .doc-table tr:hover td { background: var(--dk-hover); }

/* ---- Row action buttons: Open / Download / Rename / Delete (were #fff) - */
html[data-theme="dark"] .doc-actions a,
html[data-theme="dark"] .doc-actions button {
    background: var(--dk-surface2);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] .doc-actions a:hover,
html[data-theme="dark"] .doc-actions button:hover {
    background: var(--dk-surface3);
    border-color: #3a4a66;
}
/* Delete: was #b91c1c on #fecaca border, #fef2f2 hover.
   (0,3,1) / (0,4,1) outrank the base button rules above (0,2,2) / (0,3,2). */
html[data-theme="dark"] .doc-actions .danger {
    color: var(--dk-bad-ink);
    border-color: rgba(248, 113, 113, .35);
}
html[data-theme="dark"] .doc-actions .danger:hover {
    background: var(--dk-bad-bg);
    border-color: rgba(248, 113, 113, .55);
}


/* ===================== BLOCK: pitch ===================== */
/* =========================================================================
   pitch.php — dark-mode overrides
   Page tokens (--ink/--muted/--line/--blue) are already remapped; only the
   hard-coded light colours from the page's inline <style> and inline
   style="" attributes are handled here. The generated e-mail preview
   (.preview / #pitchPreview / #tplPreview) is deliberately kept as a WHITE
   sheet — the template markup is inline-coloured navy for Outlook/Gmail and
   is copied verbatim to clients, so it must look exactly as they will see it.
   ========================================================================= */

/* ---- Hero tab strip: the hero and the inactive tabs are already dark and
        untouched. Only the ACTIVE tab needs work — in light mode it matched
        the light page background (#f8fafc), which no longer exists. ---- */
html[data-theme="dark"] .tabs a.active {
    background: var(--dk-surface2);
    color: #fff;
    box-shadow: inset 0 2px 0 var(--dk-brand);
}

/* ---- Cards: surface/border/text handled globally; deepen the shadow ---- */
html[data-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 8px 24px -14px rgba(0, 0, 0, .6);
}

/* ---- Flash / alerts (.flash before .flash.err — order matters) ---- */
html[data-theme="dark"] .flash {
    background: var(--dk-ok-bg);
    border-color: rgba(74, 222, 128, .35);
    color: var(--dk-ok-ink);
}
html[data-theme="dark"] .flash.err {
    background: var(--dk-bad-bg);
    border-color: rgba(248, 113, 113, .4);
    color: var(--dk-bad-ink);
}

/* ---- Neutral / secondary buttons. A plain `.btn` override (0,2,1) would
        outrank the page's .btn.primary / .btn.green / .btn.ai (0,2,0) and
        wash them out, so the coloured variants are excluded explicitly.
        If a new coloured .btn variant is added to pitch.php, add it here. ---- */
html[data-theme="dark"] .btn:not(.primary):not(.green):not(.ai):not(.danger):not(.red) {
    background: var(--dk-surface2);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] .btn:not(.primary):not(.green):not(.ai):not(.danger):not(.red):hover {
    background: var(--dk-surface3);
    border-color: #3f5075;
}
html[data-theme="dark"] .btn.danger {
    background: var(--dk-bad-bg);
    border-color: rgba(248, 113, 113, .4);
    color: var(--dk-bad-ink);
}
html[data-theme="dark"] .btn.danger:hover {
    background: rgba(248, 113, 113, .26);
    border-color: rgba(248, 113, 113, .55);
}

/* ---- Plain links inside cards. The page has no anchor rule, so these would
        fall back to the UA's #0000ee on a dark surface. Anchors that carry
        style="color:inherit" (flash "Open lead", AI-not-configured note)
        are inline-styled and therefore unaffected. ---- */
html[data-theme="dark"] .empty a,
html[data-theme="dark"] .f small a { color: var(--dk-brand); }

/* ---- Empty states / dashed boxes ---- */
html[data-theme="dark"] .empty {
    background: rgba(255, 255, 255, .02);
    border-color: var(--dk-line2);
}

/* ---- New Mail form: pricing sub-grid (#f8fafc / #e2e8f0) ---- */
html[data-theme="dark"] .price-grid {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
}

/* ---- Read-only Continent input carries inline style="background:#f8fafc";
        the global input[readonly] rule loses to the inline attribute, so
        !important is required here. ---- */
html[data-theme="dark"] .f input[readonly][style*="background:#f8fafc"] {
    background: #0c1424 !important;
    color: var(--dk-muted);
}

/* ---- "Add this lead to the CRM" green box ---- */
html[data-theme="dark"] .lead-box {
    background: var(--dk-ok-bg);
    border-color: rgba(74, 222, 128, .45);
}
html[data-theme="dark"] .lead-box-head b { color: var(--dk-ok-ink); }
html[data-theme="dark"] .lead-box-head span { color: #9ccfae; }
html[data-theme="dark"] .lead-box > small { color: #9ccfae; }

/* ---- AI Autofill indigo box ---- */
html[data-theme="dark"] .ai-box {
    background: linear-gradient(160deg, rgba(99, 102, 241, .16), rgba(139, 92, 246, .12));
    border-color: rgba(129, 140, 248, .5);
}
html[data-theme="dark"] .ai-box-head b { color: #c7d2fe; }
html[data-theme="dark"] .ai-box-head span { color: #a5b4fc; }
/* textarea bg/text come from the global rule; keep its indigo identity */
html[data-theme="dark"] .ai-box textarea { border-color: rgba(129, 140, 248, .45); }
html[data-theme="dark"] .ai-box textarea:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, .28);
}
/* JS sets aiStatus.style.color = '#b91c1c' on error. The CSSOM serialises
   that into the attribute as "color: rgb(185, 28, 28);", so the rgb form is
   what actually has to be matched; the hex form is kept for safety.
   Success/neutral state clears the colour ('') and is unaffected. */
html[data-theme="dark"] .ai-status[style*="185, 28, 28"],
html[data-theme="dark"] .ai-status[style*="b91c1c"] { color: var(--dk-bad-ink) !important; }

/* ---- Amber inline notes (style="color:#b45309"). Targeted per element so
        the rule can never reach into the white .preview sheet:
        · .ai-box small   — "AI is not configured yet" (New Mail)
        · .pc-body small  — "All tiers are ~40% off" (price chart)
        · .f small b      — "No names yet — add them under Sender Names"
        · .f > span small — "(customised)" next to AI Instructions ---- */
html[data-theme="dark"] .ai-box small[style*="#b45309"],
html[data-theme="dark"] .pc-body small[style*="#b45309"],
html[data-theme="dark"] .f small b[style*="#b45309"],
html[data-theme="dark"] .f > span small[style*="#b45309"] { color: var(--dk-warn-ink) !important; }

/* ---- Standard Price Chart panel (inline and .pc-float variants).
        td/th dividers are already handled by the global table rules. ---- */
html[data-theme="dark"] .price-chart {
    background: var(--dk-surface2);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .price-chart summary {
    color: var(--dk-ink);
    background: var(--dk-surface3);
}
/* :hover is declared BEFORE .pc-hit / .pc-applied (same specificity) so a
   highlighted row keeps its tint under the pointer, as in light mode. */
html[data-theme="dark"] .price-chart tbody tr:hover { background: var(--dk-hover); }
html[data-theme="dark"] .price-chart tbody tr.pc-hit {
    background: var(--dk-warn-bg);
    box-shadow: inset 3px 0 0 #fbbf24;
}
html[data-theme="dark"] .price-chart tbody tr.pc-applied {
    background: var(--dk-ok-bg);
    box-shadow: inset 3px 0 0 #4ade80;
}
html[data-theme="dark"] .pc-strike { color: var(--dk-bad-ink); opacity: .85; }
html[data-theme="dark"] .pc-dis { color: var(--dk-ok-ink); }
html[data-theme="dark"] .price-chart.pc-float {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px var(--dk-line2);
}

/* ---- Result card: From / Subject meta strip ---- */
html[data-theme="dark"] .meta b { color: var(--dk-muted); }
html[data-theme="dark"] .meta .val {
    background: var(--dk-input);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] .copied { color: var(--dk-ok-ink); }

/* ---- E-mail preview (#pitchPreview, #tplPreview) — kept as a WHITE sheet.
        The template is inline-coloured navy (#002060 / #1e1b4b) with a
        #3A3A3A/white field grid for mail clients; it would be unreadable on
        a dark surface. color-scheme:light gives it a light scrollbar. The
        global dark rules for .card h2/h3/small, code and td/th borders are
        neutralised inside it so a custom template renders exactly as it
        will in the mail. ---- */
html[data-theme="dark"] .preview {
    background: #fff;
    color: #0f172a;
    color-scheme: light;
    border-color: var(--dk-line2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 12px 28px -14px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .card .preview h1,
html[data-theme="dark"] .card .preview h2,
html[data-theme="dark"] .card .preview h3,
html[data-theme="dark"] .card .preview h4,
html[data-theme="dark"] .card .preview small { color: inherit; }
html[data-theme="dark"] .card .preview code { background: transparent; color: inherit; }
html[data-theme="dark"] .card .preview td,
html[data-theme="dark"] .card .preview th { border-color: currentColor; }
html[data-theme="dark"] .preview::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* ---- Settings: list rows, chips, sender-name pills ---- */
html[data-theme="dark"] .list-row { border-top-color: var(--dk-line); }
html[data-theme="dark"] .chip {
    background: var(--dk-brand-bg);
    color: #a5c4ff;
    border-color: rgba(91, 156, 255, .35);
}
/* Sender-name pill: <form style="background:#f8fafc;border:1px solid var(--line)"> */
html[data-theme="dark"] #names form[style*="background:#f8fafc"] {
    background: var(--dk-surface2) !important;
    border-color: var(--dk-line2) !important;
    color: var(--dk-ink);
}
/* Inline-styled MY_NAME chip in the Sender Names heading */
html[data-theme="dark"] .card h2 code[style*="background:#eef2ff"] {
    background: var(--dk-brand-bg) !important;
    color: #a5c4ff !important;
}


/* ===================== BLOCK: pricing ===================== */
/* =============================================================================
   pricing.php — Discount Price Calculator (dark overrides)
   -----------------------------------------------------------------------------
   The page tokens (--ink / --muted / --line) are already remapped by the shared
   palette, and the body background + generic inputs are handled by the global
   rules above. Only the hard-coded light colours in the page's own <style>
   (lines 82-127) are overridden here. The hero strip, "Back to CRM" link and
   "✕ Close" capsule are already dark / glass (crm-premium.css) and are
   intentionally untouched. crm-premium.css has no .price-* rules.
   ============================================================================= */

/* ---- Calculator card ------------------------------------------------------ */
/* page: .price-card{background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.06)}
   (h2 inherits the remapped --ink, .sub uses the remapped --muted: no rule) */
html[data-theme="dark"] .price-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 28px -14px rgba(0, 0, 0, .65);
}

/* ---- Input fields --------------------------------------------------------- */
/* caption was hard-coded #475569 (slate) — unreadable on the dark card.
   The number inputs themselves are covered by the global input rule (0,6,2),
   which already beats the page's `.price-field input{background:#fff}` (0,1,1);
   the page's blue :focus ring (0,2,1) is likewise beaten by the global
   input:focus (0,2,2). <small> uses the remapped --muted. */
html[data-theme="dark"] .price-field span { color: var(--dk-ink2); }

/* ---- Result panel (green accent kept, tinted for dark) -------------------- */
html[data-theme="dark"] .price-result {
    background: var(--dk-ok-bg);                   /* was #f0fdf4 */
    border-color: rgba(74, 222, 128, .28);         /* was #bbf7d0 */
}
/* row captions + the <b> amounts inherit this (was #475569) */
html[data-theme="dark"] .price-result-row { color: var(--dk-ink2); }
/* "− saving" amount: keep the red meaning, lift it for contrast (was #b91c1c) */
html[data-theme="dark"] .price-save { color: var(--dk-bad-ink); }

/* Total row: dashed divider (#86efac) + dark-green text (#14532d) -> light green */
html[data-theme="dark"] .price-result-row.total {
    border-top-color: rgba(74, 222, 128, .45);
    color: var(--dk-ok-ink);
}
/* the global `label` rule (0,1,1) would grey this caption out; keep it green */
html[data-theme="dark"] .price-result-row.total label { color: var(--dk-ok-ink); }

/* Discounted-price input: the global input rule (0,6,2) forces --dk-input bg and
   --dk-ink text; the id selector (1,3,2) outranks it so the payable number stays
   green. (page: .price-result-row.total input{background:#fff;color:#15803d;
   border:1px solid #86efac}) */
html[data-theme="dark"] .price-result-row.total input#priceFinal {
    background-color: #0e1c16;                     /* green-tinted input bg */
    color: var(--dk-ok-ink);
    border-color: rgba(74, 222, 128, .45);
}
html[data-theme="dark"] .price-result-row.total input#priceFinal::placeholder {
    color: rgba(134, 239, 172, .45);
}
html[data-theme="dark"] .price-result-row.total input#priceFinal:focus {
    border-color: #4ade80;                         /* was #16a34a */
    box-shadow: 0 0 0 2px rgba(74, 222, 128, .28);
}
html[data-theme="dark"] .price-result-hint {      /* was #166534 */
    color: var(--dk-ok-ink);
    opacity: .82;
}

/* ---- Actions (Reset — light / secondary button) --------------------------- */
/* page: .price-actions button{background:#fff;color:var(--ink)} + hover #f1f5f9 */
html[data-theme="dark"] .price-actions button {
    background: var(--dk-surface2);
    color: var(--dk-ink);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .price-actions button:hover {
    background: var(--dk-hover);
    border-color: #3f5075;
}
html[data-theme="dark"] .price-actions button:focus-visible {
    outline: 2px solid var(--dk-brand);
    outline-offset: 2px;
}


/* ===================== BLOCK: calculations ===================== */
/* =========================================================================
   calculations.php — dark-mode overrides
   -------------------------------------------------------------------------
   Page tokens (--ink / --muted / --line / --header-bg / --inr-*) are already
   remapped in section 1, so every rule that uses them needs nothing. This
   block only re-colours the hard-coded light values in the page's <style>.

   Solid section tints used below (solid, not rgba, so nested rows / hover
   states do not compound on top of each other):
     amber   #2b2410  expense sections, INR-flavoured surfaces
     green   #0e2a1f  income sections
     orange  #3d2314  batched INR cells / warm hover
     blue    #1c3358  USD→INR rate-preview cells

   Specificity note — the global input rule
     html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"])
       :not([type="file"]):not([type="range"]):not([type="color"])
   weighs (0,6,2) and therefore outranks every plain-class input rule in this
   page (.bank-add-desc, .batch-inr-input, .calc-inr-input, …). Where a
   coloured border / tint / ink is part of the page's meaning, the same :not()
   chain is mirrored on a more specific selector (0,8,2) so it wins without
   !important. Because that (0,8,2) rule also outranks the global
   html[data-theme="dark"] input:focus (0,2,2) for border-color, each of those
   inputs gets its own :focus rule so the ring matches the border colour.
   ========================================================================= */

/* ---- Controls bar: month picker + USD→INR rate panel -------------------- */
html[data-theme="dark"] .calc-controls label { color: var(--dk-ink2); }
html[data-theme="dark"] .calc-rate-wrap {
    background: var(--dk-brand-bg);
    border-color: rgba(91, 156, 255, .35);
    color: #a5c4ff;
}
html[data-theme="dark"] .calc-rate-label { color: #a5c4ff; }
/* blue border on the rate input (global rule would make it --dk-line2) */
html[data-theme="dark"] .calc-rate-wrap input.calc-inr-rate:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    border-color: rgba(91, 156, 255, .5);
}
html[data-theme="dark"] .calc-rate-wrap input.calc-inr-rate:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus {
    border-color: var(--dk-brand);
}
html[data-theme="dark"] .calc-rate-status { color: var(--dk-ok-ink); }
html[data-theme="dark"] .calc-rate-status.is-error { color: var(--dk-bad-ink); }

/* ---- DB error banner ---------------------------------------------------- */
html[data-theme="dark"] .calc-error {
    background: var(--dk-bad-bg);
    border-color: rgba(248, 113, 113, .4);
    color: var(--dk-bad-ink);
}

/* ---- Main reconciliation table ----------------------------------------- */
html[data-theme="dark"] .calc-table-wrap {
    background: var(--dk-surface);
    border-color: var(--dk-line2);
}
/* yellow "Excel" banner → deep amber with the INR ink (page text token is
   now light, so leaving the #fde047 background would give light-on-yellow) */
html[data-theme="dark"] .calc-table thead.banner th {
    background: var(--inr-bg);
    color: var(--inr-ink);
    border-color: #5a4a14;
}
html[data-theme="dark"] .calc-table thead.sums th {
    background: #2b2410;
    color: var(--dk-ink);
    border-color: #4a4014;
}
html[data-theme="dark"] .calc-table thead.sums th.inr-total { color: var(--dk-bad-ink); }
/* column header strip: lift it off the body rows and swap the #0f172a
   borders (invisible on dark) for the raised-line token */
html[data-theme="dark"] .calc-table thead.cols th {
    background: var(--dk-surface3);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .calc-table thead.cols th.inr-col {
    background: var(--inr-bg-hover);
    color: var(--inr-ink);
}
html[data-theme="dark"] .calc-table tbody td { background: var(--dk-surface); }
html[data-theme="dark"] .calc-table tbody tr:hover td { background: var(--dk-hover); }
html[data-theme="dark"] .calc-table tbody td.mode { color: var(--dk-ink2); }
html[data-theme="dark"] .calc-table tbody td.empty-state { color: var(--dk-muted); }

/* Inline INR editor (JS swaps it into the cell). The global input rule
   outranks .calc-inr-input and would paint the text --dk-ink; keep the
   amber INR ink and drop the global blue focus ring — the cell already
   draws its own amber outline */
html[data-theme="dark"] .calc-inr-cell input.calc-inr-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    background-color: var(--dk-input);
    color: var(--inr-ink);
}
html[data-theme="dark"] .calc-inr-input:focus {
    border-color: transparent;
    box-shadow: none;
}

/* INR cell — rate-preview state (page uses !important on its tint) */
html[data-theme="dark"] .calc-inr-cell.is-rate-preview {
    background: #1c3358 !important;
    color: #bfdbfe;
    outline-color: var(--dk-brand);
}
/* INR cell — batched share. The base .calc-inr-cell sets its background
   with !important, so the tint must too; text was #7c2d12 (unreadable on
   dark amber) → orange-300 */
html[data-theme="dark"] .calc-inr-cell.is-batched {
    background: #3d2314 !important;
    color: #fdba74;
}
html[data-theme="dark"] .calc-inr-cell.is-batched:hover { background: #4a2a18 !important; }

/* ARSIND_CC "%" hold badge pinned inside the INR cell */
html[data-theme="dark"] .cc-hold-btn {
    background: var(--dk-warn-bg);
    color: var(--dk-warn-ink);
    border-color: rgba(245, 158, 11, .6);
}
html[data-theme="dark"] .cc-hold-btn:hover {
    background: rgba(251, 191, 36, .32);
    border-color: #f59e0b;
}

/* ---- Bank breakdown: empty state, cards, sections ---------------------- */
html[data-theme="dark"] .bank-empty,
html[data-theme="dark"] .batch-empty {
    background: var(--dk-surface);
    border-color: var(--dk-line2);
}
html[data-theme="dark"] .bank-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -14px rgba(0, 0, 0, .6);
}
/* navy / brown / indigo card heads are already dark — add a hairline so
   they still read as a header against the dark card body */
html[data-theme="dark"] .bank-card-head,
html[data-theme="dark"] .batch-pending-head { border-bottom: 1px solid var(--dk-line2); }

html[data-theme="dark"] .bank-section { border-bottom-color: var(--dk-line); }
html[data-theme="dark"] .bank-incomes-section  { background: #0e2a1f; }   /* was #dcfce7 */
html[data-theme="dark"] .bank-expenses-section { background: #2b2410; }   /* was #fef9c3 */
/* Global Adjustments card: Income | Expense divider (≥720px only) */
html[data-theme="dark"] .bank-card--global > .bank-section.bank-incomes-section { border-bottom-color: var(--dk-line2); }
html[data-theme="dark"] .bank-section-head { color: var(--dk-muted); }

/* rows */
html[data-theme="dark"] .bank-row { border-bottom-color: var(--dk-line2); }
html[data-theme="dark"] .bank-row-email,
html[data-theme="dark"] .bank-row-desc { color: var(--dk-ink); }
html[data-theme="dark"] .bank-row-desc em,
html[data-theme="dark"] .bank-row-empty,
html[data-theme="dark"] .bank-card--salary .bank-empty-note { color: var(--dk-muted); }
html[data-theme="dark"] .bank-payment-batched .bank-row-email { color: #fdba74; }   /* was #7c2d12 */
/* amounts — keep the generic rule ABOVE the pos/neg ones (same specificity) */
html[data-theme="dark"] .bank-row-amount { color: var(--dk-ok-ink); }               /* was #0f5132 */
html[data-theme="dark"] .bank-section-sum-neg,
html[data-theme="dark"] .bank-amount-neg { color: var(--dk-bad-ink); }
html[data-theme="dark"] .bank-section-sum-pos,
html[data-theme="dark"] .bank-amount-pos { color: var(--dk-ok-ink); }

/* row action buttons: × delete, ▲▼ reorder, ✎ edit */
html[data-theme="dark"] .bank-expense-del:hover,
html[data-theme="dark"] .bank-income-del:hover,
html[data-theme="dark"] .batch-history-del:hover {
    background: var(--dk-bad-bg);
    color: var(--dk-bad-ink);
}
html[data-theme="dark"] .bank-adj-up:hover,
html[data-theme="dark"] .bank-adj-down:hover {
    background: var(--dk-brand-bg);
    color: #a5c4ff;
}
html[data-theme="dark"] .bank-adj-edit:hover {
    background: var(--dk-ok-bg);
    color: var(--dk-ok-ink);
}

/* add-row forms: dimmed amber / green accents */
html[data-theme="dark"] .bank-add-expense { border-top-color: rgba(250, 204, 21, .45); }
html[data-theme="dark"] .bank-add-income  { border-top-color: rgba(74, 222, 128, .45); }
html[data-theme="dark"] .bank-add-expense input.bank-add-desc:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] .bank-add-expense input.bank-add-amount:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    border-color: rgba(250, 204, 21, .45);
}
html[data-theme="dark"] .bank-add-income input.bank-add-desc:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] .bank-add-income input.bank-add-amount:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    border-color: rgba(74, 222, 128, .45);
}
/* focus rings that match the amber / green borders (the global blue ring
   would clash with the coloured border the rules above preserve) */
html[data-theme="dark"] .bank-add-expense .bank-add-desc:focus,
html[data-theme="dark"] .bank-add-expense .bank-add-amount:focus { box-shadow: 0 0 0 2px rgba(250, 204, 21, .22); }
html[data-theme="dark"] .bank-add-income .bank-add-desc:focus,
html[data-theme="dark"] .bank-add-income .bank-add-amount:focus { box-shadow: 0 0 0 2px rgba(74, 222, 128, .22); }

/* "All banks combined" ribbon — #0f172a vanishes on the dark page */
html[data-theme="dark"] .bank-grand-total {
    background: var(--dk-surface3);
    border: 1px solid var(--dk-line2);
}

/* ---- Pending withdrawals ----------------------------------------------- */
html[data-theme="dark"] .batch-pending-wrap,
html[data-theme="dark"] .batch-history-wrap {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .batch-pending-table thead th,
html[data-theme="dark"] .batch-history-table thead th {
    background: var(--dk-surface2);
    color: var(--dk-muted);
    border-bottom-color: var(--dk-line2);
}
html[data-theme="dark"] .batch-pending-table tbody td,
html[data-theme="dark"] .batch-history-table tbody td { border-bottom-color: var(--dk-line); }
html[data-theme="dark"] .batch-pending-table tbody tr:hover td { background: #2b2410; }   /* was #fef3c7 */
html[data-theme="dark"] .batch-history-table tbody tr:hover td { background: var(--dk-hover); }
html[data-theme="dark"] .batch-pending-mode,
html[data-theme="dark"] .batch-pending-usd,
html[data-theme="dark"] .batch-foot-modes,
html[data-theme="dark"] .batch-history-bank,
html[data-theme="dark"] .batch-pending-table tfoot b { color: #fdba74; }                 /* was #7c2d12 */
html[data-theme="dark"] .batch-pending-table tfoot td {
    background: #2b2410;
    border-top-color: rgba(252, 211, 77, .45);
    color: var(--dk-warn-ink);
}
html[data-theme="dark"] .batch-record-form {
    background: var(--dk-surface2);
    border-top-color: var(--dk-line);
}
/* amber-tinted "₹ received total" input */
html[data-theme="dark"] .batch-form-row input.batch-inr-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    background-color: #2b2410;
    border-color: rgba(252, 211, 77, .45);
    color: var(--dk-warn-ink);
}
html[data-theme="dark"] .batch-inr-input:focus {
    outline-color: #d97706;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, .25);
}

/* ---- Batch history ----------------------------------------------------- */
html[data-theme="dark"] .batch-history-title {
    background: var(--dk-surface2);
    color: var(--dk-ink2);
    border-bottom-color: var(--dk-line);
}
html[data-theme="dark"] .batch-history-sub,
html[data-theme="dark"] .batch-history-notes { color: var(--dk-muted); }
html[data-theme="dark"] .batch-no-notes { color: #5a6b85; }
html[data-theme="dark"] .batch-history-inr { color: var(--dk-ok-ink); }
/* click-to-edit cells (page uses !important on both tints) */
html[data-theme="dark"] .batch-history-editable:hover { background: var(--dk-brand-bg) !important; }
html[data-theme="dark"] .batch-history-editable.is-error { background: var(--dk-bad-bg) !important; }
html[data-theme="dark"] .batch-history-editable input.batch-history-edit-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    border-color: var(--dk-brand);
}
html[data-theme="dark"] .batch-history-inr.batch-history-editable input.batch-history-edit-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    color: var(--dk-ok-ink);
}

/* ---- ARSIND_CC 25% hold dialog ----------------------------------------- */
html[data-theme="dark"] .cc-overlay { background: rgba(2, 6, 16, .72); }
html[data-theme="dark"] .cc-modal {
    background: var(--dk-surface);
    border: 1px solid var(--dk-line2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
}
/* head strip is already dark (#0b1220) — keep it, just add a hairline */
html[data-theme="dark"] .cc-modal-head { border-bottom: 1px solid var(--dk-line2); }
html[data-theme="dark"] .cc-email { color: var(--dk-muted); }
html[data-theme="dark"] .cc-calc { border-color: var(--dk-line2); }
html[data-theme="dark"] .cc-calc-row { border-top-color: var(--dk-line); }
html[data-theme="dark"] .cc-calc-row.hold { color: var(--dk-bad-ink); }
html[data-theme="dark"] .cc-calc-row.net {
    background: var(--dk-ok-bg);
    color: var(--dk-ok-ink);
}
html[data-theme="dark"] .cc-modal-foot { border-top-color: var(--dk-line); }
html[data-theme="dark"] .cc-err { color: var(--dk-bad-ink); }
/* footer buttons — the neutral one goes dark; primary / danger are
   re-declared here because this prefixed .cc-btn rule (0,2,1) would
   otherwise outrank the page's own .cc-btn.primary / .cc-btn.danger (0,2,0) */
html[data-theme="dark"] .cc-btn {
    background: var(--dk-surface2);
    border-color: var(--dk-line2);
    color: var(--dk-ink);
}
html[data-theme="dark"] .cc-btn:hover { background: var(--dk-surface3); }
html[data-theme="dark"] .cc-btn.primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
html[data-theme="dark"] .cc-btn.primary:hover { background: #1d4ed8; }
html[data-theme="dark"] .cc-btn.danger {
    background: transparent;
    border-color: rgba(248, 113, 113, .45);
    color: var(--dk-bad-ink);
}
html[data-theme="dark"] .cc-btn.danger:hover { background: var(--dk-bad-bg); }


/* ===================== BLOCK: performance ===================== */
/* =========================================================================
   performance.php — Employee Performance Tracker
   -------------------------------------------------------------------------
   The page's own tokens (--ink, --muted, --line, --brand, --sh-1, --sh-2)
   are already remapped by the shared palette, so body text, the muted
   .sub / .scope-note / .stage-mini / .empty-note / .chart-fallback copy,
   the --brand .share-bar and every var(--line) border need nothing here.
   The filter selects are covered by the global select rule (0,1,2 beats the
   page's `.perf-filters select` 0,1,1; same for :focus). The hero strip
   (#0b1220) and its glass Close / theme-toggle buttons are left untouched.
   Only the hard-coded white surfaces and dark-slate text below are fixed.
   Chart.js canvases are transparent (the card shows through) — their axis,
   grid and doughnut-ring colours are set in JS, see integrator notes.
   ========================================================================= */

/* --- Filter bar -----------------------------------------------------------
   white card → surface; #475569 uppercase labels → secondary ink. */
html[data-theme="dark"] .perf-filters {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .perf-filters label span {
    color: var(--dk-ink2);
}

/* --- KPI tiles ------------------------------------------------------------
   white tile → surface; the #15803d revenue figure is too dim on a dark
   tile, so it takes the green tint ink. */
html[data-theme="dark"] .kpi {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}
html[data-theme="dark"] .kpi.kpi-usd b {
    color: var(--dk-ok-ink);
}

/* --- Chart cards ---------------------------------------------------------- */
html[data-theme="dark"] .chart-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}

/* --- Leaderboard card + table ---------------------------------------------
   thead: #f1f5f9 band with #475569 text → raised surface with secondary ink;
   tbody dividers #e2e8f0 → line; row hover #f8fafc → hover surface.
   The .empty-note lives inside .perf-table-card and inherits this surface. */
html[data-theme="dark"] .perf-table-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}
html[data-theme="dark"] table.perf th {
    background: var(--dk-surface2);
    color: var(--dk-ink2);
    border-bottom-color: var(--dk-line2);
}
html[data-theme="dark"] table.perf td {
    border-bottom-color: var(--dk-line);
}
html[data-theme="dark"] table.perf tr:hover td {
    background: var(--dk-hover);
}

/* --- Rank badges ----------------------------------------------------------
   Ranks 4+ use #e2e8f0 / #475569 (light grey, dark text) → raised grey with
   light text. Gold (rank-1), silver (rank-2) and bronze (rank-3) carry
   meaning and keep their medal colours — the :not() chain excludes them and
   outranks the page's tr.rank-N .rank-badge rules (0,2,1) regardless. */
html[data-theme="dark"] table.perf tr:not(.rank-1):not(.rank-2):not(.rank-3) .rank-badge {
    background: var(--dk-line2);
    color: var(--dk-ink);
}

/* --- Revenue cell — #15803d → green tint ink (same as the KPI) ------------ */
html[data-theme="dark"] .usd-cell {
    color: var(--dk-ok-ink);
}

/* ===================== BLOCK: calculations — USD spent + row reorder ===================== */
html[data-theme="dark"] .usd-spend-btn{background:rgba(91,156,255,.16);border-color:rgba(91,156,255,.45);color:#a5c4ff}
html[data-theme="dark"] .usd-spend-btn:hover{background:rgba(91,156,255,.32);border-color:#5b9cff}
html[data-theme="dark"] .calc-usd-cell.has-spent{color:#a5c4ff}
html[data-theme="dark"] .calc-spent-tag{color:#a5c4ff}
html[data-theme="dark"] .calc-move-up,
html[data-theme="dark"] .calc-move-down{background:var(--dk-surface2);border-color:var(--dk-line2);color:var(--dk-ink2)}
html[data-theme="dark"] .calc-move-up:hover,
html[data-theme="dark"] .calc-move-down:hover{background:var(--dk-hover);color:var(--dk-ink)}
html[data-theme="dark"] tr.calc-row-moved td{animation:none;background-color:rgba(91,156,255,.18)}

/* ===================== BLOCK: calculations — strikethrough mode ===================== */
html[data-theme="dark"] .calc-strike-btn{background:var(--dk-surface2);border-color:var(--dk-line2);color:var(--dk-ink2)}
html[data-theme="dark"] .calc-strike-btn:hover{background:var(--dk-hover);border-color:#3f5075}
html[data-theme="dark"] .calc-strike-btn .calc-strike-ico{color:#fb7185}
html[data-theme="dark"] .calc-strike-btn[aria-pressed="true"]{background:#9f1239;border-color:#be123c;color:#fff}
html[data-theme="dark"] body.strike-mode .calc-inr-cell:hover{outline-color:#fb7185}
html[data-theme="dark"] .calc-inr-cell.is-struck{color:#fda4af !important;text-decoration-color:#fb7185;opacity:.85}

/* ===================== BLOCK: pitch — multi-provider AI settings ===================== */
html[data-theme="dark"] .ai-prov-opt{background:var(--dk-surface2);border-color:var(--dk-line2);color:var(--dk-ink)}
html[data-theme="dark"] .ai-prov-opt.is-on{background:rgba(99,102,241,.18);border-color:#818cf8;color:#c7d2fe}
html[data-theme="dark"] .ai-prov-box{background:var(--dk-surface2);border-color:var(--dk-line2)}
html[data-theme="dark"] .ai-prov-box.is-active{background:rgba(99,102,241,.10);border-color:#6366f1}
html[data-theme="dark"] .ai-prov-box legend{color:#c7d2fe}
html[data-theme="dark"] .ai-prov-pick-lbl{color:var(--dk-muted)}
html[data-theme="dark"] .ai-research-opt{background:rgba(99,102,241,.12);border-color:#4f46e5;color:#c7d2fe}
html[data-theme="dark"] .ai-research-opt small{color:#a5b4fc}

/* ===================== BLOCK: calculations-inline-edit ===================== */
/* In-row editor for adjustment rows (pencil / double-click) */
html[data-theme="dark"] .bank-edit-desc,
html[data-theme="dark"] .bank-edit-amount { background: var(--dk-input); color: var(--dk-ink); border-color: var(--dk-line2); }
html[data-theme="dark"] .bank-income-row  .bank-edit-desc,
html[data-theme="dark"] .bank-income-row  .bank-edit-amount { border-color: rgba(74, 222, 128, .55); }
html[data-theme="dark"] .bank-expense-row .bank-edit-desc,
html[data-theme="dark"] .bank-expense-row .bank-edit-amount { border-color: rgba(250, 204, 21, .55); }
html[data-theme="dark"] .bank-edit-desc:focus,
html[data-theme="dark"] .bank-edit-amount:focus { border-color: var(--dk-brand); box-shadow: 0 0 0 3px rgba(96, 165, 250, .22); }
html[data-theme="dark"] .bank-row.has-error .bank-edit-amount { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .22); }
html[data-theme="dark"] .bank-edit-cancel { background: var(--dk-surface2); color: var(--dk-ink2); border-color: var(--dk-line2); }
html[data-theme="dark"] .bank-edit-cancel:hover { background: var(--dk-surface3); color: var(--dk-ink); }
html[data-theme="dark"] .bank-edit-err { color: #fca5a5; }
html[data-theme="dark"] .bank-edit-save:focus-visible,
html[data-theme="dark"] .bank-edit-cancel:focus-visible { box-shadow: 0 0 0 2px #0a1020, 0 0 0 4px rgba(96, 165, 250, .75); }

/* ===================== BLOCK: red buttons ===================== */
/* The generic `html[data-theme="dark"] .btn` rule above ties with style.css
   `.btn.red` on specificity and wins on order, turning every destructive
   button (Delete Lead in the drawer, Delete on the Admin page) into a grey
   pill. Restate the danger variant at (0,3,0). */
html[data-theme="dark"] .btn.red,
html[data-theme="dark"] .drawer .btn.red {
    background: linear-gradient(160deg, #ef4444, #b91c1c 70%);
    color: #ffffff;
    border-color: #991b1b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .btn.red:hover,
html[data-theme="dark"] .drawer .btn.red:hover {
    background: linear-gradient(160deg, #f87171, #dc2626 70%);
    border-color: #b91c1c;
    color: #ffffff;
}