/* ARC LiftWeb — dark theme overrides.
 *
 * Activated by <html data-theme="dark">, set from the arc_theme cookie by a
 * bootstrap script in includes/nav.php (which also links this file on every
 * page that shows the nav). The toggle lives in the account dropdown.
 *
 * The pages style themselves with per-page inline <style> blocks over a very
 * consistent light palette, so this file re-skins that palette globally:
 *   #fff surfaces        -> --dk-surface
 *   #f8f9fa/#fafbfc/...  -> --dk-panel (page bg uses --dk-bg)
 *   #2c3e50/#222/#333    -> --dk-text
 *   #666/#868e96/...     -> --dk-muted
 *   #e9ecef/#eee/...     -> --dk-border
 * Brand reds and the pastel status chips are left alone — they read fine on
 * dark and carry their own dark text.
 *
 * Deliberately excluded: the quote document preview (.pv-page etc.) stays a
 * white A4 document in every theme (it IS the customer PDF), and everything
 * here is @media screen so printing is always light.
 *
 * Selector lists below were generated from the actual pages' style blocks —
 * when adding a new page, follow the same palette and it themes itself.
 */

@media screen {

html[data-theme="dark"] {
    color-scheme: dark;
    --dk-bg: #14171c;
    --dk-surface: #1d2129;
    --dk-panel: #242933;
    --dk-border: #2c323d;
    --dk-border-strong: #3a414d;
    --dk-text: #d7dbe2;
    --dk-muted: #98a1ae;
    --dk-input-bg: #202530;
    --dk-hover-red: #3d2129;
}

html[data-theme="dark"] body {
    background: var(--dk-bg);
    color: var(--dk-text);
}

/* ---- White surfaces -> dark surface --------------------------------- */
html[data-theme="dark"] :is(
#durCancel, .arc-modal, .arc-nav-dropdown, .arc-nav-tabs, .back-btn,
.bom-ver-pick select, .btn-danger-ghost, .btn-ghost, .card,
.col-pref-role-sel, .col-toggle-btn, .col-toggle-panel, .comp-qty,
.comp-results, .comp-search, .controls, .del-modal, .dev-row,
.dir-seg button, .done .ghost-btn, .dur-card, .edit-form input[type="text"],
.edit-form select, .f-in input, .f-in select, .filter-select, .fld input,
.fld select, .fld textarea, .gantt, .gantt .controls button, .gantt .left,
.gantt header.top, .header, .in, .job, .lifts-table, .list-del-modal,
.login-card, .merge-wrap select, .mfg-bulk-act.clear, .mfg-filter-chip,
.modal, .page-head, .part-del, .parts-search, .password-bar, .picker-list,
.q-btn-ghost, .q-card, .q-empty, .q-export, .q-status, .q-table-card,
.qb-combo-list, .qb-in, .qb-panel, .reason-btn, .req-as, .save-bar,
.search, .search-list, .sites-search, .stat-card, .sup-results, .tool,
.tpl-row, select.status, table.landings select
) {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}

/* ---- Light-grey panels / hovers / table heads ----------------------- */
html[data-theme="dark"] :is(
.action-pill, .add-mini, .add-part, .addopt-btn, .admin-lock,
.arc-filter-opt:hover, .arc-nav-menu-item.active, .arc-nav-soon,
.arc-nav-tabs .arc-nav-link.active, .bom-table th, .btn-clear-log:hover,
.btn-csv, .btn-del-cancel, .btn-sm-ghost, .card-edit-btn:hover,
.col-pref-btn, .col-toggle-btn:hover, .col-toggle-panel label:hover,
.device-table tbody tr:hover, .device-table thead, .edit-form,
.existing-table th, .gantt .row.lvl1, .history-table th,
.history-table tr:hover, .icon-btn:hover, .lift-edit-panel,
.lifts-table tbody tr:hover, .lifts-table th, .link-btn, .mfg-kpi,
.mfg-status-none, .mfg-toggle-btn:hover, .parts-table th, .photo-btn,
.pill, .pill-qty, .q-spec, .qb-add, .ro, .sidebar-header, .sites-table th,
.telemetry-card, .thumb-empty, .ver-chip, .viewer-empty, .you-pill,
tr.bom-row-alt > td, table.landings th, table.q-list th, table.qb-land th,
th, tr.grp td, .btn-ghost:hover, .back-btn:hover, .back-button:hover
) {
    background: var(--dk-panel);
    border-color: var(--dk-border);
    color: var(--dk-text);
}

/* ---- Main text ------------------------------------------------------- */
html[data-theme="dark"] :is(
.add-part, .arc-modal-body summary, .arc-modal-title, .arc-nav-account-name,
.arc-nav-dropdown-check, .arc-nav-dropdown-label, .arc-nav-menu-item,
.arc-nav-slider-value, .arc-nav-tabs .arc-nav-link, .back-btn, .back-button,
.bom-total-cost, .bom-ver-pick select, .btn-csv, .btn-del-cancel,
.btn-ghost, .btn-secondary, .btn-sm-ghost, .card h2, .card-title,
.col-pref-btn, .col-pref-role-sel, .col-toggle-btn, .comm-responses-label,
.comments-box, .comments-ro, .comp-qty, .comp-search,
.contact-block > strong, .contact-name, .device-name, .device-table th,
.device-title, .done .ghost-btn, .done p, .existing-table th, .f-in input,
.f-in select, .f-label, .f-refcode, .filter-select, .fld, .fld input,
.fld select, .fld textarea, .form-group label, .form-label,
.history-table th, .in, .info-value, .legend-title, .link-btn, .opt-val,
.page-head h1, .page-title, .parts-table th, .photo-btn, .popup-lift-name,
.o-ref, .preview-summary, .q-export, .q-ref, .q-savestate, .q-spec,
.q-toolbar .q-back, .qb-add, .qb-combo-empty, .qb-combo-item small,
.qb-field > label, .qb-note, .qb-sub, .qb-x, .reason-btn, .req-as, .ro,
.roles-checks label, .section-title, .sidebar-title, .sites-table th,
.tool, .unassigned-section .unassigned-heading, .ver-chip, input, label,
select.status, table.landings select, td, textarea, select, button
) {
    color: var(--dk-text);
}

/* ---- Muted text (kept muted, but readable on dark) ------------------- */
html[data-theme="dark"] :is(
.add-row label, .address-cell, .admin-lock, .apply-note,
.arc-modal-link.subtle, .arc-nav-account-role, .arc-nav-dropdown-note,
.arc-nav-menu-item-disabled, .arc-nav-slider-unit, .arc-nav-soon,
.auto-refresh-toggle, .basket-empty, .bom-filter-blank, .bom-note,
.bom-ver-pick, .c-head, .cap-desc, .card h2 .key, .card p, .card-edit-btn,
.col-pref-role-lbl, .combo-caret, .comm-desc, .comments-status,
.comp-chip-desc, .comp-opt-desc, .comp-results-empty, .contact-detail,
.contact-detail a, .detail-status, .dev-empty, .dev-sub, .device-subtitle,
.doc-pick-name, .doc-status, .edit-form label, .empty, .empty-lifts,
.empty-state, .es-loc-hint, .f-ref, .fld label, .fld-hint, .grp-caret,
.hint, .hint-drag, .hint-drag span, .imsi-readonly, .info-label, .job-meta,
.lift-ov-sub, .lift-picker-status, .linked-asm-desc, .login-note,
.meta-label, .mfg-hist-empty, .mfg-hist-table th, .mfg-kpi-lbl,
.mfg-view-label, .muted, .no-data, .no-results, .note, .page-head p,
.party .hint, .ta-item .h, .ta-none,
.page-sub, .parts-search-meta, .payload-preview, .picker-empty,
.picker-item small, .ping-feedback, .q-card .q-meta, .q-card .q-tag,
.q-count, .q-empty, .q-muted, .ref, .req-note, .req-sub, .response-log,
.save-status, .search-empty, .search-item .si-desc, .search-meta,
.sites-no-results, .sites-search-meta, .st-none, .stat-card .stat-label,
.step-desc, .sum-label, .sup-empty, .tab-btn, .telemetry-label, .tk-meta,
.tpl-row .tpl-tag, .use, .viewer-empty, table.basket th, table.fin th,
table.landings th, table.q-list th, table.stages th, table.tickets th, th,
input::placeholder, textarea::placeholder
) {
    color: var(--dk-muted);
}

/* ---- Element-level: forms, tables, borders --------------------------- */
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    background: var(--dk-input-bg);
    color: var(--dk-text);
    border-color: var(--dk-border-strong);
}
html[data-theme="dark"] :is(th, td) {
    border-color: var(--dk-border);
}
html[data-theme="dark"] hr { border-color: var(--dk-border); }

/* Soft red hover tint used across list rows and menu items. */
html[data-theme="dark"] :is(
.arc-nav-menu-item:hover, .arc-nav-tabs .arc-nav-link:hover,
table.q-list tbody tr:hover, .device-table tbody tr:hover
) {
    background: var(--dk-hover-red);
}

/* Info-card dividers and address/contact blocks (device page etc.). */
html[data-theme="dark"] :is(.info-item, .contact-block, .address-block, .arc-nav-account-info) {
    border-color: var(--dk-border);
}

/* ---- Gantt chart (gantt.php) ----------------------------------------- */
/* The page is variable-driven — swap its palette wholesale. */
html[data-theme="dark"] .gantt {
    --grid: #2b313c;
    --grid-strong: #3a414d;
    --text: #d7dbe2;
    --muted: #98a1ae;
    --hdr-bg: #1b1f26;
    /* Month separators on the wall-planner view read fully white on dark. */
    --month-line: #ffffff;
    /* Row banding. Restated here rather than overridden per-rule: the chart
       fills its rects with these same variables, so the left list and the bars
       stay in step in either theme. Kept subtle — the point is to tie a bar to
       its name, not to draw stripes. */
    --row-plain: #1d2129;
    --row-alt: #21262f;
    --row-lvl1: #242933;
    --row-lvl1-alt: #283040;
    /* Holiday hatch: dark enough to read as a hole in the bar rather than a
       highlight, which is what a pale hatch would look like on this theme. */
    --hol-bg: #2a2f3a;
    --hol-ink: #6c7686;
}
html[data-theme="dark"] .gantt .row:hover { background: #222b3a; }
html[data-theme="dark"] .gantt .controls button.active { background: #d7dbe2; color: #14171c; border-color: #d7dbe2; }
html[data-theme="dark"] .gantt .controls select { background: var(--dk-input-bg); border-color: var(--grid-strong); color: var(--text); }
/* Planning: "since you last logged on" movements panel.
   The stage-type bar down each row keeps its own colour in both themes - it is
   the same palette as the chart, and matching them is the point. Only the
   drift colours are re-mixed: the light-theme amber and green are too dark to
   read on this background. */
html[data-theme="dark"] .moves-card { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .moves-head { background: var(--dk-panel); border-bottom-color: var(--dk-border); }
html[data-theme="dark"] .move-job { border-top-color: var(--dk-border); }
html[data-theme="dark"] .move-type { color: var(--dk-text); }
html[data-theme="dark"] .move-what { color: var(--dk-muted); }
html[data-theme="dark"] .moves-count { background: var(--dk-hover-red); color: #fff; }
html[data-theme="dark"] :is(.moves-dismiss, .move-who, .move-job-name .move-n) { color: var(--dk-muted); }
html[data-theme="dark"] :is(.move-drift.later, .move-drift.longer) { color: #f0a868; }
html[data-theme="dark"] :is(.move-drift.earlier, .move-drift.shorter) { color: #6bd396; }
html[data-theme="dark"] :is(.move-drift.new, .move-drift.other) { color: #74b3f0; }

/* Home: alerts panel, same language as the planner's changes panel. */
html[data-theme="dark"] .hm-alerts { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .hm-alerts-hd { background: var(--dk-panel); border-bottom-color: var(--dk-border); }
html[data-theme="dark"] .hm-al:hover { background: var(--dk-panel); }
html[data-theme="dark"] .hm-al-ref { color: var(--dk-text); }
html[data-theme="dark"] :is(.hm-al-txt, .hm-al-when, .hm-al-grp) { color: var(--dk-muted); }
html[data-theme="dark"] .hm-al-count { background: var(--dk-hover-red); color: #fff; }
html[data-theme="dark"] .hm-al-more { border-top-color: var(--dk-border); }
html[data-theme="dark"] :is(.hm-al-txt .drift.later, .hm-al-txt .drift.longer) { color: #f0a868; }
html[data-theme="dark"] :is(.hm-al-txt .drift.earlier, .hm-al-txt .drift.shorter) { color: #6bd396; }
html[data-theme="dark"] :is(.hm-al-txt .drift.new, .hm-al-txt .drift.other) { color: #74b3f0; }

/* Planning jobs search */
html[data-theme="dark"] .job-search { background: var(--dk-input-bg); border-color: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] .job-search-meta { color: var(--dk-muted); }
html[data-theme="dark"] #durCancel { background: var(--dk-surface); }
/* SVG fills are presentation attributes, so stylesheet rules override them:
   re-map the light chrome fills and lift the near-black summary bars so
   they stay visible on the dark canvas. */
html[data-theme="dark"] .gantt svg [fill="#fbfcfe"] { fill: #1b1f26; }
html[data-theme="dark"] .gantt svg [fill="#f2f4f6"] { fill: #242933; }
html[data-theme="dark"] .gantt svg [fill="#c0c4cc"] { fill: #4a5260; }
html[data-theme="dark"] .gantt svg [stroke="#c0c4cc"] { stroke: #4a5260; }
html[data-theme="dark"] .gantt svg [fill="#374151"] { fill: #66738a; }
html[data-theme="dark"] .gantt svg [fill="#4b5563"] { fill: #707d94; }
html[data-theme="dark"] .gantt svg [fill="#3a3f4a"] { fill: #66738a; }
html[data-theme="dark"] .gantt .legend .sw[style*="#3a3f4a"] { background: #66738a !important; }
/* SVG text with no explicit fill defaults to black — inherit the theme text
   colour instead. Text with an explicit fill (e.g. white-on-bar labels)
   keeps it. */
html[data-theme="dark"] .gantt svg text:not([fill]) { fill: var(--text); }

/* ---- Leaflet map chrome (map_view.php) ------------------------------- */
html[data-theme="dark"] :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip) {
    background: var(--dk-surface);
    color: var(--dk-text);
}
html[data-theme="dark"] .leaflet-bar a {
    background: var(--dk-surface);
    color: var(--dk-text);
    border-color: var(--dk-border);
}

/* ---- Round 2 (user feedback: BOMs, PDM lists, KPIs) ------------------- */
/* Misses from the first inventory: rules living inside @media blocks, the
   `white` keyword, and a few trimmed selectors. Deliberately NOT themed:
   .arc-nav-badge (white pill on the red nav bar reads right in both themes)
   and img thumbnails (.comp-chip img, .comp-opt img, .photo-preview img,
   .thumb) — part drawings need their white background to stay legible. */
html[data-theme="dark"] :is(
.btn-danger, .comp-chip .comp-thumb-empty, .legend, .mfg-toggle-btn,
.modal-content, .q-toolbar, .qb-sec, .sidebar, .sidebar-toggle:hover,
.wizard-card, td.cap, th.cap,
.custom-popup .leaflet-popup-content-wrapper,
.ap-card, .ap-card input, .ap-card select, .ap-cancel
) {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
html[data-theme="dark"] :is(
.bom-asm-row > td, .col-pref-btn:hover, .comp-chip,
.comp-opt .comp-thumb-empty, model-viewer,
.parts-table tbody tr:hover, .sites-table tbody tr:hover,
.existing-table tbody tr:hover
) {
    background: var(--dk-panel);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
html[data-theme="dark"] :is(
.arc-modal-body summary::after, .arc-nav-menu-item-disabled:hover,
.comp-chip-clear, .comp-qty::placeholder, .comp-search::placeholder,
.dev-status-row, .drag:hover, .edit-pencil, .img-drop, .parts-no-results,
.roles-details .roles-caret, .ver-delete-btn
) {
    color: var(--dk-muted);
}
html[data-theme="dark"] :is(
.meter-label, .mfg-toggle-btn, .qb-sec > summary .qb-sum-hint,
.qb-sec > summary::before, .roles-details > summary,
table.qb-fix .qb-fix-srb,
.btn-clear-log, .card h3, .close:hover, .cmd-label, .del-modal p,
.es-loc-prefix, .intro, .list-del-modal p, .mfg-progress-txt, .pager,
.req-pill.lost, .spec-foot, .stat-card .stat-value, .tk-body, .use b,
label.fld
) {
    color: var(--dk-text);
}
/* KPI tiles: the track behind the progress bar (its coloured fill and the
   green/orange/red numbers already read fine on dark). */
html[data-theme="dark"] .mfg-kpi-bar { background: var(--dk-border-strong); }

/* ---- State-class re-assertions ---------------------------------------- */
/* The broad :is() lists above outrank pages' stateful modifier rules
   (base selector + .active/.on-*), flattening their colour coding. Restore
   each one at higher specificity — found by scanning for coloured state
   variants of themed base selectors; add new ones here if a toggle loses
   its colour in dark mode. */
/* PDM list zebra stripes (parts.php .row-alt) — a clear step up from the
   card surface so alternate rows genuinely read as bands. */
html[data-theme="dark"] .parts-table tbody tr.row-alt { background: #272e3a; }

/* ---- Unified table hover: red tinge on EVERY data table ---------------- */
/* Last in the cascade and specific enough to beat the per-table hover rules
   the theme set earlier (grey/panel), so hovering any table row gives the
   same red tint — striped or not. The quote document's tables are exempted
   below (it's the customer PDF). */
html[data-theme="dark"] :is(
table tbody tr, .parts-table tbody tr.row-alt, .device-table tbody tr,
.lifts-table tbody tr, .sites-table tbody tr, .history-table tr,
.existing-table tbody tr, table.q-list tbody tr, .bom-table tbody tr,
.parts-table tbody tr
):hover {
    background: var(--dk-hover-red);
}
html[data-theme="dark"] :is(.pv-page, #pvMeasure) tr:hover { background: transparent; }

/* Request management: the status dropdowns keep their state tints (the
   surface rule above would flatten them) and the bay input follows inputs. */
html[data-theme="dark"] select.status.st-open      { border-color: #8a7a1e; background: #2e2a14; color: #ffe066; }
html[data-theme="dark"] select.status.st-ordered   { border-color: #2b5f8a; background: #16222e; color: #74c0fc; }
html[data-theme="dark"] select.status.st-kitted    { border-color: #1f7a5c; background: #14281f; color: #63e6be; }
html[data-theme="dark"] select.status.st-fulfilled { border-color: #2b6a3a; background: #16281a; color: #8ce99a; }
html[data-theme="dark"] select.status.st-rejected  { border-color: #8a3b3b; background: #2e1717; color: #ffa8a8; }
html[data-theme="dark"] input.bay { background: var(--dk-input-bg); border-color: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] input.bay.bay-needed { border-color: #f50029; background: var(--dk-hover-red); }
html[data-theme="dark"] .closed-count { background: var(--dk-panel); color: var(--dk-muted); }

/* Engineer page: the selected Lost/Damaged/Not-kitted and part-type buttons
   must be unmistakable in dark (their light red tint was flattened by the
   surface rules). `body` keeps specificity level with those rules so this
   later declaration wins. */
/* Grey pills, meter tracks, toggles and neutral chips (the light-grey
   #e9ecef/#dee2e6/#ced4da background family the first scans never matched).
   The site address box on the device page is the headline fix here. */
html[data-theme="dark"] :is(
.address-block, .lift-count, .badge, .rev-pill, .q-badge.draft,
.badge.draft, .count-pill,
.status-unmatched, .closed-count, .battery-indicator, .signal-indicator,
.mfg-progress-bar, .dot, .fab-slider,
.btn-secondary:hover, .btn-csv:hover, .btn-del-cancel:hover,
.btn-sm-ghost:hover, .btn-primary:disabled, .wizard-dot
) {
    background: var(--dk-border-strong);
    color: var(--dk-text);
}
html[data-theme="dark"] .address-block { background: var(--dk-panel); }
/* State colours those broad selectors would otherwise flatten. */
html[data-theme="dark"] .wizard-dot.done    { background: #28a745; }
html[data-theme="dark"] .wizard-dot.current { background: #f50029; }
html[data-theme="dark"] .fab-switch input:checked + .fab-slider { background: #2b8a3e; }

/* Add lift: collapsible unassigned-autodialler cards. */
html[data-theme="dark"] .ud { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .ud summary:hover { background: var(--dk-hover-red); }
html[data-theme="dark"] .ud-num { color: var(--dk-text); }
html[data-theme="dark"] .ud-body { border-color: var(--dk-border); }
html[data-theme="dark"] .ud-json { background: var(--dk-panel); border-color: var(--dk-border); color: var(--dk-text); }

/* Engineer part cards: each part's card + photo preview backdrop. */
html[data-theme="dark"] .part-card { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .pc-prev img { background: var(--dk-panel); }

/* My tickets (engineer.php): the indented detail box + borders. The red
   PR-number and green/red response lines read fine on dark as-is. */
html[data-theme="dark"] .myt { border-color: var(--dk-border); }
html[data-theme="dark"] .myt-box { background: var(--dk-panel); border-color: var(--dk-border); }
html[data-theme="dark"] .myt-part { color: var(--dk-text); }
html[data-theme="dark"] .myt-sub { color: var(--dk-muted); }

html[data-theme="dark"] body :is(.reason-btn.sel, .tool.sel) {
    border-color: #f50029;
    background: #4a1a24;
    color: #ff8fa3;
    box-shadow: inset 0 0 0 1.5px #f50029;
}

html[data-theme="dark"] .dir-seg button.on-add { background: #2b8a3e; color: #fff; }
html[data-theme="dark"] .dir-seg button.on-remove { background: #e8590c; color: #fff; }
html[data-theme="dark"] .ver-chip.active { background: #f50029; color: #fff; border-color: #f50029; }
html[data-theme="dark"] .mfg-toggle-btn.active { border-color: #2b8a3e; color: #2b8a3e; background: #ebfbee; }
html[data-theme="dark"] .mfg-filter-chip.active { border-color: #f50029; color: #f50029; background: #fff5f6; }

/* ---- Quote document preview stays a white A4 document ---------------- */
html[data-theme="dark"] .pv-page,
html[data-theme="dark"] #pvMeasure {
    background: #fff;
    color: #222;
}
/* The editor chrome around it darkens; give the pages a visible edge. */
html[data-theme="dark"] .pv-page { box-shadow: 0 6px 30px rgba(0,0,0,0.6); }

/* PDM: delete-BOM-version trash button */
html[data-theme="dark"] .bom-ver-delete { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-muted); }
html[data-theme="dark"] .bom-ver-delete:hover { background: var(--dk-hover-red); border-color: #f50029; color: #ff8fa3; }

/* Ticket replies: thread modal (Request management) + on-card thread (Engineer) */
html[data-theme="dark"] :is(.th-card, .rq-reply, .th-foot input) { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] :is(.th-head, .th-foot) { border-color: var(--dk-border); }
html[data-theme="dark"] :is(.th-msg, .myt-msg) { background: var(--dk-panel); color: var(--dk-text); }
html[data-theme="dark"] .myt-msg.mine { background: var(--dk-hover-red); }
html[data-theme="dark"] :is(.th-msg-meta, .myt-msg-meta, .th-empty) { color: var(--dk-muted); }
html[data-theme="dark"] .myt-reply input { background: var(--dk-input-bg); border-color: var(--dk-border-strong); color: var(--dk-text); }

/* Engineer: "while you were away" ticket alerts */
html[data-theme="dark"] .new-since { background: var(--dk-hover-red); border-color: #5a2230; }
html[data-theme="dark"] .new-since-hd { color: #ff8fa3; }
html[data-theme="dark"] .new-since-row { color: var(--dk-text); }

/* Suggestion tickets: card, detail rule, and the reply thread */
html[data-theme="dark"] .tk { border-color: var(--dk-border); }
html[data-theme="dark"] .tk.is-done { background: var(--dk-panel); }
html[data-theme="dark"] .tk-where { color: var(--dk-text); }
html[data-theme="dark"] .tk-text { color: var(--dk-text); border-color: var(--dk-border-strong); }
html[data-theme="dark"] .tk-meta { color: var(--dk-muted); }
html[data-theme="dark"] .tk-msg { background: var(--dk-panel); color: var(--dk-text); }
html[data-theme="dark"] .tk-msg.mine { background: var(--dk-hover-red); }
html[data-theme="dark"] :is(.tk-msg-meta, .tk-warn) { color: var(--dk-muted); }
html[data-theme="dark"] .tk-reply input { background: var(--dk-input-bg); border-color: var(--dk-border-strong); color: var(--dk-text); }
/* Open vs Done is the main signal on this page, and the generic grey-pill rule
   above flattens both to the same chip. Give them muted dark-mode colour back. */
html[data-theme="dark"] .badge.open { background: #4a3a12; color: #ffd75e; }
html[data-theme="dark"] .badge.done { background: #17381f; color: #6ee7a0; }

/* ---- Home dashboard (hm- prefixed so nothing here leaks onto other pages) */
html[data-theme="dark"] :is(.hm-tile, .hm-alerts, .hm-pick, .hm-empty) { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .hm-tile:hover { background: var(--dk-hover-red); border-color: #f50029; color: #ff8fa3; }
html[data-theme="dark"] .hm-tile:hover .hm-tile-ico { color: #ff8fa3; }
html[data-theme="dark"] .hm-hd-sub { color: var(--dk-muted); }
html[data-theme="dark"] .hm-al { border-color: var(--dk-border); }
html[data-theme="dark"] .hm-al-txt { color: var(--dk-text); }
html[data-theme="dark"] .hm-al-when { color: var(--dk-muted); }
html[data-theme="dark"] .hm-pick-grp { color: var(--dk-muted); }
html[data-theme="dark"] .hm-grp { color: var(--dk-muted); border-color: var(--dk-border); }
html[data-theme="dark"] .hm-pick-opt { border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .hm-pick-opt:hover { background: var(--dk-hover-red); border-color: #f50029; }
html[data-theme="dark"] .hm-edit-btn { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .hm-edit-btn:hover { background: var(--dk-hover-red); border-color: #f50029; color: #ff8fa3; }
html[data-theme="dark"] .hm-edit-btn.hm-primary { background: #f50029; border-color: #f50029; color: #fff; }

/* ---- Planning: assignee picker + settings list ------------------------ */
html[data-theme="dark"] .pp-row { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .pp-row.off { background: var(--dk-panel); }
html[data-theme="dark"] .pp-name input { color: var(--dk-text); background: transparent; }
html[data-theme="dark"] .pp-name input:hover { border-color: var(--dk-border); }
html[data-theme="dark"] .pp-name input:focus { background: var(--dk-input-bg); border-color: #f50029; }
html[data-theme="dark"] .pp-tag { background: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] .drag { color: var(--dk-muted); }

/* ---- Map: dark tiles --------------------------------------------------
   OpenStreetMap publishes no dark tile set. Inverting gets there with tiles
   already allowed by img-src: invert flips white paper to near black, and the
   180deg hue rotation puts the colours back the right way round afterwards, so
   greenery still reads green and water blue rather than their opposites.

   Scoped to layers marked .tiles-invertible (the DRAWN maps — Streets,
   Terrain, Plain), not the whole tile pane: inverting satellite photography
   turns grass magenta and roofs cyan, so aerial layers are left alone. Markers,
   popups, controls and the geocoding banner sit in sibling panes either way. */
html[data-theme="dark"] .tiles-invertible {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.94) saturate(0.85);
}
/* The surface behind unloaded tiles, so panning doesn't flash white. */
html[data-theme="dark"] :is(.leaflet-container, #map, .map-container) { background: #14171c; }
/* Attribution sits inside the map but outside the tile pane. */
html[data-theme="dark"] .leaflet-control-attribution {
    background: rgba(20,23,28,0.82); color: var(--dk-muted);
}
html[data-theme="dark"] .leaflet-control-attribution a { color: #9fd6f0; }
/* Zoom buttons already have their base rule in the Leaflet chrome section above. */
html[data-theme="dark"] .leaflet-bar a:hover { background: var(--dk-hover-red); color: #ff8fa3; }
/* Layers picker */
html[data-theme="dark"] :is(.leaflet-control-layers, .leaflet-control-layers-expanded) {
    background: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border);
}
html[data-theme="dark"] .leaflet-control-layers-separator { border-color: var(--dk-border); }
html[data-theme="dark"] .leaflet-control-layers label { color: var(--dk-text); }
/* Same drawn icon as the light theme, restroked so it reads on a dark button. */
html[data-theme="dark"] .leaflet-control-layers-toggle {
    background-color: var(--dk-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7dbe2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}
/* Pins are drawn markup: keep their white ring readable on a dark map. */
html[data-theme="dark"] .pin path { stroke: #e9ecef; }   /* keep the ring readable on a dark map */
/* Sidebar handle */
html[data-theme="dark"] .sidebar-toggle { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .sidebar-toggle:hover { background: #f50029; color: #fff; }
/* Device list: the selected row. The page styled .highlighted with a pale blue
   that no dark rule ever matched, so a selection was invisible against the dark
   sidebar — the row read exactly like an unselected one. */
/* Device list (the sidebar was a table until the columns stopped fitting; it is
   now one row per lift, so these target .dev-row rather than table rows). */
html[data-theme="dark"] .dev-row:nth-child(even) { background: var(--dk-panel); }
html[data-theme="dark"] .dev-row:hover { background: var(--dk-hover-red); }
html[data-theme="dark"] .dev-row.highlighted { background: var(--dk-hover-red); border-left-color: #f50029; }
html[data-theme="dark"] .dev-row.highlighted .dev-name { color: #ff8fa3; }
html[data-theme="dark"] .dev-name { color: var(--dk-text); }
html[data-theme="dark"] .dev-site { color: var(--dk-muted); }
html[data-theme="dark"] .dev-meta { color: #6d7580; }

/* Lift popup: header, status strip, fact list */
html[data-theme="dark"] .pop-head { border-color: var(--dk-border); }
html[data-theme="dark"] .pop-name { color: var(--dk-text); }
html[data-theme="dark"] .pop-sub { color: var(--dk-muted); }
html[data-theme="dark"] .pop-strip { background: var(--dk-panel); }
html[data-theme="dark"] .pop-metric { color: var(--dk-text); }
html[data-theme="dark"] .pop-bat { border-color: var(--dk-muted); background: transparent; }
html[data-theme="dark"] .pop-bat::after { background: var(--dk-muted); }
html[data-theme="dark"] .pop-pill.online  { background: #17381f; color: #6ee7a0; }
html[data-theme="dark"] .pop-pill.warning { background: #4a3a12; color: #ffd75e; }
html[data-theme="dark"] .pop-pill.offline { background: #4a1720; color: #ff8fa3; }
html[data-theme="dark"] .pop-sig.excellent { color: #6ee7a0; }
html[data-theme="dark"] .pop-sig.fair      { color: #ffd75e; }
html[data-theme="dark"] .pop-sig.weak      { color: #ffab70; }
html[data-theme="dark"] .pop-sig.poor      { color: #ff8fa3; }
html[data-theme="dark"] .pop-sig.unknown   { color: var(--dk-muted); }
html[data-theme="dark"] .pop-facts dt { color: var(--dk-muted); }
html[data-theme="dark"] .pop-facts dd { color: var(--dk-text); }
html[data-theme="dark"] .pop-dim { color: var(--dk-muted); }
html[data-theme="dark"] .custom-popup .leaflet-popup-close-button { color: var(--dk-muted); }
html[data-theme="dark"] .custom-popup .leaflet-popup-close-button:hover { color: #ff8fa3; }
html[data-theme="dark"] .pop-open { border-color: var(--dk-border); color: #ff8fa3; }
html[data-theme="dark"] .pop-open:hover { background: var(--dk-hover-red); }

/* Adjust-pins mode */
html[data-theme="dark"] .adjust-pins { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .adjust-pins:hover { border-color: #f50029; color: #ff8fa3; }
html[data-theme="dark"] .adjust-pins.on { background: #f50029; border-color: #f50029; color: #fff; }
html[data-theme="dark"] .adjust-hint { background: #3a2a12; border-color: #6b4a15; color: #ffce7a; }

/* ---- Map: site geocoding status banner -------------------------------- */
html[data-theme="dark"] .geo-note { background: #16303f; border-color: #1d4d66; color: #9fd6f0; }
html[data-theme="dark"] .geo-note.warn { background: #3a2a12; border-color: #6b4a15; color: #ffce7a; }
html[data-theme="dark"] .geo-note code { background: rgba(255,255,255,0.10); }

/* ---- Individual permissions (user_perms.php) -------------------------- */
html[data-theme="dark"] .who a { border-color: var(--dk-border); color: var(--dk-text); background: var(--dk-surface); }
html[data-theme="dark"] .who a:hover { background: var(--dk-hover-red); border-color: #f50029; color: #ff8fa3; }
html[data-theme="dark"] .who a.on { background: #f50029; border-color: #f50029; color: #fff; }
html[data-theme="dark"] .who .adm { color: var(--dk-muted); }
html[data-theme="dark"] .grp { color: var(--dk-muted); border-color: var(--dk-border); }
html[data-theme="dark"] .cap { border-color: var(--dk-border); }
html[data-theme="dark"] .cap-name { color: var(--dk-text); }
html[data-theme="dark"] :is(.cap-desc, .cap-from, .hint, .note) { color: var(--dk-muted); }
html[data-theme="dark"] .seg { border-color: var(--dk-border); }
html[data-theme="dark"] .seg label { background: var(--dk-surface); color: var(--dk-muted); border-color: var(--dk-border); }
html[data-theme="dark"] .seg label:has(input:checked) { background: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] .seg label.al:has(input:checked) { background: #17381f; color: #6ee7a0; }
html[data-theme="dark"] .seg label.dn:has(input:checked) { background: #4a1720; color: #ff8fa3; }
html[data-theme="dark"] .locked { background: var(--dk-panel); color: var(--dk-muted); }

/* ---- Phonebook (pb- prefixed for the same reason) --------------------- */
html[data-theme="dark"] :is(.pb-card, .pb-dlg) { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .pb-search { background: var(--dk-input-bg); border-color: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] .pb-card :is(th, td) { border-color: var(--dk-border); }
html[data-theme="dark"] .pb-card th { background: var(--dk-panel); color: var(--dk-muted); }
html[data-theme="dark"] .pb-card tbody tr:hover { background: var(--dk-hover-red); }
/* Department bands keep the nav gradient in dark mode — brand red reads fine on
   dark and is the point of them, so the panel override is deliberately dropped. */
html[data-theme="dark"] .pb-dept-row td {
    background: linear-gradient(135deg, #f50029 0%, #d40024 100%);
    color: #fff;
}
html[data-theme="dark"] .pb-split td { background: var(--dk-panel); border-color: var(--dk-border); }
html[data-theme="dark"] .pb-check { color: var(--dk-text); }
html[data-theme="dark"] .pb-ttl { color: var(--dk-muted); }
html[data-theme="dark"] .pb-none { color: var(--dk-muted); }
html[data-theme="dark"] :is(.pb-dlg-hd, .pb-dlg-ft) { border-color: var(--dk-border); }
html[data-theme="dark"] .pb-fld label { color: var(--dk-text); }
html[data-theme="dark"] .pb-fld input { background: var(--dk-input-bg); border-color: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] .pb-mini { color: var(--dk-muted); }
html[data-theme="dark"] .pb-mini:hover { color: #ff8fa3; }
html[data-theme="dark"] .pb-btn.pb-ghost { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .pb-btn.pb-ghost:hover { border-color: #f50029; color: #ff8fa3; }


/* Wiki (workshop_ref.php). The page was never in this file at all, so none of
   it themed: its surfaces stayed white-ish under the dark body, and its text
   greys - #667, #556, #777, #999 - are not in the palette the broad lists
   above translate, so they stayed dark grey ON dark. That is the "very faint"
   in TKT-00030.
   Doing it as a page block rather than folding the classes into the lists
   above, because that is how Planning and Home are handled here. */
html[data-theme="dark"] :is(.wr-sec, .wr-tab, .wr-search input) {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
html[data-theme="dark"] :is(.wr-head h1, .wr-sec-title, .wr-p, .wr-list, .wr-joint) {
    color: var(--dk-text);
}
html[data-theme="dark"] :is(.wr-sub, .wr-blurb, .wr-intro, .wr-note, .wr-dim,
                            .wr-empty, .wr-hit-count) {
    color: var(--dk-muted);
}
/* The active tab is dark-on-light in the light theme, which inverts badly:
   keep it filled, but with the surface it now sits on. */
html[data-theme="dark"] .wr-tab.active {
    background: var(--dk-text);
    border-color: var(--dk-text);
    color: var(--dk-bg);
}
html[data-theme="dark"] .wr-table th {
    background: var(--dk-panel);
    color: var(--dk-muted);
    border-color: var(--dk-border);
}
html[data-theme="dark"] :is(.wr-table td, .wr-table th) { border-color: var(--dk-border); }
html[data-theme="dark"] .wr-table tbody tr:hover td { background: var(--dk-panel); }
/* The "added by hand, unchecked" tint. Its cream reads as a highlight on white
   and as a glare on dark, so it becomes a muted amber wash instead. */
html[data-theme="dark"] .wr-unverified th { background: rgba(255, 196, 61, 0.14); }
html[data-theme="dark"] .wr-unverified td { background: rgba(255, 196, 61, 0.07); }
/* Part-name patterns on the Naming Conventions category. */
html[data-theme="dark"] .wr-name {
    background: var(--dk-panel);
    color: var(--dk-text);
}
/* The colour swatches are the DATA on the Standard Colours sheet - a paint
   reference is wrong if it is re-tinted, so they are deliberately untouched. */
/* ---- Engineer pages and menus ---------------------------------------- */
/* The seven pages behind the engineer strip (engineer.php, part_return.php,
 * equipment_request.php, equipment_return.php, engineer_autodialler.php,
 * lift_params.php, service_engineer.php), the sheet the four return-style ones
 * share (includes/return_form_css.php), and the nav's own account menu.
 *
 * These are phone pages, so they were the ones being noticed. Only the genuine
 * gaps are here: the red submit buttons, the pastel state chips (.lm.hit,
 * .jobres.warn, .tag.open) and the red nav bar and footer already read
 * correctly on dark and are left alone, per the palette note at the top.
 *
 * Generic class names are scoped the way their own rules scope them - .when,
 * .what, .find and .more each mean different things on other pages. */

/* Surfaces, inputs and borders */
html[data-theme="dark"] :is(.eqline, .done-part) { border-color: var(--dk-border); }
html[data-theme="dark"] .mbtn {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
/* Selected filter pill: #2c3e50-on-white inverts to the strong border colour,
   which is the nearest thing this palette has to "raised and chosen". */
html[data-theme="dark"] .mbtn.sel {
    background: var(--dk-border-strong);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}
html[data-theme="dark"] .findbar .find {
    background: var(--dk-input-bg);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}
html[data-theme="dark"] .thead {
    background: var(--dk-panel);
    border-top-color: var(--dk-border);
    border-bottom-color: var(--dk-border-strong);
}
html[data-theme="dark"] .add-item {
    background: var(--dk-panel);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}

/* Remove-this-item button on a return card: a white button on a dark card was
   the loudest thing left on the page. Armed (.item-del.armed) is a red state
   chip and keeps its own colours. */
html[data-theme="dark"] .item-del {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-muted);
}
/* The parameters panel's sticky menu bar, and the divider between rows of the
   autodialler confirm summary - both light greys sat on a dark surface. */
html[data-theme="dark"] .menubar { background: var(--dk-panel); }
html[data-theme="dark"] .sum-row { border-bottom-color: var(--dk-border); }

/* Main text */
html[data-theme="dark"] :is(.c-pin, .c-no, .item.shut .item-sum, .done-line b, .myt-need) {
    color: var(--dk-text);
}

/* Muted text */
html[data-theme="dark"] :is(
.arc-nav-account-sub, .c-pin .more, .c-pin.mono, .c-txt, .dev-older,
.done-part .q, .done-part .why, .find-meta, .lm-line, .mine .when,
.myt-resp.waiting, .pick .what, .st.cancelled
) { color: var(--dk-muted); }

/* Log out, in the account menu. Pale pink on white does not survive the
   translation - it turns into a light smear on a dark panel - so it takes the
   same treatment as the other destructive ghost buttons in this file. */
html[data-theme="dark"] .arc-nav-logout-btn {
    background: var(--dk-hover-red);
    border-color: #5a2230;
    color: #ff8fa3;
}
html[data-theme="dark"] .arc-nav-logout-btn:hover {
    background: #f50029;
    border-color: #f50029;
    color: #fff;
}

/* Found by walking the rendered pages in dark mode and reading computed
 * backgrounds, not by reading the stylesheets. None of these use the light
 * palette this file maps - they are #eef1f4, #fbfcfd, #f1f8ff, #fff4e6 - so
 * matching on the documented greys would never have found them, and they were
 * the actual white blocks on a phone. */

/* Return-form sheet: the card itself was still white, and its intro text was
   near-black on it. */
html[data-theme="dark"] .item { background: var(--dk-surface); }
html[data-theme="dark"] .sub { color: var(--dk-text); }
html[data-theme="dark"] .step {
    background: var(--dk-panel);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
/* #b02a3a is a dark red chosen to sit on white; on this background it is close
   to unreadable, so the error takes the same lifted red used elsewhere here. */
html[data-theme="dark"] .item-err { color: #ff8fa3; }

/* Needed-by calendar (includes/needed_by_calendar.php) - shared, so this also
   reaches the other pages that embed it. Every day cell was a white square. */
html[data-theme="dark"] :is(.cal-nav, .cal-day) {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
html[data-theme="dark"] .cal-day.past { background: transparent; color: var(--dk-muted); }
html[data-theme="dark"] .cal-dow span { color: var(--dk-muted); }
html[data-theme="dark"] .cal-pick strong { color: var(--dk-text); }

/* Tinted information panels. Kept tinted - the colour IS the signal - but at
   dark-surface brightness with the text lifted to match. */
html[data-theme="dark"] .hint {
    background: #152534;
    border-color: #1d3a52;
    color: #74b3f0;
}
html[data-theme="dark"] .warn {
    background: #3a2f16;
    border-color: #5c4a1f;
    color: #ffd75e;
}

/* Sign-in page (login.php). It has no nav, so it links this file itself.
   The card, body and inputs are already covered by the lists above; these two
   are the failure states, which only exist in the DOM after a bad password -
   so they are easy to miss and are exactly when somebody is staring at this
   screen. Tint kept, brightness brought down to the surface. */
html[data-theme="dark"] .msg-error {
    background: #3d1519;
    border-color: #5a2230;
    color: #ff8fa3;
}
html[data-theme="dark"] .msg-warn {
    background: #3a2f16;
    border-color: #5c4a1f;
    color: #ffd75e;
}

/* Brand red as LINK TEXT measures 4.20:1 on --dk-bg, just under the 4.5:1 the
   text needs. It is fine as a background with white on it, which is why the
   buttons above are left alone; as a foreground it takes the lifted red this
   file already uses, at 8.31:1. */
html[data-theme="dark"] .dev-status-row a { color: #ff8fa3; }

/* Parameters: the panel tab pills and the striped reading rows. */
html[data-theme="dark"] .tbtn { background: var(--dk-panel); color: var(--dk-muted); }
html[data-theme="dark"] .tbtn.sel {
    background: var(--dk-hover-red);
    border-color: #f50029;
    color: #ff8fa3;
}
html[data-theme="dark"] .sig:nth-of-type(even) { background: var(--dk-panel); }
html[data-theme="dark"] .sig + .sig { border-top-color: var(--dk-border); }

/* The parameters sheet is a DOCUMENT, and stays white in every theme for the
   same reason the quote preview above does: it is what comes out of the
   printer. Re-asserted rather than left alone, because the generic surface and
   text rules above would otherwise reach inside it. */
html[data-theme="dark"] #pdfDoc .pdf-page { background: #fff; color: #111; }
html[data-theme="dark"] #pdfDoc .foot { color: #777; border-top-color: #ddd; }

} /* @media screen */


/* Sales-order party pickers (sales_order.php). A floating results panel is a
   new kind of surface in this app - it has no light-theme twin above to inherit
   from, so it needs its own rule rather than an added selector. */
html[data-theme="dark"] .ta-results {
    background: var(--dk-surface);
    border-color: var(--dk-border-strong);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .ta-item:hover,
html[data-theme="dark"] .ta-item.sel {
    background: var(--dk-border);
}
html[data-theme="dark"] .party h3 {
    color: var(--dk-accent, #ff5a76);
}

/* Party cards on the sales-order editor. A card-inside-a-card needs to sit
   slightly proud of the card behind it, which in dark means lighter, not the
   near-white the light theme uses. */
html[data-theme="dark"] .party {
    background: var(--dk-panel);
    border-color: var(--dk-border);
}
html[data-theme="dark"] .addr-fill { color: #74b6ff; }
html[data-theme="dark"] .addr-fill:hover { color: #ff5a76; }

/* Sales-order BOMs page. The bucket headers keep their hue in dark - the whole
   point of pick/make/order being three colours is that you can tell them apart
   at a glance - but the tints are darkened so white text is not sitting on a
   pastel. */
html[data-theme="dark"] .bucket { border-color: var(--dk-border-strong); }
html[data-theme="dark"] .lift-block { border-top-color: var(--dk-border); }
html[data-theme="dark"] .bucket.pick > h4    { background: #16324a; color: #74b6ff; }
html[data-theme="dark"] .bucket.make > h4    { background: #46280f; color: #ffab76; }
html[data-theme="dark"] .bucket.order > h4   { background: #4a1a20; color: #ff8f9e; }
html[data-theme="dark"] .bucket.unknown > h4 { background: var(--dk-border); color: var(--dk-muted); }
html[data-theme="dark"] .bucket .why,
html[data-theme="dark"] .lift-head .sub,
html[data-theme="dark"] .card h2 .count,
html[data-theme="dark"] .bucket .none,
html[data-theme="dark"] .sup-head .code,
html[data-theme="dark"] .tot { color: var(--dk-muted); }
html[data-theme="dark"] .sup-head td { background: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .pn { color: var(--dk-text); }
html[data-theme="dark"] .boms-link { background: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .boms-link:hover { background: var(--dk-hover-red); color: #ff8f9e; }

/* Workshop reference — the Procedures tab column. The list is a panel inside
   the page, so in dark it has to sit proud of the background rather than being
   the near-white the light theme uses. */
html[data-theme="dark"] .wr-proc-list {
    background: var(--dk-panel);
    border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .wr-proc-tab { color: var(--dk-text); }
html[data-theme="dark"] .wr-proc-tab:hover {
    background: var(--dk-border);
    border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .wr-proc-tab.active {
    background: var(--dk-accent, #f50029);
    border-color: var(--dk-accent, #f50029);
}
html[data-theme="dark"] .wr-proc-ref,
html[data-theme="dark"] .wr-proc-meta { color: var(--dk-muted); }
html[data-theme="dark"] .wr-proc-tab.active .wr-proc-ref { color: rgba(255, 255, 255, 0.75); }

/* BOM — the manual "add a part" row. It is a warning-coloured panel in light
   mode; in dark that pink reads as an error, so it becomes a raised panel with
   a red edge instead. */
html[data-theme="dark"] .bom-addrow {
    background: var(--dk-panel);
    border-color: var(--dk-hover-red);
}
html[data-theme="dark"] .bom-addrow-fields label { color: var(--dk-muted); }
html[data-theme="dark"] .bom-addrow-warn { color: var(--dk-muted); }

/* Planner electrical checklist (gantt block dialog + planning_checklists.php). */
html[data-theme="dark"] .dur-card .chk-items { border-color: var(--dk-border-strong); }
html[data-theme="dark"] .dur-card .chk-type select { background: var(--dk-input-bg); border-color: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] .dur-card .chk-item { background: var(--dk-panel); border-bottom-color: var(--dk-border); }
html[data-theme="dark"] .dur-card .chk-item.on { background: #16341f; color: #6ee7a0; }
html[data-theme="dark"] .dur-card .chk-item:hover { background: #3d1519; color: #ff8f9e; }
html[data-theme="dark"] .dur-card .chk-item input { border-color: var(--dk-muted); background: var(--dk-input-bg); }
html[data-theme="dark"] .dur-card .chk-item input:checked { background: #2f9e4f; border-color: #2f9e4f; }
html[data-theme="dark"] .dur-card .chk-count,
html[data-theme="dark"] .dur-card .chk-guess,
html[data-theme="dark"] .dur-card .chk-empty,
html[data-theme="dark"] .t-meta { color: var(--dk-muted); }
html[data-theme="dark"] .dur-card .chk-type select { background: var(--dk-input-bg); border-color: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] .item { border-color: var(--dk-border-strong); }
