/* ZoneWeb — Appearance modes (Classic / Light / Dark). Paul, 2026-09-11.
 *
 * ⚑ CLASSIC IS UNTOUCHED. Every rule in app.css is the Classic look and none of it changes; this
 * file only ADDS the Appearance menu items (which must look right in Classic too) and then, under
 * html[data-mode="light"] and html[data-mode="dark"], overrides the chrome — menus, toolbar, tabs,
 * buttons, inputs, window titles, grids, modals — with tokens and rounded corners.
 *
 * ⚠ Selectors are prefixed with `html[data-mode=…]` on purpose: MainLayout.razor.css is SCOPED
 * (its rules compile to `.zone-header[b-…]`, specificity 0,2,0) and a bare `[data-mode] .zone-header`
 * would tie with it and lose on order. The html prefix makes these 0,2,1 and they win.
 *
 * The mode attribute is stamped by App.razor from the user's stored preference (server-side,
 * dbo.Web_User_Preferences) and swapped in place by the user menu — see AppearanceService.
 */

/* ── Tokens. :root carries the Classic values so the two modes below only have to restate what
   differs. Classic rules in app.css do NOT read these (by design — zero risk to today's look). ── */
:root {
    --zw-nav-bg: #29588c;      --zw-nav-fg: #ffffff;
    --zw-menu-bg: #ffffff;     --zw-menu-fg: #333333;    --zw-menu-line: #c0c0c0;
    --zw-menu-hover-bg: #29588c; --zw-menu-hover-fg: #ffffff;
    --zw-page-bg: #ffffff;     --zw-panel-bg: #ffffff;   --zw-panel-2-bg: #f0f0f0;
    --zw-line: #c0c0c0;        --zw-ink: #333333;        --zw-ink-2: #555555;
    --zw-tab-bar-bg: #f0f0f0;  --zw-tab-line: #29588c;   --zw-tab-active-bg: #ffffff;
    --zw-btn-bg: lightgray;    --zw-btn-fg: #000000;     --zw-btn-line: #999999;
    --zw-primary: #29588c;     --zw-primary-fg: #ffffff;
    --zw-input-bg: #ffffff;    --zw-input-line: #c0c0c0; --zw-input-fg: #000000;
    --zw-title-bg: #29588c;    --zw-title-fg: #ffffff;
    --zw-grid-head-bg: #f0f0f0; --zw-grid-line: #c9caca;
    --zw-radius: 0px;          --zw-radius-sm: 0px;      --zw-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}

/* ── The Appearance group in the user menu (all modes, Classic included) ── */
.zone-dropdown-group {
    padding: 6px 20px 2px;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6a7682;
    user-select: none;
}
.zone-appearance-item { display: flex; align-items: center; gap: 8px; }
.zone-appearance-radio {
    width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid #6a7682; display: inline-block; flex: none;
    background: transparent;
}
.zone-appearance-item.is-selected .zone-appearance-radio {
    border-color: #29588c;
    background: radial-gradient(circle, #29588c 45%, transparent 52%);
}
.zone-appearance-item:hover .zone-appearance-radio { border-color: currentColor; }
.zone-appearance-item.is-selected:hover .zone-appearance-radio {
    background: radial-gradient(circle, currentColor 45%, transparent 52%);
}

/* ═══════════════════════════════════ LIGHT ═══════════════════════════════════ */
html[data-mode="light"] {
    --zw-nav-bg: #1f4f86;      --zw-nav-fg: #ffffff;
    --zw-menu-bg: #ffffff;     --zw-menu-fg: #1f2733;    --zw-menu-line: #d7dde6;
    --zw-menu-hover-bg: #eef3fa; --zw-menu-hover-fg: #1f2733;
    --zw-page-bg: #f4f6f9;     --zw-panel-bg: #ffffff;   --zw-panel-2-bg: #f2f5f9;
    --zw-line: #d7dde6;        --zw-ink: #1f2733;        --zw-ink-2: #5d6876;
    --zw-tab-bar-bg: transparent; --zw-tab-line: #d7dde6; --zw-tab-active-bg: #ffffff;
    --zw-btn-bg: #ffffff;      --zw-btn-fg: #1f2733;     --zw-btn-line: #c9d2de;
    --zw-primary: #2a63b0;     --zw-primary-fg: #ffffff;
    --zw-input-bg: #ffffff;    --zw-input-line: #c9d2de; --zw-input-fg: #1f2733;
    --zw-title-bg: #eef3fa;    --zw-title-fg: #1f4f86;
    --zw-grid-head-bg: #eef3fa; --zw-grid-line: #d7dde6;
    --zw-radius: 8px;          --zw-radius-sm: 6px;      --zw-shadow: 0 6px 20px rgba(16,24,40,.12);
}

/* ═══════════════════════════════════ DARK ════════════════════════════════════ */
html[data-mode="dark"] {
    color-scheme: dark;
    --zw-nav-bg: #0f1a2b;      --zw-nav-fg: #e6edf7;
    --zw-menu-bg: #1a2436;     --zw-menu-fg: #e6edf7;    --zw-menu-line: #2c3a52;
    --zw-menu-hover-bg: #24314a; --zw-menu-hover-fg: #ffffff;
    --zw-page-bg: #0f1522;     --zw-panel-bg: #161f30;   --zw-panel-2-bg: #1c2739;
    --zw-line: #2c3a52;        --zw-ink: #e6edf7;        --zw-ink-2: #9fb0c8;
    --zw-tab-bar-bg: transparent; --zw-tab-line: #2c3a52; --zw-tab-active-bg: #161f30;
    --zw-btn-bg: #1c2739;      --zw-btn-fg: #e6edf7;     --zw-btn-line: #3a4b66;
    --zw-primary: #4f8be0;     --zw-primary-fg: #ffffff;
    --zw-input-bg: #0f1522;    --zw-input-line: #3a4b66; --zw-input-fg: #e6edf7;
    --zw-title-bg: #1c2739;    --zw-title-fg: #cfe0f8;
    --zw-grid-head-bg: #1c2739; --zw-grid-line: #2c3a52;
    --zw-radius: 8px;          --zw-radius-sm: 6px;      --zw-shadow: 0 8px 24px rgba(0,0,0,.45);
}

/* ── Shared modern chrome (Light + Dark read the tokens above) ─────────────────────────────── */

/* Page + shell */
html[data-mode="light"] body, html[data-mode="dark"] body,
html[data-mode="light"] .zone-main, html[data-mode="dark"] .zone-main {
    background: var(--zw-page-bg);
    color: var(--zw-ink);
}
html[data-mode="light"] .zone-header, html[data-mode="dark"] .zone-header { background: var(--zw-nav-bg); color: var(--zw-nav-fg); }
html[data-mode="light"] .zone-toolbar-area, html[data-mode="dark"] .zone-toolbar-area {
    background: var(--zw-panel-bg);
    border-bottom: 1px solid var(--zw-line);
}

/* Menu bar + dropdowns */
html[data-mode="light"] .zone-menu-item, html[data-mode="dark"] .zone-menu-item { border-radius: var(--zw-radius-sm); }
html[data-mode="light"] .zone-dropdown, html[data-mode="dark"] .zone-dropdown,
html[data-mode="light"] .zone-submenu, html[data-mode="dark"] .zone-submenu {
    background: var(--zw-menu-bg);
    border: 1px solid var(--zw-menu-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
    padding: 4px;
}
html[data-mode="light"] .zone-dropdown-item, html[data-mode="dark"] .zone-dropdown-item,
html[data-mode="light"] .zone-dropdown a, html[data-mode="dark"] .zone-dropdown a {
    color: var(--zw-menu-fg);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .zone-dropdown-item:hover:not(.disabled), html[data-mode="dark"] .zone-dropdown-item:hover:not(.disabled),
html[data-mode="light"] .zone-dropdown a:hover, html[data-mode="dark"] .zone-dropdown a:hover {
    background: var(--zw-menu-hover-bg);
    color: var(--zw-menu-hover-fg);
}
html[data-mode="light"] .zone-dropdown-item.disabled, html[data-mode="dark"] .zone-dropdown-item.disabled { color: var(--zw-ink-2); opacity: .6; }
html[data-mode="light"] .zone-menu-sep, html[data-mode="dark"] .zone-menu-sep { background: var(--zw-menu-line); }
html[data-mode="light"] .zone-user-head-name, html[data-mode="dark"] .zone-user-head-name { color: var(--zw-menu-fg); }
html[data-mode="light"] .zone-user-head-email, html[data-mode="dark"] .zone-user-head-email,
html[data-mode="light"] .zone-dropdown-group, html[data-mode="dark"] .zone-dropdown-group { color: var(--zw-ink-2); }
html[data-mode="light"] .zone-appearance-radio, html[data-mode="dark"] .zone-appearance-radio { border-color: var(--zw-ink-2); }
html[data-mode="light"] .zone-appearance-item.is-selected .zone-appearance-radio,
html[data-mode="dark"] .zone-appearance-item.is-selected .zone-appearance-radio,
html[data-mode="light"] .zone-appearance-item.is-selected:hover .zone-appearance-radio,
html[data-mode="dark"] .zone-appearance-item.is-selected:hover .zone-appearance-radio {
    border-color: var(--zw-primary);
    background: radial-gradient(circle, var(--zw-primary) 45%, transparent 52%);
}

/* Toolbar */
html[data-mode="light"] .zone-toolbar-icon, html[data-mode="dark"] .zone-toolbar-icon,
html[data-mode="light"] .zone-toolbar-btn, html[data-mode="dark"] .zone-toolbar-btn,
html[data-mode="light"] .zone-case-dropdown, html[data-mode="dark"] .zone-case-dropdown {
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .zone-toolbar-btn, html[data-mode="dark"] .zone-toolbar-btn,
html[data-mode="light"] .zone-case-dropdown, html[data-mode="dark"] .zone-case-dropdown {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border-color: var(--zw-input-line);
}
html[data-mode="light"] .zone-toolbar-icon:hover, html[data-mode="dark"] .zone-toolbar-icon:hover,
html[data-mode="light"] .zone-toolbar-btn:hover, html[data-mode="dark"] .zone-toolbar-btn:hover {
    background: var(--zw-panel-2-bg);
    border-color: var(--zw-line);
}
html[data-mode="light"] .zone-toolbar-label, html[data-mode="dark"] .zone-toolbar-label { color: var(--zw-ink); }
html[data-mode="light"] .zone-toolbar-sep, html[data-mode="dark"] .zone-toolbar-sep { background: var(--zw-line); }
html[data-mode="dark"] .zone-toolbar-icon img { filter: brightness(1.35) saturate(.9); }

/* Left action panel (the WPF-style button column) */
html[data-mode="light"] .esp-left-panel, html[data-mode="dark"] .esp-left-panel {
    background: var(--zw-nav-bg);
    border-right: 1px solid var(--zw-line);
}
html[data-mode="light"] .esp-action-btn, html[data-mode="dark"] .esp-action-btn {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .esp-action-btn:hover, html[data-mode="dark"] .esp-action-btn:hover {
    background: var(--zw-panel-2-bg);
    border-color: var(--zw-primary);
}
html[data-mode="light"] .esp-action-btn.active, html[data-mode="dark"] .esp-action-btn.active {
    background: var(--zw-primary);
    color: var(--zw-primary-fg);
    border-color: var(--zw-primary);
}

/* Tabs */
html[data-mode="light"] .zone-tab-header, html[data-mode="dark"] .zone-tab-header {
    background: var(--zw-tab-bar-bg);
    border-bottom: 2px solid var(--zw-tab-line);
    padding: 4px 6px 0;
    gap: 2px;
}
html[data-mode="light"] .zone-tab, html[data-mode="dark"] .zone-tab {
    color: var(--zw-ink-2);
    border-radius: var(--zw-radius) var(--zw-radius) 0 0;
    border-color: transparent;
}
html[data-mode="light"] .zone-tab:hover, html[data-mode="dark"] .zone-tab:hover { background: var(--zw-panel-2-bg); }
html[data-mode="light"] .zone-tab.active, html[data-mode="dark"] .zone-tab.active {
    background: var(--zw-tab-active-bg);
    color: var(--zw-ink);
    border-color: var(--zw-line) var(--zw-line) transparent var(--zw-line);
    box-shadow: inset 0 -2px 0 var(--zw-primary);   /* the coloured underline that marks the active tab */
}
html[data-mode="light"] .zone-tab-content, html[data-mode="dark"] .zone-tab-content { background: var(--zw-panel-bg); color: var(--zw-ink); }

/* Window titles, form chrome */
html[data-mode="light"] .esp-form-title, html[data-mode="dark"] .esp-form-title {
    background: var(--zw-title-bg);
    color: var(--zw-title-fg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .esp-form-label, html[data-mode="dark"] .esp-form-label { color: var(--zw-ink); }
html[data-mode="light"] .esp-form-btn, html[data-mode="dark"] .esp-form-btn {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .esp-form-btn:hover:not(:disabled), html[data-mode="dark"] .esp-form-btn:hover:not(:disabled) {
    background: var(--zw-panel-2-bg);
    border-color: var(--zw-primary);
}
html[data-mode="light"] .esp-form-input, html[data-mode="dark"] .esp-form-input,
html[data-mode="light"] .esp-form-select, html[data-mode="dark"] .esp-form-select,
html[data-mode="light"] .esp-form-container textarea, html[data-mode="dark"] .esp-form-container textarea {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border: 1px solid var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .esp-form-input:focus, html[data-mode="dark"] .esp-form-input:focus,
html[data-mode="light"] .esp-form-select:focus, html[data-mode="dark"] .esp-form-select:focus {
    outline: 2px solid color-mix(in srgb, var(--zw-primary) 40%, transparent);
    border-color: var(--zw-primary);
}

/* Modals */
html[data-mode="light"] .esp-modal, html[data-mode="dark"] .esp-modal {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
}
html[data-mode="light"] .esp-modal-title, html[data-mode="dark"] .esp-modal-title {
    background: var(--zw-title-bg);
    color: var(--zw-title-fg);
    border-radius: var(--zw-radius) var(--zw-radius) 0 0;
    border-bottom: 1px solid var(--zw-line);
}

/* WPF-style grids */
html[data-mode="light"] .esp-wpfgrid, html[data-mode="dark"] .esp-wpfgrid {
    background: var(--zw-panel-bg);
    border: 1px solid var(--zw-line);
}
html[data-mode="light"] .esp-wpfgrid th, html[data-mode="dark"] .esp-wpfgrid th {
    background: var(--zw-grid-head-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-grid-line);
    border-bottom: 2px solid var(--zw-line);
}
html[data-mode="light"] .esp-wpfgrid td, html[data-mode="dark"] .esp-wpfgrid td {
    color: var(--zw-ink);
    border: 1px solid var(--zw-grid-line);
}

/* ── Dark-only: the wide brush. Everything app.css paints white or near-black gets the panel
   colours, so a window that has not been styled individually still reads. First pass — the walk
   through every window will find the stragglers. ── */
html[data-mode="dark"] .esp-content,
html[data-mode="dark"] .esp-form-container,
html[data-mode="dark"] .esp-results-tab,
html[data-mode="dark"] .esp-results-pane {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
}
html[data-mode="dark"] .esp-form-container pre,
html[data-mode="dark"] .esp-form-container textarea[readonly] {
    background: var(--zw-panel-2-bg);
    color: var(--zw-ink);
    border-color: var(--zw-line);
}
html[data-mode="dark"] .esp-form-container fieldset,
html[data-mode="dark"] .esp-form-container hr { border-color: var(--zw-line); }
html[data-mode="dark"] .esp-form-input:disabled,
html[data-mode="dark"] .esp-form-select:disabled { background: var(--zw-panel-2-bg); color: var(--zw-ink-2); }
html[data-mode="dark"] #blazor-error-ui { color-scheme: light only; }

/* ═══════════════════ Open Project from Database (OpenProjectDialog.razor) ═══════════════════
   Its Classic styling lives in the component's own <style> block (navy panel, white table).
   Same specificity trick: html[data-mode] + class beats the bare class. Paul, 2026-09-11:
   "doesn't carry the styling over, that will be our first to update". */
html[data-mode="light"] .opd-overlay, html[data-mode="dark"] .opd-overlay { background: rgba(8, 14, 26, 0.55); }
html[data-mode="light"] .opd-dialog, html[data-mode="dark"] .opd-dialog {
    background: var(--zw-panel-bg);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
    overflow: hidden;
}
html[data-mode="light"] .opd-header, html[data-mode="dark"] .opd-header {
    background: var(--zw-title-bg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .opd-title, html[data-mode="dark"] .opd-title { color: var(--zw-title-fg); }
html[data-mode="light"] .opd-close-btn, html[data-mode="dark"] .opd-close-btn { color: var(--zw-ink-2); border-radius: var(--zw-radius-sm); }
html[data-mode="light"] .opd-close-btn:hover, html[data-mode="dark"] .opd-close-btn:hover { color: var(--zw-ink); background: var(--zw-panel-2-bg); }
html[data-mode="light"] .opd-filters, html[data-mode="dark"] .opd-filters {
    background: var(--zw-panel-bg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .opd-filter-group label, html[data-mode="dark"] .opd-filter-group label { color: var(--zw-ink); }
html[data-mode="light"] .opd-filter-group select, html[data-mode="dark"] .opd-filter-group select,
html[data-mode="light"] .opd-filter-group input, html[data-mode="dark"] .opd-filter-group input {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border: 1px solid var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .opd-grid-container, html[data-mode="dark"] .opd-grid-container { background: var(--zw-panel-bg); }
html[data-mode="light"] .opd-table th, html[data-mode="dark"] .opd-table th {
    background: var(--zw-grid-head-bg);
    color: var(--zw-ink);
    border-bottom: 2px solid var(--zw-line);
}
html[data-mode="light"] .opd-table td, html[data-mode="dark"] .opd-table td {
    color: var(--zw-ink);
    border-bottom: 1px solid var(--zw-grid-line);
}
html[data-mode="light"] .opd-table tbody tr, html[data-mode="dark"] .opd-table tbody tr { background: var(--zw-panel-bg); }
html[data-mode="light"] .opd-table tbody tr:nth-child(even), html[data-mode="dark"] .opd-table tbody tr:nth-child(even) { background: var(--zw-panel-2-bg); }
html[data-mode="light"] .opd-table tbody tr:hover, html[data-mode="dark"] .opd-table tbody tr:hover {
    background: color-mix(in srgb, var(--zw-primary) 12%, var(--zw-panel-bg));
}
html[data-mode="light"] .opd-row-selected, html[data-mode="dark"] .opd-row-selected {
    background: color-mix(in srgb, var(--zw-primary) 22%, var(--zw-panel-bg)) !important;   /* the component's rule is !important too */
}
html[data-mode="light"] .opd-open-btn, html[data-mode="dark"] .opd-open-btn {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .opd-open-btn:hover, html[data-mode="dark"] .opd-open-btn:hover { background: var(--zw-panel-2-bg); border-color: var(--zw-primary); }
html[data-mode="light"] .opd-loading, html[data-mode="dark"] .opd-loading { color: var(--zw-ink-2); }
html[data-mode="light"] .opd-error, html[data-mode="dark"] .opd-error { color: #d9534f; }
html[data-mode="light"] .opd-footer, html[data-mode="dark"] .opd-footer {
    background: var(--zw-panel-bg);
    border-top: 1px solid var(--zw-line);
}
html[data-mode="light"] .opd-row-count, html[data-mode="dark"] .opd-row-count { color: var(--zw-ink-2); }
html[data-mode="light"] .opd-btn, html[data-mode="dark"] .opd-btn {
    background: var(--zw-primary);
    color: var(--zw-primary-fg);
    border: 1px solid var(--zw-primary);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .opd-btn:hover, html[data-mode="dark"] .opd-btn:hover { filter: brightness(1.08); }
html[data-mode="light"] .opd-btn-secondary, html[data-mode="dark"] .opd-btn-secondary {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border-color: var(--zw-btn-line);
}
html[data-mode="light"] .opd-btn-secondary:hover, html[data-mode="dark"] .opd-btn-secondary:hover { background: var(--zw-panel-2-bg); filter: none; }

/* ═══════════════════════ Design window — first full pass (Paul, 2026-09-11) ═══════════════════════
   Everything app.css paints inside the ESP Design page: the shell, action panel details, inner
   tabs, the form chrome and its WPF pastel sections, results + equipment list, error/warning
   tabs, the Well Design grids, the tool grids. Selector list was taken from a colour audit of
   app.css, so a class that is not here has no colour of its own and inherits the panel.
   Modes read the tokens declared at the top of this file. */

/* ── Shell ── */
html[data-mode="light"] .esp-content, html[data-mode="dark"] .esp-content,
html[data-mode="light"] .esp-form-container, html[data-mode="dark"] .esp-form-container,
html[data-mode="light"] .esp-form-content, html[data-mode="dark"] .esp-form-content,
html[data-mode="light"] .esp-tg-page, html[data-mode="dark"] .esp-tg-page {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
}
html[data-mode="light"] .esp-form-button-bar, html[data-mode="dark"] .esp-form-button-bar {
    background: var(--zw-panel-2-bg);
    border-top: 1px solid var(--zw-line);
}
html[data-mode="light"] .esp-quickdesign-banner, html[data-mode="dark"] .esp-quickdesign-banner {
    background: color-mix(in srgb, #e0a020 14%, var(--zw-panel-bg));
    border-bottom: 1px solid color-mix(in srgb, #e0a020 45%, transparent);
    color: var(--zw-ink);
}

/* ── Action panel (left column) — the rest of it ── */
html[data-mode="light"] .esp-action-header, html[data-mode="dark"] .esp-action-header {
    color: var(--zw-nav-fg);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
html[data-mode="light"] .esp-action-btn-checkbox, html[data-mode="dark"] .esp-action-btn-checkbox {
    background: var(--zw-btn-bg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
    overflow: hidden;
}
html[data-mode="light"] .esp-action-btn-inner, html[data-mode="dark"] .esp-action-btn-inner { color: var(--zw-btn-fg); }
html[data-mode="light"] .esp-action-btn-inner:hover, html[data-mode="dark"] .esp-action-btn-inner:hover { background: var(--zw-panel-2-bg); }
html[data-mode="light"] .esp-action-sep, html[data-mode="dark"] .esp-action-sep { background: rgba(255,255,255,0.12); height: 1px; margin: 6px 4px; }
html[data-mode="light"] .esp-action-label, html[data-mode="dark"] .esp-action-label { color: rgba(255,255,255,0.65); }

/* ── Inner tabs (the tab strip inside a window) — same treatment as the outer tabs ── */
html[data-mode="light"] .esp-inner-tabs, html[data-mode="dark"] .esp-inner-tabs {
    background: var(--zw-tab-bar-bg);
    border-bottom: 2px solid var(--zw-tab-line);
    padding: 4px 6px 0;
}
html[data-mode="light"] .esp-inner-tab, html[data-mode="dark"] .esp-inner-tab {
    color: var(--zw-ink-2);
    border-color: transparent;
    border-radius: var(--zw-radius) var(--zw-radius) 0 0;
}
html[data-mode="light"] .esp-inner-tab:hover, html[data-mode="dark"] .esp-inner-tab:hover { background: var(--zw-panel-2-bg); }
html[data-mode="light"] .esp-inner-tab.active, html[data-mode="dark"] .esp-inner-tab.active {
    background: var(--zw-tab-active-bg);
    color: var(--zw-ink);
    border-color: var(--zw-line) var(--zw-line) transparent var(--zw-line);
    box-shadow: inset 0 -2px 0 var(--zw-primary);
}
/* The Errors / Warnings / OK coloured tabs keep their meaning; only the corners change. */
html[data-mode="light"] .zone-tab.ew-tab-red, html[data-mode="dark"] .zone-tab.ew-tab-red,
html[data-mode="light"] .zone-tab.ew-tab-yellow, html[data-mode="dark"] .zone-tab.ew-tab-yellow,
html[data-mode="light"] .zone-tab.ew-tab-green, html[data-mode="dark"] .zone-tab.ew-tab-green { box-shadow: none; }

/* ── Form chrome ── */
html[data-mode="light"] .esp-form-unit, html[data-mode="dark"] .esp-form-unit,
html[data-mode="light"] .esp-tg-unit, html[data-mode="dark"] .esp-tg-unit,
html[data-mode="light"] .well-unit, html[data-mode="dark"] .well-unit { color: var(--zw-ink-2); }
html[data-mode="light"] .esp-form-input[readonly], html[data-mode="dark"] .esp-form-input[readonly] {
    background: var(--zw-panel-2-bg);
    color: var(--zw-ink-2);
}
/* The blue "calculated value" text the desktop uses */
html[data-mode="light"] .esp-form-input.esp-input-calc:disabled { color: #1d4ed8; }
html[data-mode="dark"]  .esp-form-input.esp-input-calc:disabled { color: #8ab4ff; }
html[data-mode="light"] .esp-pcc-derived { color: #1d4ed8; }
html[data-mode="dark"]  .esp-pcc-derived { color: #8ab4ff; }
html[data-mode="dark"]  .esp-required { color: #ff8a80; }
html[data-mode="light"] .esp-pump-select-row, html[data-mode="dark"] .esp-pump-select-row { border-bottom: 1px solid var(--zw-line); }

/* Group boxes and the WPF pastel sections. Light keeps the pastels (they carry meaning on the
   Fluids and Well pages) but drops the 2px black frame for a 1px line and rounded corners; Dark
   uses a tinted dark of each pastel so the grouping still reads. */
html[data-mode="light"] .esp-groupbox, html[data-mode="dark"] .esp-groupbox,
html[data-mode="light"] .esp-form-section-gold, html[data-mode="dark"] .esp-form-section-gold,
html[data-mode="light"] .esp-form-section-blue, html[data-mode="dark"] .esp-form-section-blue,
html[data-mode="light"] .esp-form-section-green, html[data-mode="dark"] .esp-form-section-green,
html[data-mode="light"] .esp-form-section-alice, html[data-mode="dark"] .esp-form-section-alice,
html[data-mode="light"] .esp-form-results, html[data-mode="dark"] .esp-form-results,
html[data-mode="light"] .esp-divider-blue, html[data-mode="dark"] .esp-divider-blue,
html[data-mode="light"] .well-data-section, html[data-mode="dark"] .well-data-section,
html[data-mode="light"] .well-gradient-header, html[data-mode="dark"] .well-gradient-header {
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .esp-groupbox-header, html[data-mode="dark"] .esp-groupbox-header { background: var(--zw-panel-bg); color: var(--zw-ink); }
html[data-mode="light"] .esp-form-results, html[data-mode="dark"] .esp-form-results { background: var(--zw-panel-bg); }
html[data-mode="dark"] .esp-form-section-gold, html[data-mode="dark"] .well-data-gold { background: #2a2410; }
html[data-mode="dark"] .esp-form-section-blue, html[data-mode="dark"] .well-data-cyan,
html[data-mode="dark"] .well-gradient-header { background: #0f2a33; }
html[data-mode="dark"] .esp-form-section-green, html[data-mode="dark"] .esp-perf-band-green { background: #10261a; }
html[data-mode="dark"] .esp-form-section-alice, html[data-mode="dark"] .esp-perf-band-alice { background: #14202e; }
/* Pump window ▸ Performance Data: the two bands plus the black bar between them (Paul, 2026-09-21). */
html[data-mode="light"] .esp-perf-band, html[data-mode="dark"] .esp-perf-band { color: var(--zw-ink); }
html[data-mode="light"] .esp-perf-sep, html[data-mode="dark"] .esp-perf-sep { background: var(--zw-line); }
/* Select Pump window: frame takes the nav colour, client area the panel colour + ink, readout the line
   colour — same treatment as .esp-modal / .esp-modal-title above (Paul, 2026-09-21). */
html[data-mode="light"] .esp-selpump-window, html[data-mode="dark"] .esp-selpump-window {
    background: var(--zw-title-bg);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
}
html[data-mode="light"] .esp-selpump-client, html[data-mode="dark"] .esp-selpump-client {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .esp-selpump-stages, html[data-mode="dark"] .esp-selpump-stages { border-color: var(--zw-line); }
html[data-mode="light"] .esp-selpump-row:hover, html[data-mode="dark"] .esp-selpump-row:hover { background: color-mix(in srgb, var(--zw-primary) 10%, var(--zw-panel-bg)); }
html[data-mode="light"] .esp-selpump-row.sel, html[data-mode="dark"] .esp-selpump-row.sel { background: color-mix(in srgb, var(--zw-primary) 22%, var(--zw-panel-bg)); }
/* Expanded VSD Chart window — same shape as the six dialogs: overlay, panel, title strip, tokens for
   text and the copy button (Paul, 2026-09-21: theme colours in this window were wrong). */
html[data-mode="light"] .vsd-overlay, html[data-mode="dark"] .vsd-overlay { background: rgba(8, 14, 26, 0.55); }
html[data-mode="light"] .vsd-window, html[data-mode="dark"] .vsd-window {
    background: var(--zw-title-bg);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
}
html[data-mode="light"] .vsd-client, html[data-mode="dark"] .vsd-client {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border-radius: var(--zw-radius-sm);
    overflow: hidden;
}
html[data-mode="light"] .vsd-titlebar, html[data-mode="dark"] .vsd-titlebar { background: var(--zw-title-bg); color: var(--zw-title-fg); }
html[data-mode="light"] .vsd-muted, html[data-mode="dark"] .vsd-muted { color: var(--zw-ink-2); }
html[data-mode="dark"] .vsd-error { color: #ff8a80; }
html[data-mode="light"] .vsd-copybtn, html[data-mode="dark"] .vsd-copybtn { background: var(--zw-btn-bg); color: var(--zw-btn-fg); border-color: var(--zw-btn-line); }

/* ── Add / Delete Motors dialog (EspMotorForm's am-* component-local styles) ──────────────────
   Same treatment as the six dialogs above: its Classic look (light-grey panel, navy title strip,
   black panel rules) lives in the component's own <style> block, which outranks nothing here
   because html[data-mode] + class is more specific (Paul, 2026-09-21). */
html[data-mode="light"] .am-backdrop, html[data-mode="dark"] .am-backdrop { background: rgba(8, 14, 26, 0.55); }
html[data-mode="light"] .am-dialog, html[data-mode="dark"] .am-dialog {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
    overflow: hidden;
}
html[data-mode="light"] .am-title, html[data-mode="dark"] .am-title {
    background: var(--zw-title-bg);
    color: var(--zw-title-fg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .am-panel, html[data-mode="dark"] .am-panel { border-color: var(--zw-line); }
html[data-mode="light"] .am-buttons, html[data-mode="dark"] .am-buttons { border-top-color: var(--zw-line); }
html[data-mode="light"] .mtr-rule, html[data-mode="dark"] .mtr-rule { background: var(--zw-line); }
html[data-mode="light"] .am-empty, html[data-mode="dark"] .am-empty { color: var(--zw-ink-2); }
/* The desktop's pink "no sensor" flag on the Sensor combo — a dark tint that still reads as a flag. */
html[data-mode="dark"] .esp-form-select.mtr-flagged { background: #5a2a33; color: var(--zw-ink); }
/* Motor form's amber note block. */
html[data-mode="dark"] .esp-form-note { background: #2a2410; color: #e0c890; border-color: #6b5a2a; }

/* ── Inflow Sweep chart toolbar (EspInflowSweepChart's ifc-* component-local styles) ──────────
   Copy Image / Options ▾ and the Options drop-down, plus the caption and status text beside them
   (Paul, 2026-09-21). The Classic look — raised grey buttons, white menu panel, pale-blue hover —
   stays in the component's own <style> block; these retint it for Light/Dark. */
html[data-mode="light"] .ifc-btn, html[data-mode="dark"] .ifc-btn {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .ifc-btn:hover, html[data-mode="dark"] .ifc-btn:hover {
    background: var(--zw-panel-2-bg);
    border-color: var(--zw-primary);
}
html[data-mode="light"] .ifc-menu-panel, html[data-mode="dark"] .ifc-menu-panel {
    background: var(--zw-menu-bg);
    color: var(--zw-menu-fg);
    border: 1px solid var(--zw-menu-line);
    border-radius: var(--zw-radius-sm);
    box-shadow: var(--zw-shadow);
}
html[data-mode="light"] .ifc-menu-item, html[data-mode="dark"] .ifc-menu-item { color: var(--zw-menu-fg); }
html[data-mode="light"] .ifc-menu-item:hover, html[data-mode="dark"] .ifc-menu-item:hover {
    background: var(--zw-menu-hover-bg);
    color: var(--zw-menu-hover-fg);
}
html[data-mode="light"] .ifc-caption, html[data-mode="dark"] .ifc-caption { color: var(--zw-ink); }
html[data-mode="light"] .ifc-status, html[data-mode="dark"] .ifc-status,
html[data-mode="light"] .ifc-empty, html[data-mode="dark"] .ifc-empty { color: var(--zw-ink-2); }

/* ── The last five component-local <style> blocks (2026-09-21) ────────────────────────────────
   Flowing Gradient tool, Motor ReRate tool, Pressure Gradient chart, View Nodes, View Raw Data.
   Each kept its Classic look locally with no theme rules at all, so each would have shown the same
   Dark-mode defect as the Add/Delete Motors dialog when opened. Amber/gold warning blocks keep a
   warm tint rather than becoming plain panels — they carry meaning. */

/* Flowing Gradient tool: fallback pill, fallback rows, warning block. */
html[data-mode="dark"] .fgc-fallback { background: #3a2c10; color: #f0d9a6; }
html[data-mode="light"] .fgc-row-fallback td, html[data-mode="dark"] .fgc-row-fallback td { color: var(--zw-ink-2); }
html[data-mode="dark"] .fgc-warning { background: #2a2410; color: #e8d4a0; border-color: #6b5a2a; }

/* Motor ReRate tool: summary pane, dialog frame/title/buttons, note block. */
html[data-mode="light"] .mrr-summary, html[data-mode="dark"] .mrr-summary {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .mrr-backdrop, html[data-mode="dark"] .mrr-backdrop { background: rgba(8, 14, 26, 0.55); }
html[data-mode="light"] .mrr-dialog, html[data-mode="dark"] .mrr-dialog {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
    overflow: hidden;
}
html[data-mode="light"] .mrr-dlg-title, html[data-mode="dark"] .mrr-dlg-title {
    background: var(--zw-title-bg);
    color: var(--zw-title-fg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .mrr-dlg-buttons, html[data-mode="dark"] .mrr-dlg-buttons { border-top-color: var(--zw-line); }
html[data-mode="dark"] .mrr-note { background: #2a2410; color: #e0c890; border-color: #6b5a2a; }

/* ESP Bend Analysis (2026-10-05): paste dialog, summary/paste text boxes, PASS/FAIL banners and failing rows. */
html[data-mode="light"] .ebt-backdrop, html[data-mode="dark"] .ebt-backdrop { background: rgba(8, 14, 26, 0.55); }
html[data-mode="light"] .ebt-dialog, html[data-mode="dark"] .ebt-dialog {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
    overflow: hidden;
}
html[data-mode="light"] .ebt-summary, html[data-mode="dark"] .ebt-summary,
html[data-mode="light"] .ebt-paste, html[data-mode="dark"] .ebt-paste {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .ebt-hint, html[data-mode="dark"] .ebt-hint { color: var(--zw-ink-2); }
html[data-mode="light"] .ebt-ribbon-cap, html[data-mode="dark"] .ebt-ribbon-cap,
html[data-mode="light"] .ebt-mark, html[data-mode="dark"] .ebt-mark { color: var(--zw-ink-2); }
html[data-mode="dark"] .ebt-ribbon { border-bottom-color: var(--zw-line, #3a3f47); }
html[data-mode="dark"] .ebt-ribbon-group { border-right-color: var(--zw-line, #3a3f47); }
html[data-mode="dark"] .ebt-ok { background: #16301f; border-color: #3d7a4f; color: #a8dcb5; }
html[data-mode="dark"] .ebt-fail { background: #351818; border-color: #8a3d3d; color: #f0b4b4; }
html[data-mode="dark"] .ebt-row-fail td { background: #351818; }

/* Pressure Gradient chart: the empty-state note. */
html[data-mode="light"] .pg-note-empty, html[data-mode="dark"] .pg-note-empty { color: var(--zw-ink-2); }

/* View Nodes: scroll frame, sticky header, warning block. */
html[data-mode="light"] .vn-scroll, html[data-mode="dark"] .vn-scroll {
    border-color: var(--zw-line);
    background: var(--zw-panel-bg);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .vn-grid th, html[data-mode="dark"] .vn-grid th {
    background: var(--zw-grid-head-bg);
    color: var(--zw-ink);
    border-color: var(--zw-grid-line);
}
html[data-mode="dark"] .vn-warn { background: #2a2410; color: #e8d4a0; border-color: #6b5a2a; }

/* View Raw Data: status line, scroll frame, sticky header, NULL cells. */
html[data-mode="light"] .vrd-status, html[data-mode="dark"] .vrd-status { color: var(--zw-ink-2); }
html[data-mode="light"] .vrd-scroll, html[data-mode="dark"] .vrd-scroll {
    border-color: var(--zw-line);
    background: var(--zw-panel-bg);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .vrd-grid th, html[data-mode="dark"] .vrd-grid th {
    background: var(--zw-grid-head-bg);
    color: var(--zw-ink);
    border-color: var(--zw-grid-line);
}
html[data-mode="light"] .vrd-null, html[data-mode="dark"] .vrd-null { color: var(--zw-ink-2); }
html[data-mode="dark"] .esp-divider-blue { background: #1b3550; }
html[data-mode="light"] .well-data-divider, html[data-mode="dark"] .well-data-divider,
html[data-mode="light"] .esp-tg-rule, html[data-mode="dark"] .esp-tg-rule,
html[data-mode="light"] .esp-visc-foot, html[data-mode="dark"] .esp-visc-foot { background: var(--zw-line); border-color: var(--zw-line); }

/* Checkboxes (app.css draws its own) */
html[data-mode="dark"] .esp-form-container input[type="checkbox"] { background: var(--zw-input-bg); border-color: var(--zw-input-line); }
html[data-mode="dark"] .esp-form-container input[type="checkbox"]:checked::after { border-color: var(--zw-ink); }
html[data-mode="dark"] .esp-form-container input[type="checkbox"]:disabled { background: var(--zw-panel-2-bg); border-color: var(--zw-line); }
html[data-mode="dark"] .esp-form-container input[type="checkbox"]:focus-visible { outline-color: var(--zw-ink-2); }

/* ── Results tab + equipment list/schematic ── */
html[data-mode="light"] .results-container, html[data-mode="dark"] .results-container,
html[data-mode="light"] .results-diagram, html[data-mode="dark"] .results-diagram {
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius-sm);
    overflow: hidden;
}
html[data-mode="light"] .results-header, html[data-mode="dark"] .results-header,
html[data-mode="light"] .equip-diagram-header, html[data-mode="dark"] .equip-diagram-header {
    color: var(--zw-title-fg);
    background: var(--zw-title-bg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .results-text, html[data-mode="dark"] .results-text { background: var(--zw-panel-bg); }
html[data-mode="light"] .results-pre, html[data-mode="dark"] .results-pre { color: var(--zw-ink); }
html[data-mode="light"] .equip-diagram-stack, html[data-mode="dark"] .equip-diagram-stack,
html[data-mode="light"] .equip-side, html[data-mode="dark"] .equip-side,
html[data-mode="light"] .equip-img-wrap, html[data-mode="dark"] .equip-img-wrap,
html[data-mode="light"] .equip-info-row, html[data-mode="dark"] .equip-info-row,
html[data-mode="light"] .equip-total-spacer, html[data-mode="dark"] .equip-total-spacer { border-color: var(--zw-line); }
html[data-mode="light"] .equip-info-row, html[data-mode="dark"] .equip-info-row,
html[data-mode="light"] .equip-info-title, html[data-mode="dark"] .equip-info-title { color: var(--zw-ink); }
html[data-mode="light"] .equip-list-note, html[data-mode="dark"] .equip-list-note { color: var(--zw-ink-2); border-top: 1px solid var(--zw-line); }
html[data-mode="light"] .equip-copy-btn, html[data-mode="dark"] .equip-copy-btn {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .equip-copy-btn:hover:not(:disabled), html[data-mode="dark"] .equip-copy-btn:hover:not(:disabled) { background: var(--zw-panel-2-bg); border-color: var(--zw-primary); }

/* Errors & Warnings list */
html[data-mode="light"] .ew-section-header, html[data-mode="dark"] .ew-section-header { border-bottom: 1px solid var(--zw-line); }
html[data-mode="dark"] .ew-section-header.errors { color: #ff8a80; background: rgba(198,40,40,0.18); }
html[data-mode="dark"] .ew-section-header.warnings { color: #ffb74d; background: rgba(230,81,0,0.18); }
html[data-mode="light"] .ew-item, html[data-mode="dark"] .ew-item { border-bottom: 1px solid var(--zw-line); }
html[data-mode="light"] .ew-empty, html[data-mode="dark"] .ew-empty { color: var(--zw-ink-2); }

/* ── Data grids of every family: blue-header grids become panel-2 headers with ink text ── */
html[data-mode="light"] .equip-table th, html[data-mode="dark"] .equip-table th,
html[data-mode="light"] .esp-datagrid th, html[data-mode="dark"] .esp-datagrid th,
html[data-mode="light"] .well-grid th, html[data-mode="dark"] .well-grid th,
html[data-mode="light"] .esp-lab-grid th, html[data-mode="dark"] .esp-lab-grid th,
html[data-mode="light"] .esp-aa-grid th, html[data-mode="dark"] .esp-aa-grid th,
html[data-mode="light"] .esp-wd-grid th, html[data-mode="dark"] .esp-wd-grid th,
html[data-mode="light"] .esp-pcc-fpgrid th, html[data-mode="dark"] .esp-pcc-fpgrid th,
html[data-mode="light"] .wtp-list th, html[data-mode="dark"] .wtp-list th,
html[data-mode="light"] .esp-tg-tablewrap th, html[data-mode="dark"] .esp-tg-tablewrap th {
    background: var(--zw-grid-head-bg);
    color: var(--zw-ink);
    border-color: var(--zw-grid-line);
    box-shadow: none;
}
html[data-mode="light"] .equip-table td, html[data-mode="dark"] .equip-table td,
html[data-mode="light"] .esp-datagrid td, html[data-mode="dark"] .esp-datagrid td,
html[data-mode="light"] .well-grid td, html[data-mode="dark"] .well-grid td,
html[data-mode="light"] .esp-lab-grid td, html[data-mode="dark"] .esp-lab-grid td,
html[data-mode="light"] .esp-aa-grid td, html[data-mode="dark"] .esp-aa-grid td {
    color: var(--zw-ink);
    border-color: var(--zw-grid-line);
}
/* Well Deviation survey grid BODY (Paul, 2026-10-01: "the grid in the Well Deviation window doesn't follow the colour
   theme"): only its header was themed; the light-blue calculated columns, grey station column, cell lines and frame
   kept their Classic colours. The calculated columns keep a faint primary tint so they still read as calculated. */
html[data-mode="light"] .esp-wd-gridwrap, html[data-mode="dark"] .esp-wd-gridwrap { border-color: var(--zw-line); background: var(--zw-panel-bg); }
html[data-mode="light"] .esp-wd-grid td, html[data-mode="dark"] .esp-wd-grid td { color: var(--zw-ink); border-color: var(--zw-grid-line); }
html[data-mode="light"] .esp-wd-grid td.calc, html[data-mode="dark"] .esp-wd-grid td.calc {
    background: color-mix(in srgb, var(--zw-primary) 8%, var(--zw-panel-bg));
    color: var(--zw-ink);
}
html[data-mode="light"] .esp-wd-grid td.idx, html[data-mode="dark"] .esp-wd-grid td.idx { background: var(--zw-panel-2-bg); color: var(--zw-ink-2); }
html[data-mode="light"] .esp-wd-grid td.esp-wd-empty, html[data-mode="dark"] .esp-wd-grid td.esp-wd-empty { color: var(--zw-ink-2); }
html[data-mode="light"] .esp-wd-grid th.calc, html[data-mode="dark"] .esp-wd-grid th.calc { background: var(--zw-grid-head-bg); }
/* The status line above the grid (stations · TD · max inclination) was a fixed #333 (Paul 2026-10-01). */
html[data-mode="light"] .esp-wd-status, html[data-mode="dark"] .esp-wd-status { color: var(--zw-ink); }
html[data-mode="light"] .esp-wd-hint, html[data-mode="dark"] .esp-wd-hint { color: var(--zw-ink-2); }
html[data-mode="dark"] .esp-wd-warn { color: #ffb74d; }
html[data-mode="dark"] .esp-wd-note { color: #81c784; }

html[data-mode="light"] .equip-table tr:hover td, html[data-mode="dark"] .equip-table tr:hover td,
html[data-mode="light"] .esp-datagrid tr:hover td, html[data-mode="dark"] .esp-datagrid tr:hover td,
html[data-mode="light"] .well-grid tr:hover td, html[data-mode="dark"] .well-grid tr:hover td,
html[data-mode="light"] .esp-wpfgrid tbody tr:hover td, html[data-mode="dark"] .esp-wpfgrid tbody tr:hover td,
/* Pick lists whose base rule paints the ROW (app.css): Add Casing/Tubing picker and the PCCT
   saved-set picker. Their hard-coded #d7e3f4 / #f0f4fa lit the row near-white under white ink
   in Dark mode (Paul, 2026-09-21). */
html[data-mode="light"] .wtp-list tbody tr:hover, html[data-mode="dark"] .wtp-list tbody tr:hover,
html[data-mode="light"] .esp-pcc-fpgrid tbody tr:hover, html[data-mode="dark"] .esp-pcc-fpgrid tbody tr:hover {
    background: color-mix(in srgb, var(--zw-primary) 10%, var(--zw-panel-bg));
}
html[data-mode="light"] .equip-table tr.selected td, html[data-mode="dark"] .equip-table tr.selected td,
html[data-mode="light"] .well-grid tr.selected td, html[data-mode="dark"] .well-grid tr.selected td,
html[data-mode="light"] .esp-pcc-fpgrid tbody tr.sel, html[data-mode="dark"] .esp-pcc-fpgrid tbody tr.sel {
    background: color-mix(in srgb, var(--zw-primary) 22%, var(--zw-panel-bg));
}
html[data-mode="light"] .esp-lab-grid td.esp-lab-empty, html[data-mode="dark"] .esp-lab-grid td.esp-lab-empty { color: var(--zw-ink-2); }

/* Lists, panes, text boxes */
html[data-mode="light"] .esp-listbox, html[data-mode="dark"] .esp-listbox,
html[data-mode="light"] .esp-pump-textpane, html[data-mode="dark"] .esp-pump-textpane,
html[data-mode="light"] .esp-lab-pastebox, html[data-mode="dark"] .esp-lab-pastebox,
html[data-mode="light"] .esp-pcc-pumpgrid-wrap, html[data-mode="dark"] .esp-pcc-pumpgrid-wrap,
html[data-mode="light"] .wtp-listwrap, html[data-mode="dark"] .wtp-listwrap,
html[data-mode="light"] .esp-wd-graph, html[data-mode="dark"] .esp-wd-graph,
html[data-mode="light"] .well-grid-container, html[data-mode="dark"] .well-grid-container {
    background: var(--zw-panel-bg);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .esp-listbox-header, html[data-mode="dark"] .esp-listbox-header { background: var(--zw-panel-2-bg); border-bottom: 1px solid var(--zw-line); }
html[data-mode="light"] .esp-listbox-item, html[data-mode="dark"] .esp-listbox-item { border-bottom: 1px solid var(--zw-line); }
html[data-mode="light"] .esp-listbox-item:hover, html[data-mode="dark"] .esp-listbox-item:hover { background: color-mix(in srgb, var(--zw-primary) 10%, var(--zw-panel-bg)); }
html[data-mode="light"] .esp-listbox-item.selected, html[data-mode="dark"] .esp-listbox-item.selected { background: var(--zw-primary); color: var(--zw-primary-fg); }

/* Well Design page buttons/cells */
html[data-mode="light"] .well-btn, html[data-mode="dark"] .well-btn,
html[data-mode="light"] .well-btn-sm, html[data-mode="dark"] .well-btn-sm {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .well-btn:hover, html[data-mode="dark"] .well-btn:hover,
html[data-mode="light"] .well-btn-sm:hover, html[data-mode="dark"] .well-btn-sm:hover { background: var(--zw-panel-2-bg); border-color: var(--zw-primary); }
html[data-mode="dark"] .well-btn-delete { color: #ff8a80; }
html[data-mode="light"] .well-input, html[data-mode="dark"] .well-input,
html[data-mode="light"] .well-cell-input, html[data-mode="dark"] .well-cell-input {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border: 1px solid var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="dark"] .well-cell-type { color: #8ab4ff; background: var(--zw-panel-2-bg); }
html[data-mode="light"] .well-cell-type { color: #1d4ed8; background: var(--zw-panel-2-bg); }
html[data-mode="dark"] .well-cell-disabled { color: var(--zw-ink-2); }
html[data-mode="dark"] .well-error-bar { background: rgba(198,40,40,0.18); border-color: #ff8a80; }
html[data-mode="dark"] .well-error-text { color: #ff8a80; }
html[data-mode="dark"] .well-casing-issue { color: #ff8a80; background: var(--zw-panel-2-bg); }
html[data-mode="dark"] .well-btn-warn { background: rgba(198,40,40,0.25); border-color: #ff8a80; }

/* Notes, warnings and the pump-curve catalog tool */
html[data-mode="dark"] .esp-lab-note { background: var(--zw-panel-2-bg); border-left-color: var(--zw-primary); color: var(--zw-ink); }
html[data-mode="dark"] .esp-lab-warn, html[data-mode="dark"] .esp-su-warn, html[data-mode="dark"] .esp-tg-note,
html[data-mode="dark"] .esp-pcc-empty { background: #2a2410; border-color: #6b5a1a; color: #ffd78a; }
html[data-mode="dark"] .esp-highlight-bar { background: #1e4a7a; border-color: #2f6ea8; }
html[data-mode="light"] .esp-visc-value, html[data-mode="dark"] .esp-visc-value,
html[data-mode="light"] .esp-su-devhead, html[data-mode="dark"] .esp-su-devhead,
html[data-mode="light"] .esp-pcc-facts, html[data-mode="dark"] .esp-pcc-facts,
html[data-mode="light"] .esp-pcc-selectrow, html[data-mode="dark"] .esp-pcc-selectrow { color: var(--zw-ink); }
html[data-mode="light"] .esp-su-devnote, html[data-mode="dark"] .esp-su-devnote,
html[data-mode="light"] .esp-pcc-disclaimer, html[data-mode="dark"] .esp-pcc-disclaimer,
html[data-mode="light"] .esp-tg-empty, html[data-mode="dark"] .esp-tg-empty,
html[data-mode="light"] .esp-tg-radio-gated, html[data-mode="dark"] .esp-tg-radio-gated { color: var(--zw-ink-2); }
html[data-mode="light"] .esp-pcc-tabs, html[data-mode="dark"] .esp-pcc-tabs,
html[data-mode="light"] .esp-pcc-subtabs, html[data-mode="dark"] .esp-pcc-subtabs,
html[data-mode="light"] .esp-pcc-header, html[data-mode="dark"] .esp-pcc-header { border-color: var(--zw-line); }
html[data-mode="light"] .esp-pcc-tab, html[data-mode="dark"] .esp-pcc-tab {
    background: var(--zw-panel-2-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-bottom: none;
    border-radius: var(--zw-radius-sm) var(--zw-radius-sm) 0 0;
}
html[data-mode="dark"] .esp-pcc-fp { background: #241b3a; border-color: #5a4a8a; color: #d6c8ff; }
html[data-mode="dark"] .esp-pcc-obs { color: #ff9e9e; border-color: #ff9e9e; }
html[data-mode="light"] .esp-modal-backdrop, html[data-mode="dark"] .esp-modal-backdrop { background: rgba(8, 14, 26, 0.55); }

/* ═══════════════════════ The six dialogs with component-local styles (Paul, 2026-09-11) ═══════════════════════
   Each carries its Classic look in its own <style> block (navy frame, white client area). Same
   override pattern as the Open Project dialog: html[data-mode] + class outranks the local rule.
   Order Paul asked for: Summary Report, Quick Design, then Save Project As, Release Notes,
   Confirm, About. All six share one shape — panel with rounded corners, title strip on
   --zw-title-bg, tokens for body, inputs and buttons. */

/* ── Shared dialog frame: overlay · window · header · title · close · footer ── */
html[data-mode="light"] .csd-overlay, html[data-mode="dark"] .csd-overlay,
html[data-mode="light"] .qd-overlay,  html[data-mode="dark"] .qd-overlay,
html[data-mode="light"] .sap-overlay, html[data-mode="dark"] .sap-overlay,
html[data-mode="light"] .rn-overlay,  html[data-mode="dark"] .rn-overlay,
html[data-mode="light"] .cfd-overlay, html[data-mode="dark"] .cfd-overlay,
html[data-mode="light"] .abt-overlay, html[data-mode="dark"] .abt-overlay { background: rgba(8, 14, 26, 0.55); }

html[data-mode="light"] .csd-window, html[data-mode="dark"] .csd-window,
html[data-mode="light"] .qd-window,  html[data-mode="dark"] .qd-window,
html[data-mode="light"] .qd-confirm, html[data-mode="dark"] .qd-confirm,
html[data-mode="light"] .sap-dialog, html[data-mode="dark"] .sap-dialog,
html[data-mode="light"] .rn-dialog,  html[data-mode="dark"] .rn-dialog,
html[data-mode="light"] .cfd-dialog, html[data-mode="dark"] .cfd-dialog,
html[data-mode="light"] .abt-dialog, html[data-mode="dark"] .abt-dialog {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
    overflow: hidden;
}

html[data-mode="light"] .csd-titlebar, html[data-mode="dark"] .csd-titlebar,
html[data-mode="light"] .qd-header,    html[data-mode="dark"] .qd-header,
html[data-mode="light"] .sap-header,   html[data-mode="dark"] .sap-header,
html[data-mode="light"] .rn-header,    html[data-mode="dark"] .rn-header,
html[data-mode="light"] .cfd-header,   html[data-mode="dark"] .cfd-header,
html[data-mode="light"] .abt-header,   html[data-mode="dark"] .abt-header {
    background: var(--zw-title-bg);
    color: var(--zw-title-fg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .sap-title, html[data-mode="dark"] .sap-title,
html[data-mode="light"] .rn-title,  html[data-mode="dark"] .rn-title,
html[data-mode="light"] .cfd-title, html[data-mode="dark"] .cfd-title,
html[data-mode="light"] .abt-title, html[data-mode="dark"] .abt-title { color: var(--zw-title-fg); }

html[data-mode="light"] .qd-close,  html[data-mode="dark"] .qd-close,
html[data-mode="light"] .sap-close, html[data-mode="dark"] .sap-close,
html[data-mode="light"] .rn-close,  html[data-mode="dark"] .rn-close,
html[data-mode="light"] .cfd-close, html[data-mode="dark"] .cfd-close,
html[data-mode="light"] .abt-close, html[data-mode="dark"] .abt-close { color: var(--zw-ink-2); border-radius: var(--zw-radius-sm); }
html[data-mode="light"] .qd-close:hover,  html[data-mode="dark"] .qd-close:hover,
html[data-mode="light"] .sap-close:hover, html[data-mode="dark"] .sap-close:hover,
html[data-mode="light"] .rn-close:hover,  html[data-mode="dark"] .rn-close:hover,
html[data-mode="light"] .cfd-close:hover, html[data-mode="dark"] .cfd-close:hover,
html[data-mode="light"] .abt-close:hover, html[data-mode="dark"] .abt-close:hover { color: var(--zw-ink); background: var(--zw-panel-2-bg); }

html[data-mode="light"] .qd-footer,         html[data-mode="dark"] .qd-footer,
html[data-mode="light"] .qd-confirm-footer, html[data-mode="dark"] .qd-confirm-footer,
html[data-mode="light"] .sap-footer,        html[data-mode="dark"] .sap-footer,
html[data-mode="light"] .rn-footer,         html[data-mode="dark"] .rn-footer,
html[data-mode="light"] .cfd-footer,        html[data-mode="dark"] .cfd-footer,
html[data-mode="light"] .abt-footer,        html[data-mode="dark"] .abt-footer {
    background: var(--zw-panel-bg);
    border-top: 1px solid var(--zw-line);
    margin: 0;
}

/* Primary and secondary buttons across the six */
html[data-mode="light"] .sap-btn, html[data-mode="dark"] .sap-btn,
html[data-mode="light"] .cfd-btn, html[data-mode="dark"] .cfd-btn,
html[data-mode="light"] .rn-btn,  html[data-mode="dark"] .rn-btn,
html[data-mode="light"] .abt-btn, html[data-mode="dark"] .abt-btn {
    background: var(--zw-primary);
    color: var(--zw-primary-fg);
    border: 1px solid var(--zw-primary);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .sap-btn:hover, html[data-mode="dark"] .sap-btn:hover,
html[data-mode="light"] .cfd-btn:hover, html[data-mode="dark"] .cfd-btn:hover,
html[data-mode="light"] .rn-btn:hover,  html[data-mode="dark"] .rn-btn:hover,
html[data-mode="light"] .abt-btn:hover, html[data-mode="dark"] .abt-btn:hover { filter: brightness(1.08); }
html[data-mode="light"] .sap-btn-secondary, html[data-mode="dark"] .sap-btn-secondary,
html[data-mode="light"] .cfd-btn-secondary, html[data-mode="dark"] .cfd-btn-secondary,
html[data-mode="light"] .qd-btn,            html[data-mode="dark"] .qd-btn {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .sap-btn-secondary:hover, html[data-mode="dark"] .sap-btn-secondary:hover,
html[data-mode="light"] .cfd-btn-secondary:hover, html[data-mode="dark"] .cfd-btn-secondary:hover,
html[data-mode="light"] .qd-btn:hover,            html[data-mode="dark"] .qd-btn:hover { background: var(--zw-panel-2-bg); border-color: var(--zw-primary); filter: none; }

/* ── 1. Summary Report (CaseSummaryDialog, csd-*) ── */
html[data-mode="light"] .csd-tabstrip, html[data-mode="dark"] .csd-tabstrip {
    background: var(--zw-panel-bg);
    border-bottom: 2px solid var(--zw-tab-line);
    padding: 6px 6px 0;
}
html[data-mode="light"] .csd-tab, html[data-mode="dark"] .csd-tab {
    background: var(--zw-tab-active-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-bottom: none;
    border-radius: var(--zw-radius) var(--zw-radius) 0 0;
    box-shadow: inset 0 -2px 0 var(--zw-primary);
    margin-bottom: -2px;
    padding-bottom: 5px;
}
html[data-mode="light"] .csd-grid, html[data-mode="dark"] .csd-grid {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: 0 var(--zw-radius-sm) var(--zw-radius-sm) var(--zw-radius-sm);
}
html[data-mode="light"] .csd-note, html[data-mode="dark"] .csd-note { color: var(--zw-ink-2); }
html[data-mode="light"] .csd-sheetbox, html[data-mode="dark"] .csd-sheetbox { border-color: var(--zw-line); border-radius: var(--zw-radius-sm); }
html[data-mode="light"] .csd-check.csd-disabled, html[data-mode="dark"] .csd-check.csd-disabled { color: var(--zw-ink-2); opacity: .6; }
html[data-mode="light"] .csd-window .esp-form-btn, html[data-mode="dark"] .csd-window .esp-form-btn { border-radius: var(--zw-radius-sm); }
/* The logo preview keeps a white card in both modes: customer logos are drawn for a white page. */
html[data-mode="dark"] .csd-window img { border-color: var(--zw-line) !important; }
/* Progress bar under Print (10-14): the Classic rule hard-codes #333 text on a white track, unreadable on the dark panel
   (Paul, 10-14: "Font is too dark for dark mode"). Text and track take the tokens; the fill takes the primary blue. */
html[data-mode="light"] .csd-progress-text, html[data-mode="dark"] .csd-progress-text { color: var(--zw-ink-2); }
html[data-mode="light"] .csd-progress-track, html[data-mode="dark"] .csd-progress-track { background: var(--zw-input-bg); border-color: var(--zw-line); border-radius: var(--zw-radius-sm); overflow: hidden; }
html[data-mode="light"] .csd-progress-fill, html[data-mode="dark"] .csd-progress-fill { background: var(--zw-primary); }
/* Generating: the locked Print button pulses in the primary blue instead of the Classic navy. */
html[data-mode="light"] .csd-print.csd-generating:disabled, html[data-mode="dark"] .csd-print.csd-generating:disabled {
    background: var(--zw-primary); color: var(--zw-primary-fg); border-color: var(--zw-primary); animation-name: csd-pulse-modern;
}
@keyframes csd-pulse-modern {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 139, 224, 0); }
    50% { box-shadow: 0 0 12px 4px rgba(79, 139, 224, 0.7); }
}

/* ── 2. Quick Design (QuickDesignDialog, qd-*) ── */
html[data-mode="light"] .qd-body, html[data-mode="dark"] .qd-body,
html[data-mode="light"] .qd-confirm-body, html[data-mode="dark"] .qd-confirm-body {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    margin: 0;
}
html[data-mode="light"] .qd-panel, html[data-mode="dark"] .qd-panel {
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius-sm);
}
/* The three group pastels: kept in Light (the desktop's meaning), tinted dark in Dark. */
html[data-mode="dark"] .qd-panel-well  { background: #2a2410; }
html[data-mode="dark"] .qd-panel-fluid { background: #0f2a33; }
html[data-mode="dark"] .qd-panel-pt    { background: #10261a; }
html[data-mode="dark"] .qd-req { color: #ff8a80; }
html[data-mode="light"] .qd-picker-btn, html[data-mode="dark"] .qd-picker-btn { background: var(--zw-panel-2-bg); color: var(--zw-ink); border-radius: 0 var(--zw-radius-sm) var(--zw-radius-sm) 0; }
html[data-mode="light"] .qd-picker, html[data-mode="dark"] .qd-picker {
    background: var(--zw-menu-bg);
    color: var(--zw-menu-fg);
    border: 1px solid var(--zw-menu-line);
    border-radius: var(--zw-radius-sm);
    box-shadow: var(--zw-shadow);
}
html[data-mode="light"] .qd-picker-item:hover, html[data-mode="dark"] .qd-picker-item:hover { background: var(--zw-menu-hover-bg); color: var(--zw-menu-hover-fg); }
html[data-mode="light"] .qd-picker-empty, html[data-mode="dark"] .qd-picker-empty { color: var(--zw-ink-2); }
html[data-mode="light"] .qd-banner, html[data-mode="dark"] .qd-banner {
    background: color-mix(in srgb, #e0a020 14%, var(--zw-panel-bg));
    border: 1px solid color-mix(in srgb, #e0a020 45%, transparent);
    border-radius: var(--zw-radius-sm);
    color: var(--zw-ink);
}
html[data-mode="light"] .qd-body .esp-form-input, html[data-mode="dark"] .qd-body .esp-form-input,
html[data-mode="light"] .qd-body input, html[data-mode="dark"] .qd-body input,
html[data-mode="light"] .qd-body select, html[data-mode="dark"] .qd-body select {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border: 1px solid var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}

/* ── 3. Save Project As (sap-*) ── */
html[data-mode="light"] .sap-label, html[data-mode="dark"] .sap-label { color: var(--zw-ink); }
html[data-mode="light"] .sap-input, html[data-mode="dark"] .sap-input {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border: 1px solid var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .sap-input:focus, html[data-mode="dark"] .sap-input:focus {
    border-color: var(--zw-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zw-primary) 25%, transparent);
}
html[data-mode="dark"] .sap-error { background: rgba(198,40,40,0.18); border-color: #ff8a80; color: #ff8a80; }

/* ── 4. Release Notes (rn-*) ── */
html[data-mode="light"] .rn-body, html[data-mode="dark"] .rn-body { color: var(--zw-ink); }
html[data-mode="light"] .rn-text, html[data-mode="dark"] .rn-text {
    background: var(--zw-panel-2-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius-sm);
}

/* ── 5. Confirm (cfd-*) ── */
html[data-mode="light"] .cfd-body, html[data-mode="dark"] .cfd-body { color: var(--zw-ink); }

/* ── 6. About (abt-*) ── */
html[data-mode="light"] .abt-body, html[data-mode="dark"] .abt-body { color: var(--zw-ink); }
html[data-mode="light"] .abt-product, html[data-mode="dark"] .abt-product { color: var(--zw-primary); }
html[data-mode="light"] .abt-subhead, html[data-mode="dark"] .abt-subhead { color: var(--zw-ink); }

/* ═══════════════════ Landing pages are UNIVERSAL (Paul, 2026-09-11) ═══════════════════
   Sign In, Forgot/Reset Password, Download and the first-login password page all wear the
   sign-in theme regardless of the user's appearance mode. The first-login page is the one that
   renders with a SIGNED-IN user, so <html data-mode="dark"> reaches it — and `color-scheme: dark`
   above makes the browser paint native inputs dark. Pin the light scheme inside the landing
   container, plus the explicit colours the sign-in page has. */
html[data-mode="dark"] .zone-login-page,
html[data-mode="light"] .zone-login-page { color-scheme: light; }
html[data-mode="dark"] .zone-login-page input,
html[data-mode="light"] .zone-login-page input {
    background: #ffffff;
    color: #1a2733;
    border-color: #c7ced6;
}
html[data-mode="dark"] .zone-login-page input:focus,
html[data-mode="light"] .zone-login-page input:focus { border-color: #29588c; }

/* ═══════════ In-app Change Password card stays LIGHT in every mode (Paul, 2026-09-11) ═══════════
   The card is a white panel; under Dark the browser's dark colour scheme painted its three boxes
   dark. Pin the light scheme and white inputs inside the card. */
html[data-mode="dark"] .acct-card, html[data-mode="light"] .acct-card { color-scheme: light; color: #1a2733; }
html[data-mode="dark"] .acct-card input, html[data-mode="light"] .acct-card input {
    background: #ffffff;
    color: #1a2733;
    border-color: #c7ced6;
}

/* ═══════════ Admin › User Web Access (adm-*) — Light + Dark (Paul, 2026-09-14) ═══════════
   The page carries its own <style> with hard-coded light colours (white buttons, #f6f9fc edit rows,
   dark-grey text), so under Dark the page shell went dark, the native inputs went dark with the
   colour scheme, and the rest stayed light: "the textboxes have a dark background along with font
   color issues". Same treatment as the six dialogs — every colour-bearing rule restated in tokens.
   Classic is untouched (no data-mode prefix here). */
html[data-mode="light"] .adm-wrap, html[data-mode="dark"] .adm-wrap { color: var(--zw-ink); }
html[data-mode="light"] .adm-title, html[data-mode="dark"] .adm-title { color: var(--zw-title-fg); }
html[data-mode="dark"] .adm-title { color: var(--zw-ink); }
html[data-mode="light"] .adm-sub, html[data-mode="dark"] .adm-sub,
html[data-mode="light"] .adm-muted, html[data-mode="dark"] .adm-muted,
html[data-mode="light"] .adm-table th, html[data-mode="dark"] .adm-table th { color: var(--zw-ink-2); }
html[data-mode="light"] .adm-table td, html[data-mode="dark"] .adm-table td { color: var(--zw-ink); }
html[data-mode="light"] .adm-table th, html[data-mode="dark"] .adm-table th,
html[data-mode="light"] .adm-table td, html[data-mode="dark"] .adm-table td { border-bottom-color: var(--zw-grid-line); }
html[data-mode="light"] .adm-table thead th, html[data-mode="dark"] .adm-table thead th { background: var(--zw-grid-head-bg); }
html[data-mode="light"] .adm-edit-row td, html[data-mode="dark"] .adm-edit-row td { background: var(--zw-panel-2-bg); }
html[data-mode="light"] .adm-edit[style*="border-top"], html[data-mode="dark"] .adm-edit[style*="border-top"] { border-top-color: var(--zw-line) !important; }

/* Inputs: the token colours, not the browser's colour-scheme default. */
html[data-mode="light"] .adm-search input, html[data-mode="dark"] .adm-search input,
html[data-mode="light"] .adm-edit input,   html[data-mode="dark"] .adm-edit input {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border: 1px solid var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .adm-search input:focus, html[data-mode="dark"] .adm-search input:focus,
html[data-mode="light"] .adm-edit input:focus,   html[data-mode="dark"] .adm-edit input:focus {
    outline: none;
    border-color: var(--zw-primary);
}
html[data-mode="dark"] .adm-search input::placeholder, html[data-mode="dark"] .adm-edit input::placeholder { color: var(--zw-ink-2); }

/* Buttons and links */
html[data-mode="light"] .adm-btn, html[data-mode="dark"] .adm-btn {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border-color: var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .adm-btn:hover, html[data-mode="dark"] .adm-btn:hover { background: var(--zw-panel-2-bg); border-color: var(--zw-line); }
html[data-mode="light"] .adm-primary, html[data-mode="dark"] .adm-primary,
html[data-mode="light"] .adm-primary:hover, html[data-mode="dark"] .adm-primary:hover {
    background: var(--zw-primary);
    border-color: var(--zw-primary);
    color: var(--zw-primary-fg);
}
html[data-mode="light"] .adm-primary:hover, html[data-mode="dark"] .adm-primary:hover { filter: brightness(1.08); }
html[data-mode="light"] .adm-danger, html[data-mode="dark"] .adm-danger { background: transparent; color: #e06a75; border-color: rgba(224,106,117,.45); }
html[data-mode="light"] .adm-danger { color: #b02a37; border-color: #e6b3b8; }
html[data-mode="light"] .adm-danger:hover { background: #fdecea; }
html[data-mode="dark"] .adm-danger:hover { background: rgba(224,106,117,.14); }
html[data-mode="light"] .adm-link, html[data-mode="dark"] .adm-link { background: none; color: var(--zw-primary); }

/* Status line and the generated-password callout */
html[data-mode="light"] .adm-status, html[data-mode="dark"] .adm-status {
    background: var(--zw-title-bg);
    border-color: var(--zw-line);
    color: var(--zw-title-fg);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .adm-gen, html[data-mode="dark"] .adm-gen { color: var(--zw-ink); }
html[data-mode="dark"] .adm-gen code { background: #3a2f0e; border-color: #6b5716; color: #ffe9a8; }

/* Admin › Login Activity (Paul, 2026-09-22). The page reuses the adm-* family above, so only its own
   pieces need rules: the event-filter select and the outcome pills. The pills keep their meaning in
   dark — green reads as "signed in", red as "refused" — on tints dark enough for white ink. */
html[data-mode="light"] .adm-search select, html[data-mode="dark"] .adm-search select {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border-color: var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}
/* The "Locked (n min left)" state and the active-lockouts panel on User Management (Paul, 2026-09-22).
   The panel keeps a warm red tint in Dark — it carries meaning, like the amber warning blocks. */
html[data-mode="light"] .adm-locked { color: #b02a37; }
html[data-mode="dark"]  .adm-locked { color: #f3b6bd; }
html[data-mode="light"] .adm-lockpanel { background: #fdecea; border-color: #e6b3b8; }
html[data-mode="dark"]  .adm-lockpanel { background: #3b1f24; border-color: #7a3b45; }
html[data-mode="light"] .adm-lockhead { color: #b02a37; }
html[data-mode="dark"]  .adm-lockhead { color: #f3b6bd; }
/* The "Signed in now" panel on User Management (Paul, 2026-10-21): a neutral panel in the mode's own tones; the
   Active pill stays green in both modes (the same tints as the Login Activity "signed in" pill), Idle is plain. */
html[data-mode="light"] .adm-livepanel, html[data-mode="dark"] .adm-livepanel { background: var(--zw-panel-2-bg); border-color: var(--zw-line); }
html[data-mode="light"] .adm-livehead, html[data-mode="dark"] .adm-livehead { color: var(--zw-ink); }
html[data-mode="light"] .adm-live-active { background: #e8f4ea; color: #1d6b33; border-color: #bcdcc4; }
html[data-mode="dark"]  .adm-live-active { background: #1d3a26; color: #86d29b; border-color: #2f5c3e; }
html[data-mode="light"] .adm-live-idle, html[data-mode="dark"] .adm-live-idle { background: var(--zw-panel-bg); color: var(--zw-ink-2); border-color: var(--zw-line); }

html[data-mode="light"] .adm-evt-ok  { background: #e8f4ea; color: #1d6b33; border-color: #bcdcc4; }
html[data-mode="dark"]  .adm-evt-ok  { background: #1d3a26; color: #86d29b; border-color: #2f5c3e; }
html[data-mode="light"] .adm-evt-out { background: var(--zw-panel-2-bg); color: var(--zw-ink-2); border-color: var(--zw-line); }
html[data-mode="dark"]  .adm-evt-out { background: var(--zw-panel-2-bg); color: var(--zw-ink-2); border-color: var(--zw-line); }
html[data-mode="light"] .adm-evt-bad { background: #fdecea; color: #b02a37; border-color: #e6b3b8; }
html[data-mode="dark"]  .adm-evt-bad { background: #5a2a33; color: #f3b6bd; border-color: #7a3b45; }

/* The Set / Reset modal and the scrolling list frame (adm-modal-*, adm-table-wrap), added 2026-09-14 */
html[data-mode="light"] .adm-table-wrap, html[data-mode="dark"] .adm-table-wrap { background: var(--zw-panel-bg); border-color: var(--zw-line); border-radius: var(--zw-radius-sm); }
html[data-mode="light"] .adm-hint, html[data-mode="dark"] .adm-hint { color: var(--zw-ink-2); }
html[data-mode="light"] .adm-overlay, html[data-mode="dark"] .adm-overlay { background: rgba(8, 14, 26, 0.55); }
html[data-mode="light"] .adm-modal, html[data-mode="dark"] .adm-modal {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
    overflow: hidden;
}
html[data-mode="light"] .adm-modal-header, html[data-mode="dark"] .adm-modal-header { background: var(--zw-title-bg); border-bottom: 1px solid var(--zw-line); }
html[data-mode="light"] .adm-modal-title, html[data-mode="dark"] .adm-modal-title { color: var(--zw-title-fg); }
html[data-mode="light"] .adm-modal-close, html[data-mode="dark"] .adm-modal-close { color: var(--zw-ink-2); border-radius: var(--zw-radius-sm); }
html[data-mode="light"] .adm-modal-close:hover, html[data-mode="dark"] .adm-modal-close:hover { color: var(--zw-ink); background: var(--zw-panel-2-bg); }
html[data-mode="light"] .adm-modal-body, html[data-mode="dark"] .adm-modal-body { background: var(--zw-panel-bg); color: var(--zw-ink); }
html[data-mode="light"] .adm-modal-footer, html[data-mode="dark"] .adm-modal-footer { background: var(--zw-panel-bg); border-top: 1px solid var(--zw-line); }
html[data-mode="light"] .adm-section, html[data-mode="dark"] .adm-section { color: var(--zw-title-fg); border-bottom-color: var(--zw-line); }
html[data-mode="dark"] .adm-section { color: var(--zw-ink-2); }
html[data-mode="light"] .adm-label, html[data-mode="dark"] .adm-label { color: var(--zw-ink-2); }
html[data-mode="light"] .adm-field input, html[data-mode="dark"] .adm-field input {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border: 1px solid var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .adm-field input:focus, html[data-mode="dark"] .adm-field input:focus { outline: none; border-color: var(--zw-primary); }
html[data-mode="dark"] .adm-field input::placeholder { color: var(--zw-ink-2); }

/* ═══════════ HPS design page (hps-*) — Light + Dark (Paul, 2026-09-15) ═══════════
   The HPS page's styles live in app.css with hard-coded light colours — white buttons and modals,
   #fafafa sections, #e8eef4 headers, grey label ink — so under Dark the shell went dark while the
   form stayed light and the native inputs followed the colour scheme: "I am using dark mode, and the
   textboxes and other things are wrong". Same treatment as the six dialogs and the admin page: every
   colour-bearing rule restated in tokens. Classic is untouched (no data-mode prefix reaches it). */

/* Shell: footer button bar */
html[data-mode="light"] .hps-button-bar, html[data-mode="dark"] .hps-button-bar {
    background: var(--zw-panel-2-bg);
    border-top: 1px solid var(--zw-line);
}
html[data-mode="light"] .hps-save-status, html[data-mode="dark"] .hps-save-status { color: var(--zw-ink-2); }
html[data-mode="light"] .hps-action-gap, html[data-mode="dark"] .hps-action-gap { background: transparent; }

/* Buttons */
html[data-mode="light"] .hps-btn, html[data-mode="dark"] .hps-btn {
    background: var(--zw-btn-bg);
    color: var(--zw-btn-fg);
    border: 1px solid var(--zw-btn-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .hps-btn:hover:not(:disabled), html[data-mode="dark"] .hps-btn:hover:not(:disabled) {
    background: var(--zw-panel-2-bg);
    border-color: var(--zw-primary);
}
html[data-mode="light"] .hps-btn.primary, html[data-mode="dark"] .hps-btn.primary {
    background: var(--zw-primary);
    color: var(--zw-primary-fg);
    border-color: var(--zw-primary);
}
html[data-mode="light"] .hps-btn.primary:hover:not(:disabled),
html[data-mode="dark"] .hps-btn.primary:hover:not(:disabled) { background: var(--zw-primary); filter: brightness(1.08); }

/* Section headers and the Order Input panels */
html[data-mode="light"] .hps-section-header, html[data-mode="dark"] .hps-section-header {
    color: var(--zw-title-fg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="dark"] .hps-section-header { color: var(--zw-ink); }
html[data-mode="light"] .hps-oi-section, html[data-mode="dark"] .hps-oi-section {
    background: var(--zw-panel-bg);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .hps-oi-section-header, html[data-mode="dark"] .hps-oi-section-header {
    background: var(--zw-title-bg);
    color: var(--zw-title-fg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .hps-oi-row label, html[data-mode="dark"] .hps-oi-row label { color: var(--zw-ink); }
html[data-mode="light"] .hps-form-group label, html[data-mode="dark"] .hps-form-group label { color: var(--zw-ink-2); }

/* Inputs — the textboxes Paul called out. Token colours, not the browser's colour-scheme default. */
html[data-mode="light"] .hps-oi-row input, html[data-mode="dark"] .hps-oi-row input,
html[data-mode="light"] .hps-oi-row select, html[data-mode="dark"] .hps-oi-row select,
html[data-mode="light"] .hps-oi-textarea, html[data-mode="dark"] .hps-oi-textarea,
html[data-mode="light"] .hps-saveas-input, html[data-mode="dark"] .hps-saveas-input,
html[data-mode="light"] .hps-form-group input, html[data-mode="dark"] .hps-form-group input,
html[data-mode="light"] .hps-form-group select, html[data-mode="dark"] .hps-form-group select {
    background: var(--zw-input-bg);
    color: var(--zw-input-fg);
    border: 1px solid var(--zw-input-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .hps-form-group input:focus, html[data-mode="dark"] .hps-form-group input:focus,
html[data-mode="light"] .hps-form-group select:focus, html[data-mode="dark"] .hps-form-group select:focus,
html[data-mode="light"] .hps-oi-row input:focus, html[data-mode="dark"] .hps-oi-row input:focus,
html[data-mode="light"] .hps-oi-row select:focus, html[data-mode="dark"] .hps-oi-row select:focus {
    outline: none;
    border-color: var(--zw-primary);
    box-shadow: 0 0 0 1px var(--zw-primary);
}
/* A read-only box must still read as read-only rather than as an empty editable one. */
html[data-mode="light"] .hps-form-group input[readonly], html[data-mode="dark"] .hps-form-group input[readonly],
/* ⚠ Pump Sizing's Discharge Pressure and (non-HI) Viscosity: app.css
   `.hps-main-pump-inline .hps-oi-row input[readonly] { #f5f5f5 / #666 }` outranks the token rule above,
   so they stayed Classic grey-on-black-ish in Dark (Paul, 2026-09-29). Same selector depth + the mode. */
html[data-mode="light"] .hps-main-pump-inline .hps-oi-row input[readonly],
html[data-mode="dark"] .hps-main-pump-inline .hps-oi-row input[readonly] {
    background: var(--zw-panel-2-bg);
    color: var(--zw-ink-2);
}
html[data-mode="dark"] .hps-oi-row input::placeholder,
html[data-mode="dark"] .hps-form-group input::placeholder { color: var(--zw-ink-2); }

/* Open / Save dialogs */
html[data-mode="light"] .hps-modal-backdrop, html[data-mode="dark"] .hps-modal-backdrop { background: rgba(8, 14, 26, 0.55); }
html[data-mode="light"] .hps-modal, html[data-mode="dark"] .hps-modal {
    background: var(--zw-panel-bg);
    color: var(--zw-ink);
    border: 1px solid var(--zw-line);
    border-radius: var(--zw-radius);
    box-shadow: var(--zw-shadow);
    overflow: hidden;
}
html[data-mode="light"] .hps-modal-header, html[data-mode="dark"] .hps-modal-header {
    background: var(--zw-title-bg);
    color: var(--zw-title-fg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="light"] .hps-modal-footer, html[data-mode="dark"] .hps-modal-footer {
    background: var(--zw-panel-bg);
    border-top: 1px solid var(--zw-line);
}
html[data-mode="light"] .hps-open-table th, html[data-mode="dark"] .hps-open-table th {
    background: var(--zw-grid-head-bg);
    color: var(--zw-title-fg);
}
html[data-mode="dark"] .hps-open-table th { color: var(--zw-ink); }
html[data-mode="light"] .hps-open-table th, html[data-mode="dark"] .hps-open-table th,
html[data-mode="light"] .hps-open-table td, html[data-mode="dark"] .hps-open-table td {
    border-bottom-color: var(--zw-grid-line);
}

/* Pricing summary */
html[data-mode="light"] .hps-pricing-header, html[data-mode="dark"] .hps-pricing-header {
    color: var(--zw-title-fg);
    border-bottom: 1px solid var(--zw-line);
}
html[data-mode="dark"] .hps-pricing-header { color: var(--zw-ink); }
html[data-mode="light"] .hps-pricing-row, html[data-mode="dark"] .hps-pricing-row { border-bottom-color: var(--zw-grid-line); }
html[data-mode="light"] .hps-pricing-row:nth-child(even), html[data-mode="dark"] .hps-pricing-row:nth-child(even) {
    background: var(--zw-panel-2-bg);
}
html[data-mode="light"] .hps-pricing-total, html[data-mode="dark"] .hps-pricing-total {
    background: var(--zw-title-bg);
    border-top: 2px solid var(--zw-primary);
    color: var(--zw-ink);
}
html[data-mode="light"] .hps-pricing-lead, html[data-mode="dark"] .hps-pricing-lead { color: var(--zw-ink-2); }

/* Pump Sizing tab additions (2026-09-15) */
html[data-mode="light"] .hps-grid-scroll, html[data-mode="dark"] .hps-grid-scroll {
    border-color: var(--zw-line);
    border-radius: var(--zw-radius-sm);
}
html[data-mode="light"] .equip-table td.hps-over-limit { color: #b02a37; }
html[data-mode="dark"] .equip-table td.hps-over-limit { color: #e06a75; }

/* HPS housing selection (2026-09-15) */
html[data-mode="light"] .hps-stage-counts, html[data-mode="dark"] .hps-stage-counts { color: var(--zw-ink); }
html[data-mode="light"] .hps-diff-ok { color: #1e7a34; }
html[data-mode="dark"] .hps-diff-ok { color: #6fcf8a; }
html[data-mode="light"] .hps-diff-off { color: #b02a37; }
html[data-mode="dark"] .hps-diff-off { color: #e06a75; }
html[data-mode="light"] .equip-table tr.hps-recommended td { background: #eef7ee; }
html[data-mode="dark"] .equip-table tr.hps-recommended td { background: rgba(111, 207, 138, .12); }
/* The limits strip keeps its desktop colours in every mode — they are the desktop's own key, and an
   engineer reads the band by colour. Only the border follows the theme. */
html[data-mode="dark"] .hps-limits { border-color: var(--zw-line); }

/* Pump Only pricing panel: the peach/purple (editable) and grey/red (computed) cells are the desktop's
   own signal and stay in every mode; only the labels take the theme ink. Paul, 2026-09-18. */
html[data-mode="light"] .hps-po-head, html[data-mode="dark"] .hps-po-head,
html[data-mode="light"] .hps-po-label, html[data-mode="dark"] .hps-po-label { color: var(--zw-ink); }
html[data-mode="light"] .hps-po-input, html[data-mode="dark"] .hps-po-input,
html[data-mode="light"] .hps-po-calc, html[data-mode="dark"] .hps-po-calc { border-color: var(--zw-input-line); }

html[data-mode="dark"] .esp-action-note { color: #ff8a80; background: rgba(255,138,128,0.10); border-color: rgba(255,138,128,0.35); }

/* ── Text Size (Normal / Large / Extra Large) — AE request via Paul, 2026-09-24. ─────────────────
 * The app sizes text in fixed px, much of it inline, so a font-size change could not reach it. The
 * whole page is ZOOMED instead (like the browser's own zoom, but saved per user). Every vh/vw in
 * the app is written calc(Nvh / var(--zz, 1)) because zoom multiplies viewport units too — without
 * that, the 100vh layout would run off the bottom and 90vw dialogs off the side. At Normal --zz is 1
 * and every one of those rules is exactly what it was. The attribute is stamped by App.razor from
 * the stored preference and swapped in place by the user menu (AppearanceService.TextSize). */
:root { --zz: 1; }
html[data-textsize="large"] { --zz: 1.15; }
html[data-textsize="xlarge"] { --zz: 1.3; }
html { zoom: var(--zz); }

/* Well Deviation ▸ 3D View (2026-10-01): the canvas itself follows data-mode in survey3d.js. */
html[data-mode="light"] .esp-s3d-canvas, html[data-mode="dark"] .esp-s3d-canvas { border-color: var(--zw-line); background: var(--zw-panel-bg); }
html[data-mode="light"] .esp-s3d-legend, html[data-mode="dark"] .esp-s3d-legend,
html[data-mode="light"] .esp-s3d-readout, html[data-mode="dark"] .esp-s3d-readout { border-color: var(--zw-line); color: var(--zw-ink); }
html[data-mode="light"] .esp-s3d-muted, html[data-mode="dark"] .esp-s3d-muted { color: var(--zw-ink-2); }
html[data-mode="dark"] .esp-s3d-note { color: #ff8a80; }

/* Analysis Tool — the series names under each bar pair are dark blue / dark red on the desktop;
   lift them so they stay legible on the Dark page. */
html[data-mode="dark"] .esp-ana-design { color: #8fb4ff; }
html[data-mode="dark"] .esp-ana-other { color: #ff8a80; }
html[data-mode="light"] .esp-ana-label, html[data-mode="dark"] .esp-ana-label { color: var(--zw-ink); }

/* Sensitivities Tool — the desktop's LightGray / LightBlue / LightGreen / Tomato / Yellow cells are
   Classic colours; in Light / Dark they become tints of the theme so the grid still reads as
   input / result / pass / fail without glaring. */
html[data-mode="light"] .esp-sens-toolbar, html[data-mode="dark"] .esp-sens-toolbar { background: var(--zw-panel-2-bg); border-bottom: 1px solid var(--zw-line); }
html[data-mode="light"] .esp-sens-tbtext, html[data-mode="dark"] .esp-sens-tbtext { color: var(--zw-ink); border-radius: var(--zw-radius-sm); }
html[data-mode="light"] .esp-sens-tbicon, html[data-mode="dark"] .esp-sens-tbicon { border-radius: var(--zw-radius-sm); }
html[data-mode="light"] .esp-sens-tbtext:hover:not(:disabled), html[data-mode="dark"] .esp-sens-tbtext:hover:not(:disabled),
html[data-mode="light"] .esp-sens-tbicon:hover:not(:disabled), html[data-mode="dark"] .esp-sens-tbicon:hover:not(:disabled) {
    background: var(--zw-panel-bg); border-color: var(--zw-line);
}
html[data-mode="light"] .esp-sens-sep, html[data-mode="dark"] .esp-sens-sep { background: var(--zw-line); }
html[data-mode="light"] .esp-sens-body, html[data-mode="dark"] .esp-sens-body { background: var(--zw-panel-bg); color: var(--zw-ink); }
html[data-mode="light"] .esp-sens-gridwrap, html[data-mode="dark"] .esp-sens-gridwrap,
html[data-mode="light"] .esp-sens-varlist, html[data-mode="dark"] .esp-sens-varlist { border-color: var(--zw-line); background: var(--zw-panel-bg); }
html[data-mode="light"] .esp-sens-grid th, html[data-mode="dark"] .esp-sens-grid th { background: var(--zw-grid-head-bg); color: var(--zw-ink); border-color: var(--zw-grid-line); }
html[data-mode="light"] .esp-sens-grid td, html[data-mode="dark"] .esp-sens-grid td { color: var(--zw-ink); border-color: var(--zw-grid-line); }
html[data-mode="light"] .esp-sens-grid td.lead, html[data-mode="dark"] .esp-sens-grid td.lead,
html[data-mode="light"] .esp-sens-grid td.base, html[data-mode="dark"] .esp-sens-grid td.base { background: var(--zw-panel-2-bg); }
html[data-mode="light"] .esp-sens-grid td.result, html[data-mode="dark"] .esp-sens-grid td.result { background: color-mix(in srgb, var(--zw-primary) 12%, var(--zw-panel-bg)); }
html[data-mode="light"] .esp-sens-grid td.ok, html[data-mode="dark"] .esp-sens-grid td.ok { background: color-mix(in srgb, #2e9d4f 22%, var(--zw-panel-bg)); }
html[data-mode="light"] .esp-sens-grid td.err, html[data-mode="dark"] .esp-sens-grid td.err { background: color-mix(in srgb, #e5533d 45%, var(--zw-panel-bg)); }
html[data-mode="light"] .esp-sens-grid td.wrn, html[data-mode="dark"] .esp-sens-grid td.wrn { background: color-mix(in srgb, #e6c229 45%, var(--zw-panel-bg)); }
html[data-mode="light"] .esp-sens-cell, html[data-mode="dark"] .esp-sens-cell { color: var(--zw-input-fg); }
html[data-mode="light"] .esp-sens-cell:focus, html[data-mode="dark"] .esp-sens-cell:focus { background: var(--zw-input-bg); outline-color: var(--zw-primary); }
html[data-mode="light"] .esp-sens-status, html[data-mode="dark"] .esp-sens-status,
html[data-mode="light"] .esp-sens-detailrow .unit, html[data-mode="dark"] .esp-sens-detailrow .unit { color: var(--zw-ink-2); }
html[data-mode="dark"] .esp-sens-warn { color: #ff6b6b; }