/* ============================================================
   Dark-mode rescue layer.
   These rules patch component CSS in erp-shell.css that hardcoded
   light-mode hex values. Touching the existing rules risked
   breaking light mode; a sibling file with `[data-theme="dark"]`
   selectors is safe and reversible.

   Maintained one entry per visual surface — `.sidebar-card`,
   `.metric-card`, `.report-kpi-grid`, etc. When you spot a new
   "white patch in dark mode", add the corresponding selector
   here.
   ============================================================ */

[data-theme="dark"] {
    /* Default fallbacks for anything we missed below — keep at the
       top so a more specific selector still wins. */
    --shadow:    var(--shadow-sm);
    --shadow-md: var(--shadow-md);
}

/* ===== Card surfaces ===== */
[data-theme="dark"] .erp-card,
[data-theme="dark"] .erp-list-card,
[data-theme="dark"] .erp-card-head,
[data-theme="dark"] .erp-card-body,
[data-theme="dark"] .erp-card-foot,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .stat-strip article,
[data-theme="dark"] .kpi-tile,
[data-theme="dark"] .form-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .super-card,
[data-theme="dark"] .super-kpi {
    background: var(--surface-panel);
    color: var(--text);
    border-color: var(--border-default);
}

/* ===== Tables ===== */
[data-theme="dark"] table:not([data-keep-light]) {
    background: transparent;
    color: var(--text);
}
[data-theme="dark"] table:not([data-keep-light]) thead th,
[data-theme="dark"] .table-head,
[data-theme="dark"] .erp-table thead th {
    background: var(--surface-sunken);
    color: var(--text-muted);
    border-color: var(--border-default);
}
[data-theme="dark"] table:not([data-keep-light]) tbody td,
[data-theme="dark"] .erp-table tbody td {
    border-color: var(--border-default);
    color: var(--text);
}
[data-theme="dark"] table:not([data-keep-light]) tbody tr:hover {
    background: var(--surface-raised);
}

/* ===== Forms, inputs, labels (anywhere not yet token-driven) ===== */
[data-theme="dark"] .field span,
[data-theme="dark"] .field__label,
[data-theme="dark"] label > span {
    color: var(--text);
}
[data-theme="dark"] small.muted,
[data-theme="dark"] .muted,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .hint,
[data-theme="dark"] .help-text {
    color: var(--text-muted);
}
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--border-default);
}

/* ===== Side sheets, modals, popovers ===== */
[data-theme="dark"] .side-sheet,
[data-theme="dark"] .side-sheet__panel,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .popover,
[data-theme="dark"] dialog,
[data-theme="dark"] dialog.erp-modal {
    background: var(--surface-panel);
    color: var(--text);
    border-color: var(--border-default);
}

/* ===== Cards + popovers that had hardcoded white in erp-shell.css ===== */
/* The shell sheet bakes #fff into a handful of card and popover classes
   without a token. Without these overrides the cards render dark text
   on white in dark mode — unreadable. */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .erp-list-card,
[data-theme="dark"] .contact-filter-card,
[data-theme="dark"] .add-record-form,
[data-theme="dark"] .row-action-menu-items,
[data-theme="dark"] .erp-table-toolbar input,
[data-theme="dark"] .action-menu__panel,
[data-theme="dark"] .topbar-help__menu,
[data-theme="dark"] details[open] > div,
[data-theme="dark"] .erp-card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .sa-card,
[data-theme="dark"] .sa-imp-banner ~ * .erp-card {
    background: var(--surface-panel);
    color: var(--text);
    border-color: var(--border-default);
}

/* Text inputs / selects / textareas hosted inside dark-themed cards
   above. Without an explicit override they inherit black-on-white from
   the browser default. */
/* Action-menu items (.action-menu a, .action-menu button) bake
   `color: #111827` into erp-shell.css with higher specificity than the
   `details[open] > div` panel override above. Without this rule the
   panel goes dark but the labels stay near-black — invisible. Same
   story with the hover wash. */
[data-theme="dark"] .action-menu a,
[data-theme="dark"] .action-menu button {
    color: var(--text) !important;
}
[data-theme="dark"] .action-menu a:hover,
[data-theme="dark"] .action-menu button:hover {
    background: var(--surface-sunken) !important;
}
/* Danger items keep their tone but want a sensible dark hover wash. */
[data-theme="dark"] .action-menu .is-danger,
[data-theme="dark"] .action-menu button.is-danger {
    color: var(--tone-bad, #f87171) !important;
}

[data-theme="dark"] .erp-list-card input,
[data-theme="dark"] .erp-list-card select,
[data-theme="dark"] .erp-list-card textarea,
[data-theme="dark"] .contact-filter-card input,
[data-theme="dark"] .contact-filter-card select,
[data-theme="dark"] .add-record-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-theme="dark"] .add-record-form select,
[data-theme="dark"] .add-record-form textarea,
[data-theme="dark"] dialog input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-theme="dark"] dialog select,
[data-theme="dark"] dialog textarea,
[data-theme="dark"] .side-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-theme="dark"] .side-sheet select,
[data-theme="dark"] .side-sheet textarea {
    background: var(--surface-sunken);
    color: var(--text);
    border-color: var(--border-default);
}

/* Headings + body text that may sit on top of the dark cards.
   Several Blade snippets use inline color:#111 or color:#000 which
   render as black on dark surfaces — flush them to the token. */
[data-theme="dark"] dialog h1,
[data-theme="dark"] dialog h2,
[data-theme="dark"] dialog h3,
[data-theme="dark"] dialog h4,
[data-theme="dark"] .side-sheet h1,
[data-theme="dark"] .side-sheet h2,
[data-theme="dark"] .side-sheet h3,
[data-theme="dark"] .side-sheet h4,
[data-theme="dark"] .erp-list-card h1,
[data-theme="dark"] .erp-list-card h2,
[data-theme="dark"] .erp-list-card h3,
[data-theme="dark"] .erp-list-card h4,
[data-theme="dark"] .modal-card label,
[data-theme="dark"] dialog label,
[data-theme="dark"] .side-sheet label {
    color: var(--text);
}
[data-theme="dark"] dialog small,
[data-theme="dark"] .side-sheet small,
[data-theme="dark"] dialog .muted,
[data-theme="dark"] .side-sheet .muted {
    color: var(--text-muted);
}

/* ===== Toolbars, filters, tabs ===== */
[data-theme="dark"] .toolbar,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .sub-tabs,
[data-theme="dark"] .tab-bar {
    background: var(--surface-sunken);
    border-color: var(--border-default);
}
[data-theme="dark"] .toolbar-select,
[data-theme="dark"] .filter-bar select,
[data-theme="dark"] .filter-bar input {
    background: var(--surface-panel);
    color: var(--text);
    border-color: var(--border-default);
}

/* ===== Status pills + chips that bypassed --tone-*-bg ===== */
[data-theme="dark"] .pill,
[data-theme="dark"] .chip,
[data-theme="dark"] .badge-soft {
    background: var(--surface-sunken);
    color: var(--text);
    border-color: var(--border-default);
}
[data-theme="dark"] .pill.good,
[data-theme="dark"] .pill.success { background: var(--tone-good-bg); color: var(--tone-good); }
[data-theme="dark"] .pill.bad,
[data-theme="dark"] .pill.danger  { background: var(--tone-bad-bg);  color: var(--tone-bad); }
[data-theme="dark"] .pill.warn,
[data-theme="dark"] .pill.warning { background: var(--tone-warn-bg); color: var(--tone-warn); }
[data-theme="dark"] .pill.info    { background: var(--tone-info-bg); color: var(--tone-info); }

/* ===== Empty state + placeholders ===== */
[data-theme="dark"] .empty,
[data-theme="dark"] .erp-empty,
[data-theme="dark"] .placeholder {
    background: var(--surface-sunken);
    color: var(--text-muted);
    border-color: var(--border-default);
}

/* ===== Code blocks ===== */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--surface-sunken);
    color: var(--text-strong);
    border-color: var(--border-default);
}

/* ===== Cat tables (catalog) extra coverage ===== */
[data-theme="dark"] .cat-row,
[data-theme="dark"] .cat-cell { color: var(--text); border-color: var(--border-default); }

/* ===== Cobx combobox shell ===== */
[data-theme="dark"] .cbx-input { background: var(--surface-panel); color: var(--text); border-color: var(--border-default); }
[data-theme="dark"] .cbx-menu { background: var(--surface-raised); color: var(--text); border-color: var(--border-default); }
[data-theme="dark"] .cbx-option:hover,
[data-theme="dark"] .cbx-option.is-active { background: var(--surface-sunken); }
[data-theme="dark"] .cbx-empty { color: var(--text-muted); }

/* ============================================================
   Hero cards (19 report pages). Each page assigns inline
   `style="background:#dcfce7; color:#166534; border-left:4px solid #16a34a"`
   from a tone map (good/warn/bad/info). Those are LIGHT-mode pastels
   that render as glaring tinted blocks in dark mode with dark text
   that disappears against the pastel.
   We can't reach into 19 blade files cheaply, so match the inline
   colors via attribute selectors and ! important the overrides.
   WCAG: target text contrast >= 4.5:1 against the new tinted backdrop.
   ============================================================ */
[data-theme="dark"] [class$="-hero"][style*="#dcfce7"],
[data-theme="dark"] [class$="-hero"][style*="#DCFCE7"] {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #86efac !important;  /* WCAG AAA vs #0b1220 */
}
[data-theme="dark"] [class$="-hero"][style*="#fee2e2"],
[data-theme="dark"] [class$="-hero"][style*="#FEE2E2"] {
    background: rgba(248, 113, 113, 0.10) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] [class$="-hero"][style*="#fef3c7"],
[data-theme="dark"] [class$="-hero"][style*="#FEF3C7"] {
    background: rgba(251, 191, 36, 0.10) !important;
    color: #fde68a !important;
}
[data-theme="dark"] [class$="-hero"][style*="#e0e7ff"],
[data-theme="dark"] [class$="-hero"][style*="#E0E7FF"] {
    background: rgba(129, 140, 248, 0.12) !important;
    color: #c7d2fe !important;
}
/* Hero descendants frequently get a darker tone from inline styles
   too — these typically end up unreadable. Lift them to the parent. */
[data-theme="dark"] [class$="-hero"] strong,
[data-theme="dark"] [class$="-hero"] h2,
[data-theme="dark"] [class$="-hero"] [class*="__kicker"],
[data-theme="dark"] [class$="-hero"] [class*="__title"],
[data-theme="dark"] [class$="-hero"] [class*="__chunk"],
[data-theme="dark"] [class$="-hero"] [class*="__sub"] {
    color: inherit !important;
}

/* ============================================================
   Report filter rows. Each report defines its own filter wrapper
   (.it-filters, .pnl-filters, .sr-filters, .gl-filters, .al-filters,
   .cf-filters, .bs-filters …) plus a sibling field class. The
   uppercase label (`<span>PERIOD</span>`) and the form controls bake
   in hardcoded `color:#111`-class values which die in dark mode.
   ============================================================ */
[data-theme="dark"] [class$="-filters"] [class*="-field"] span,
[data-theme="dark"] [class*="-filter-row"] .field span,
[data-theme="dark"] [class*="-filter-row"] [class*="-field"] span,
[data-theme="dark"] [class$="-filters"] label > span {
    color: var(--text) !important;
}
[data-theme="dark"] [class$="-filters"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-theme="dark"] [class$="-filters"] select,
[data-theme="dark"] [class$="-filters"] textarea {
    background: var(--surface-sunken) !important;
    color: var(--text) !important;
    border-color: var(--border-default) !important;
}
/* "Compare to prior", "Only ever-sold" — checkbox pills inside the
   filter row. They bake `background: var(--surface-sunken)` for a
   light-mode well effect; in dark mode it's near-invisible against
   the dark card. Bump to --surface-raised for contrast. */
[data-theme="dark"] [class*="-field--check"],
[data-theme="dark"] [class$="-filters"] .checkbox-field {
    background: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
    color: var(--text) !important;
}

/* ============================================================
   Toolbar / sub-headers that bake `background: #f9fafb` (the light
   gray well used to separate a search/filter row above tables). In
   dark mode those bars render as bright white — the stock items page,
   sales register, expense table, etc. Match by the conventional
   `*-table-bar` and `*-bar` classes.
   ============================================================ */
[data-theme="dark"] .sr-table-bar,
[data-theme="dark"] [class$="-table-bar"],
[data-theme="dark"] .erp-card-head {
    background: var(--surface-sunken) !important;
    border-color: var(--border-default) !important;
    color: var(--text) !important;
}
[data-theme="dark"] [class$="-table-bar"] input,
[data-theme="dark"] [class$="-table-bar"] select {
    background: var(--surface-panel) !important;
    color: var(--text) !important;
    border-color: var(--border-default) !important;
}

/* ============================================================
   Generic dark-mode rescues for blade <style> blocks that hardcode
   `color: #111827` / `#111` / `#374151` on chips, kebabs, menu items,
   tile titles — too many sites to fix one-by-one, so target the most
   common naming conventions: kebab menus, menu items, chip-on,
   tile names.
   ============================================================ */
[data-theme="dark"] [class*="-kebab"]:not([class*="--on"]),
[data-theme="dark"] [class*="-menu__item"],
[data-theme="dark"] [class*="-pop"] button,
[data-theme="dark"] [class*="-pop"] a,
[data-theme="dark"] [class*="-pop"] label {
    color: var(--text) !important;
}
/* Pill-on / chip-on patterns: many pages do
   `.x-chip.is-on { background:#111827; color:#fff; }` — that black
   on dark surface looks fine but the off-state needs visible text. */
[data-theme="dark"] [class*="-chip"]:not(.is-on),
[data-theme="dark"] [class*="-btn"]:not([class*="--primary"]) {
    color: var(--text) !important;
}

/* ============================================================
   Tone-tinted KPI cards (.pnl-kpi--good, --bad). These typically use
   light tinted backgrounds in light mode and need a dark equivalent.
   The KPI value text uses --tone-good/--tone-bad which are dark hex
   on light bg — readable but low contrast on dark bg. Lift them.
   ============================================================ */
[data-theme="dark"] {
    --tone-good: #4ade80;   /* WCAG AA on #0b1220, vivid green */
    --tone-bad:  #f87171;   /* WCAG AA on #0b1220 */
    --tone-warn: #fbbf24;   /* WCAG AA on #0b1220 */
    --tone-info: #60a5fa;   /* WCAG AA on #0b1220 */

    /* Tell the browser to render native form controls + scrollbars
       in dark colours. Without this the OS-rendered <select>
       dropdown opens as a white popover with near-invisible dark
       option text. Sets the date-picker, scrollbar, and validation
       outline as well. */
    color-scheme: dark;
}

/* ============================================================
   Native <select> + <option> popovers. Many pages hardcode
   `color: #111` on the select itself; on Chrome/Edge (Windows)
   <option> inherits the parent's color, so the OS popover
   correctly opens dark (thanks to color-scheme above) but the
   options inside render as near-black-on-dark — readable only when
   the row is highlighted. Bind select + option text to the token
   regardless of wrapper class.
   ============================================================ */
[data-theme="dark"] select {
    color: var(--text) !important;
    background-color: var(--surface-panel);
}
[data-theme="dark"] option {
    background-color: var(--surface-panel);
    color: var(--text);
}
[data-theme="dark"] optgroup {
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    font-weight: 700;
}
[data-theme="dark"] option:checked,
[data-theme="dark"] option:hover {
    background-color: var(--accent-500);
    color: #ffffff;
}
[data-theme="dark"] option:disabled {
    color: var(--text-muted);
}