/* ════════════════════════════════════════════════════════════════════ LEFT-SECTION RESTYLE — interactive preview themes (2026-05-31, extended 2026-06-03) Dev-only / opt-in. Loaded on /Claims/Details + /Claims/Edit in Development, or on test/prod via ?restylepreview=1 (sticky cookie). A floating switcher sets three independent attributes on : • data-restyle="N" — section/field/document THEME (1–9; absent = Current) • data-dynfields="modern" — render repeating money/cargo blocks as the modern invoice-table + summary-card look • data-cargo="tabs" — show cargo/vehicle items as a tab strip (JS-built) Each is scoped so "Current" (no attribute) is completely untouched. Goal (business): all-orange section headers, tighter field spacing, daintier Documents cards, and a compact/dense/modern left column with less scroll. Overrides the real .cdv-* (Details readonly), .claims-wizard-* (Edit + inline editor) and document cards. Orange family: #e8780a / #a95505 / #fff7ed / #fed7aa. THEME-AWARE ACCENT TOKENS — the dynamic-fields + tabs layers read these vars so their colour follows whichever theme is active. Defaults are the orange family; each theme can override them below. ═══════════════════════════════════════════════════════════════════════ */ body { --rsp-accent: #e8780a; /* primary accent fill */ --rsp-accent-dark: #a95505; /* accent text on light surfaces */ --rsp-soft: #fff7ed; /* soft accent-tinted background */ --rsp-line: #fed7aa; /* accent-tinted border */ --rsp-line-soft: #e9edf3; /* neutral hairline border */ --rsp-mut: #7a8597; /* muted label text */ } /* ───────────────────────── SHARED BASE (all themes) ───────────────────── */ /* 1) ALL section titles orange — beat the per-section-ID colour rules and the inline --cdv-accent on the read-only title pill. */ body[data-restyle] .cdv-section-title { background: #e8780a !important; } body[data-restyle] .cdv-section-header .cdv-section-number, body[data-restyle] .claims-wizard-section-number { background: #e8780a !important; color: #fff !important; } body[data-restyle] .claim-details-v2 .claims-wizard-section-title, body[data-restyle] .claims-wizard-section-title, body[data-restyle] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: #a95505 !important; } /* 2) Compact: tighten read-only definition-list rows + edit form rows. */ body[data-restyle] .cdv-dl { gap: 3px 20px !important; } body[data-restyle] .cdv-dl dt, body[data-restyle] .cdv-dl dd { padding: 4px 0 !important; } body[data-restyle] .cdv-section-body { padding: 14px 18px !important; } body[data-restyle] .cdv-section { margin-bottom: 10px !important; } body[data-restyle] .cdv-section-body .cdv-subgroup { margin-bottom: 12px !important; } body[data-restyle] .claims-wizard-form-row { margin-bottom: 9px !important; } body[data-restyle] .claims-wizard-section-body { padding-top: 12px !important; padding-bottom: 12px !important; } /* The editable subsection-title band (e.g. "Finansinė informacija" in the inline section editor) uses `margin: 4px -24px 0` to span edge-to-edge, ASSUMING the section body has ~24px side padding. Restyle themes shrink that padding (theme 8 → 0, theme 1 → 4px), so the -24px margin over-pulls the band left and the section's overflow:hidden clips its first letter. Neutralize the side margins under restyle so the band insets within whatever padding the active theme uses — never clipped, on any pipeline or variant. */ body[data-restyle] .claims-wizard-subsection-title { margin-left: 0 !important; margin-right: 0 !important; } /* 3) Daintier Documents — smaller/lighter/thinner cards, small light chevron, smaller category title, narrower columns. Applies to both surfaces. */ body[data-restyle] .claims-wizard-upload-grid { gap: 8px !important; } body[data-restyle] .claims-wizard-upload-box, body[data-restyle] .attachment-type-card { border: 1px solid #eef1f5 !important; border-radius: 9px !important; box-shadow: none !important; } body[data-restyle] .attachment-card-header { padding: 8px 12px !important; gap: 8px !important; } body[data-restyle] .attachment-card-chevron { font-size: 9px !important; color: #c4c9d4 !important; width: 9px !important; } body[data-restyle] .attachment-card-title { font-size: 12.5px !important; font-weight: 600 !important; } body[data-restyle] .attachment-card-file-count { font-size: 10.5px !important; color: #9aa1ad !important; } body[data-restyle] .attachment-header-upload-btn { transform: scale(0.85); opacity: 0.65; } body[data-restyle] .attachment-header-upload-btn:hover { opacity: 1; } /* documents section: no special-casing — the shared + per-theme .cdv-section-title / .claims-wizard-section-title rules (with !important) already override the app's purple accent and apply the same pill-or-transparent treatment as every other section. (A previous forced orange background here made documents the only section with a coloured pill under the transparent-title themes.) */ /* ───────────────────────── 1 · MERCURY (ultra-flat hairline) ──────────── */ body[data-restyle="1"] .cdv-section, body[data-restyle="1"] .claims-wizard-section { border: none !important; border-top: 2px solid #e8780a !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } body[data-restyle="1"] .cdv-section-header, body[data-restyle="1"] .claims-wizard-section-header { background: transparent !important; border-bottom: none !important; padding: 12px 4px 6px !important; } body[data-restyle="1"] .cdv-section-title { background: transparent !important; color: #a95505 !important; padding: 0 !important; font-size: 12px !important; } body[data-restyle="1"] .cdv-section-body, body[data-restyle="1"] .claims-wizard-section-body { padding-left: 4px !important; padding-right: 4px !important; } body[data-restyle="1"] .claims-wizard-upload-box, body[data-restyle="1"] .attachment-type-card { border: none !important; border-bottom: 1px solid #eef1f5 !important; border-radius: 0 !important; } /* ───────────────────────── 2 · STRIPE (soft cards, left accent) ───────── */ body[data-restyle="2"] .cdv-section, body[data-restyle="2"] .claims-wizard-section { border: 1px solid #edf0f4 !important; border-left: 3px solid #e8780a !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(15,23,42,.05) !important; } body[data-restyle="2"] .cdv-section-header, body[data-restyle="2"] .claims-wizard-section-header { background: #fff !important; border-bottom: 1px solid #f1f3f7 !important; } body[data-restyle="2"] .cdv-section-title { border-radius: 7px !important; } /* ───────────────────────── 3 · RAMP / BREX (dense data-grid) ──────────── */ body[data-restyle="3"] { --rsp-accent: #c2410c; --rsp-accent-dark: #c2410c; } body[data-restyle="3"] .cdv-section, body[data-restyle="3"] .claims-wizard-section { border: 1px solid #e6e9ef !important; border-radius: 8px !important; box-shadow: none !important; margin-bottom: 8px !important; } body[data-restyle="3"] .cdv-section-header, body[data-restyle="3"] .claims-wizard-section-header { background: #fff !important; border-bottom: 1px solid #eef1f5 !important; padding: 9px 14px !important; } body[data-restyle="3"] .cdv-section-title { background: transparent !important; color: #c2410c !important; padding: 0 !important; font-size: 10.5px !important; letter-spacing: .8px !important; } body[data-restyle="3"] .cdv-dl { gap: 0 18px !important; } body[data-restyle="3"] .cdv-dl dt, body[data-restyle="3"] .cdv-dl dd { padding: 5px 0 !important; font-size: 12px !important; } body[data-restyle="3"] .cdv-section-body { padding: 8px 14px !important; } body[data-restyle="3"] .claims-wizard-upload-box, body[data-restyle="3"] .attachment-type-card { border: 1px solid #e6e9ef !important; border-radius: 7px !important; } body[data-restyle="3"] .attachment-card-header { padding: 6px 10px !important; } body[data-restyle="3"] .attachment-card-title { font-size: 11.5px !important; } /* ───────────────────────── 4 · LINEAR / NOTION (tinted, rounded) ──────── */ body[data-restyle="4"] { --rsp-accent: #f6a64d; --rsp-accent-dark: #b96312; } body[data-restyle="4"] .cdv-section, body[data-restyle="4"] .claims-wizard-section { border: 1px solid #f0eee9 !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(15,23,42,.04) !important; } body[data-restyle="4"] .cdv-section-header, body[data-restyle="4"] .claims-wizard-section-header { background: #fff7ed !important; border-bottom: none !important; } body[data-restyle="4"] .cdv-section-title { background: #f6a64d !important; border-radius: 999px !important; padding: 4px 12px !important; } body[data-restyle="4"] .claims-wizard-upload-box, body[data-restyle="4"] .attachment-type-card { border: 1px solid #f0eee9 !important; border-radius: 12px !important; } /* ───────────────────────── 5 · BRANDED (filled orange headers) ────────── */ body[data-restyle="5"] .cdv-section, body[data-restyle="5"] .claims-wizard-section { border: 1px solid #f1e4d6 !important; border-left: 3px solid #e8780a !important; border-radius: 11px !important; box-shadow: 0 1px 2px rgba(15,23,42,.05) !important; } body[data-restyle="5"] .cdv-section-header, body[data-restyle="5"] .claims-wizard-section-header { background: linear-gradient(90deg,#e8780a,#f08a2a) !important; border-bottom: none !important; /* Bugtracker #400: slimmer branded header band (merged Stripe+Branded). */ padding: 7px 14px !important; } body[data-restyle="5"] .cdv-section-title { background: transparent !important; color: #fff !important; } body[data-restyle="5"] .cdv-section-header .cdv-section-number, body[data-restyle="5"] .claims-wizard-section-number { background: rgba(255,255,255,.25) !important; color: #fff !important; } body[data-restyle="5"] .claim-details-v2 .claims-wizard-section-title, body[data-restyle="5"] .claims-wizard-section-title, body[data-restyle="5"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: #fff !important; } body[data-restyle="5"] .claims-wizard-section-header .claims-wizard-section-chevron { color: #fff !important; } body[data-restyle="5"] .attachment-file-row { background: #fff7ed !important; } /* ───────────────────────── 6 · COMPACT (max density, least scroll) ────── */ body[data-restyle="6"] .cdv-section, body[data-restyle="6"] .claims-wizard-section { border: 1px solid #e6e9ef !important; border-radius: 6px !important; box-shadow: none !important; margin-bottom: 6px !important; } body[data-restyle="6"] .cdv-section-header, body[data-restyle="6"] .claims-wizard-section-header { background: #fff !important; border-bottom: 1px solid #eef1f5 !important; padding: 6px 12px !important; } body[data-restyle="6"] .cdv-section-title { background: transparent !important; color: #a95505 !important; padding: 0 !important; font-size: 10px !important; letter-spacing: .7px !important; text-transform: uppercase !important; } body[data-restyle="6"] .cdv-section-body { padding: 6px 12px !important; } body[data-restyle="6"] .claims-wizard-section-body { padding-top: 7px !important; padding-bottom: 7px !important; } body[data-restyle="6"] .cdv-dl { gap: 0 16px !important; } body[data-restyle="6"] .cdv-dl dt, body[data-restyle="6"] .cdv-dl dd { padding: 2.5px 0 !important; font-size: 11.5px !important; line-height: 1.3 !important; } body[data-restyle="6"] .claims-wizard-form-row { margin-bottom: 6px !important; } body[data-restyle="6"] .cdv-section { margin-bottom: 6px !important; } body[data-restyle="6"] .attachment-card-header { padding: 5px 10px !important; } body[data-restyle="6"] .attachment-card-title { font-size: 11px !important; } body[data-restyle="6"] .claims-wizard-upload-box, body[data-restyle="6"] .attachment-type-card { border-radius: 6px !important; } /* ───────────────────────── 7 · SLATE (neutral surfaces, dense, modern) ── */ body[data-restyle="7"] .cdv-section, body[data-restyle="7"] .claims-wizard-section { border: 1px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; background: #fff !important; } body[data-restyle="7"] .cdv-section-header, body[data-restyle="7"] .claims-wizard-section-header { background: #f8fafc !important; border-bottom: 1px solid #eef2f7 !important; padding: 9px 14px !important; } body[data-restyle="7"] .cdv-section-title { background: transparent !important; color: #a95505 !important; padding: 0 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .4px !important; } body[data-restyle="7"] .cdv-section-body { padding: 10px 14px !important; } body[data-restyle="7"] .cdv-dl dt, body[data-restyle="7"] .cdv-dl dd { padding: 3.5px 0 !important; font-size: 12px !important; } body[data-restyle="7"] .claims-wizard-upload-box, body[data-restyle="7"] .attachment-type-card { border: 1px solid #e2e8f0 !important; border-radius: 10px !important; } /* ───────────────────────── 8 · GRID (data-grid, zebra rows, mono nums) ── */ body[data-restyle="8"] .cdv-section, body[data-restyle="8"] .claims-wizard-section { border: 1px solid #e6e9ef !important; border-radius: 8px !important; box-shadow: none !important; margin-bottom: 8px !important; } body[data-restyle="8"] .cdv-section-header, body[data-restyle="8"] .claims-wizard-section-header { background: #fafbfc !important; border-bottom: 1px solid #e6e9ef !important; padding: 8px 14px !important; } body[data-restyle="8"] .cdv-section-title { background: transparent !important; color: #a95505 !important; padding: 0 !important; font-size: 10.5px !important; letter-spacing: .7px !important; text-transform: uppercase !important; } body[data-restyle="8"] .cdv-section-body { padding: 0 0 6px !important; } /* zebra: each dt+dd pair sits on alternating tints via row separators */ body[data-restyle="8"] .cdv-dl { gap: 0 !important; } body[data-restyle="8"] .cdv-dl dt, body[data-restyle="8"] .cdv-dl dd { padding: 6px 14px !important; font-size: 12px !important; border-bottom: 1px solid #f3f5f9 !important; } body[data-restyle="8"] .cdv-dl dd { font-variant-numeric: tabular-nums !important; } body[data-restyle="8"] .cdv-dl dt { color: #6b7280 !important; } body[data-restyle="8"] .attachment-type-card, body[data-restyle="8"] .claims-wizard-upload-box { border-radius: 6px !important; } /* ───────────────────────── 9 · MIDNIGHT (dark headers, modern) ────────── */ body[data-restyle="9"] .cdv-section, body[data-restyle="9"] .claims-wizard-section { border: 1px solid #e6e9ef !important; border-radius: 11px !important; box-shadow: 0 1px 3px rgba(15,23,42,.06) !important; overflow: hidden !important; } body[data-restyle="9"] .cdv-section-header, body[data-restyle="9"] .claims-wizard-section-header { background: #1f2937 !important; border-bottom: none !important; padding: 10px 16px !important; } body[data-restyle="9"] .cdv-section-title { background: transparent !important; color: #fff !important; padding: 0 !important; } body[data-restyle="9"] .cdv-section-header .cdv-section-number, body[data-restyle="9"] .claims-wizard-section-number { background: #e8780a !important; color: #fff !important; } body[data-restyle="9"] .claim-details-v2 .claims-wizard-section-title, body[data-restyle="9"] .claims-wizard-section-title, body[data-restyle="9"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: #fff !important; } body[data-restyle="9"] .claims-wizard-section-header .claims-wizard-section-chevron, body[data-restyle="9"] .cdv-section-header .cdv-section-chevron { color: #cbd5e1 !important; } body[data-restyle="9"] #section-documents .cdv-section-title, body[data-restyle="9"] #section-documents .claims-wizard-section-title { background: transparent !important; color: #fff !important; } body[data-restyle="9"] .claims-wizard-upload-box, body[data-restyle="9"] .attachment-type-card { border: 1px solid #eef1f5 !important; border-radius: 10px !important; } /* ───────────── 10 · SIDEBAR (mirror the restyled right sidebar) ──────────── Same visual language as the already-restyled right sidebar (commit ac538874): 18px white cards, soft-orange header band, 24px circular orange number badge like the step pills, accent #ec7b29 / soft #fff8ee. Comfortable density. */ body[data-restyle="10"] { --rsp-accent: #ec7b29; --rsp-accent-dark: #b45309; --rsp-soft: #fff8ee; --rsp-line: #ffe2c2; } body[data-restyle="10"] .cdv-section, body[data-restyle="10"] .claims-wizard-section { border: 1px solid #e8edf3 !important; border-radius: 18px !important; box-shadow: none !important; overflow: hidden !important; margin-bottom: 12px !important; background: #fff !important; } body[data-restyle="10"] .cdv-section-header, body[data-restyle="10"] .claims-wizard-section-header { background: #fff8ee !important; border-bottom: 1px solid #ffe2c2 !important; padding: 12px 18px !important; } body[data-restyle="10"] .cdv-section-title { background: transparent !important; color: #b45309 !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; } body[data-restyle="10"] .cdv-section-header .cdv-section-number, body[data-restyle="10"] .claims-wizard-section-number { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: #ec7b29 !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; } body[data-restyle="10"] .cdv-section-body { padding: 16px 18px !important; } body[data-restyle="10"] .cdv-dl { gap: 6px 20px !important; } body[data-restyle="10"] .cdv-dl dt, body[data-restyle="10"] .cdv-dl dd { padding: 5px 0 !important; } body[data-restyle="10"] .claims-wizard-upload-box, body[data-restyle="10"] .attachment-type-card { border: 1px solid #e8edf3 !important; border-radius: 14px !important; } /* ───────────── 11 · SIDEBAR COMPACT (sidebar language, dense, less scroll) ── */ body[data-restyle="11"] { --rsp-accent: #ec7b29; --rsp-accent-dark: #b45309; --rsp-soft: #fff8ee; --rsp-line: #ffe2c2; } body[data-restyle="11"] .cdv-section, body[data-restyle="11"] .claims-wizard-section { border: 1px solid #e8edf3 !important; border-radius: 14px !important; box-shadow: none !important; overflow: hidden !important; margin-bottom: 8px !important; background: #fff !important; } body[data-restyle="11"] .cdv-section-header, body[data-restyle="11"] .claims-wizard-section-header { background: #fff8ee !important; border-bottom: 1px solid #ffe2c2 !important; padding: 8px 14px !important; } body[data-restyle="11"] .cdv-section-title { background: transparent !important; color: #b45309 !important; padding: 0 !important; font-size: 11.5px !important; font-weight: 600 !important; } body[data-restyle="11"] .cdv-section-header .cdv-section-number, body[data-restyle="11"] .claims-wizard-section-number { width: 20px !important; height: 20px !important; border-radius: 50% !important; background: #ec7b29 !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; } body[data-restyle="11"] .cdv-section-body { padding: 9px 14px !important; } body[data-restyle="11"] .claims-wizard-section-body { padding-top: 9px !important; padding-bottom: 9px !important; } body[data-restyle="11"] .cdv-dl { gap: 1px 18px !important; } body[data-restyle="11"] .cdv-dl dt, body[data-restyle="11"] .cdv-dl dd { padding: 3px 0 !important; font-size: 12px !important; } body[data-restyle="11"] .claims-wizard-form-row { margin-bottom: 7px !important; } body[data-restyle="11"] .attachment-card-header { padding: 6px 11px !important; } body[data-restyle="11"] .attachment-card-title { font-size: 11.5px !important; } body[data-restyle="11"] .claims-wizard-upload-box, body[data-restyle="11"] .attachment-type-card { border: 1px solid #e8edf3 !important; border-radius: 11px !important; } /* ───────────── 12 · INLINE (different LAYOUT: horizontal label/field) ────── Simple "label + single field" rows switch from stacked (label above input) to a horizontal label-left / value-right grid — roughly halves each field's height, so the Edit column needs much less scroll. Composite/wide rows (date+time, radio groups, multiselect, currency, textarea) deliberately STAY in their default stacked full-width layout: they don't survive being squeezed into a narrow value cell (the date sub-field clips, badges overflow). The minmax(0,1fr) value track prevents any control from overflowing the card. */ body[data-restyle="12"] .cdv-section, body[data-restyle="12"] .claims-wizard-section { border: 1px solid #e6e9ef !important; border-radius: 10px !important; box-shadow: none !important; margin-bottom: 9px !important; } body[data-restyle="12"] .cdv-section-header, body[data-restyle="12"] .claims-wizard-section-header { background: #fff !important; border-bottom: 1px solid #eef1f5 !important; padding: 9px 14px !important; } body[data-restyle="12"] .cdv-section-title { background: transparent !important; color: #a95505 !important; padding: 0 !important; font-size: 11.5px !important; letter-spacing: .4px !important; font-weight: 700 !important; } body[data-restyle="12"] .cdv-section-body { padding: 10px 14px !important; } body[data-restyle="12"] .cdv-dl dt, body[data-restyle="12"] .cdv-dl dd { padding: 4px 0 !important; } body[data-restyle="12"] .claims-wizard-upload-box, body[data-restyle="12"] .attachment-type-card { border: 1px solid #e6e9ef !important; border-radius: 9px !important; } /* inline rows — ONLY simple ones (exclude composite/wide controls) */ body[data-restyle="12"] .claims-wizard-form-row:not(:has(textarea)):not(:has(.claims-wizard-date-input)):not(:has(.claims-wizard-radio-group)):not(:has(.multiselect-wrapper)):not(:has(.claims-wizard-currency-input)) { display: grid !important; grid-template-columns: 150px minmax(0, 1fr) !important; gap: 8px 12px !important; align-items: center !important; margin-bottom: 7px !important; } body[data-restyle="12"] .claims-wizard-form-row > label { margin: 0 !important; font-size: 12px !important; color: #6b7280 !important; } body[data-restyle="12"] .claims-wizard-form-row > input[type="text"], body[data-restyle="12"] .claims-wizard-form-row > input[type="number"], body[data-restyle="12"] .claims-wizard-form-row > input:not([type]) { max-width: 460px !important; } /* ───────────── 13 · TRIPLE (different LAYOUT: 3-up details + compact inline) ─ The Details definition-list goes from 2 field-pairs per row to 3 — a real layout change that cuts Details scroll noticeably. Edit reuses the same robust inline-label rows as theme 12 but tighter. (An earlier draft gridded the whole section body into 2 columns, but .claims-wizard-section-body is not a uniform row container across pipelines, so it broke — everything crammed left with an empty right gutter. Per-row inline is reliable everywhere.) */ body[data-restyle="13"] .cdv-section, body[data-restyle="13"] .claims-wizard-section { border: 1px solid #e6e9ef !important; border-radius: 8px !important; box-shadow: none !important; margin-bottom: 7px !important; } body[data-restyle="13"] .cdv-section-header, body[data-restyle="13"] .claims-wizard-section-header { background: #fafbfc !important; border-bottom: 1px solid #e6e9ef !important; padding: 7px 13px !important; } body[data-restyle="13"] .cdv-section-title { background: transparent !important; color: #a95505 !important; padding: 0 !important; font-size: 10px !important; letter-spacing: .7px !important; text-transform: uppercase !important; } body[data-restyle="13"] .cdv-section-body { padding: 8px 13px !important; } /* Details: 3 field-pairs per row. minmax(0,1fr) value tracks let the columns shrink to fit the card so long values (date-time, money) never overflow past the right edge; overflow-wrap lets such values wrap inside their own cell instead of being clipped. */ body[data-restyle="13"] .cdv-dl { grid-template-columns: 104px minmax(0, 1fr) 104px minmax(0, 1fr) 104px minmax(0, 1fr) !important; gap: 2px 14px !important; } body[data-restyle="13"] .cdv-dl dt, body[data-restyle="13"] .cdv-dl dd { padding: 3px 0 !important; font-size: 11.5px !important; } body[data-restyle="13"] .cdv-dl dd { overflow-wrap: anywhere !important; } body[data-restyle="13"] .cdv-dl dd.cdv-full { grid-column: 2 / -1 !important; } body[data-restyle="13"] .cdv-dl dt.cdv-full { grid-column: 1 !important; } /* Edit: compact inline-label rows (simple rows only; composite stays stacked) */ body[data-restyle="13"] .claims-wizard-form-row:not(:has(textarea)):not(:has(.claims-wizard-date-input)):not(:has(.claims-wizard-radio-group)):not(:has(.multiselect-wrapper)):not(:has(.claims-wizard-currency-input)) { display: grid !important; grid-template-columns: 130px minmax(0, 1fr) !important; gap: 5px 10px !important; align-items: center !important; margin-bottom: 6px !important; } body[data-restyle="13"] .claims-wizard-form-row > label { margin: 0 !important; font-size: 11.5px !important; color: #6b7280 !important; } body[data-restyle="13"] .claims-wizard-form-row > input[type="text"], body[data-restyle="13"] .claims-wizard-form-row > input[type="number"], body[data-restyle="13"] .claims-wizard-form-row > input:not([type]) { max-width: 420px !important; } body[data-restyle="13"] .attachment-card-header { padding: 5px 10px !important; } body[data-restyle="13"] .attachment-card-title { font-size: 11px !important; } /* ════════════════════════════════════════════════════════════════════════ DYNAMIC FIELDS — MODERN (body[data-dynfields="modern"]) Repeating money rows (payouts / costs) → invoice-style tabular rows inside a bordered card; cargo/vehicle blocks → rounded summary cards with a soft accent header. Colour follows the active theme via the --rsp-* tokens. Purely visual — inputs stay editable, no markup/behaviour change. ═══════════════════════════════════════════════════════════════════════════ */ /* --- payout line-items (edit) --- */ body[data-dynfields="modern"] .claims-wizard-payout-container, body[data-dynfields="modern"] .additional-costs-container { border: 1px solid var(--rsp-line-soft) !important; border-radius: 10px !important; background: #fff !important; overflow: hidden !important; /* breathing room before the next form row (Amount reduced sat flush under the card) */ margin-bottom: 16px !important; } body[data-dynfields="modern"] .payout-committed-rows .claims-wizard-payout-row, body[data-dynfields="modern"] .dp-payout-committed-rows .claims-wizard-payout-row { border-bottom: 1px solid #f3f5f9 !important; margin: 0 !important; padding: 0 !important; } /* Modern committed payout row → invoice line-item. The default row is a 160px|fields grid with a centered 44px label; promote the inner .payout-fields with display:contents so label + amount + date + ✕ become four grid columns that line up with the JS-injected header (.rsp-li-head-payout) and total footer (.rsp-li-foot-payout) sharing the same template. */ body[data-dynfields="modern"] .claims-wizard-payout-row .claims-wizard-form-row-inline, body[data-dynfields="modern"] .rsp-li-head-payout, body[data-dynfields="modern"] .rsp-li-foot-payout { display: grid !important; grid-template-columns: minmax(0, 1fr) 150px 150px 30px !important; align-items: center !important; gap: 6px 10px !important; padding: 8px 12px !important; } body[data-dynfields="modern"] .claims-wizard-payout-row .claims-wizard-payout-fields { display: contents !important; } body[data-dynfields="modern"] .claims-wizard-payout-label { display: block !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; text-align: left !important; justify-content: flex-start !important; line-height: 1.3 !important; position: relative !important; padding-left: 14px !important; font-weight: 600 !important; color: #334155 !important; background: transparent !important; border: none !important; } body[data-dynfields="modern"] .claims-wizard-payout-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--rsp-accent); } /* JS-injected line-item header / total footer / per-card amount. These are DISPLAY-ONLY nodes (no form inputs) added by buildModern() and removed by clearModern(), so submission is unaffected and the toggle reverts cleanly. */ body[data-dynfields="modern"] .rsp-li-head { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .5px !important; color: var(--rsp-mut) !important; font-weight: 700 !important; border-bottom: 1px solid var(--rsp-line-soft) !important; padding-top: 6px !important; padding-bottom: 6px !important; } body[data-dynfields="modern"] .rsp-li-foot { border-top: 2px solid var(--rsp-line-soft) !important; font-weight: 700 !important; font-size: 14px !important; } body[data-dynfields="modern"] .rsp-li-foot .rsp-li-foot-amt { color: var(--rsp-accent-dark) !important; font-variant-numeric: tabular-nums !important; font-weight: 800 !important; } body[data-dynfields="modern"] .claims-wizard-cargo-block-header, body[data-dynfields="modern"] .cdv-cargo-item-header { display: flex !important; align-items: center !important; } body[data-dynfields="modern"] .rsp-card-amount { margin-left: auto !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; color: var(--rsp-accent) !important; font-size: 13px !important; padding-left: 12px !important; white-space: nowrap !important; } body[data-dynfields="modern"] .payout-amount, body[data-dynfields="modern"] .payout-input-amount { font-variant-numeric: tabular-nums !important; font-weight: 700 !important; } body[data-dynfields="modern"] .btn-add-payout, body[data-dynfields="modern"] .btn-add-additional-cost, body[data-dynfields="modern"] .btn-add-cmr-vehicle, body[data-dynfields="modern"] .btn-add-cmr-standard { border: 1px dashed var(--rsp-line) !important; background: var(--rsp-soft) !important; color: var(--rsp-accent-dark) !important; border-radius: 8px !important; } /* --- cost rows (edit) → tabular --- */ body[data-dynfields="modern"] .cargo-cost-row { border-bottom: 1px solid #f3f5f9 !important; padding: 6px 12px !important; margin: 0 !important; } body[data-dynfields="modern"] .damaged-property-cost-rows, body[data-dynfields="modern"] .payout-committed-rows { background: #fff !important; } /* --- payout / cost rows (details readonly) → tabular --- */ body[data-dynfields="modern"] .cdv-payout-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 7px 12px !important; border-bottom: 1px solid #f3f5f9 !important; } body[data-dynfields="modern"] .cdv-payout-value { font-variant-numeric: tabular-nums !important; font-weight: 700 !important; color: var(--rsp-accent-dark) !important; } /* --- cargo / vehicle items → rounded summary cards w/ soft accent header --- */ body[data-dynfields="modern"] .cargo-item, body[data-dynfields="modern"] .cdv-cargo-item { border: 1px solid var(--rsp-line-soft) !important; border-radius: 11px !important; overflow: hidden !important; margin-bottom: 10px !important; box-shadow: none !important; } body[data-dynfields="modern"] .claims-wizard-cargo-block-header, body[data-dynfields="modern"] .cdv-cargo-item-header { background: var(--rsp-soft) !important; border-bottom: 1px solid var(--rsp-line) !important; padding: 9px 14px !important; } body[data-dynfields="modern"] .claims-wizard-cargo-block-title, body[data-dynfields="modern"] .cdv-cargo-item-header { color: var(--rsp-accent-dark) !important; font-weight: 700 !important; font-size: 13px !important; } body[data-dynfields="modern"] .cdv-cargo-item-header i { color: var(--rsp-accent) !important; } body[data-dynfields="modern"] .claims-wizard-cargo-block-body { padding: 13px 14px !important; } /* ════════════════════════════════════════════════════════════════════════ CARGO / VEHICLES — TABS (body[data-cargo="tabs"], strip built by JS) The switcher JS inserts a .rsp-cargo-tabs bar before each group of cargo/vehicle items and shows one at a time. Colour follows the theme. ═══════════════════════════════════════════════════════════════════════════ */ .rsp-cargo-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--rsp-line-soft); } .rsp-cargo-tab { border: 1px solid var(--rsp-line-soft); background: #fff; color: var(--rsp-mut); border-radius: 8px; padding: 5px 13px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; line-height: 1.2; } .rsp-cargo-tab:hover { border-color: var(--rsp-line); background: var(--rsp-soft); } .rsp-cargo-tab.rsp-tab-active { background: var(--rsp-soft); border-color: var(--rsp-accent); color: var(--rsp-accent-dark); } .rsp-cargo-tab .rsp-tab-badge { color: var(--rsp-accent-dark); opacity: .7; margin-left: 6px; font-weight: 700; } /* Non-active items are hidden via a CLASS (not inline display) so we never fight the real cargo-type toggle, which hides the non-selected type via inline display:none. An item is visible only if BOTH agree. */ body[data-cargo="tabs"] .rsp-tab-hidden { display: none !important; } /* in tabs mode the collapse chevron is redundant; keep the body open */ body[data-cargo="tabs"] .btn-collapse-cargo-block { display: none !important; } body[data-cargo="tabs"] .cargo-item .claims-wizard-cargo-block-body { display: block !important; } /* ── Claims-list QUICK PREVIEW (owner 2026-07-05): the summary panel follows the active restyle theme so the list preview matches Details/Edit. ───────────── */ body[data-restyle] .claim-summary-panel { border: 1px solid #edf0f4 !important; border-left: 3px solid #e8780a !important; border-radius: 11px !important; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.05) !important; } body[data-restyle="5"] .claim-summary-panel { border-color: #f1e4d6 !important; border-left-color: #e8780a !important; } /* C5.1 (owner round-2): the intense orange gradient header was "way too much on the eyes" — toned to a pale orange wash with legible brand-orange text. Layout + the left brand stripe kept; dark mode is untouched (this only targets data-restyle="5"). */ body[data-restyle="5"] .claim-summary-header { background: linear-gradient(90deg,#fff3e8,#fffaf5) !important; padding: 7px 14px !important; } body[data-restyle="5"] .claim-summary-header .claim-summary-number { color: #b45309 !important; } body[data-restyle="5"] .claim-summary-header .claim-summary-status { background: rgba(232,120,10,.14) !important; color: #9a3412 !important; }