/* ════════════════════════════════════════════════════════════════════════ LEFT-SECTION RESTYLE — DARK-MODE OVERRIDES (2026-06-06) Companion to wwwroot/css/restyle-preview.css. That file styles the claim Details/Edit left column via body[data-restyle="1".."9"] using LIGHT literal colours (#fff, #eef1f5, #f6a64d, #fff7ed, hairline borders, light shadows) which break in dark mode. This file re-targets every one of those literals under html[data-theme="dark"] so each restyle theme still reads as intentional in dark mode — WITHOUT touching layout (radius, padding, density, pill-vs-flat-vs-card character is preserved; only colour / contrast changes). Source-of-truth: it does NOT modify restyle-preview.css; it only overrides. Specificity: restyle-preview.css uses single body[...] selectors with !important. Prepending html[data-theme="dark"] gives these rules strictly higher specificity AND we mirror !important, so they always win in dark mode. Token contract (assumed from dark-tokens.css / site.css dark set): --bg page background (darkest) --surface default card surface --surface-2 elevated / header band surface --surface-3 deepest inset (zebra, header bands on cards) --border default hairline --muted-border faintest hairline (row separators, zebra lines) --hover-bg subtle hover fill --text primary text --text-secondary muted label text --shadow-color rgba used for card shadows in dark Accent: themes that carry a distinct accent keep a dark-adjusted version of it via the --rsp-* token block at the top of each theme (so the shared dynamic-fields + tabs layers, which read --rsp-*, follow into dark too). The orange family (#e8780a / #a95505 / #fff7ed / #fed7aa) is brightened for dark surfaces (orange text → #f6a64d-ish; soft fills → translucent orange). ═══════════════════════════════════════════════════════════════════════════ */ /* ───────── DARK ACCENT TOKEN BASE (all restyle themes) ───────── Brighten the default orange family so accent text/borders read on dark surfaces. Per-theme blocks below re-tune where a theme had its own accent. */ html[data-theme="dark"] body[data-restyle] { --rsp-accent: #f08a2a; /* primary accent fill (brighter for dark) */ --rsp-accent-dark: #f6a64d; /* accent TEXT on dark surfaces (was #a95505) */ --rsp-soft: rgba(240,138,42,.14); /* soft accent-tinted background */ --rsp-line: rgba(240,138,42,.40); /* accent-tinted border */ --rsp-line-soft: var(--border); /* neutral hairline → dark border token */ --rsp-mut: var(--text-secondary); /* muted label text */ } /* ───────────────────────── SHARED BASE (all themes) ───────────────────── */ /* 1) Section title pill + number badge: the orange fill stays orange in dark (brand accent), but lift it slightly so white text keeps contrast. The transparent-title themes (1,3,6,7,8,9,12,13) override .cdv-section-title again locally to make it accent-coloured text, handled per-theme below. */ html[data-theme="dark"] body[data-restyle] .cdv-section-title { background: #e8780a !important; color: #fff !important; } html[data-theme="dark"] body[data-restyle] .cdv-section-header .cdv-section-number, html[data-theme="dark"] body[data-restyle] .claims-wizard-section-number { background: #e8780a !important; color: #fff !important; } html[data-theme="dark"] body[data-restyle] .claim-details-v2 .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle] .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: #f6a64d !important; } /* 3) Daintier Documents cards — light #eef1f5 border / grey chevron / grey counts re-pointed at dark tokens. Layout (radius, padding) untouched. */ html[data-theme="dark"] body[data-restyle] .claims-wizard-upload-box, html[data-theme="dark"] body[data-restyle] .attachment-type-card { border: 1px solid var(--border) !important; background: var(--surface) !important; box-shadow: none !important; } html[data-theme="dark"] body[data-restyle] .attachment-card-chevron { color: var(--text-secondary) !important; } html[data-theme="dark"] body[data-restyle] .attachment-card-file-count { color: var(--text-secondary) !important; } /* ───────────────────────── 1 · MERCURY (ultra-flat hairline) ──────────── */ /* Keeps the flat, border-top-only character; orange top rule stays (brand), transparent header/body, accent-text title, hairline doc separators → token. */ html[data-theme="dark"] body[data-restyle="1"] .cdv-section, html[data-theme="dark"] body[data-restyle="1"] .claims-wizard-section { border: none !important; border-top: 2px solid #e8780a !important; box-shadow: none !important; background: transparent !important; } html[data-theme="dark"] body[data-restyle="1"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="1"] .claims-wizard-section-header { background: transparent !important; border-bottom: none !important; } html[data-theme="dark"] body[data-restyle="1"] .cdv-section-title { background: transparent !important; color: #f6a64d !important; } html[data-theme="dark"] body[data-restyle="1"] .claims-wizard-upload-box, html[data-theme="dark"] body[data-restyle="1"] .attachment-type-card { border: none !important; border-bottom: 1px solid var(--border) !important; background: transparent !important; } /* ───────────────────────── 2 · STRIPE (soft cards, left accent) ───────── */ /* Soft rounded card + left orange accent rail; light card/header bg → surface, light shadow → dark shadow token, hairlines → border token. */ html[data-theme="dark"] body[data-restyle="2"] .cdv-section, html[data-theme="dark"] body[data-restyle="2"] .claims-wizard-section { border: 1px solid var(--border) !important; border-left: 3px solid #e8780a !important; background: var(--surface) !important; box-shadow: 0 1px 2px var(--shadow-color, rgba(0,0,0,.45)) !important; } html[data-theme="dark"] body[data-restyle="2"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="2"] .claims-wizard-section-header { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; } /* ───────────────────────── 3 · RAMP / BREX (dense data-grid) ──────────── */ /* Distinct accent: rust #c2410c — too dark on a dark surface, lift to a warm amber for both the token block and the transparent-title text. */ html[data-theme="dark"] body[data-restyle="3"] { --rsp-accent: #ea7a3c; --rsp-accent-dark: #f0a25e; } html[data-theme="dark"] body[data-restyle="3"] .cdv-section, html[data-theme="dark"] body[data-restyle="3"] .claims-wizard-section { border: 1px solid var(--border) !important; box-shadow: none !important; background: var(--surface) !important; } html[data-theme="dark"] body[data-restyle="3"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="3"] .claims-wizard-section-header { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="dark"] body[data-restyle="3"] .cdv-section-title { background: transparent !important; color: #f0a25e !important; } html[data-theme="dark"] body[data-restyle="3"] .claims-wizard-upload-box, html[data-theme="dark"] body[data-restyle="3"] .attachment-type-card { border: 1px solid var(--border) !important; background: var(--surface) !important; } /* ───────────────────────── 4 · LINEAR / NOTION (tinted, rounded) ──────── */ /* Distinct accent: peach #f6a64d on a warm-cream header band + peach pill title. Keep the peach pill (it IS the theme's signature) but swap the cream header band #fff7ed → a translucent peach over the dark surface, and the warm card border #f0eee9 → a warm-tinted dark border. */ html[data-theme="dark"] body[data-restyle="4"] { --rsp-accent: #f6a64d; --rsp-accent-dark: #f8be7f; } html[data-theme="dark"] body[data-restyle="4"] .cdv-section, html[data-theme="dark"] body[data-restyle="4"] .claims-wizard-section { border: 1px solid rgba(246,166,77,.22) !important; background: var(--surface) !important; box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,.45)) !important; } html[data-theme="dark"] body[data-restyle="4"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="4"] .claims-wizard-section-header { background: rgba(246,166,77,.10) !important; border-bottom: none !important; } /* the peach pill stays — it's the theme's identity; force readable dark text on it */ html[data-theme="dark"] body[data-restyle="4"] .cdv-section-title { background: #f6a64d !important; color: #2a1a08 !important; } html[data-theme="dark"] body[data-restyle="4"] .claims-wizard-upload-box, html[data-theme="dark"] body[data-restyle="4"] .attachment-type-card { border: 1px solid rgba(246,166,77,.22) !important; background: var(--surface) !important; } /* ───────────────────────── 5 · BRANDED (filled orange headers) ────────── */ /* The whole point is a saturated orange gradient header with white title — that reads great on dark already, so keep the gradient. Only the warm card border #f1e4d6 → warm-tinted dark border, light shadow → dark, and the light file-row tint #fff7ed → translucent orange so file rows don't flash white. */ html[data-theme="dark"] body[data-restyle="5"] .cdv-section, html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section { border: 1px solid rgba(232,120,10,.25) !important; border-left: 3px solid #e8780a !important; background: var(--surface) !important; box-shadow: 0 1px 2px var(--shadow-color, rgba(0,0,0,.45)) !important; } html[data-theme="dark"] body[data-restyle="5"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-header { background: linear-gradient(90deg,#e8780a,#f08a2a) !important; border-bottom: none !important; padding: 7px 14px !important; } html[data-theme="dark"] body[data-restyle="5"] .cdv-section-title { background: transparent !important; color: #fff !important; } html[data-theme="dark"] body[data-restyle="5"] .cdv-section-header .cdv-section-number, html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-number { background: rgba(255,255,255,.25) !important; color: #fff !important; } html[data-theme="dark"] body[data-restyle="5"] .claim-details-v2 .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: #fff !important; } html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-header .claims-wizard-section-chevron { color: #fff !important; } html[data-theme="dark"] body[data-restyle="5"] .attachment-file-row { background: rgba(240,138,42,.12) !important; } /* ───────────────────────── 6 · COMPACT (max density, least scroll) ────── */ /* Flat dense card, accent-text uppercase title. Light card bg/header/hairlines → tokens; accent text lifted to amber. Density preserved. */ html[data-theme="dark"] body[data-restyle="6"] .cdv-section, html[data-theme="dark"] body[data-restyle="6"] .claims-wizard-section { border: 1px solid var(--border) !important; box-shadow: none !important; background: var(--surface) !important; } html[data-theme="dark"] body[data-restyle="6"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="6"] .claims-wizard-section-header { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="dark"] body[data-restyle="6"] .cdv-section-title { background: transparent !important; color: #f6a64d !important; } html[data-theme="dark"] body[data-restyle="6"] .claims-wizard-upload-box, html[data-theme="dark"] body[data-restyle="6"] .attachment-type-card { border: 1px solid var(--border) !important; background: var(--surface) !important; } /* ───────────────────────── 7 · SLATE (neutral surfaces, dense, modern) ── */ /* Signature: a slightly elevated neutral header band (#f8fafc) on a white card. Translate that two-tone to dark: card = --surface, header band = --surface-2 (one step up), hairlines → border token, accent-text title → amber. */ html[data-theme="dark"] body[data-restyle="7"] .cdv-section, html[data-theme="dark"] body[data-restyle="7"] .claims-wizard-section { border: 1px solid var(--border) !important; background: var(--surface) !important; box-shadow: 0 1px 2px var(--shadow-color, rgba(0,0,0,.4)) !important; } html[data-theme="dark"] body[data-restyle="7"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="7"] .claims-wizard-section-header { background: var(--surface-2, #232a34) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="dark"] body[data-restyle="7"] .cdv-section-title { background: transparent !important; color: #f6a64d !important; } html[data-theme="dark"] body[data-restyle="7"] .claims-wizard-upload-box, html[data-theme="dark"] body[data-restyle="7"] .attachment-type-card { border: 1px solid var(--border) !important; background: var(--surface) !important; } /* ───────────────────────── 8 · GRID (data-grid, zebra rows, mono nums) ── */ /* Signature: very faint header band (#fafbfc) + per-row bottom separators (#f3f5f9) for the zebra/grid feel + muted dt label (#6b7280). Keep the grid character: header band → --surface-2, row separators → --muted-border (faint in dark too), dt label → --text-secondary, accent-text title → amber. */ html[data-theme="dark"] body[data-restyle="8"] .cdv-section, html[data-theme="dark"] body[data-restyle="8"] .claims-wizard-section { border: 1px solid var(--border) !important; box-shadow: none !important; background: var(--surface) !important; } html[data-theme="dark"] body[data-restyle="8"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="8"] .claims-wizard-section-header { background: var(--surface-2, #232a34) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="dark"] body[data-restyle="8"] .cdv-section-title { background: transparent !important; color: #f6a64d !important; } html[data-theme="dark"] body[data-restyle="8"] .cdv-dl dt, html[data-theme="dark"] body[data-restyle="8"] .cdv-dl dd { border-bottom: 1px solid var(--muted-border, rgba(255,255,255,.06)) !important; } html[data-theme="dark"] body[data-restyle="8"] .cdv-dl dt { color: var(--text-secondary) !important; } html[data-theme="dark"] body[data-restyle="8"] .attachment-type-card, html[data-theme="dark"] body[data-restyle="8"] .claims-wizard-upload-box { border: 1px solid var(--border) !important; background: var(--surface) !important; } /* ───────────────────────── 9 · MIDNIGHT (dark headers, modern) ────────── */ /* Already a dark-header theme (#1f2937 header, white title, orange number, slate chevrons) — so in dark mode the header stays as-is (it's the identity). The only light literals are the CARD shell (light shadow, and the doc-card border #eef1f5 / section overflow); re-point those to dark tokens. The dark header band needs a touch more lift than the page so it still separates from the dark card body — keep #1f2937 which sits above typical dark surfaces. */ html[data-theme="dark"] body[data-restyle="9"] .cdv-section, html[data-theme="dark"] body[data-restyle="9"] .claims-wizard-section { border: 1px solid var(--border) !important; background: var(--surface) !important; box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,.5)) !important; } html[data-theme="dark"] body[data-restyle="9"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="9"] .claims-wizard-section-header { background: #1f2937 !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="dark"] body[data-restyle="9"] .cdv-section-title { background: transparent !important; color: #fff !important; } html[data-theme="dark"] body[data-restyle="9"] .cdv-section-header .cdv-section-number, html[data-theme="dark"] body[data-restyle="9"] .claims-wizard-section-number { background: #e8780a !important; color: #fff !important; } html[data-theme="dark"] body[data-restyle="9"] .claim-details-v2 .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle="9"] .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle="9"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: #fff !important; } html[data-theme="dark"] body[data-restyle="9"] .claims-wizard-section-header .claims-wizard-section-chevron, html[data-theme="dark"] body[data-restyle="9"] .cdv-section-header .cdv-section-chevron { color: #cbd5e1 !important; } html[data-theme="dark"] body[data-restyle="9"] #section-documents .cdv-section-title, html[data-theme="dark"] body[data-restyle="9"] #section-documents .claims-wizard-section-title { background: transparent !important; color: #fff !important; } html[data-theme="dark"] body[data-restyle="9"] .claims-wizard-upload-box, html[data-theme="dark"] body[data-restyle="9"] .attachment-type-card { border: 1px solid var(--border) !important; background: var(--surface) !important; } /* ════════════════════════════════════════════════════════════════════════ COVERAGE NOTE Covered: shared body[data-restyle] base rules (section title/number, daintier Documents cards), and all of the requested 9 themes: 1 Mercury, 2 Stripe, 3 Ramp/Brex, 4 Linear/Notion, 5 Branded, 6 Compact, 7 Slate, 8 Grid, 9 Midnight. Each theme's DISTINCT CHARACTER (rounded/flat/pill/card, density) is preserved — only colours/contrast were re-pointed at the dark token contract; literal light values (#fff, #eef1f5, #f8fafc, #fafbfc, #f3f5f9, #f0eee9, #f1e4d6, #fff7ed, light shadows, #6b7280 labels) were each given a dark counterpart. The shared dynamic-fields (data-dynfields="modern") + cargo-tabs (data-cargo="tabs") layers already read the --rsp-* tokens, which the dark accent base re-tunes, so they follow into dark without separate rules. Accent-resolution notes / not fully resolvable: - Theme 4 (Linear/Notion): the peach pill title is the theme's signature, so it is kept as a literal #f6a64d fill with dark text (#2a1a08) for contrast rather than tokenised — a tasteful dark-adjusted accent, not a neutral token. - Theme 3 (Ramp/Brex): the original rust accent #c2410c is too dark to read on a dark surface, so it is lifted to amber (#ea7a3c / #f0a25e). This is a deliberate hue shift — the only theme whose accent could not be preserved 1:1; everything else keeps its original hue brightened in place. - Theme 9 (Midnight): header literal #1f2937 is intentionally retained (it is a dark band by design and the theme's identity); not tokenised because it must stay distinct from the dark card body. If a project --surface-3 is darker than #1f2937, swap it in for full token alignment. - Themes 7 & 8 use var(--surface-2, …) with a literal fallback (#232a34) in case dark-tokens.css does not yet define --surface-2; same for --muted-border and --shadow-color fallbacks elsewhere. ═══════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ RESTYLE-PREVIEW SWITCHER CHROME — DARK (2026-06-06) The floating switcher control (.rsp-panel) is built at runtime by wwwroot/js/restyle-preview-switcher.js, which injects a