/* * ============================================================ * FleetEMP — Dark Mode Theme * Activated when is set. * Toggle button lives in the drawer footer above "Users & Account" * and "Logout". Persisted in localStorage as `fleetemp-theme`. * ============================================================ */ /* ── Dark theme token overrides ────────────────────────────── These remap the CSS custom properties defined across master.css, kb_ai.css, amd_order_sheet.css, marketing.css, and lists.css so anything that reads them picks up dark values automatically. */ html[data-theme="dark"] { color-scheme: dark; /* Core tokens from master.css */ --white: #12161d; --brand: #6b7684; --brand-hover: #8892a0; --ink: #e5e9f0; --panel: #1a1f2a; --drawer-teal: #22d3ee; --drawer-teal-m: #06b6d4; --drawer-teal-l: #0ea5e9; --drawer-ink: #e5e9f0; --drawer-ink-mid: #a3adbf; --drawer-border: rgba(255, 255, 255, 0.1); /* lists.css */ --card-bg: #1a1f2a; --card-border: rgba(255, 255, 255, 0.12); --primary: #60a5fa; /* kb_ai.css */ --kb-teal: #22d3ee; --kb-teal-m: #06b6d4; --kb-teal-l: #0ea5e9; --kb-ink: #e5e9f0; --kb-ink-mid: #a3adbf; --kb-ink-dim: #7a869a; --kb-border: rgba(255, 255, 255, 0.12); --kb-card: rgba(26, 31, 42, 0.92); --kb-soft: #12161d; --kb-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); /* amd_order_sheet.css */ --amd-teal: #22d3ee; --amd-teal-m: #06b6d4; --amd-teal-l: #0ea5e9; --amd-ink: #e5e9f0; --amd-ink-mid: #a3adbf; --amd-ink-dim: #7a869a; --amd-border: rgba(255, 255, 255, 0.14); --amd-border-lt: rgba(255, 255, 255, 0.08); --amd-bg: #12161d; --amd-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); /* marketing.css */ --mk-text: #e5e9f0; --mk-muted: #a3adbf; --mk-subtle: #7a869a; --mk-bg: #0f131a; --mk-bg-alt: #161b23; --mk-bg-footer: #0a0d12; --mk-accent: #d8c9a8; --mk-accent-dk: #a89572; --mk-border: rgba(255, 255, 255, 0.12); --mk-link: #e6c98b; } /* ── Targeted overrides ────────────────────────────────────── Many FleetEMP stylesheets use hardcoded hex colors rather than the tokens above, so these rules re-skin the common surfaces (body wash, cards, tables, inputs, modals) when dark mode is on. Keep this list in sync with any new light-surfaced pages added. */ /* Put the dark wash on `html` so it covers the entire scrollable area uniformly — body's `background-attachment: fixed` can cut off when body height ≠ viewport height, leaving a visible seam mid-scroll. Painting html fills the whole document. */ html[data-theme="dark"] { background: radial-gradient(1000px 700px at 12% 8%, rgba(34, 211, 238, 0.07) 0%, transparent 62%), radial-gradient(1100px 720px at 88% 18%, rgba(14, 165, 233, 0.08) 0%, transparent 58%), radial-gradient(900px 640px at 50% 95%, rgba(6, 182, 212, 0.06) 0%, transparent 60%), linear-gradient(180deg, #0b0f16 0%, #0f131a 45%, #0b0f16 100%) !important; background-attachment: fixed !important; background-color: #0b0f16 !important; min-height: 100vh; } /* Body is transparent in dark mode so the html wash reads through. Keeps the existing body::before/::after overlays (icon pattern, teal drift glow) working on top of the html gradient. */ html[data-theme="dark"] body, html[data-theme="dark"] body.portal-page { background: transparent !important; background-color: transparent !important; color: var(--ink); } html[data-theme="dark"] body.portal-page::after { background: radial-gradient(circle at 20% 30%, rgba(6, 182, 212, 0.1), transparent 45%), radial-gradient(circle at 82% 62%, rgba(14, 165, 233, 0.1), transparent 50%), radial-gradient(circle at 50% 92%, rgba(16, 185, 129, 0.07), transparent 45%); } html[data-theme="dark"] body::before { opacity: 0.08; filter: invert(1); } /* Default text color on dark pages */ html[data-theme="dark"] body { color: var(--ink); } /* ── Drawer (left nav) ───────────────────────────────────── */ html[data-theme="dark"] #site-drawer { background: #141922; color: var(--drawer-ink); border-right-color: var(--drawer-border); } html[data-theme="dark"] #site-drawer .drawer-header, html[data-theme="dark"] #site-drawer .drawer-footer { border-color: var(--drawer-border); } html[data-theme="dark"] #site-drawer .drawer-nav a, html[data-theme="dark"] #site-drawer .drawer-footer-link { color: var(--drawer-ink); } html[data-theme="dark"] #site-drawer .drawer-nav a:hover, html[data-theme="dark"] #site-drawer .drawer-footer-link:hover { background: rgba(34, 211, 238, 0.1); color: var(--drawer-teal); } html[data-theme="dark"] #site-drawer .drawer-nav a.active, html[data-theme="dark"] #site-drawer .drawer-footer-link.active { background: rgba(34, 211, 238, 0.15); color: var(--drawer-teal); border-left-color: var(--drawer-teal); } html[data-theme="dark"] #drawer-close { color: var(--drawer-ink-mid); border-color: var(--drawer-border); } html[data-theme="dark"] #drawer-close:hover { background: rgba(34, 211, 238, 0.1); color: var(--drawer-teal); } html[data-theme="dark"] #drawer-backdrop { background: rgba(0, 0, 0, 0.55); } /* ── Panels, cards, sections ─────────────────────────────── */ html[data-theme="dark"] .rl-panel, html[data-theme="dark"] .kb-hero, html[data-theme="dark"] .sp-hero, html[data-theme="dark"] .amd-panel, html[data-theme="dark"] .kb-card, html[data-theme="dark"] .sp-card, html[data-theme="dark"] .report-card, html[data-theme="dark"] .list-card, html[data-theme="dark"] .settings-card, html[data-theme="dark"] .flow-card, html[data-theme="dark"] .home-card, html[data-theme="dark"] .card { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important; } /* Surfaces whose background was explicitly white */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #fff"] { background: #1a1f2a !important; color: var(--ink); } /* ── Headings & text ───────────────────────────────────────── Broad text-color override. Source stylesheets hardcode dark text colors (#1e293b, #0f172a, #1a1a1a, #334155, #222, #333, etc.) on many specific selectors — so we force light text on every common text-bearing element with !important. Buttons, badges, chips, status dots keep their own colors because they have higher-specificity rules downstream in this file. */ html[data-theme="dark"] body h1, html[data-theme="dark"] body h2, html[data-theme="dark"] body h3, html[data-theme="dark"] body h4, html[data-theme="dark"] body h5, html[data-theme="dark"] body h6, html[data-theme="dark"] body p, html[data-theme="dark"] body li, html[data-theme="dark"] body label, html[data-theme="dark"] body td, html[data-theme="dark"] body th, html[data-theme="dark"] body dt, html[data-theme="dark"] body dd, html[data-theme="dark"] body figcaption, html[data-theme="dark"] body caption, html[data-theme="dark"] body small, html[data-theme="dark"] body strong, html[data-theme="dark"] body em, html[data-theme="dark"] body b, html[data-theme="dark"] body i, html[data-theme="dark"] body blockquote, html[data-theme="dark"] body cite, html[data-theme="dark"] body code, html[data-theme="dark"] body pre, html[data-theme="dark"] body kbd, html[data-theme="dark"] body samp, html[data-theme="dark"] body var, html[data-theme="dark"] body output, html[data-theme="dark"] body legend, html[data-theme="dark"] body details, html[data-theme="dark"] body summary { color: var(--ink) !important; } /* Force text containers (span/div/section/etc.) to light too — source CSS often names specific spans with dark-color class rules (e.g. `.truck-name { color: #0f172a; }`) that would otherwise stay invisible against the dark surfaces. */ html[data-theme="dark"] body span, html[data-theme="dark"] body div, html[data-theme="dark"] body section, html[data-theme="dark"] body article, html[data-theme="dark"] body header, html[data-theme="dark"] body footer, html[data-theme="dark"] body main, html[data-theme="dark"] body aside, html[data-theme="dark"] body nav, html[data-theme="dark"] body figure { color: var(--ink) !important; } /* ...but restore inherited color inside buttons so their own text color (white on teal, etc.) still works. */ html[data-theme="dark"] body button span, html[data-theme="dark"] body button div, html[data-theme="dark"] body .btn span, html[data-theme="dark"] body .btn div, html[data-theme="dark"] body .universal-button span, html[data-theme="dark"] body .universal-button div, html[data-theme="dark"] body a.btn span, html[data-theme="dark"] body a.btn div { color: inherit !important; } /* Muted / secondary text that was #64748b / #6b7280 / #94a3b8 / #777. We target common class names used for secondary copy across the portal so they stay readable but still lower-emphasis than --ink. */ html[data-theme="dark"] body .muted, html[data-theme="dark"] body .subtle, html[data-theme="dark"] body .meta, html[data-theme="dark"] body .hint, html[data-theme="dark"] body .dim, html[data-theme="dark"] body .secondary-text, html[data-theme="dark"] body .text-muted, html[data-theme="dark"] body .text-subtle, html[data-theme="dark"] body .text-dim, html[data-theme="dark"] body .assist, html[data-theme="dark"] body .subtitle, html[data-theme="dark"] body .amd-ink-mid, html[data-theme="dark"] body .kb-ink-mid, html[data-theme="dark"] body .modal-box p, html[data-theme="dark"] body .modal-detail-empty, html[data-theme="dark"] body .modal-detail-list { color: var(--drawer-ink-mid) !important; } /* Anchor text — keep teal but visible on dark */ html[data-theme="dark"] body a { color: var(--drawer-teal); } html[data-theme="dark"] body a:hover { color: var(--drawer-teal-l); } /* Preserve intentional colored-button text. Any button whose background is a solid color (teal/blue/red/green) expects white (or near-white) text. Source CSS sets it; re-assert it here so our broad override above doesn't fight it. */ html[data-theme="dark"] body button[style*="background:#0"] , html[data-theme="dark"] body button[style*="background: #0"], html[data-theme="dark"] body .btn-primary, html[data-theme="dark"] body .btn-teal, html[data-theme="dark"] body .btn-danger, html[data-theme="dark"] body .btn-success, html[data-theme="dark"] body .universal-button:not(.outline), html[data-theme="dark"] body .kb-send-btn, html[data-theme="dark"] body .fbw-btn.fbw-primary, html[data-theme="dark"] body #menu-btn { color: #ffffff !important; } /* Keep the AI "Send" button's teal gradient fill intact — nothing above touches its background, but call it out so future broad rules don't accidentally neutralize it. */ html[data-theme="dark"] body .kb-send-btn { background: linear-gradient(135deg, #0e7490, #0891b2) !important; border: none !important; } html[data-theme="dark"] body .kb-send-btn:hover { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; } /* KB AI microphone / voice-input button. Source paints a light gray tile with a muted gray icon. Swap to a dark tile with a light icon so it reads against the dark composer. */ html[data-theme="dark"] body .kb-mic-btn, html[data-theme="dark"] body .mic-btn, html[data-theme="dark"] body .kb-voice, html[data-theme="dark"] body .voice-btn { background: #232a38 !important; border-color: rgba(255, 255, 255, 0.15) !important; color: var(--ink) !important; } html[data-theme="dark"] body .kb-mic-btn:hover, html[data-theme="dark"] body .mic-btn:hover, html[data-theme="dark"] body .kb-voice:hover, html[data-theme="dark"] body .voice-btn:hover { background: #2d3544 !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.4) !important; } /* Active/listening state often uses an accent color to signal mic is live — keep red tint to match recording conventions. */ html[data-theme="dark"] body .kb-mic-btn.is-recording, html[data-theme="dark"] body .kb-mic-btn.active, html[data-theme="dark"] body .mic-btn.is-recording, html[data-theme="dark"] body .mic-btn.active { background: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.5) !important; } /* KB AI sources / citations in the right rail. Source cards are white with a pale border; invert to dark surfaces with light borders so they read as chips against the dark page. */ html[data-theme="dark"] body .kb-sources-list, html[data-theme="dark"] body .kb-sources { background: transparent !important; } html[data-theme="dark"] body .kb-sources-list li, html[data-theme="dark"] body .kb-source, html[data-theme="dark"] body .kb-source-card, html[data-theme="dark"] body .kb-source-item, html[data-theme="dark"] body .cite-card, html[data-theme="dark"] body .citation-card { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] body .kb-sources-list li:hover, html[data-theme="dark"] body .kb-source:hover, html[data-theme="dark"] body .kb-source-card:hover { background: #232a38 !important; border-color: rgba(34, 211, 238, 0.35) !important; } /* Exploded-view top ribbon + parts table ───────────────── The `.ev-nav-container` is the top ribbon holding the back-to-diagram + select-sub-assembly buttons. The parts table lives in a `.parts-container.ev-parts-container.ev-below-layout` wrapper that the source paints `#fff !important`. Override the wrapper, headers, rows, and borders so the full page reads dark. */ html[data-theme="dark"] .ev-nav-container { background: transparent !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--ink) !important; } /* "Select sub-assembly" dropdown */ html[data-theme="dark"] body .ev-dropdown, html[data-theme="dark"] body select.ev-dropdown { background: #161b23 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] body .ev-dropdown option { background: #161b23 !important; color: var(--ink) !important; } /* Parts table container — source has `background: #fff !important` and a light `#e5e7eb` border, so override with matching priority. */ html[data-theme="dark"] body .parts-container.ev-parts-container, html[data-theme="dark"] body .parts-container.ev-parts-container.ev-below-layout { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; } /* Parts table headers — source paints `#f8fafc` / `#0f172a`. */ html[data-theme="dark"] body .parts-container.ev-parts-container th, html[data-theme="dark"] body .parts-container.ev-parts-container.ev-below-layout th { background: #161b23 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Parts table body cells + row borders */ html[data-theme="dark"] body .parts-container.ev-parts-container td, html[data-theme="dark"] body .parts-container.ev-parts-container.ev-below-layout td { background: transparent !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] body .parts-container.ev-parts-container tbody tr:nth-child(even) td, html[data-theme="dark"] body .parts-container.ev-parts-container.ev-below-layout tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02) !important; } html[data-theme="dark"] body .parts-container.ev-parts-container tbody tr:hover td, html[data-theme="dark"] body .parts-container.ev-parts-container.ev-below-layout tbody tr:hover td { background: rgba(34, 211, 238, 0.08) !important; } /* Custom-report builder (wizard stages: scope, filters, columns, review). Source hardcodes white fills + light borders on nearly every surface in this flow. Override each one so the whole builder reads dark. */ /* Scope step — branch + truck pickers */ html[data-theme="dark"] .branch-picker__search, html[data-theme="dark"] .truck-picker__search { background: #161b23 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .branch-picker__action, html[data-theme="dark"] .truck-picker__action, html[data-theme="dark"] .branch-card__quick { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .branch-picker__action:hover, html[data-theme="dark"] .truck-picker__action:hover, html[data-theme="dark"] .branch-card__quick:hover { background: #232a38 !important; border-color: rgba(34, 211, 238, 0.35) !important; color: var(--drawer-teal) !important; } html[data-theme="dark"] .branch-grid .branch-card, html[data-theme="dark"] .truck-card { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .branch-grid .branch-card:hover, html[data-theme="dark"] .truck-card:hover { background: #232a38 !important; border-color: rgba(34, 211, 238, 0.35) !important; } /* Status pill on branch cards + selection mark on truck cards. Source uses `#eef3f7` light-gray with dark muted text; when the branch/truck has a selection, source paints them light-blue or teal-filled. Re-skin both states for dark mode. */ html[data-theme="dark"] .branch-card__status, html[data-theme="dark"] .truck-card__mark { background: #232a38 !important; color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .branch-card.has-selection .branch-card__status { background: rgba(34, 211, 238, 0.18) !important; color: var(--drawer-teal) !important; } html[data-theme="dark"] .truck-card.is-selected { background: linear-gradient(180deg, #1e2a36 0%, #1a242d 100%) !important; border-color: var(--drawer-teal) !important; box-shadow: 0 16px 28px rgba(34, 211, 238, 0.15) !important; } html[data-theme="dark"] .truck-card.is-selected .truck-card__mark { background: linear-gradient(135deg, #0e7490, #0891b2) !important; color: #ffffff !important; } /* `.ff-pill` — pill-shaped buttons used in filter/column pickers as mini toggles. Source: `#f8fafc` bg, `#cbd5e1` border, muted `#475569` text; hover brightens to cyan; `.is-active` fills teal with white text. */ html[data-theme="dark"] .ff-pill { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .ff-pill:hover { background: #2d3544 !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.4) !important; } html[data-theme="dark"] .ff-pill.is-active { background: linear-gradient(135deg, #0e7490, #0891b2) !important; color: #ffffff !important; border-color: var(--drawer-teal) !important; } /* Filters step — each rule group wrapper */ html[data-theme="dark"] .logic-box { background-color: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Columns step — category cards, field lists, search, checkbox */ html[data-theme="dark"] .ff-cat-card, html[data-theme="dark"] .ff-fields { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .fc-search-wrap { background: #161b23 !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .fc-check { background: #0f131a !important; border-color: rgba(255, 255, 255, 0.2) !important; } html[data-theme="dark"] .ff-field-input:focus, html[data-theme="dark"] .fc-search-input:focus { background: #0f131a !important; color: var(--ink) !important; border-color: var(--drawer-teal) !important; } /* Review step — summary card + draggable column list */ html[data-theme="dark"] .rv-card { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Review card HEADER (the bar above each section with the section name + hint). Source uses a light-blue gradient and dark ink. */ html[data-theme="dark"] .rv-card__head { background: linear-gradient(180deg, #232a38 0%, #1a1f2a 100%) !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .rv-card__hint { color: var(--drawer-ink-mid) !important; } /* "Filters selected" expression box inside a review card */ html[data-theme="dark"] .rv-expr { background: #161b23 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Branch row inside the scope review (name + remove button) */ html[data-theme="dark"] .rv-branch-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .rv-branch-name { color: var(--ink) !important; } html[data-theme="dark"] .rv-entire-branch, html[data-theme="dark"] .rv-empty { color: var(--drawer-ink-mid) !important; } /* Truck pills listed under a branch on review */ html[data-theme="dark"] .rv-truck-pill { background: rgba(34, 211, 238, 0.15) !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.35) !important; } html[data-theme="dark"] .rv-pill-remove { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .rv-pill-remove:hover { color: #fca5a5 !important; } /* Remove button (small "×" with a red accent) */ html[data-theme="dark"] .rv-remove-btn { background: rgba(239, 68, 68, 0.12) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; } html[data-theme="dark"] .rv-remove-btn:hover { background: rgba(239, 68, 68, 0.22) !important; } html[data-theme="dark"] .rv-col-list .draggable-col { background: #161b23 !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .rv-col-list .draggable-col:hover { background: #232a38 !important; } /* Branch + truck picker count pills ("X of Y selected"). Source: light-blue fill (#e8f1fb) with dark-blue text. */ html[data-theme="dark"] .branch-picker__count, html[data-theme="dark"] .truck-picker__count { background: rgba(34, 211, 238, 0.18) !important; color: var(--drawer-teal) !important; border: 1px solid rgba(34, 211, 238, 0.35) !important; } /* Branch + truck picker outer panes (the summary/header shell that wraps the picker grid). Source for `.truck-picker` uses a light-cyan gradient; both `.truck-picker` and `.branch-picker` need a solid dark surface. */ html[data-theme="dark"] .branch-picker, html[data-theme="dark"] .truck-picker { background: #1a1f2a !important; background-image: none !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Truck picker scope box — a semi-white card that shows the currently-selected branch's trucks. */ html[data-theme="dark"] .truck-picker__scope { background: rgba(26, 31, 42, 0.9) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .truck-picker__scope strong, html[data-theme="dark"] .truck-picker__scope em, html[data-theme="dark"] .truck-picker__scope span { color: var(--ink) !important; } html[data-theme="dark"] .truck-picker__scope input { background: #0f131a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* Report rail sections (`.rr-section`) — a light card used in the preset/report menu. */ html[data-theme="dark"] .rr-section { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* `.rr-badge` — pill/count badge used in the preset-report rail. Source: `#e8f1fb` light-blue fill with `#123a66` dark-blue text. */ html[data-theme="dark"] .rr-badge { background: rgba(34, 211, 238, 0.18) !important; color: var(--drawer-teal) !important; border: 1px solid rgba(34, 211, 238, 0.35) !important; } /* Report RESULTS tables (both preset + custom). Results are rendered dynamically via `document.createElement('table')` with class `.rb-result`, inside `.rr-section` cards. Source paints the container white, header bar with a light-blue gradient, and the table with gray/blue alternating rows. */ html[data-theme="dark"] .rr-section__head { background: linear-gradient(180deg, #232a38 0%, #1a1f2a 100%) !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .rr-section__sub { background: #161b23 !important; color: var(--drawer-ink-mid) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Results table itself — override the `.rb-result` class + its scoped variant under `.rr-section`. The source uses a global `tbody { background: white }` rule plus zebra/hover rules on `tr` (not `td`), so we have to neutralize the tbody AND target the tr directly to beat those rules. */ html[data-theme="dark"] .rb-result, html[data-theme="dark"] .rr-section .rb-result { background: transparent !important; color: var(--ink) !important; } html[data-theme="dark"] .rb-result tbody, html[data-theme="dark"] .rr-section .rb-result tbody, html[data-theme="dark"] .rb-result thead, html[data-theme="dark"] .rr-section .rb-result thead, html[data-theme="dark"] .rb-result tfoot, html[data-theme="dark"] .rr-section .rb-result tfoot { background-color: transparent !important; } html[data-theme="dark"] .rb-result th, html[data-theme="dark"] .rr-section .rb-result th { background: #161b23 !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .rb-result td, html[data-theme="dark"] .rr-section .rb-result td { background: transparent !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* Zebra + hover target `tr` in the source, so dark-mode overrides must do the same (not just `td`). */ html[data-theme="dark"] .rb-result tbody tr, html[data-theme="dark"] .rr-section .rb-result tbody tr { background: transparent !important; } html[data-theme="dark"] .rb-result tbody tr:nth-child(even), html[data-theme="dark"] .rr-section .rb-result tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .rb-result tbody tr:hover, html[data-theme="dark"] .rr-section .rb-result tbody tr:hover { background: rgba(34, 211, 238, 0.1) !important; } /* Separator between stacked result tables */ html[data-theme="dark"] .rr-section .table-chunk + .table-chunk { border-top-color: rgba(255, 255, 255, 0.12) !important; } /* ─── Lists page ──────────────────────────────────────────── Lists / Order History panel headers, rows, tags, and the PDF/XLSX download buttons. */ /* Panel header bar above the list (Source: light-blue gradient `#f5f9ff → #eef4fb` with light-blue badge). */ html[data-theme="dark"] .rl-panel__head { background: linear-gradient(180deg, #232a38 0%, #1a1f2a 100%) !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } html[data-theme="dark"] .rl-panel__label { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .rl-count-badge { background: rgba(34, 211, 238, 0.18) !important; color: var(--drawer-teal) !important; } /* Each list row. Base + hover + hover variants for --amd and --shared. Source hover is `#f5f9ff` pale-blue with a teal left-edge accent; the tagged variants swap the accent to green/amber. */ html[data-theme="dark"] .rl-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; color: var(--ink) !important; } html[data-theme="dark"] .rl-row:hover, html[data-theme="dark"] .rl-row.rl-row--amd:hover, html[data-theme="dark"] .rl-row.rl-row--shared:hover { background: #232a38 !important; } html[data-theme="dark"] .rl-row:hover .rl-row__name { color: var(--drawer-teal) !important; } /* Status dot with white ring — the ring edge was set via `box-shadow: 0 0 0 2px rgba(0,0,0,.06)` which looks OK on dark. */ /* Row sub-text (count, date, preview) → muted ink in dark mode. */ html[data-theme="dark"] .rl-row__count, html[data-theme="dark"] .rl-row__date, html[data-theme="dark"] .rl-row__preview, html[data-theme="dark"] .rl-row__meta { color: var(--drawer-ink-mid) !important; } /* Row tag pills — shared/amd/sent. Source uses pastel fills (amber / green / blue) with dark text, which becomes unreadable with light text in dark mode. Flip each to alpha-tint + bright text matching the semantic color. */ html[data-theme="dark"] .rl-tag { border-color: transparent !important; } html[data-theme="dark"] .rl-tag--shared { background: rgba(245, 158, 11, 0.22) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.45) !important; } html[data-theme="dark"] .rl-tag--amd { background: rgba(34, 197, 94, 0.2) !important; color: #86efac !important; border-color: rgba(34, 197, 94, 0.45) !important; } html[data-theme="dark"] .rl-tag--sent { background: rgba(59, 130, 246, 0.22) !important; color: #93c5fd !important; border-color: rgba(59, 130, 246, 0.45) !important; } /* Order-history download buttons (PDF + XLSX). Source uses pale red / pale green tints with dark text. Darken the tints so they blend with the theme while keeping the red/green semantic hue. */ html[data-theme="dark"] .oh-dl-btn--pdf { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: #fca5a5 !important; } html[data-theme="dark"] .oh-dl-btn--pdf:hover { background: rgba(239, 68, 68, 0.22) !important; } html[data-theme="dark"] .oh-dl-btn--xlsx { background: rgba(34, 197, 94, 0.14) !important; border-color: rgba(34, 197, 94, 0.45) !important; color: #86efac !important; } html[data-theme="dark"] .oh-dl-btn--xlsx:hover { background: rgba(34, 197, 94, 0.22) !important; } /* Row delete button (small X) hover was `#fee2e2` light-red in source — shift to a dark red tint. */ html[data-theme="dark"] .oh-del-btn { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .oh-del-btn:hover { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; } /* Order-history table row hover (source: `#f8fafc`) */ html[data-theme="dark"] .oh-table tr:hover td { background: rgba(34, 211, 238, 0.08) !important; } /* Row-hover quick actions on the left list panel (download CSV + delete). Source: white fill with slate text; the delete variant gets a red tint on hover. */ html[data-theme="dark"] .rl-action { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .rl-action:hover { background: #2d3544 !important; border-color: rgba(34, 211, 238, 0.4) !important; color: var(--drawer-teal) !important; } html[data-theme="dark"] .rl-action.del-btn:hover { background: rgba(239, 68, 68, 0.18) !important; border-color: rgba(239, 68, 68, 0.5) !important; color: #fca5a5 !important; } /* Detail pane (the right-side pane that opens when clicking a list) + its sidebar + its table-area wrapper. Source: `#fff` bg with a teal-tinted border. Need explicit coverage because earlier `.detail-pane` rule already exists but these siblings don't. */ html[data-theme="dark"] .detail-pane { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } html[data-theme="dark"] .detail-pane-sidebar { background: #161b23 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--ink) !important; } html[data-theme="dark"] .detail-table-wrapper { background: transparent !important; color: var(--ink) !important; } /* Section headers inside an opened list (Bundles / Pallets / Loose Items / Insulation Mixed Pallet / etc.). Source paints a pale-teal gradient + teal left-edge accent + teal text. */ html[data-theme="dark"] .modal-section-header { background: linear-gradient(90deg, rgba(34, 211, 238, 0.14) 0%, transparent 100%) !important; border-left-color: var(--drawer-teal) !important; color: var(--drawer-teal) !important; } html[data-theme="dark"] .modal-section-header:hover { background: linear-gradient(90deg, rgba(34, 211, 238, 0.22) 0%, transparent 100%) !important; border-left-color: var(--drawer-teal) !important; } /* Right-rail action buttons: Edit list / Share with manager / Send to AMD. Primary + danger variants use colored gradients that already read on dark; the .secondary (Edit list) is light gray and needs overriding. */ html[data-theme="dark"] .detail-pane-actions button.secondary { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .detail-pane-actions button.secondary:hover { background: #2d3544 !important; border-color: rgba(34, 211, 238, 0.4) !important; color: var(--drawer-teal) !important; } /* Primary/danger use a gradient — re-assert so our broad button rules can't dim them. */ html[data-theme="dark"] .detail-pane-actions button.primary { background: linear-gradient(135deg, #0891b2, #0e7490) !important; color: #ffffff !important; border: none !important; } html[data-theme="dark"] .detail-pane-actions button.danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: #ffffff !important; border: none !important; } /* Per-row "Remove" button inside the detail table. Source uses light-red `#fef2f2` fill with dark-red text. */ html[data-theme="dark"] #detailTable .remove-btn, html[data-theme="dark"] .detail-pane .remove-btn { background: rgba(239, 68, 68, 0.14) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.45) !important; } html[data-theme="dark"] #detailTable .remove-btn:hover, html[data-theme="dark"] .detail-pane .remove-btn:hover { background: rgba(239, 68, 68, 0.22) !important; border-color: rgba(239, 68, 68, 0.6) !important; } /* Mini panes inside a list detail — linked entries (bundle/pallet summaries) and "mixed pallet" summary cards. Source: `#fff` with a pale teal border. */ html[data-theme="dark"] .modal-linked-entry, html[data-theme="dark"] .mixed-modal { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html[data-theme="dark"] .modal-linked-entry:hover, html[data-theme="dark"] .mixed-modal:hover { background: #2d3544 !important; border-color: rgba(34, 211, 238, 0.35) !important; } /* Children inside linked-entry and mixed-modal cards */ html[data-theme="dark"] .modal-linked-header, html[data-theme="dark"] .mixed-modal h3 { color: var(--ink) !important; } html[data-theme="dark"] .modal-linked-identifier { background: rgba(168, 85, 247, 0.2) !important; color: #d8b4fe !important; border: 1px solid rgba(168, 85, 247, 0.45) !important; } html[data-theme="dark"] .modal-linked-sub, html[data-theme="dark"] .modal-linked-summary { color: var(--drawer-ink-mid) !important; } /* Section header row holds the sticky header button — its `` is painted `background: none` so the button's gradient shows. But on AMD/list views it may render through a tbody with the global `tbody { background: white }` rule — force transparent. */ html[data-theme="dark"] #detailTable .modal-section-row, html[data-theme="dark"] #detailTable .modal-section-row td, html[data-theme="dark"] .modal-section-row, html[data-theme="dark"] .modal-section-row td { background: transparent !important; } /* Section chevron + title + count inside a section-header button */ html[data-theme="dark"] .modal-section-chevron { border-left-color: var(--drawer-teal) !important; border-bottom-color: var(--drawer-teal) !important; } html[data-theme="dark"] .modal-section-title { color: var(--drawer-teal) !important; } html[data-theme="dark"] .modal-section-count { color: var(--drawer-ink-mid) !important; } /* The list detail table itself (`#detailTable`) may inherit the global `tbody { background: white }` rule. Neutralize it and paint cells transparent so the surrounding `.detail-pane` dark fill shows through. */ html[data-theme="dark"] #detailTable, html[data-theme="dark"] #detailTable thead, html[data-theme="dark"] #detailTable tbody, html[data-theme="dark"] #detailTable tr { background: transparent !important; } html[data-theme="dark"] #detailTable td, html[data-theme="dark"] #detailTable th { background: transparent !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* ─── Requisition drawer (the "Lists" slide-in drawer accessed via the Lists button at the top-right of every page) ──────── The `.req-panel` shell is already dark (rule higher up). These rules cover every child surface so items, sections, pallet mini-panes, and the truck separator all read dark. */ /* Drawer items + borders */ html[data-theme="dark"] .req-items { background: transparent !important; } html[data-theme="dark"] .req-item { border-bottom-color: rgba(255, 255, 255, 0.08) !important; color: var(--ink) !important; } html[data-theme="dark"] .req-label { color: var(--ink) !important; } html[data-theme="dark"] .req-meta, html[data-theme="dark"] .req-qty-note, html[data-theme="dark"] .req-desc, html[data-theme="dark"] .req-linked-summary, html[data-theme="dark"] .req-linked-sub { color: var(--drawer-ink-mid) !important; } /* Truck separator ("Truck: Rig 23" divider between scoped groups) */ html[data-theme="dark"] .req-truck-sep { background: #161b23 !important; color: var(--ink) !important; border-top-color: rgba(255, 255, 255, 0.12) !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; } /* Section card (collapsible group inside the drawer) */ html[data-theme="dark"] .req-section { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } html[data-theme="dark"] .req-section-header { background: #161b23 !important; color: var(--ink) !important; border: none !important; } html[data-theme="dark"] .req-section-header:hover { background: #232a38 !important; } html[data-theme="dark"] .req-section-chevron { border-left-color: var(--drawer-teal) !important; border-bottom-color: var(--drawer-teal) !important; } html[data-theme="dark"] .req-section-title { color: var(--ink) !important; } html[data-theme="dark"] .req-section-count { color: var(--drawer-ink-mid) !important; } /* Linked entries — the little pallet / mixed-pallet mini-panes */ html[data-theme="dark"] .req-linked-entry { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .req-linked-entry--mixed { background: rgba(168, 85, 247, 0.12) !important; border-color: rgba(168, 85, 247, 0.45) !important; } html[data-theme="dark"] .req-linked-header { color: var(--ink) !important; } /* Purple pill tags for mixed-pallet markers */ html[data-theme="dark"] .req-mixed-pill, html[data-theme="dark"] .req-linked-tag { background: rgba(168, 85, 247, 0.22) !important; color: #d8b4fe !important; border: 1px solid rgba(168, 85, 247, 0.45) !important; } /* Mixed-group row highlight (the `.mixed-group-row` applied when a `.req-item` is part of a mixed pallet) */ html[data-theme="dark"] .req-item.mixed-group-row { background: rgba(168, 85, 247, 0.1) !important; border-left-color: #c084fc !important; } /* Drawer footer action bar + buttons */ html[data-theme="dark"] .req-panel > .req-actions, html[data-theme="dark"] .req-actions { border-top-color: rgba(255, 255, 255, 0.12) !important; background: transparent !important; } html[data-theme="dark"] .req-actions button { background: linear-gradient(135deg, #0891b2, #0e7490) !important; color: #ffffff !important; border: none !important; } html[data-theme="dark"] .req-actions button:hover { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; } html[data-theme="dark"] .req-actions .danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; } /* Delete X on each drawer item */ html[data-theme="dark"] .req-del { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .req-del:hover { color: #fca5a5 !important; } /* Quantity inputs inside drawer items */ html[data-theme="dark"] .req-controls > input, html[data-theme="dark"] .req-controls .structured-qty input { background: #0f131a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .req-controls .structured-qty label { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .req-controls .structured-qty-total, html[data-theme="dark"] .req-controls .structured-qty-note { color: var(--ink) !important; } /* Mixed-pallet group rows + badge pill. Source: - row `.mixed-group-row` → `#faf2ff` (very pale purple tint) - badge `.mixed-group-badge` → `#f3d1ff` bg, `#7326a3` text Dark equivalent keeps the purple semantic hue but shifts both surface and text to readable dark-mode values. */ html[data-theme="dark"] #detailTable .mixed-group-row, html[data-theme="dark"] #detailTable .mixed-group-row td { background: rgba(168, 85, 247, 0.08) !important; } html[data-theme="dark"] #detailTable .mixed-group-badge { background: rgba(168, 85, 247, 0.2) !important; color: #d8b4fe !important; border: 1px solid rgba(168, 85, 247, 0.45) !important; } html[data-theme="dark"] #detailTable .mixed-group-summary { color: var(--drawer-ink-mid) !important; } /* ─── Settings page ───────────────────────────────────────── Tabs, hero banner, profile/user cards, role badge. */ /* Tab container `.sp-nav` + individual tabs. Source: semi-white bg with teal-ish border; active tab is solid teal with white text. */ html[data-theme="dark"] .sp-nav { background: rgba(26, 31, 42, 0.85) !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .sp-nav__tab { background: transparent !important; color: var(--ink) !important; } html[data-theme="dark"] .sp-nav__tab:hover { background: rgba(34, 211, 238, 0.1) !important; color: var(--drawer-teal) !important; } html[data-theme="dark"] .sp-nav__tab--active { background: linear-gradient(135deg, #0e7490, #0891b2) !important; color: #ffffff !important; } html[data-theme="dark"] .sp-nav__tab--active:hover { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; color: #ffffff !important; } /* Hero banner (`.sp-hero`). Source: rgba(255,255,255,0.92) with a teal-accent top-stripe (already fine on dark). */ html[data-theme="dark"] .sp-hero { background: rgba(26, 31, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .sp-hero__name { color: var(--ink) !important; } html[data-theme="dark"] .sp-hero__username, html[data-theme="dark"] .sp-hero__company { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .sp-hero__company { border-left-color: rgba(255, 255, 255, 0.15) !important; } /* Active/inactive status pill inside the hero banner. Source: `#f0fdf4` (pale green) or `#fef2f2` (pale red) with matching dark-text color. */ html[data-theme="dark"] .sp-hero__status--active { background: rgba(34, 197, 94, 0.18) !important; color: #4ade80 !important; } html[data-theme="dark"] .sp-hero__status--inactive { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } /* Role badge in the hero banner. Source uses pastel fills per role (purple owner, blue regional, amber district, gray operator). */ html[data-theme="dark"] .sp-role-badge--owner { background: rgba(168, 85, 247, 0.2) !important; color: #d8b4fe !important; } html[data-theme="dark"] .sp-role-badge--regional { background: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; } html[data-theme="dark"] .sp-role-badge--district { background: rgba(245, 158, 11, 0.2) !important; color: #fcd34d !important; } html[data-theme="dark"] .sp-role-badge--operator { background: #232a38 !important; color: var(--drawer-ink-mid) !important; } /* Profile info card + user-management panel + form card (New User). Source: rgba(255,255,255,0.95) fills with teal-tinted borders. */ html[data-theme="dark"] .sp-info-card, html[data-theme="dark"] .sp-panel, html[data-theme="dark"] .sp-form-card { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important; color: var(--ink) !important; } /* Rows inside the profile info card */ html[data-theme="dark"] .sp-info-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .sp-info-row__label { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .sp-info-row__value { color: var(--ink) !important; } html[data-theme="dark"] .sp-info-row__value--muted { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .sp-info-row__btn { background: rgba(34, 211, 238, 0.1) !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.3) !important; } html[data-theme="dark"] .sp-info-row__btn:hover { background: rgba(34, 211, 238, 0.18) !important; border-color: rgba(34, 211, 238, 0.5) !important; } /* Inline edit section that expands under an info row */ html[data-theme="dark"] .sp-info-edit { background: #161b23 !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; color: var(--ink) !important; } html[data-theme="dark"] .sp-inline-intro { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .sp-inline-input { background: #0f131a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* Form card head (the teal-gradient header above the New User form) — already teal on source, re-pin so it doesn't get neutralized. */ html[data-theme="dark"] .sp-form-card__head { background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%) !important; color: #ffffff !important; } /* Manage-users table rows (`.sp-tr`) + cells + action pills. Source hover is `#f8fafc` light-gray; cells use dark text. */ html[data-theme="dark"] .sp-tr { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .sp-tr:hover { background: #232a38 !important; } html[data-theme="dark"] .sp-td { color: var(--ink) !important; } /* Active/inactive status pills in the users table. Source uses pale green/red — swap to tinted versions with bright text. */ html[data-theme="dark"] .sp-status-pill--active { background: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; } html[data-theme="dark"] .sp-status-pill--inactive { background: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; } /* Branch access pills shown under a user row. Source: pale teal tint with teal text — keep the semantic hue but brighten for readability on dark. */ html[data-theme="dark"] .sp-branch-pill { background: rgba(34, 211, 238, 0.15) !important; color: var(--drawer-teal) !important; border: 1px solid rgba(34, 211, 238, 0.3) !important; } /* Branch + truck access picker on the New User form. `.sp-branch` = each branch card; its `` is the clickable header, and `.sp-truck-grid` is the expanded dropdown area. */ html[data-theme="dark"] .sp-branch { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .sp-branch[open] { border-color: rgba(34, 211, 238, 0.4) !important; } html[data-theme="dark"] .sp-branch__summary { background: #161b23 !important; color: var(--ink) !important; } html[data-theme="dark"] .sp-branch[open] .sp-branch__summary { background: rgba(34, 211, 238, 0.12) !important; border-bottom-color: rgba(34, 211, 238, 0.25) !important; } html[data-theme="dark"] .sp-branch__name { color: var(--ink) !important; } html[data-theme="dark"] .sp-branch__count, html[data-theme="dark"] .sp-branch__chevron { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .sp-branch[open] .sp-branch__chevron { color: var(--drawer-teal) !important; } /* Truck dropdown grid inside an open branch card */ html[data-theme="dark"] .sp-truck-grid { background: #1a1f2a !important; color: var(--ink) !important; } html[data-theme="dark"] .sp-truck-label { color: var(--ink) !important; } html[data-theme="dark"] .sp-no-branches { color: var(--drawer-ink-mid) !important; } /* ─── Rig Upload page (truck_upload.css) ──────────────────── The file is token-based (`--tu-*`). Override the tokens so anything downstream that reads them picks up dark values automatically, then handle the few hardcoded selectors. */ html[data-theme="dark"] { --tu-bg: #0f131a; --tu-card: #1a1f2a; --tu-ink: #e5e9f0; --tu-ink-mid: #a3adbf; --tu-ink-dim: #7a869a; --tu-border: rgba(255, 255, 255, 0.12); --tu-border-lt: rgba(255, 255, 255, 0.08); --tu-teal: #22d3ee; --tu-teal-m: #06b6d4; --tu-teal-l: #0ea5e9; --tu-danger: #fca5a5; } /* Layout wrappers */ html[data-theme="dark"] .upload-layout { background: transparent !important; color: var(--ink) !important; } html[data-theme="dark"] .stepper, html[data-theme="dark"] #stepper { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } html[data-theme="dark"] .page-head { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } /* Stepper items */ html[data-theme="dark"] .step { color: var(--ink) !important; } html[data-theme="dark"] .step:hover { background: rgba(34, 211, 238, 0.08) !important; } html[data-theme="dark"] .step.active { background: rgba(34, 211, 238, 0.14) !important; color: var(--drawer-teal) !important; border-left-color: var(--drawer-teal) !important; } /* Step state colors — keep red/green readable on dark surfaces */ html[data-theme="dark"] .step.incomplete { color: #fca5a5 !important; border-left-color: #f87171 !important; } html[data-theme="dark"] .step.incomplete .step-dot { background: #ef4444 !important; border-color: #fca5a5 !important; } html[data-theme="dark"] .step.completed { color: #6ee7b7 !important; background: rgba(16, 185, 129, 0.10) !important; border-left-color: #34d399 !important; } html[data-theme="dark"] .step.completed .step-dot { background: #10b981 !important; border-color: #6ee7b7 !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22) !important; } html[data-theme="dark"] .step.untouched .step-dot { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.25) !important; } /* Missing-required count badge stays red on both themes */ html[data-theme="dark"] .step .badge { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } html[data-theme="dark"] .step.completed .badge { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } /* Chunk pips in the data-pane toolbar */ html[data-theme="dark"] .chunk-pip { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.18) !important; } html[data-theme="dark"] .chunk-pip.untouched { background: #232a38 !important; color: var(--ink-mid, #a3adbf) !important; } html[data-theme="dark"] .chunk-pip.completed { background: #10b981 !important; border-color: #34d399 !important; color: #ffffff !important; } html[data-theme="dark"] .chunk-pip.incomplete { background: #ef4444 !important; border-color: #fca5a5 !important; color: #ffffff !important; } html[data-theme="dark"] .chunk-pip.active { outline-color: rgba(34, 211, 238, 0.45) !important; border-color: var(--drawer-teal, #22d3ee) !important; } html[data-theme="dark"] .chunk-pip:hover { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22) !important; } /* Data-pane toolbar surface in dark mode */ html[data-theme="dark"] .progress-wrap { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } /* ── Page-head action buttons (Browse / Save / Submit / Dev) ────── */ html[data-theme="dark"] .action-group { border-right-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .action-btn.action-secondary { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.16) !important; color: var(--ink) !important; } html[data-theme="dark"] .action-btn.action-secondary:hover { background: rgba(34, 211, 238, 0.10) !important; border-color: var(--drawer-teal, #22d3ee) !important; color: var(--drawer-teal, #22d3ee) !important; } html[data-theme="dark"] .action-btn.action-save { background: rgba(245, 158, 11, 0.14) !important; border-color: rgba(245, 158, 11, 0.55) !important; color: #fbbf24 !important; } html[data-theme="dark"] .action-btn.action-save:hover { background: rgba(245, 158, 11, 0.22) !important; border-color: #fbbf24 !important; color: #fde68a !important; } html[data-theme="dark"] .action-btn.action-primary { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 2px 10px rgba(34, 211, 238, 0.30) !important; } html[data-theme="dark"] .action-btn.action-primary:hover { filter: brightness(1.08) !important; box-shadow: 0 4px 16px rgba(34, 211, 238, 0.42) !important; } html[data-theme="dark"] .action-btn.action-dev { background: linear-gradient(135deg, #818cf8, #6366f1) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 2px 10px rgba(99, 102, 241, 0.36) !important; } html[data-theme="dark"] .action-btn.action-dev:hover { filter: brightness(1.08) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.46) !important; } /* ── Rig Upload landing screen (dark mode) ──────────────────────── */ html[data-theme="dark"] .tu-landing { background: radial-gradient(circle at 20% 15%, rgba(34, 211, 238, 0.10), transparent 55%), radial-gradient(circle at 80% 85%, rgba(8, 145, 178, 0.14), transparent 55%), #0f131a !important; color: var(--ink) !important; } html[data-theme="dark"] .tu-landing-eyebrow { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(34, 211, 238, 0.30) !important; color: var(--drawer-teal, #22d3ee) !important; } html[data-theme="dark"] .tu-landing-title { background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #0ea5e9 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="dark"] .tu-landing-desc { color: var(--ink-mid, #a3adbf) !important; } html[data-theme="dark"] .tu-landing-btn { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30) !important; } html[data-theme="dark"] .tu-landing-btn:hover { border-color: var(--drawer-teal, #22d3ee) !important; box-shadow: 0 10px 26px rgba(34, 211, 238, 0.18) !important; } html[data-theme="dark"] .tu-landing-btn-sub { color: var(--ink-mid, #a3adbf) !important; } html[data-theme="dark"] .tu-landing-btn.primary { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 6px 22px rgba(34, 211, 238, 0.32) !important; } html[data-theme="dark"] .tu-landing-btn.primary .tu-landing-btn-sub { color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="dark"] .tu-landing-btn.primary:hover { filter: brightness(1.08) !important; box-shadow: 0 12px 30px rgba(34, 211, 238, 0.45) !important; } /* Disabled state — keep visible but clearly inactive on dark surfaces. */ html[data-theme="dark"] .tu-landing-btn:disabled, html[data-theme="dark"] .tu-landing-btn[aria-disabled="true"] { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: var(--ink-mid, #a3adbf) !important; box-shadow: none !important; opacity: 0.55 !important; } html[data-theme="dark"] .tu-landing-btn:disabled:hover, html[data-theme="dark"] .tu-landing-btn[aria-disabled="true"]:hover { border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } html[data-theme="dark"] .tu-landing-btn:disabled .tu-landing-btn-label, html[data-theme="dark"] .tu-landing-btn[aria-disabled="true"] .tu-landing-btn-label { color: var(--ink-mid, #a3adbf) !important; } html[data-theme="dark"] .tu-landing-btn:disabled .tu-landing-btn-sub, html[data-theme="dark"] .tu-landing-btn[aria-disabled="true"] .tu-landing-btn-sub { color: var(--ink-dim, #7a869a) !important; font-style: italic !important; } /* Aura blobs adjusted for dark surface so they read as luminous */ html[data-theme="dark"] .tu-aura-a { background: radial-gradient(circle, #0e7490 0%, transparent 70%) !important; opacity: .42 !important; } html[data-theme="dark"] .tu-aura-b { background: radial-gradient(circle, #06b6d4 0%, transparent 70%) !important; opacity: .40 !important; } html[data-theme="dark"] .tu-aura-c { background: radial-gradient(circle, #22d3ee 0%, transparent 70%) !important; opacity: .32 !important; } html[data-theme="dark"] .tu-tire { /* Lift the tire's opacity slightly on the darker surface so the rim and spokes still read while staying decorative. */ opacity: 0.22 !important; filter: drop-shadow(0 0 22px rgba(34, 211, 238, 0.22)) !important; } /* ── Review modal (dark mode) ───────────────────────────────────── */ html[data-theme="dark"] .rev-tabs { background: #161b23 !important; border-bottom-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="dark"] .rev-tab { color: var(--ink-mid, #a3adbf) !important; } html[data-theme="dark"] .rev-tab:hover { color: var(--ink, #e5e9f0) !important; background: rgba(34, 211, 238, 0.08) !important; } html[data-theme="dark"] .rev-tab.active { color: var(--drawer-teal, #22d3ee) !important; border-bottom-color: var(--drawer-teal, #22d3ee) !important; background: #1a1f2a !important; } html[data-theme="dark"] .rev-tab-dot { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.20) !important; } html[data-theme="dark"] .rev-tab-dot.filled { background: var(--drawer-teal, #22d3ee) !important; border-color: var(--drawer-teal, #22d3ee) !important; box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.22) !important; } html[data-theme="dark"] .rev-panels { background: #1a1f2a !important; } html[data-theme="dark"] .rev-panel-title { color: var(--ink, #e5e9f0) !important; } html[data-theme="dark"] .rev-panel-head { border-bottom-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .rev-instance { border-bottom-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="dark"] .rev-instance-title { color: var(--drawer-teal, #22d3ee) !important; } html[data-theme="dark"] .rev-item { background: rgba(34, 211, 238, 0.06) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .rev-item-label { color: var(--ink-mid, #a3adbf) !important; } html[data-theme="dark"] .rev-item-value { color: var(--ink, #e5e9f0) !important; } html[data-theme="dark"] .rev-empty { color: var(--ink-mid, #a3adbf) !important; } /* Loading overlay surface in dark mode */ html[data-theme="dark"] .tu-loading-overlay { background: rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .tu-loading-card { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .tu-loading-text { color: var(--ink, #e5e9f0) !important; } html[data-theme="dark"] .tu-spinner { border-color: rgba(34, 211, 238, 0.18) !important; border-top-color: var(--drawer-teal, #22d3ee) !important; } /* Toast notifications in dark mode */ html[data-theme="dark"] .tu-toast { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink, #e5e9f0) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important; } html[data-theme="dark"] .tu-toast-success { border-left-color: #34d399 !important; } html[data-theme="dark"] .tu-toast-error { border-left-color: #f87171 !important; } html[data-theme="dark"] .tu-toast-info { border-left-color: var(--drawer-teal, #22d3ee) !important; } html[data-theme="dark"] .tu-toast-success .tu-toast-icon { background: #10b981 !important; } html[data-theme="dark"] .tu-toast-error .tu-toast-icon { background: #ef4444 !important; } html[data-theme="dark"] .tu-toast-info .tu-toast-icon { background: var(--drawer-teal, #22d3ee) !important; } html[data-theme="dark"] .tu-toast-close { color: var(--ink-mid, #a3adbf) !important; } html[data-theme="dark"] .tu-toast-close:hover { color: var(--ink, #e5e9f0) !important; } /* In-site confirm modal in dark mode */ html[data-theme="dark"] .tu-confirm-overlay { background: rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .tu-confirm-card { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .tu-confirm-head { background: linear-gradient(135deg, #0e7490, #0891b2) !important; } html[data-theme="dark"] .tu-confirm-body { color: var(--ink, #e5e9f0) !important; } html[data-theme="dark"] .tu-confirm-actions { background: #161b23 !important; border-top-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="dark"] .tu-confirm-btn.tu-confirm-primary { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(34, 211, 238, 0.30) !important; } html[data-theme="dark"] .tu-confirm-btn.tu-confirm-primary:hover { filter: brightness(1.08) !important; box-shadow: 0 4px 16px rgba(34, 211, 238, 0.42) !important; } html[data-theme="dark"] .tu-confirm-btn.tu-confirm-danger { background: rgba(239, 68, 68, 0.14) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.45) !important; } html[data-theme="dark"] .tu-confirm-btn.tu-confirm-danger:hover { background: rgba(239, 68, 68, 0.22) !important; border-color: rgba(239, 68, 68, 0.6) !important; } html[data-theme="dark"] .tu-confirm-btn.tu-confirm-warning { background: rgba(245, 158, 11, 0.16) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, 0.55) !important; } html[data-theme="dark"] .tu-confirm-btn.tu-confirm-warning:hover { background: rgba(245, 158, 11, 0.24) !important; border-color: #fbbf24 !important; color: #fde68a !important; } html[data-theme="dark"] .tu-confirm-btn.tu-confirm-ghost { background: #232a38 !important; color: var(--ink, #e5e9f0) !important; border-color: rgba(255, 255, 255, 0.16) !important; } html[data-theme="dark"] .tu-confirm-btn.tu-confirm-ghost:hover { background: rgba(34, 211, 238, 0.10) !important; border-color: var(--drawer-teal, #22d3ee) !important; color: var(--drawer-teal, #22d3ee) !important; } /* Form cards + sections */ html[data-theme="dark"] .section-card, html[data-theme="dark"] .fk-results { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } html[data-theme="dark"] .section-head { background: linear-gradient(90deg, rgba(34, 211, 238, 0.1) 0%, transparent 100%) !important; color: var(--ink) !important; } html[data-theme="dark"] .row-bar { background: rgba(34, 211, 238, 0.06) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .fk-toggle { background: #161b23 !important; border-color: rgba(255, 255, 255, 0.15) !important; color: var(--ink) !important; } /* Banner (error/warning strip) */ html[data-theme="dark"] .banner { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: #fca5a5 !important; } /* Form inputs */ html[data-theme="dark"] .upload-layout input[type="text"], html[data-theme="dark"] .upload-layout input[type="number"], html[data-theme="dark"] .upload-layout input[type="date"], html[data-theme="dark"] .upload-layout textarea, html[data-theme="dark"] .upload-layout select, html[data-theme="dark"] #edit-json { background: #0f131a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .upload-layout input:focus, html[data-theme="dark"] .upload-layout textarea:focus, html[data-theme="dark"] .upload-layout select:focus, html[data-theme="dark"] #edit-json:focus { border-color: var(--drawer-teal) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18) !important; } html[data-theme="dark"] .upload-layout .invalid { border-color: #fca5a5 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important; } /* Primary submit buttons — re-pin the site's teal gradient */ html[data-theme="dark"] .upload-layout .submit-btn, html[data-theme="dark"] .review-actions .primary, html[data-theme="dark"] #save-edit { background: linear-gradient(135deg, #0891b2, #0e7490) !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(14, 116, 144, 0.3) !important; } html[data-theme="dark"] .upload-layout .submit-btn:hover, html[data-theme="dark"] .review-actions .primary:hover, html[data-theme="dark"] #save-edit:hover { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; } /* Secondary / outline buttons (nav-btn, add-btn, list-table action buttons) */ html[data-theme="dark"] .upload-layout .nav-btn, html[data-theme="dark"] .list-table .link, html[data-theme="dark"] .list-table .actions > button { background: #232a38 !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.35) !important; } html[data-theme="dark"] .upload-layout .nav-btn:hover, html[data-theme="dark"] .list-table .link:hover, html[data-theme="dark"] .list-table .actions > button:hover { background: #2d3544 !important; border-color: var(--drawer-teal) !important; } html[data-theme="dark"] .upload-layout .add-btn { background: rgba(34, 211, 238, 0.06) !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.4) !important; } html[data-theme="dark"] .upload-layout .add-btn:hover { background: rgba(34, 211, 238, 0.14) !important; border-color: var(--drawer-teal) !important; } /* Remove / danger buttons */ html[data-theme="dark"] .upload-layout .remove-btn, html[data-theme="dark"] .list-table .link.danger, html[data-theme="dark"] .list-table .actions > button.danger, html[data-theme="dark"] .list-table .actions > button.delete { background: rgba(239, 68, 68, 0.14) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.45) !important; } html[data-theme="dark"] .upload-layout .remove-btn:hover, html[data-theme="dark"] .list-table .link.danger:hover, html[data-theme="dark"] .list-table .actions > button.danger:hover, html[data-theme="dark"] .list-table .actions > button.delete:hover { background: rgba(239, 68, 68, 0.22) !important; border-color: rgba(239, 68, 68, 0.6) !important; } /* Approve button — green tint distinct from the rest of the row. */ html[data-theme="dark"] .list-table .actions > button.approve { background: rgba(16, 185, 129, 0.14) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.45) !important; } html[data-theme="dark"] .list-table .actions > button.approve:hover { background: rgba(16, 185, 129, 0.22) !important; border-color: rgba(16, 185, 129, 0.6) !important; } /* Even-row zebra stripe on dark surfaces */ html[data-theme="dark"] .list-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025) !important; } /* Review actions bar (secondary row under the modal) */ html[data-theme="dark"] .review-actions { background: #161b23 !important; border-top-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .review-actions button:not(.primary) { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .review-actions button:not(.primary):hover { background: #2d3544 !important; border-color: rgba(34, 211, 238, 0.35) !important; color: var(--drawer-teal) !important; } /* Modal (In-Progress / Pending / Edit JSON) */ html[data-theme="dark"] .review-modal { background: rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .review-card { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } html[data-theme="dark"] .review-head { background: linear-gradient(135deg, #0e7490, #0891b2) !important; color: #ffffff !important; } html[data-theme="dark"] .close-review { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.35) !important; color: #ffffff !important; } html[data-theme="dark"] .close-review:hover { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.6) !important; } /* List tables inside the rig-upload page */ html[data-theme="dark"] .list-table, html[data-theme="dark"] .list-table tbody { background: transparent !important; color: var(--ink) !important; } html[data-theme="dark"] .list-table thead tr { background: linear-gradient(90deg, #0e7490, #0891b2) !important; } html[data-theme="dark"] .list-table th { color: #ffffff !important; border-right-color: rgba(255, 255, 255, 0.18) !important; } html[data-theme="dark"] .list-table td { color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .list-table tbody tr:hover td { background: rgba(34, 211, 238, 0.08) !important; } html[data-theme="dark"] .rev-block td { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* ─── "Send to AMD" order-form modal ──────────────────────── The header already uses a teal gradient (good on dark) but the body, footer, inputs, branch blocks, and Preview-PDF button are all white/light gray. The Submit button keeps its teal gradient. */ html[data-theme="dark"] .amd-form-backdrop { background: rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .amd-form-modal { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important; color: var(--ink) !important; } html[data-theme="dark"] .amd-form-body { background: transparent !important; color: var(--ink) !important; } html[data-theme="dark"] .amd-form-section-title { color: var(--drawer-teal) !important; border-bottom-color: rgba(34, 211, 238, 0.25) !important; } html[data-theme="dark"] .amd-form-branch-block { background: rgba(34, 211, 238, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } html[data-theme="dark"] .amd-form-label { color: var(--drawer-ink-mid) !important; } html[data-theme="dark"] .amd-form-input, html[data-theme="dark"] .amd-form-select, html[data-theme="dark"] .amd-form-textarea { background: #0f131a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .amd-form-input:focus, html[data-theme="dark"] .amd-form-select:focus, html[data-theme="dark"] .amd-form-textarea:focus { border-color: var(--drawer-teal) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18) !important; } /* Footer bar at the bottom of the AMD form — source paints it `#f8fafc` light-gray; the Preview-PDF button inside is `#f1f5f9` (white-ish). Make both dark. */ html[data-theme="dark"] .amd-form-footer { background: #161b23 !important; border-top-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; } html[data-theme="dark"] .amd-form-btn-preview { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .amd-form-btn-preview:hover { background: #2d3544 !important; border-color: rgba(34, 211, 238, 0.4) !important; color: var(--drawer-teal) !important; } /* Re-assert the Submit button's teal gradient so it doesn't get neutralized by broad rules. */ html[data-theme="dark"] .amd-form-btn-submit { background: linear-gradient(135deg, #0891b2, #0e7490) !important; color: #ffffff !important; border: none !important; } html[data-theme="dark"] .amd-form-btn-submit:hover { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; } /* In-cell stacked mini-grids used by the Equipment report (one stack per cell, listing e.g. TPumps or Proportioners for a truck). Source uses `--grid, #d7d7d7` borders and a `--table-subhead, #f5f5f5` light-gray fill on the header row. */ html[data-theme="dark"] .stack { border-color: rgba(255, 255, 255, 0.14) !important; background: transparent !important; } html[data-theme="dark"] .stack-row { border-top-color: rgba(255, 255, 255, 0.1) !important; background: transparent !important; color: var(--ink) !important; } /* The header row = `.stack-row:first-child`, plus any element the user/JS may label `.stack-head`. */ html[data-theme="dark"] .stack-row:first-child, html[data-theme="dark"] .stack-head, html[data-theme="dark"] .stack-row.stack-head { background: #161b23 !important; color: var(--ink) !important; } html[data-theme="dark"] .stack-row > div { border-left-color: rgba(255, 255, 255, 0.1) !important; } /* `.ff-chips-bar` — the blue-tinted chips bar above filter/column fields. Source: `#f0f9ff` fill with `#bae6fd` border. */ html[data-theme="dark"] .ff-chips-bar { background: rgba(34, 211, 238, 0.08) !important; border-color: rgba(34, 211, 238, 0.25) !important; color: var(--ink) !important; } /* `.wiz-back-btn` — a minimal "Back" link at the top of each wizard step. Source has no idle background but hover uses `#f1f5f9` light-gray fill with `#1e293b` near-black text. */ html[data-theme="dark"] .wiz-back-btn { color: var(--ink) !important; background: transparent !important; } html[data-theme="dark"] .wiz-back-btn:hover { background: #232a38 !important; color: var(--drawer-teal) !important; } /* Column picker field rows (`.fc-field-row` — each row is a clickable field in the columns step). Source: transparent base, hover `#f0fdfe` pale-cyan, selected `#ecfeff` even paler cyan. Both end up looking white-on-white in dark mode. */ html[data-theme="dark"] .fc-field-row { background: transparent !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .fc-field-row:hover { background: #232a38 !important; color: var(--ink) !important; } html[data-theme="dark"] .fc-field-row.is-selected { background: rgba(34, 211, 238, 0.12) !important; color: var(--drawer-teal) !important; } html[data-theme="dark"] .fc-field-row.is-selected .fc-check { background: var(--drawer-teal) !important; border-color: var(--drawer-teal) !important; color: #0b0f16 !important; } html[data-theme="dark"] .fc-field-row.is-selected .fc-field-label { color: var(--drawer-teal) !important; } html[data-theme="dark"] .fc-field-label { color: var(--ink) !important; } /* Filter lookup / choice options. The custom report builder uses native `
`/`` accordions + ` option elements — browsers paint these with the page-default light palette. Force dark fill for any option inside a dark-themed select. */ html[data-theme="dark"] select option, html[data-theme="dark"] select optgroup { background: #161b23 !important; color: var(--ink) !important; } /* Wizard secondary buttons (Back / Cancel). The primary Next/Run buttons use a teal fill that already reads in dark mode. */ html[data-theme="dark"] .wiz-btn--secondary { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .wiz-btn--secondary:hover { background: #2d3544 !important; border-color: rgba(34, 211, 238, 0.35) !important; color: var(--drawer-teal) !important; } /* Reports-menu search pill */ html[data-theme="dark"] .rm-search { background: #161b23 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* Generic `tbody { background: white }` rule in reports.css — a blanket that would repaint every table body white. Neutralize. */ html[data-theme="dark"] .reports-wrapper tbody, html[data-theme="dark"] .report-builder tbody, html[data-theme="dark"] .rv-card tbody, html[data-theme="dark"] .ff-fields tbody { background-color: transparent !important; } /* Wizard step-navigation tabs at the top of the builder (the 4 buttons: Scope / Filters / Columns / Review). Source paints them `#f8f8f8` with a light border, and the active state `#e9f2ff`. */ html[data-theme="dark"] .step-tab { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .step-tab:hover { background: #232a38 !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.35) !important; } html[data-theme="dark"] .step-tab.active, html[data-theme="dark"] .step-tab.is-active, html[data-theme="dark"] .step-tab.current { background: rgba(34, 211, 238, 0.18) !important; color: var(--drawer-teal) !important; border-color: var(--drawer-teal) !important; } /* Wizard page header (frosted white banner at top of each step) and its title. Source: rgba(255,255,255,0.93) with backdrop blur + dark text. Swap to a dark-frosted panel with light text. */ html[data-theme="dark"] .wiz-page-header { background: rgba(26, 31, 42, 0.85) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; backdrop-filter: blur(8px); } html[data-theme="dark"] .wiz-page-title, html[data-theme="dark"] .wiz-page-header .wiz-page-title { color: var(--ink) !important; } /* Category header inside the filter-field / column-field panels (the row that names the currently-open category — e.g., "Electrical", "Generator"). Source: `#f8fafc` with muted text. */ html[data-theme="dark"] .ff-fields__head, html[data-theme="dark"] .fc-sel-bar { background: #161b23 !important; color: var(--ink) !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; } /* Individual field / option buttons inside filters & columns. These are the clickable choices the user picks from — they appear as small white buttons/rows in light mode. */ html[data-theme="dark"] .ff-field, html[data-theme="dark"] .ff-field-btn, html[data-theme="dark"] .ff-row, html[data-theme="dark"] .ff-option, html[data-theme="dark"] .fc-field, html[data-theme="dark"] .fc-row, html[data-theme="dark"] .fc-option, html[data-theme="dark"] .fc-item, html[data-theme="dark"] .filter-option, html[data-theme="dark"] .column-option, html[data-theme="dark"] .rule-option { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .ff-field:hover, html[data-theme="dark"] .ff-field-btn:hover, html[data-theme="dark"] .ff-row:hover, html[data-theme="dark"] .ff-option:hover, html[data-theme="dark"] .fc-field:hover, html[data-theme="dark"] .fc-row:hover, html[data-theme="dark"] .fc-option:hover, html[data-theme="dark"] .fc-item:hover { background: #232a38 !important; border-color: rgba(34, 211, 238, 0.35) !important; color: var(--drawer-teal) !important; } /* Selected / active option */ html[data-theme="dark"] .ff-field.active, html[data-theme="dark"] .ff-field.selected, html[data-theme="dark"] .ff-field.is-selected, html[data-theme="dark"] .fc-field.active, html[data-theme="dark"] .fc-field.selected, html[data-theme="dark"] .fc-field.is-selected, html[data-theme="dark"] .fc-item.active, html[data-theme="dark"] .fc-item.selected { background: rgba(34, 211, 238, 0.18) !important; color: var(--drawer-teal) !important; border-color: var(--drawer-teal) !important; } /* Reports page preset UI ───────────────────────────────── - `.rm-count` is the small count pill showing how many presets exist (source: light-blue fill with dark-blue text). - `.rm-preset-card` is each preset button (source: white bg, light border, left-edge accent). - `.rm-preset-icon` is the emoji tile inside each card (source: pale-cyan bg). Text already reads OK per user; only the backgrounds/borders need dark equivalents. */ html[data-theme="dark"] .rm-count { background: rgba(34, 211, 238, 0.18) !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.35) !important; } html[data-theme="dark"] .rm-preset-card { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; border-left-color: rgba(34, 211, 238, 0.4) !important; } html[data-theme="dark"] .rm-preset-card:hover { background: #232a38 !important; border-color: rgba(34, 211, 238, 0.35) !important; border-left-color: var(--drawer-teal) !important; } html[data-theme="dark"] .rm-preset-icon { background: rgba(34, 211, 238, 0.12) !important; border-color: rgba(34, 211, 238, 0.25) !important; } html[data-theme="dark"] .rm-preset-card:hover .rm-preset-icon { background: rgba(34, 211, 238, 0.2) !important; } /* Source/document viewer close button (#doc-modal-close) + the `.modal-close` style button used elsewhere. Source paints a white square with a muted gray X and a pale border. */ html[data-theme="dark"] body #doc-modal-close, html[data-theme="dark"] body .kb-viewer-close, html[data-theme="dark"] body .source-close, html[data-theme="dark"] body .viewer-close { background: #232a38 !important; color: var(--ink) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] body #doc-modal-close:hover, html[data-theme="dark"] body .kb-viewer-close:hover, html[data-theme="dark"] body .source-close:hover, html[data-theme="dark"] body .viewer-close:hover { background: #2d3544 !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.4) !important; } /* Status dots / badges / pills — let them keep their own colors. Source CSS paints these with semantic fills (green/amber/red) and usually uses white or dark text chosen for contrast. These need !important to beat our broad span override above. */ html[data-theme="dark"] body .status, html[data-theme="dark"] body .status span, html[data-theme="dark"] body .status div, html[data-theme="dark"] body .badge, html[data-theme="dark"] body .badge span, html[data-theme="dark"] body .pill, html[data-theme="dark"] body .pill span, html[data-theme="dark"] body .dot, html[data-theme="dark"] body .tag, html[data-theme="dark"] body [class*="status-"], html[data-theme="dark"] body [class*="badge-"] { color: inherit !important; } /* ── Tables ──────────────────────────────────────────────── */ html[data-theme="dark"] table, html[data-theme="dark"] .oh-table, html[data-theme="dark"] .rl-table { color: var(--ink); background: transparent; } html[data-theme="dark"] table thead th, html[data-theme="dark"] .oh-table th, html[data-theme="dark"] .rl-table th { background: #161b23 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] table td, html[data-theme="dark"] .oh-table td, html[data-theme="dark"] .rl-table td { border-color: rgba(255, 255, 255, 0.08) !important; color: var(--ink); } html[data-theme="dark"] tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); } html[data-theme="dark"] tbody tr:hover td { background: rgba(34, 211, 238, 0.08) !important; } /* ── Form inputs ─────────────────────────────────────────── */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #161b23 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--kb-ink-dim); } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: var(--drawer-teal) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18) !important; outline: none; } /* ── Buttons ─────────────────────────────────────────────── */ html[data-theme="dark"] .universal-button { background-image: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(to bottom right, var(--brand) 0%, var(--brand-hover) 100%); color: #0f131a; } /* Secondary light-gray buttons seen across the app */ html[data-theme="dark"] button[style*="background:#f1f5f9"], html[data-theme="dark"] button[style*="background: #f1f5f9"] { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* ── Modals / overlays / backdrops ───────────────────────── */ /* `.modal` / `.image-modal` / `.gallery-modal` in this codebase are the full-screen translucent OVERLAYS that dim the page (set in home.css to `background: rgba(0,0,0,.8)`). Keep them translucent in dark mode so the page reads through — a solid `#1a1f2a` here produces a fully opaque black slab in front of the page. */ html[data-theme="dark"] .modal, html[data-theme="dark"] .image-modal, html[data-theme="dark"] .gallery-modal { background: rgba(0, 0, 0, 0.78) !important; color: var(--ink); } /* Actual dialog cards (semantic role="dialog" plus generic .dialog / .popup helpers) are content surfaces — those keep the solid panel fill so text reads cleanly against them. */ html[data-theme="dark"] .dialog, html[data-theme="dark"] .popup, html[data-theme="dark"] [role="dialog"] { background: #1a1f2a !important; color: var(--ink); border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .dim-backdrop { background: rgba(0, 0, 0, 0.65); } /* ── Feedback widget ─────────────────────────────────────── */ html[data-theme="dark"] #feedback-floating-btn { filter: brightness(0.95); } /* ── Images / icon tiles that expect a light backdrop ────── */ html[data-theme="dark"] img.invert-on-dark { filter: invert(1) hue-rotate(180deg); } /* ── home.css: trucks / companies / branches / diagram ─── The portal's main SPA has its own card/panel/button classes. All the white/gray-100 surfaces there need explicit dark values. */ /* Main panes, columns, list wrappers — these are LAYOUT containers that in light mode are transparent so the page wallpaper shows through. Keep them transparent in dark mode too; only the cards inside them get a solid dark fill. `.diagram-frame` is an exception: it's a visible framed pane in light mode, so it gets a solid dark fill below. */ html[data-theme="dark"] .left-column, html[data-theme="dark"] .right-column:not(.detail-drawer), html[data-theme="dark"] .table-wrap, html[data-theme="dark"] .page-pane, html[data-theme="dark"] .reports-wrapper, html[data-theme="dark"] .reports-menu, html[data-theme="dark"] #site-content, html[data-theme="dark"] #main-content { background: transparent !important; color: var(--ink); border-color: rgba(255, 255, 255, 0.08) !important; } /* Diagram frame — the visible pane the truck diagram sits inside. Fill it with a solid dark surface so the area around the diagram (inside the pane's border) reads as a card rather than showing through to the wallpaper. */ html[data-theme="dark"] .diagram-frame { background: #1a1f2a !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink); } /* Detail slide-in panel — this is the right-side pane that shows when you click a truck/company/branch. All its `.detail-panel-*` children need dark overrides too; source CSS sets white/near-white on each of them independently. */ html[data-theme="dark"] .detail-panel, html[data-theme="dark"] .detail-panel.is-open { background: linear-gradient(180deg, rgba(26, 31, 42, 0.97), rgba(18, 22, 29, 0.96)) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .detail-panel-header { background: transparent !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--ink) !important; } html[data-theme="dark"] .detail-panel-title { color: var(--ink) !important; } html[data-theme="dark"] .detail-panel-stats { background: transparent !important; } html[data-theme="dark"] .detail-panel-stat { background: rgba(255, 255, 255, 0.05) !important; color: var(--drawer-teal) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .detail-panel-stat-value, html[data-theme="dark"] .detail-panel-stat-label { color: inherit !important; } html[data-theme="dark"] .detail-panel-meta { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .detail-panel-meta-value, html[data-theme="dark"] .detail-panel-meta-label { color: var(--ink) !important; } html[data-theme="dark"] .detail-panel-section { background: transparent !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--ink) !important; } /* Truck / per-item status pill (aka `.detail-panel-health`). Source CSS paints green/amber/red with dark text; in dark mode we soften the fills to alpha tints so they read as badges on a dark surface rather than blazing solid chips. */ html[data-theme="dark"] .detail-panel-health, html[data-theme="dark"] .detail-panel-health.tone-ok { background: rgba(34, 197, 94, 0.18) !important; color: #4ade80 !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15) !important; } html[data-theme="dark"] .detail-panel-health.tone-warn { background: rgba(245, 158, 11, 0.18) !important; color: #fbbf24 !important; border: 1px solid rgba(245, 158, 11, 0.4) !important; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15) !important; } html[data-theme="dark"] .detail-panel-health.tone-danger { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15) !important; } /* Table-level status pills (.status.ok / .status.bad) */ html[data-theme="dark"] .status.ok { background: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; } html[data-theme="dark"] .status.bad, html[data-theme="dark"] .status.danger { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; } html[data-theme="dark"] .status.warn { background: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; } /* Truck panel / accordion panels */ html[data-theme="dark"] .truck-panel, html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .fleet-row, html[data-theme="dark"] .truck-row { background: rgba(26, 31, 42, 0.9) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Sticky bars */ html[data-theme="dark"] .action-bar { background: linear-gradient(#12161d, rgba(18, 22, 29, 0)) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* `:not(.orbit-mode)` keeps this gradient backdrop off the truck-detail orbit dock, which is `position: absolute; inset: 0` over the diagram and would otherwise cast a top-dark/bottom-translucent gradient over the truck. */ html[data-theme="dark"] .category-dock:not(.orbit-mode) { background: linear-gradient(#12161d, rgba(18, 22, 29, 0.85)) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Company / branch / preview cards — fully opaque so the wallpaper only shows in the gaps between cards, never through the card face. */ html[data-theme="dark"] .company-row, html[data-theme="dark"] .branch-row, html[data-theme="dark"] .preview-list-item, html[data-theme="dark"] .stat-tile { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; backdrop-filter: none !important; } html[data-theme="dark"] .company-row:hover, html[data-theme="dark"] .branch-row:hover, html[data-theme="dark"] .preview-list-item:hover { background: #262d3a !important; border-color: rgba(34, 211, 238, 0.4) !important; } html[data-theme="dark"] .stat-pill { background: #232a38 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .stat-pill.warn, html[data-theme="dark"] .stat-pill[class*="warn"] { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.3) !important; } /* Truck table */ html[data-theme="dark"] .truck-table, html[data-theme="dark"] .truck-table tbody, html[data-theme="dark"] .truck-table thead { background: transparent !important; color: var(--ink); } html[data-theme="dark"] .truck-table thead th { background: #161b23 !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .truck-table tbody tr, html[data-theme="dark"] .truck-table tbody tr td { background: transparent !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .truck-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02) !important; } html[data-theme="dark"] .truck-table tbody tr.maint-row td { background: rgba(239, 68, 68, 0.1) !important; } html[data-theme="dark"] .truck-table tbody tr:hover td { background: rgba(34, 211, 238, 0.1) !important; } /* Page hero (detail page banner) — semi-transparent so wallpaper shows through like it does in light mode. */ html[data-theme="dark"] .page-hero { background: linear-gradient(135deg, rgba(26, 31, 42, 0.7), rgba(18, 22, 29, 0.55)) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(8px); } html[data-theme="dark"] .page-hero-img-wrap, html[data-theme="dark"] .co-badge--img { background: #232a38 !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .detail-title, html[data-theme="dark"] .page-hero h1, html[data-theme="dark"] .page-hero h2, html[data-theme="dark"] .page-hero h3 { color: var(--ink) !important; } /* Maintenance / data / info sections */ html[data-theme="dark"] .maintenance-request-card, html[data-theme="dark"] .calendar, html[data-theme="dark"] .service-drawer, html[data-theme="dark"] .data-box, html[data-theme="dark"] .info-box, html[data-theme="dark"] .stat-box, html[data-theme="dark"] .section-box { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* A-side / B-side chemical bundle boxes */ html[data-theme="dark"] .side-a { background: rgba(239, 68, 68, 0.12) !important; color: var(--ink) !important; border-color: rgba(239, 68, 68, 0.3) !important; } html[data-theme="dark"] .side-b { background: rgba(59, 130, 246, 0.12) !important; color: var(--ink) !important; border-color: rgba(59, 130, 246, 0.3) !important; } /* Outline / data buttons across home.css */ html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] .back-button, html[data-theme="dark"] .order-btn, html[data-theme="dark"] .btn-mini.order, html[data-theme="dark"] .blank-toggle, html[data-theme="dark"] .btn.outline, html[data-theme="dark"] .btn-outline, html[data-theme="dark"] .universal-button.outline, html[data-theme="dark"] .btn-show-all { background: #1a1f2a !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html[data-theme="dark"] .btn-ghost:hover, html[data-theme="dark"] .back-button:hover, html[data-theme="dark"] .order-btn:hover, html[data-theme="dark"] .btn-mini.order:hover, html[data-theme="dark"] .blank-toggle:hover, html[data-theme="dark"] .btn.outline:hover, html[data-theme="dark"] .btn-outline:hover, html[data-theme="dark"] .universal-button.outline:hover, html[data-theme="dark"] .btn-show-all:hover { background: rgba(34, 211, 238, 0.12) !important; color: var(--drawer-teal) !important; border-color: rgba(34, 211, 238, 0.4) !important; } /* Exploded-view nav buttons — keep the standard site teal fill (matches .kb-send-btn and primary CTAs) instead of the gray outline treatment, since in light mode they were the branded blue/teal buttons. */ html[data-theme="dark"] body .ev-nav-back, html[data-theme="dark"] body .ev-exit { background: linear-gradient(135deg, #0e7490, #0891b2) !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(14, 116, 144, 0.3) !important; } html[data-theme="dark"] body .ev-nav-back:hover, html[data-theme="dark"] body .ev-exit:hover { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(14, 116, 144, 0.4) !important; } /* Generic button fallback for unstyled