/* Global box-sizing reset (bug-1): .awb-shell-content is width:100% + 24px/32px
   padding; with default content-box that overflows the viewport by 64px, giving
   horizontal scrollbars on every page. border-box is the decided root-cause fix. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================================================
   Global typography — the AddEqt brand faces: Manrope (display, 300/600) and Inter
   (body, 400/500/600), the same five woff2 cuts esign-service vendors (CRM-304).
   Vendored under wwwroot/fonts/ (OFL, see fonts/OFL.txt) so the regulated app has no
   runtime CDN dependency.
   ============================================================================ */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/manrope-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/manrope-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-600.woff2') format('woff2');
}

/* ----------------------------------------------------------------------------
   Lato — the LEGACY COB face, loaded for the advisory-case wizard only (maintainer
   2026-08-19: "ändra fonten inom awb-wizard-shell så känner de igen sig"). Legacy loads
   `Lato:300,400,400i,700` from Google Fonts (cob-advisor-addeqt/public/index.html:10-13) and
   puts it first in its stack (src/helpers/scss/_variables.scss:25-36). Those four cuts are
   vendored here as woff2 (latin + latin-ext subsets)
   so the regulated app keeps its no-runtime-CDN property. @font-face cannot live in scoped CSS,
   hence this file; the font-family rule that USES it is scoped to the wizard card in
   Features/AdvisoryCases/Wizard/WizardShell.razor.css, so the CRM shell keeps the brand faces.
   ---------------------------------------------------------------------------- */
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/lato-300-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/lato-300-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/lato-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/lato-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/lato-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/lato-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/lato-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/lato-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === CRM-320 PROFILE TOKENS === */
:root {
    --navy:#242748; --navy-hover:#31355f; --navy-press:#1B1D36; --navy-dim:rgba(36,39,72,.07); --navy-line:rgba(36,39,72,.22);
    --gold:#C4A882; --gold-tint:#F4EEE5; --gold-line:rgba(196,168,130,.55);
    --white:#FFFFFF; --snow:#F5F5F7; --snow-2:#E9ECEF;
    --coal:#111827; --coal-dim:#374151; --muted:#5F6673; --neutral-dot:#9CA3AF;
    --line:rgba(17,24,39,.08); --line-strong:rgba(17,24,39,.16); --backdrop:rgba(17,24,39,.45);
    --green:#059669; --green-text:#047857; --green-tint:#E8F5EF; --green-line:rgba(5,150,105,.3);
    --red:#DC2626;   --red-text:#B91C1C;   --red-tint:#FDECEC;   --red-line:rgba(220,38,38,.3);
    --amber:#D97706; --amber-text:#92400E; --amber-tint:#FDF3E4; --amber-line:rgba(217,119,6,.3);
    --side-dim:#AEB3CC; --side-hover:rgba(255,255,255,.07); --side-active:rgba(255,255,255,.12); --side-rule:rgba(255,255,255,.1);
    --radius:16px; --radius-sm:10px; --radius-xs:8px;
    --font-display:'Manrope', system-ui, sans-serif; --font-body:'Inter', system-ui, sans-serif;
}

/* Design-system font token (E0 ui-kit-port global stylesheet is the right home).
   Body text is Inter; brand/headings are Manrope via --awb-font-heading. */
:root {
    --awb-font: var(--font-body);
    --awb-font-heading: var(--font-display);

    /* The wizard-only face. Legacy's own stack, verbatim (_variables.scss:25-36) — Lato first,
       then the system sans fallbacks. Consumed by WizardShell.razor.css, nowhere else. */
    --awb-font-wizard: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Base Radzen font size — 14px to match the legacy CRM (Radzen material defaults to 16px).
       Most control sizes derive from this var, so setting it scales inputs/buttons/dropdowns. */
    --rz-body-font-size: 0.875rem;
    --rz-input-font-size: 0.875rem;
}

/* Inputs size themselves off --rz-input-font-size, which .rz-input-md/-sm/-lg set to a fixed
   16px bucket in a scope that beats :root — so override the resolved property on the element. */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-datepicker,
.rz-numeric,
.rz-lookup,
.rz-selectbutton,
.rz-multiselect,
.rz-radio-btn,
.rz-input-md {
    font-size: 0.875rem;
    --rz-input-font-size: 0.875rem;
}
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-numeric,
.rz-lookup,
.rz-selectbutton,
.rz-multiselect {
    padding: 6px 8px;
}

body {
    font-family: var(--awb-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--awb-font-heading);
}

.awb-shell-content:not(:has(.awb-wizard-shell)),
.rz-dialog:not(:has(.awb-wizard-dialog)) {
    color: var(--rz-text-color);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--green);
}

.invalid {
    outline: 1px solid var(--red-text);
}

.validation-message {
    color: var(--red-text);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--red-text);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ett fel har uppstått."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--muted);
}

/* Framework circuit-error banner. Rendered by every layout (MainLayout + EmptyLayout),
   so the hide rule must be GLOBAL — a scoped *.razor.css rule only matches one layout and
   left it permanently visible on the login surface (QA-bug-2). Blazor sets inline
   display:block on a real circuit error, overriding this default. */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--amber-tint);
    color: var(--amber-text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* bug-8-nit2: the custom <Button> wrapper de-uppercases via its scoped Button.razor.css
   (::deep .rz-button { text-transform: none }), but Radzen's DialogService.Confirm renders
   its own Ja/Avbrytt (OK/Cancel) buttons inside .rz-dialog — bare .rz-button that the scoped
   rule never reaches — so the material theme uppercased them to "JA"/"AVBRYT". This global
   rule normalises casing for all confirm/dialog buttons app-wide, matching the design system
   (Swedish sentence-case labels). GLOBAL (not scoped) because the confirm dialog is rendered
   by Radzen outside any feature component's CSS scope. */
.rz-dialog .rz-button {
    text-transform: none;
}

/* Destructive confirms (opt-in via ConfirmOptions.CssClass = "awb-confirm-danger") paint the OK
   button red — the action is irreversible (e.g. "Ta bort kund"). GLOBAL because DialogService.Confirm
   renders outside any feature component's CSS scope. */
.awb-confirm-danger .rz-dialog-confirm-buttons .rz-button:first-child {
    background-color: var(--rz-danger, var(--red)) !important;
    border-color: var(--rz-danger, var(--red)) !important;
    color: #fff !important;
}

/* ============================================================================
   E6 PEP — P3 findings BUG-2 + BUG-3 (ROUND 3): GLOBAL, scope-independent rules.

   Root cause of the two prior failures was NOT specificity/!important — it was a Blazor CSS-scope
   mismatch. A `::deep` rule in a component's *.razor.css compiles to `[bScopeOfThatComponent] <sel>`
   and only matches elements descending from an ancestor that carries THAT component's scope attribute.
   QA inspected the running DOM and confirmed the Radzen grid rows and the select-bar buttons carry
   DIFFERENT scope attributes than the authoring components, so the compiled selectors never matched
   and `!important` was inert. These rules live in the GLOBAL stylesheet (no `[bScope]` prefix), so they
   match the Radzen DOM regardless of component boundaries. They stay keyed on PEP-only selectors
   (`.awb-pep-match` / `.awb-pep-visning`) so they do NOT leak to other pages. `!important` beats
   Radzen's non-important material-theme declarations outright.
   ============================================================================ */

/* BUG-2 — emphasise PEP match rows. Radzen's <td> cells paint their own opaque stripe/hover background
   over the <tr>, so the emphasis targets the cells. Keyed on the PEP-only `.awb-pep-match` badge class,
   so it only tints rows that contain a PEP hit, anywhere the grid renders. */
.rz-data-row:has(.awb-pep-match) > td,
.rz-data-row:has(.awb-pep-match):hover > td {
    background: var(--awb-danger-chip-bg, var(--red-tint)) !important;
    font-weight: 500;
}

/* BUG-3 — render the "Visning" toggle in normal case (design-system parity). Contained by the
   `.awb-pep-visning` marker container (PepMatchningarTab.razor) so only THIS select-bar is affected,
   not every RadzenSelectBar app-wide. */
.awb-pep-visning .rz-selectbar .rz-button {
    text-transform: none !important;
}

/* Same normal-case override for the holdings sub-tab select-bar (CustomerHoldingsTab.razor), keyed on
   its own marker so it does not leak to other select-bars. */
.awb-holdings-subtabs .rz-selectbar .rz-button {
    text-transform: none !important;
}

/* ============================================================================
   LEGACY COB PALETTE + WIZARD VALIDATION VISUALISATION
   (advisor-module UI fixes — a self-contained appended block, so parallel work
   appending to this file merges by concatenation. The grid/textarea rules that
   follow arrived from initial-migration-fixes and target disjoint selectors.)

   Sources: cob-advisor-addeqt/src/helpers/scss/_variables.scss and
   _ProgessIndicator.scss. Screens: docs/requirements/legacy-cob/legacy-cob.pdf.
   ============================================================================ */

:root {
    --awb-cob-success: #2ed1a0;
    --awb-cob-primary: #003d50;
    --awb-cob-warning: #eec24b;
    --awb-cob-danger: #df4c43;
    --awb-cob-step-pending: #143749;
    --awb-cob-step-done: #40d4a7;
    --awb-cob-step-active: orange;

    /* Maintainer, 2026-08-25: the notice blocks read as too loud next to the rest of a form —
       "den röda färgen är lite väl skarp jämfört med de andra formulärdelarna". A notice is a
       BLOCK of colour, so the same red that is right as a 1px border around a control is
       overbearing as a filled panel. These three are the pastel set used by the validation
       summary and the danger alert; --awb-cob-danger stays as it is, because the FIELD borders
       must keep pointing at the offending control (FR-UI-APP-180's second cue) and lose their
       job if they fade into the form. */
    --awb-danger-soft-bg: var(--red-tint);    --awb-danger-soft-border: var(--red-line);    --awb-danger-soft-text: var(--red-text);
    --awb-warning-soft-bg: var(--amber-tint); --awb-warning-soft-border: var(--amber-line); --awb-warning-soft-text: var(--amber-text);
    --awb-info-soft-bg: var(--navy-dim);      --awb-info-soft-border: var(--navy-line);     --awb-info-soft-text: var(--navy);
    --awb-success-soft-bg: var(--green-tint); --awb-success-soft-border: var(--green-line); --awb-success-soft-text: var(--green-text);

    --awb-danger-chip-bg: var(--red-tint); --awb-warning-chip-bg: var(--amber-tint); --awb-info-chip-bg: var(--navy-dim); --awb-success-chip-bg: var(--green-tint);
    --awb-danger-chip-text: var(--red-text); --awb-warning-chip-text: var(--amber-text); --awb-info-chip-text: var(--navy); --awb-success-chip-text: var(--green-text);
    --awb-danger-chip-dot: var(--red); --awb-warning-chip-dot: var(--amber); --awb-info-chip-dot: var(--navy); --awb-success-chip-dot: var(--green);

    --awb-notice-radius: var(--radius-sm);

    --awb-card-bg: var(--snow); --awb-card-border: 1px solid var(--line); --awb-card-radius: var(--radius); --awb-card-padding: 18px 20px;
    --awb-card-title-font: var(--font-display); --awb-card-title-size: 17px; --awb-card-title-tracking: -0.02em; --awb-card-title-line-height: 1.3;
    --awb-page-title-size: 30px; --awb-page-title-weight: 300; --awb-page-title-tracking: -0.04em;

    /* Radzen's theme colours mapped onto the brand profile. app.css is linked AFTER <RadzenTheme>
       in App.razor — same specificity, later sheet. Do not move it into a lower-specificity file.
       The advisory-case wizard re-pins its own legacy values in the WIZARD PIN block at the end. */
    --rz-text-font-family: var(--font-body);
    --rz-primary: var(--navy); --rz-primary-light: var(--navy-hover); --rz-primary-lighter: var(--navy-dim);
    --rz-primary-dark: var(--navy-press); --rz-primary-darker: var(--navy-press);
    --rz-text-color: var(--coal); --rz-text-title-color: var(--coal); --rz-text-secondary-color: var(--muted);
    --rz-body-background-color: var(--white); --rz-base-background-color: var(--white);
    --rz-danger: var(--red); --rz-success: var(--green); --rz-warning: var(--amber); --rz-info: var(--navy); --rz-info-dark: var(--navy-press);
    --rz-danger-lighter: var(--red-tint); --rz-success-lighter: var(--green-tint); --rz-warning-lighter: var(--amber-tint); --rz-info-lighter: var(--navy-dim);
    --rz-on-base-lighter: var(--coal); --rz-on-primary-lighter: var(--navy); --rz-on-secondary-lighter: var(--navy); --rz-on-info-lighter: var(--navy);
    --rz-on-success-lighter: var(--green-text); --rz-on-warning-lighter: var(--amber-text); --rz-on-danger-lighter: var(--red-text);
    --rz-notification-error-color: var(--red-text); --rz-notification-warning-color: var(--amber-text);
    --rz-notification-success-color: var(--green-text); --rz-notification-info-color: var(--navy);
    --rz-border-radius: var(--radius-sm); --rz-dialog-border-radius: var(--radius); --rz-dialog-mask-background-color: var(--coal);
    --rz-datatable-row-hover-background-color: var(--navy-dim); --rz-grid-hover-background-color: var(--navy-dim);
    --rz-grid-header-font-size: 11px; --rz-grid-header-font-weight: 600; --rz-grid-header-text-transform: uppercase; --rz-grid-header-color: var(--muted);

    /* Legacy's single form measure: `getGeneral(maxFieldWidth)` = 480px
       (cob-advisor-addeqt src/helpers/scss/_variables.scss:24). It caps a text field
       (_TextField.scss:4), a text view unless explicitly full-width (_TextView.scss:16-18),
       an option list (_OptionsList.scss:24-26) and a description paragraph (_Cob.scss:132-134)
       alike — which is why a legacy question breaks at about half the card and ours ran the
       full width. One token, because legacy has one number. */
    --awb-cob-field-max: 480px;

    /* The field box's own greys, straight out of legacy's SCSS colour functions applied to
       `medium` (#91a0ad, _variables.scss:12): the frame is `lighten(medium, 15%)`
       (_TextField.scss:7) and a read-only frame is `lighten(medium, 25%)` (_TextField.scss:30).
       Resolved here because we have no SCSS; the label inside the box is `medium` itself
       (_TextField.scss:46). */
    --awb-cob-field-border: #bdc6ce;
    --awb-cob-field-border-readonly: #dadfe3;
    --awb-cob-field-label: #91a0ad;

    /* Övriga dokument (node 18): legacy frames the document list with `darken(light, 10%)` and
       draws the drop-zone glyph in the same tone (_View14.scss:98, _FileDrop.scss:52 — `light` is
       #f4f5f7, _variables.scss:11). */
    --awb-cob-doc-border: #d6dae2;
    --awb-cob-doc-icon: #d6dae2;

    /* Risknoden (nod 6): legacy frames the reference table and the illustration in a grey panel
       (_Risk.scss:152-160) whose plate is `lighten(light, 2%)` (_Table.scss:51). `light` itself is
       #f4f5f7 (_variables.scss:11) and is what legacy's option pills use for their text. */
    --awb-cob-panel-surface: #f9f9f9;
    --awb-cob-panel-border: #ccc;
    --awb-cob-table-surface: #f7f8f9;
    --awb-cob-chart-surface: #f7f8f9;
    --awb-cob-light: #f4f5f7;
}

/* ----------------------------------------------------------------------------
   Wizard field validation, legacy style: a field that HAS a value gets a teal
   border and a teal check mark inside its right edge; a checked radio/checkbox
   renders teal with a teal label. Purely visual — no validation logic here.

   Hook: Radzen's own form components stamp `rz-state-empty` on the rendered
   element while their bound value is empty (that is how RadzenFormField decides
   whether to float its label). `:not(.rz-state-empty)` therefore means "filled"
   for RadzenTextBox / RadzenTextArea / RadzenNumeric / RadzenDropDown alike, with
   no per-field component and no edits to the ~25 step files. Disabled and
   read-only fields are explicitly excluded: legacy screen 01 keeps its
   prefilled identity fields neutral while editable populated fields get the
   success treatment. Pinned by
   RadzenEmptyStateMarkupTests so a Radzen upgrade that drops the class fails a
   test instead of silently painting every field green.

   GLOBAL (not a *.razor.css) for the same reason as the PEP rules above: these
   elements are rendered by Radzen and carry component scope attributes the
   authoring component's compiled `::deep` selector would not match. Everything is
   keyed on `.awb-wizard-shell`, so nothing outside the advisory-case wizard is
   affected. The default `rz-variant-outlined` draws its border on the input
   element itself (not on .rz-form-field-content), which is why these target the
   inputs directly and work both inside and outside a RadzenFormField.
   ---------------------------------------------------------------------------- */

/* `.awb-field-filled` is the CRM-255 companion hook: a Common/UI wrapper that holds the typed text
   itself says so directly, because Radzen's rz-state-empty only catches up at field exit. */
.awb-wizard-shell .rz-textbox.awb-field-filled:not(.awb-field-unselected):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
.awb-wizard-shell .rz-textbox:not(.rz-state-empty):not(.awb-field-unselected):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
.awb-wizard-shell .rz-textarea:not(.rz-state-empty):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
.awb-wizard-shell .rz-numeric:not(.rz-state-empty):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
.awb-wizard-shell .rz-dropdown:not(.rz-state-empty):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    border-color: var(--awb-cob-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ed1a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: right 10px center;
    padding-inline-end: 2rem;
}

/* A textarea grows downwards, so the mark sits at the top-right corner (legacy screen 06). */
.awb-wizard-shell .rz-textarea:not(.rz-state-empty):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    background-position: right 10px top 10px;
}

/* .rz-numeric / .rz-dropdown are wrappers with their own trigger affordances on the
   right edge; keep the border colour but let the trigger own that space. */
.awb-wizard-shell .rz-numeric:not(.rz-state-empty):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
.awb-wizard-shell .rz-dropdown:not(.rz-state-empty):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    background-image: none;
    padding-inline-end: 0;
}

/* CRM-334 — a dropdown in a wizard TABLE cell centres its value: the base rule (.rz-dropdown padding
   6px 8px) pads the flex-column root, which pushes the label off-centre inside the fixed 40px height.
   Boxed FormFields own their layout (FormField.razor.css) and are excluded explicitly. */
.awb-wizard-shell td .rz-dropdown:not(.awb-form-field--box *) {
    justify-content: center;
    padding-block: 0;
}

/* Radio / checkbox: teal control + teal label when selected (legacy screen 01). */
.awb-wizard-shell .rz-radiobutton-box.rz-state-active,
.awb-wizard-dialog .rz-radiobutton-box.rz-state-active,
.awb-wizard-shell .rz-chkbox-box.rz-state-active {
    border-color: var(--awb-cob-success);
    background-color: transparent;
    color: var(--awb-cob-success);
}

.awb-wizard-shell .rz-chkbox-box.rz-state-active .rz-chkbox-icon {
    color: var(--awb-cob-success);
}

.awb-wizard-shell .rz-radio-btn[aria-checked="true"] .rz-radiobutton-label,
.awb-wizard-dialog .rz-radio-btn[aria-checked="true"] .rz-radiobutton-label,
.awb-wizard-shell .rz-chkbox[aria-checked="true"] ~ .awb-checkbox-label {
    color: var(--awb-cob-success);
}

/* ----------------------------------------------------------------------------
   THE SELECTED RADIO IS A GREEN CHECK, NOT A FILLED RING (maintainer, 2026-08-18).

   Legacy COB has no radio widget of its own: an option list renders the SAME check component in
   radio mode — cob-advisor-addeqt src/components/Checkbox/Checkbox.js:38-41 draws a
   `Checkbox-checkbox` box holding a material "done" glyph, and _Checkbox.scss:37-73 says how it
   reads:
     .Checkbox-checkbox            24x24, white, 1px border lighten(medium, 15%)  (:38-42)
     .Checkbox.radio &             border-radius: 100%                            (:70-73)
     .Checkbox.checked &           border-color: success #2ed1a0, and the check   (:58-65)
                                   glyph fades in, also #2ed1a0
     .Checkbox.checked .Checkbox-label  the label turns success too               (:83-85)
   So: unselected = empty white circle with a grey edge; selected = green circle with a green
   check inside, green label. Radzen's material radio instead FILLS the circle with a primary-blue
   dot (.rz-radiobutton-box.rz-state-active + the .rzi-circle-on mark), which is the blue ring the
   maintainer flagged.

   The check is drawn as the box's own background image — the same inline SVG the filled-field mark
   above uses, so there is one check glyph in this stylesheet, not two — and Radzen's dot element is
   hidden. Nothing about the markup changes: the group is still a real radio group (Radzen renders
   `role="radio"` + `aria-checked`, keyboard-operable), so screen readers are unaffected.

   Keyed on `.awb-wizard-shell` OR `.awb-wizard-dialog`, because a Radzen dialog opened from the
   wizard is rendered into `.rz-dialog-wrapper` at the document root — OUTSIDE the shell element —
   and would otherwise keep the blue ring the maintainer saw in the savings-profile modal. The
   dialog marker class sits on each wizard dialog component's own root element.
   ---------------------------------------------------------------------------- */

.awb-wizard-shell .rz-radiobutton-box,
.awb-wizard-dialog .rz-radiobutton-box {
    background-color: #fff;
    border: 1px solid var(--awb-cob-field-border, #bdc6ce);
    border-radius: 100%;
}

.awb-wizard-shell .rz-radiobutton-box.rz-state-active,
.awb-wizard-dialog .rz-radiobutton-box.rz-state-active {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ed1a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

/* Radzen's own selected mark is a filled dot (.rzi-circle-on inside the box); legacy's is the check
   drawn above, so the dot must go — otherwise both appear. */
.awb-wizard-shell .rz-radiobutton-box .rzi,
.awb-wizard-dialog .rz-radiobutton-box .rzi {
    display: none;
}

/* ----------------------------------------------------------------------------
   WIZARD DIALOGS: legacy's modal air, and the heading shown ONCE.

   Legacy's modal is cob-advisor-addeqt src/components/Modal/_Modal.scss + the question modal that
   uses it (NewSavingsProfile/_NewSavingsProfile.scss:118-146):
     .Modal-content            padding: 20px                     (_Modal.scss:45-49)
     .modal-container          padding-top: 20px                 (:120-122)
     .select_container         margin-bottom: 25px               (:124-127)
     .button-container         margin-top: 80px, pushed inwards  (:142-145)
     .Modal-buttons-container  margin-top: 20px                  (_Modal.scss:127-129)
   AWB's dialogs had Radzen's default content padding and a 1.25rem stack gap, which is what read as
   cramped next to legacy.

   Button row: AWB standard (left-aligned, FR-UI-APP-210) — deliberate divergence from legacy's
   centred row, maintainer 2026-10-01, CRM-334.

   `:has()` is how a rule on the dialog CONTENT reaches Radzen's own chrome (the content box is the
   ancestor, and no AWB code renders it). Already the technique used by the PEP rules above.
   ---------------------------------------------------------------------------- */

/* The wizard face follows the wizard's dialogs. A Radzen dialog is portalled to the document
   body, outside WizardShell's CSS scope, so its Lato rule cannot reach here — same reason the
   radio-button rules above are keyed on both classes. Icons keep the theme's glyph font. */
.awb-wizard-dialog,
.awb-wizard-dialog * {
    font-family: var(--awb-font-wizard);
}

.awb-wizard-dialog .rzi,
.awb-wizard-dialog [class*="rzi-"],
.awb-wizard-dialog .rz-menuitem-icon {
    font-family: var(--rz-icon-font-family);
}

.rz-dialog:has(.awb-wizard-dialog) .rz-dialog-content {
    padding: 1.25rem;
}

/* Read-only wizard dialogs (Session, Autogiro) keep legacy's 25px block air. */
.awb-wizard-dialog:not(.awb-validated-form) > :not(:last-child) {
    margin-bottom: 1.5625rem;
}

/* Wizard popup FORMS follow FR-UI-APP-180's field-stack rhythm (CRM-334, FR-UI-APP-210). */
.awb-wizard-dialog.awb-validated-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The same rhythm inside a popup form: each numbered section, and any column marked awb-dialog-stack. */
.awb-wizard-dialog .awb-wizard-section,
.awb-wizard-dialog .awb-dialog-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awb-wizard-shell .awb-checkbox:has(.rz-chkbox[aria-checked="true"]) .awb-checkbox-label {
    color: var(--awb-cob-success);
}

/* ----------------------------------------------------------------------------
   D17 — THE THIRD COLOUR: mandatory-and-empty.

   Filled is teal (above), optional-and-empty is neutral (no rule at all), and a
   DECLARED-required control that is still empty takes the legacy danger tone
   (--awb-cob-danger, the same #df4c43 the economy step's bg-danger risk cells
   use — no new hex is introduced here).

   It appears only AFTER a refused Gå vidare: both hooks below exist in the DOM
   only while the shell cascades ValidationAttemptScope.Refused, so a freshly
   opened blank step renders exactly as neutrally as legacy does.

   Two hooks, because two kinds of control are hosted in the wizard:
     • `.awb-field-missing` — placed by the Common/UI input wrappers, which know
       their own emptiness in C#. The ONLY way to reach a checkbox or a radio
       group: neither carries Radzen's rz-state-empty class.
     • `.awb-form-field--missing` on a FormField whose hosted control is a bare
       Radzen component (the economy step's numerics/dropdowns, the customer-
       information textboxes) — reached through `rz-state-empty`, the same
       third-party contract the teal rules rest on and RadzenEmptyStateMarkupTests
       pins.

   Both carry the same exclusion list as the teal rules: a disabled, read-only or
   aria-disabled control is prefilled/locked, not something the advisor failed to
   fill, and must stay neutral.
   ---------------------------------------------------------------------------- */

:is(.awb-wizard-shell, .awb-validated-form) .awb-field-missing:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing .rz-textbox.rz-state-empty:not(.awb-field-filled):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing .rz-textarea.rz-state-empty:not(.awb-field-filled):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing .rz-numeric.rz-state-empty:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing .rz-dropdown.rz-state-empty:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing .rz-datepicker.rz-state-empty:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    border-color: var(--awb-cob-danger);
}

/* The mirror of the teal check mark: an exclamation glyph inside the right edge, so the state reads
   without relying on hue. Text inputs only — .rz-numeric/.rz-dropdown/.rz-datepicker own that space
   with their own trigger affordances, exactly as in the teal block above. */
:is(.awb-wizard-shell, .awb-validated-form) .rz-textbox.awb-field-missing:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .rz-textarea.awb-field-missing:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing .rz-textbox.rz-state-empty:not(.awb-field-filled):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing .rz-textarea.rz-state-empty:not(.awb-field-filled):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df4c43' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='16.5' x2='12.01' y2='16.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: right 10px center;
    padding-inline-end: 2rem;
}

:is(.awb-wizard-shell, .awb-validated-form) .rz-textarea.awb-field-missing:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing .rz-textarea.rz-state-empty:not(.awb-field-filled):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    background-position: right 10px top 10px;
}

/* D29 — THE FOURTH STATE: filled, but the step says the VALUE is wrong (node 13's clearing number
   outside the selected bank's ranges). Until D29 the marker class only ever landed on an EMPTY control,
   so the teal block above — which matches on :not(.rz-state-empty) — could never collide with it. A
   TextInput with ValueIsValid="false" now carries the marker while FILLED, and the teal border rule
   would otherwise win on specificity (it names one more class than the generic .awb-field-missing border
   rule above). Spelling the danger tone out here at equal specificity, LATER in the file, settles it;
   the exclamation glyph is already handled by the block above. */
:is(.awb-wizard-shell, .awb-validated-form) .rz-textbox.awb-field-missing:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]),
:is(.awb-wizard-shell, .awb-validated-form) .rz-textarea.awb-field-missing:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    border-color: var(--awb-cob-danger);
}

/* Checkbox / radio: a required choice that has not been made (D17 point 6 — two unticked boxes with no
   colour treatment at all is what made the missing input invisible on Kontoval). The box outline AND the
   label take the tone; a ticked box is already teal above and is excluded here. */
:is(.awb-wizard-shell, .awb-validated-form) .awb-checkbox.awb-field-missing .rz-chkbox-box:not(.rz-state-active, .rz-state-disabled),
:is(.awb-wizard-shell, .awb-validated-form) .awb-radio-list.awb-field-missing .rz-radiobutton-box:not(.rz-state-active, .rz-state-disabled) {
    border-color: var(--awb-cob-danger);
}

:is(.awb-wizard-shell, .awb-validated-form) .awb-checkbox.awb-field-missing .awb-checkbox-label {
    color: var(--awb-cob-danger);
}

/* The non-colour half of the signal for every field inside a FormField: the word "Obligatoriskt" under
   the control. FormField renders it whenever the field is declared required and an attempt was refused;
   whether the control is in fact STILL empty is resolved here, against the same two hooks as above.
   Global rather than in FormField.razor.css: `rz-state-empty` sits on Radzen-rendered elements that carry
   no razor scope attribute, and keeping the hidden default in the same file avoids an !important duel. */
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field-missing-note {
    display: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--awb-cob-danger);
}

:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing:has(.awb-field-missing) .awb-form-field-missing-note,
:is(.awb-wizard-shell, .awb-validated-form) .awb-form-field--missing:has(.rz-state-empty:not(.awb-field-filled):not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"])) .awb-form-field-missing-note {
    display: block;
}

/* Click affordance for grids wired with a RowClick handler. PagedGrid.razor toggles the
   `clickable` class only when RowClick.HasDelegate. This must be GLOBAL, not scoped: the class
   sits on <RadzenDataGrid> (a child component), whose rendered root does NOT receive the razor
   scope attribute, so a `::deep`/`[bScope]` selector never matches. Keyed on `.clickable` so
   non-clickable grids are unaffected. */
.rz-datatable.clickable .rz-data-row {
    cursor: pointer;
}

/* Radzen's <td> cells paint their own opaque background over the <tr>, so the hover tint
   has to target the cells (same reason as the PEP rule above), and needs `!important` to beat
   Radzen's non-important cell background. */
.rz-datatable.clickable .rz-data-row:hover > td {
    background-color: var(--rz-datatable-row-hover-background-color, rgba(0, 0, 0, 0.04)) !important;
}

/* Table cell horizontal padding = 10px (legacy uses a tight x-inset; Radzen's default is 16px).
   Global, keyed off the .rz-datatable th/td which carry no razor scope attribute. Excluded inside
   .awb-wizard-shell, which keeps the wizard's own table treatment. Vertical padding untouched. */
:not(.awb-wizard-shell) .rz-datatable th,
:not(.awb-wizard-shell) .rz-datatable td {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Tabular (monospaced) figures in every table so digits line up in columns. Global — .rz-datatable
   carries no razor scope attribute; harmless on text cells. */
.rz-datatable {
    font-variant-numeric: tabular-nums;
}

/* Bold totals row on the holdings grids (summary + securities). Legacy _customer-summary.scss:14-19
   `tfoot tr.summary td { font-weight: 700 }`. Global because Radzen's footer cells carry no razor
   scope attribute; both grids use .awb-holdings-grid. */
.awb-holdings-grid .rz-datatable-tfoot td {
    font-weight: 700;
}

/* Brand grid header tracking. Excludes wizard tables (the pin keeps their legacy header). */
.rz-datatable:not(.awb-wizard-shell .rz-datatable) .rz-column-title {
    letter-spacing: .06em;
}

/* Beskrivning textarea (customer overview): allow vertical resize only. The drag
   writes an inline width, so !important is needed to hold 100%. Global (not scoped)
   because Radzen renders the <textarea> without this component's scope attribute. */
textarea.awb-overview-input {
    resize: vertical;
    width: 100% !important;
}

/* ============================================================================
   WIZARD-WIDE SHARED DRESS: Cob-Table + legacy Notice palette
   (insurance-wizard-look, maintainer 2026-08-19: "InsuranceAdvisory får gärna se ut
   som övriga delar i awb-wizard-shell, just nu känns det som att man kommit in i ett
   annat system när man kommer till de delarna.")

   A self-contained appended block, per this file's merge-by-concatenation convention.

   Why global instead of per-component scoped CSS: the InsuranceAdvisory feature alone
   renders EIGHT tables, and RiskAppetiteStep/RiskSummaryStep already carry the same
   forty lines twice. `.awb-cob-table` IS legacy's own class name (`Cob-Table`,
   cob-advisor-addeqt src/routes/Cob/_Cob.scss:314-345), so this is a named component
   dress, not a utility class — CLAUDE.md's ban is on `d-flex`/`gap-*` in page markup.
   Keyed on `.awb-wizard-shell` / `.awb-wizard-dialog` so legacy COB stays the facit
   for the wizard only and the CRM grids are untouched.
   ============================================================================ */

:root {
    /* `getColor(secondary)` = #4cb7d5 (_variables.scss:3) — the COB accent that legacy
       paints its figures and its info notices in. Referenced with this exact fallback by
       RiskSummaryStep.razor.css since 2026-08-19; declared here so there is one source. */
    --awb-cob-secondary: #4cb7d5;

    /* Wizard stepper track bands (decision 2026-08-25; facit docs/mockups/stepper-branch-mockup.html).
       Securities reuses --awb-cob-secondary above — it IS legacy's accent. The other two have no legacy
       counterpart (the track notion is new), so they are declared here with the other --awb-cob-* tokens
       rather than hard-coded in the scoped stylesheet. The bands paint them at 18%. */
    --awb-cob-track-common: #9aa7b1;
    --awb-cob-track-insurance: #7b5cf0;

    /* Legacy `.Notice` variants (_Notice.scss:44-70): background `lighten(colour, 30%)`
       (success 40%), text `darken(colour, 20%)`, border `lighten(colour, 20%)`, resolved
       off _variables.scss:2-17 because we have no SCSS. The warning triple is the one
       already shipped for the wizard's validation banner and is repeated verbatim. */
    --awb-cob-notice-warning-bg: #fbf2d7;
    --awb-cob-notice-warning-text: #c19212;
    --awb-cob-notice-warning-border: #f7e2a8;
    --awb-cob-notice-danger-bg: #f5c8c6;
    --awb-cob-notice-danger-text: #a1231b;
    --awb-cob-notice-danger-border: #ee9f9a;
    --awb-cob-notice-success-bg: #d5f6ec;
    --awb-cob-notice-success-text: #1c7d60;
    --awb-cob-notice-success-border: #82e3c6;
    --awb-cob-notice-info-bg: #c8e9f2;
    --awb-cob-notice-info-text: #247e97;
    --awb-cob-notice-info-border: #9fd8e8;
}

/* ----------------------------------------------------------------------------
   1. `Cob-Table` — legacy's ONE table dress inside the wizard.

   `.Table-wrapper` (_Table.scss:47-56) is the lightened plate that scrolls sideways
   rather than clipping a wide row; `.Table-column-label` (_Table.scss:64-90) with
   `.Cob-Table`'s 11px override (_Cob.scss:322-324) is the uppercase heading; and
   `.Table-row-value` (_Table.scss:126-142) with _Cob.scss:326-332 is the 32px/12px row
   whose separator is an INSET hairline, not a border (_Cob.scss:315-320).

   Markup contract: `<div class="awb-cob-table-holder"><table class="awb-cob-table">`,
   with `awb-cob-table__num` on the cells legacy right-aligns (its `horizontalAlign:
   'right'` columns). A component keeps its own scoped stylesheet for what is genuinely
   its own — column widths, a totals row, a tone cell.
   ---------------------------------------------------------------------------- */
.awb-wizard-shell .awb-cob-table-holder,
.awb-wizard-dialog .awb-cob-table-holder {
    width: 100%;
    border-radius: 6px;
    background: var(--awb-cob-table-surface, #f7f8f9);
    overflow-x: auto;
    overflow-y: hidden;
}

.awb-wizard-shell .awb-cob-table,
.awb-wizard-dialog .awb-cob-table {
    min-width: 100%;
    border-collapse: collapse;
}

.awb-wizard-shell .awb-cob-table th,
.awb-wizard-dialog .awb-cob-table th {
    padding: 0.625rem;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    vertical-align: top;
}

.awb-wizard-shell .awb-cob-table td,
.awb-wizard-dialog .awb-cob-table td {
    height: 2rem;
    padding: 0.625rem;
    box-shadow: 0 1px rgba(0, 0, 0, 0.05) inset;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.75rem;
    line-height: 1.3;
    text-align: left;
    vertical-align: top;
}

/* Declared after the shared rules so it wins at equal specificity, exactly as
   RiskSummaryStep.razor.css orders its own copy. */
.awb-wizard-shell .awb-cob-table th.awb-cob-table__num,
.awb-wizard-shell .awb-cob-table td.awb-cob-table__num,
.awb-wizard-dialog .awb-cob-table th.awb-cob-table__num,
.awb-wizard-dialog .awb-cob-table td.awb-cob-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A row header cell (`<th>` in a body row — the matrix label column) is a LABEL, not a
   column heading: legacy leaves those sentence case at the row's own type size. */
.awb-wizard-shell .awb-cob-table tbody th,
.awb-wizard-dialog .awb-cob-table tbody th {
    height: 2rem;
    box-shadow: 0 1px rgba(0, 0, 0, 0.05) inset;
    font-size: 0.75rem;
    letter-spacing: normal;
    text-transform: none;
    vertical-align: middle;
}

/* A control hosted in a cell must not inherit the 12px row measure at its own size —
   legacy's in-table inputs keep the field type. */
.awb-wizard-shell .awb-cob-table td .rz-numeric,
.awb-wizard-shell .awb-cob-table td .rz-textbox,
.awb-wizard-dialog .awb-cob-table td .rz-numeric,
.awb-wizard-dialog .awb-cob-table td .rz-textbox {
    font-size: 0.875rem;
}

/* ----------------------------------------------------------------------------
   2. `Notice` — legacy's alert palette and geometry, for every Alert in the wizard.

   The wizard's validation banner already wore the warning triple (WizardShell.razor.css);
   an InsuranceAdvisory step renders danger/info/success notices too, and those came out in
   Radzen's own Bootstrap tones, which is a large part of why the module steps read as
   another product. `.Notice` itself is 14px / 10px padding / 5px radius (_Notice.scss:1-9).
   ---------------------------------------------------------------------------- */
.awb-wizard-shell .awb-alert,
.awb-wizard-dialog .awb-alert {
    padding: 0.625rem;
    border-radius: 5px;
    font-size: 0.875rem;
    line-height: 1.3;
}

.awb-wizard-shell .awb-alert--warning,
.awb-wizard-dialog .awb-alert--warning {
    background: var(--awb-cob-notice-warning-bg);
    color: var(--awb-cob-notice-warning-text);
    border-color: var(--awb-cob-notice-warning-border);
}

.awb-wizard-shell .awb-alert--danger,
.awb-wizard-dialog .awb-alert--danger {
    background: var(--awb-cob-notice-danger-bg);
    color: var(--awb-cob-notice-danger-text);
    border-color: var(--awb-cob-notice-danger-border);
}

.awb-wizard-shell .awb-alert--success,
.awb-wizard-dialog .awb-alert--success {
    background: var(--awb-cob-notice-success-bg);
    color: var(--awb-cob-notice-success-text);
    border-color: var(--awb-cob-notice-success-border);
}

.awb-wizard-shell .awb-alert--info,
.awb-wizard-dialog .awb-alert--info {
    background: var(--awb-cob-notice-info-bg);
    color: var(--awb-cob-notice-info-text);
    border-color: var(--awb-cob-notice-info-border);
}

/* Radzen sets a symmetric 1rem inline margin on the radio label (`--rz-radio-label-margin-inline`),
   which leaves too much air between the button and its text. Tighten the gap to 8px; keep the 16px on
   the right so adjacent options stay separated. Global (not scoped) — the label is Radzen-rendered and
   carries no razor scope attribute. */
.rz-radiobutton-label {
    margin-inline-start: 8px;
    margin-inline-end: 16px;
}

/* KYC section card — the shadowbox every legacy CRM KYC section sits in (`#kyc .kyc-section`:
   white, rounded, padded, soft drop shadow). The AWB <Card> ships with its border/padding commented
   out, so the migrated sections rendered flat; this restores the card chrome for the KYC surface only,
   scoped to the `.awb-kyc-section` wrapper on KycSectionFrame. */
.awb-kyc-section .awb-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* KYC form-control widths (legacy CRM `#kyc .input/.select/.multiselect { width: 240px }`). Global
   rather than scoped: every KYC control is a Radzen element (rz-textbox/rz-dropdown/rz-numeric/...)
   that carries no razor scope attribute, so a scoped rule never reaches it; `.awb-kyc-section` (on the
   KycSectionFrame) is the AWB equivalent of the CRM `#kyc` container. Applied to the field wrapper so
   the "kr" unit suffix travels with the control. */
.awb-kyc-section .awb-form-field-input .awb-number-input,
.awb-kyc-section .awb-form-field-input .rz-textbox,
.awb-kyc-section .awb-form-field-input .rz-textarea,
.awb-kyc-section .awb-form-field-input .rz-dropdown,
.awb-kyc-section .awb-form-field-input .rz-numeric,
.awb-kyc-section .awb-form-field-input .rz-datepicker,
.awb-kyc-section .awb-form-field-input .rz-multiselect {
    max-width: 240px;
    width: 100%;
}

/* Money-laundering exception: the AML questions are wide (legacy `#kyc .money-laundering ...
   { width: 500px }`). The `.awb-aml-questions` wrapper is the AML section's marker. */
.awb-kyc-section .awb-aml-questions .awb-form-field-input .rz-dropdown,
.awb-kyc-section .awb-aml-questions .awb-form-field-input .rz-textbox,
.awb-kyc-section .awb-aml-questions .awb-form-field-input .rz-numeric {
    max-width: 500px;
}

/* Inside the advisory-case wizard the measure is legacy COB's TextField box (FormField.razor.css:76-78
   and :121-131 — up to 480px), not legacy CRM's 240px `#kyc` column: AmlStep mounts the KYC sections
   there. A capped control in an uncapped box leaves Radzen's dropdown trigger — absolutely pinned to
   the CONTROL's right edge — stranded mid-frame, and halves every field's hit area. Keyed on
   .awb-wizard-shell so the KYC tab keeps its own facit. */
.awb-wizard-shell .awb-kyc-section .awb-form-field-input .awb-number-input,
.awb-wizard-shell .awb-kyc-section .awb-form-field-input .rz-textbox,
.awb-wizard-shell .awb-kyc-section .awb-form-field-input .rz-textarea,
.awb-wizard-shell .awb-kyc-section .awb-form-field-input .rz-dropdown,
.awb-wizard-shell .awb-kyc-section .awb-form-field-input .rz-numeric,
.awb-wizard-shell .awb-kyc-section .awb-form-field-input .rz-datepicker,
.awb-wizard-shell .awb-kyc-section .awb-form-field-input .rz-multiselect {
    max-width: none;
}

/* Table exception: inside the risk-allocation grid the amount inputs fill their cell rather than being
   capped (legacy: the table inputs are not covered by the 240px `#kyc .input` rule). Lifts the cap on
   both the wrapper and the nested Radzen numeric the general rule above set. */
.awb-kyc-section .risk-allocation-table .awb-number-input,
.awb-kyc-section .risk-allocation-table .awb-number-input .rz-numeric {
    max-width: none;
    width: 100%;
}

/* UnitInside numeric fields (`<NumberInput Unit=... UnitInside>`): RadzenNumeric wraps its input in a
   `.rz-numeric` container that carries its own left inset, which reads as a stray indent next to the
   sibling `.rz-textbox` fields (visible on the KYC amount fields and the Övriga tillgångar dialog).
   Global, not scoped: `.rz-numeric` is Radzen-rendered and carries no razor scope attribute.

   A numeric field pads twice — the base rule puts 8px on the `.rz-numeric` wrapper AND the inner
   `<input>` carries its own inline padding — so the left inset stacks and reads as a stray indent
   next to the sibling `.rz-textbox` fields (a textbox pads only once). Zero the wrapper's left
   padding and pin the input to 8px, giving a single 8px inset. Covers the unit-inside variant and
   plain numeric fields (e.g. "Antal barn/försörjningspliktiga"). CRM-334: the K&E/IDD grids
   (`.awb-knowledge`) host bare `RadzenNumeric`, so they get the same single inset — 9px, the
   dropdown's inset in the same row. */
.awb-number-input .rz-numeric,
.awb-knowledge .rz-numeric {
    padding-inline-start: 0;
}

.awb-number-input .rz-numeric input,
.awb-knowledge .rz-numeric input {
    padding-inline-start: 8px;
}

/* === CRM-320 WIZARD PIN: BEGIN === */
.awb-wizard-shell,
.awb-wizard-dialog,
.rz-dialog:has(.awb-wizard-dialog) {
  --rz-primary:#4a6fa5; --rz-primary-light:#6b89b6; --rz-primary-lighter:rgba(74, 111, 165, 0.12); --rz-primary-dark:#3b5983; --rz-primary-darker:#2e2c8f;
  --rz-text-color:#424242; --rz-text-title-color:#212121; --rz-text-secondary-color:#616161;
  /* Radzen :root derivatives re-resolved against the pinned base tokens above (generated from material-base.css) */
  --rz-accordion-border-radius:var(--rz-border-radius); --rz-accordion-hover-color:var(--rz-text-title-color); --rz-accordion-item-background-color:var(--rz-base-background-color);
  --rz-accordion-item-color:var(--rz-text-secondary-color); --rz-accordion-item-focus-outline:var(--rz-outline-focus); --rz-accordion-selected-color:var(--rz-text-title-color);
  --rz-alert-border-radius:var(--rz-border-radius); --rz-alert-color:var(--rz-text-color); --rz-alert-icon-color:var(--rz-alert-color); --rz-alert-title-color:var(--rz-text-h6-color);
  --rz-badge-border-radius:var(--rz-border-radius); --rz-badge-pill-border-radius:calc(4 * var(--rz-border-radius)); --rz-border-danger:var(--rz-border-width) solid var(--rz-danger);
  --rz-border-danger-lighter:var(--rz-border-width) solid var(--rz-danger-lighter); --rz-border-focus:var(--rz-border-width) solid var(--rz-primary);
  --rz-border-info:var(--rz-border-width) solid var(--rz-info); --rz-border-info-dark:var(--rz-border-width) solid var(--rz-info-dark);
  --rz-border-info-lighter:var(--rz-border-width) solid var(--rz-info-lighter); --rz-border-primary:var(--rz-border-width) solid var(--rz-primary);
  --rz-border-primary-dark:var(--rz-border-width) solid var(--rz-primary-dark); --rz-border-primary-darker:var(--rz-border-width) solid var(--rz-primary-darker);
  --rz-border-primary-light:var(--rz-border-width) solid var(--rz-primary-light); --rz-border-primary-lighter:var(--rz-border-width) solid var(--rz-primary-lighter);
  --rz-border-success:var(--rz-border-width) solid var(--rz-success); --rz-border-success-lighter:var(--rz-border-width) solid var(--rz-success-lighter);
  --rz-border-warning:var(--rz-border-width) solid var(--rz-warning); --rz-border-warning-lighter:var(--rz-border-width) solid var(--rz-warning-lighter);
  --rz-button-base-background-color:var(--rz-primary); --rz-button-border-radius:var(--rz-border-radius); --rz-button-focus-outline:var(--rz-outline-focus);
  --rz-card-background-color:var(--rz-base-background-color); --rz-card-border-radius:var(--rz-border-radius); --rz-card-flat-background-color:var(--rz-base-background-color);
  --rz-carousel-border-radius:var(--rz-card-border-radius); --rz-carousel-prev-next-button-border-radius:var(--rz-button-border-radius); --rz-chart-legend-focus-outline:var(--rz-outline-focus);
  --rz-chart-marker-stroke:var(--rz-base-background-color); --rz-chart-tooltip-background:var(--rz-base-background-color); --rz-chart-tooltip-border-radius:var(--rz-tooltip-border-radius);
  --rz-chart-tooltip-color:var(--rz-text-color); --rz-chart-tooltip-item-border-radius:var(--rz-border-radius); --rz-chat-avatar-border-radius:var(--rz-border-radius);
  --rz-chat-background-color:var(--rz-base-background-color); --rz-chat-border-radius:var(--rz-border-radius); --rz-chat-header-background-color:var(--rz-base-background-color);
  --rz-chat-message-callout-radius:calc(var(--rz-border-radius) / 4); --rz-chat-message-text-border-radius:var(--rz-border-radius); --rz-chat-message-user-background-color:var(--rz-primary-lighter);
  --rz-checkbox-checked-background-color:var(--rz-primary); --rz-checkbox-checked-border:var(--rz-border-primary); --rz-checkbox-checked-hover-background-color:var(--rz-primary-light);
  --rz-checkbox-checked-hover-border:var(--rz-border-primary); --rz-checkbox-focus-outline:var(--rz-outline-focus); --rz-chip-border-radius:calc(4 * var(--rz-border-radius));
  --rz-chip-color:var(--rz-text-color); --rz-chip-selected-outline:var(--rz-outline-focus); --rz-colorpicker-focus-outline:var(--rz-outline-focus);
  --rz-colorpicker-item-border-radius:var(--rz-border-radius); --rz-colorpicker-panel-background-color:var(--rz-base-background-color); --rz-colorpicker-value-border-radius:var(--rz-border-radius);
  --rz-column-drag-handle-hover-color:var(--rz-text-title-color); --rz-datafilter-item-path-border-radius:calc(2 * var(--rz-border-radius));
  --rz-datalist-background-color:var(--rz-base-background-color); --rz-datalist-border-radius:var(--rz-border-radius); --rz-datalist-item-background-color:var(--rz-base-background-color);
  --rz-datepicker-calendar-color:var(--rz-text-color); --rz-datepicker-calendar-hover-color:var(--rz-text-title-color); --rz-datepicker-calendar-today-box-shadow:inset 0 0 0 1px var(--rz-text-color);
  --rz-datepicker-calendar-today-color:var(--rz-text-color); --rz-datepicker-focus-outline:var(--rz-outline-focus); --rz-datepicker-header-background-color:var(--rz-base-background-color);
  --rz-datepicker-header-color:var(--rz-text-secondary-color); --rz-datepicker-panel-background-color:var(--rz-base-background-color);
  --rz-datepicker-trigger-icon-color:var(--rz-text-secondary-color); --rz-datepicker-trigger-icon-hover-color:var(--rz-text-title-color); --rz-dialog-background-color:var(--rz-base-background-color);
  --rz-dialog-close-hover-color:var(--rz-text-title-color); --rz-dialog-resize-bar-color:var(--rz-splitter-bar-color); --rz-dialog-title-background-color:var(--rz-base-background-color);
  --rz-dialog-title-color:var(--rz-text-title-color); --rz-dropdown-item-hover-color:var(--rz-text-title-color); --rz-dropdown-item-selected-background-color:var(--rz-primary-lighter);
  --rz-dropdown-item-selected-hover-background-color:var(--rz-primary-lighter); --rz-dropdown-open-background-color:var(--rz-base-background-color);
  --rz-dropdown-open-border:2px solid var(--rz-primary); --rz-editor-border-radius:var(--rz-border-radius); --rz-editor-content-background-color:var(--rz-base-background-color);
  --rz-editor-focus-outline:var(--rz-outline-focus); --rz-editor-toolbar-background-color:var(--rz-base-background-color); --rz-fieldset-border-radius:var(--rz-border-radius);
  --rz-fieldset-legend-color:var(--rz-text-color); --rz-fieldset-toggle-focus-outline:var(--rz-outline-focus); --rz-footer-background-color:var(--rz-base-background-color);
  --rz-footer-color:var(--rz-text-secondary-color); --rz-form-error-color:var(--rz-danger); --rz-form-field-filled-border-radius:var(--rz-border-radius) var(--rz-border-radius) 0 0;
  --rz-form-field-focus-shadow:var(--rz-input-focus-shadow); --rz-form-field-label-color:var(--rz-text-color); --rz-form-field-label-floating-background-color:var(--rz-input-background-color);
  --rz-form-field-label-focus-color:var(--rz-primary); --rz-gantt-background-color:var(--rz-base-background-color); --rz-gantt-border-radius:var(--rz-border-radius);
  --rz-gantt-event-border-radius:var(--rz-border-radius); --rz-gauge-pointer-color:var(--rz-text-secondary-color); --rz-grid-apply-filter-button-background-color:var(--rz-base-background-color);
  --rz-grid-apply-filter-button-color:var(--rz-primary); --rz-grid-background-color:var(--rz-base-background-color); --rz-grid-cell-color:var(--rz-text-color);
  --rz-grid-cell-focus-outline:var(--rz-outline-focus); --rz-grid-clear-filter-button-background-color:var(--rz-base-background-color); --rz-grid-clear-filter-button-color:var(--rz-text-color);
  --rz-grid-filter-background-color:var(--rz-base-background-color); --rz-grid-filter-buttons-background-color:var(--rz-base-background-color); --rz-grid-focus-outline:var(--rz-outline-focus);
  --rz-grid-foot-cell-color:var(--rz-text-color); --rz-grid-frozen-cell-background-color:var(--rz-base-background-color);
  --rz-grid-frozen-stripe-odd-background-color:var(--rz-grid-stripe-odd-background-color); --rz-grid-group-header-item-border-radius:calc(4 * var(--rz-border-radius));
  --rz-grid-group-header-item-color:var(--rz-text-color); --rz-grid-header-background-color:var(--rz-base-background-color); --rz-grid-header-filter-icon-active-color:var(--rz-primary);
  --rz-grid-header-filter-icon-hover-color:var(--rz-text-title-color); --rz-grid-hover-color:var(--rz-text-title-color); --rz-grid-selected-background-color:var(--rz-primary-lighter);
  --rz-grid-simple-filter-icon-active-background-color:var(--rz-primary-lighter); --rz-grid-stripe-odd-background-color:var(--rz-base-background-color);
  --rz-grid-toolbar-background-color:var(--rz-base-background-color); --rz-header-background-color:var(--rz-primary); --rz-input-background-color:var(--rz-base-background-color);
  --rz-input-border-radius:var(--rz-border-radius); --rz-input-disabled-background-color:var(--rz-base-background-color); --rz-input-focus-background-color:var(--rz-base-background-color);
  --rz-input-focus-border:var(--rz-border-width) solid var(--rz-outline-color); --rz-input-focus-border-block-end:var(--rz-input-focus-border);
  --rz-input-focus-shadow:inset 0 0 0 1px var(--rz-primary); --rz-input-hover-background-color:var(--rz-base-background-color); --rz-input-value-color:var(--rz-text-color);
  --rz-layout-background-color:var(--rz-body-background-color); --rz-link-focus-outline:var(--rz-outline-focus); --rz-listbox-background-color:var(--rz-input-background-color);
  --rz-listbox-border-radius:var(--rz-input-border-radius); --rz-listbox-focus-border:var(--rz-input-focus-border); --rz-listbox-focus-shadow:var(--rz-input-focus-shadow);
  --rz-map-background-color:var(--rz-base-background-color); --rz-menu-background-color:var(--rz-base-background-color); --rz-menu-border-radius:var(--rz-border-radius);
  --rz-menu-item-color:var(--rz-text-color); --rz-menu-item-focus-outline:var(--rz-outline-focus); --rz-menu-item-hover-color:var(--rz-text-title-color);
  --rz-menu-item-icon-color:var(--rz-text-color); --rz-menu-item-icon-hover-color:var(--rz-text-title-color); --rz-menu-item-selected-color:var(--rz-text-title-color);
  --rz-menu-top-item-background-color:var(--rz-primary); --rz-notification-border-radius:var(--rz-border-radius); --rz-notification-error-background-color:var(--rz-danger-lighter);
  --rz-notification-error-icon-color:var(--rz-danger); --rz-notification-info-background-color:var(--rz-info-lighter); --rz-notification-info-icon-color:var(--rz-info);
  --rz-notification-success-background-color:var(--rz-success-lighter); --rz-notification-success-icon-color:var(--rz-success); --rz-notification-warning-background-color:var(--rz-warning-lighter);
  --rz-notification-warning-icon-color:var(--rz-warning); --rz-numeric-button-border-radius:calc(var(--rz-border-radius) - 2px); --rz-numeric-button-color:var(--rz-text-color);
  --rz-outline-color:var(--rz-primary); --rz-outline-danger:var(--rz-outline-width) solid var(--rz-danger); --rz-outline-danger-lighter:var(--rz-outline-width) solid var(--rz-danger-lighter);
  --rz-outline-focus:var(--rz-outline-width) solid var(--rz-outline-color); --rz-outline-info:var(--rz-outline-width) solid var(--rz-info);
  --rz-outline-info-dark:var(--rz-outline-width) solid var(--rz-info-dark); --rz-outline-info-lighter:var(--rz-outline-width) solid var(--rz-info-lighter);
  --rz-outline-primary:var(--rz-outline-width) solid var(--rz-primary); --rz-outline-primary-dark:var(--rz-outline-width) solid var(--rz-primary-dark);
  --rz-outline-primary-darker:var(--rz-outline-width) solid var(--rz-primary-darker); --rz-outline-primary-light:var(--rz-outline-width) solid var(--rz-primary-light);
  --rz-outline-primary-lighter:var(--rz-outline-width) solid var(--rz-primary-lighter); --rz-outline-success:var(--rz-outline-width) solid var(--rz-success);
  --rz-outline-success-lighter:var(--rz-outline-width) solid var(--rz-success-lighter); --rz-outline-warning:var(--rz-outline-width) solid var(--rz-warning);
  --rz-outline-warning-lighter:var(--rz-outline-width) solid var(--rz-warning-lighter); --rz-overlay-background-color:var(--rz-base-background-color);
  --rz-pager-back-button-color:var(--rz-text-color); --rz-pager-next-button-color:var(--rz-text-color); --rz-pager-numeric-button-color:var(--rz-text-color);
  --rz-pager-numeric-button-hover-color:var(--rz-text-title-color); --rz-pager-numeric-button-selected-background-color:var(--rz-primary-lighter);
  --rz-panel-background-color:var(--rz-base-background-color); --rz-panel-border-radius:var(--rz-border-radius); --rz-panel-hover-color:var(--rz-text-title-color);
  --rz-panel-menu-focus-outline:var(--rz-outline-focus); --rz-panel-menu-item-2nd-level-active-background-color:var(--rz-primary-lighter);
  --rz-panel-menu-item-2nd-level-background-color:var(--rz-base-background-color); --rz-panel-menu-item-2nd-level-border-radius:var(--rz-border-radius);
  --rz-panel-menu-item-2nd-level-hover-color:var(--rz-text-title-color); --rz-panel-menu-item-3rd-level-active-background-color:var(--rz-primary-lighter);
  --rz-panel-menu-item-3rd-level-background-color:var(--rz-base-background-color); --rz-panel-menu-item-3rd-level-hover-color:var(--rz-text-title-color);
  --rz-panel-menu-item-active-background-color:var(--rz-primary-lighter); --rz-panel-menu-item-background-color:var(--rz-base-background-color); --rz-panel-menu-item-color:var(--rz-text-title-color);
  --rz-panel-menu-item-hover-color:var(--rz-text-title-color); --rz-panel-toggle-icon-focus-outline:var(--rz-outline-focus); --rz-profile-menu-background-color:var(--rz-base-background-color);
  --rz-profile-menu-border-radius:var(--rz-border-radius); --rz-profile-menu-item-focus-outline:var(--rz-outline-focus); --rz-profile-menu-top-item-background-color:var(--rz-primary);
  --rz-progressbar-background-color:var(--rz-primary-lighter); --rz-progressbar-color:var(--rz-text-color); --rz-progressbar-value-background-color:var(--rz-primary);
  --rz-radio-active-background-color:var(--rz-base-background-color); --rz-radio-checked-background-color:var(--rz-base-background-color); --rz-radio-checked-border:var(--rz-border-primary);
  --rz-radio-checked-hover-background-color:var(--rz-base-background-color); --rz-radio-circle-background-color:var(--rz-primary); --rz-radio-circle-hover-background-color:var(--rz-primary-light);
  --rz-radio-focus-outline:var(--rz-outline-focus); --rz-range-nav-border-radius:var(--rz-border-radius); --rz-range-nav-compact-background-color:var(--rz-primary-lighter);
  --rz-range-nav-compact-border-radius:var(--rz-border-radius); --rz-range-nav-compact-window-background-color:var(--rz-primary); --rz-range-nav-handle-hover-background-color:var(--rz-primary);
  --rz-range-nav-handle-hover-shadow:0px 0px 0px 10px var(--rz-primary-lighter); --rz-range-nav-shade-background-color:var(--rz-base-background-color);
  --rz-rating-color:var(--rz-text-secondary-color); --rz-rating-focus-color:var(--rz-primary-darker); --rz-rating-selected-color:var(--rz-primary); --rz-sankey-label-color:var(--rz-text-color);
  --rz-sankey-label-stroke:var(--rz-body-background-color); --rz-scheduler-background-color:var(--rz-base-background-color); --rz-scheduler-border-radius:var(--rz-border-radius);
  --rz-scheduler-event-background-color:var(--rz-info); --rz-scheduler-focus-outline:var(--rz-outline-focus); --rz-scheduler-header-background-color:var(--rz-base-background-color);
  --rz-scheduler-prev-next-button-background-color:var(--rz-base-background-color); --rz-scheduler-prev-next-button-color:var(--rz-text-color);
  --rz-scheduler-toolbar-background-color:var(--rz-base-background-color); --rz-scheduler-toolbar-title-color:var(--rz-text-title-color);
  --rz-scheduler-view-button-background-color:var(--rz-base-background-color); --rz-scheduler-view-button-color:var(--rz-text-secondary-color);
  --rz-scheduler-view-selected-background-color:var(--rz-primary-lighter); --rz-selectbar-border-radius:var(--rz-border-radius);
  --rz-selectbar-button-focus-outline:var(--rz-outline-width) solid var(--rz-text-color); --rz-selectbar-color:var(--rz-text-color); --rz-selectbar-focus-outline:var(--rz-outline-focus);
  --rz-selectbar-selected-background-color:var(--rz-primary-lighter); --rz-sidebar-background-color:var(--rz-base-background-color); --rz-sidebar-color:var(--rz-text-color);
  --rz-sidebar-toggle-focus-outline:var(--rz-outline-focus); --rz-sidebar-toggle-hover-background-color:var(--rz-primary-light); --rz-signature-pad-background-color:var(--rz-base-background-color);
  --rz-signature-pad-border-radius:var(--rz-input-border-radius); --rz-signature-pad-clear-color:var(--rz-text-secondary-color); --rz-signature-pad-clear-hover-color:var(--rz-text-color);
  --rz-skeleton-border-radius:var(--rz-border-radius); --rz-slider-background-color:var(--rz-primary-lighter); --rz-slider-border-radius:var(--rz-border-radius);
  --rz-slider-handle-background-color:var(--rz-primary); --rz-slider-handle-focus-outline:var(--rz-outline-focus); --rz-slider-handle-hover-background-color:var(--rz-primary);
  --rz-slider-handle-hover-shadow:0px 0px 0px 10px var(--rz-primary-lighter); --rz-slider-range-background-color:var(--rz-primary); --rz-splitbutton-background-color:var(--rz-primary);
  --rz-splitbutton-border-radius:var(--rz-border-radius); --rz-splitter-bar-background-color-active:var(--rz-primary); --rz-splitter-bar-color:var(--rz-text-secondary-color);
  --rz-spreadsheet-header-background-color:var(--rz-base-background-color); --rz-steps-button-color:var(--rz-text-secondary-color); --rz-steps-number-focus-outline:var(--rz-outline-focus);
  --rz-switch-checked-background-color:var(--rz-primary-lighter); --rz-switch-focus-outline:var(--rz-outline-focus); --rz-tabs-tab-color:var(--rz-text-secondary-color);
  --rz-tabs-tab-focus-color:var(--rz-text-title-color); --rz-tabs-tab-focus-outline:var(--rz-outline-focus); --rz-tabs-tab-hover-color:var(--rz-text-title-color);
  --rz-tabs-tab-selected-color:var(--rz-primary); --rz-text-body1-color:var(--rz-text-color); --rz-text-body2-color:var(--rz-text-color); --rz-text-button-color:var(--rz-text-color);
  --rz-text-caption-color:var(--rz-text-color); --rz-text-display-h1-color:var(--rz-text-title-color); --rz-text-display-h2-color:var(--rz-text-title-color);
  --rz-text-display-h3-color:var(--rz-text-title-color); --rz-text-display-h4-color:var(--rz-text-title-color); --rz-text-display-h5-color:var(--rz-text-title-color);
  --rz-text-display-h6-color:var(--rz-text-title-color); --rz-text-h1-color:var(--rz-text-title-color); --rz-text-h2-color:var(--rz-text-title-color); --rz-text-h3-color:var(--rz-text-title-color);
  --rz-text-h4-color:var(--rz-text-title-color); --rz-text-h5-color:var(--rz-text-title-color); --rz-text-h6-color:var(--rz-text-title-color); --rz-text-overline-color:var(--rz-text-color);
  --rz-text-selection-background-color:var(--rz-primary-lighter); --rz-text-subtitle1-color:var(--rz-text-title-color); --rz-text-subtitle2-color:var(--rz-text-title-color);
  --rz-tile-layout-item-background-color:var(--rz-base-background-color); --rz-tile-layout-item-border-radius:var(--rz-card-border-radius);
  --rz-tile-layout-overlay-background-color:var(--rz-primary-lighter); --rz-timeline-line-border-radius:calc(var(--rz-border-radius) * 20);
  --rz-timeline-point-border:3px solid var(--rz-base-background-color); --rz-timeline-point-border-radius:calc(var(--rz-border-radius) * 12); --rz-timeline-point-color:var(--rz-text-color);
  --rz-timepicker-background-color:var(--rz-base-background-color); --rz-timepicker-button-color:var(--rz-text-color); --rz-timepicker-color:var(--rz-text-color);
  --rz-timepicker-separator-color:var(--rz-text-color); --rz-timespanpicker-focus-outline:var(--rz-outline-focus); --rz-timespanpicker-panel-background-color:var(--rz-base-background-color);
  --rz-timespanpicker-trigger-icon-color:var(--rz-text-secondary-color); --rz-timespanpicker-trigger-icon-hover-color:var(--rz-text-title-color);
  --rz-toc-horizontal-background-color:var(--rz-base-background-color); --rz-toc-horizontal-border-radius:var(--rz-border-radius); --rz-toc-horizontal-link-selected-color:var(--rz-primary);
  --rz-toc-link-border-radius:var(--rz-border-radius); --rz-toc-link-color:var(--rz-text-color); --rz-toc-link-hover-color:var(--rz-primary-dark); --rz-toc-link-selected-color:var(--rz-primary);
  --rz-toc-link-selected-indicator-color:var(--rz-primary); --rz-tooltip-background-color:var(--rz-info); --rz-tooltip-border-radius:var(--rz-border-radius);
  --rz-tree-node-focus-outline:var(--rz-outline-focus); --rz-tree-node-hover-color:var(--rz-text-title-color); --rz-tree-node-selected-background-color:var(--rz-primary-lighter);
  --rz-tree-node-selected-border-radius:var(--rz-border-radius); --rz-tree-node-toggle-hover-color:var(--rz-text-color); --rz-upload-button-background-color:var(--rz-primary);
  --rz-upload-button-bar-border-radius:var(--rz-border-radius); --rz-upload-cancel-color:var(--rz-text-color); --rz-upload-choose-active-color:var(--rz-text-title-color);
  --rz-upload-choose-color:var(--rz-text-color); --rz-upload-choose-hover-color:var(--rz-text-title-color); --rz-upload-files-background-color:var(--rz-base-background-color);
  --rz-upload-files-remove-color:var(--rz-text-color); --rz-validator-background-color:var(--rz-danger);
  /* derivatives of the seven remapped --rz-on-*-lighter tokens */
  --rz-border-on-base-lighter:var(--rz-border-width) solid var(--rz-on-base-lighter);
  --rz-border-on-danger-lighter:var(--rz-border-width) solid var(--rz-on-danger-lighter);
  --rz-border-on-info-lighter:var(--rz-border-width) solid var(--rz-on-info-lighter);
  --rz-border-on-primary-lighter:var(--rz-border-width) solid var(--rz-on-primary-lighter);
  --rz-border-on-secondary-lighter:var(--rz-border-width) solid var(--rz-on-secondary-lighter);
  --rz-border-on-success-lighter:var(--rz-border-width) solid var(--rz-on-success-lighter);
  --rz-border-on-warning-lighter:var(--rz-border-width) solid var(--rz-on-warning-lighter);
  --rz-chat-message-user-color:var(--rz-on-primary-lighter);
  --rz-dropdown-item-selected-color:var(--rz-on-primary-lighter);
  --rz-dropdown-item-selected-hover-color:var(--rz-on-primary-lighter);
  --rz-grid-cell-focus-color:var(--rz-on-secondary-lighter);
  --rz-grid-selected-color:var(--rz-on-primary-lighter);
  --rz-grid-simple-filter-icon-active-color:var(--rz-on-primary-lighter);
  --rz-outline-on-base-lighter:var(--rz-outline-width) solid var(--rz-on-base-lighter);
  --rz-outline-on-danger-lighter:var(--rz-outline-width) solid var(--rz-on-danger-lighter);
  --rz-outline-on-info-lighter:var(--rz-outline-width) solid var(--rz-on-info-lighter);
  --rz-outline-on-primary-lighter:var(--rz-outline-width) solid var(--rz-on-primary-lighter);
  --rz-outline-on-secondary-lighter:var(--rz-outline-width) solid var(--rz-on-secondary-lighter);
  --rz-outline-on-success-lighter:var(--rz-outline-width) solid var(--rz-on-success-lighter);
  --rz-outline-on-warning-lighter:var(--rz-outline-width) solid var(--rz-on-warning-lighter);
  --rz-pager-numeric-button-selected-color:var(--rz-on-primary-lighter);
  --rz-panel-menu-item-2nd-level-active-color:var(--rz-on-primary-lighter);
  --rz-panel-menu-item-3rd-level-active-color:var(--rz-on-primary-lighter);
  --rz-panel-menu-item-active-color:var(--rz-on-primary-lighter);
  --rz-scheduler-view-selected-color:var(--rz-on-primary-lighter);
  --rz-selectbar-selected-color:var(--rz-on-primary-lighter);
  --rz-switch-checked-circle-background-color:var(--rz-on-primary-lighter);
  --rz-tree-node-selected-color:var(--rz-on-primary-lighter);
  --rz-on-base-lighter:#212121; --rz-on-primary-lighter:#4340D2; --rz-on-secondary-lighter:#e31c65; --rz-on-info-lighter:#2196f3; --rz-on-success-lighter:#4caf50; --rz-on-warning-lighter:#ff9800; --rz-on-danger-lighter:#f44336;
  --rz-danger:#f44336; --rz-success:#4caf50; --rz-warning:#ff9800; --rz-info:#2196f3; --rz-info-dark:#1a78c2;
  --rz-danger-lighter:rgba(244, 67, 54, 0.2); --rz-success-lighter:rgba(76, 175, 80, 0.16); --rz-warning-lighter:rgba(255, 152, 0, 0.2); --rz-info-lighter:rgba(33, 150, 243, 0.2);
  --rz-border-radius:4px; --rz-base-background-color:#ffffff;
  --rz-datatable-row-hover-background-color:rgba(0, 0, 0, 0.04); --rz-grid-hover-background-color:#f5f5f5;
  --rz-grid-header-font-size:0.875rem; --rz-grid-header-font-weight:500; --rz-grid-header-text-transform:none; --rz-grid-header-color:#212121;
  --rz-text-font-family:var(--awb-font-wizard); --awb-font:var(--awb-font-wizard); --awb-font-heading:var(--awb-font-wizard);
  --awb-danger-soft-bg:#fdf6f6; --awb-danger-soft-border:#ecd2d2; --awb-danger-soft-text:#9a4a4a;
  --awb-warning-soft-bg:#fdfbef; --awb-warning-soft-border:#ecdfb0; --awb-warning-soft-text:#8a7028;
  --awb-info-soft-bg:#f5f9fc; --awb-info-soft-border:#d6e3ee; --awb-info-soft-text:#46647f;
  --awb-success-soft-bg:#f5faf6; --awb-success-soft-border:#d3e6d9; --awb-success-soft-text:#46705a;
  --awb-notice-radius:8px;
  --awb-card-bg:#ffffff; --awb-card-border:none; --awb-card-radius:4px; --awb-card-padding:1rem;
  --awb-card-title-font:var(--awb-font-wizard); --awb-card-title-size:22px; --awb-card-title-tracking:normal; --awb-card-title-line-height:normal;
  --awb-page-title-size:2em; --awb-page-title-weight:700; --awb-page-title-tracking:normal;
}
.awb-shell-content:has(.awb-wizard-shell) { background-color: #f7f8fa !important; }
/* === CRM-320 WIZARD PIN: END === */