/* ───────────────────────── 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; }

/* ───────────────────────── 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. */
/* R5-C2: dark twins for both branded variants (accent via the vars set in restyle-preview.css). */
html[data-theme="dark"] body[data-restyle="5"] .cdv-section, html[data-theme="dark"] body[data-restyle="5g"] .cdv-section,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section {
    border: 1px solid rgba(232,120,10,.25) !important;
    border-left: 3px solid var(--rsp-accent) !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="5g"] .cdv-section-header,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-header, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-header {
    background: linear-gradient(90deg, var(--rsp-accent), var(--rsp-accent-2)) !important; border-bottom: none !important; padding: 7px 14px !important;
}
html[data-theme="dark"] body[data-restyle="5"] .cdv-section-title, html[data-theme="dark"] body[data-restyle="5g"] .cdv-section-title { background: transparent !important; color: var(--rsp-on-accent) !important; }
html[data-theme="dark"] body[data-restyle="5"] .cdv-section-header .cdv-section-number, html[data-theme="dark"] body[data-restyle="5g"] .cdv-section-header .cdv-section-number,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-number, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-number { background: var(--rsp-bubble) !important; color: var(--rsp-bubble-fg) !important; }
html[data-theme="dark"] body[data-restyle="5"] .claim-details-v2 .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle="5g"] .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="5g"] .claims-wizard-section-title,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-title > span:not(.claims-wizard-section-number), html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-on-accent) !important; }
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-header .claims-wizard-section-chevron, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-on-accent) !important; }
html[data-theme="dark"] body[data-restyle="5"] .attachment-file-row, html[data-theme="dark"] body[data-restyle="5g"] .attachment-file-row { background: rgba(240,138,42,.12) !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 <style> block with
   LIGHT literals (#fff panel, #fff7ed orange head, #e6e8ee hairlines,
   #334155 button text). In dark mode that panel renders as a pure-white
   island. These overrides re-skin only the switcher's own chrome — the active
   orange state (#e8780a/#fff) is intentionally kept as the accent.
   Specificity: html[data-theme="dark"] .rsp-* (0,2,1) strictly beats the
   injected single-class rules (0,1,0), so no !important is needed and source
   order of the runtime <style> is irrelevant. Layout is untouched. */
html[data-theme="dark"] .rsp-panel {
    background: var(--surface, #1c1813);
    border-color: var(--border, #332b22);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .rsp-head {
    background: rgba(240, 138, 42, .12);
    color: #f6a64d;
    border-bottom-color: var(--border, #332b22);
}
html[data-theme="dark"] .rsp-min { color: #f6a64d; }
html[data-theme="dark"] .rsp-label { color: var(--text-secondary, #b9b0a2); }
html[data-theme="dark"] .rsp-btn,
html[data-theme="dark"] .rsp-seg-btn {
    background: var(--surface-2, #241f18);
    border-color: var(--border, #332b22);
    color: var(--text, #efe9e1);
}
html[data-theme="dark"] .rsp-btn:hover,
html[data-theme="dark"] .rsp-seg-btn:hover {
    border-color: rgba(240, 138, 42, .5);
    background: rgba(240, 138, 42, .12);
}

html[data-theme="dark"] body[data-restyle] .claim-summary-panel {
    border-color: rgba(232,120,10,.25) !important;
    border-left-color: #e8780a !important;
}
html[data-theme="dark"] body[data-restyle="sf"] tr.claim-summary-row > td {
    background: rgba(248,169,0,.08) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-panel {
    border-color: rgba(248,169,0,.28) !important;
    border-left-color: #F8A900 !important;
    background: var(--surface, #1c1813) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-header {
    background: linear-gradient(90deg, rgba(248,169,0,.18), rgba(248,169,0,.05)) !important;
    border-bottom: 1px solid rgba(248,169,0,.25) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-header .claim-summary-number,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab:hover {
    color: var(--text, #efe9e1) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-header .claim-summary-status {
    background: rgba(248,169,0,.22) !important;
    color: #fde68a !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tabs {
    background: rgba(248,169,0,.08) !important;
    border-bottom-color: rgba(248,169,0,.25) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab {
    color: var(--text-secondary, #b9b0a2) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab:hover,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab[aria-selected="true"],
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title:hover,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-row:hover,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-download:hover {
    background: rgba(248,169,0,.16) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab[aria-selected="true"] {
    color: #fde68a !important;
    border-bottom-color: #F8A900 !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group {
    border-color: rgba(248,169,0,.25) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-chevron,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-name:hover,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-name:focus-visible,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-download:hover {
    color: #fde68a !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-count {
    background: #F8A900 !important;
    color: #201B16 !important;
}


/* R5-C3: dark chips — redefine the chip vars for legibility on dark (rules live in
   restyle-preview.css). Lighter chip text + slightly stronger wash. */
html[data-theme="dark"] body[data-restyle="c5"]  { --rsp-chip-bg: rgba(244,116,33,.18); --rsp-chip-fg: #fdba74; --rsp-chip-bubble: #F47421; --rsp-chip-bubble-fg: #fff;     --rsp-chip-border: transparent; }
html[data-theme="dark"] body[data-restyle="c5g"] { --rsp-chip-bg: rgba(248,169,0,.18);  --rsp-chip-fg: #fde68a; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; }
html[data-theme="dark"] body[data-restyle="c5n"] { --rsp-chip-bg: rgba(236,123,41,.16); --rsp-chip-fg: #fdba74; --rsp-chip-bubble: #ec7b29; --rsp-chip-bubble-fg: #fff;     --rsp-chip-border: #ec7b29; }
html[data-theme="dark"] body[data-restyle="sf"]  {
    --rsp-accent: #F8A900; --rsp-accent-2: #ffc233; --rsp-on-accent: #201B16;
    --rsp-bubble: rgba(32,27,22,.22); --rsp-bubble-fg: #201B16; --rsp-sec-border: rgba(248,169,0,.28);
    --rsp-chip-bg: rgba(248,169,0,.18); --rsp-chip-fg: #fde68a; --rsp-chip-bubble: #F8A900;
    --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent;
}

/* R5-C3-followup: dark geltona chip vars for the two new layouts. */
html[data-theme="dark"] body[data-restyle="c5b"], html[data-theme="dark"] body[data-restyle="c5p"] { --rsp-chip-bg: rgba(248,169,0,.18); --rsp-chip-fg: #fde68a; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; }

/* HIVE-96 sf: dark stylesheet loads after light, so repeat the chip/subsection
   surfaces at dark specificity while keeping the same yellow active chrome. */
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section {
    border-left: 3px solid var(--rsp-chip-bubble) !important;
    background: var(--surface) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section-header,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border, #332b22) !important;
    padding: 9px 14px !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section-title,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--rsp-chip-bg) !important;
    color: var(--rsp-chip-fg) !important;
    border: 1px solid var(--rsp-chip-border) !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section-title i { display: none !important; }
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-chip-fg) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-chip-fg) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .activity-landing-card::before { background: var(--rsp-accent) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .activity-landing-card:hover {
    border-color: var(--rsp-accent) !important;
    box-shadow: 0 6px 20px rgba(248, 169, 0, .20) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .activity-landing-card-icon {
    background: #201B16 !important;
    color: var(--rsp-accent) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .activity-landing-card-icon i { color: var(--rsp-accent) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section-header .cdv-section-number,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-number {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    background: var(--rsp-chip-bubble) !important;
    color: var(--rsp-chip-bubble-fg) !important;
    font-size: 12.5px !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .cdv-subgroup-title,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-subsection-title {
    background: rgba(248,169,0,.16) !important;
    border-left-color: #F8A900 !important;
    color: #fde68a !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-subsection-title {
    border-left: 3px solid #F8A900 !important;
    border-bottom-color: rgba(248,169,0,.25) !important;
}

/* ── #458 dark twins — gray container → --surface-2, cream header band → translucent gold
   + pale-gold ink (the #441 band convention). Placed last to win the generic
   body[data-restyle] container rule near the top of this file. */
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-upload-box,
html[data-theme="dark"] body[data-restyle="sf"] .attachment-type-card {
    background: var(--surface-2, #241f18) !important;
    border-color: var(--border, #332b22) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header {
    background: rgba(248, 169, 0, 0.16) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header:hover { background: rgba(248, 169, 0, 0.22) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header .attachment-card-title { color: #fde68a !important; }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header .attachment-card-chevron { color: #fde68a !important; }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header .attachment-card-file-count { color: rgba(253, 230, 138, 0.75) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header .attachment-header-upload-icon { color: #fde68a; }
/* row hover + "Internal only" chip (light amber #fef3c7/#92400e had no dark twin — light island). */
html[data-theme="dark"] body[data-restyle="sf"] .attachment-file-row:hover { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-file-row[data-thumb-selected="true"] { background: rgba(240, 138, 42, 0.12); }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-internal-badge {
    background: rgba(248, 169, 0, 0.16) !important;
    color: #fde68a !important;
}

/* #458 item 7 — Select all active state, dark twin per the filter-chip convention
   (theme.css): #EC7B29 border, brightened #F79638 text, translucent orange wash. */
html[data-theme="dark"] .attachment-bulk-select-toggle.is-active {
    background: rgba(236, 123, 41, 0.14);
    color: #F79638;
    border-color: #EC7B29;
}

/* ── #461 dark twin — cost-section boundary headings. Solid brand fills keep their hue
   in dark (repo convention), so the band stays #F8A900 with ink text/controls; only the
   focus ring flips to pale gold so it reads against the dark page background. Placed
   LAST so it beats the equal-specificity translucent-gold subsection rules above. */
html[data-theme="dark"] body[data-restyle="sf"] .claims-cost-boundary-title {
    background: var(--rsp-brand-yellow, #F8A900) !important;
    color: #201B16 !important;
    border-left-color: var(--rsp-brand-yellow, #F8A900) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claims-cost-boundary-title * { color: #201B16 !important; }
html[data-theme="dark"] body[data-restyle="sf"] .claims-cost-boundary-title .claims-subsection-filled-dot {
    background: #201B16 !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claims-cost-boundary-title:focus-visible {
    outline: 2px solid #fde68a !important;
    outline-offset: 2px;
}