/* ════════════════════════════════════════════════════════════════════ 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 { /* R5-C5: brand token layer (brandbook Insurance Bee) — shared by the C2/C3 variants. */ --rsp-brand: #F47421; /* brand orange (fills only) */ --rsp-brand-yellow: #F8A900; /* brand yellow */ --rsp-cream: #EAE7D8; /* brand off-white / cream */ --rsp-ink: #201B16; /* brand ink / grey */ --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 */ } /* R5-C5: under any restyle variant the old PEACH wash/border become a warm CREAM wash + a yellow-tint border (kills the off-brand peach). "Current" keeps the peach. */ body[data-restyle] { --rsp-soft: #fdf4e3; --rsp-line: #f0d9a0; } /* ───────────────────────── 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; } /* #431 — the right-rail status card (#cmb-status-card) uniquely wraps its content in a .claims-wizard-section-body (for the inline-edit pencil), so the rule above double-padded it (~24px top/bottom) vs sibling cards (~12px). Zero that extra padding on the sidebar status card ONLY (identified by the .cse-sidebar-section ancestor — no left-column form section has it) so it matches its siblings. Higher specificity than the bare rule above → wins. */ body[data-restyle] .cse-sidebar-section .claims-wizard-section-body { padding-top: 0 !important; padding-bottom: 0 !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; } /* ───────────────────────── 5 · BRANDED (filled orange headers) ────────── */ /* ── R5-C2 (owner round-5): Branded variants — oranžinė (5, default) + geltona (5g). Section headers / number bubbles / left stripes / quick-preview header + the sidebar menu all follow the variant accent via these vars. Orange fills anchor on brand #F47421 (white text); yellow on #F8A900 (ink #201B16 text) per the brandbook contrast rules. C5 extends this token layer. ── */ body[data-restyle="5"] { --rsp-accent: #F47421; --rsp-accent-2: #f89150; --rsp-on-accent: #fff; --rsp-bubble: rgba(255,255,255,.25); --rsp-bubble-fg: #fff; --rsp-sec-border: #f1e4d6; } body[data-restyle="5g"] { --rsp-accent: #F8A900; --rsp-accent-2: #ffc233; --rsp-on-accent: #201B16; --rsp-bubble: rgba(32,27,22,.20); --rsp-bubble-fg: #201B16; --rsp-sec-border: #efe4c9; } body[data-restyle="5"] .cdv-section, body[data-restyle="5g"] .cdv-section, body[data-restyle="5"] .claims-wizard-section, body[data-restyle="5g"] .claims-wizard-section { border: 1px solid var(--rsp-sec-border) !important; border-left: 3px solid var(--rsp-accent) !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="5g"] .cdv-section-header, body[data-restyle="5"] .claims-wizard-section-header, 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; } body[data-restyle="5"] .cdv-section-title, body[data-restyle="5g"] .cdv-section-title { background: transparent !important; color: var(--rsp-on-accent) !important; } body[data-restyle="5"] .cdv-section-header .cdv-section-number, body[data-restyle="5g"] .cdv-section-header .cdv-section-number, body[data-restyle="5"] .claims-wizard-section-number, body[data-restyle="5g"] .claims-wizard-section-number { background: var(--rsp-bubble) !important; color: var(--rsp-bubble-fg) !important; } body[data-restyle="5"] .claim-details-v2 .claims-wizard-section-title, body[data-restyle="5g"] .claim-details-v2 .claims-wizard-section-title, body[data-restyle="5"] .claims-wizard-section-title, body[data-restyle="5g"] .claims-wizard-section-title, body[data-restyle="5"] .claims-wizard-section-title > span:not(.claims-wizard-section-number), body[data-restyle="5g"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-on-accent) !important; } body[data-restyle="5"] .claims-wizard-section-header .claims-wizard-section-chevron, body[data-restyle="5g"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-on-accent) !important; } body[data-restyle="5"] .attachment-file-row, body[data-restyle="5g"] .attachment-file-row { background: #fff7ed !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: none !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 var(--rsp-accent, #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; } /* 5g quick-preview: the branded panel was 5-only — give the yellow variant its own pale yellow-cream wash + ink text (brandbook: black on yellow), stripe already follows the accent. */ body[data-restyle="5g"] .claim-summary-panel { border-color: #efe4c9 !important; border-left-color: #F8A900 !important; } body[data-restyle="5g"] .claim-summary-header { background: linear-gradient(90deg,#fff7e0,#fffdf5) !important; padding: 7px 14px !important; } body[data-restyle="5g"] .claim-summary-header .claim-summary-number { color: #201B16 !important; } body[data-restyle="5g"] .claim-summary-header .claim-summary-status { background: rgba(248,169,0,.20) !important; color: #201B16 !important; } /* HIVE-96 sf quick-preview: the expanded claims-list panel had peach/rose washes from the generic primary-light path. Keep the preview structure, but move the row, header, tabs and document accordion surfaces to Snieguole-final yellow. */ body[data-restyle="sf"] tr.claim-summary-row > td { background: #fff8e8 !important; } /* HIVE-96 (owner 2026-07-08): guarantee the read-only definition-list LABELS wrap inside their fixed .cdv-dl grid track in the narrow quick-preview panel (long LT labels like "Kaltininko transporto priemonės registracijos Nr." must not paint across the value column). The base fix resets the inherited `.data-table td{white-space:nowrap}` on the row td; re-assert it on the labels here and add overflow-wrap so an over-long token breaks instead of overflowing. */ body[data-restyle="sf"] .claim-summary-panel .cdv-dl dt { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; min-width: 0 !important; } body[data-restyle="sf"] .claim-summary-panel { border-color: #efe4c9 !important; border-left-color: var(--rsp-accent) !important; background: #fffdf5 !important; } body[data-restyle="sf"] .claim-summary-header { background: linear-gradient(90deg, #fff2c4, #fffdf5) !important; border-bottom: 1px solid #f0d9a0 !important; margin: -16px -18px 14px !important; padding: 13px 18px !important; } body[data-restyle="sf"] .claim-summary-header .claim-summary-number { color: #201B16 !important; } body[data-restyle="sf"] .claim-summary-header .claim-summary-status { background: rgba(248,169,0,.22) !important; color: #201B16 !important; } body[data-restyle="sf"] .claim-summary-tabs { background: #fff8e8 !important; border-bottom-color: #f0d9a0 !important; margin: 0 -18px 16px !important; padding: 6px 18px 0 !important; } body[data-restyle="sf"] .claim-summary-tab { color: #5f4931 !important; border-bottom-color: transparent !important; } /* Owner 2026-07-08: the ACTIVE tab lifts as a white card too (was a flat pale-yellow fill) — transform + top-radius come from the base [aria-selected] lift rule; here we warm the shadow + keep the brown text/yellow underline as the active accent. */ body[data-restyle="sf"] .claim-summary-tab[aria-selected="true"] { background: #fff !important; color: #8a4a06 !important; border-bottom-color: var(--rsp-accent) !important; font-weight: 700 !important; box-shadow: 0 6px 14px -4px rgba(160, 110, 0, .30) !important; } /* Snieguolė nice-to-have (Variant A) in the brand-yellow (sf) theme: a warm-tinted soft lift on hover/focus. transform + top-radius are inherited from the base .claim-summary-tab:hover rule; here we only warm the shadow + ground. */ body[data-restyle="sf"] .claim-summary-tab:hover, body[data-restyle="sf"] .claim-summary-tab:focus-visible { background: #fff !important; color: #201B16 !important; box-shadow: 0 6px 14px -4px rgba(160, 110, 0, .30) !important; } body[data-restyle="sf"] .claim-summary-loading, body[data-restyle="sf"] .claim-summary-error { color: #5f4931 !important; } body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group { border-color: #efe4c9 !important; } body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title { background: #FEF2D9 !important; color: #201B16 !important; } body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title:hover, body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-row:hover, body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-download:hover { background: rgba(248,169,0,.14) !important; } body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-chevron, body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-name:hover, body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-name:focus-visible, body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-download:hover { color: #8a4a06 !important; } body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-count { background: var(--rsp-accent) !important; color: #201B16 !important; } /* ════════════════════════════════════════════════════════════════════════ R5-C2 MENU WIRING (#404) — the sidebar follows the active variant, and the bee logo + divider go brand-yellow in EVERY restyle variant (reversible via "Current"). Sidebar bg #000 → brand ink #201B16. Nav ICONS stay (recolored). ════════════════════════════════════════════════════════════════════════ */ body[data-restyle="5"] .sidebar, body[data-restyle="5g"] .sidebar { background: #201B16 !important; } /* Top-level active item carries the accent FILL; sub-items get accent TEXT only (no full pill). */ body[data-restyle="5"] .nav-item.active:not(.sub-item), body[data-restyle="5g"] .nav-item.active:not(.sub-item) { background: var(--rsp-accent) !important; color: var(--rsp-on-accent) !important; } body[data-restyle="5"] .nav-item.active:not(.sub-item) .nav-icon, body[data-restyle="5g"] .nav-item.active:not(.sub-item) .nav-icon { stroke: var(--rsp-on-accent) !important; } body[data-restyle="5"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill, body[data-restyle="5g"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill { fill: var(--rsp-on-accent) !important; } body[data-restyle="5"] .nav-item.sub-item.active, body[data-restyle="5g"] .nav-item.sub-item.active { background: transparent !important; color: var(--rsp-accent) !important; font-weight: 700 !important; } body[data-restyle="5"] .nav-item.sub-item.active .nav-icon, body[data-restyle="5g"] .nav-item.sub-item.active .nav-icon { stroke: var(--rsp-accent) !important; } body[data-restyle="5"] .btn-create-claim, body[data-restyle="5g"] .btn-create-claim { background: var(--rsp-accent) !important; color: var(--rsp-on-accent) !important; border-color: var(--rsp-accent) !important; } body[data-restyle="5"] .btn-create-claim:hover, body[data-restyle="5g"] .btn-create-claim:hover { filter: brightness(1.06); color: var(--rsp-on-accent) !important; } /* The create-claim SVG icon paths have no fill attr (default black) — force on-accent so the icon is visible on the accent-filled button (was invisible: #E07E10 on #F47421 ≈ 1.05:1). */ body[data-restyle="5"] .btn-create-claim .create-icon, body[data-restyle="5g"] .btn-create-claim .create-icon, body[data-restyle="5"] .btn-create-claim .create-icon path, body[data-restyle="5g"] .btn-create-claim .create-icon path { fill: var(--rsp-on-accent) !important; } /* nav item strokes recolored to the variant accent (icons kept — owner 2026-07-07) */ body[data-restyle="5"] .nav-icon, body[data-restyle="5g"] .nav-icon { stroke: var(--rsp-accent) !important; } body[data-restyle="5"] .nav-icon .nav-icon-fill, body[data-restyle="5g"] .nav-icon .nav-icon-fill { fill: var(--rsp-accent) !important; } /* bee → BEEYELLOW + divider → brand yellow, ALL restyle variants (owner 6 / #404.3) */ body[data-restyle] .bee-logo-icon { content: url('/images/beeyellow.png') !important; } body[data-restyle] .brand-separator { background: #F8A900 !important; } /* ════════════════════════════════════════════════════════════════════════ R5-C3 (owner 7 / #402.3) — CHIPS section-header family. HEADERS ONLY — the full-width branded band becomes a compact tinted CHIP (rounded, inline-width) + a same-tone number bubble. NEVER touches .cdv-dl geometry (theme-13 lesson). Three tints: chips oranžinė (c5), chips geltona (c5g), chips navigacijos (c5n, matches the right "Žalos skiltys" quick-nav ACTIVE style so they read as one). ════════════════════════════════════════════════════════════════════════ */ body[data-restyle="c5"] { --rsp-chip-bg: rgba(244,116,33,.12); --rsp-chip-fg: #9a3412; --rsp-chip-bubble: #F47421; --rsp-chip-bubble-fg: #fff; --rsp-chip-border: transparent; } body[data-restyle="c5g"] { --rsp-chip-bg: rgba(248,169,0,.15); --rsp-chip-fg: #201B16; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; } body[data-restyle="c5n"] { --rsp-chip-bg: #fff8ee; --rsp-chip-fg: #ec7b29; --rsp-chip-bubble: #ec7b29; --rsp-chip-bubble-fg: #fff; --rsp-chip-border: #ec7b29; } body[data-restyle="sf"] { /* HIVE-96: Snieguole final = branded geltona chrome + chips geltona section chips. */ --rsp-accent: #F8A900; --rsp-accent-2: #ffc233; --rsp-on-accent: #201B16; --rsp-accent-dark: #8a4a06; --rsp-soft: #FEF2D9; --rsp-line: #F8A900; --rsp-bubble: rgba(32,27,22,.20); --rsp-bubble-fg: #201B16; --rsp-sec-border: #efe4c9; --rsp-chip-bg: rgba(248,169,0,.15); --rsp-chip-fg: #201B16; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; /* Owner 2026-07-08: the base --sidebar-hover (#1a1a1a) is invisible on the sf dark-brown sidebar (#201B16), so expanded-mode hover read as nothing. Use a subtle brand-yellow tint (same alpha as the section-chip fill) — it composites over the dark ground to a warm tint. The base .nav-item transition:all .15s animates it smoothly; active items keep their cream fill (!important). */ --sidebar-hover: rgba(248, 169, 0, .15); } /* Sidebar active-item wiring for the CHIP family (owner 2026-07-08). The base app paints the active nav item a dark-brown pill with white text (site.css .nav-item.active); the chip variants never overrode it, so the left menu did not follow the header colour. Wire it here: the active TOP-LEVEL item takes the header's bright chip colour (--rsp-chip-bubble — the same tone as the section number bubble / left stripe) as a filled pill with brand-ink (#201B16 ≈ black) text + icon. Sub-items get the chip colour as TEXT only (no full pill), mirroring the 5/5g treatment above. Applies to every chip tint (c5/c5g/c5n/c5b/c5p) so whichever chip the user selected, the pill matches its header. */ /* Owner 2026-07-08 (refinement): match the CLAIM SECTION CHIP, not the solid accent. The active pill takes the variant's OPAQUE chip-FILL (= --rsp-chip-bg composited over white — a translucent rgba can't be used directly here, it would composite over the DARK sidebar to near-black instead of the cream seen on the light form). Ink text/icon stay. c5 rgba(244,116,33,.12)/white = #FEEEE0 c5g/c5b/c5p rgba(248,169,0,.15)/white = #FEF2D9 c5n #fff8ee (already opaque) = #FFF8EE */ body[data-restyle="c5"] .nav-item.active:not(.sub-item) { background: #FEEEE0 !important; color: #201B16 !important; } body[data-restyle="c5g"] .nav-item.active:not(.sub-item) { background: #FEF2D9 !important; color: #201B16 !important; } body[data-restyle="c5n"] .nav-item.active:not(.sub-item) { background: #FFF8EE !important; color: #201B16 !important; } body[data-restyle="c5b"] .nav-item.active:not(.sub-item) { background: #FEF2D9 !important; color: #201B16 !important; } body[data-restyle="c5p"] .nav-item.active:not(.sub-item) { background: #FEF2D9 !important; color: #201B16 !important; } body[data-restyle="c5"] .nav-item.active:not(.sub-item) .nav-icon, body[data-restyle="c5g"] .nav-item.active:not(.sub-item) .nav-icon, body[data-restyle="c5n"] .nav-item.active:not(.sub-item) .nav-icon, body[data-restyle="c5b"] .nav-item.active:not(.sub-item) .nav-icon, body[data-restyle="c5p"] .nav-item.active:not(.sub-item) .nav-icon { stroke: #201B16 !important; } body[data-restyle="c5"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill, body[data-restyle="c5g"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill, body[data-restyle="c5n"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill, body[data-restyle="c5b"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill, body[data-restyle="c5p"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill { fill: #201B16 !important; } body[data-restyle="c5"] .nav-item.active:not(.sub-item) .fa-user-shield, body[data-restyle="c5g"] .nav-item.active:not(.sub-item) .fa-user-shield, body[data-restyle="c5n"] .nav-item.active:not(.sub-item) .fa-user-shield, body[data-restyle="c5b"] .nav-item.active:not(.sub-item) .fa-user-shield, body[data-restyle="c5p"] .nav-item.active:not(.sub-item) .fa-user-shield { color: #201B16 !important; } body[data-restyle="c5"] .nav-item.sub-item.active, body[data-restyle="c5g"] .nav-item.sub-item.active, body[data-restyle="c5n"] .nav-item.sub-item.active, body[data-restyle="c5b"] .nav-item.sub-item.active, body[data-restyle="c5p"] .nav-item.sub-item.active { background: transparent !important; color: var(--rsp-chip-bubble) !important; font-weight: 700 !important; } body[data-restyle="c5"] .nav-item.sub-item.active .nav-icon, body[data-restyle="c5g"] .nav-item.sub-item.active .nav-icon, body[data-restyle="c5n"] .nav-item.sub-item.active .nav-icon, body[data-restyle="c5b"] .nav-item.sub-item.active .nav-icon, body[data-restyle="c5p"] .nav-item.sub-item.active .nav-icon { stroke: var(--rsp-chip-bubble) !important; } /* header band → transparent, keep only a light bottom divider */ body[data-restyle="c5"] .cdv-section-header, body[data-restyle="c5g"] .cdv-section-header, body[data-restyle="c5n"] .cdv-section-header, body[data-restyle="c5"] .claims-wizard-section-header, body[data-restyle="c5g"] .claims-wizard-section-header, body[data-restyle="c5n"] .claims-wizard-section-header { background: transparent !important; border-bottom: 1px solid var(--border, #e6e8ee) !important; padding: 9px 14px !important; } /* title → compact rounded CHIP (inline-width) */ body[data-restyle="c5"] .cdv-section-title, body[data-restyle="c5g"] .cdv-section-title, body[data-restyle="c5n"] .cdv-section-title, body[data-restyle="c5"] .claims-wizard-section-title, body[data-restyle="c5g"] .claims-wizard-section-title, body[data-restyle="c5n"] .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; } body[data-restyle="c5"] .claims-wizard-section-title > span:not(.claims-wizard-section-number), body[data-restyle="c5g"] .claims-wizard-section-title > span:not(.claims-wizard-section-number), body[data-restyle="c5n"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-chip-fg) !important; } body[data-restyle="c5"] .claims-wizard-section-header .claims-wizard-section-chevron, body[data-restyle="c5g"] .claims-wizard-section-header .claims-wizard-section-chevron, body[data-restyle="c5n"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-chip-fg) !important; } /* number bubble → solid same-tone */ body[data-restyle="c5"] .cdv-section-header .cdv-section-number, body[data-restyle="c5g"] .cdv-section-header .cdv-section-number, body[data-restyle="c5n"] .cdv-section-header .cdv-section-number, body[data-restyle="c5"] .claims-wizard-section-number, body[data-restyle="c5g"] .claims-wizard-section-number, body[data-restyle="c5n"] .claims-wizard-section-number { background: var(--rsp-chip-bubble) !important; color: var(--rsp-chip-bubble-fg) !important; } /* subtle accent left-edge on the section box (ties the chip to its panel; header-adjacent, not .cdv-dl) */ body[data-restyle="c5"] .cdv-section, body[data-restyle="c5g"] .cdv-section, body[data-restyle="c5n"] .cdv-section, body[data-restyle="c5"] .claims-wizard-section, body[data-restyle="c5g"] .claims-wizard-section, body[data-restyle="c5n"] .claims-wizard-section { border-left: 3px solid var(--rsp-chip-bubble) !important; } /* ════════════════════════════════════════════════════════════════════════ R5-C4 (#403) — LANDING HERO: swap the photo + dark overlay for the brand line-maze STRIPE pattern with "WELCOME … TO THE BEST PLAN BEE" (black condensed caps). ALL restyle variants; "Current" keeps the photo hero. Cards + the rest of the landing are untouched. ════════════════════════════════════════════════════════════════════════ */ body[data-restyle] .landing-hero { /* #403: stripes smaller/denser — brand-stripe-pattern-dense.png is a 1x2 mirror pair of the original maze (twice as wide, seamless at the centre join), so `cover` scales it to ~half the per-stripe width of the single image. Same organic maze, thinner stripes, no tiling seam. */ background: #EAE7D8 url('/images/brand-stripe-pattern-dense.png') center / cover no-repeat !important; min-height: 230px; padding: 24px 32px !important; } body[data-restyle] .landing-hero::before { content: none !important; background: none !important; } body[data-restyle] .landing-hero h1, body[data-restyle] .landing-hero p { display: none !important; } body[data-restyle] .hero-brand-welcome, body[data-restyle] .hero-brand-tagline { display: block !important; position: absolute; z-index: 2; /* Owner 2026-07-09 all-caps sweep: this ONE element keeps uppercase on purpose. It is aria-hidden decorative brand branding (a wordmark), not readable UI text, and it renders in the Oswald *condensed display-caps* face chosen for that look — title-case here would look broken. Flagged for owner; flip to none if desired. */ color: #201B16; font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: .5px; /* #403: bundled Oswald (condensed caps) — the previous stack named unbundled condensed faces and fell back to a plain sans-serif, so the heading never rendered condensed. */ font-family: 'Oswald', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', sans-serif; text-shadow: 0 1px 0 rgba(234,231,216,.35); } body[data-restyle] .hero-brand-welcome { top: 20px; left: 32px; font-size: clamp(30px, 5.2vw, 60px); } body[data-restyle] .hero-brand-tagline { right: 32px; bottom: 20px; font-size: clamp(22px, 3.8vw, 46px); text-align: right; } /* ════════════════════════════════════════════════════════════════════════ R5-C3-followup (Snieguolė 2026-07-07) — two more chip layouts (geltona tint): • c5b "Chips be burbulo": the WHOLE header becomes one pill; the number is PLAIN (no circle) inside it → "1 Title". • c5p "Chips burbulas prieš": the number keeps its circle bubble but sits clearly BEFORE a separate title chip (extra gap). Headers ONLY. ════════════════════════════════════════════════════════════════════════ */ body[data-restyle="c5b"], body[data-restyle="c5p"] { --rsp-chip-bg: rgba(248,169,0,.15); --rsp-chip-fg: #201B16; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; } /* c5b — number INSIDE one pill, NO circle: the header is the chip */ body[data-restyle="c5b"] .cdv-section-header, body[data-restyle="c5b"] .claims-wizard-section-header { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: var(--rsp-chip-bg) !important; border: none !important; border-bottom: none !important; border-radius: 999px !important; padding: 4px 15px !important; width: auto !important; } body[data-restyle="c5b"] .cdv-section-header-spacer { display: none !important; } body[data-restyle="c5b"] .cdv-section-title, body[data-restyle="c5b"] .claims-wizard-section-title { background: transparent !important; color: var(--rsp-chip-fg) !important; border: none !important; border-radius: 0 !important; padding: 0 !important; } body[data-restyle="c5b"] .cdv-section-header .cdv-section-number, body[data-restyle="c5b"] .claims-wizard-section-number { background: transparent !important; color: var(--rsp-chip-fg) !important; border-radius: 0 !important; width: auto !important; min-width: 0 !important; height: auto !important; font-weight: 800 !important; padding: 0 !important; } body[data-restyle="c5b"] .cdv-section, body[data-restyle="c5b"] .claims-wizard-section { border-left: 3px solid var(--rsp-chip-bubble) !important; } /* c5p — number circle bubble clearly BEFORE a separate title chip */ body[data-restyle="c5p"] .cdv-section-header, body[data-restyle="c5p"] .claims-wizard-section-header { background: transparent !important; border-bottom: 1px solid var(--border, #e6e8ee) !important; padding: 9px 14px !important; gap: 13px !important; } body[data-restyle="c5p"] .cdv-section-title, body[data-restyle="c5p"] .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; } body[data-restyle="c5p"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-chip-fg) !important; } body[data-restyle="c5p"] .cdv-section-header .cdv-section-number, body[data-restyle="c5p"] .claims-wizard-section-number { background: var(--rsp-chip-bubble) !important; color: var(--rsp-chip-bubble-fg) !important; } /* c5p WIZARD surface fix (2026-07-08): the wizard number lives INSIDE .claims-wizard-section-title AND the title TEXT is a bare text node (no wrapping span). The old rule tried to chip a "> span" that doesn't exist, so c5p rendered plain and was indistinct from c5g. Fix without markup change: make the h2 TITLE itself the pale chip pill (like c5g's title), but pull the number OUT as an absolutely-positioned solid circle to the LEFT of the pill (reserve room with margin-left) so the bubble sits clearly BEFORE the chip = "burbulas prieš". This is the ONLY thing separating c5p from c5g. cdv surface keeps its own rules above (number is a real sibling there), so it is untouched. */ body[data-restyle="c5p"] .claims-wizard-section-title { position: relative !important; display: inline-flex !important; align-items: center !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 14px !important; margin-left: 32px !important; gap: 0 !important; } /* if any header DOES wrap its title text in a span, keep that span plain (the h2 is the chip) */ body[data-restyle="c5p"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; color: var(--rsp-chip-fg) !important; } body[data-restyle="c5p"] .claims-wizard-section-number { position: absolute !important; left: -32px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 50% !important; background: var(--rsp-chip-bubble) !important; color: var(--rsp-chip-bubble-fg) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; padding: 0 !important; flex: 0 0 auto !important; } body[data-restyle="c5p"] .cdv-section, body[data-restyle="c5p"] .claims-wizard-section { border-left: 3px solid var(--rsp-chip-bubble) !important; } /* ════════════════════════════════════════════════════════════════════════ HIVE-96 — Snieguolė final (sf). Hybrid: - 5g branded geltona for sidebar chrome, yellow create button, right-nav active tokens; - c5g chips geltona for the active sidebar pill and Details/Edit section chips. Everything here is sf-scoped so the existing 5g/c5g/c5b/c5p previews stay unchanged. ════════════════════════════════════════════════════════════════════════ */ body[data-restyle="sf"] .sidebar { background: #201B16 !important; } body[data-restyle="sf"] .btn-create-claim { background: var(--rsp-accent) !important; color: var(--rsp-on-accent) !important; border-color: var(--rsp-accent) !important; } body[data-restyle="sf"] .btn-create-claim:hover { filter: brightness(1.06); color: var(--rsp-on-accent) !important; } body[data-restyle="sf"] .btn-create-claim .create-icon, body[data-restyle="sf"] .btn-create-claim .create-icon path { fill: var(--rsp-on-accent) !important; } body[data-restyle="sf"] .nav-icon { stroke: var(--rsp-accent) !important; } body[data-restyle="sf"] .nav-icon .nav-icon-fill { fill: var(--rsp-accent) !important; } body[data-restyle="sf"] .nav-item:not(.sub-item) > .fas, body[data-restyle="sf"] .nav-item:not(.sub-item) > .fa-solid { color: var(--rsp-accent) !important; } /* Smooth icon colour transitions — the base .nav-item transition:all only covers the nav-item box, not the SVG stroke/fill or the FA colour, so add one on the icons. */ body[data-restyle="sf"] .nav-icon, body[data-restyle="sf"] .nav-item > .fas, body[data-restyle="sf"] .nav-item > .fa-solid { transition: stroke .15s ease, fill .15s ease, color .15s ease; } /* Rail (collapsed) mode: labels are hidden, so hover feedback is the icon getting LIGHTER (brand yellow → --rsp-accent-2 #ffc233). Non-active top-level items only; the yellow-tint hover bg (--sidebar-hover) still fades in behind it. */ [data-sidebar-mode="rail"] body[data-restyle="sf"] .nav-item:not(.active):not(.sub-item):hover .nav-icon { stroke: var(--rsp-accent-2) !important; } [data-sidebar-mode="rail"] body[data-restyle="sf"] .nav-item:not(.active):not(.sub-item):hover .nav-icon .nav-icon-fill { fill: var(--rsp-accent-2) !important; } [data-sidebar-mode="rail"] body[data-restyle="sf"] .nav-item:not(.active):not(.sub-item):hover > .fas, [data-sidebar-mode="rail"] body[data-restyle="sf"] .nav-item:not(.active):not(.sub-item):hover > .fa-solid { color: var(--rsp-accent-2) !important; } body[data-restyle="sf"] .nav-item.active:not(.sub-item) { background: #FEF2D9 !important; color: #201B16 !important; } body[data-restyle="sf"] .nav-item.active:not(.sub-item) .nav-icon { stroke: #201B16 !important; } body[data-restyle="sf"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill { fill: #201B16 !important; } body[data-restyle="sf"] .nav-item.active:not(.sub-item) > .fas, body[data-restyle="sf"] .nav-item.active:not(.sub-item) > .fa-solid, body[data-restyle="sf"] .nav-item.active:not(.sub-item) .fa-user-shield { color: #201B16 !important; } body[data-restyle="sf"] .nav-item.sub-item.active { background: transparent !important; color: var(--rsp-chip-bubble) !important; font-weight: 700 !important; } body[data-restyle="sf"] .nav-item.sub-item.active .nav-icon { stroke: var(--rsp-chip-bubble) !important; } body[data-restyle="sf"] .nav-item.sub-item.active .sub-icon { color: var(--rsp-chip-bubble) !important; } body[data-restyle="sf"] .activity-landing-card::before { background: var(--rsp-accent) !important; } body[data-restyle="sf"] .activity-landing-card:hover { border-color: var(--rsp-accent) !important; box-shadow: 0 6px 20px rgba(248, 169, 0, .18) !important; } body[data-restyle="sf"] .activity-landing-card-icon { background: #201B16 !important; color: var(--rsp-accent) !important; } body[data-restyle="sf"] .activity-landing-card-icon i { color: var(--rsp-accent) !important; } body[data-restyle="sf"] .cdv-section-header, body[data-restyle="sf"] .claims-wizard-section-header { background: transparent !important; border-bottom: 1px solid var(--border, #e6e8ee) !important; padding: 9px 14px !important; } body[data-restyle="sf"] .cdv-section-title, 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; /* Owner 2026-07-09: business flagged ALL-CAPS section titles — force normal (title) case for BOTH Details + Edit (was uppercase for the HIVE-96 parity chip). */ text-transform: none !important; letter-spacing: normal !important; font-weight: 700 !important; } body[data-restyle="sf"] .cdv-section-title i { display: none !important; } body[data-restyle="sf"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-chip-fg) !important; } body[data-restyle="sf"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-chip-fg) !important; } body[data-restyle="sf"] .cdv-section-header .cdv-section-number, 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; } body[data-restyle="sf"] .cdv-section, body[data-restyle="sf"] .claims-wizard-section { border-left: 3px solid var(--rsp-chip-bubble) !important; } /* HIVE-96 (owner 2026-07-08): on the EDIT (wizard) surface the number lives INSIDE .claims-wizard-section-title, so the pale chip wrapped [bubble + title]. On the Details (.cdv-*) surface the number is a SEPARATE sibling BEFORE the title chip. Unify them: pull the wizard number OUT to the LEFT of the chip (absolute, reserving room with the title's margin-left) so Edit reads [bubble] [title chip] exactly like Details + the list quick-preview. Details is untouched. */ body[data-restyle="sf"] .claims-wizard-section-title { position: relative !important; margin-left: 36px !important; } body[data-restyle="sf"] .claims-wizard-section-number { position: absolute !important; left: -36px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } body[data-restyle="sf"] .cdv-subgroup-title { background: #FEF2D9 !important; border-left-color: #F8A900 !important; color: #8a4a06 !important; } body[data-restyle="sf"] .claims-wizard-subsection-title { background: #FEF2D9 !important; border-left: 3px solid #F8A900 !important; border-bottom-color: #f0d9a0 !important; border-radius: 0 4px 4px 0 !important; color: #8a4a06 !important; } /* ════════════════════════════════════════════════════════════════════════ R5-C5 — off-brand wash cleanup (restyle layer only). The right "Žalos skiltys" quick-nav ACTIVE state + the quick-claim/client intake selected/hover washes follow the variant accent / cream wash instead of the fixed peach. ════════════════════════════════════════════════════════════════════════ */ body[data-restyle] .claims-wizard-step.active { /* text is INK not the accent — orange/yellow on the cream wash fails AA (≈1.8–2.6:1); the accent cue rides the left border + the number bubble instead (brandbook: no orange text). */ color: #201B16 !important; border-color: var(--rsp-accent) !important; background: var(--rsp-soft) !important; } body[data-restyle] .claims-wizard-step.active .claims-wizard-step-number { background: var(--rsp-accent) !important; color: var(--rsp-on-accent, #fff) !important; } /* quick-claim / quick-client intake selected + active washes → the cream variant wash */ body[data-restyle] .qci-search-result-item.is-active, body[data-restyle] .qci-option.is-selected, body[data-restyle] .qci-card.is-selected, body[data-restyle] .quick-client-intake .is-selected, body[data-restyle] .quick-client-intake .is-active { background: var(--rsp-soft) !important; } /* #444 — cargo/vehicle tabs match the yellow header chip (active = #F8A900 + ink). */ body[data-restyle="sf"] .rsp-cargo-tab.rsp-tab-active { background: #F8A900 !important; color: #201B16 !important; border-color: #F8A900 !important; } /* ════════════════════════════════════════════════════════════════════════════ HIVE 433–449 — sf global restyle refinements (owner 2026-07-09). sf is now the ONLY style; the restyler PANEL is hidden here (R0) while the switcher script stays loaded to build the sf cargo/vehicle tabs. Palette: accent #F8A900, ink #201B16, soft #FEF2D9, orange var(--primary). ════════════════════════════════════════════════════════════════════════════ */ /* R0 — hide the restyler switcher panel (script stays for the cargo tabs). */ .rsp-panel { display: none !important; } /* #441 — subsection headers: rounded + pale-yellow + black text, no left stripe. .cdv-subgroup-title is shared by Details + Edit; .claims-wizard-subsection-title is Edit. */ body[data-restyle="sf"] .cdv-subgroup-title { background: #FEF2D9 !important; color: #201B16 !important; border-left: 0 !important; border-radius: 10px !important; padding: 5px 14px !important; /* #441 follow-up — slimmer band (was 8px) */ text-transform: none !important; /* owner 2026-07-09 — no ALL-CAPS in subsection bands */ letter-spacing: normal !important; } body[data-restyle="sf"] .cdv-subgroup-title * { color: #201B16 !important; } body[data-restyle="sf"] .claims-wizard-subsection-title { background: #FEF2D9 !important; color: #201B16 !important; border-bottom: 0 !important; border-radius: 10px !important; padding: 5px 14px !important; /* #441 follow-up — slimmer band (was 8px) */ text-transform: none !important; /* owner 2026-07-09 — no ALL-CAPS */ letter-spacing: normal !important; } body[data-restyle="sf"] .claims-wizard-subsection-title * { color: #201B16 !important; } /* #439 / #443 — hide redundant subsection bands (section-name echoes + the group-count strip). The three specific bands carry .cdv-subgroup-hide-sf (added in the partials). */ body[data-restyle="sf"] .cdv-subgroup-hide-sf { display: none !important; } /* #445 — "Not received" FIR chip → soft yellow + ink. */ body[data-restyle="sf"] .cdv-fi-chip.is-waiting { background: #FEF2D9 !important; color: #201B16 !important; } /* #446 — cargo damaged-parts / cost-type chips → solid orange (like the Outcome action chips). */ body[data-restyle="sf"] .cargo-cost-type-badge { background: var(--primary, #d77504) !important; color: #fff !important; border-color: var(--primary, #d77504) !important; } /* #440 — Outcome "Unlock" lock icon + text → brand orange. */ body[data-restyle="sf"] .claims-wizard-outcome-toggle, body[data-restyle="sf"] .claims-wizard-outcome-toggle i { color: var(--primary, #d77504) !important; } /* #436 — Missing-document indicator pill → pale-yellow, no border. Follow-up (owner 2026-07-09): the unchecked "Mark as missing" HOVER gets the same pale-yellow borderless treatment (site.css :hover otherwise paints an orange border + peach bg), the pill is borderless in every state, and the triangle returns to 10px with an optical-center nudge (the 8px first pass read as superscript beside the 11px label). */ body[data-restyle="sf"] .missing-doc-pill { border-color: transparent !important; } body[data-restyle="sf"] .missing-doc-pill.is-missing, body[data-restyle="sf"] .missing-doc-pill.is-readonly, body[data-restyle="sf"] .missing-doc-pill:hover:not(.is-missing):not(.is-readonly) { background: #FEF2D9 !important; color: #201B16 !important; box-shadow: none !important; } html[data-theme="dark"] body[data-restyle="sf"] .missing-doc-pill:hover:not(.is-missing):not(.is-readonly), html[data-theme="dark"] body[data-restyle="sf"] .missing-doc-pill.is-missing, html[data-theme="dark"] body[data-restyle="sf"] .missing-doc-pill.is-readonly { background: rgba(248, 169, 0, 0.16) !important; /* pale yellow glows on dark */ color: #fde68a !important; } body[data-restyle="sf"] .missing-doc-pill-icon { font-size: 10px !important; line-height: 1 !important; position: relative; top: 0.5px; /* FA triangle rides high beside the 11px label */ } /* #449 — claims-list category tabs → rounded pill; drop the red active border. */ body[data-restyle="sf"] .claims-header-tabs .claims-tab { border-radius: 22px !important; } body[data-restyle="sf"] .claims-header-tabs .claims-tab.active { border-color: #F8A900 !important; } /* #447 (owner 2026-07-09) — document "New" badge → solid brand orange (the "selected outcome" look). Confirmed: badge is .attachment-file-status-badge (list) / .attachment-thumb-badge (grid); never green. */ body[data-restyle="sf"] .attachment-file-status-badge, body[data-restyle="sf"] .attachment-thumb-badge { background: var(--primary, #d77504) !important; color: #fff !important; border-color: var(--primary, #d77504) !important; } /* #437 (owner 2026-07-09) — Missing Documents badge + active Missing Information pills/chips → solid brand orange (the "selected outcome" look, matching #446). Unmarked classifier pills stay white (base .claims-wizard-pill-tag). Replaced 3 dead guessed selectors with the real classes: .missing-doc-badge (was red), .claims-wizard-pill-tag.active, .missing-info-chip (free-text). */ body[data-restyle="sf"] .missing-doc-badge, body[data-restyle="sf"] .claims-wizard-pill-tag.active, body[data-restyle="sf"] .missing-info-chip { background: var(--primary, #d77504) !important; color: #fff !important; border-color: var(--primary, #d77504) !important; } /* #438 (owner 2026-07-09) — Multiclaims "fields that will be copied" chips: active → solid orange (matching #437); inactive stays white (base .mc-copy-chip). The semantic panel wrapper carries the light/dark WCAG palettes in site.css. */ body[data-restyle="sf"] .mc-copy-chip.mc-copy-chip--active { background: var(--primary, #d77504) !important; color: #fff !important; border-color: var(--primary, #d77504) !important; } /* White on the regular brand orange is below AA at this 12px chip size. Keep the solid-orange treatment in dark mode, but use its darker brand shade (5.2:1). */ html[data-theme="dark"] body[data-restyle="sf"] .mc-copy-fields-panel .mc-copy-chip.mc-copy-chip--active { background: #a95505 !important; border-color: #a95505 !important; color: #fff !important; } /* ── #458 — Documents section: cream container headers ("gelsvai"), grayish containers ("pilkšvai"), rows carry no colour of their own (see the partial's inline block for the row de-tint). Header band follows the #441 cream convention; the card clips it into the 9px corners. Placed at the end of the file so it wins the equal-specificity "daintier documents" body[data-restyle] overrides above. */ body[data-restyle="sf"] .claims-wizard-upload-box, body[data-restyle="sf"] .attachment-type-card { background: #f8f9fb !important; border-color: #e6eaf0 !important; overflow: hidden; } body[data-restyle="sf"] .attachment-card-header { background: #FEF2D9 !important; border-radius: 8px 8px 0 0 !important; } body[data-restyle="sf"] .attachment-card-header:hover { background: #fdecc7 !important; } body[data-restyle="sf"] .attachment-card-header .attachment-card-title { color: #201B16 !important; } body[data-restyle="sf"] .attachment-card-header .attachment-card-chevron { color: #8a6f4d !important; } body[data-restyle="sf"] .attachment-card-header .attachment-card-file-count { color: #8a6f4d !important; } body[data-restyle="sf"] .attachment-card-header .attachment-header-upload-icon { color: #8a6f4d; } /* ── #461 — cost-section BOUNDARY headings: solid brand yellow full-width band + ink. Only the OUTER cost-pool titles carry .claims-cost-boundary-title (#460's semantic class: Cargo/Vehicle cost details + Damaged (entrusted) property costs, in edit, read-only and dynamic markup). Nested Payment titles keep the pale #FEF2D9 band (#441 rules above). The pale rules use !important at equal specificity, so these overrides sit LATER in the file with !important — do not move them above #441. */ body[data-restyle="sf"] .claims-cost-boundary-title { background: var(--rsp-brand-yellow, #F8A900) !important; color: var(--rsp-ink, #201B16) !important; } body[data-restyle="sf"] .claims-cost-boundary-title * { color: var(--rsp-ink, #201B16) !important; } /* the filled-state dot paints its own background (site.css var(--primary)) — give it an explicit dark visible fill on the yellow band; chevron rides the ink rule above. */ body[data-restyle="sf"] .claims-cost-boundary-title .claims-subsection-filled-dot { background: var(--rsp-ink, #201B16) !important; } /* concrete keyboard focus on the yellow band: ink ring reads against the light page AND the yellow fill (the generic var(--primary) ring would melt into the band). */ body[data-restyle="sf"] .claims-cost-boundary-title:focus-visible { outline: 2px solid var(--rsp-ink, #201B16) !important; outline-offset: 2px; }