/* /Common/UI/AddEqtWordmark.razor.rz.scp.css */
.awb-wordmark[b-lxu7xrcujw] {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 24px;
    fill: var(--navy);
}
/* /Common/UI/AdvisorAvatars.razor.rz.scp.css */
.awb-customer-advisors[b-vb66b4yskp] {
    display: inline-flex;
}

.awb-customer-avatar[b-vb66b4yskp] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 600;
    margin-left: -7px;
    border: 2px solid #fff;
}

.awb-customer-avatar:first-child[b-vb66b4yskp] {
    margin-left: 0;
}

.awb-customer-avatar--more[b-vb66b4yskp] {
    background: var(--muted);
}
/* /Common/UI/Alert.razor.rz.scp.css */
.awb-alert[b-ygnjf9na1m] {
    border-radius: var(--awb-notice-radius, 8px);
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    font-size: 0.9375rem;
}

.awb-alert-header[b-ygnjf9na1m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Icon-only alert (no title): icon sits to the left of the body text. A titled alert
   keeps the icon+title-above-body stack. */
.awb-alert--icon-only[b-ygnjf9na1m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.awb-alert--icon-only .awb-alert-header[b-ygnjf9na1m] {
    margin-bottom: 0;
}

.awb-alert-title[b-ygnjf9na1m] {
    font-weight: 600;
}

/* All four variants share one pastel treatment (maintainer, 2026-08-25). A notice is a filled
   panel, and the saturated Bootstrap-era tones read as alarms whatever they say — the info cyan
   and the warning orange especially. The warning also moved off orange towards yellow, so a
   "your user is not configured" notice stops looking like a failure. */
.awb-alert--info[b-ygnjf9na1m] {
    background: var(--awb-info-soft-bg, var(--navy-dim));
    border-color: var(--awb-info-soft-border, var(--navy-line));
    color: var(--awb-info-soft-text, var(--navy));
}

.awb-alert--success[b-ygnjf9na1m] {
    background: var(--awb-success-soft-bg, var(--green-tint));
    border-color: var(--awb-success-soft-border, var(--green-line));
    color: var(--awb-success-soft-text, var(--green-text));
}

.awb-alert--warning[b-ygnjf9na1m] {
    background: var(--awb-warning-soft-bg, var(--amber-tint));
    border-color: var(--awb-warning-soft-border, var(--amber-line));
    color: var(--awb-warning-soft-text, var(--amber-text));
}

/* Shares the validation summary's pastel set so the two notice blocks read as one family. */
.awb-alert--danger[b-ygnjf9na1m] {
    background: var(--awb-danger-soft-bg, var(--red-tint));
    border-color: var(--awb-danger-soft-border, var(--red-line));
    color: var(--awb-danger-soft-text, var(--red-text));
}
/* /Common/UI/AwbFormSubmitButton.razor.rz.scp.css */
/* CRM-225 — the submit button's shake on a refused validation (AC4). The wrapper span carries the
   class; the component removes it on animationend so it re-arms for the next refused submit. The
   keyframe name is UNIQUE (awb-form-submit-shake) so the isolation-rewritten name keeps that prefix
   and the animationend handler can match its OWN animation by prefix. */

.awb-form-submit-button[b-ll0m9ey79k] {
    display: inline-flex;
}

.awb-form-submit-button--shake[b-ll0m9ey79k] {
    animation: awb-form-submit-shake-b-ll0m9ey79k 0.4s ease;
}

@keyframes awb-form-submit-shake-b-ll0m9ey79k {
    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-4px);
    }

    40%,
    80% {
        transform: translateX(4px);
    }
}

/* Reduced motion: keep a FINITE, transform-free animation so animationend STILL fires and the single
   animationend handler stays the sole reset path — the summary + red borders carry the meaning. */
@media (prefers-reduced-motion: reduce) {
    .awb-form-submit-button--shake[b-ll0m9ey79k] {
        animation: awb-form-submit-shake-b-ll0m9ey79k 1ms linear;
    }

    @keyframes awb-form-submit-shake-b-ll0m9ey79k {
        0%,
        100% {
            transform: translateX(0);
        }
    }
}
/* /Common/UI/AwbValidationSummary.razor.rz.scp.css */
/* Pastel rather than the full danger red (maintainer, 2026-08-25): as a filled panel the saturated
   red shouted over the form it belongs to. The red that still has to be loud is the border on the
   failing CONTROL — that one points somewhere, this one only reads. */
.awb-validation-summary[b-11gxlly8a2] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--awb-danger-soft-border, var(--red-line));
    border-radius: var(--awb-notice-radius, 8px);
    background: var(--awb-danger-soft-bg, var(--red-tint));
    color: var(--awb-danger-soft-text, var(--red-text));
}

.awb-validation-summary-title[b-11gxlly8a2] {
    display: block;
    margin-bottom: 0.25rem;
}

.awb-validation-summary-list[b-11gxlly8a2] {
    margin: 0;
    padding-inline-start: 1.25rem;
}
/* /Common/UI/Badge.razor.rz.scp.css */
.awb-badge[b-lk8um39j35] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font: 600 11.5px/1.4 var(--font-body);
}

.awb-badge[b-lk8um39j35]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--awb-badge-dot, var(--neutral-dot));
}

.awb-badge:not(.awb-badge--success, .awb-badge--warning, .awb-badge--danger, .awb-badge--info)[b-lk8um39j35]::before,
.awb-badge--plain[b-lk8um39j35]::before,
.awb-badge:has(.rzi)[b-lk8um39j35]::before {
    display: none;
}

.awb-badge--primary[b-lk8um39j35] {
    background: var(--awb-info-chip-bg);
    color: var(--awb-info-chip-text);
}

.awb-badge--secondary[b-lk8um39j35] {
    background: var(--snow-2);
    color: var(--coal-dim);
}

.awb-badge--success[b-lk8um39j35] {
    background: var(--awb-success-chip-bg);
    color: var(--awb-success-chip-text);
    --awb-badge-dot: var(--awb-success-chip-dot);
}

.awb-badge--warning[b-lk8um39j35] {
    background: var(--awb-warning-chip-bg);
    color: var(--awb-warning-chip-text);
    --awb-badge-dot: var(--awb-warning-chip-dot);
}

.awb-badge--danger[b-lk8um39j35] {
    background: var(--awb-danger-chip-bg);
    color: var(--awb-danger-chip-text);
    --awb-badge-dot: var(--awb-danger-chip-dot);
}

.awb-badge--info[b-lk8um39j35] {
    background: var(--awb-info-chip-bg);
    color: var(--awb-info-chip-text);
    --awb-badge-dot: var(--awb-info-chip-dot);
}

.awb-badge--light[b-lk8um39j35] {
    background: var(--white);
    color: var(--coal-dim);
    border: 1px solid var(--line-strong);
}

/* The wizard keeps COB's filled primary chip (SRI markers): the pre-CRM-320 metrics, no dot. */
.awb-wizard-shell .awb-badge--primary[b-lk8um39j35] {
    gap: 0.25rem;
    padding: 2px 0.5rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    background: var(--rz-primary);
    color: var(--white);
}
/* /Common/UI/Button.razor.rz.scp.css */
.awb-button[b-xwoie917eq] {
    display: inline-flex;
}

/* Kill the material-theme UPPERCASE regression on button text. */
[b-xwoie917eq] .rz-button {
    text-transform: none;
}
/* /Common/UI/Card.razor.rz.scp.css */
.awb-card[b-86liq16iof] {
    padding: var(--awb-card-padding);
    border-radius: var(--awb-card-radius);
    background: var(--awb-card-bg);
    border: var(--awb-card-border);
}

.awb-card-header[b-86liq16iof] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.awb-card-title[b-86liq16iof] {
    font-family: var(--awb-card-title-font);
    font-size: var(--awb-card-title-size);
    font-weight: 600;
    letter-spacing: var(--awb-card-title-tracking);
    line-height: var(--awb-card-title-line-height);
}

.awb-card-header-actions[b-86liq16iof] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.awb-card-body[b-86liq16iof] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.awb-card-description[b-86liq16iof] {
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color, var(--muted));
}

/* An error card is a filled PANEL, so it reads the notice pastel set (maintainer, 2026-08-25)
   rather than Radzen's saturated danger tint - same family as the alert and the validation
   summary, so every block-of-colour error in the app is one colour. */
.awb-card-error[b-86liq16iof] {
    border-color: var(--awb-danger-soft-border, var(--red-line));
    background: var(--awb-danger-soft-bg, var(--red-tint));
}
/* /Common/UI/CharacterCountTextArea.razor.rz.scp.css */
.awb-char-counter[b-ygymokta4e] {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color, #6b7280);
    text-align: right;
}
/* /Common/UI/Checkbox.razor.rz.scp.css */
.awb-checkbox[b-l4ynkevvad] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.awb-checkbox-label[b-l4ynkevvad] {
    font-size: 0.85rem;
    line-height: 1;
}
/* /Common/UI/DescriptionList.razor.rz.scp.css */
.awb-dl[b-78t94kxzuh] {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 3fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.awb-dl[b-78t94kxzuh]  dt {
    color: var(--rz-text-secondary-color, var(--muted));
    font-weight: 500;
}

.awb-dl[b-78t94kxzuh]  dd {
    margin: 0;
}
/* /Common/UI/EmptyState.razor.rz.scp.css */
.awb-empty-state[b-0mim4wybh4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
}

.awb-empty-state-message[b-0mim4wybh4] {
    margin: 0;
    color: var(--rz-text-secondary-color, var(--muted));
}
/* /Common/UI/FieldError.razor.rz.scp.css */
.awb-field-error[b-ph82w2pojt] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--rz-danger, #dc3545);
}
/* /Common/UI/FormField.razor.rz.scp.css */
.awb-form-field[b-5c4wlz6xz2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.awb-form-field-label[b-5c4wlz6xz2] {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Radzen inputs render with their own default width and carry no scope attribute, so a scoped
   class on the control never reaches them. ::deep from this wrapper (which IS scoped to FormField)
   makes every control fill the field column. RadzenDropDown already sets width:100% inline via the
   <Dropdown> wrapper; including it here keeps all field controls consistent regardless of source. */
.awb-form-field-input[b-5c4wlz6xz2]  .rz-textbox,
.awb-form-field-input[b-5c4wlz6xz2]  .rz-textarea,
.awb-form-field-input[b-5c4wlz6xz2]  .rz-dropdown,
.awb-form-field-input[b-5c4wlz6xz2]  .rz-datepicker {
    width: 100%;
}

/* D17 — the "*" that marks a declared-required field. It inherits the label colour on purpose: it says
   "mandatory", it is NOT the third colour, which appears only after a refused Gå vidare. The tone on the
   control and the "Obligatoriskt" note are styled in the GLOBAL app.css block instead — both have to
   reach Radzen-rendered elements (`rz-state-empty`) that carry no scope attribute, and keeping the note's
   default and its reveal in one file avoids an `!important` duel between the two stylesheets. */
.awb-form-field-required[b-5c4wlz6xz2] {
    margin-inline-start: 0.15rem;
}

/* General KYC-form rule: a field flagged with an Error paints its control's border red. ::deep
   reaches the Radzen control roots (which carry no scope attribute). Covers text/textarea/numeric/
   dropdown/datepicker — the input types used across the KYC sections. */
.awb-form-field-input--error[b-5c4wlz6xz2]  .rz-textbox,
.awb-form-field-input--error[b-5c4wlz6xz2]  .rz-textarea,
.awb-form-field-input--error[b-5c4wlz6xz2]  .rz-numeric,
.awb-form-field-input--error[b-5c4wlz6xz2]  .rz-dropdown,
.awb-form-field-input--error[b-5c4wlz6xz2]  .rz-datepicker,
.awb-form-field-input--error[b-5c4wlz6xz2]  input {
    border-color: var(--rz-danger, #dc3545);
}

/* <NumberInput> (Common/UI/NumberInput.razor.css) sets its own unconditional `border` shorthand on
   `.rz-numeric` to give Radzen's borderless numeric a frame outside a boxed FormField. That rule has
   the same specificity as the one above and can land after it in the bundled scoped CSS, so its
   border-color (part of the shorthand) silently wins over the red above — a numeric field then shows
   the validation text in the summary with no red border at all. One extra class
   (`.awb-number-input`) in the chain makes this selector strictly more specific, so it wins
   regardless of bundle order. */
.awb-form-field-input--error[b-5c4wlz6xz2]  .awb-number-input .rz-numeric {
    border-color: var(--rz-danger, #dc3545);
}

/* ----------------------------------------------------------------------------
   Line length inside the wizard (maintainer, 2026-08-18: "textmassan här i awb är mycket
   bredare, jfr Cob"). Legacy has ONE form measure and applies it to every block by rule:

     .TextField                { max-width: 480px }            _TextField.scss:4
     .TextView:not(.full-width){ max-width: maxFieldWidth }     _TextView.scss:16-18
     .Cob-OptionsList          { max-width: 480px }             _OptionsList.scss:24-26
     .Cob-description          { max-width: 480px }             _Cob.scss:132-134

   So a legacy question — its prompt, its explanatory paragraphs and its options — breaks at
   480px, about half the 960px card, while ours ran the full card width. That, not the card
   itself, is where the doubled line length came from.

   Expressed once, on the block every field and every question already shares, and keyed on the
   wizard shell: legacy COB is the facit for the COB wizard, not for the CRM surfaces, whose own
   legacy is addeqt-crm. Nothing outside the wizard changes width.

   The cap is a max-width only, so the rule-driven column widths from the contact grid and the
   economy grids still decide the actual width — both are already narrower than 480px, so row
   alignment is untouched.
   ---------------------------------------------------------------------------- */
.awb-wizard-shell .awb-form-field[b-5c4wlz6xz2] {
    max-width: var(--awb-cob-field-max, 480px);
}

/* Legacy's own opt-out (`full-width`): note textareas and tables get the whole card. */
.awb-wizard-shell .awb-form-field--full[b-5c4wlz6xz2] {
    max-width: none;
}

/* ============================================================================
   ONE FIELD TREATMENT (maintainer, 2026-08-18: "alla fält i gamla är rutor, här har vi
   mixat i AWB"). Legacy COB has a single field component and every field on every screen
   IS it — cob-advisor-addeqt src/components/TextField/:

     TextField.js:39-49      label, then input, then the status mark — in that order,
                             all three inside ONE bordered element.
     _TextField.scss:1-8     .TextField  { position: relative; height: 56px; background: #fff;
                                           border: 1px solid lighten(medium, 15%); border-radius: 5px }
     _TextField.scss:17-31   .focus → secondary #4cb7d5, .invalid → danger #df4c43,
                             .success → success #2ed1a0, .read-only → a paler grey.
     _TextField.scss:40-58   .TextField-label { position: absolute; top/left 0; padding: 10px 12px;
                                                color: medium #91a0ad; 12px/500; ellipsis; no pointer events }
     _TextField.scss:76-84   .TextField-input { width/height 100%; padding: 26px 12px 12px;
                                                background: 0; border: 0; 14px }
     _TextField.scss:186-195 .TextField-status { position: absolute; top: 16px; right: 14px; 24×24 }
     TextField.js:80-88      the mark itself: "done" when the value validates, "*" while a required
                             field is empty, "error" when it is wrong.

   AWB's single place for that is THIS component: every wizard field already goes through
   FormField, so the box is defined once here instead of per step. Keyed on .awb-wizard-shell
   for the same reason the line-length cap above is — legacy COB is the facit for the COB
   wizard, addeqt-crm for the CRM surfaces, and nothing outside the wizard changes.

   WHAT GETS A BOX. Legacy boxes a TextField and a Select; it does NOT box an option list
   (Cob-OptionsList), a note textarea (TextView.fullWidth) or a table. The :has() below says
   exactly that, on the control the field actually hosts — which is why ~50 question blocks
   across five feature folders did not have to be edited to opt out one by one. `Boxed="false"`
   remains for a call site that needs to say it explicitly.

   ROW ALIGNMENT. The box has a FIXED height (legacy's 56px), so a two-line label can no longer
   push one field's control below its neighbour's — which is the failure that made the old house
   rule ban floating labels in field stacks. Column widths stay rule-driven (the contact grid,
   the economy grids); the box only fills the column it is given.
   ============================================================================ */

.awb-wizard-shell .awb-form-field--box:has(.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker, .awb-phone-input, .awb-field-value):not(:has(.rz-textarea, .rz-radio-btn, .rz-chkbox, table))[b-5c4wlz6xz2] {
    position: relative;
    display: block;
    height: 56px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--awb-cob-field-border, #bdc6ce);
    border-radius: 5px;
}

/* The label moves inside the box: absolutely placed at the top-left, small and muted, and never
   swallowing a click meant for the control underneath (_TextField.scss:40-58). */
.awb-wizard-shell .awb-form-field--box:has(.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker, .awb-phone-input, .awb-field-value):not(:has(.rz-textarea, .rz-radio-btn, .rz-chkbox, table)) > .awb-form-field-label[b-5c4wlz6xz2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.625rem 0.75rem;
    overflow: hidden;
    color: var(--awb-cob-field-label, #91a0ad);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* The control fills the box and gives up its own frame — legacy's input is a bare, transparent
   element inside the bordered .TextField (_TextField.scss:76-96). ::deep because Radzen renders
   these elements and they carry no scope attribute of ours. */
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2] {
    height: 100%;
}

.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-textbox,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-dropdown,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-numeric,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-datepicker {
    width: 100%;
    height: 100%;
    padding: 1.625rem 0.75rem 0.75rem;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ----------------------------------------------------------------------------
   THE VALUE SITS BELOW THE LABEL, WHATEVER THE CONTROL IS (maintainer, 2026-08-18, node 9
   Kontoval: "textrutorna verkar generellt se lite trasiga ut" — the dropdown value "Nordnet Bank AB"
   printed ON TOP of the field's own "Depåinstitut" label, the account number on top of its
   placeholder, the Depåvärde "kr" suffix adrift).

   Two causes, both fixed here rather than in the steps:

   1. A COMPOSITE control does not carry its own text. `.rz-textbox` IS the <input>, so the padding
      above lands on the text — but `.rz-dropdown` is a <div> whose value lives in a
      `.rz-dropdown-label` child, `.rz-numeric` is a <div> wrapping an <input>, and `.rz-datepicker`
      wraps an `.rz-inputtext`. Radzen gives those children their own vertical padding/line-height,
      so the text kept centering itself in the 56px box — i.e. straight over the label. The padding
      therefore has to be applied to whatever element actually carries the text, and the composite
      root has to stop reserving it (otherwise the two stack and the value drops out of the box).

   2. Legacy's TextField shows a label and NEVER a placeholder (TextField.js:39-49 renders label →
      input → status, and passes no placeholder at all). AWB call sites do pass one — "Välj
      depåinstitut", "Kontonummer" — and inside a box it prints in the same place as the label, one
      line of grey text on top of another. In a box the placeholder is suppressed; the label already
      says what the placeholder would have said, and outside the box (CRM surfaces, whose facit is
      addeqt-crm) placeholders are untouched.
   ---------------------------------------------------------------------------- */

.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-dropdown,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-numeric,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-datepicker {
    padding: 0;
}

.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-dropdown .rz-dropdown-label,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-numeric input,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-datepicker input,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-datepicker .rz-inputtext {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1.625rem 0.75rem 0.75rem;
    line-height: 1;
    background: transparent;
    border: 0;
}

/* No placeholder text inside a box — legacy's TextField has none, and here it doubles the label. */
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  input::placeholder,
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  textarea::placeholder {
    color: transparent;
}

.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .rz-placeholder {
    visibility: hidden;
}

/* CRM-258 — the ONE exemption from the rule above. SearchSelect's placeholder is an instruction
   ("Skriv minst 2 tecken …"), not a restatement of the label, and AK-3 requires it to be visible.
   Scoped to the search field's own class so no other boxed field is affected. */
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .awb-search-select__input::placeholder {
    color: var(--awb-cob-field-label, #91a0ad);
}

/* The unit suffix (<NumberInput Unit="kr">) is a sibling of the numeric, so in a box it has to sit on
   the value's baseline instead of floating at the box's vertical centre — legacy's own numeric puts
   its unit on the input line (NumberField.js:22 + `.Cob-NumberField-unit`, index.css:2640-2652). */
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .awb-number-input {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
}

.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .awb-number-input__unit {
    flex: 0 0 auto;
    align-self: stretch;
    padding: 1.625rem 0.75rem 0.75rem 0;
    line-height: 1;
}

/* A read-only value is a box too, and shows the value where the input would sit
   (CustomerInformation.js:721-772 renders identity as read-only TextFields). */
.awb-wizard-shell .awb-form-field--box > .awb-form-field-input[b-5c4wlz6xz2]  .awb-field-value {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.625rem 0.75rem 0.75rem;
    overflow: hidden;
    color: var(--awb-cob-field-label, #91a0ad);
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Paler border, no status mark — _TextField.scss:29-31, and :71-73 fades the label as well. */
.awb-wizard-shell .awb-form-field--readonly[b-5c4wlz6xz2] {
    border-color: var(--awb-cob-field-border-readonly, #dadfe3) !important;
}

.awb-wizard-shell .awb-form-field--readonly > .awb-form-field-label[b-5c4wlz6xz2] {
    opacity: 0.6666;
}

/* The tone the control used to carry moves to the box, because the control no longer has a
   border to colour: filled ⇒ success, declared-required-and-still-empty after a refused
   Gå vidare ⇒ danger (_TextField.scss:21-27). The status GLYPH keeps coming from the global
   app.css block — it is drawn inside the control's own right edge, which is now the box's
   right edge, i.e. legacy's .TextField-status position (_TextField.scss:186-189). */
.awb-wizard-shell .awb-form-field--box:not(.awb-form-field--readonly):has(.awb-field-filled, .rz-textbox:not(.rz-state-empty):not(.awb-field-unselected), .rz-dropdown:not(.rz-state-empty), .rz-numeric:not(.rz-state-empty), .rz-datepicker:not(.rz-state-empty)):not(:has(> .awb-form-field-input--error))[b-5c4wlz6xz2] {
    border-color: var(--awb-cob-success, #2ed1a0);
}

.awb-wizard-shell .awb-form-field--box.awb-form-field--missing:has(.rz-state-empty):not(:has(.awb-field-filled))[b-5c4wlz6xz2],
.awb-wizard-shell .awb-form-field--box:has(.awb-field-missing)[b-5c4wlz6xz2] {
    border-color: var(--awb-cob-danger, #df4c43);
}

/* An Error on a BOXED field had nowhere to land: the box owns the frame (:156-168 sets `border: 0` on
   the control) while the error rule at :35-40 colours the control. Carries the neutral rule's own
   `:has()` guard AND its negative one — so the set of fields it fires on is exactly the set the neutral
   rule draws a box for, no wider — plus the read-only exclusion. That puts it at (0,6,0), above the
   neutral (0,4,0) border it has to override. Without the negative guard it would also match an
   unboxed option-list question that happens to contain a nested textbox — which the AML question does
   as soon as a requires-explanation option is checked while a selection error is still published. The
   success rule above is guarded with the matching :not(): an error outranks "filled", and specificity
   alone could not say so. Same tone as the missing-after-refusal rule, so the two cannot drift. */
.awb-wizard-shell .awb-form-field--box:not(.awb-form-field--readonly):has(> .awb-form-field-input--error):has(.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker, .awb-phone-input, .awb-field-value):not(:has(.rz-textarea, .rz-radio-btn, .rz-chkbox, table))[b-5c4wlz6xz2] {
    border-color: var(--awb-cob-danger, #df4c43);
}

/* The error message and the "Obligatoriskt" note are siblings of the control inside the field
   element; with a fixed-height box they have to sit BELOW it, not inside it. */
.awb-wizard-shell .awb-form-field--box > .awb-field-error[b-5c4wlz6xz2],
.awb-wizard-shell .awb-form-field--box > .awb-form-field-missing-note[b-5c4wlz6xz2] {
    position: absolute;
    top: calc(100% + 0.125rem);
    left: 0;
}

/* Checkbox / radio groups carry no rz-textbox — a failed FormField instead paints every box in the
   group red (legacy CRM `.has-error` facit: the whole group turns red, not one row). Covers the
   Common/UI <Checkbox>/<RadioList> boxes and any bare Radzen checkbox/radio hosted in the field. */
.awb-form-field-input--error[b-5c4wlz6xz2]  .rz-chkbox-box,
.awb-form-field-input--error[b-5c4wlz6xz2]  .rz-radiobutton-box {
    border-color: var(--rz-danger, #dc3545);
}

/* CRM-268 — standing help text under a control (the legacy 1-5 Ägar-ID mapping under
   "Ägar-ID för avgiftsnyckel"). Same measure as the field, quieter than the label, and outside the
   legacy box: inside the wizard the box has a fixed height, so the hint sits below it exactly as the
   error message and the "Obligatoriskt" note do. */
.awb-form-field__hint[b-5c4wlz6xz2] {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--rz-text-secondary-color, #6c757d);
}

.awb-wizard-shell .awb-form-field--box > .awb-form-field__hint[b-5c4wlz6xz2] {
    position: absolute;
    top: calc(100% + 0.125rem);
    left: 0;
}
/* /Common/UI/FormToolbar.razor.rz.scp.css */
.awb-form-toolbar[b-m1laep91nv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

/* ----------------------------------------------------------------------------
   Compact field styling for fields living inside a toolbar — EXCEPT a boxed one.

   `:not(.awb-form-field--box)` is the whole of the node-9 "Kontoval" breakage (maintainer,
   2026-08-18). The three account fields are laid out with a <FormToolbar>, and these rules force
   `height: 34px !important; padding: 0 8px !important; line-height: 34px !important` on the hosted
   control. Inside the wizard those same fields are now legacy TextField boxes — 56px tall, label
   absolutely placed at the top, control padded down past it — so the !important compact rules
   overrode the box's padding and re-centred the value on the label: "Nordnet Bank AB" over
   "Depåinstitut", the account number over its placeholder.

   The compact treatment is a filter-bar look (addeqt-crm is the facit there) and stays exactly as it
   was for every non-boxed field; a boxed field carries its own legacy measurements instead.
   ---------------------------------------------------------------------------- */
.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input {
    max-width: 160px;
}

.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-textbox,
.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-dropdown,
.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-lookup,
.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-inputtext,
.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-datepicker-input {
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    line-height: 34px !important;
    text-align: left !important;
}

/* Center the selected value / placeholder in dropdowns & lookups (their text
   sits in a child span, not the control itself) */
.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-dropdown,
.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-lookup {
    display: flex !important;
    align-items: center !important;
    justify-content: start !important;
}

.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-dropdown-label,
.awb-form-toolbar[b-m1laep91nv]  .awb-form-field:not(.awb-form-field--box) .awb-form-field-input .rz-inputtext {
    line-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    margin: 0 !important;
    margin-right: auto !important;
}
/* /Common/UI/InfoDisclosure.razor.rz.scp.css */
/* The (i) beside the question. Legacy's <Info appearance="secondary" size="small" showIcon/> renders a
   small round icon in the secondary (blue) tone; the toggle itself is a bare button so it inherits
   nothing from the label's typography. `::deep` reaches the label element, which FormField renders. */

.awb-info-disclosure__toggle[b-jmmkmbldja] {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rz-info, #5b9bd5);
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
}

.awb-info-disclosure__toggle:hover[b-jmmkmbldja],
.awb-info-disclosure__toggle:focus-visible[b-jmmkmbldja] {
    color: var(--rz-info-dark, #2e6da4);
}

.awb-info-disclosure__toggle[b-jmmkmbldja]  .rzi,
.awb-info-disclosure__toggle[b-jmmkmbldja]  .rz-icon {
    font-size: 1.125rem;
}

/* The explanation itself. Legacy shows it in a modal with `background: #c8e9f2` and 20px padding
   (CheckboxSection.js:153-158, 205-210, 257-262, 308-313); AWB keeps the same block on the page. */

.awb-info-disclosure__panel[b-jmmkmbldja] {
    margin: 0 0 0.75rem;
    padding: 1.25rem;
    border-radius: 0.25rem;
    background: #c8e9f2;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.awb-info-disclosure__paragraph[b-jmmkmbldja] {
    margin: 0 0 0.75rem;
}

.awb-info-disclosure__paragraph:last-of-type[b-jmmkmbldja] {
    margin-bottom: 1rem;
}
/* /Common/UI/LinkButton.razor.rz.scp.css */
.awb-link-button[b-tmz02an64u] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.awb-link-button-light[b-tmz02an64u] {
    background: var(--snow);
    color: var(--coal);
}

.awb-link-button-light:hover[b-tmz02an64u] {
    background: var(--snow-2);
}

.awb-link-button-primary[b-tmz02an64u] {
    background: var(--coal);
    color: #ffffff;
}

.awb-link-button-primary:hover[b-tmz02an64u] {
    background: var(--coal-dim);
}

.awb-link-button[b-tmz02an64u]  .awb-link-button-icon {
    font-size: 1rem;
}
/* /Common/UI/NumberInput.razor.rz.scp.css */
.awb-number-input[b-7ne5k3a2gk] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.awb-number-input__unit[b-7ne5k3a2gk] {
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color, #6c757d);
    white-space: nowrap;
}

/* Unit rendered inside the field's right edge (UnitInside), legacy's `.Cob-NumberField-unit`
   (index.css:2640-2652 — absolute, right: 12px, dimmed, pointer-events: none). With the spinner
   buttons gone (ShowUpDown defaults off, see NumberInput.razor.cs) the right edge is the suffix's
   own, so it takes legacy's 12px rather than the 2.25rem it needed to clear the buttons — which is
   the "kr-suffixet har hamnat fel" half of the maintainer's node-9 note. `::deep` reaches the
   Radzen-rendered input, which carries no scope attribute. */

.awb-number-input--unit-inside[b-7ne5k3a2gk] {
    position: relative;
    display: inline-block;
    gap: 0;
}

.awb-number-input--unit-inside .awb-number-input__unit[b-7ne5k3a2gk] {
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color, #91a0ad);
}

.awb-number-input--unit-inside[b-7ne5k3a2gk]  .rz-numeric input,
.awb-number-input--unit-inside[b-7ne5k3a2gk]  input.rz-numeric-input {
    padding-inline-end: 2.25rem;
}

/* ----------------------------------------------------------------------------
   The frame (maintainer, 2026-08-18: the ESG percent field "har ingen synlig ram alls").
   Radzen's material theme leaves `.rz-numeric` with `--rz-input-border: none` and only an
   underline, so a numeric that is NOT hosted in a boxed <FormField> renders as a floating
   number with no field edge at all — legacy has no such thing: every input it draws sits in a
   TextField box (cob-advisor-addeqt src/components/TextField/_TextField.scss:1-8 — 1px solid
   lighten(medium, 15%), 5px radius, white). Same two measurements FormField.razor.css uses, via
   the same tokens, so the two frames cannot drift apart.

   Placed on the wrapper, once, instead of per call site — which also settles the double-frame
   question by specificity rather than by exceptions:
     • inside a boxed FormField, `.awb-wizard-shell .awb-form-field--box > .awb-form-field-input
       ::deep .rz-numeric` (four compound selectors) beats this rule (two) and keeps `border: 0`;
     • the savings/economy matrix cells DO host this wrapper as of CRM-276, and their FormField is
       Boxed="false", so nothing suppresses this frame for them — and nothing should: legacy boxes
       those cells too (they are its SimpleTextField, _SimpleTextField.scss:109-122, white + 1px
       lighten(medium, 15 %) — the same #bdc6ce). CRM-276 first neutralised the frame there and
       shipped border-less cells, because `border: 0` also erased the border Radzen's theme had given
       them and the app.css filled/missing marks that only set `border-color`; the step stylesheets
       now stretch the wrapper to the cell and leave the frame alone.
   ---------------------------------------------------------------------------- */

.awb-number-input[b-7ne5k3a2gk]  .rz-numeric {
    background-color: #fff;
    border: 1px solid var(--awb-cob-field-border, #bdc6ce);
    border-radius: 5px;
}
/* /Common/UI/PageHeader.razor.rz.scp.css */
.awb-page-header[b-6wgia77ah1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.awb-page-header-title[b-6wgia77ah1] {
    margin: 0;
    font-family: var(--awb-font-heading);
    font-weight: var(--awb-page-title-weight);
    font-size: var(--awb-page-title-size);
    letter-spacing: var(--awb-page-title-tracking);
    line-height: 1.15;
}

.awb-page-header-subtitle[b-6wgia77ah1] {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

.awb-page-header-actions[b-6wgia77ah1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
/* /Common/UI/PhoneInput.razor.rz.scp.css */
.awb-phone-input[b-eft2tnytn6] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

/* Radzen renders these classes onto its own child elements, which don't carry this
   component's scope attribute — ::deep is required or the rules never match. */
.awb-phone-input[b-eft2tnytn6]  .awb-phone-input__code {
    flex: 0 0 auto;
    width: 70px;
}

.awb-phone-input[b-eft2tnytn6]  .awb-phone-input__number {
    flex: 1 1 auto;
    width: 100%;
}

/* Inside the wizard's field box (Common/UI/FormField.razor.css) the phone must read as ONE field:
   legacy shows a single TextField holding the whole `+46706055950`
   (CustomerInformation.js:862-878 is a plain TextField, _TextField.scss:1-8). The country selector
   stays as the mechanism that keeps WithoutTrunkZero honest, but it has to live INSIDE that box —
   before this it rendered as its own bordered control with the number squeezed into whatever was
   left of the column. So: the pair fills the box, sits under the label like an input would
   (_TextField.scss:76-84 padding), and neither half draws a frame of its own. */
.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6] {
    height: 100%;
    gap: 0.25rem;
    padding: 1.625rem 0.75rem 0.75rem;
    align-items: center;
}

.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6]  .rz-dropdown,
.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6]  .rz-textbox {
    height: auto;
    padding: 0;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* Radzen's `.rz-dropdown` is a flex COLUMN (material-base.css) holding three children: a
   `.rz-helper-hidden-accessible` wrapper around a screen-reader input, the `.rz-dropdown-label`
   with the value, and a `.rz-dropdown-trigger` that is absolutely pinned to the right edge. That
   shape is built for a full-width dropdown, and inside the phone pair it produced the misalignment
   in CRM-252: the helper wrapper renders as a static block whose bare <input> is ~152px wide, so it
   set the whole selector's width and pushed the label far to the right, while the pinned trigger
   stayed at the (now distant) right edge — the arrow drifted away from "+46" and, before the width
   grew, drew on top of it.

   So inside the field box the selector is re-laid out as a row that is only as wide as its content:
   the helper goes out of flow (kept reachable for assistive tech, just not occupying space), the
   trigger joins the flow right after the label, and the number keeps the rest of the box. Nothing
   here leaks outside `.awb-wizard-shell .awb-form-field--box`, so the ten other PhoneInput call
   sites are untouched. */
.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6]  .awb-phone-input__code {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0.125rem;
    align-items: center;
    width: auto;
    min-width: 0;
}

.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6]  .awb-phone-input__number {
    flex: 1 1 auto;
    min-width: 0;
}

/* Visually hidden, not display:none — the input behind it is the dropdown's accessible name. */
.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6]  .awb-phone-input__code .rz-helper-hidden-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/* FormField.razor.css gives a boxed dropdown's label the box padding and `width/height: 100%` so a
   stand-alone dropdown's value lands under its label. `.awb-phone-input` already applies that
   padding to the pair, so here the label only has to be plain text. */
.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6]  .awb-phone-input__code .rz-dropdown-label {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6]  .awb-phone-input__code .rz-dropdown-trigger {
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    background: transparent;
}

.awb-wizard-shell .awb-form-field--box .awb-phone-input[b-eft2tnytn6]  .awb-phone-input__code .rz-dropdown-trigger-icon {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1;
}
/* /Common/UI/RadioList.razor.rz.scp.css */
/* Radzen's vertical radio list defaults to --rz-gap:1rem plus a per-button margin-block, which stacks
   into the wide spacing the maintainer flagged on "Planerad transaktionsfrekvens". Tighten it to a
   compact list (legacy CRM radios sit close together). ::deep reaches the Radzen list root, which
   carries no razor scope attribute. */
[b-u8dswrnh2n] .rz-radio-button-list-vertical {
    --rz-gap: 0.35rem;
}

[b-u8dswrnh2n] .rz-radio-button-list-vertical .rz-radio-btn {
    margin-block: 0.1rem;
}
/* /Common/UI/RangeSlider.razor.rz.scp.css */
.awb-range-slider[b-qulz9qxmuu] {
    --awb-range-thumb: 1.25rem;
    position: relative;
    display: block;
    width: 100%;
    padding-top: 0.25rem;
}

.awb-range-slider__track[b-qulz9qxmuu] {
    position: relative;
    height: 0.5rem;
    margin: calc(var(--awb-range-thumb) / 2) calc(var(--awb-range-thumb) / 2);
    border-radius: 0.25rem;
    background: var(--rz-base-300, #dee2e6);
}

.awb-range-slider__selected[b-qulz9qxmuu] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--awb-range-from);
    width: calc(var(--awb-range-to) - var(--awb-range-from));
    border-radius: 0.25rem;
    background: var(--rz-primary, #0d6efd);
}

.awb-range-slider__marker[b-qulz9qxmuu] {
    position: absolute;
    top: 50%;
    width: 0.375rem;
    height: 0.375rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--rz-white, #fff);
    border: 1px solid var(--rz-text-secondary-color, #6c757d);
}

/* Both inputs lie over the track; only their thumbs take the pointer. */
.awb-range-slider__input[b-qulz9qxmuu] {
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 100%;
    height: calc(var(--awb-range-thumb) + 0.5rem);
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Equal handles share one point and the later input paints on top; at the maximum the lower one takes over (see StackingClass). */
.awb-range-slider--lower-on-top .awb-range-slider__input[data-handle="from"][b-qulz9qxmuu] {
    z-index: 1;
}

.awb-range-slider__input[b-qulz9qxmuu]::-webkit-slider-runnable-track {
    background: none;
}

.awb-range-slider__input[b-qulz9qxmuu]::-moz-range-track {
    background: none;
}

.awb-range-slider__input[b-qulz9qxmuu]::-webkit-slider-thumb {
    width: var(--awb-range-thumb);
    height: var(--awb-range-thumb);
    border: 2px solid var(--rz-primary, #0d6efd);
    border-radius: 50%;
    background: var(--rz-white, #fff);
    pointer-events: auto;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.awb-range-slider__input[b-qulz9qxmuu]::-moz-range-thumb {
    width: var(--awb-range-thumb);
    height: var(--awb-range-thumb);
    box-sizing: border-box;
    border: 2px solid var(--rz-primary, #0d6efd);
    border-radius: 50%;
    background: var(--rz-white, #fff);
    pointer-events: auto;
    cursor: pointer;
}

.awb-range-slider__input:disabled[b-qulz9qxmuu]::-webkit-slider-thumb {
    border-color: var(--rz-base-400, #adb5bd);
    cursor: default;
}

.awb-range-slider__input:disabled[b-qulz9qxmuu]::-moz-range-thumb {
    border-color: var(--rz-base-400, #adb5bd);
    cursor: default;
}

.awb-range-slider__input:focus-visible[b-qulz9qxmuu] {
    outline: none;
}

.awb-range-slider__input:focus-visible[b-qulz9qxmuu]::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--rz-primary-lighter, rgba(13, 110, 253, 0.35));
}

.awb-range-slider__input:focus-visible[b-qulz9qxmuu]::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--rz-primary-lighter, rgba(13, 110, 253, 0.35));
}

.awb-range-slider__numbers[b-qulz9qxmuu] {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem calc(var(--awb-range-thumb) / 2) 0;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color, #6c757d);
}

.awb-range-slider__numbers > span[b-qulz9qxmuu] {
    width: 0;
    display: flex;
    justify-content: center;
}
/* /Common/UI/SearchSelect.razor.rz.scp.css */
/* ============================================================================
   CRM-258 — the product search field. Facit: the mockup regions
   product-search-empty / -loading / -results / -no-hits in
   docs/tickets/CRM-258-placeringsforslag-orderdesk-ux/mockups/proposal-orderdesk.html.

   THE HELP LINE AND THE POPOVER SIT BELOW THE 56px BOX. Inside the wizard the hosting FormField is
   legacy COB's fixed-height box (FormField.razor.css:121-129), so anything rendered after the input
   would otherwise be clipped into it or stretch it. Both are therefore absolutely positioned out of
   flow — the same trick FormField.razor.css:279-285 already uses to put .awb-field-error and the
   "Obligatoriskt" note under a fixed-height box — with this element as their positioning context.

   The popover's top edge is calc(100% + 1.5rem), i.e. BELOW the help line at calc(100% + 0.125rem);
   `top: 100%` would print the hit list on top of the help text.

   The explicit z-index is required, not decorative: the risk panel and the derived Horisont / Risk på
   produkt fields follow in source order and would otherwise paint over the list.

   An out-of-flow child cannot push the next field down, so the vertical space these two occupy is
   reserved by the CALL SITE (.awb-proposal-step__product-field), which is also the only call site that
   passes HelpText.
   ============================================================================ */

.awb-search-select[b-ehz10pr8la] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.awb-search-select__help[b-ehz10pr8la] {
    position: absolute;
    top: calc(100% + 0.125rem);
    left: 0;
    margin: 0;
    color: var(--awb-cob-field-label, #91a0ad);
    font-size: 0.75rem;
    line-height: 1.2;
}

.awb-search-select__popover[b-ehz10pr8la] {
    position: absolute;
    top: calc(100% + 1.5rem);
    left: 0;
    right: 0;
    z-index: 20;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--awb-cob-field-border, #bdc6ce);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgb(23 32 51 / 14%);
}

.awb-search-select__list[b-ehz10pr8la] {
    margin: 0;
    padding: 0;
    max-height: 17rem;
    overflow-y: auto;
    list-style: none;
}

.awb-search-select__option[b-ehz10pr8la] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5625rem 0.75rem;
    border-block-end: 1px solid var(--awb-cob-field-border-readonly, #dadfe3);
    font-size: 0.875rem;
    cursor: pointer;
}

.awb-search-select__option:last-child[b-ehz10pr8la] {
    border-block-end: 0;
}

/* The active option — keyboard navigation and hover land on the same tone, as in the mockup. */
.awb-search-select__option--active[b-ehz10pr8la],
.awb-search-select__option:hover[b-ehz10pr8la] {
    background: var(--awb-cob-light, #f4f5f7);
}

.awb-search-select__status[b-ehz10pr8la] {
    padding: 0.625rem 0.75rem;
    color: var(--awb-cob-field-label, #91a0ad);
    font-size: 0.8125rem;
}

/* A summary row follows the list, so it needs the separator the last option gave up. */
.awb-search-select__summary[b-ehz10pr8la] {
    border-block-start: 1px solid var(--awb-cob-field-border-readonly, #dadfe3);
}

.awb-search-select__spinner[b-ehz10pr8la] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-inline-end: 0.375rem;
    vertical-align: -3px;
    border: 2px solid var(--awb-cob-field-border-readonly, #dadfe3);
    border-top-color: var(--awb-cob-secondary, #4cb7d5);
    border-radius: 50%;
    animation: awb-search-select-spin-b-ehz10pr8la 1s linear infinite;
}

@keyframes awb-search-select-spin-b-ehz10pr8la {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .awb-search-select__spinner[b-ehz10pr8la] {
        animation: none;
    }
}
/* /Common/UI/Shell/AppSidebar.razor.rz.scp.css */
/* Fixed left sidebar (FR-UI-NAV-080 fidelity: 260px, #242748). */

.awb-sidebar[b-tar3rs35qe] {
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    /* Sticky with z-index:auto would lose to the wizard's fixed z-index:0 background layer, which
       sits later in the DOM (WizardShell renders inside the content column). 2 is the smallest
       value that clears that layer and the wizard card (z-index 1); the top bar keeps its 5. */
    z-index: 2;
}

/* White logo panel + skewed transition into the dark nav (legacy #sidebar .company / .skew). */
.awb-sidebar-logo[b-tar3rs35qe] {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-right: 1px solid var(--line);
    height: 170px;
    padding-bottom: 4px;
    position: relative;
    flex: none;
    z-index: 1;
}

.awb-sidebar-logo-link[b-tar3rs35qe] {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--navy);
    text-decoration: none;
    text-align: center;
    padding: 0 10px;
    line-height: 1.1;
}

.awb-sidebar-skew[b-tar3rs35qe] {
    background: var(--navy);
    height: 32px;
    margin-top: -18px;
    transform: skew(0deg, -2deg);
    position: relative;
    flex: none;
    z-index: 0;
}

.awb-sidebar-logo-link[b-tar3rs35qe]  .awb-wordmark {
    height: 24px;
}

/* CRM-381: company name when the company has no logo (supersedes CRM-320 AK-6 second half). */
.awb-sidebar-logo-company[b-tar3rs35qe] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    max-width: 220px;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.awb-sidebar-logo-image[b-tar3rs35qe] {
    display: block;
    max-width: 180px;
    max-height: 120px;
    object-fit: contain;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-menu {
    flex: 1;
    padding: 10px 0;
    overflow: auto;
    scrollbar-width: thin;                         /* Firefox */
    scrollbar-color: rgb(255 255 255 / 24%) transparent;
}

/* WebKit/Chromium: slim, translucent overlay-style scrollbar that fits the dark rail. */
.awb-sidebar[b-tar3rs35qe]  .awb-nav-menu::-webkit-scrollbar {
    width: 6px;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-menu::-webkit-scrollbar-track {
    background: transparent;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-menu::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 20%);
    border-radius: 3px;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-menu::-webkit-scrollbar-thumb:hover {
    background: rgb(255 255 255 / 34%);
}

.awb-sidebar-footer[b-tar3rs35qe] {
    border-top: 1px solid var(--side-rule);
    padding: 10px 12px 14px;
    font-size: 12.5px;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    height: 46px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    color: #fff;
    text-decoration: none;
}

.awb-sidebar[b-tar3rs35qe]  a.awb-nav-item:hover {
    background: var(--side-hover);
    color: #fff;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-item.active {
    background: var(--side-active);
    color: #fff;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--gold);
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-item-icon {
    font-size: 20px;
    flex: none;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-item--launch {
    cursor: default;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-item-count {
    margin-left: auto;
    background: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    color: var(--navy);
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 14px 20px 4px;
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--side-dim);
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-group-title:hover {
    color: #fff;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-group-chevron {
    font-size: 18px;
    transition: transform .15s ease;
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-group.collapsed .awb-nav-group-chevron {
    transform: rotate(-90deg);
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-group-items .awb-nav-item {
    height: 38px;
    padding-left: 34px;
    font-size: 12.5px;
    color: var(--side-dim);
}

.awb-sidebar[b-tar3rs35qe]  .awb-nav-group-items .awb-nav-item.active {
    color: #fff;
}

/* Icon-rail collapse only BELOW the 1366px desktop target (<=1365px): hide text labels but keep
   each item's icon so the rail stays identifiable (no blank/unlabeled nav — FR-UI-APP-140). The
   footer stays visible so the company switcher remains reachable, shown icon-only. */
@media (max-width: 1365px) {
    .awb-sidebar-logo[b-tar3rs35qe] {
        height: 96px;
    }

    .awb-sidebar-logo-link[b-tar3rs35qe] {
        width: 100%;
        min-width: 0;
        padding: 0 8px;
    }

    .awb-sidebar-logo-link[b-tar3rs35qe]  .awb-wordmark {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .awb-sidebar-logo-image[b-tar3rs35qe] {
        max-width: 100%;
        max-height: 64px;
    }

    .awb-sidebar-logo-company[b-tar3rs35qe] {
        max-width: 100%;
        font-size: 13px;
    }

    .awb-sidebar[b-tar3rs35qe]  .awb-nav-item-label,
    .awb-sidebar[b-tar3rs35qe]  .awb-nav-item-count,
    .awb-sidebar[b-tar3rs35qe]  .awb-nav-group-title {
        display: none;
    }

    .awb-sidebar[b-tar3rs35qe]  .awb-nav-item {
        padding: 0;
        justify-content: center;
        gap: 0;
    }

    .awb-sidebar[b-tar3rs35qe]  .awb-nav-group-items .awb-nav-item {
        padding-left: 0;
    }

    /* Company switcher stays reachable as an icon-only trigger. */
    .awb-sidebar-footer[b-tar3rs35qe] {
        padding: 10px 0 14px;
    }

    .awb-sidebar-footer[b-tar3rs35qe]  .rz-button-text {
        display: none;
    }

    .awb-sidebar-footer[b-tar3rs35qe]  .awb-company-switcher .rz-button {
        width: 100%;
        justify-content: center;
    }
}

/* CRM-380: the switcher is the only Primary/Outlined button on the navy rail. ui-buttons.css paints that
   pair navy with !important, so this override needs !important and the longer selector to win. */
.awb-sidebar-footer[b-tar3rs35qe]  .awb-company-switcher .awb-button > .rz-variant-outlined.rz-primary {
    color: #fff !important;
    border: 1px solid var(--side-dim) !important;
}

.awb-sidebar-footer[b-tar3rs35qe]  .awb-company-switcher .awb-button > .rz-variant-outlined.rz-primary:hover:not(:disabled) {
    background: var(--side-hover) !important;
    border-color: #fff !important;
}

.awb-sidebar-footer[b-tar3rs35qe]  .awb-company-switcher .awb-button > .rz-button:focus-visible {
    outline-color: #fff;
}
/* /Common/UI/Shell/AppTopBar.razor.rz.scp.css */
/* Top bar: global search + Skapa kund + company name + role notice + user name + logout. */

.awb-topbar[b-6mymululho] {
    height: 56px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Sidebar fold toggle — first element in the bar, sitting where the rail's edge is. */
.awb-topbar-menu-toggle[b-6mymululho] {
    flex: none;
    margin-inline-start: -8px;
    display: flex;
    align-items: center;
}

/* The hamburger is a deliberately quiet grey, not a brand-coloured text button.
   `!important` on the colour is required to hold that against the global button
   design system (wwwroot/ui-buttons.css), which paints every Variant.Text button
   in the brand navy with an `!important` declaration. Padding needs no
   `!important` — ui-buttons.css keeps its geometry un-important precisely so
   scoped rules like this one can win on specificity. */
.awb-topbar-menu-toggle[b-6mymululho]  .rz-button {
    min-width: 0;
    padding: 6px;
    color: var(--muted) !important;
}

.awb-topbar-menu-toggle[b-6mymululho]  .rz-button:hover {
    color: var(--navy) !important;
    background: transparent !important;
}

.awb-topbar-search[b-6mymululho] {
    flex: 0 0 340px;
    position: relative;
}

.awb-topbar-search-input[b-6mymululho] {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--snow);
}

.awb-topbar-search-input:disabled[b-6mymululho] {
    opacity: .6;
    cursor: not-allowed;
}

.awb-topbar-search-results[b-6mymululho] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
    z-index: 20;
    max-height: 360px;
    overflow-y: auto;
}

.awb-topbar-search-empty[b-6mymululho] {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--muted);
}

.awb-topbar-search-result[b-6mymululho] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.awb-topbar-search-result:hover[b-6mymululho] {
    background: var(--navy-dim);
}

.awb-topbar-search-result-name[b-6mymululho] {
    font-size: 13px;
    color: var(--coal);
    font-weight: 600;
}

.awb-topbar-search-result-natregno[b-6mymululho] {
    font-size: 12px;
    color: var(--muted);
}

.awb-topbar-right[b-6mymululho] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--muted);
}

.awb-topbar-company[b-6mymululho] {
    font-weight: 600;
    color: var(--coal);
}

.awb-topbar[b-6mymululho]  a.awb-topbar-username,
.awb-topbar[b-6mymululho]  a.awb-topbar-username:visited,
.awb-topbar[b-6mymululho]  a.awb-topbar-username:hover {
    font-weight: 600;
    color: var(--coal);
    white-space: nowrap;
    text-decoration: none;
}

.awb-topbar-logout[b-6mymululho] {
    margin: 0;
}

.awb-topbar-logout-button[b-6mymululho] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.awb-topbar-logout-button:hover[b-6mymululho] {
    color: var(--navy);
    text-decoration: none;
}
/* /Common/UI/Shell/Breadcrumbs.razor.rz.scp.css */
/* Breadcrumb trail (FR-UI-APP-060). */

.awb-breadcrumbs[b-4ah8332r7b] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 12px;
    min-height: 17px;
}

.awb-breadcrumbs[b-4ah8332r7b]  a.awb-breadcrumb,
.awb-breadcrumbs[b-4ah8332r7b]  a.awb-breadcrumb:visited {
    color: var(--navy);
    font-weight: 500;
    text-decoration: none;
}

.awb-breadcrumb--current[b-4ah8332r7b] {
    color: var(--muted);
}

.awb-breadcrumb-separator[b-4ah8332r7b] {
    color: var(--neutral-dot);
}
/* /Common/UI/Shell/CompanySwitcherDialog.razor.rz.scp.css */
/* "Byt konto" dialog body — legacy switch-modal parity. */
.awb-company-switcher-dialog[b-j7z4o214q5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 380px;
}

.awb-company-switcher-intro[b-j7z4o214q5] {
    margin: 0;
    color: var(--coal-dim);
}

/* A warning notice block, so it takes the shared notice tokens rather than its own amber
   (maintainer, 2026-08-25) - one warning colour and one notice radius across the app. */
.awb-company-switcher-warning[b-j7z4o214q5] {
    background: var(--awb-warning-soft-bg, var(--amber-tint));
    border: 1px solid var(--awb-warning-soft-border, var(--amber-line));
    border-radius: var(--awb-notice-radius, 8px);
    color: var(--awb-warning-soft-text, var(--amber-text));
    font-size: 13px;
    padding: 10px 12px;
}

.awb-company-switcher-form[b-j7z4o214q5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* CRM-380: own the arrow so it sits at the RadzenDropDown inset. The SVG fill is --coal-dim (#374151)
   written out because a data URI cannot read custom properties — keep the two in step. */
.awb-company-switcher-select[b-j7z4o214q5] {
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M0 0h10L5 5z' fill='%23374151'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--coal);
    font-size: 15px;
    font-weight: 700;
    height: 44px;
    padding: 0 38px 0 12px;
    width: 100%;
}

.awb-company-switcher-meta[b-j7z4o214q5] {
    color: var(--muted);
    font-size: 12px;
}

.awb-company-switcher-actions[b-j7z4o214q5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
/* /Common/UI/Shell/ImpersonationBanner.razor.rz.scp.css */
/* Live impersonation banner in the sidebar footer. The stop control is a native antiforgery
   form-POST (raw-HttpContext cookie op); style its <button> to read as an inline text action rather
   than a default browser button. */

.awb-impersonation-banner[b-9wm5w918rc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-xs);
    background: var(--amber-text);
    border: 1px solid var(--amber);
    color: var(--amber-tint);
}

.awb-impersonation-banner-text[b-9wm5w918rc] {
    font-weight: 600;
    line-height: 1.3;
}

.awb-impersonation-banner-stop-form[b-9wm5w918rc] {
    margin: 0;
}

.awb-impersonation-banner-stop[b-9wm5w918rc] {
    background: none;
    border: none;
    padding: 0;
    color: var(--amber-tint);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.awb-impersonation-banner-stop:hover[b-9wm5w918rc] {
    color: #fff;
}

.awb-impersonation-banner-stop:focus-visible[b-9wm5w918rc] {
    outline: 2px solid var(--amber-tint);
    outline-offset: 2px;
}
/* /Common/UI/Shell/LogoutDialog.razor.rz.scp.css */
.awb-logout-dialog[b-8gmvn9ob8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 8px 8px 4px;
}

.awb-logout-dialog-illustration svg[b-8gmvn9ob8t] {
    width: 200px;
    height: auto;
}

.awb-logout-dialog-text[b-8gmvn9ob8t] {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    max-width: 340px;
}
/* /Common/UI/Shell/TabStrip.razor.rz.scp.css */
/* Tab strip (FR-UI-NAV-080 fidelity: 45px tabs, 2px active underline gold). */

.awb-tabstrip[b-oaltar6l1l] {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--line-strong);
    margin-bottom: 20px;
}

/* NavLink renders the <a> as a child component, so Blazor's scope attribute [b-*] never lands
   on the anchor. ::deep puts the attribute on .awb-tabstrip (our markup) and matches the
   descendant anchors freely — the only way to reach a child component's element from scoped CSS.
   Needed here to beat the UA a:-webkit-any-link (blue/purple + underline) defaults. */
.awb-tabstrip[b-oaltar6l1l]  a.awb-tab,
.awb-tabstrip[b-oaltar6l1l]  a.awb-tab:link,
.awb-tabstrip[b-oaltar6l1l]  a.awb-tab:visited,
.awb-tabstrip[b-oaltar6l1l]  a.awb-tab:hover,
.awb-tabstrip[b-oaltar6l1l]  a.awb-tab:active {
    height: 45px;
    display: flex;
    align-items: center;
    padding: 10px 1px;
    font-size: 14px;
    color: var(--coal-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 400;
    text-decoration: none;
    gap: 6px;
}

.awb-tabstrip[b-oaltar6l1l]  a.awb-tab.active {
    color: var(--navy);
    font-weight: 600;
    border-color: var(--gold);
}

.awb-tabstrip[b-oaltar6l1l]  .awb-tab-icon {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    color: var(--muted);
}

.awb-tabstrip[b-oaltar6l1l]  a.awb-tab.active .awb-tab-icon {
    color: var(--navy);
}
/* /Common/UI/Slider.razor.rz.scp.css */
.awb-slider[b-z0aeseco4c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.awb-slider__track[b-z0aeseco4c] {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--rz-primary, #0d6efd);
}

.awb-slider__caption[b-z0aeseco4c] {
    white-space: nowrap;
    font-size: 0.875rem;
}

/* FormField's red border only reaches inputs; a slider is not one, so it frames itself. */
.awb-slider--invalid[b-z0aeseco4c] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--rz-danger, #dc3545);
    border-radius: 5px;
}
/* /Common/UI/WizardStepper.razor.rz.scp.css */
/* Track sections in the stepper (decision 2026-08-25; facit docs/mockups/stepper-branch-mockup.html).
   Two grid rows over the SAME column template — a band spans N columns and therefore lines up with the
   N circles below it without any measuring. flex-wrap is gone: with bands a wrapped row cannot stay
   aligned, so the rail scrolls horizontally instead (D1 accepts the full width; the scroll is the
   safety net for narrow viewports). */
.awb-wizard-stepper[b-06cz7truqv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.awb-wizard-stepper__bands[b-06cz7truqv],
.awb-wizard-stepper__steps[b-06cz7truqv] {
    display: grid;
    grid-template-columns: repeat(var(--awb-wizard-stepper-columns, 1), 32px);
    margin: 0;
    padding: 0;
}

.awb-wizard-stepper__steps[b-06cz7truqv] {
    list-style: none;
}

.awb-wizard-stepper__band[b-06cz7truqv] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    margin: 0 4px;
    border-radius: 5px;
    overflow: hidden;
}

/* The tints are the track colour at 18% (the mockup's band opacity), applied to the FILL only — the
   caption keeps the full-strength colour, so the band cannot be given a plain `opacity`. The rgba
   line is the fallback for engines without color-mix. */
.awb-wizard-stepper__band--common[b-06cz7truqv] {
    background: rgba(154, 167, 177, 0.18);
    background: color-mix(in srgb, var(--awb-cob-track-common, #9aa7b1) 18%, transparent);
}

.awb-wizard-stepper__band--securities[b-06cz7truqv] {
    background: rgba(76, 183, 213, 0.18);
    background: color-mix(in srgb, var(--awb-cob-secondary, #4cb7d5) 18%, transparent);
}

.awb-wizard-stepper__band--insurance[b-06cz7truqv] {
    background: rgba(123, 92, 240, 0.18);
    background: color-mix(in srgb, var(--awb-cob-track-insurance, #7b5cf0) 18%, transparent);
}

.awb-wizard-stepper__band--out-of-scope[b-06cz7truqv] {
    background: #eef1f3;
}

.awb-wizard-stepper__band-caption[b-06cz7truqv] {
    max-width: 100%;
    padding: 0 2px;
    overflow: hidden;
    color: var(--awb-cob-track-common, #9aa7b1);
    font-size: 0.71875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.awb-wizard-stepper__band--securities .awb-wizard-stepper__band-caption[b-06cz7truqv] {
    color: var(--awb-cob-secondary, #4cb7d5);
}

.awb-wizard-stepper__band--insurance .awb-wizard-stepper__band-caption[b-06cz7truqv] {
    color: var(--awb-cob-track-insurance, #7b5cf0);
}

.awb-wizard-stepper__band--out-of-scope .awb-wizard-stepper__band-caption[b-06cz7truqv] {
    color: #a9b4bd;
}

/* 28px circle centred in the 32px column — the mockup's r=14 at a 32px pitch. */
.awb-wizard-stepper__step[b-06cz7truqv] {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: var(--awb-cob-step-pending, #143749);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.awb-wizard-stepper__marker[b-06cz7truqv] {
    line-height: 1;
}

/* Decision 2026-08-18 — a Completed step renders as a <button>. It fills the whole circle so the hit
   target is the circle the advisor sees, and it inherits the <li>'s state colours instead of the UA
   button chrome. Everything else about the indicator is unchanged. */
.awb-wizard-stepper__marker--selectable[b-06cz7truqv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.awb-wizard-stepper__marker--selectable:focus-visible[b-06cz7truqv] {
    outline: 2px solid var(--awb-cob-step-active, orange);
    outline-offset: 2px;
}

.awb-wizard-stepper__step--completed[b-06cz7truqv] {
    background: var(--awb-cob-step-done, #40d4a7);
    color: white;
}

.awb-wizard-stepper__step--current[b-06cz7truqv] {
    background: var(--awb-cob-step-active, orange);
    color: white;
}

.awb-wizard-stepper__step--pending[b-06cz7truqv] {
    background: var(--awb-cob-step-pending, #143749);
    color: white;
}

/* Not part of this rådgivning (decision 2026-08-25, D6 "Grå fyllning"): grey fill, grey border, no
   digit, nothing focusable. */
.awb-wizard-stepper__step--out-of-scope[b-06cz7truqv] {
    background: #e7ebee;
    border: 2px solid #cfd7dd;
    color: transparent;
}
/* /Common/UI/WizardTabStrip.razor.rz.scp.css */
/* `_NewSavingsProfile.scss` `.ulStyles` — a centred row of tabs, every tab carrying a grey 1px
   baseline; `.focusFirst` (the open tab) swaps it for a 2px success-green rule and turns the label
   green. Legacy's padding (30px sides, 20px below) and 20px/400 label are kept so the strip reads the
   same as View10's. */

.awb-wizard-tab-strip[b-f8nlnfggao] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 1rem 0;
}

.awb-wizard-tab-strip__item[b-f8nlnfggao] {
    display: flex;
}

.awb-wizard-tab-strip__tab[b-f8nlnfggao] {
    padding: 0 30px 20px 30px;
    border: 0;
    border-bottom: 1px solid grey;
    background: transparent;
    color: var(--awb-cob-primary, #003d50);
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
}

.awb-wizard-tab-strip__tab:hover[b-f8nlnfggao] {
    color: var(--awb-cob-success, #2ed1a0);
}

/* `.focusFirst` */
.awb-wizard-tab-strip__tab--active[b-f8nlnfggao] {
    border-bottom: 2px solid var(--awb-cob-success, #2ed1a0);
    color: var(--awb-cob-success, #2ed1a0);
}

.awb-wizard-tab-strip__tab:focus-visible[b-f8nlnfggao] {
    outline: 2px solid var(--awb-cob-success, #2ed1a0);
    outline-offset: 2px;
}

/* CRM-279 FR-3 — the tab that HOLDS a validation failure. Declared AFTER `--active` so a tab that is
   both open and failing reads as failing; the tone is the legacy danger colour the wizard already uses
   for every other missing-field affordance, and the state is carried by `aria-invalid` too. */
.awb-wizard-tab-strip__tab--invalid[b-f8nlnfggao] {
    border-bottom: 2px solid var(--awb-cob-danger, #df4c43);
    color: var(--awb-cob-danger, #df4c43);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Desktop-first application shell (Q7 / FR-UI-APP-140).
   Base grid: fixed 260px sidebar + fluid content. 1366px IS the desktop target — the full
   labelled sidebar (incl. the company-switcher footer) stays visible at 1366px. Only BELOW
   1366px (<=1365px) does the sidebar collapse to a 72px icon rail rather than overlapping
   content. Content scrolls horizontally in its own container so the page body never scrolls
   horizontally at >=1366px. */

.awb-shell[b-0l8f1635ku] {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    transition: grid-template-columns .2s ease;
}

.awb-shell-main[b-0l8f1635ku] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.awb-shell-content[b-0l8f1635ku] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 24px 24px;
    width: 100%;
    overflow-x: auto;
    background-color: var(--white);
}

@media (max-width: 1365px) {
    .awb-shell[b-0l8f1635ku] {
        grid-template-columns: 72px 1fr;
    }
}

/* ----------------------------------------------------------------------------
   Sidebar auto-collapse (ShellLayoutState). A full-width surface — the advisory-case
   wizard, which legacy COB renders as a centred card on an otherwise empty page —
   asks the shell to fold the rail away; the always-visible top-bar toggle gives it
   back. The rail folds to ZERO width rather than being removed from the tree, so the
   grid transition animates and the sidebar keeps its DOM (and its state) intact.
   Declared AFTER the <=1365px media query so the collapsed state wins at every width;
   `::deep` because .awb-sidebar belongs to AppSidebar's CSS scope, not this layout's.
   ---------------------------------------------------------------------------- */
.awb-shell--sidebar-collapsed[b-0l8f1635ku] {
    grid-template-columns: 0 1fr;
}

.awb-shell--sidebar-collapsed[b-0l8f1635ku]  .awb-sidebar {
    overflow: hidden;
    visibility: hidden;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-mfef6ybjbr],
.components-reconnect-repeated-attempt-visible[b-mfef6ybjbr],
.components-reconnect-failed-visible[b-mfef6ybjbr],
.components-pause-visible[b-mfef6ybjbr],
.components-resume-failed-visible[b-mfef6ybjbr],
.components-rejoining-animation[b-mfef6ybjbr] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-mfef6ybjbr],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-mfef6ybjbr],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-mfef6ybjbr],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-mfef6ybjbr],
#components-reconnect-modal.components-reconnect-retrying[b-mfef6ybjbr],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-mfef6ybjbr],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-mfef6ybjbr],
#components-reconnect-modal.components-reconnect-failed[b-mfef6ybjbr],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-mfef6ybjbr] {
    display: block;
}


#components-reconnect-modal[b-mfef6ybjbr] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-mfef6ybjbr 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-mfef6ybjbr 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-mfef6ybjbr 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-mfef6ybjbr]::backdrop {
    background-color: var(--backdrop);
    animation: components-reconnect-modal-fadeInOpacity-b-mfef6ybjbr 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-mfef6ybjbr {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-mfef6ybjbr {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-mfef6ybjbr {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-mfef6ybjbr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-mfef6ybjbr] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-mfef6ybjbr] {
    border: 0;
    background-color: var(--navy);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-mfef6ybjbr] {
        background-color: var(--navy-hover);
    }

    #components-reconnect-modal button:active[b-mfef6ybjbr] {
        background-color: var(--navy);
    }

.components-rejoining-animation[b-mfef6ybjbr] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-mfef6ybjbr] {
        position: absolute;
        border: 3px solid var(--navy);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-mfef6ybjbr 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-mfef6ybjbr] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-mfef6ybjbr {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Features/Administration/Components/AdminCustomerGrid.razor.rz.scp.css */
/* Admin cross-company customer grid (Kundöversikt / All Kunder). Cell affordances mirror the
   customer list view (CustomerListView.razor.css); Blazor scoped CSS does not cross component
   boundaries, so the shared class rules are redefined here for this component's markup. */

.awb-customer-type[b-x4fe87u02b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.awb-customer-type--person[b-x4fe87u02b] {
    background: var(--navy-dim);
    color: var(--navy);
}

.awb-customer-type--company[b-x4fe87u02b] {
    background: var(--gold-tint);
    color: var(--coal);
    border: 1px solid var(--gold-line);
}

.awb-admin-customer-grid-table[b-x4fe87u02b]  .awb-customer-advisors {
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
}

.awb-admin-customer-grid-footer[b-x4fe87u02b] {
    padding: 10px 18px;
    color: var(--muted);
    font-size: 13px;
}

/* CRM-380: Radzen indents a header title 1rem and clips it, but not a body cell, so the 18px select-all box
   sat right of the row boxes inside the 48px column and was cut off. Zero the title inset and let the box
   overflow for the selection column only — also when a consumer wraps the box (Common/UI Checkbox), which
   Radzen's own direct-child overflow exception misses. */
.awb-admin-customer-grid-table[b-x4fe87u02b]  th.awb-select-col .rz-column-title,
.awb-admin-customer-grid-table[b-x4fe87u02b]  th.awb-select-col .rz-column-title-content {
    padding-inline: 0;
    overflow: visible;
}
/* /Features/Administration/Components/BasbeloppEditDialog.razor.rz.scp.css */
/* FR-UI-APP-180: standard vertical gap for form field-stacks (reference: CreateCustomerDialog). */
.awb-basbelopp-edit[b-mgxa5b4yg8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Features/Administration/Components/CreatePartnerCompanyDialog.razor.rz.scp.css */
/* FR-UI-APP-180 obligation 6 — the standard stacked field-stack (ui-overview.md:315). */
.awb-create-company-dialog[b-cs4spo2ntw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awb-create-company-dialog p[b-cs4spo2ntw] {
    margin: 0;
}
/* /Features/Administration/Components/MalltexterTab.razor.rz.scp.css */
.awb-insurance-products-layout[b-5xnghme8dd] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    align-items: start;
}

.awb-insurance-help[b-5xnghme8dd] {
    font-size: 11px;
    color: var(--muted);
    margin-top: 6px;
}

.awb-malltext-filters[b-5xnghme8dd] {
    display: flex;
    gap: 8px;
}
/* /Features/Administration/Components/MassSendoutDialog.razor.rz.scp.css */
.awb-mass-sendout-heading[b-q7xc24oo03] {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.awb-mass-sendout-copy[b-q7xc24oo03] {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
}
/* /Features/Administration/Components/OperationUserEditDialog.razor.rz.scp.css */
/* FR-UI-APP-180: standard vertical gap for form field-stacks (reference: CreateCustomerDialog). */
.awb-operation-user-edit[b-cxzdv54e3l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Features/Administration/Components/PartnerCompanyEditDialog.razor.rz.scp.css */
/* FR-UI-APP-180 obligation 6 — the standard stacked field-stack (ui-overview.md:315). */
.awb-partner-company-dialog[b-td7uoet1sl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awb-partner-company-input[b-td7uoet1sl] {
    width: 100%;
}
/* /Features/Administration/Components/PeriodReportCreatorDialog.razor.rz.scp.css */
/* FR-UI-APP-180 stacked-form rhythm — the wrapper owns the vertical gap, not per-control margins.
   Same as CreateCustomerDialog / ContactEditDialog. */
.awb-period-report-dialog[b-tqb0k9obk8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Legacy PeriodReportCreator.jsx renders the count as a plain line above the fields. */
.awb-period-report-heading[b-tqb0k9obk8] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
/* /Features/Administration/Components/PeriodReportRunStatusView.razor.rz.scp.css */
.awb-run-status-counts[b-3jvk280g45] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.awb-run-status-note[b-3jvk280g45] {
    margin: 0.5rem 0 0;
    color: var(--awb-text-muted, var(--muted));
}

.awb-run-status-summary[b-3jvk280g45] {
    margin: 0.5rem 0 0;
}
/* /Features/Administration/Components/ProductRegisterTab.razor.rz.scp.css */
.awb-insurance-products-layout[b-bmammgaqje] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    align-items: start;
}

.awb-insurance-help[b-bmammgaqje] {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

.awb-insurance-doc-row[b-bmammgaqje] {
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--coal-dim);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.awb-insurance-doc-row--dormant span:first-child[b-bmammgaqje],
.awb-insurance-doc-disabled[b-bmammgaqje] {
    color: var(--muted);
}

.awb-insurance-doc-disabled[b-bmammgaqje] {
    color: var(--line-strong);
}

.awb-insurance-doc-badge[b-bmammgaqje] {
    margin-right: 6px;
}
/* /Features/Administration/Pages/AdminEditUser.razor.rz.scp.css */
/* The field stacks own their 8px rhythm (the Card body gap is tighter), as on EditUser. */
.awb-adminedituser-fields[b-vj10y17k8f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Features/Administration/Pages/AdminUsers.razor.rz.scp.css */
.awb-adminusers-identity[b-trxej9nhrt] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.awb-adminusers-name[b-trxej9nhrt] {
    font-weight: 600;
}

.awb-adminusers-email[b-trxej9nhrt] {
    color: var(--muted);
    font-size: 0.85em;
}
/* /Features/Administration/Pages/CompanySettings.razor.rz.scp.css */
.awb-company-input[b-thplf38n45] {
    width: 100%;
    max-width: 420px;
}

.awb-company-logo-preview[b-thplf38n45] {
    display: block;
    max-width: 240px;
    max-height: 96px;
    object-fit: contain;
    margin-bottom: 12px;
}

.awb-company-logo-empty[b-thplf38n45] {
    color: var(--muted);
    margin: 0 0 12px;
    font-size: 13px;
}

.awb-company-logo-upload[b-thplf38n45] {
    margin-top: 4px;
}

.awb-company-flags[b-thplf38n45] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Features/Administration/Pages/EditUser.razor.rz.scp.css */
/* FR-UI-APP-180 vertical rhythm: the "Användare" field-stack is laid out as a flex column at the
   standard 8px gap. The Card body uses 0.5rem, so the fields get their own wrapper to own the gap. */
.awb-edituser-fields[b-2uyjhvnfg9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Impersonation start action in the edit-user toolbar. The control is a native antiforgery
   form-POST (raw-HttpContext cookie op); style its <button> as an inline text action so it sits with
   the toolbar buttons rather than rendering as a default browser button. */

.awb-edituser-impersonate-form[b-2uyjhvnfg9] {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.awb-edituser-impersonate[b-2uyjhvnfg9] {
    background: none;
    border: none;
    padding: 0;
    color: var(--rz-primary, var(--navy));
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.awb-edituser-impersonate:hover[b-2uyjhvnfg9] {
    color: var(--rz-primary-dark, var(--navy-hover));
}
/* /Features/Administration/Pages/InsuranceProducts.razor.rz.scp.css */
.awb-crumbs[b-yo0sq6y9g3] {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 6px;
}
/* /Features/Administration/Pages/Login.razor.rz.scp.css */
/* Full-height two-column split, mirroring the legacy CRM login
   (addeqt-crm .../style/pages/_login.scss). Left: brand + headline + BankID
   pill. Right: illustration on a soft neutral panel. */
.awb-login[b-x2pr2eb9gr] {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: #fff;
}

.awb-login-lt[b-x2pr2eb9gr] {
    flex: 0 0 400px;
    min-width: 400px;
    max-width: 400px;
    display: flex;
    align-items: stretch;
    background: #fff;
    padding: 40px;
    box-sizing: border-box;
}

.awb-login-rt[b-x2pr2eb9gr] {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--snow);
    padding: 60px;
    box-sizing: border-box;
}

.awb-login-inner[b-x2pr2eb9gr] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 100%;
}

/* Brand block and controls form one group at the foot of the column (mockups/login.html). */
.awb-login-top[b-x2pr2eb9gr] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 28px;
}

.awb-login-top[b-x2pr2eb9gr]  .awb-wordmark {
    height: 30px;
}

.awb-login-rule[b-x2pr2eb9gr] {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
}

.awb-login-headline[b-x2pr2eb9gr] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 36px;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: var(--coal);
}

.awb-login-bottom[b-x2pr2eb9gr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* --- BankID pill (dark, fully rounded, full-width) --- */
.awb-login-start[b-x2pr2eb9gr] {
    width: 100%;
}

.awb-login-start[b-x2pr2eb9gr]  .awb-button {
    display: block;
    width: 100%;
}

/* The BankID pill is a bespoke shape (full-width, fully rounded, its own navy),
   not a member of the button design system. `!important` on the paint properties
   holds it against the global system (wwwroot/ui-buttons.css), which styles this
   default Primary/Filled button with `!important` colours. Geometry (padding,
   radius, width, display) needs no `!important`: ui-buttons.css leaves geometry
   un-important and is linked before the scoped bundle, so this rule wins. */
.awb-login-start[b-x2pr2eb9gr]  .rz-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: auto;
    padding: 1.125rem 1.25rem;
    background-color: var(--navy) !important;
    border: 0 !important;
    border-radius: 999px;
    color: #fff !important;
    font: 500 16px/1 var(--font-body);
}

.awb-login-start[b-x2pr2eb9gr]  .rz-button:hover:not(:disabled) {
    background-color: var(--navy-hover) !important;
    border-color: var(--navy-hover) !important;
}

.awb-login-bankid-icon[b-x2pr2eb9gr] {
    display: inline-flex;
    align-items: center;
}

.awb-login-bankid-icon svg[b-x2pr2eb9gr] {
    width: 24px;
    height: 24px;
}

/* --- Pending (QR) state, centered to match legacy .qrCode --- */
/* Legacy's `padding:40px 0` sits on the .qrCode container, not the img — putting
   it on the img would eat into its 200px box and skew the aspect ratio. */
.awb-login-pending[b-x2pr2eb9gr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 40px 0;
}

.awb-login-qr[b-x2pr2eb9gr] {
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}

/* Legacy .button-bankid full-width grey pill (_login.scss:54-82), not a bare link. */
.awb-login-samedevice[b-x2pr2eb9gr] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 18px 20px;
    background: var(--snow);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--navy);
    font: 600 15px/1 var(--font-body);
    text-decoration: none;
    box-sizing: border-box;
}

.awb-login-samedevice:hover[b-x2pr2eb9gr] {
    background: var(--snow-2);
}

.awb-login-loading[b-x2pr2eb9gr] {
    margin: 0;
    color: var(--rz-text-secondary-color, var(--muted));
}

/* Lightweight text-link cancel (Q6: keep "Avbryt", not the legacy ×), so it
   doesn't read as a second full-width bar under the pill. */
.awb-login-cancel[b-x2pr2eb9gr] {
    display: flex;
    justify-content: center;
}

.awb-login-cancel[b-x2pr2eb9gr]  .rz-button {
    background: transparent !important;
    border: 0 !important;
    padding: 0.5rem 0.75rem;
    color: var(--navy) !important;
    font-weight: 600;
    text-decoration: underline;
}

.awb-login-cancel[b-x2pr2eb9gr]  .rz-button:hover:not(:disabled) {
    background: transparent !important;
    color: var(--navy-hover) !important;
}

/* Collapse to a single column on small screens; hide the illustration. */
@media (max-width: 768px) {
    .awb-login[b-x2pr2eb9gr] {
        flex-direction: column;
    }

    .awb-login-lt[b-x2pr2eb9gr] {
        flex: 1 1 auto;
    }

    .awb-login-rt[b-x2pr2eb9gr] {
        display: none;
    }
}
/* /Features/Administration/Pages/LoginIllustration.razor.rz.scp.css */
.awb-login-figure[b-wbhboxag6u] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.awb-login-figure svg[b-wbhboxag6u] {
    width: 420px;
    max-width: 100%;
    height: auto;
}
/* /Features/Administration/Pages/PartnerCompanies.razor.rz.scp.css */
/* Ombud (partner companies) list page. */

[b-2km1kz7nzx] .awb-card-body form {
    margin: 0;
}

/* The summary card's row — intro left, primary action right (mockups/admin-ombud.html:53). */
.awb-companies-summary[b-2km1kz7nzx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.awb-companies-summary-text[b-2km1kz7nzx] {
    font-size: 15px;
    color: var(--coal-dim);
}

/* Row actions: both in one cell, 8px apart (bug-r2-5). They are normal AWB <Button>s, so nothing
   here restyles them. The Växla-till form is only a POST carrier — display:contents takes it out of
   the flex flow so its submit button is a direct sibling of "Ändra" and the gap applies between the
   two buttons rather than between the form and the button. */
.awb-companies-row-actions[b-2km1kz7nzx] {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.awb-companies-row-actions form[b-2km1kz7nzx] {
    display: contents;
}
/* /Features/Administration/Pages/Users.razor.rz.scp.css */
.awb-users-identity[b-gs3b1mujbv] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.awb-users-name[b-gs3b1mujbv] {
    font-weight: 600;
}

.awb-users-email[b-gs3b1mujbv] {
    color: var(--rz-text-secondary-color, var(--muted));
    font-size: 0.85em;
}

.awb-users-actions[b-gs3b1mujbv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.awb-users-impersonate-form[b-gs3b1mujbv] {
    margin: 0;
}

.awb-users-impersonate[b-gs3b1mujbv] {
    background: none;
    border: 1px solid var(--rz-primary, var(--navy));
    border-radius: var(--rz-button-border-radius, 4px);
    padding: 4px;
    color: var(--rz-primary, var(--navy));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
}

.awb-users-impersonate[b-gs3b1mujbv]  .rz-icon {
    font-size: 20px;
}

.awb-users-impersonate:hover[b-gs3b1mujbv] {
    background: var(--rz-primary-lighter, var(--navy-dim));
}
/* /Features/AdvisoryCases/Components/CaseStartScreeningNotice.razor.rz.scp.css */
/* Legacy renders the PEP/sanktions-beskedet as a modal over the Start view (Start.js:298-329). Inside the
   Starta rådgivning-dialogen the equivalent is a panel that replaces the form, so the advisor cannot keep
   filling it in behind a refusal. Normal flow (not absolute) so the dialog grows to fit the notice text —
   the dialog hides the form fields while this is showing (StartAdvisoryCaseDialog). */
.awb-screening-notice[b-v87ftqnxo1] {
    display: flex;
    flex-direction: column;
    gap: var(--awb-space-4, 1rem);
}

.awb-screening-notice__alert[b-v87ftqnxo1] {
    margin: 0;
    max-width: 100%;
}
/* /Features/AdvisoryCases/Components/CustomerAdvisoryCasesTab.razor.rz.scp.css */
.awb-case-status[b-iwxrq68bs1] {
    display: flex;          /* was inline-flex: a block box takes the cell width, so the rebase badge can wrap */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* CRM-380: header titles start at the cell inset like the cell text, not 1rem further in — the column
   widths in the markup are budgeted on that. */
.awb-case-grid[b-iwxrq68bs1]  .rz-grid-table thead th .rz-column-title {
    padding-inline-start: 0;
}

/* CRM-380: Radzen cells are nowrap + ellipsis; Omfattning and Status wrap instead. Words stay inside the
   cell: the table never shrinks below the measured minimum (684px fixed columns + 180px Omfattning) —
   the grid scrolls horizontally below that. */
.awb-case-grid[b-iwxrq68bs1]  .rz-grid-table {
    min-width: 864px;
}

.awb-case-grid[b-iwxrq68bs1]  td.awb-case-wrap,
.awb-case-grid[b-iwxrq68bs1]  td.awb-case-wrap .rz-cell-data {
    white-space: normal;
    overflow-wrap: break-word;
}

.awb-case-actions[b-iwxrq68bs1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.awb-case-signed-docs[b-iwxrq68bs1] {
    display: inline-flex;
}

.awb-case-rebase[b-iwxrq68bs1] {
    display: inline-flex;
}

.awb-case-status-filter[b-iwxrq68bs1] {
    min-width: 220px;
}

/* Filter left, Starta rådgivning pushed to the far right of the toolbar row. */
.awb-case-start[b-iwxrq68bs1] {
    margin-left: auto;
}

.awb-case-legacy[b-iwxrq68bs1] {
    display: inline-flex;
}
/* /Features/AdvisoryCases/Components/ExistingAccountsTable.razor.rz.scp.css */
/* Legacy COB's Kontoval table (View9.js:120-128, .Cob-Table header/row rules in
   src/components/Table/_Table.scss, heading typography from src/routes/Cob/_Cob.scss:132-176).
   These rules used to live in AccountsStep.razor.css; they moved here with the markup, because CSS
   isolation scopes a rule to the component that RENDERS the element. */

/* `.Cob-description.Cob-view-9-sub-heading` */
.awb-accounts-subheading[b-uy2fzm6guw] {
    margin: 0 0 0.625rem;
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.875rem;
    font-weight: 700;
}

/* Legacy renders this table with its `Table` component under `.Cob-Table`
   (`View9.js:119-129`): a lightened plate at a 6px radius that scrolls sideways rather than
   clipping (`_Table.scss:44-61`), 11px uppercase 700 column labels with 0.5px tracking
   (`_Table.scss:64-90` + `_Cob.scss:325-327`), and 12px cells on a 32px row separated by an inset
   hairline rather than a border (`_Cob.scss:316-332`). The depot list on the Kontoval step is the
   same component in legacy and therefore wears the same look — see AccountsStep.razor.css. */

.awb-accounts-table-holder[b-uy2fzm6guw] {
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: 6px;
    background: var(--rz-base-100, #f7f8f9);
    overflow-x: auto;
    overflow-y: hidden;
}

.awb-accounts-table[b-uy2fzm6guw] {
    min-width: 100%;
    border-collapse: collapse;
}

.awb-accounts-table th[b-uy2fzm6guw] {
    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;
}

.awb-accounts-table td[b-uy2fzm6guw] {
    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;
    vertical-align: middle;
}

.awb-accounts-table-select[b-uy2fzm6guw] {
    width: 5%; /* legacy getTableColumns(): the select column is 5% */
}

/* The per-row tick carries a real label so a screen reader can tell the rows apart; legacy's table
   shows a bare checkbox, so the label text is taken out of the visual flow rather than dropped.
   `::deep` reaches the label span, which the Checkbox component renders. */
.awb-accounts-table-hidden[b-uy2fzm6guw],
.awb-accounts-table-select[b-uy2fzm6guw]  .awb-checkbox-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Features/AdvisoryCases/Components/StartAdvisoryCaseDialog.razor.rz.scp.css */
/* Positioning context for the PEP/sanktions-beskedet, which covers the form the way legacy's modal covers
   the Start view (CaseStartScreeningNotice.razor.css; legacy Start.js:298-329), plus the standard modal
   field-stack vertical rhythm (FR-UI-APP-180; CreateCustomerDialog is the facit). */
.awb-start-advisory-dialog[b-0qmnceodwq] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The two Omfattning activities sit on one row with space between them. */
.awb-start-advisory-scope[b-0qmnceodwq] {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}
/* /Features/AdvisoryCases/Components/YearlyReviewCasePanel.razor.rz.scp.css */
/* One text colour for the whole read view: the theme's darkest text. Material's --rz-text-color is itself a
   grey (#424242), which is why these lines kept reading as greyed out. Set explicitly on each rule below
   rather than relying on inheritance, so no theme or shared-component rule can grey them again. */
.awb-yearly-review-panel[b-ypxekvgs49] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--rz-text-title-color, #212121);
}

.awb-yearly-review-summary[b-ypxekvgs49] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.awb-yearly-review-completed[b-ypxekvgs49] {
    color: var(--rz-text-title-color, #212121);
}

.awb-yearly-review-no-signing[b-ypxekvgs49] {
    margin: 0;
    font-weight: 600;
    color: var(--rz-text-title-color, #212121);
}

.awb-yearly-review-client-front[b-ypxekvgs49],
.awb-yearly-review-unlinked[b-ypxekvgs49] {
    margin: 0;
    color: var(--rz-text-title-color, #212121);
}

/* The six texts are free-text paragraphs, not short values: stack the label above the text and keep the
   advisor's own line breaks. The two-column default of the shared DescriptionList would squeeze them.
   ::deep because the <dl> element itself belongs to that component, not to this markup. */
.awb-yearly-review-panel[b-ypxekvgs49]  .awb-yearly-review-fields {
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

/* The shared DescriptionList mutes its labels to the secondary grey — right for short key/value pairs, too
   faint as headings over paragraphs of text. This selector outranks it, so no !important is needed. */
.awb-yearly-review-panel[b-ypxekvgs49]  .awb-yearly-review-fields dt {
    margin-top: 0.5rem;
    color: var(--rz-text-title-color, #212121);
    font-weight: 600;
}

.awb-yearly-review-panel[b-ypxekvgs49]  .awb-yearly-review-fields dd {
    white-space: pre-wrap;
    color: var(--rz-text-title-color, #212121);
}
/* /Features/AdvisoryCases/Wizard/Components/WizardFormSection.razor.rz.scp.css */
/* ============================================================================
   CRM-258 AK-1 — the numbered order-desk section. Facit: the mockup's `.sec` rules
   (docs/tickets/CRM-258-placeringsforslag-orderdesk-ux/mockups/proposal-orderdesk.html:930-934),
   with the mockup's `pointer-events: none` on `.sec.dim` deliberately NOT copied — see the
   code-behind's Dimmed comment.
   ============================================================================ */

.awb-wizard-section[b-qss3c4mb28] {
    padding: 1rem 1.125rem 1.125rem;
    background: #fff;
    border: 1px solid var(--awb-cob-field-border-readonly, #dadfe3);
    border-radius: 8px;
}

.awb-wizard-section h3[b-qss3c4mb28] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.875rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.awb-wizard-section__n[b-qss3c4mb28] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    background: var(--awb-cob-primary, #003d50);
    border-radius: 50%;
    color: #fff;
    font-size: 0.8125rem;
}

/* The FullWidth section spans both columns of the order-desk grid (the mockup's `.desk .span2`). The
   rule belongs HERE, on the component's own root element, because that root IS the grid item — the
   equivalent of ProposalStep.razor.css's own `.awb-proposal-step__order-desk > .awb-proposal-step__add-order`.
   Without it the class is inert and section 3 sits in column 1 with column 2 empty (review-1 B1). */
.awb-wizard-section--full[b-qss3c4mb28] {
    grid-column: 1 / -1;
}

/* Visual only. The children stay focusable and operable — WizardFormSectionTests pins that. */
.awb-wizard-section--dimmed[b-qss3c4mb28] {
    opacity: 0.45;
}

.awb-wizard-section--dimmed .awb-wizard-section__n[b-qss3c4mb28] {
    background: var(--awb-cob-field-border, #bdc6ce);
}

.awb-wizard-section__note[b-qss3c4mb28] {
    margin: 0.5rem 0 0;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.8rem;
    line-height: 1.45;
}
/* /Features/AdvisoryCases/Wizard/Steps/AccountsStep.razor.rz.scp.css */
/* Legacy COB "Kontoval" look for the account-setup step (D19 — current legacy: the selectable
   existing-depot table; plus the depot list, which is a table of the same look since the
   maintainer's 2026-08-18 inline-editing decision).
   Sources: cob-advisor-addeqt
     src/routes/Cob/views/View9/_View9.scss            (.Cob-view9-fields, .Cob-view9-account,
                                                        .Cob-view-9-sub-heading)
     src/components/Table/_Table.scss                  (.Table header/row/plate rules)
     src/routes/Cob/_Cob.scss:314-345                  (.Cob-Table 11px labels, 32px 12px rows,
                                                        the inset hairline under each cell)
     src/routes/Cob/_Cob.scss:132-176                  (.Cob-description 14px/600 primary,
                                                        .Cob-miniNote 12px medium, .Cob-text 14px)
     src/helpers/scss/_variables.scss                  (primary #003d50, light #f4f5f7,
                                                        medium #91a0ad, dark #3f4950)

   `::deep` is used wherever the target element is rendered by a child component (Card, FormField,
   RadioList, Checkbox, Radzen) and therefore does not carry this component's scope. */

/* --- 1. The one remaining stand-alone field (the ISK-insättning question) --------------
   Every depot field lives in the table now, so the only FormField left on the step is the
   case-level Ja/Nej question below it: its question on one line, the options underneath, as
   legacy's OptionsList does. */
.awb-accounts[b-kscaut0txc]  .awb-form-field > .awb-form-field-label {
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.awb-accounts[b-kscaut0txc]  .awb-form-field {
    margin-bottom: 1rem;
}

/* Legacy spaces the option pairs out rather than butting them together. */
.awb-accounts[b-kscaut0txc]  .rz-radio-button-list li:not(:last-child) {
    margin-inline-end: 1rem;
}

/* --- 2. Section headings and the ELLER separator ---------------------------------------- */

/* `.Cob-description.Cob-view-9-sub-heading` */
.awb-accounts-subheading[b-kscaut0txc] {
    margin: 0 0 0.625rem;
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.875rem;
    font-weight: 700;
}

.awb-accounts-hint[b-kscaut0txc] {
    margin: 0 0 1.25rem;
    color: var(--rz-text-secondary-color, #91a0ad);
    font-size: 0.75rem;
    font-style: italic;
}

/* `<p className="Cob-description" style={{ textAlign: 'center' }}>ELLER</p>` (View9.js:130-132) */
.awb-accounts-or[b-kscaut0txc] {
    margin: 0 0 1.25rem;
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

/* --- 3. The existing-depot lookup table -------------------------------------------------
   Rendered by ExistingAccountsTable, so its rules live in that component's own stylesheet — CSS
   isolation scopes a rule to the component that RENDERS the element, and the copies that used to
   sit here matched nothing. */

/* --- 4. The depot list, as an inline-editable table ------------------------------------- */

/* Legacy's `Table` wraps its table in a lightened plate that scrolls sideways rather than clipping
   (`_Table.scss:44-61`). The depot list wears the same plate as the lookup table above it, which is
   the whole point of the maintainer's 2026-08-18 decision: one look for both tables.

   Legacy's own entry form sat in a `.popOut` indented 34px under its heading (`_View9.scss:23-31`).
   That indent is dropped here: it belonged to a stack of narrow field blocks, and a six-column table
   needs the card's full width — the same clipping problem the savings matrix hit. */
.awb-accounts-list-holder[b-kscaut0txc] {
    width: 100%;
    margin: 0 0 0.625rem;
    border-radius: 6px;
    background: var(--rz-base-100, #f7f8f9);
    overflow-x: auto;
    overflow-y: hidden;
}

.awb-accounts-list[b-kscaut0txc] {
    min-width: 100%;
    border-collapse: collapse;
    /* No fixed layout: legacy lets the columns grow to their content and treats the percentages
       as hints (see EconomyStep's savings matrix, which had to learn the same lesson — a fixed
       layout squeezed its amount columns until they clipped). */
}

/* `.Table-column-label` (_Table.scss:64-90) with `.Cob-Table`'s 11px override (_Cob.scss:325-327). */
.awb-accounts-list th[b-kscaut0txc] {
    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: bottom;
}

/* D17 — the mandatory marker in the column header, the table's stand-in for the "*" a FormField
   label would carry. Mirrors FormField's own marker: it inherits the header colour, because it says
   "mandatory", not "wrong" — the danger tone only ever appears after a refused Gå vidare. */
.awb-accounts-list th .awb-accounts-required[b-kscaut0txc] {
    margin-inline-start: 0.15rem;
}

/* `.Table-row-value` (_Table.scss:126-142) with `.Cob-Table`'s 32px row and 12px text
   (_Cob.scss:329-332), and its inset hairline instead of a border (_Cob.scss:316-321). */
.awb-accounts-list td[b-kscaut0txc] {
    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;
    vertical-align: middle;
}

/* Column widths are hints, in legacy's own spirit: the two radio columns need room for their
   longest option ("Netto resultatbaserad"), the rest share what is left. */
.awb-accounts-list .col-custodian[b-kscaut0txc] {
    width: 22%;
}

.awb-accounts-list .col-number[b-kscaut0txc] {
    width: 15%;
}

.awb-accounts-list .col-value[b-kscaut0txc] {
    width: 15%;
}

.awb-accounts-list .col-account-type[b-kscaut0txc] {
    width: 20%;
}

.awb-accounts-list .col-depot-type[b-kscaut0txc] {
    width: 24%;
}

.awb-accounts-list .col-remove[b-kscaut0txc] {
    width: 4%;
    text-align: center;
}

/* The controls fill their cell; Radzen's inputs are inline-block by default. */
.awb-accounts-list[b-kscaut0txc]  .rz-dropdown,
.awb-accounts-list[b-kscaut0txc]  .rz-textbox,
.awb-accounts-list[b-kscaut0txc]  .rz-numeric,
.awb-accounts-list[b-kscaut0txc]  .awb-number-input {
    width: 100%;
}

/* Legacy's table values are 14px and carry far less side padding than Radzen's default — the padding
   is what eats digits in a narrow column (see the same rule on EconomyStep's savings matrix).
   CRM-334: the dropdown label is NOT padded here — a padded label stacked on the root's padding and sat
   low in the box; app.css centres every non-boxed wizard table-cell dropdown instead. */
.awb-accounts-list[b-kscaut0txc]  .rz-textbox,
.awb-accounts-list[b-kscaut0txc]  .rz-numeric-input {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Depåvärde is an amount column, and legacy right-aligns those (`_Table.scss:135-142` + `h-right`). */
.awb-accounts-list[b-kscaut0txc]  .rz-numeric-input {
    text-align: right;
}

/* The two radio groups run vertically inside their cells. Laid out horizontally — as legacy's
   stacked OptionsList did — the six columns come to well over the card's width, and the table would
   scroll sideways on every screen instead of only on a narrow one. */
.awb-accounts-list[b-kscaut0txc]  .rz-radio-button-list .rz-radiobutton-box {
    margin-inline-end: 0.375rem;
}

.awb-accounts-list[b-kscaut0txc]  .rz-radio-button-list li:not(:last-child) {
    margin-bottom: 0.25rem;
    /* Overrides rule 1's horizontal spacing, which would add a dead column of air per cell. */
    margin-inline-end: 0;
}

.awb-accounts-list[b-kscaut0txc]  .rz-radio-button-list label {
    font-size: 0.75rem;
}

/* The row-action column's header is for a screen reader only. */
.awb-accounts-list-hidden[b-kscaut0txc] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 5. The `h-line spacing` separator -------------------------------------------------- */

.awb-accounts-divider[b-kscaut0txc] {
    border-top: 1px solid var(--rz-border, #e0e0e0);
    margin: 1.25rem 0;
}

/* --- 6. "Lägg till konto" under the table (legacy View9.js:552-571) ---------------------- */

/* Legacy's shared Ta bort / Lägg till pair sat under the stacked form. Only the add half is shared
   now — removal moved into the row (maintainer, 2026-08-18) — so this is a one-button toolbar. */
.awb-accounts-actions[b-kscaut0txc] {
    display: flex;
    gap: 0.75rem;
    margin: 0.9375rem 0;
}
/* /Features/AdvisoryCases/Wizard/Steps/AssessmentStep.razor.rz.scp.css */
/* Rådgivarens bedömning — breathing room between the question blocks.

   The three Ja/Nej judgements and the two free-text blocks had only the Card body's 0.5rem gap
   (Common/UI/Card.razor.css) between them, so a question heading landed directly on the previous
   question's radio pair. 1.25rem is the wizard's existing block rhythm — WizardShell.razor.css
   `.awb-wizard-shell__step { gap: 1.25rem }` — reused here rather than a new number, which is what
   "håll dig till Common/UI-komponenternas mått" asks for. */

.awb-assessment__questions[b-uwna02oasa] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* The risk-mismatch alert is its own block above the questions and gets the same rhythm. */
.awb-assessment__mismatch[b-uwna02oasa] {
    margin-bottom: 1.25rem;
}

/* Legacy's mini-note under a question: smaller than the question, in the muted tone, with a small
   gap down to the options (cob-advisor-addeqt
   src/routes/Cob/components/OptionsList/_OptionsList.scss:52-61 —
   `.Cob-OptionsList-miniNote { margin: 0 0 5px; color: getColor(medium); font-size: 12px }`). */
.awb-assessment__hint[b-uwna02oasa] {
    margin: 0 0 0.3125rem;
    color: var(--rz-text-secondary-color, #91a0ad);
    font-size: 0.75rem;
    line-height: 1.35;
}
/* /Features/AdvisoryCases/Wizard/Steps/CaseOverviewStep.razor.rz.scp.css */
.awb-case-overview__grid[b-atmrxme2l9] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.awb-case-overview__field[b-atmrxme2l9] {
    width: 100%;
}

.awb-case-overview__catrow[b-atmrxme2l9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.375rem 0.125rem;
    font-size: 0.8125rem;
}

.awb-case-overview__hint[b-atmrxme2l9] {
    color: #b3261e;
    font-size: 0.71875rem;
    margin-left: 1.75rem;
}

.awb-case-overview__attest[b-atmrxme2l9] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.5625rem 0.125rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid #f1f2f5;
}

.awb-case-overview__attest:last-child[b-atmrxme2l9] {
    border-bottom: none;
}

.awb-case-overview__attest-meta[b-atmrxme2l9] {
    display: block;
    color: #8a919c;
    font-size: 0.71875rem;
    margin-top: 0.125rem;
}

.awb-case-overview__preselect-note[b-atmrxme2l9] {
    margin-top: 0.5rem;
}
/* /Features/AdvisoryCases/Wizard/Steps/CaseRepresentativeDialog.razor.rz.scp.css */
/* Ägarandel is a bare RadzenNumeric (not the <NumberInput> wrapper), so it misses app.css's
   .awb-number-input double-padding fix and pads twice: the base .rz-numeric rule puts 8px on the
   wrapper AND the inner <input> carries its own inline padding, stacking to a stray indent next
   to the sibling text fields (app.css:922-936 documents the same defect for the wrapped case; the
   KYC "Redigera företrädare" popup had it too — CompanyRepresentativeDialog.razor.css).
   `.awb-case-representative-input` is shared by every field in this dialog, not just Ägarandel, so
   the selector is compounded with `.rz-numeric` — the class RadzenNumeric's own root carries — to
   reach only the numeric field. ::deep because that root is emitted by a child component with no
   scope attribute of this file. */
.awb-case-representative-dialog[b-se567n0ntp]  .awb-case-representative-input.rz-numeric {
    padding-inline-start: 0;
}

.awb-case-representative-dialog[b-se567n0ntp]  .awb-case-representative-input.rz-numeric input {
    padding-inline-start: 8px;
}
/* /Features/AdvisoryCases/Wizard/Steps/Components/AccountFeeEditDialog.razor.rz.scp.css */
.awb-account-fee-dialog[b-ntg1jj7glj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awb-account-fee-dialog[b-ntg1jj7glj]  .awb-form-toolbar {
    margin-top: 8px;
}

/* Full-width box without spinner buttons; the unit sits at the field edge (same treatment as the
   Värdepapper popup). ::deep reaches the Radzen-rendered elements, which carry no scope attribute. */
.awb-account-fee-dialog[b-ntg1jj7glj]  .awb-account-fee-input,
.awb-account-fee-dialog[b-ntg1jj7glj]  .awb-account-fee-input .rz-numeric,
.awb-account-fee-dialog[b-ntg1jj7glj]  .awb-account-fee-input .rz-numeric input {
    width: 100%;
}

.awb-account-fee-dialog[b-ntg1jj7glj]  .rz-numeric-up,
.awb-account-fee-dialog[b-ntg1jj7glj]  .rz-numeric-down {
    display: none;
}

.awb-account-fee-dialog[b-ntg1jj7glj]  .awb-number-input--unit-inside .awb-number-input__unit {
    inset-inline-end: 0.75rem;
}

.awb-account-fee-dialog[b-ntg1jj7glj]  .awb-number-input--unit-inside .rz-numeric input {
    padding-inline-end: 2rem;
}
/* /Features/AdvisoryCases/Wizard/Steps/Components/AccountFeeTab.razor.rz.scp.css */
.awb-fee-tab__scroll[b-acenw9z4y4] {
    overflow-x: auto;
}

.awb-fee-tab__table[b-acenw9z4y4] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.awb-fee-tab__table th[b-acenw9z4y4] {
    padding: 0.5rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color, #6c757d);
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
}

.awb-fee-tab__table td[b-acenw9z4y4] {
    padding: 0.625rem 0.5rem;
    vertical-align: top;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
}

.awb-fee-tab__table tbody tr:last-child td[b-acenw9z4y4] {
    border-bottom: none;
}

.awb-fee-tab__table .awb-fee-tab__num[b-acenw9z4y4] {
    text-align: right;
    white-space: nowrap;
}

.awb-fee-tab__table .awb-fee-tab__actions[b-acenw9z4y4] {
    text-align: right;
    white-space: nowrap;
}

/* The quiet second line of a cell: the depot has no depåkod, so no fee is debited through the system. */
.awb-fee-tab__muted[b-acenw9z4y4] {
    display: block;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #6c757d);
}

/* The inline "Kontoval" link inside the no-account warning — a sentence link, not a button. */
.awb-fee-tab__link[b-acenw9z4y4] {
    color: var(--rz-primary, #1f4ed8);
    text-decoration: underline;
}
/* /Features/AdvisoryCases/Wizard/Steps/CustomerInformationStep.razor.rz.scp.css */
/* Kundinformation — ONE field block, eleven boxes, three per row.

   Facit: legacy COB renders the whole step's fields as two `Cob-fields-collection per-row-3`
   StackLayouts placed straight after each other inside `div.Cob-view2-fields` — cob-advisor-addeqt
   src/routes/Cob/views/CustomerInformation/CustomerInformation.js:713-890 — and _Cob.scss:73-155
   gives their children their width BY RULE:

       .Cob-fields-collection { margin-bottom: 20px !important; @include flex-flow(row wrap);
                                > * { width: 50% !important } }
       .Cob-fields-collection + .Cob-fields-collection { margin-top: -20px }
       @include breakpoint('medium') { margin: 0 -10px; > * { padding: 10px }
                                       &.per-row-3 > * { width: 33.3333% !important } }

   Three things follow from that, and all three are the maintainer's 2026-08-18 finding:

   1. THREE columns, not four. The column count is legacy's, and it is what makes row 1
      (Personnummer / Förnamn / Efternamn) and row 2 (Postadress / Postnummer / Stad) share their
      edges. The earlier four-column grid could not line up with legacy's rows at all.
   2. Width by RULE, never by content. `minmax(0, 1fr)` and not a bare `1fr`: a bare fraction floors
      at the item's min-content width, which is how a long e-mail address pushed its own column
      wider than its neighbours.
   3. The two collections read as ONE block. Legacy cancels the gap between them (-20px against the
      collection's own 20px), leaving only the 10px cell padding on each side — i.e. the same 20px
      gutter between rows *inside* a collection and *between* the two collections. The flex column
      below with a single row-gap reproduces exactly that. */

.awb-customer-fields[b-ik51kcu43t] {
    display: flex;
    flex-direction: column;
    /* Legacy's between-collection distance collapses to the same 20px gutter its rows have
       (10px padding above + 10px below). */
    gap: 1.25rem;
}

.awb-customer-fields__row[b-ik51kcu43t] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Column gutter = legacy's 10px padding on each neighbouring cell. The row gutter is larger
       because the field box has a fixed height and its FieldError / "Obligatoriskt" note is
       positioned just under the box (FormField.razor.css); 20px alone would let a message touch
       the next row. */
    gap: 1.75rem 1.25rem;
}

/* A cell holds the field AND its FieldError, so a validation message grows the row instead of
   displacing the following field into the wrong column. */
.awb-customer-fields__cell[b-ik51kcu43t] {
    min-width: 0;
}

/* Radzen renders .rz-form-field as inline-flex sized to its content, and the controls inside it carry
   no scope attribute of ours — ::deep is required or these never match. Filling the cell is what makes
   the boxes, not just the columns, the same width. */
.awb-customer-fields[b-ik51kcu43t]  .rz-form-field,
.awb-customer-fields[b-ik51kcu43t]  .awb-form-field,
.awb-customer-fields[b-ik51kcu43t]  .rz-textbox,
.awb-customer-fields[b-ik51kcu43t]  .rz-dropdown,
.awb-customer-fields[b-ik51kcu43t]  .awb-phone-input {
    width: 100%;
}

/* Legacy drops to its narrow layout below the 'medium' breakpoint; two columns keeps the pairs
   readable on a laptop-width wizard card without ever going content-sized again. */
@media (max-width: 900px) {
    .awb-customer-fields__row[b-ik51kcu43t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The line under the block, verbatim and right-aligned as legacy places it: a
   `<StackLayout justifyContent="end">` holding one 14px/300 span
   (CustomerInformation.js:904-909). Legacy has no other text between the fields and FATCA. */
.awb-customer-info-contact-note[b-ik51kcu43t] {
    margin: 0;
    text-align: end;
    font-size: 0.875rem;
    font-weight: 300;
}

/* Legacy's OptionsList description — the FATCA question itself: 14px/600 in the primary tone,
   capped at the same 480px form measure as every other block (_OptionsList.scss:24-26, :34-47). */
.awb-customer-info-fatca-question[b-ik51kcu43t] {
    max-width: var(--awb-cob-field-max, 480px);
    margin: 0 0 0.3125rem;
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.875rem;
    font-weight: 600;
}

/* The register-lookup banner (kept from the automatic-lookup round: shown only when the lookup
   failed). Legacy's own Notice is a calm, narrow block — `max-width: getGeneral(maxFieldWidth)`,
   10px padding, 14px text, 5px radius (_Notice.scss:1-10) — so the banner takes the same measure
   instead of running the full card width. */
.awb-customer-info-lookup[b-ik51kcu43t] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: var(--awb-cob-field-max, 480px);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* QA1 (CRM-387): Radzen material indents .rz-column-title by --rz-grid-header-title-padding-inline (1rem) while
   .rz-cell-data has no inset, so headers sat 16px right of their values. Same fix as CRM-380's case grid. */
.awb-case-representative-grid[b-ik51kcu43t]  .rz-grid-table thead th .rz-column-title {
    padding-inline-start: 0;
}

/* QA2 (CRM-387): flex drops the whitespace gap between the two icon buttons, so both fit the 80px action column
   (2 x 30px + 20px cell padding). */
.awb-case-representative-grid[b-ik51kcu43t]  .rz-grid-table tbody td .rz-cell-data:has(.awb-button) {
    display: flex;
}
/* /Features/AdvisoryCases/Wizard/Steps/EconomyStep.razor.rz.scp.css */
/* Legacy COB "Sparprofil" look for the Privatekonomi step (D10 in
   docs/epics/E9-advisory-cases/legacy-fidelity-ui-plan.md).
   Sources: cob-advisor-addeqt src/routes/Cob/_Cob.scss (risk-class cells, ~355-368),
   src/routes/Cob/components/TableSummaryField/_TableSummaryField.scss and
   src/helpers/scss/_variables.scss (palette: primary #003d50, secondary #4cb7d5,
   success #2ed1a0, warning #eec24b, danger #df4c43, medium #91a0ad).

   `::deep` is used wherever the target element is rendered by a child component
   (Card, FormField, Radzen) and therefore does not carry this component's scope. */

/* --- 1. Centred section headings in the legacy primary colour ------------- */

.awb-economy[b-joh0p61wxh]  .awb-card-header {
    justify-content: center;
}

.awb-economy[b-joh0p61wxh]  .awb-card-title {
    color: var(--awb-cob-primary, #003d50);
    font-size: 1.0625rem;
    text-align: center;
}

.awb-economy > :not(:first-child)[b-joh0p61wxh] {
    margin-top: 1rem;
}

/* --- 2. Full-width field grid instead of a narrow stacked column ---------- */

.awb-economy-grid[b-joh0p61wxh] {
    display: grid;
    gap: 0.5rem 1rem;
}

.awb-economy-grid-3[b-joh0p61wxh] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.awb-economy-grid-2[b-joh0p61wxh] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.awb-economy-grid + .awb-economy-grid[b-joh0p61wxh] {
    margin-top: 0.25rem;
}

/* The fields must fill their grid cell; Radzen's inputs are inline-block by default. */
.awb-economy-grid[b-joh0p61wxh]  .rz-numeric,
.awb-economy-grid[b-joh0p61wxh]  .rz-dropdown,
.awb-economy-grid[b-joh0p61wxh]  .rz-textbox {
    width: 100%;
}

@media (max-width: 900px) {
    .awb-economy-grid-3[b-joh0p61wxh],
    .awb-economy-grid-2[b-joh0p61wxh] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- 3. Unit suffix inside the field's right edge ------------------------- */

.awb-unit-field[b-joh0p61wxh] {
    position: relative;
    display: block;
}

.awb-unit-field[b-joh0p61wxh]  .rz-numeric-input {
    padding-inline-end: 2.5rem;
}

.awb-unit[b-joh0p61wxh] {
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rz-text-tertiary-color, #91a0ad);
    font-size: 0.75rem;
    pointer-events: none;
}

/* --- 4./6. Risk-class table --------------------------------------------- */

.awb-savings-grid[b-joh0p61wxh] {
    width: 100%;
    border-collapse: collapse;
    /* NOT table-layout: fixed. Legacy's Table lets the columns grow to their content and treats
       the percentages as hints (_Table.scss:50-61: the table is min-width:100% inside an
       overflow-x:auto holder). Fixed layout squeezed the four amount columns to 10% of the card,
       which both overlapped the BUFFERTSPARANDE/MÅLSPARANDE headings and clipped five-digit
       amounts inside the inputs. */
}

.awb-savings-grid th[b-joh0p61wxh] {
    padding: 0.5rem;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: right;
    text-transform: uppercase;
    vertical-align: bottom;
}

.awb-savings-grid th.col-risk[b-joh0p61wxh],
.awb-savings-grid th.col-instruments[b-joh0p61wxh] {
    text-align: left;
}

/* Legacy column widths: risk 9%, instruments 40%, "inget sparande" 8%, amounts share the rest. */
.awb-savings-grid .col-risk[b-joh0p61wxh] {
    width: 9%;
}

.awb-savings-grid .col-instruments[b-joh0p61wxh] {
    width: 40%;
}

.awb-savings-grid .col-toggle[b-joh0p61wxh] {
    width: 8%;
    text-align: center;
}

.awb-savings-grid td[b-joh0p61wxh] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
    vertical-align: middle;
}

.awb-savings-grid td.financial-instruments[b-joh0p61wxh] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.75rem;
    line-height: 1.35;
    vertical-align: middle;
}

.awb-savings-grid td.risk-class[b-joh0p61wxh] {
    padding: 0.35rem;
    border-bottom: 0;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
}

.awb-savings-grid td.risk-class.bg-success[b-joh0p61wxh] {
    background: var(--awb-cob-success, #2ed1a0);
}

.awb-savings-grid td.risk-class.bg-warning[b-joh0p61wxh] {
    background: var(--awb-cob-warning, #eec24b);
}

.awb-savings-grid td.risk-class.bg-danger[b-joh0p61wxh] {
    background: var(--awb-cob-danger, #df4c43);
}

.awb-savings-grid[b-joh0p61wxh]  .rz-numeric {
    width: 100%;
    /* Room for a seven-digit amount — legacy never clips a typed value. */
    min-width: 6.5rem;
}

/* Legacy's table values are 14px, right-aligned (_Table.scss:135-142 + the amount columns'
   h-right), and its inputs carry far less side padding than Radzen's default — the padding, not
   the font, is what ate the digits. */
.awb-savings-grid[b-joh0p61wxh]  .rz-numeric-input {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    text-align: right;
}

.awb-savings-grid[b-joh0p61wxh]  .rz-numeric-input {
    text-align: right;
}

.awb-savings-grid tfoot td[b-joh0p61wxh] {
    border-bottom: 0;
    color: var(--awb-cob-secondary, #4cb7d5);
    font-size: 0.8125rem;
    text-align: right;
}

.awb-savings-grid tfoot td.foot-label[b-joh0p61wxh] {
    color: var(--rz-text-color, #3f4950);
    font-weight: 700;
}

/* --- 5. Info pill above the table ---------------------------------------- */

.awb-savings-notice[b-joh0p61wxh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: fit-content;
    margin: 0 auto 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--awb-cob-primary, #003d50);
    color: #ffffff;
    font-size: 0.75rem;
}

.awb-savings-notice[b-joh0p61wxh]  .rz-icon,
.awb-savings-notice[b-joh0p61wxh]  .notranslate {
    font-size: 1rem;
    line-height: 1;
}

/* --- 7. Three-column summary -------------------------------------------- */

/* Legacy renders the summary as an untitled light plate directly under the table
   (_Cob.scss .Cob-TableSummary / .Cob-TableSummary-container: margin-top 10px, padding 5px,
   lightened background, 10px radius, flex row wrap). The heading it used to carry here was a
   card header centred by rule 1 above, which put it on top of the first summary row. */
.awb-summary-grid[b-joh0p61wxh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin-top: 0.625rem;
    padding: 0.625rem;
    border-radius: 10px;
    background: var(--rz-base-100, #f7f8f9);
}

/* Legacy's field is a flex column pinned to the top of its cell, with the VALUE pushed to the
   bottom (_TableSummaryField.scss:1-10 and :44-52 — `.Cob-TableSummaryField-value { margin-top: auto }`).
   That auto margin is what keeps the values on one line across a row: without it an item that has a
   description ("Buffertsparande < 1 år totalt") pushed its value a line lower than its neighbours'. */
.awb-summary-item[b-joh0p61wxh] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.awb-summary-label[b-joh0p61wxh] {
    margin-bottom: 0.25rem;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

.awb-summary-hint[b-joh0p61wxh] {
    margin-top: -0.2rem;
    margin-bottom: 0.25rem;
    color: var(--rz-text-secondary-color, #91a0ad);
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

.awb-summary-value[b-joh0p61wxh] {
    margin-top: auto;
    color: var(--awb-cob-secondary, #4cb7d5);
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .awb-summary-grid[b-joh0p61wxh] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* CRM-276 — the matrix cells host <NumberInput Amount="true"> now, not a bare RadzenNumeric, so the
   amount field gained a wrapper span. The wrapper is inline-flex (Common/UI/NumberInput.razor.css),
   which is exactly what the `.rz-numeric` it replaced was, so stretching it to the cell is the whole
   adjustment; the field then fills the column as it did before.

   Nothing here touches the FRAME. CRM-276 neutralised it (`background-color: transparent; border: 0;
   border-radius: 0`) on the premise that legacy draws no box around a table cell — that premise is
   wrong: the matrix cells render legacy's SimpleTextField, which IS boxed (cob-advisor-addeqt
   src/routes/Cob/components/SimpleTextField/_SimpleTextField.scss:109-122 — white, 1px solid
   lighten(medium, 15 %) = #bdc6ce, the very colour --awb-cob-field-border carries). `border: 0` also
   took the border Radzen's own theme gave these cells before CRM-276, and with it the filled (teal)
   and missing (red) marks in app.css, which set `border-color` only and so need a border to paint on.
   Leaving the shared frame in place restores all three. */
.awb-savings-grid[b-joh0p61wxh]  .awb-number-input {
    width: 100%;
}

/* …except that the missing mark is the one state colour the shared frame can outrank: app.css declares
   it as `:is(.awb-wizard-shell, …) .awb-field-missing:not(…)` — three compound selectors, exactly the
   frame's weight — and app.css is linked BEFORE the scoped bundle, so a tie goes to the frame. (The
   filled/teal mark carries one compound more and wins unaided.) Re-asserted here rather than in
   Common/UI because this matrix is where the cells declare Required: a refused Gå vidare must redden
   the empty ones, as it did before CRM-276. Same exclusions as app.css — a toggled-off row is disabled,
   not unanswered. */
.awb-savings-grid[b-joh0p61wxh]  .awb-number-input .rz-numeric.awb-field-missing:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    border-color: var(--awb-cob-danger, #df4c43);
}
/* /Features/AdvisoryCases/Wizard/Steps/EngagementServiceRow.razor.rz.scp.css */
/* Legacy's .Cob-BaseAgreement-fields div.row: the tick in a 30% column, its body text in the
   remaining 70%, separated by a hairline — _Uppdragsavtal.scss:29-59. The description column is
   light (300) with legacy's own line-heights, and its bullets are real discs. */

.awb-service-row[b-g2pb8x6o09] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f5f5f5;
}

.awb-service-row:last-child[b-g2pb8x6o09] {
    border-bottom: 0;
}

.awb-service-row__check[b-g2pb8x6o09] {
    flex: 0 0 30%;
    max-width: 30%;
    padding-right: 0.75rem;
}

/* Legacy renders the service name bold (`.Checkbox { font-weight: bold }`, _Uppdragsavtal.scss:35). */
.awb-service-row__check[b-g2pb8x6o09]  .awb-checkbox-label {
    font-weight: 700;
    line-height: 1.25;
}

.awb-service-row__desc[b-g2pb8x6o09] {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 300;
    line-height: 16px;
}

.awb-service-row__lead[b-g2pb8x6o09] {
    margin: 0;
}

.awb-service-row__bullets[b-g2pb8x6o09] {
    display: block;
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 20px;
    list-style: disc;
}

.awb-service-row__bullets li[b-g2pb8x6o09] {
    display: list-item;
    padding-bottom: 5px;
}
/* /Features/AdvisoryCases/Wizard/Steps/EngagementStep.razor.rz.scp.css */
/* Legacy's intro block and the heading that follows it (Uppdragsavtal.js:135-145;
   _Uppdragsavtal.scss:62-72 — a light 13px paragraph on a #fafafa band, then the h3). */

.awb-engagement__intro[b-cy2vcvapbl] {
    margin: 0 0 0.625rem;
    padding: 0.625rem;
    font-size: 13px;
    font-weight: 300;
    background: #fafafa;
}

.awb-engagement__heading[b-cy2vcvapbl] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* /Features/AdvisoryCases/Wizard/Steps/EsgStep.razor.rz.scp.css */
.awb-esg-step__group[b-2jizjdwc5u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* CRM-278 — legacy gives the percent field the full width under its option
   (EsgSupport.functionUtils.js:177 width:'100%' plus :193 fullWidth), but the group's
   align-items: flex-start collapses every child to fit-content. Stretch the field back; the actual
   width is the wizard's own cap in FormField.razor.css. */
.awb-esg-step__objectives[b-2jizjdwc5u]  .awb-form-field {
    align-self: stretch;
}

/* Legacy's .TextField.disabled (_TextField.scss:33-35). The house box has no disabled state of its own,
   and the sustainable objectives are the only place in the wizard where a boxed control is disabled yet
   still visible — the rule stays here until a second site exists. Two hooks, because RadzenNumeric
   exposes both (pinned by Disabled_numeric_exposes_the_hooks_the_scoped_box_rules_depend_on). */
.awb-esg-step__objectives[b-2jizjdwc5u]  .awb-form-field:has(input:disabled),
.awb-esg-step__objectives[b-2jizjdwc5u]  .awb-form-field:has(.rz-state-disabled) {
    opacity: 0.3333;
    cursor: not-allowed;
}

.awb-esg-step__counter[b-2jizjdwc5u] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #6c757d);
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
}
/* /Features/AdvisoryCases/Wizard/Steps/ExistingAccountsStep.razor.rz.scp.css */
.awb-existing-accounts__table[b-lexsllp5i5] {
    width: 100%;
    border-collapse: collapse;
}

.awb-existing-accounts__table th[b-lexsllp5i5],
.awb-existing-accounts__table td[b-lexsllp5i5] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
}
/* /Features/AdvisoryCases/Wizard/Steps/FinancingMatrixDialog.razor.rz.scp.css */
.awb-matrix-dialog__table[b-mmqeg2ucnp] {
    width: 100%;
    border-collapse: collapse;
}

.awb-matrix-dialog__table th[b-mmqeg2ucnp],
.awb-matrix-dialog__table td[b-mmqeg2ucnp] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
}

.awb-matrix-dialog__table th.awb-matrix-dialog__num[b-mmqeg2ucnp],
.awb-matrix-dialog__table td.awb-matrix-dialog__num[b-mmqeg2ucnp] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Features/AdvisoryCases/Wizard/Steps/KnowledgeExperienceStep.razor.rz.scp.css */
/* Legacy COB "Erfarenhetsbakgrund" look for the Kunskap-och-handelserfarenhet step (D14 in
   docs/epics/E9-advisory-cases/legacy-fidelity-ui-plan.md).
   Sources: cob-advisor-addeqt src/routes/Cob/views/PreviousExperience/PreviousExperience.js
   (centred intro stack, the h-line separator, the end-justified master checkbox, the five table
   columns at 15/20/20/15/30 %), _PreviousExperience.scss and src/helpers/scss/_variables.scss
   (primary #003d50, success #2ed1a0, medium #91a0ad).

   `::deep` is used wherever the target element is rendered by a child component (Card, Checkbox,
   RadioList, Radzen) and therefore does not carry this component's scope. */

/* --- 1. Centred heading in the legacy primary colour --------------------- */

.awb-knowledge[b-8e4ce86s5c]  .awb-card-header {
    justify-content: center;
}

.awb-knowledge[b-8e4ce86s5c]  .awb-card-title {
    color: var(--awb-cob-primary, #003d50);
    font-size: 1.0625rem;
    text-align: center;
}

/* --- 2. Intro block: centred stack with room, not a cramped left column --- */

.awb-knowledge-intro[b-8e4ce86s5c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.5rem 0 1.25rem;
}

/* FR-UI-APP-180 — the two intro questions are hosted by <FormField> now (so they carry the required
   marker and the failed-validation border), but the question is still legacy's bold teal prompt rather
   than a form-field caption (PreviousExperience.js:89-112). ::deep because FormField renders the label. */
.awb-knowledge-intro[b-8e4ce86s5c]  .awb-form-field-label {
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
}

.awb-knowledge-intro[b-8e4ce86s5c]  .awb-form-field:not(:first-child) {
    margin-top: 1.25rem;
}

.awb-knowledge-intro[b-8e4ce86s5c]  .awb-radio-list {
    margin-top: 0.5rem;
}

/* Legacy spaces the Nej/Ja pair out instead of butting the two options together. */
.awb-knowledge-intro[b-8e4ce86s5c]  .rz-radio-button-list .rz-radiobutton-box,
.awb-knowledge-intro[b-8e4ce86s5c]  .rz-radio-button-list li:not(:last-child) {
    margin-inline-end: 1rem;
}

/* --- 3. Years field with the legacy "år" suffix beside it ----------------- */

.awb-knowledge-years[b-8e4ce86s5c] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.awb-knowledge-years[b-8e4ce86s5c]  .rz-numeric {
    width: 9.5rem;
}

.awb-knowledge-years-unit[b-8e4ce86s5c] {
    color: var(--rz-text-secondary-color, #91a0ad);
    font-size: 0.8125rem;
}

/* --- 4. The legacy `h-line spacing` separator ---------------------------- */

.awb-knowledge-divider[b-8e4ce86s5c] {
    border-top: 1px solid var(--rz-border, #e0e0e0);
    margin: 0 0 1.25rem;
}

/* --- 5. Master attestation: right-aligned above the table, label first ---- */

.awb-knowledge-master[b-8e4ce86s5c] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

/* Legacy uses labelAlign="left" — the label sits to the LEFT of the box, in the COB teal. */
.awb-knowledge-master[b-8e4ce86s5c]  .awb-checkbox {
    flex-direction: row-reverse;
    gap: 0.5rem;
}

.awb-knowledge-master[b-8e4ce86s5c]  .awb-checkbox-label {
    color: var(--awb-cob-success, #2ed1a0);
    font-size: 0.8125rem;
    text-align: right;
}

/* --- 6. The instrument table -------------------------------------------- */

.awb-knowledge-grid[b-8e4ce86s5c] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.awb-knowledge-grid th[b-8e4ce86s5c] {
    padding: 0.5rem;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: uppercase;
    vertical-align: bottom;
}

/* D17 — the "*" on a mandatory COLUMN. Same role as FormField's own marker, but that one is scoped to
   FormField and a table declares its mandatory-ness once in the header rather than in every cell. */
.awb-knowledge-grid th .awb-knowledge-required[b-8e4ce86s5c] {
    margin-inline-start: 0.15rem;
}

/* Legacy column widths and alignments (PreviousExperience.js:439-477). */
.awb-knowledge-grid .col-investment[b-8e4ce86s5c] {
    width: 15%;
    text-align: left;
}

.awb-knowledge-grid .col-trades[b-8e4ce86s5c] {
    width: 20%;
    text-align: left;
}

.awb-knowledge-grid .col-knowledge[b-8e4ce86s5c] {
    width: 20%;
    text-align: left;
}

.awb-knowledge-grid .col-education[b-8e4ce86s5c] {
    width: 15%;
    text-align: right;
}

.awb-knowledge-grid .col-risk[b-8e4ce86s5c] {
    width: 30%;
    text-align: right;
}

.awb-knowledge-grid td[b-8e4ce86s5c] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
    vertical-align: middle;
}

.awb-knowledge-grid td.col-investment[b-8e4ce86s5c] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.75rem;
    line-height: 1.35;
}

.awb-knowledge-grid[b-8e4ce86s5c]  .rz-numeric,
.awb-knowledge-grid[b-8e4ce86s5c]  .rz-dropdown {
    width: 100%;
}

/* Legacy's table inputs are compact — one line, no oversized Radzen padding. */
.awb-knowledge-grid[b-8e4ce86s5c]  .rz-numeric-input,
.awb-knowledge-grid[b-8e4ce86s5c]  .rz-dropdown-label {
    font-size: 0.75rem;
}

.awb-knowledge-grid[b-8e4ce86s5c]  .rz-dropdown-item.rz-state-disabled {
    color: var(--rz-text-disabled-color, #b6bfc6);
    cursor: not-allowed;
}
/* /Features/AdvisoryCases/Wizard/Steps/PoaRowGroup.razor.rz.scp.css */
/* Legacy's .Cob-POA-fields (_Uppdragsavtal.scss:100-140): the paragraph + bullet list, then a
   textField-row that lays the two boxed fields and the two icons out on ONE line. */

.awb-poa-group[b-qzjsd3jf8q] {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f5f5f5;
}

.awb-poa-group:last-child[b-qzjsd3jf8q] {
    border-bottom: 0;
}

.awb-poa-group__lead[b-qzjsd3jf8q] {
    margin: 0;
    font-weight: 300;
    line-height: 16px;
}

.awb-poa-group__bullets[b-qzjsd3jf8q] {
    display: block;
    margin: 0 0 0.5rem;
    padding: 0 0 0 20px;
    font-weight: 300;
    line-height: 20px;
    list-style: disc;
}

.awb-poa-group__bullets li[b-qzjsd3jf8q] {
    display: list-item;
    padding-bottom: 2px;
}

/* One row: institut, nummer, icons — legacy's div.textField-row.
   GRID, not flex (2026-08-19): the actions cell carries a different number of icons on every row (none
   on the first while it is alone, remove only in the middle, add+remove on the last), and a flex row
   resolves its own basis against whatever is left over, so each row sized its two fields differently
   and the columns stepped sideways as rows were added. Three fixed tracks declared once — 40/60 for the
   field pair (legacy's `maxWidth: 40%`, PoaTextFields.js:24) plus a constant icon gutter — are shared
   by every row in the group, so the columns line up no matter which icons a row happens to show.
   `align-items: center` still puts the icon buttons on the row's own centre line. */
.awb-poa-row[b-qzjsd3jf8q] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 4.5rem;
    align-items: center;
    gap: 0.625rem;
    margin: 0.625rem 0;
}

.awb-poa-row__institute[b-qzjsd3jf8q],
.awb-poa-row__number[b-qzjsd3jf8q] {
    min-width: 0;
}

.awb-poa-row__institute[b-qzjsd3jf8q]  .awb-form-field,
.awb-poa-row__number[b-qzjsd3jf8q]  .awb-form-field {
    max-width: none;
}

/* The third track is always present, even when this cell is empty — that is what keeps the field
   columns from shifting on a row that shows no icon. */
.awb-poa-row__actions[b-qzjsd3jf8q] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-start;
}

/* Legacy's icon colours: #003d50 for add, #df4c43 for remove (_Uppdragsavtal.scss:126-134). */
.awb-poa-row__add[b-qzjsd3jf8q]  .rz-button {
    color: #003d50;
}

.awb-poa-row__remove[b-qzjsd3jf8q]  .rz-button {
    color: #df4c43;
}

.awb-poa-row__actions[b-qzjsd3jf8q]  .rz-button {
    min-width: 0;
    padding: 0.25rem;
    border-radius: 50%;
}

.awb-poa-row__actions[b-qzjsd3jf8q]  .rz-button-icon-left {
    margin: 0;
    font-size: 22px;
}
/* /Features/AdvisoryCases/Wizard/Steps/PrePurchaseStep.razor.rz.scp.css */
/* Legacy `Forkopsinformation.js:99-101` renders the ingress as a light, narrow paragraph above the first
   group heading; the group headings themselves are <h4>s separated by a hairline (`.h-line spacing`). */
.awb-pre-purchase__ingress[b-yz8gunae9a] {
    margin: 0 0 1rem;
    max-width: 600px;
    font-weight: 300;
    font-size: 0.85rem;
    line-height: 1.45;
}

.awb-pre-purchase__group[b-yz8gunae9a] {
    margin: 0 0 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--rz-border-color, #e9ecef);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Org.nr is derived from the ombud selection, not typed — rendered as read-back text in the field slot
   so it lines up with the real inputs above it without pretending to be editable. */
.awb-pre-purchase__derived[b-yz8gunae9a] {
    display: inline-block;
    padding-block: 0.35rem;
    font-variant-numeric: tabular-nums;
}
/* /Features/AdvisoryCases/Wizard/Steps/ProductRiskDialog.razor.rz.scp.css */
.awb-product-risk-dialog__table[b-vifjbix4yd] {
    width: 100%;
    border-collapse: collapse;
}

.awb-product-risk-dialog__table th[b-vifjbix4yd],
.awb-product-risk-dialog__table td[b-vifjbix4yd] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
}

.awb-product-risk-dialog__table th.awb-product-risk-dialog__num[b-vifjbix4yd],
.awb-product-risk-dialog__table td.awb-product-risk-dialog__num[b-vifjbix4yd] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.awb-product-risk-dialog__disclaimer[b-vifjbix4yd] {
    margin: 0;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.8rem;
    line-height: 1.45;
}
/* /Features/AdvisoryCases/Wizard/Steps/ProposalBaseValuesDialog.razor.rz.scp.css */
/* Legacy's 2x3 grid (redigera-basvarden-popup.webp): two columns of boxed fields, filled left to right. */
.awb-base-values-dialog__grid[b-dorkkj7abk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 1.25rem;
    align-items: start;
}

.awb-base-values-dialog[b-dorkkj7abk]  .awb-number-input {
    display: block;
    width: 100%;
}

.awb-base-values-dialog[b-dorkkj7abk]  .awb-number-input .rz-numeric {
    width: 100%;
}
/* /Features/AdvisoryCases/Wizard/Steps/ProposalOrderDialog.razor.rz.scp.css */
/* Legacy's order form in a wide popup (investeringsradgivning-flik.webp): the form on the left, the risk filter
   and the "Redigera basvärden" box on the right. */
.awb-order-dialog__grid[b-9yysix6xpd] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .awb-order-dialog__grid[b-9yysix6xpd] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.awb-order-dialog__form[b-9yysix6xpd] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Legacy pairs the short fields of section 3 side by side (Antal | Typ av ersättning, Kurslimit | Courtage). */
.awb-order-dialog__row[b-9yysix6xpd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 0.75rem;
    align-items: start;
}

/* SearchSelect's help line and its result popover are absolutely positioned out of the field's box
   (SearchSelect.razor.css), so this wrapper reserves that space; without it the derived fields rise into it. */
.awb-order-dialog__product-field[b-9yysix6xpd] {
    margin-block-end: 1.5rem;
}

.awb-order-dialog__hit-name[b-9yysix6xpd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.awb-order-dialog__hit-isin[b-9yysix6xpd] {
    margin-inline-start: auto;
    color: var(--awb-cob-field-label, #91a0ad);
    font-size: 0.75rem;
    white-space: nowrap;
}

.awb-order-dialog__hit-risk[b-9yysix6xpd] {
    padding: 0.0625rem 0.5rem;
    background: var(--awb-cob-light, #f4f5f7);
    border-radius: 10px;
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.6875rem;
    white-space: nowrap;
}

/* Horisont / Risk på produkt / Maximal förlust are read-back values, not inputs. */
.awb-order-dialog__derived[b-9yysix6xpd] {
    display: inline-block;
    padding-block: 0.35rem;
    font-variant-numeric: tabular-nums;
}

/* FormField's red border only reaches inputs; the read-back risk value frames itself. */
.awb-order-dialog__derived--invalid[b-9yysix6xpd] {
    padding-inline: 0.5rem;
    border: 1px solid var(--rz-danger, #dc3545);
    border-radius: 5px;
}

/* Legacy's grey info bar under the first fields of section 3. */
.awb-order-dialog__currency-info[b-9yysix6xpd] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: var(--awb-cob-light, #f4f5f7);
    border-radius: 5px;
    font-size: 0.8125rem;
}

.awb-order-dialog__preview[b-9yysix6xpd] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.awb-order-dialog__filters[b-9yysix6xpd] {
    padding: 0.75rem 0.875rem;
}

.awb-order-dialog__filter-title[b-9yysix6xpd] {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.awb-order-dialog__filter-note[b-9yysix6xpd] {
    margin: 0.5rem 0 0;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.75rem;
}

/* Legacy's amber "Redigera basvärden" box. */
.awb-order-dialog__base-values[b-9yysix6xpd] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.875rem;
    background: color-mix(in srgb, var(--awb-cob-warning, #eec24b) 20%, #fff);
    border: 1px solid color-mix(in srgb, var(--awb-cob-warning, #eec24b) 50%, #fff);
    border-radius: 5px;
}

.awb-order-dialog__base-values-title[b-9yysix6xpd] {
    font-size: 0.875rem;
}

.awb-order-dialog__base-values-text[b-9yysix6xpd] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.awb-order-dialog__base-values-text--note[b-9yysix6xpd] {
    font-style: italic;
}

/* FormField's red border only reaches inputs; the base-values box is a block, so it takes the colour itself. */
.awb-order-dialog__aside[b-9yysix6xpd]  .awb-form-field-input--error .awb-order-dialog__base-values {
    border-color: var(--rz-danger, #dc3545);
}
/* /Features/AdvisoryCases/Wizard/Steps/ProposalStep.razor.rz.scp.css */
.awb-proposal-step__table[b-2bayitb4is] {
    width: 100%;
    border-collapse: collapse;
}

.awb-proposal-step__table th[b-2bayitb4is],
.awb-proposal-step__table td[b-2bayitb4is] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
}

.awb-proposal-step__num[b-2bayitb4is] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.awb-proposal-step__summary[b-2bayitb4is] {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--rz-border, #e0e0e0);
}

.awb-proposal-step__summary-label[b-2bayitb4is] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #6c757d);
}

.awb-proposal-step__summary-value[b-2bayitb4is] {
    font-size: 1.1875rem;
    font-weight: 600;
}

/* CRM-291 — legacy PortfolioRiskBox.js:28-30: "Justerad investerings/riskprofil" above the chosen
   riskaptit is shown in the danger colour (the same token as `.is-at-limit` below). */
.awb-proposal-step__summary-value--danger[b-2bayitb4is] {
    color: var(--awb-cob-danger, #df4c43);
}

/* s11 — the Portföljförvaltning tab. Legacy `_View10.scss` `.portfolio-container` stacks the selector
   fields above the added-rows list; the selected portfolio's regulated risk class is echoed under the
   dropdown the way legacy's option label carries it. */
.awb-proposal-step__fees[b-2bayitb4is] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* CRM-411 fix 6 — the one vertical rhythm of a Placeringsförslag tab: the gap the wizard shell puts between
   a step's blocks (WizardShell.razor.css `.awb-wizard-shell__step`, reused by AssessmentStep). The
   Investeringsrådgivning tab nests its two blocks in this wrapper; the Portföljförvaltning tab is the wrapper. */
.awb-proposal-step__tab[b-2bayitb4is],
.awb-proposal-step__grid-card[b-2bayitb4is],
.awb-proposal-step__existing-holdings[b-2bayitb4is] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.awb-proposal-step__existing-title[b-2bayitb4is] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* EmptyState's 2rem of padding is a page-level empty screen; under the holdings heading it left a large gap. */
.awb-proposal-step__existing-holdings[b-2bayitb4is]  .awb-empty-state {
    padding-block: 0.5rem;
}

/* CRM-260 — the Portfölj box holds a whole option label on one line. The names come from
   Accountservice now and the option carries its risk class ("ADD Globala enskilda aktier -
   riskklass 5"), which is markedly longer than the local catalog's labels; at the toolbar's
   content width both the closed control and the option panel (Radzen sizes the panel from the
   control) broke every entry onto two lines. Only this field widens — Belopp and the button keep
   the widths they had. */
.awb-proposal-step__portfolio[b-2bayitb4is]  .awb-form-toolbar > .awb-form-field:first-child {
    flex: 0 0 22rem;
    max-width: 22rem;
}

.awb-proposal-step__portfolio-risk[b-2bayitb4is] {
    margin: 0;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.85rem;
}

/* ── Legacy /cob/14 order list (order 2026-08-18) ────────────────────────────────────────────────── */

/* The placeringsförslag table. Two-line cells (main value over a muted second line) are legacy's own
   shape — ProductsList.js renders `.main-text` + `.muted` in ORDERTYP, NAMN and FÖRVAR. */
.awb-proposal-step__orders[b-2bayitb4is] {
    width: 100%;
    border-collapse: collapse;
}

.awb-proposal-step__orders th[b-2bayitb4is],
.awb-proposal-step__orders td[b-2bayitb4is] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-border-color, #e9ecef);
    font-size: 0.8rem;
    text-align: left;
    vertical-align: top;
}

.awb-proposal-step__orders th[b-2bayitb4is] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Same specificity as the rule above, declared after it so the numeric columns win. */
.awb-proposal-step__orders th.awb-proposal-step__num[b-2bayitb4is],
.awb-proposal-step__orders td.awb-proposal-step__num[b-2bayitb4is] {
    text-align: right;
}

/* The trash column: only the icon button, right-aligned and as narrow as the button. */
.awb-proposal-step__orders th.awb-proposal-step__actions[b-2bayitb4is],
.awb-proposal-step__orders td.awb-proposal-step__actions[b-2bayitb4is],
.awb-proposal-step__table th.awb-proposal-step__actions[b-2bayitb4is],
.awb-proposal-step__table td.awb-proposal-step__actions[b-2bayitb4is] {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.awb-proposal-step__cell-main[b-2bayitb4is] {
    font-weight: 600;
}

.awb-proposal-step__cell-muted[b-2bayitb4is] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.72rem;
}

/* The "Saknas ..." style note: amber text under the Portföljförvaltning form. */
.awb-proposal-step__missing[b-2bayitb4is] {
    margin: 0;
    color: var(--awb-cob-warning, #eec24b);
    font-size: 0.8rem;
}

/* ── CRM-280: the Portföljförvaltning and Avgift tables ─────────────────────────────────────────── */

/* CRM-283 — the per-row incompleteness note under a percent row's amount. Muted and wrapped, because it
   is a sentence in a numeric column: it must read as an explanation of the 0 kr above it, not as data. */
.awb-proposal-step__row-note[b-2bayitb4is] {
    display: block;
    margin-top: 0.15rem;
    color: var(--awb-cob-warning, #eec24b);
    font-size: 0.72rem;
    font-weight: 400;
    text-align: right;
    white-space: normal;
}
/* /Features/AdvisoryCases/Wizard/Steps/RiskAppetiteStep.razor.rz.scp.css */
.awb-risk-step__table[b-ew03005ss3] {
    width: 100%;
    border-collapse: collapse;
}

.awb-risk-step__table th[b-ew03005ss3],
.awb-risk-step__table td[b-ew03005ss3] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
}

.awb-risk-step__table tr.is-selected[b-ew03005ss3] {
    background: var(--rz-primary-lighter, rgba(74, 111, 165, 0.12));
}

.awb-risk-step__chip[b-ew03005ss3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    font-weight: 600;
    color: #fff;
}

.awb-risk-step__chip--1[b-ew03005ss3] { background: #2e7d32; }
.awb-risk-step__chip--2[b-ew03005ss3] { background: #66bb6a; }
.awb-risk-step__chip--3[b-ew03005ss3] { background: #c0ca33; }
.awb-risk-step__chip--4[b-ew03005ss3] { background: #fdd835; color: #212529; }
.awb-risk-step__chip--5[b-ew03005ss3] { background: #fb8c00; }
.awb-risk-step__chip--6[b-ew03005ss3] { background: #e64a19; }
.awb-risk-step__chip--7[b-ew03005ss3] { background: #c62828; }

/* --- Legacy view-6 explanatory text (Risk.js:282-304) --------------------- */

.awb-risk-step__intro p[b-ew03005ss3] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--rz-text-color, #212529);
}

.awb-risk-step__heading[b-ew03005ss3] {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.awb-risk-step__note[b-ew03005ss3] {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color, #6c757d);
}

/* --- The eight-column reference table (RiskUtils.js:72-331) --------------- */

/* Legacy right-aligns the four numeric columns (horizontalAlign: 'right') and top-aligns every cell. */
.awb-risk-step__table th[b-ew03005ss3],
.awb-risk-step__table td[b-ew03005ss3] {
    vertical-align: top;
}

.awb-risk-step__table th.awb-risk-step__numeric[b-ew03005ss3],
.awb-risk-step__table td.awb-risk-step__numeric[b-ew03005ss3] {
    text-align: right;
}

/* Only the VALUES resist wrapping. Legacy sets no `white-space` anywhere in `_Table.scss`, so its
   headings wrap freely — `10 % RISK FÖR EN ÅRS-AVKASTNING LÄGRE ÄN` becomes four short lines and the
   column shrinks to its widest word. Keeping the heading on one line is what pushed the last two
   columns off the 960px card and forced the horizontal scroll (maintainer, 2026-08-19). */
.awb-risk-step__table td.awb-risk-step__numeric[b-ew03005ss3] {
    white-space: nowrap;
}

/* One portfolio per line (CRM-409): the names are stored "\n"-separated, so pre-line forces each onto its own line. */
.awb-risk-step__table td.awb-risk-step__portfolios[b-ew03005ss3] {
    white-space: pre-line;
}

/* --- Radio groups (scoped through ::deep: the class lands on Radzen's root) */

.awb-risk-step__mandate-choice[b-ew03005ss3],
.awb-risk-step__general-risk[b-ew03005ss3],
.awb-risk-step__mandate-risk[b-ew03005ss3] {
    display: block;
}

/* ============================================================================
   Legacy view 6 (cob-advisor-addeqt src/routes/Cob/views/Risk/_Risk.scss and
   src/components/Table/_Table.scss). Round-4 findings 1, 3 and 4.
   ============================================================================ */

/* Finding 1 — the table is not loose on the card: legacy frames it in a grey panel
   (_Risk.scss:152-160 — `background-color: #f9f9f9`, `border: 1px solid #ccc`, `border-radius: 3px`,
   `padding: 5px`), and the "Läs mer" toggle lives INSIDE that same frame (Risk.js:315-376).
   `overflow-x: auto` is legacy's own (_Table.scss:53) and stays as the safety net for a narrow
   viewport — but at the card's 960px all eight columns fit without it, exactly as legacy's do. */
.awb-risk-step__panel[b-ew03005ss3] {
    width: 100%;
    margin: 0 0 0.625rem;
    padding: 0.3125rem;
    background-color: var(--awb-cob-panel-surface, #f9f9f9);
    border: 1px solid var(--awb-cob-panel-border, #ccc);
    border-radius: 3px;
    overflow-x: auto;
}

/* Legacy's own table typography. The base component is 10px/700 uppercase headings over a 14px body
   (_Table.scss:51, :67-81, :136-143), but this table is a `Cob-Table` (Risk.js:311) and that scope
   overrides both: heading 11px, row 12px, row height 32px (_Cob.scss:314-345). Both padded 10px.
   That override is the "mindre font" the maintainer is missing — the 14px body was ours, not legacy's,
   and it is why the eighth column did not fit. */
.awb-risk-step__table[b-ew03005ss3] {
    width: 100%;
    min-width: 100%;
    background: var(--awb-cob-table-surface, #f7f8f9);
    border-collapse: collapse;
    border-radius: 6px;
}

.awb-risk-step__table th[b-ew03005ss3] {
    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-transform: uppercase;
    vertical-align: top;
}

.awb-risk-step__table td[b-ew03005ss3] {
    height: 2rem;
    padding: 0.625rem;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.75rem;
    line-height: 1.3;
    vertical-align: top;
}

/* RiskUtils.js:94 — preserve legacy's explicit 16% portfolio-column width; names may wrap within the cell. */
.awb-risk-step__table th:nth-child(4)[b-ew03005ss3],
.awb-risk-step__table td:nth-child(4)[b-ew03005ss3] {
    width: 16%;
}

/* Legacy's read-more affordance is underlined secondary text with the ⓘ icon
   (_Risk.scss:120-125), and the explanation under it is 14px in the muted tone (:111-118). */
.awb-risk-step__read-more[b-ew03005ss3]  .rz-button-text {
    text-decoration: underline;
}

.awb-risk-step__explanation[b-ew03005ss3] {
    margin: 0;
    padding: 0.625rem 0;
    color: var(--awb-cob-field-label, #91a0ad);
    font-size: 0.875rem;
    line-height: 1.4;
}

.awb-risk-step__intro-paragraph[b-ew03005ss3] {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: justify;
}

/* Finding 3 — the two choices are a horizontal row of coloured pills (_Risk.scss:34-95). Radzen renders
   one `.rz-radio-btn` per option, so the pill is its label — legacy tints its own by `:nth-child` in
   exactly the same way. The class number is in the label text (FR-UI-CASE-080, CRM-334). ::deep because
   the elements are Radzen's and carry no scope attribute of ours. */
.awb-risk-step__options[b-ew03005ss3]  .rz-radio-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0.125rem;
}

.awb-risk-step__options[b-ew03005ss3]  .rz-radiobutton-label {
    min-width: 90px;
    margin-left: 5px;
    padding: 3px;
    border-radius: 3px;
    color: var(--awb-cob-light, #f4f5f7);
    font-size: 0.6875rem;
    text-align: center;
}

/* Legacy's three tones: classes 1-2 success, 3-5 warning, 6-7 danger (_Risk.scss:74-94). */
.awb-risk-step__options[b-ew03005ss3]  .rz-radio-btn:nth-child(1) .rz-radiobutton-label,
.awb-risk-step__options[b-ew03005ss3]  .rz-radio-btn:nth-child(2) .rz-radiobutton-label {
    background: var(--awb-cob-success, #2ed1a0);
}

.awb-risk-step__options[b-ew03005ss3]  .rz-radio-btn:nth-child(3) .rz-radiobutton-label,
.awb-risk-step__options[b-ew03005ss3]  .rz-radio-btn:nth-child(4) .rz-radiobutton-label,
.awb-risk-step__options[b-ew03005ss3]  .rz-radio-btn:nth-child(5) .rz-radiobutton-label {
    background: var(--awb-cob-warning, #eec24b);
}

.awb-risk-step__options[b-ew03005ss3]  .rz-radio-btn:nth-child(6) .rz-radiobutton-label,
.awb-risk-step__options[b-ew03005ss3]  .rz-radio-btn:nth-child(7) .rz-radiobutton-label {
    background: var(--awb-cob-danger, #df4c43);
}

/* The row itself: legacy's `.risk-options` is a wrapping flex row with 30px of air above and below
   (_Risk.scss:34-42). */
.awb-risk-step__options[b-ew03005ss3]  .rz-radio-button-list {
    display: flex;
    flex-flow: row wrap;
    margin: 1.875rem 0;
}

/* PO 2026-10-01 — with the class number in each label (CRM-334) the seven options wrap to a second
   row, and the wrapped rows touched. Radzen lays the options out in an inner `.rz-stack` (flex, wrap)
   whose gap is `var(--rz-gap)`, which `.rz-radio-button-list-horizontal` sets to 0; the space between
   options on a row is the label's own `--rz-radio-label-margin-inline` (1rem). The rows get the same
   1rem. Anchored on `.awb-risk-step__sri-choice`, a div this step renders itself and which therefore
   carries the step's scope attribute — unlike `.awb-risk-step__options` above, which sits on Radzen's
   list root and so never matches a `[b-…]`-scoped selector. */
.awb-risk-step__sri-choice[b-ew03005ss3]  .rz-radio-button-list > .rz-stack {
    row-gap: 1rem;
}

/* Finding 4 — legacy's `.mandate-container`: the heading to the LEFT of the field, the pair centred
   on the card (_Risk.scss:246-257). */
.awb-risk-step__mandate[b-ew03005ss3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 62%;
    min-width: 20rem;
    margin-bottom: 1.25rem;
}

.awb-risk-step__mandate-heading[b-ew03005ss3] {
    flex: 0 0 40%;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.awb-risk-step__mandate[b-ew03005ss3]  .awb-form-field {
    flex: 1 1 auto;
}

.awb-risk-step__mandate[b-ew03005ss3]  .awb-number-input {
    display: block;
    width: 100%;
}

/* The wrapper is given an explicit width just above; the numeric has to take it, or Radzen's own
   default leaves the placeholder clipped and pushes the absolutely-positioned " SEK" — pinned to the
   WRAPPER's right edge — outside the field frame. The mandate's FormField is Boxed="false", so the
   boxed-field rule that sizes every other numeric never applies here. ::deep: .rz-numeric is
   Radzen-rendered and carries no scope attribute of ours. */
.awb-risk-step__mandate[b-ew03005ss3]  .awb-number-input .rz-numeric {
    width: 100%;
}

/* Legacy's NumberField has no spinner at all (components/NumberField/NumberField.js renders a
   TextField), and Radzen's up/down pair collided with the unit suffix inside the field box. */
.awb-risk-step__mandate[b-ew03005ss3]  .rz-numeric-button,
.awb-risk-step__mandate[b-ew03005ss3]  .rz-numeric-buttons {
    display: none;
}

/* With the buttons gone the suffix takes legacy's own inset (`right: 12px`). */
.awb-risk-step__mandate[b-ew03005ss3]  .awb-number-input--unit-inside .awb-number-input__unit {
    inset-inline-end: 0.75rem;
}

.awb-risk-step__mandate[b-ew03005ss3]  .awb-number-input--unit-inside .rz-numeric input {
    padding-inline-end: 3rem;
}

/* Legacy's side-by-side heading+field is a WIDE-WINDOW shape (_Risk.scss:246-257). The heading holds
   `flex: 0 0 40%` at every width, so the field shrinks with the window and the placeholder — already
   shortened to 219.5px for the 960px card — clips again on a narrower one.

   Where: side by side the text budget is `0.6 × row − 78`, which passes 219.5px at a ~928px viewport
   (card content is `min(960, V − 48) − 80`; the row is `max(62%, 320px)`; then the heading's 40%, the
   12px gap, the numeric's 2px border and 8px right padding, and the input's 8px and 3rem insets).
   Stacked, the field takes the whole row: `row − 66`, which is 430px at 928px and never drops below
   254px, because the row bottoms out at its own 20rem minimum — so the margin holds at every width.

   Breakpoint: 960px, not the 900px the other steps collapse their grids at
   (CustomerInformationStep.razor.css:64, EconomyStep.razor.css:53 and :258). 900 is BELOW the ~928px
   threshold and would leave a band of roughly 901-928px still clipping; 960 clears it by ~32px, which
   also absorbs error in the measured text width. Stacking a little early costs nothing — the pair
   simply reads top-to-bottom, as every other collapsed row in the wizard does. */
@media (max-width: 960px) {
    .awb-risk-step__mandate[b-ew03005ss3] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .awb-risk-step__mandate-heading[b-ew03005ss3] {
        flex: 0 0 auto;
    }
}
/* /Features/AdvisoryCases/Wizard/Steps/RiskConfidenceChart.razor.rz.scp.css */
/* Legacy wraps every chart in `.chart-container` — a light plate at a bounded width
   (_Risk.scss:98-102 `max-width: 480px`, widened to 580px inside `.Cob-view6-info` at :127-129, and
   `background: lighten(light, 2%)` at :242-244). */

.awb-risk-chart-panel[b-06dint5n3c] {
    width: 100%;
    max-width: 580px;
}

.awb-risk-chart-panel__title[b-06dint5n3c] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.awb-risk-chart-panel__canvas[b-06dint5n3c] {
    background: var(--awb-cob-chart-surface, #f7f8f9);
    border-radius: 6px;
}

.awb-risk-chart-panel__svg[b-06dint5n3c] {
    display: block;
    width: 100%;
    height: auto;
}

/* Legacy hides the vertical grid and draws only a solid zero line
   (chartData.js:62-66 — `gridLines: { drawTicks: false, zeroLineColor: 'rgba(0,0,0,1)' }`). */
.awb-risk-chart-panel__grid[b-06dint5n3c] {
    stroke: var(--awb-cob-panel-border, #ccc);
    stroke-width: 1;
}

.awb-risk-chart-panel__grid.is-zero[b-06dint5n3c] {
    stroke: rgb(0 0 0 / 100%);
}

.awb-risk-chart-panel__tick[b-06dint5n3c],
.awb-risk-chart-panel__category-tick[b-06dint5n3c] {
    fill: var(--awb-cob-field-label, #91a0ad);
    font-size: 10px;
}

.awb-risk-chart-panel__axis-title[b-06dint5n3c] {
    fill: var(--rz-text-color, #3f4950);
    font-size: 11px;
}

.awb-risk-chart-panel__band.is-selected .awb-risk-chart-panel__category-tick[b-06dint5n3c] {
    fill: var(--awb-cob-primary, #003d50);
    font-weight: 700;
}

/* The click target legacy's getElementAtEvent gives the whole band. */
.awb-risk-chart-panel__hit[b-06dint5n3c] {
    fill: transparent;
    cursor: pointer;
}

.awb-risk-chart-panel__legend[b-06dint5n3c] {
    display: flex;
    gap: 0.75rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--rz-text-color, #3f4950);
}

.awb-risk-chart-panel__legend li[b-06dint5n3c] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.awb-risk-chart-panel__swatch[b-06dint5n3c] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
}
/* /Features/AdvisoryCases/Wizard/Steps/RiskSummaryStep.razor.rz.scp.css */
/* Legacy COB "Placeringsförslag" look for the risksammanställning step (legacy node SummaryRisk =
   View13). Sources, all in cob-advisor-addeqt:
     src/routes/Cob/views/View13/View13.js:110-140    (h2 + table + TableSummary, in that order)
     src/routes/Cob/views/View13/_View13.scss:5-28    (.Cob-view13-fields spacing,
                                                       .Cob-view13-ColumnField value = secondary/600)
     src/components/Table/_Table.scss:44-61, 64-90,
                                      126-142         (the lightened plate, the uppercase column
                                                       label, the 10px row cell)
     src/routes/Cob/_Cob.scss:299-311                 (.Cob-TableSummary plate)
     src/routes/Cob/_Cob.scss:314-345                 (.Cob-Table: 11px labels, 32px/12px rows, the
                                                       inset hairline, the risk-class tone cells)
     src/routes/Cob/components/TableSummaryField/_TableSummaryField.scss
                                                      (11px/700 label, 14px secondary value,
                                                       221.5px field in a per-row-4 summary)
     src/index.scss:78-85                             (h2: 24px/400 in the primary colour)
     src/helpers/scss/_variables.scss:2-17            (primary #003d50, secondary #4cb7d5,
                                                       success #2ed1a0, warning #eec24b,
                                                       danger #df4c43, light #f4f5f7, dark #3f4950)

   `::deep` is used wherever the target element is rendered by a child component (Card, Alert) and
   therefore does not carry this component's scope. */

/* --- 1. Section heading = legacy's <h2> ---------------------------------------------------
   Legacy's only heading on this view is `<h2>Placeringsförslag</h2>`: 24px, weight 400, in the
   COB primary colour, left-aligned, with 40px of air under it (`.Cob h2`, _Cob.scss:42-44).
   AWB's Card renders it at 22px/600 in the body colour. */
[b-pqp2q0dkm5] .awb-card-title {
    color: var(--awb-cob-primary, #003d50);
    font-size: 1.5rem;
    font-weight: 400;
}

[b-pqp2q0dkm5] .awb-card-header {
    margin-bottom: 1.25rem;
}

/* --- 2. The table plate ------------------------------------------------------------------
   `.Table-wrapper` (_Table.scss:47-56): a lightened plate with a 6px radius that scrolls
   sideways rather than clipping a wide row. */
.awb-risk-summary__table-holder[b-pqp2q0dkm5] {
    width: 100%;
    border-radius: 6px;
    background: var(--awb-cob-table-surface, #f7f8f9);
    overflow-x: auto;
    overflow-y: hidden;
}

.awb-risk-summary__table[b-pqp2q0dkm5],
.awb-risk-summary__class-table[b-pqp2q0dkm5] {
    min-width: 100%;
    border-collapse: collapse;
}

/* `.Table-column-label` (_Table.scss:64-90) with `.Cob-Table`'s 11px override (_Cob.scss:322-324):
   10px padding, 700 weight, UPPERCASE by rule — the markup carries the sentence-case i18n strings
   ("Riskklass", "Finansiella instrument", "Köp", "Sälj"), exactly as legacy does. */
.awb-risk-summary__table th[b-pqp2q0dkm5],
.awb-risk-summary__class-table th[b-pqp2q0dkm5] {
    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;
}

/* `.Table-row-value` (_Table.scss:126-142) with `.Cob-Table`'s 32px row and 12px text
   (_Cob.scss:329-332), and its inset hairline instead of a border (_Cob.scss:315-320). */
.awb-risk-summary__table td[b-pqp2q0dkm5],
.awb-risk-summary__class-table td[b-pqp2q0dkm5] {
    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;
}

/* The KÖP/SÄLJ columns are `horizontalAlign: 'right'` in legacy (View13.js:604-617). Declared after
   the shared rules above so it wins at equal specificity. */
.awb-risk-summary__table th.awb-risk-summary__num[b-pqp2q0dkm5],
.awb-risk-summary__table td.awb-risk-summary__num[b-pqp2q0dkm5],
.awb-risk-summary__class-table th.awb-risk-summary__num[b-pqp2q0dkm5],
.awb-risk-summary__class-table td.awb-risk-summary__num[b-pqp2q0dkm5] {
    text-align: right;
}

/* `.Cob-view13-ColumnField .value` (_View13.scss:22-27): the amount itself is secondary-coloured
   and semibold, which is what makes the KÖP/SÄLJ columns read as figures rather than body text. */
.awb-risk-summary__column-value[b-pqp2q0dkm5] {
    color: var(--awb-cob-secondary, #4cb7d5);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Legacy's column widths: 15 / 55 / 15 / 15 (View13.js:588-618). Hints, not a fixed layout — the
   same lesson the economy matrix learned, where `table-layout: fixed` clipped the amounts. */
.awb-risk-summary__class-table th.awb-risk-summary__class-col[b-pqp2q0dkm5],
.awb-risk-summary__class-table td.risk-class[b-pqp2q0dkm5] {
    width: 15%;
    text-align: center;
}

.awb-risk-summary__class-table .awb-risk-summary__instrument-col[b-pqp2q0dkm5] {
    width: 55%;
}

.awb-risk-summary__class-table .awb-risk-summary__amount-col[b-pqp2q0dkm5] {
    width: 15%;
}

/* `.Table-row-value.risk-class` and `.financial-instruments` are the two cells legacy centres
   vertically (_Cob.scss:341-347); everything else keeps `v-top`. */
.awb-risk-summary__class-table td.risk-class[b-pqp2q0dkm5] {
    color: #ffffff;
    font-weight: 700;
    vertical-align: middle;
}

.awb-risk-summary__class-table td.financial-instruments[b-pqp2q0dkm5] {
    vertical-align: middle;
}

.awb-risk-summary__class-table td.risk-class.bg-success[b-pqp2q0dkm5] {
    background: var(--awb-cob-success, #2ed1a0);
}

.awb-risk-summary__class-table td.risk-class.bg-warning[b-pqp2q0dkm5] {
    background: var(--awb-cob-warning, #eec24b);
}

.awb-risk-summary__class-table td.risk-class.bg-danger[b-pqp2q0dkm5] {
    background: var(--awb-cob-danger, #df4c43);
}

/* --- 3. The summary plate under the table -------------------------------------------------
   `.Cob-TableSummary` + `.Cob-TableSummary-container` (_Cob.scss:299-311): margin-top 10px,
   5px padding, lightened background, 10px radius, and a wrapping flex ROW of fields — not a
   grid. `.per-row-4` caps each field at 221.5px (_TableSummaryField.scss:7-10), which is what
   produces legacy's four-across layout without any column count being declared. */
.awb-risk-summary__summary[b-pqp2q0dkm5],
.awb-risk-summary__class-summary[b-pqp2q0dkm5] {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    width: 100%;
    margin-top: 0.625rem;
    padding: 0.3125rem;
    border-radius: 10px;
    background: var(--awb-cob-table-surface, #f7f8f9);
}

/* `.Cob-TableSummaryField` (_TableSummaryField.scss:1-10). */
.awb-risk-summary__field[b-pqp2q0dkm5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 221.5px;
    padding: 0.625rem;
}

/* The mismatch alerts are not summary fields — they take the full width of the plate rather than
   being squeezed into a 221.5px column. */
.awb-risk-summary__notice[b-pqp2q0dkm5] {
    width: 100%;
    padding: 0.625rem;
}

/* `.Cob-TableSummaryField-label` (_TableSummaryField.scss:13-26). Legacy explicitly comments OUT
   `text-transform: uppercase` here, so these labels stay sentence case even though the table
   headers above them do not. */
.awb-risk-summary__label[b-pqp2q0dkm5] {
    margin-bottom: 0.3125rem;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* `.Cob-TableSummaryField-value` (_TableSummaryField.scss:44-52): 14px, secondary colour, and
   `margin-top: auto` so every value in a row sits on the same baseline no matter how many lines
   its label wrapped to. */
.awb-risk-summary__value[b-pqp2q0dkm5] {
    width: 100%;
    margin-top: auto;
    color: var(--awb-cob-secondary, #4cb7d5);
    font-size: 0.875rem;
    font-weight: 400;
}

/* CRM-291 — legacy PortfolioRiskBox.js:28-30: "Justerad investerings/riskprofil" above the chosen
   riskaptit is shown in the danger colour (the token the riskklass table's röd band uses). */
.awb-risk-summary__value--danger[b-pqp2q0dkm5] {
    color: var(--awb-cob-danger, #df4c43);
}

/* Legacy's fields are max-width capped, so they already reflow on a narrow card; only the plate's
   own field cap needs to give way. */
@media (max-width: 640px) {
    .awb-risk-summary__field[b-pqp2q0dkm5] {
        max-width: none;
    }
}
/* /Features/AdvisoryCases/Wizard/Steps/SavingsProfileCellQuestionsDialog.razor.rz.scp.css */
/* Legacy COB question modal for one "Ny sparprofil" cell (node 7, D27; D33 review MAJOR 2 — this file
   did not exist, so `awb-savings-cell-dialog` / `awb-savings-cell-context` matched nothing anywhere and
   the modal shipped with no layout at all).

   Source: cob-advisor-addeqt src/routes/Cob/views/NewSavingsProfile/_NewSavingsProfile.scss
   (.modal-container: full width, 20px top padding, 25px between question blocks, the context line in the
   primary colour at 14px/600). */

.awb-savings-cell-dialog[b-q0pjy1r6xn] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 0.5rem;
}

/* The gap between question blocks comes from app.css's `.awb-wizard-dialog.awb-validated-form` rule —
   FR-UI-APP-180's 8px form-stack rhythm, shared with every wizard popup form (CRM-334, FR-UI-APP-210).
   No gap here: a scoped one would win on specificity and drift from the other popup forms. */

.awb-savings-cell-context[b-q0pjy1r6xn] {
    margin: 0;
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.875rem;
    font-weight: 600;
}

/* The fields must fill the dialog rather than sit at Radzen's default inline width. */
.awb-savings-cell-dialog[b-q0pjy1r6xn]  .rz-dropdown,
.awb-savings-cell-dialog[b-q0pjy1r6xn]  .rz-textbox,
.awb-savings-cell-dialog[b-q0pjy1r6xn]  .awb-number-input {
    width: 100%;
}

.awb-savings-cell-dialog[b-q0pjy1r6xn]  .awb-radio-list {
    display: flex;
    gap: 1.5rem;
}
/* /Features/AdvisoryCases/Wizard/Steps/SavingsProfileStep.razor.rz.scp.css */
/* Legacy COB "Ny sparprofil" look for node 7 (D27; D33 review MAJOR 2 — this file did not exist, so the
   grid classes the markup references resolved to nothing: Blazor CSS isolation had scoped the only
   definitions of .awb-savings-grid & co. to EconomyStep (EconomyStep.razor.css:83-132 →
   .awb-savings-grid[b-<EconomyStep>]), and app.css defines none of them. A 4x7 matrix of numeric inputs
   plus 28 buttons shipped as a bare HTML table; a bUnit markup test cannot see that.

   The rules are COPIED from EconomyStep.razor.css rather than lifted to Common/UI: the two grids are
   different tables (node 4 has an instruments column, a no-savings toggle and a totals footer; node 7 has
   a per-cell modal button and a missing-answer marker), so sharing them would be the premature
   generalisation CLAUDE.md warns about — and Common/UI is another builder's file in this round.

   Sources: cob-advisor-addeqt src/routes/Cob/_Cob.scss (risk-class cells, ~355-368),
   src/helpers/scss/_variables.scss (palette: primary #003d50, secondary #4cb7d5, success #2ed1a0,
   warning #eec24b, danger #df4c43, medium #91a0ad).

   `::deep` is used wherever the target element is rendered by a child component (Card, Radzen) and
   therefore does not carry this component's scope. */

/* --- Info pill above the table ------------------------------------------- */

.awb-savings-notice[b-908bhyotsc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: fit-content;
    margin: 0 auto 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--awb-cob-primary, #003d50);
    color: #ffffff;
    font-size: 0.75rem;
}

.awb-savings-notice[b-908bhyotsc]  .rz-icon,
.awb-savings-notice[b-908bhyotsc]  .notranslate {
    font-size: 1rem;
    line-height: 1;
}

/* --- The 4-horizon x 7-risk-class matrix --------------------------------- */

.awb-savings-grid[b-908bhyotsc] {
    width: 100%;
    border-collapse: collapse;
    /* NOT table-layout: fixed — legacy's Table treats the percentages as hints and lets columns
       grow to their content (_Table.scss:50-61). Fixed layout overlapped the horizon headings and
       clipped five-digit amounts (same defect as EconomyStep, 2026-08-18). */
}

.awb-savings-grid th[b-908bhyotsc] {
    padding: 0.5rem;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: right;
    text-transform: uppercase;
    vertical-align: bottom;
}

.awb-savings-grid th.col-risk[b-908bhyotsc] {
    text-align: left;
}

/* Legacy column width for the risk gutter; the four horizon columns share the rest. */
.awb-savings-grid .col-risk[b-908bhyotsc] {
    width: 9%;
}

.awb-savings-grid td[b-908bhyotsc] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
    vertical-align: top;
}

/* The coloured risk gutter (InvestmentTableRows.js:44 — success 1-2, warning 3-5, danger 6-7). The white
   text REQUIRES one of the three tone classes to be present, which is why the step markup sets it. */
.awb-savings-grid td.risk-class[b-908bhyotsc] {
    padding: 0.35rem;
    border-bottom: 0;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

.awb-savings-grid td.risk-class.bg-success[b-908bhyotsc] {
    background: var(--awb-cob-success, #2ed1a0);
}

.awb-savings-grid td.risk-class.bg-warning[b-908bhyotsc] {
    background: var(--awb-cob-warning, #eec24b);
}

.awb-savings-grid td.risk-class.bg-danger[b-908bhyotsc] {
    background: var(--awb-cob-danger, #df4c43);
}

/* --- One amount + its question-modal button per cell ---------------------- */

.new-savings-cell[b-908bhyotsc]  .rz-numeric {
    width: 100%;
    /* Room for a seven-digit amount — legacy never clips a typed value. */
    min-width: 6.5rem;
}

/* Legacy's table values are 14px (_Table.scss:135-142); Radzen's default side padding, not the
   font, is what ate the digits. */
.new-savings-cell[b-908bhyotsc]  .rz-numeric-input {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    text-align: right;
}

.new-savings-cell[b-908bhyotsc]  .awb-button {
    width: 100%;
    margin-top: 0.25rem;
}

.new-savings-cell .awb-field-missing[b-908bhyotsc],
.new-savings-cell span.awb-field-missing[b-908bhyotsc] {
    display: block;
    margin-top: 0.25rem;
    color: var(--awb-cob-danger, #df4c43);
    font-size: 0.6875rem;
    line-height: 1.3;
}

/* --- The derived risk-class box above the heading (TextBox.js:32-100) ------ */

.awb-savings-risk-box[b-908bhyotsc] {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--rz-base-100, #f2f4f6);
    border-radius: 4px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.awb-savings-risk-line[b-908bhyotsc] {
    display: flex;
    gap: 0.375rem;
    align-items: baseline;
}

/* Legacy paints the derived value in its warning tone (TextBox.js appliedRiskClass). */
.awb-savings-risk-value[b-908bhyotsc] {
    font-weight: 700;
    color: var(--awb-cob-warning, #eec24b);
}

.awb-savings-risk-warning[b-908bhyotsc] {
    margin: 0.375rem 0 0;
    color: var(--awb-cob-danger, #df4c43);
    font-size: 0.75rem;
}

/* --- The four summary lines (NewSavingsProfile.js:361-382) ----------------- */

.awb-savings-summary[b-908bhyotsc] {
    margin-bottom: 0.75rem;
    text-align: center;
}

.awb-savings-summary-line[b-908bhyotsc] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6c757d);
    line-height: 1.7;
}

/* CRM-276 — the matrix cells host <NumberInput Amount="true"> now, not a bare RadzenNumeric, so the
   amount field gained a wrapper span. The wrapper is inline-flex (Common/UI/NumberInput.razor.css),
   which is exactly what the `.rz-numeric` it replaced was, so stretching it to the cell is the whole
   adjustment: the cell then lays out as it did before — an inline-level 100 %-wide field on its own
   line, the full-width "Mål..." button (`.new-savings-cell ::deep .awb-button`) on the next.

   Nothing here touches the FRAME. CRM-276 neutralised it (`background-color: transparent; border: 0;
   border-radius: 0`) on the premise that legacy draws no box around a table cell — that premise is
   wrong: the matrix cells render legacy's SimpleTextField, which IS boxed (cob-advisor-addeqt
   src/routes/Cob/components/SimpleTextField/_SimpleTextField.scss:109-122 — white, 1px solid
   lighten(medium, 15 %) = #bdc6ce, the very colour --awb-cob-field-border carries). `border: 0` also
   took the border Radzen's own theme gave these cells before CRM-276, and with it the filled (teal)
   and missing (red) marks in app.css, which set `border-color` only and so need a border to paint on.
   Leaving the shared frame in place restores all three. */
.awb-savings-grid[b-908bhyotsc]  .awb-number-input {
    width: 100%;
}

/* PO 2026-10-01 — every amount cell on both tabs carries "SEK" inside its right edge (NumberInput
   Unit + UnitInside, the holdings popups' treatment, AssetEditDialog.razor.css). The unit is absolute
   against the wrapper stretched above, so the numeric must fill the wrapper too, and must not sit on
   the line's baseline (the gap under an inline-block would push the vertically-centred unit low).
   The right-aligned digits and the placeholder end before the unit: NumberInput.razor.css reserves
   2.25rem, which "SEK" at 0.8125rem plus its 0.75rem inset slightly overruns, so the cells reserve
   2.875rem — a selector with four compound parts beats NumberInput's three. The minimum width grows by
   the same amount, so a seven-digit amount still fits beside the unit. */
.new-savings-cell[b-908bhyotsc]  .awb-number-input--unit-inside .rz-numeric {
    width: 100%;
    min-width: 8.5rem;
    vertical-align: top;
}

.new-savings-cell[b-908bhyotsc]  .awb-number-input--unit-inside .rz-numeric-input {
    padding-inline-end: 2.875rem;
}

/* MandateTableColumns.js:26 (width: '8%') — legacy's "Inget sparande" column. Deliberately identical to
   EconomyStep.razor.css:118-121 rather than shared: the scoped stylesheets are separate and two uses do
   not earn an abstraction (CLAUDE.md "don't generalise prematurely"). Centred to match node 4, the
   surface the advisor compares against inside this app, rather than legacy's right alignment. */
.awb-savings-grid .col-toggle[b-908bhyotsc] {
    width: 8%;
    text-align: center;
}

/* --- CRM-279 -------------------------------------------------------------- */

/* FR-3 — the missing-amount mark on a cell of a partially filled row. Since the 276-fix the cell keeps
   the shared NumberInput frame (see the block above), so there IS a border to colour and this rule only
   has to win the tie against it: app.css declares the mark as
   `:is(.awb-wizard-shell, …) .awb-field-missing:not(…)` — three compound selectors, exactly the frame's
   weight — and app.css is linked BEFORE the scoped bundle, so an unaided tie goes to the frame.
   Re-asserted here, byte-for-byte as node 4 does it (EconomyStep.razor.css), because this matrix is
   where the cells declare Required: a refused Gå vidare must redden the empty ones. Same exclusions as
   app.css — a row toggled off via "Inget sparande" is disabled, not unanswered. No new colour, and the
   state is carried by the words "Belopp saknas" and `aria-invalid` as well (AK-15). */
.awb-savings-grid[b-908bhyotsc]  .awb-number-input .rz-numeric.awb-field-missing:not(:disabled, [readonly], .rz-state-disabled, [aria-disabled="true"]) {
    border-color: var(--awb-cob-danger, #df4c43);
}

/* FR-4 — the Mål affordance's three legacy states (Table.functionUtils.js:284-292;
   _NewSavingsProfile.scss:80-93 `.Icons`/`.Icon-disable`, :112-119 `.green-icon`). The middle state is
   plain on purpose — legacy's `Icons` carries no colour, and the red "Mål/användning saknas" text below
   is the post-submit complement. Legacy renders the no-amount state white (invisible); AWB mutes it
   instead, because removing the button would reflow the 28-cell grid. */
.new-savings-cell .awb-savings-goal[b-908bhyotsc] {
    display: block;
}

.new-savings-cell .awb-savings-goal--empty[b-908bhyotsc]  .rz-button {
    opacity: 0.45;
}

/* !important is REQUIRED here, not decoration (impl-review-1 B1). The Mål affordance is a
   ButtonStyle.Light / Variant.Flat <Button>, and ui-buttons.css:206-212 declares `color` and `border`
   for `.awb-button > .rz-variant-flat.rz-light` with !important — so a plain declaration here loses no
   matter how specific it is and no matter that App.razor:17-18 links the scoped bundle last. The green
   state simply did not render. CLAUDE.md states the rule; the cascade is pinned by
   `The_complete_Mal_box_wins_the_cascade_over_the_global_light_button`. */
.new-savings-cell .awb-savings-goal--complete[b-908bhyotsc]  .rz-button {
    color: var(--awb-cob-success, #2ed1a0) !important;
    border: 1px solid var(--awb-cob-success, #2ed1a0) !important;
}

.new-savings-cell .awb-savings-goal--incomplete[b-908bhyotsc] {
    /* legacy `Icons`: plain, no colour treatment */
}
/* /Features/AdvisoryCases/Wizard/Steps/SupportingDocumentsStep.razor.rz.scp.css */
/* Övriga dokument — legacy COB's view 14 layout
   (cob-advisor-addeqt src/routes/Cob/views/View14/_View14.scss and
   src/components/FileDrop/_FileDrop.scss). */

/* The ingress under the heading (_View14.scss:13-28). */
.awb-doc-description[b-2f1ldh7egs] {
    margin-bottom: 1.25rem;
}

.awb-doc-description p[b-2f1ldh7egs] {
    margin: 0 0 0.625rem;
}

.awb-doc-description p:last-child[b-2f1ldh7egs] {
    margin-bottom: 0;
}

/* The counter row ABOVE the list: count left, size right (_View14.scss:41-56). */
.awb-doc-info[b-2f1ldh7egs] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 720px;
    padding: 0.625rem;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.75rem;
}

.awb-doc-info strong[b-2f1ldh7egs] {
    margin-right: 0.3125rem;
}

/* Legacy caps the list at 1.5 × the form measure — `maxFieldWidth * 1.5` = 720px
   (_View14.scss:31-34), which is also why it is not subject to the 480px block cap. */
.awb-doc-list[b-2f1ldh7egs] {
    width: 100%;
    max-width: 720px;
    margin-bottom: 0.625rem;
    border: 1px solid var(--awb-cob-doc-border, #d6dae2);
    border-radius: 5px;
    overflow: hidden;
}

/* FR-UI-APP-180 — the failing "field" here is the list frame itself, not a Radzen control, so
   FormField's generic error rule (which reaches .rz-* roots) has nothing to paint. The rule lives here
   because the frame is this step's element; the class comes from the wrapping FormField. */
.awb-form-field-input--error .awb-doc-list[b-2f1ldh7egs] {
    border-color: var(--rz-danger, #dc3545);
}

/* The empty text lives INSIDE the frame, centred, at legacy's row height
   (_View14.scss:88-94). */
.awb-doc-list__empty[b-2f1ldh7egs] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    padding: 0.3125rem 0.625rem;
    color: var(--awb-cob-field-label, #91a0ad);
}

/* The drop zone (_FileDrop.scss:1-9, :26-40, :42-55, :65-69): one dashed box, 200px tall, the 64px
   glyph centred, the text under it. The whole box is the picker, as in legacy — but as a <label>
   wrapping a real file input, so it is still reachable by keyboard. */
.awb-doc-dropzone[b-2f1ldh7egs] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 720px;
    min-height: 200px;
    background: #fff;
    border: 2px dashed var(--awb-cob-field-border, #bdc6ce);
    border-radius: 5px;
    cursor: pointer;
}

/* ::deep — <InputFile> renders the raw <input>, which carries no scope attribute of this step, so the
   scoped selector this replaced never matched and the native picker rendered at full size in the
   middle of the zone. The input covers the whole zone and is fully transparent: `opacity: 0` hides
   its pixels but keeps it painted and hit-testable, so a click anywhere in the zone — and a native
   file drop, which only fires when the event target IS the input — lands on it directly. NOT
   display:none: the input stays focusable, which is what keeps the zone keyboard-reachable. The icon
   and the caption are static siblings underneath; they stay visible because the overlay is
   transparent, and they need no pointer-events opt-out because neither is interactive.
   Same mechanism as the customer card's FileUploadZone.razor.css:22-28, which is the facit here. */
.awb-doc-dropzone[b-2f1ldh7egs]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.awb-doc-dropzone:focus-within[b-2f1ldh7egs] {
    border-color: var(--awb-cob-secondary, #4cb7d5);
}

/* 64px, in the pale grey legacy uses for it (_FileDrop.scss:42-55). ::deep because RadzenIcon
   renders its own element, which carries no scope attribute of ours. */
.awb-doc-dropzone__icon[b-2f1ldh7egs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}

.awb-doc-dropzone__icon[b-2f1ldh7egs]  .rz-icon,
.awb-doc-dropzone__icon[b-2f1ldh7egs]  .notranslate {
    color: var(--awb-cob-doc-icon, #d6dae2);
    font-size: 64px;
    line-height: 1;
}

.awb-doc-dropzone__text[b-2f1ldh7egs] {
    margin-top: 0.625rem;
    color: var(--awb-cob-field-label, #91a0ad);
    font-size: 0.875rem;
}

.awb-doc-errors[b-2f1ldh7egs] {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.awb-doc-error[b-2f1ldh7egs] {
    color: #b91c1c;
    font-size: 0.875rem;
}

.awb-doc-grid[b-2f1ldh7egs] {
    width: 100%;
    border-collapse: collapse;
}

.awb-doc-grid th[b-2f1ldh7egs],
.awb-doc-grid td[b-2f1ldh7egs] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eceef1;
}

.awb-doc-grid tr:last-child td[b-2f1ldh7egs] {
    border-bottom: 0;
}
/* /Features/AdvisoryCases/Wizard/WizardSessionDialog.razor.rz.scp.css */
/* D9 — legacy .Cob-Footer-sessionModal-fields: a stack of label/value rows, label muted and
   small, value in the COB primary. */
.awb-wizard-session[b-u6xqdunruq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.awb-wizard-session__field[b-u6xqdunruq] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.awb-wizard-session__label[b-u6xqdunruq] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #6c757d);
}

.awb-wizard-session__value[b-u6xqdunruq] {
    font-size: 0.9375rem;
    color: var(--awb-cob-primary, #003d50);
    /* Case references are long and unbroken; wrap rather than widen the dialog. */
    overflow-wrap: anywhere;
}
/* /Features/AdvisoryCases/Wizard/WizardShell.razor.rz.scp.css */
/* Legacy-COB wizard frame. The legacy React app renders the whole wizard as ONE white elevated
   card, centred on a wide empty page, with the numbered step rail floating above it and no rules
   above/below the rail (see docs/requirements/legacy-cob/legacy-cob.pdf, screens 01/03/04/10).
   The shell itself IS that card — no extra markup wrapper — which is why the padding, shadow and
   max-width live on .awb-wizard-shell. The 260px sidebar is folded away for the wizard
   (ShellLayoutState), so the card gets the full viewport to centre in. */

/* D7 — the legacy background illustration, byte-identical to cob-advisor-addeqt's
   assets/nordfk/addeqt-cob-bg-final-v2.png. Mirrors legacy `.App-bg` (_App.scss:8-16): a fixed
   full-viewport layer behind everything, centred and cover-scaled. Wizard-only by construction —
   the element lives in WizardShell, so it disappears the moment the advisor leaves the guide.

   Stacking (smallest values that work):
     0  this background — the app shell's own boxes are unpositioned, so a z-index:0 fixed layer
        already paints above them; nothing lower is needed.
     1  .awb-wizard-shell card, so the card and every control inside it stay clickable.
     2  .awb-sidebar (AppSidebar.razor.css) — position:sticky with z-index:auto would otherwise
        lose to this layer, which sits later in the DOM. Relevant because the advisor can
        re-expand the rail from the top bar while the wizard is open.
     5  .awb-topbar (AppTopBar.razor.css, unchanged) — stays above all of the above.
   Radzen dialogs/overlays live at 1000+ and are untouched. */
.awb-wizard-bg[b-hpurarmdg9] {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* Root-absolute: scoped CSS is bundled into /AdvisorWorkbench.Web.styles.css, so a path
       relative to this source file would not resolve. */
    background: url("/img/cob-wizard-bg.png") 50% 50% scroll no-repeat;
    background-size: cover;
    pointer-events: none;
}

.awb-wizard-shell[b-hpurarmdg9] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Legacy's card is 960px, full stop: `.Cob { max-width: getGeneral(contentWidth) }`
       (cob-advisor-addeqt src/routes/Cob/_Cob.scss:36-38, contentWidth = 960px in
       src/helpers/scss/_variables.scss:23). The earlier 1100px was a 'let it grow' with no
       recorded motivation; legacy renders the same seven-column savings matrices at 960px minus
       30px padding (_ContentBox.scss:4) = 900px of content, and we give them 880px here, so the
       matrices on nodes 4 and 7 are not what the extra width was buying. */
    min-width: 0;
    /* width, not just max-width: without it the card is sized by its content and SHRINKS on a
       text-heavy step whose blocks break at the 480px form measure (the AML page came out at
       ~530px). Legacy's .Cob is a block element, so it always spans to contentWidth and the
       narrow text sits in a wide card — the card must not follow the text. */
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 2.5rem 2.5rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 5%), 0 2px 30px rgb(0 0 0 / 5%);
}

/* The legacy face, wizard-only (maintainer 2026-08-19: "ändra fonten inom awb-wizard-shell
   så känner de igen sig"). Legacy COB sets Lato on everything it draws
   (cob-advisor-addeqt/src/helpers/scss/_variables.scss:25-36, loaded in public/index.html:10-13);
   the CRM shell around the card keeps Jost/Open Sans, which is why this lives here and not in
   app.css. The @font-face declarations cannot — scoped CSS is rewritten per component, so they
   sit in wwwroot/app.css next to Jost and Open Sans.

   ::deep * rather than plain inheritance: Radzen's material theme sets font-family on the
   controls themselves (.rz-button, .rz-textbox, ...), so inheritance from the card would never
   reach them. The compiled selector is `.awb-wizard-shell[b-xxx] *` — two "classes" of
   specificity, which beats the theme's single class, and the scoped bundle loads after it
   (Components/App.razor:18). */
.awb-wizard-shell[b-hpurarmdg9],
.awb-wizard-shell[b-hpurarmdg9]  * {
    font-family: var(--awb-font-wizard);
}

/* ...except the icon glyphs. Radzen renders every icon as a <i class="rzi rzi-*"> whose glyph IS
   the font (Material Symbols, material-base.css), so the rule above — which deliberately outbids
   the theme's own font-family — would turn every chevron and tick into the literal ligature text.
   One class more specific than the `*` rule, so it wins, and it restores the theme's own token
   rather than naming the face. */
.awb-wizard-shell[b-hpurarmdg9]  .rzi,
.awb-wizard-shell[b-hpurarmdg9]  [class*="rzi-"],
.awb-wizard-shell[b-hpurarmdg9]  .rz-menuitem-icon {
    font-family: var(--rz-icon-font-family);
}

/* D8 — the customer box, from legacy _ContentBox.scss .customer-information: the row is
   right-aligned inside the card and the block itself is a small whitesmoke plate with tiny
   COB-primary text (10px in legacy; 0.6875rem here so it stays legible at AWB's base size).
   Two lines: personnummer, then name. */
.awb-wizard-shell__topbar[b-hpurarmdg9] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.awb-wizard-shell__context[b-hpurarmdg9] {
    display: flex;
    flex-direction: column;
    padding: 0.15rem 0.35rem;
    background-color: whitesmoke;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--awb-cob-primary, #003d50);
}

.awb-wizard-shell__customer-natregno[b-hpurarmdg9],
.awb-wizard-shell__customer-name[b-hpurarmdg9] {
    padding: 0 0.15rem;
}

/* Centred rail, no top/bottom rules (legacy has none). */
.awb-wizard-shell__stepper[b-hpurarmdg9] {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0 0.75rem;
}

.awb-wizard-shell__step[b-hpurarmdg9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Step headings. Legacy paints every step title and card heading in the COB primary
   (#003d50) — "Kundinformation", "Sparprofil", "Rådet", ... Achieved centrally here rather
   than by editing ~25 step files; ::deep because the headings belong to the step components'
   own CSS scopes, not this shell's. */
.awb-wizard-shell[b-hpurarmdg9]  h1,
.awb-wizard-shell[b-hpurarmdg9]  h2,
.awb-wizard-shell[b-hpurarmdg9]  h3,
.awb-wizard-shell[b-hpurarmdg9]  h4,
.awb-wizard-shell[b-hpurarmdg9]  .awb-card-title,
.awb-wizard-shell[b-hpurarmdg9]  .awb-page-header-title {
    color: var(--awb-cob-primary, #003d50);
}

/* The validation banner itself has no legacy counterpart (legacy marks per field only — D17),
   but its colours must come from legacy's own palette: Notice.warning derives everything from
   getColor(warning) = #eec24b (_Notice.scss:66-70, _variables.scss:8) — background lighten 30%,
   text darken 20%, border lighten 20%. The default Alert orange read as alarm; this is the same
   muted yellow as the risk-class 3-5 plates. */
.awb-wizard-shell[b-hpurarmdg9]  .awb-wizard-shell__validation.awb-alert--warning {
    background: #fbf2d7;
    color: #c19212;
    border: 1px solid #f7e2a8;
}

/* CRM-280 — the save notice sits under the validation banner, above the step, so a refused save and a
   refused Gå vidare can be read one after the other rather than replacing each other. */
.awb-wizard-shell__save-notice[b-hpurarmdg9] {
    margin-bottom: 0.75rem;
}

/* D9 — legacy .Cob-Footer-container: "Hantera session" alone on the left, the navigation pair
   grouped on the right. */
.awb-wizard-shell__footer[b-hpurarmdg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rz-border, #e0e0e0);
}

.awb-wizard-shell__footer-navigation[b-hpurarmdg9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Keeps the pair right-aligned even when the session button is the only other child. */
    margin-left: auto;
}

/* FR-UI-APP-180 — the field-error summary sits with the navigation pair it belongs to: right-aligned
   above Föregående / Gå vidare, so the list reads as the answer to the button the advisor just
   pressed. Empty (the component renders nothing) it collapses, leaving the footer untouched. */
.awb-wizard-shell__validation-summary[b-hpurarmdg9] {
    display: flex;
    justify-content: flex-end;
}

.awb-wizard-shell__validation-summary:empty[b-hpurarmdg9] {
    display: none;
}
/* /Features/Customers/Components/AssetEditDialog.razor.rz.scp.css */
/* Match the form vertical-gap convention used by the sibling dialogs (ContactEditDialog). */
.awb-asset-edit-dialog[b-m7ldl1zy15] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Extra breathing room above the Spara/Avbryt toolbar. */
.awb-asset-edit-dialog[b-m7ldl1zy15]  .awb-form-toolbar {
    margin-top: 8px;
}

/* Värde field: full-width numeric box, no spinner buttons (plain text-style input, like the KYC
   savings-profile amount fields). ::deep reaches the Radzen-rendered elements, which carry no scope
   attribute. The unit-inside wrapper is inline-block, so it AND the RadzenNumeric inside it must be
   stretched to 100% — otherwise the absolutely-positioned "kr" anchors off the short input. */
.awb-asset-edit-dialog[b-m7ldl1zy15]  .awb-asset-edit-input,
.awb-asset-edit-dialog[b-m7ldl1zy15]  .awb-asset-edit-input .rz-numeric,
.awb-asset-edit-dialog[b-m7ldl1zy15]  .awb-asset-edit-input .rz-numeric input {
    width: 100%;
}

.awb-asset-edit-dialog[b-m7ldl1zy15]  .rz-numeric-up,
.awb-asset-edit-dialog[b-m7ldl1zy15]  .rz-numeric-down {
    display: none;
}

/* Spinner gone → pull the "kr" suffix back to the field edge and drop the reserved padding. */
.awb-asset-edit-dialog[b-m7ldl1zy15]  .awb-number-input--unit-inside .awb-number-input__unit {
    inset-inline-end: 0.75rem;
}

.awb-asset-edit-dialog[b-m7ldl1zy15]  .awb-number-input--unit-inside .rz-numeric input {
    padding-inline-end: 2rem;
}
/* /Features/Customers/Components/ContactEditDialog.razor.rz.scp.css */
/* Match the form vertical-gap convention used by the sibling dialogs (CreateCustomerDialog). */
.awb-contact-edit-dialog[b-gk0kadvh2w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Features/Customers/Components/CreateCustomerDialog.razor.rz.scp.css */
.awb-create-customer-dialog[b-cvyanz3mog] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awb-create-customer-hint[b-cvyanz3mog] {
    margin: 0;
}
/* /Features/Customers/Components/CustomerAdvisorsCard.razor.rz.scp.css */
/* Advisor rows: avatar + name on the left, remove button pushed right, a slight separator between
   rows (legacy CRM facit: bordered list rows). */
.awb-advisor-row[b-j5042lo9x6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rz-border-color, var(--line));
}

.awb-advisor-row:last-child[b-j5042lo9x6] {
    border-bottom: none;
}

.awb-advisor-row-avatar[b-j5042lo9x6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--rz-base-200, var(--snow-2));
    font-size: 0.75rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.awb-advisor-row-remove[b-j5042lo9x6] {
    margin-left: auto;
}
/* /Features/Customers/Components/CustomerHoldingsTab.razor.rz.scp.css */
.awb-holdings-subtabs[b-z9vt8psmx1] {
    margin-bottom: 1rem;
}
/* /Features/Customers/Components/CustomerListView.razor.rz.scp.css */
/* Customer list view (Kunder / Prospekt): filter toolbar, view tabs, and grid cell affordances. */

.awb-customer-filters[b-cw5leifxqx]  .awb-customer-filter-input {
    width: 160px;
    min-width: 0;
    max-width: 160px;
}

.awb-customer-filters[b-cw5leifxqx]  .awb-customer-filter-input:not(.rz-dropdown-chips) {
    height: 34px;
    min-height: 34px;
}

.awb-customer-tabs[b-cw5leifxqx] {
    display: flex;
    align-items: center;
    /* legacy `_tabs.scss` `.tabs` gap — the tabs themselves carry almost no horizontal padding */
    gap: 32px;
    padding: 0 8px;
    border-bottom: 1px solid var(--line-strong);
    margin-bottom: 8px;
}

/* Right-hand action group of the tab strip (massutskick + Excel export), legacy Start.jsx's Filter
   bar where the two sit side by side. One auto margin on the group — not one per button — so the
   pair stays together whether or not the admin-only massutskick button renders. */
.awb-customer-tabs-actions[b-cw5leifxqx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* View tabs — legacy `_tabs.scss` `.tab` / `.tab.active` (the styling Start.jsx's Standard/Värde
   tabs wear): a 45px tab whose 2px bottom border is transparent until the tab is active, then
   Gold, pulled 1px down so it sits on the strip's baseline. The underline alone carries the
   active state, exactly as in legacy — no colour swap, hence ButtonStyle.Base on all three.
   `<Button>` splats `class` onto the RadzenButton inside its wrapper `<span class="awb-button">`,
   and both live in a child component, so scoped CSS only reaches them through `::deep` on
   `.awb-customer-tabs` (our own markup); `:has()` selects the wrapper of a tab button the same way
   the export rule above does. */
.awb-customer-tabs[b-cw5leifxqx]  .awb-button:has(.awb-customer-tab) {
    display: flex;
    align-self: flex-end;
}

/* QA-bug-2 (P1): these tabs render as ButtonStyle.Base + Variant.Text, so the global
   `.awb-button > .rz-variant-text` rule in ui-buttons.css (shared by every text button in the
   app, not to be touched here) sets border and color with `!important` and otherwise wins the
   cascade over this scoped file regardless of specificity. Per CLAUDE.md ("overriding a
   *.razor.css rule from a global stylesheet requires !important"), applied in the direction the
   global rule forces: border-bottom/color here must also carry `!important`, or the active-tab
   underline never paints (confirmed via computed styles in QA-bug-2.md — the rule matched but
   every border-* declaration was discarded). */
.awb-customer-tabs[b-cw5leifxqx]  .awb-customer-tab {
    height: 45px;
    padding: 10px 1px;
    border-radius: 0;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 400;
    color: var(--coal-dim) !important;
}

.awb-customer-tabs[b-cw5leifxqx]  .awb-customer-tab--active {
    border-bottom-color: var(--gold) !important;
    color: var(--navy) !important;
    font-weight: 600;
}

.awb-customer-type[b-cw5leifxqx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.awb-customer-type--person[b-cw5leifxqx] {
    background: var(--navy-dim);
    color: var(--navy);
}

.awb-customer-type--company[b-cw5leifxqx] {
    background: var(--gold-tint);
    color: var(--coal);
    border: 1px solid var(--gold-line);
}

.awb-customer-name[b-cw5leifxqx] {
    font-weight: 600;
    color: var(--coal);
}

.awb-customer-inactive[b-cw5leifxqx] {
    margin-left: 8px;
}

.awb-customer-stars[b-cw5leifxqx] {
    position: relative;
    display: inline-flex;
    gap: 1px;
    vertical-align: middle;
}

.awb-star[b-cw5leifxqx] {
    width: 15px;
    height: 15px;
    fill: var(--snow-2);
}

.awb-star--on[b-cw5leifxqx] {
    fill: var(--gold);
}

.awb-customer-stars-text[b-cw5leifxqx] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* CRM-380: Radzen indents a header title 1rem and clips it, but not a body cell, so the select-all box sat
   right of the row boxes inside the 48px column and was cut off. Zero the title inset and let the box
   overflow for the selection column only (same fix as AdminCustomerGrid). */
.awb-customer-grid-table[b-cw5leifxqx]  th.awb-select-col .rz-column-title,
.awb-customer-grid-table[b-cw5leifxqx]  th.awb-select-col .rz-column-title-content {
    padding-inline: 0;
    overflow: visible;
}
/* /Features/Customers/Components/CustomerOverviewTab.razor.rz.scp.css */
.awb-overview-input[b-93jmlr1zo1] {
    width: 100%;
}

.awb-overview-card-stack[b-93jmlr1zo1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Shadow box on every Card on the Översikt tab. ::deep reaches the child Card component's
   .awb-card root (which never carries this component's scope attr). */
/* ::deep .awb-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    padding: 8px;
    border-radius: 6px;
} */

/* RadzenRating (4.19) has no AllowClear param — hide its clear button (.rz-rating-cancel).
   ::deep reaches into the child component; .awb-ranking-no-clear keeps it to this rating only. */
.awb-ranking-no-clear[b-93jmlr1zo1]  .rz-rating-cancel {
    display: none;
}

.awb-overview-categories[b-93jmlr1zo1] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.awb-overview-status-row[b-93jmlr1zo1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.awb-overview-onboarding[b-93jmlr1zo1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: default;
}

.awb-overview-onboarding-meta[b-93jmlr1zo1] {
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color, var(--muted));
}

.awb-overview-ranking-summary[b-93jmlr1zo1] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, var(--muted));
    margin-top: 0.25rem;
}

.awb-overview-report-action[b-93jmlr1zo1] {
    margin-top: 1rem;
}

/* "Ta bort kund" soft-delete affordance — sits below the left-column cards, matching the legacy
   CRM placement below the Kunduppgifter form (addeqt-crm Delete.jsx via Start.jsx). */
.awb-overview-delete[b-93jmlr1zo1] {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-start;
}
/* /Features/Customers/Components/HoldingsOtherAssets.razor.rz.scp.css */
/* Row-action cluster: Ändra + Ta bort icon buttons side by side (CRM-412). */
.awb-holdings-row-actions[b-gvip52q3qv] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
/* /Features/Customers/Components/HoldingsSecurities.razor.rz.scp.css */
.awb-holdings-row-actions[b-p7ipbp3pu9] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
/* /Features/Customers/Components/PassiveManagementDialog.razor.rz.scp.css */
.awb-passive-dialog[b-nbat5xggp2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 480px;
}

.awb-passive-form[b-nbat5xggp2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.awb-passive-input[b-nbat5xggp2] {
    width: 100%;
}

.awb-passive-hint[b-nbat5xggp2] {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, var(--muted));
}

.awb-passive-actions[b-nbat5xggp2] {
    display: flex;
    justify-content: flex-end;
}

.awb-passive-history-title[b-nbat5xggp2] {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.awb-passive-grid[b-nbat5xggp2] {
    width: 100%;
}
/* /Features/Customers/Components/SecurityEditDialog.razor.rz.scp.css */
/* FR-UI-APP-180 obligation 6 — the standard stacked field-stack (ui-overview.md:315). */
.awb-security-edit-dialog[b-54o6xrp945] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Extra breathing room above the Spara/Återställ/Avbryt toolbar. */
.awb-security-edit-dialog[b-54o6xrp945]  .awb-form-toolbar {
    margin-top: 8px;
}

/* Numeric fields: full-width box, no spinner buttons. ::deep reaches the Radzen-rendered elements,
   which carry no scope attribute. The unit-inside wrapper is inline-block, so it AND the RadzenNumeric
   inside it must stretch to 100% — otherwise the absolutely-positioned suffix anchors off a short input. */
.awb-security-edit-dialog[b-54o6xrp945]  .awb-security-edit-input,
.awb-security-edit-dialog[b-54o6xrp945]  .awb-security-edit-input .rz-textbox,
.awb-security-edit-dialog[b-54o6xrp945]  .awb-security-edit-input .rz-numeric,
.awb-security-edit-dialog[b-54o6xrp945]  .awb-security-edit-input .rz-numeric input {
    width: 100%;
}

.awb-security-edit-dialog[b-54o6xrp945]  .rz-numeric-up,
.awb-security-edit-dialog[b-54o6xrp945]  .rz-numeric-down {
    display: none;
}

/* Spinner gone → pull the unit suffix back to the field edge and drop the reserved padding. */
.awb-security-edit-dialog[b-54o6xrp945]  .awb-number-input--unit-inside .awb-number-input__unit {
    inset-inline-end: 0.75rem;
}

.awb-security-edit-dialog[b-54o6xrp945]  .awb-number-input--unit-inside .rz-numeric input {
    padding-inline-end: 2rem;
}
/* /Features/Customers/Components/SimplePickerDialog.razor.rz.scp.css */
/* Consistent vertical rhythm between the field, the empty-state alert and the toolbar — otherwise
   they butt together with uneven spacing compared to the rest of the UI. */
.awb-simple-picker-dialog[b-0p4cyjwjw3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* /Features/ExAnteCosts/ExAnteDisclosurePanel.razor.rz.scp.css */
.awb-exante-panel__table[b-5cq2re1dx5] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.awb-exante-panel__table th[b-5cq2re1dx5],
.awb-exante-panel__table td[b-5cq2re1dx5] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
    text-align: left;
    vertical-align: top;
}

.awb-exante-panel__table thead th[b-5cq2re1dx5] {
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6c757d);
    white-space: nowrap;
}

.awb-exante-panel__table tfoot td[b-5cq2re1dx5] {
    font-weight: 600;
    border-top: 2px solid var(--rz-border, #e0e0e0);
}

.awb-exante-panel__num[b-5cq2re1dx5] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.awb-exante-panel__section-title[b-5cq2re1dx5] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.awb-exante-panel__badge[b-5cq2re1dx5] {
    margin-left: 0.5rem;
}

.awb-exante-panel__chart[b-5cq2re1dx5] {
    margin: 1rem 0;
    min-height: 18rem;
}

.awb-exante-panel__assumption[b-5cq2re1dx5] {
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

.awb-exante-panel__note[b-5cq2re1dx5] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #6c757d);
    margin: 0.75rem 0;
}

.awb-exante-panel__actions[b-5cq2re1dx5] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}
/* /Features/Files/Components/CustomerFilesTab.razor.rz.scp.css */
/* Row-action cluster: Ladda ner + Ta bort side by side without page-level utility classes. */
.awb-file-actions[b-h72xk10xiq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Filnamn cell: name + inline pencil affordance / Signerad badge on one baseline. */
.awb-file-name[b-h72xk10xiq] {
    margin-right: 0.5rem;
}

.awb-file-signed[b-h72xk10xiq] {
    margin-left: 0.5rem;
}

.awb-file-rename-input[b-h72xk10xiq] {
    min-width: 12rem;
}

/* CRM-290: read-only "visible to customer" tick on locked rows. */
.awb-file-visible[b-h72xk10xiq] {
    display: inline-flex;
    align-items: center;
    color: var(--awb-success-soft-text, var(--green-text));
    cursor: default;
}
/* /Features/Files/Components/FileUploadZone.razor.rz.scp.css */
.awb-upload-zone[b-sn1vqcpi6h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.awb-upload-dropzone[b-sn1vqcpi6h] {
    position: relative;
    padding: 1.5rem;
    border: 2px dashed var(--line-strong);
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: center;
}

/* The file input fills the whole dropzone (transparent, on top) rather than being clipped to a
   1px speck. That way a click anywhere in the border AND a native file drop both land on the input
   itself — <InputFile>/drag-drop only fire when the event target is the input. No JS needed.
   ::deep — <InputFile> renders the raw input without this component's scope marker. */
.awb-upload-dropzone[b-sn1vqcpi6h]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* The visible button sits above the input so it stays clickable; its click still forwards to the
   input via the wrapping <label>. */
.awb-upload-copy[b-sn1vqcpi6h],
.awb-upload-action[b-sn1vqcpi6h] {
    position: relative;
    pointer-events: none;
}

.awb-upload-copy[b-sn1vqcpi6h] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.awb-upload-title[b-sn1vqcpi6h] {
    font-weight: 600;
}

.awb-upload-hint[b-sn1vqcpi6h] {
    color: var(--muted);
    font-size: 0.875rem;
}

.awb-upload-action[b-sn1vqcpi6h] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
}

.awb-upload-errors[b-sn1vqcpi6h] {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.awb-upload-error[b-sn1vqcpi6h] {
    color: var(--red-text);
    font-size: 0.875rem;
}
/* /Features/InsuranceAdvisory/Components/BeneficiaryChangePanel.razor.rz.scp.css */
/* Legacy COB dress. The table itself is a `Cob-Table` (`.awb-cob-table` in wwwroot/app.css,
   from cob-advisor-addeqt src/routes/Cob/_Cob.scss:314-345 + src/components/Table/_Table.scss);
   what stays here is only what belongs to THIS panel. The panel previously carried its own
   40-line table dress in a different grey-blue palette (#6b7482 headings, #fafbfc header plate,
   #eef0f3 row rules, 13px/11.5px type), which is what made the surface read as another product. */

.awb-beneficiary-panel[b-6iidxro75k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* `.Cob-TableSummaryField-label` (_TableSummaryField.scss:13-26) — the 11px/700 label legacy puts
   above a table, in the body colour rather than a bespoke slate. */
.awb-beneficiary-panel__label[b-6iidxro75k] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* The tick column is this panel's own concern: legacy sizes only the columns it must. */
.awb-beneficiary-panel__grid th.awb-beneficiary-panel__check[b-6iidxro75k],
.awb-beneficiary-panel__grid td.awb-beneficiary-panel__check[b-6iidxro75k] {
    width: 2.125rem;
    vertical-align: middle;
}

/* Legacy's small print, in the secondary text tone rather than a one-off #6b7482. */
.awb-beneficiary-panel__hint[b-6iidxro75k] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    line-height: 1.4;
}
/* /Features/InsuranceAdvisory/Components/CostBlockFragment.razor.rz.scp.css */
/* Legacy COB dress. The avgifts-/ersättningsmatris is a `Cob-Table` (`.awb-cob-table` in
   wwwroot/app.css, from cob-advisor-addeqt src/routes/Cob/_Cob.scss:314-345), so the block's own
   6px/8px cells with a #eef0f3 rule and 13px/#5a6472 headings are gone — that dress existed nowhere
   else in the wizard. Headings take the COB primary through WizardShell's ::deep heading rule. */

.awb-cost-block[b-vsrfny7iym] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
}

/* The block's own heading. Legacy's in-card heading is an <h4>, so this is one too (see the razor)
   and the shell paints it in the COB primary. */
.awb-cost-block__head[b-vsrfny7iym] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* `.Cob-TableSummaryField-label` (_TableSummaryField.scss:13-26) — the 11px/700 label legacy puts
   above a table and above a sub-block. */
.awb-cost-block__matrix-title[b-vsrfny7iym],
.awb-cost-block__subhd[b-vsrfny7iym] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin: 8px 0 4px;
}

.awb-cost-block__arvodering-detail[b-vsrfny7iym] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 8px 20px;
}

/* The first-year sentence is legacy's own italic description tone (`.Cob-description`,
   _Cob.scss:132-134), in the body colour rather than a one-off #3a4250. */
.awb-cost-block__firstyear[b-vsrfny7iym] {
    font-style: italic;
    color: var(--rz-text-color, #3f4950);
    padding: 8px 0;
}
/* /Features/InsuranceAdvisory/Components/FamilyHouseholdCard.razor.rz.scp.css */
/* The two derived counts are read-only VALUES, so they take `.Cob-TableSummaryField-value`'s tone
   (cob-advisor-addeqt src/routes/Cob/components/TableSummaryField/_TableSummaryField.scss:44-52) —
   14px in the COB accent — instead of a bespoke bold #1e2735 that matched nothing else in the wizard. */

.awb-family-household[b-ys66wrc8yd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.awb-family-household__row[b-ys66wrc8yd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.awb-family-household__derived[b-ys66wrc8yd] {
    color: var(--awb-cob-secondary, #4cb7d5);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.awb-family-household__children[b-ys66wrc8yd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awb-family-household__child[b-ys66wrc8yd] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
/* /Features/InsuranceAdvisory/Components/InsuranceActionDialog.razor.rz.scp.css */
/* Legacy COB dress for the Åtgärd dialog. The fliklist is Common/UI's WizardTabStrip (legacy NavList),
   so the bespoke #2b5fad tab underline is gone, and the two standalone field labels take FormField's own
   label-above measure so they stop reading as a different kind of label from the FormField labels around
   them. Rules and the head separator use legacy's field-frame grey (_TextField.scss:7) rather than a
   one-off #eef0f3/#f1f2f5. */

.awb-insurance-action-dialog[b-iwen601m5p] {
    padding: 4px 20px 16px;
}

.awb-insurance-action-dialog__head[b-iwen601m5p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--awb-cob-field-border, #bdc6ce);
    margin-bottom: 12px;
}

/* An <h4>, so WizardShell's ::deep heading rule paints it in the COB primary. */
.awb-insurance-action-dialog__title[b-iwen601m5p] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

/* The strip is centred and roomy by design in a 960px card; inside a 760px dialog it only needs its
   vertical air trimmed. Nothing about its colours or type is overridden. */
.awb-insurance-action-dialog__tabs[b-iwen601m5p] {
    padding: 0.25rem 0 0.75rem;
    margin-bottom: 4px;
}

.awb-insurance-action-dialog__panel[b-iwen601m5p] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.awb-insurance-action-dialog__labelled[b-iwen601m5p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.awb-insurance-action-dialog__label-row[b-iwen601m5p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* These two labels sit above a textarea, which is exactly the case FormField renders as a label-above
   stack (legacy does not box a TextView either — _TextView.scss). So they take FormField's own
   label-above measure, 14px/500 in the body colour, instead of a one-off 11.5px/600/#4a5261 that read
   as a different kind of label from the FormField labels directly above them. */
.awb-insurance-action-dialog__field-label[b-iwen601m5p] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.875rem;
    font-weight: 500;
}

.awb-insurance-action-dialog__slot[b-iwen601m5p] {
    margin-bottom: 12px;
}

.awb-insurance-action-dialog__sustainability[b-iwen601m5p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--awb-cob-field-border, #bdc6ce);
    padding-top: 12px;
}
/* /Features/InsuranceAdvisory/Components/InsuranceCompletionReview.razor.rz.scp.css */
/* Legacy COB dress for the Granska/Slutförande surface. Both tables are `Cob-Table`s
   (`.awb-cob-table` in wwwroot/app.css, from cob-advisor-addeqt src/routes/Cob/_Cob.scss:314-345),
   so the 40 lines of bespoke table styling that used to live here — #fafbfc header plates,
   #eef0f3 row rules, 11.5px/#6b7482 headings, 13px rows — are gone; only what belongs to THIS
   surface remains. The status marks and the lagbas dot now read from legacy's palette
   (_variables.scss:2-17) instead of the hand-picked #1d9d57 / #b3261e / #2b5fad. */

.awb-insurance-completion[b-ikzhyjzjlx] {
    display: flex;
    flex-direction: column;
}

.awb-insurance-completion__rules-head[b-ikzhyjzjlx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.awb-insurance-completion__rules[b-ikzhyjzjlx],
.awb-insurance-completion__blockers[b-ikzhyjzjlx] {
    display: flex;
    flex-direction: column;
}

/* Legacy's row measure inside the wizard card is 12px (`.Table-row-value`, _Cob.scss:329-332);
   the rule/blocker list is a list of the same weight, separated by the same inset hairline the
   Cob-Table rows use rather than a #f1f2f5 border. */
.awb-insurance-completion__rule[b-ikzhyjzjlx],
.awb-insurance-completion__blocker[b-ikzhyjzjlx] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 0.5rem 0;
    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;
}

.awb-insurance-completion__rule:last-child[b-ikzhyjzjlx],
.awb-insurance-completion__blocker:last-child[b-ikzhyjzjlx] {
    box-shadow: none;
}

.awb-insurance-completion__mark[b-ikzhyjzjlx] {
    font-weight: 700;
}

/* getColor(success) / getColor(danger) — the same two tones the risk-class cells wear. */
.awb-insurance-completion__mark--ok[b-ikzhyjzjlx] {
    color: var(--awb-cob-success, #2ed1a0);
}

.awb-insurance-completion__mark--no[b-ikzhyjzjlx],
.awb-insurance-completion__mark--missing[b-ikzhyjzjlx] {
    color: var(--awb-cob-danger, #df4c43);
}

/* Two classes + a type + the scope attribute, so it outbids app.css's
   `.awb-wizard-shell .awb-cob-table th { text-align: left }` at the same origin. */
.awb-insurance-completion__matrix th.awb-insurance-completion__matrix-col[b-ikzhyjzjlx],
.awb-insurance-completion__matrix td.awb-insurance-completion__matrix-cell[b-ikzhyjzjlx] {
    text-align: center;
}

/* getColor(secondary) — legacy paints a table's own figures and marks in the COB accent
   (`.Cob-view13-ColumnField .value`, _View13.scss:22-27). */
.awb-insurance-completion__marker[b-ikzhyjzjlx] {
    color: var(--awb-cob-secondary, #4cb7d5);
    font-size: 0.9375rem;
}

.awb-insurance-completion__sustainability[b-ikzhyjzjlx] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.875rem;
}

.awb-insurance-completion__finish[b-ikzhyjzjlx] {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}
/* /Features/InsuranceAdvisory/Components/InsuranceCostIllustration.razor.rz.scp.css */
/* Legacy COB dress. The scenario table is a `Cob-Table` (`.awb-cob-table` in wwwroot/app.css, from
   cob-advisor-addeqt src/routes/Cob/_Cob.scss:314-345) rather than this component's own 14px rows with
   a --rz-border rule, and the chart sits on legacy's lightened chart plate (_Table.scss:51). */

.awb-insurance-illustration__title[b-ixlu5l52e9] {
    margin: 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.awb-insurance-illustration__narrative[b-ixlu5l52e9] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.875rem;
    margin: 0.5rem 0 1rem;
}

.awb-insurance-illustration__chart[b-ixlu5l52e9] {
    margin: 1rem 0;
    padding: 0.625rem;
    border-radius: 6px;
    background: var(--awb-cob-chart-surface, #f7f8f9);
    min-height: 18rem;
}

.awb-insurance-illustration__note[b-ixlu5l52e9] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    line-height: 1.4;
    margin: 0.75rem 0;
}
/* /Features/InsuranceAdvisory/Components/LifeInsuranceProposalPanel.razor.rz.scp.css */
.awb-life-panel[b-mor0y4f4h3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.awb-life-panel__row[b-mor0y4f4h3] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
/* /Features/InsuranceAdvisory/Components/LonevaxlingActionDialog.razor.rz.scp.css */
/* This dialog shipped with NO stylesheet: every `awb-lonevaxling-dialog__*` class it emitted resolved
   to nothing, so the surface rendered as unstyled stacked divs with a bare button row for tabs — the
   plainest form of "another system". Dressed here as the sibling InsuranceActionDialog is, from the same
   legacy sources (cob-advisor-addeqt src/components/TextField/_TextField.scss,
   src/components/TextView/_TextView.scss, src/routes/Cob/_Cob.scss). */

.awb-lonevaxling-dialog[b-jv93ogxuf2] {
    padding: 4px 20px 16px;
}

.awb-lonevaxling-dialog__head[b-jv93ogxuf2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--awb-cob-field-border, #bdc6ce);
    margin-bottom: 12px;
}

/* An <h4>, so WizardShell's ::deep heading rule paints it in the COB primary. */
.awb-lonevaxling-dialog__title[b-jv93ogxuf2] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

/* WizardTabStrip is centred and roomy by design in a 960px card; inside a 760px dialog it only needs
   its vertical air trimmed. Nothing about its colours or type is overridden. */
.awb-lonevaxling-dialog__tabs[b-jv93ogxuf2] {
    padding: 0.25rem 0 0.75rem;
    margin-bottom: 4px;
}

.awb-lonevaxling-dialog__panel[b-jv93ogxuf2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* A question that owns an option list below it — legacy renders exactly this as a label above an
   OptionsList, at FormField's own label-above measure (14px/500 in the body colour). */
.awb-lonevaxling-dialog__dlabel[b-jv93ogxuf2],
.awb-lonevaxling-dialog__field-label[b-jv93ogxuf2] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.875rem;
    font-weight: 500;
}

.awb-lonevaxling-dialog__labelled[b-jv93ogxuf2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.awb-lonevaxling-dialog__label-row[b-jv93ogxuf2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.awb-lonevaxling-dialog__catrow[b-jv93ogxuf2] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 5px 2px;
}

/* The generated syfte line and the two educational paragraphs are legacy's small print
   (`.Cob-description`, _Cob.scss:132-134) in the secondary text tone. */
.awb-lonevaxling-dialog__summary[b-jv93ogxuf2],
.awb-lonevaxling-dialog__edu[b-jv93ogxuf2] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    line-height: 1.4;
}

/* `.Cob-TableSummaryField-value` (_TableSummaryField.scss:44-52) — a derived figure is a value, not an
   input: 14px in the COB accent, which is how every other derived amount in the wizard reads. */
.awb-lonevaxling-dialog__derived-premium[b-jv93ogxuf2] {
    color: var(--awb-cob-secondary, #4cb7d5);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.awb-lonevaxling-dialog__product-row[b-jv93ogxuf2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 12px;
    align-items: start;
}

.awb-lonevaxling-dialog__skydd-duration[b-jv93ogxuf2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: var(--awb-cob-field-max, 480px);
}

.awb-lonevaxling-dialog__sustainability[b-jv93ogxuf2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--awb-cob-field-border, #bdc6ce);
    padding-top: 12px;
}
/* /Features/InsuranceAdvisory/Components/PensionProjectionIllustration.razor.rz.scp.css */
/* This component shipped with NO stylesheet at all: its payout table rendered as a bare unstyled
   <table> and its capital cards as unstyled divs, which — next to the dressed tables on the other
   wizard nodes — is the plainest form of "another system". Dressed here from the same legacy sources
   the rest of the wizard uses (cob-advisor-addeqt): the table is a `Cob-Table` (`.awb-cob-table` in
   wwwroot/app.css, _Cob.scss:314-345) and the cards are `Cob-TableSummary` fields
   (_Cob.scss:299-311 + components/TableSummaryField/_TableSummaryField.scss). */

/* `.Cob-TableSummary` + `.Cob-TableSummary-container`: a wrapping flex ROW of fields on a lightened
   10px-radius plate, each field capped at 221.5px (`.per-row-4`), which is what produces legacy's
   four/five-across layout with no column count declared. */
.awb-pension-illustration__cards[b-u8gayw5e6p] {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    width: 100%;
    margin-top: 0.625rem;
    padding: 0.3125rem;
    border-radius: 10px;
    background: var(--awb-cob-table-surface, #f7f8f9);
}

.awb-pension-illustration__card[b-u8gayw5e6p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 221.5px;
    padding: 0.625rem;
}

/* `.Cob-TableSummaryField-label` (_TableSummaryField.scss:13-26) — 11px/700, sentence case. */
.awb-pension-illustration__card-label[b-u8gayw5e6p] {
    margin-bottom: 0.3125rem;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* `.Cob-TableSummaryField-value` (_TableSummaryField.scss:44-52): 14px in the COB accent, with
   `margin-top: auto` so every value in the row shares a baseline however far its label wrapped. */
.awb-pension-illustration__card b[b-u8gayw5e6p] {
    width: 100%;
    margin-top: auto;
    color: var(--awb-cob-secondary, #4cb7d5);
    font-size: 0.875rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.awb-pension-illustration__note[b-u8gayw5e6p] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    line-height: 1.4;
    margin-top: 0.5rem;
}

@media (max-width: 640px) {
    .awb-pension-illustration__card[b-u8gayw5e6p] {
        max-width: none;
    }
}
/* /Features/InsuranceAdvisory/Components/PensionRiskSection.razor.rz.scp.css */
/* This component shipped with NO stylesheet: the SRI matrix rendered as a bare <table> and the three
   question sub-headings as unstyled divs. Dressed here from the same legacy sources the rest of the
   wizard uses (cob-advisor-addeqt) — the matrix is a `Cob-Table` (`.awb-cob-table` in wwwroot/app.css,
   src/routes/Cob/_Cob.scss:314-345) and the sub-headings take `.Cob-TableSummaryField-label`'s
   11px/700 measure (components/TableSummaryField/_TableSummaryField.scss:13-26). */

.awb-pension-risk[b-4er6v8etpr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.awb-pension-risk__subhd[b-4er6v8etpr] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* The regulated-source caveat rides along inside the sub-heading, so it must NOT inherit the 700. */
.awb-pension-risk__subhd-note[b-4er6v8etpr] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-weight: 400;
}

/* The SRI class numbers are centred figures, not prose — two classes + a type + the scope attribute
   so this outbids app.css's left-aligning Cob-Table rules. */
.awb-pension-risk__matrix th[b-4er6v8etpr],
.awb-pension-risk__matrix td[b-4er6v8etpr] {
    text-align: center;
}

.awb-pension-risk__matrix td.awb-pension-risk__matrix-rh[b-4er6v8etpr] {
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}

.awb-pension-risk__matrix-note[b-4er6v8etpr] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    line-height: 1.4;
}

/* Two fields side by side, capped at legacy's form measure like every other field pair. */
.awb-pension-risk__reco[b-4er6v8etpr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
}
/* /Features/InsuranceAdvisory/Components/SicknessIncomeIllustration.razor.rz.scp.css */
/* Legacy COB dress. The amounts table is a `Cob-Table` (`.awb-cob-table` in wwwroot/app.css, from
   cob-advisor-addeqt src/routes/Cob/_Cob.scss:314-345), the kommunalskatt field is a Common/UI
   Dropdown inside a FormField box, and the bar chart takes the COB palette — so what stays here is
   only the chart geometry and the small print. Removed: the bespoke <select> frame, the 40-line
   grey-blue table dress (#fafbfc/#eef0f3/#6b7482) and the #7fb0e6 bar colour, none of which exist
   anywhere else in the wizard. */

.awb-sickness-illustration__inputs[b-7qr0rnm0ld] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.awb-sickness-illustration__legend[b-7qr0rnm0ld] {
    display: flex;
    gap: 14px;
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    margin-bottom: 6px;
}

.awb-sickness-illustration__legend-item[b-7qr0rnm0ld] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.awb-sickness-illustration__swatch[b-7qr0rnm0ld] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
}

/* getColor(secondary) = #4cb7d5 (_variables.scss:3) — the tone legacy's own charts plot in
   (src/charts/chartData.js), replacing a one-off #7fb0e6 that appears nowhere else. */
.awb-sickness-illustration__swatch--fk[b-7qr0rnm0ld],
.awb-sickness-illustration__bseg--fk[b-7qr0rnm0ld] {
    background: var(--awb-cob-secondary, #4cb7d5);
}

/* `.Cob-chart` plate + axes: legacy frames a chart in the same lightened surface as a table
   (_Table.scss:51) rather than drawing bare rules in a bespoke grey. */
.awb-sickness-illustration__bars[b-7qr0rnm0ld] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 190px;
    padding: 6px 4px 0;
    border-left: 1px solid var(--awb-cob-field-border, #bdc6ce);
    border-bottom: 1px solid var(--awb-cob-field-border, #bdc6ce);
}

.awb-sickness-illustration__bcol[b-7qr0rnm0ld] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.awb-sickness-illustration__bstack[b-7qr0rnm0ld] {
    width: 64%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.awb-sickness-illustration__bseg[b-7qr0rnm0ld] {
    width: 100%;
}

/* `.Cob-TableSummaryField-label`'s 11px measure (_TableSummaryField.scss:13-26) for a caption. */
.awb-sickness-illustration__blab[b-7qr0rnm0ld] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    margin-top: 6px;
    text-align: center;
    line-height: 1.2;
}

.awb-sickness-illustration__brasklapp[b-7qr0rnm0ld],
.awb-sickness-illustration__hint[b-7qr0rnm0ld] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    line-height: 1.4;
    margin-top: 8px;
}
/* /Features/InsuranceAdvisory/Components/SurvivorCompensationIllustration.razor.rz.scp.css */
/* Legacy COB dress. Both tables are `Cob-Table`s (`.awb-cob-table` in wwwroot/app.css, from
   cob-advisor-addeqt src/routes/Cob/_Cob.scss:314-345) and the kommunalskatt field is a Common/UI
   Dropdown inside a FormField box, so the bespoke <select> frame and the duplicated grey-blue table
   dress (#fafbfc header plates, #eef0f3 rules, 11.5px/#6b7482 headings) are gone. */

.awb-survivor-illustration__inputs[b-otkh7tj7g3] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* `.Cob-TableSummaryField-label` (_TableSummaryField.scss:13-26): 11px/700, sentence case (legacy
   explicitly comments the uppercase out there), in the body colour rather than a one-off slate. */
.awb-survivor-illustration__subhd[b-otkh7tj7g3] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin: 14px 0 8px;
}

.awb-survivor-illustration__caption[b-otkh7tj7g3],
.awb-survivor-illustration__brasklapp[b-otkh7tj7g3],
.awb-survivor-illustration__hint[b-otkh7tj7g3] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    line-height: 1.4;
    margin-top: 8px;
}

.awb-survivor-illustration__caption[b-otkh7tj7g3] {
    text-align: center;
    margin-top: 4px;
}

/* The totals row is this table's own concern; the plate is the Cob-Table surface, not a bespoke
   #fafbfc. Two classes + a type + the scope attribute so it outbids app.css's row rule. */
.awb-survivor-illustration__grid tr.awb-survivor-illustration__total td[b-otkh7tj7g3] {
    background: var(--awb-cob-table-surface, #f7f8f9);
    font-weight: 600;
}
/* /Features/InsuranceAdvisory/Components/UttagsanalysIllustration.razor.rz.scp.css */
/* Legacy COB dress. Both tables are `Cob-Table`s (`.awb-cob-table` in wwwroot/app.css, from
   cob-advisor-addeqt src/routes/Cob/_Cob.scss:314-345), the three in-table/kommunalskatt selects are
   Common/UI Dropdowns, and the diff tones come from legacy's palette (_variables.scss:2-17). What
   stays here is what belongs to THIS illustration: the transferred-row tint, the numeric column
   widths, the goal-seek block and the small print. */

.awb-uttag-illustration__toolbar[b-58pkp4y4gf] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.awb-uttag-illustration__table-wrap[b-58pkp4y4gf] {
    margin-bottom: 16px;
}

/* An allmän-pension row is informational: legacy tints such a row with its `light` surface rather
   than a bespoke #f8fafd, and mutes the text to the secondary tone.
   Two classes + a type + the scope attribute, so it outbids app.css's Cob-Table row rule. */
.awb-uttag-illustration__policies tr.awb-uttag-illustration__row--general td[b-58pkp4y4gf] {
    background: var(--awb-cob-light, #f4f5f7);
    color: var(--rz-text-secondary-color, #6c757d);
}

.awb-uttag-illustration__policy-name[b-58pkp4y4gf] {
    font-weight: 600;
}

/* `::deep`, because these classes land on a CHILD component's rendered root (Badge, Dropdown,
   NumberInput), which does not carry this component's scope attribute — a plain selector here
   compiles to `.class[b-thisScope]` and matches nothing. */
.awb-uttag-illustration__policies[b-58pkp4y4gf]  .awb-uttag-illustration__general-badge,
.awb-uttag-illustration__policies[b-58pkp4y4gf]  .awb-uttag-illustration__transfer-badge {
    margin-left: 6px;
}

/* Legacy sizes only the columns it must; these two hold controls, not prose. */
.awb-uttag-illustration__policies[b-58pkp4y4gf]  .awb-uttag-illustration__select {
    min-width: 7rem;
}

.awb-uttag-illustration__policies[b-58pkp4y4gf]  .awb-uttag-illustration__premie {
    max-width: 110px;
}

.awb-uttag-illustration__policies td.awb-uttag-illustration__rowactions[b-58pkp4y4gf] {
    white-space: nowrap;
    vertical-align: middle;
}

.awb-uttag-illustration__policies td.awb-uttag-illustration__empty[b-58pkp4y4gf],
.awb-uttag-illustration__compare td.awb-uttag-illustration__empty[b-58pkp4y4gf] {
    text-align: center;
    color: var(--rz-text-secondary-color, #6c757d);
    padding: 1rem 0.625rem;
}

.awb-uttag-illustration__hint[b-58pkp4y4gf],
.awb-uttag-illustration__brasklapp[b-58pkp4y4gf] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    line-height: 1.4;
    padding: 10px 2px;
}

.awb-uttag-illustration__skatt[b-58pkp4y4gf] {
    margin: 12px 0;
    max-width: 220px;
}

.awb-uttag-illustration__compare-head[b-58pkp4y4gf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* `.Cob-TableSummaryField-label` (_TableSummaryField.scss:13-26). */
.awb-uttag-illustration__subhd[b-58pkp4y4gf] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* getColor(success) / getColor(danger) / the secondary text tone — not #1d7a3d/#b3261e/#6b7482. */
.awb-uttag-illustration__diff--pos[b-58pkp4y4gf] {
    color: var(--awb-cob-success, #2ed1a0);
}

.awb-uttag-illustration__diff--neg[b-58pkp4y4gf] {
    color: var(--awb-cob-danger, #df4c43);
}

.awb-uttag-illustration__diff--zero[b-58pkp4y4gf] {
    color: var(--rz-text-secondary-color, #6c757d);
}

.awb-uttag-illustration__goalseek[b-58pkp4y4gf] {
    margin-top: 16px;
    border-top: 1px solid var(--awb-cob-field-border, #bdc6ce);
    padding-top: 14px;
}

.awb-uttag-illustration__goalseek-inputs[b-58pkp4y4gf] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 12px;
}

.awb-uttag-illustration__goalseek-result[b-58pkp4y4gf] {
    margin-top: 12px;
    color: var(--rz-text-color, #3f4950);
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.awb-uttag-illustration__muted[b-58pkp4y4gf] {
    color: var(--rz-text-secondary-color, #6c757d);
}

.awb-uttag-illustration__goalseek-note[b-58pkp4y4gf] {
    font-size: 0.6875rem;
}
/* /Features/InsuranceAdvisory/Wizard/InsuranceModuleStepBase.razor.rz.scp.css */
/* Legacy COB dress for the reusable module step. The palette was a bespoke one (#4a5261 sub-headings,
   #8a919c hints, #2b5fad menu links, #e6e9ee/#f1f2f5 rules, px type at 12.5/13/13.5px) that appears
   nowhere else in the wizard — which is what made the insurance nodes read as another product. Every
   value below now comes from legacy's own palette and measures (cob-advisor-addeqt
   src/helpers/scss/_variables.scss:2-17, src/components/TextField/_TextField.scss,
   src/components/TableSummaryField/_TableSummaryField.scss, src/routes/Cob/_Cob.scss). */

.awb-insurance-module[b-s9f3r56376] {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 20px;
    align-items: start;
}

.awb-insurance-module__catrow[b-s9f3r56376] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 5px 2px;
}

.awb-insurance-module__summary-head[b-s9f3r56376] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 8px;
}

/* `.Cob-TableSummaryField-label` (_TableSummaryField.scss:13-26) — 11px/700, sentence case, in the
   body colour. The same label the risk-summary node's fields wear. */
.awb-insurance-module__subhd[b-s9f3r56376] {
    color: var(--rz-text-color, #3f4950);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* Legacy's small print (`.Cob-description`, _Cob.scss:132-134) in the secondary text tone. */
.awb-insurance-module__hint[b-s9f3r56376] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.6875rem;
    margin-top: 6px;
    line-height: 1.4;
}

.awb-insurance-module__addmenu[b-s9f3r56376] {
    position: relative;
}

.awb-insurance-module__ddmenu[b-s9f3r56376] {
    position: absolute;
    right: 0;
    top: 34px;
    background: #fff;
    border: 1px solid var(--awb-cob-field-border, #bdc6ce);
    border-radius: 5px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 5%), 0 2px 30px rgb(0 0 0 / 5%);
    min-width: 240px;
    padding: 6px;
    z-index: 3;
}

/* An item reads as a COB link: the primary colour, not a bespoke #2b5fad, and it highlights on the
   `light` surface (#f4f5f7) legacy uses for a hovered list row. */
.awb-insurance-module__ddmenu-item[b-s9f3r56376] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.875rem;
    border-radius: 5px;
    color: var(--awb-cob-primary, #003d50);
    background: none;
    border: none;
    cursor: pointer;
}

.awb-insurance-module__ddmenu-item:hover[b-s9f3r56376] {
    background: var(--awb-cob-light, #f4f5f7);
}

/* An action card is legacy's framed content box: the field-frame grey and a 5px radius, the same
   frame the boxed fields and the dialog rules wear (_TextField.scss:5-8). */
.awb-insurance-module__action-card[b-s9f3r56376] {
    border: 1px solid var(--awb-cob-field-border, #bdc6ce);
    border-radius: 5px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.awb-insurance-module__action-head[b-s9f3r56376] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.awb-insurance-module__action-title[b-s9f3r56376] {
    color: var(--awb-cob-primary, #003d50);
    font-size: 0.875rem;
    font-weight: 700;
}

.awb-insurance-module__action-status[b-s9f3r56376] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: 0.75rem;
    margin-top: 4px;
}

.awb-insurance-module__action-links[b-s9f3r56376] {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.awb-insurance-module__noaction[b-s9f3r56376] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 2px;
    border-top: 1px solid var(--awb-cob-field-border, #bdc6ce);
    margin-top: 4px;
}

.awb-insurance-module__illustration-hidden[b-s9f3r56376] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
}

/* The overlay and its sheet follow the wizard card's own elevation (WizardShell.razor.css) and the
   COB primary as the scrim, rather than a bespoke slate-blue wash and a 10px/heavy shadow. */
.awb-insurance-module__dialog-overlay[b-s9f3r56376] {
    position: fixed;
    inset: 0;
    background: rgb(0 61 80 / 45%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    z-index: 40;
    overflow-y: auto;
}

.awb-insurance-module__dialog[b-s9f3r56376] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 5%), 0 2px 30px rgb(0 0 0 / 5%);
    max-width: 760px;
    width: 100%;
}
/* /Features/Kyc/Components/KycSectionFrame.razor.rz.scp.css */
/* Consistent air between the fields of a KYC section. The Card body's own 0.5rem gap is too tight for
   full form rows (legacy CRM spaces its `.kyc-form-row`s further apart); this wrapper owns the
   field-to-field gap for every section uniformly. Sections with their own inner rhythm (AML's
   `.awb-aml-questions`) nest inside this as a single child, so the gap does not double up. */
.kyc-section-fields[b-xm4g6npd4o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kyc-section-updated[b-xm4g6npd4o] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, var(--muted));
}

/* Two-column layout for sections that supply an Aside (e.g. the general-risk chart). The left column
   (fields + Spara/Återställ toolbar) and the right column (aside) size independently, so the toolbar
   stays directly under the fields even when the aside is taller. */
.kyc-section-split[b-xm4g6npd4o] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(320px, 1fr);
    gap: 2rem;
    align-items: start;
}

.kyc-section-split__main[b-xm4g6npd4o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .kyc-section-split[b-xm4g6npd4o] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Kyc/Components/Sections/CompanyRepresentativeDialog.razor.rz.scp.css */
/* Match the form vertical-gap convention used by the sibling dialogs (ContactEditDialog). */
.awb-company-representative-dialog[b-y61fe1r20x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The three role checkboxes are direct children of the flex column today and therefore stack.
   Moving them into a FormField makes them children of `awb-form-field-input`, a plain block —
   and `Checkbox` is inline-flex (Checkbox.razor.css:1-5), so they would sit on one line and
   wrap. ::deep because that container is emitted by the FormField child component, which
   carries no scope attribute of this file. */
.awb-company-representative-dialog[b-y61fe1r20x]  .awb-form-field-input:has(.awb-checkbox) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Ägarandel is a bare RadzenNumeric (not the <NumberInput> wrapper), so it misses app.css's
   .awb-number-input double-padding fix and pads twice: the base .rz-numeric rule puts 8px on the
   wrapper AND the inner <input> carries its own inline padding, stacking to a stray indent next
   to the sibling text fields (app.css:922-936 documents the same defect for the wrapped case). */
.awb-company-representative-dialog[b-y61fe1r20x]  .awb-ownership-input {
    padding-inline-start: 0;
}

.awb-company-representative-dialog[b-y61fe1r20x]  .awb-ownership-input input {
    padding-inline-start: 8px;
}
/* /Features/Kyc/Components/Sections/CompanyRepresentativeSection.razor.rz.scp.css */
/* QA1 (CRM-387): Radzen material indents .rz-column-title by --rz-grid-header-title-padding-inline (1rem) while
   .rz-cell-data has no inset, so headers sat 16px right of their values. Same fix as CRM-380's case grid. */
.awb-company-representative-grid[b-3ojkwwi7g6]  .rz-grid-table thead th .rz-column-title {
    padding-inline-start: 0;
}

/* QA2 (CRM-387): flex drops the whitespace gap between the two icon buttons, so both fit the 80px action column
   (2 x 30px + 20px cell padding). */
.awb-company-representative-grid[b-3ojkwwi7g6]  .rz-grid-table tbody td .rz-cell-data:has(.awb-button) {
    display: flex;
}

/* QA3 (CRM-387): the V badge looks like the wizard's. Copy of Badge.razor.css `.awb-wizard-shell .awb-badge--primary`,
   with the wizard's pinned --rz-primary (app.css CRM-320 WIZARD PIN) as a literal, because --rz-primary is navy outside the wizard. */
.awb-company-representative-grid[b-3ojkwwi7g6]  .awb-ubo-badge.awb-badge--primary {
    gap: 0.25rem;
    padding: 2px 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    background: #4a6fa5;
    color: var(--white);
}
/* /Features/Kyc/Components/Sections/EsgSection.razor.rz.scp.css */
/* The requires-explanation percent input sits under its checkbox, indented (legacy EsgSelectItem
   padding-left:20px facit). */
.awb-esg-option__explanation[b-15wxj3mda3] {
    padding-left: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Red border on the percent input when it failed validation (::deep reaches the RadzenNumeric's
   inner input, which does not carry this component's scope attribute). */
.awb-esg-option__explanation--error[b-15wxj3mda3]  .rz-numeric,
.awb-esg-option__explanation--error[b-15wxj3mda3]  input {
    border-color: var(--rz-danger, var(--red-text));
}
/* /Features/Kyc/Components/Sections/GeneralRiskSection.razor.rz.scp.css */
/* Vertically stacked, whole-row-clickable options (legacy risk-option facit). The two-column layout
   (options | chart) is owned by KycSectionFrame's Aside slot (.kyc-section-split). */
.awb-risk-options[b-asbtdqt6ip] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.awb-risk-option[b-asbtdqt6ip] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rz-border, var(--line-strong));
    border-radius: 8px;
    background: var(--rz-base-background-color, #fff);
    cursor: pointer;
    line-height: 1.2;
}

.awb-risk-option:hover[b-asbtdqt6ip] {
    border-color: var(--rz-primary, var(--navy));
}

.awb-risk-option--selected[b-asbtdqt6ip] {
    border-color: var(--rz-primary, var(--navy));
    background: var(--rz-primary-lighter, var(--navy-dim));
    font-weight: 600;
}

.awb-risk-option__label[b-asbtdqt6ip] {
    user-select: none;
}
/* /Features/Kyc/Components/Sections/KnowledgeExperienceSection.razor.rz.scp.css */
/* Kunskap grid — CRM `.table` facit (_table.scss + `#kyc .knowledge` overrides in _customer-kyc.scss).
   Full-width, row-separator borders (no header shade), bold headers, left-aligned; the trades column
   right-aligned and the two checkbox columns centred. */
.awb-knowledge-grid[b-jgrrayepmk] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
}

.awb-knowledge-grid th[b-jgrrayepmk] {
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    padding: 6px 10px;
    padding-top: 7px;
}

.awb-knowledge-grid td[b-jgrrayepmk] {
    border-top: 1px solid var(--line);
    text-align: left;
    padding: 10px;
    vertical-align: middle;
}

.awb-knowledge-grid th.number-column[b-jgrrayepmk],
.awb-knowledge-grid td.number-column[b-jgrrayepmk] {
    text-align: right;
}

.awb-knowledge-grid th.center-column[b-jgrrayepmk],
.awb-knowledge-grid td.center-column[b-jgrrayepmk] {
    text-align: center;
}

/* Centre the checkbox within its centred cell (the <Checkbox> wrapper is inline-flex). */
.awb-knowledge-grid td.center-column[b-jgrrayepmk]  .awb-checkbox {
    justify-content: center;
}

/* Hide the RadzenNumeric spinner buttons (legacy hides them for every `#kyc input[type=number]`).
   ::deep reaches the Radzen-rendered buttons, which carry no scope attribute. */
.awb-knowledge-grid[b-jgrrayepmk]  .rz-numeric-up,
.awb-knowledge-grid[b-jgrrayepmk]  .rz-numeric-down {
    display: none;
}
/* /Features/Kyc/Components/Sections/MoneyLaunderingSection.razor.rz.scp.css */
/* Penningtvätt — air between the question groups. 16px between fields, matching the CRM facit
   (`.kyc-form-row` gap) that the rest of the KYC sections use via `.kyc-section-fields`. A flex column
   so the gap can't collapse the way stacked block margins would. */
.awb-aml-questions[b-45pc2uo5fx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* /Features/Kyc/Components/Sections/PepSection.razor.rz.scp.css */
/* The PEP prompt and its two explanatory paragraphs (legacy MoneyLaunderingQuestions.js:539-561).
   Legacy renders them as the radio group's description block, so they read as running text above the
   Ja/Nej pair rather than as a field label. */

.awb-pep-question[b-0cj7t9tz7v] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.awb-pep-note[b-0cj7t9tz7v] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    opacity: 0.85;
}

/* Legacy caps the WHOLE option-list block — description, mini-note and options together — at the
   one form measure (`.Cob-OptionsList { max-width: 480px }`, _OptionsList.scss:24-26; the PEP prompt
   is that block's `description`, MoneyLaunderingQuestions.js:539-561). The Ja/Nej pair below is a
   FormField and is capped by FormField.razor.css; these two paragraphs are not, so they take the same
   token here rather than a width pasted per paragraph. */
.awb-pep-question[b-0cj7t9tz7v],
.awb-pep-note[b-0cj7t9tz7v] {
    max-width: var(--awb-cob-field-max, 480px);
}
/* /Features/Kyc/Components/Sections/RiskProjectionChart.razor.rz.scp.css */
/* Portföljprojektion sub-section — legacy CRM `.risk-chart` facit
   (client/src/style/components/_risk-projection-chart.scss). Grey outer card holding a white
   chart box, a white 2-column info grid, and a white note box. */
.awb-risk-chart[b-nw1qtgwgbs] {
    background: var(--snow);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.awb-risk-chart__title[b-nw1qtgwgbs] {
    margin: 0 0 16px;
    color: var(--coal);
    font-size: 16px;
    font-weight: 600;
}

.awb-risk-chart__canvas[b-nw1qtgwgbs] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 20px;
    height: 400px;
}

/* The Radzen chart fills its white box (legacy's chart-container height:400px). */
.awb-risk-chart__canvas[b-nw1qtgwgbs]  .rz-chart,
.awb-risk-chart__canvas[b-nw1qtgwgbs]  .rz-chart > div {
    width: 100%;
    height: 100%;
}

/* Info panel — white box, two-column grid (legacy `.chart-info`). */
.awb-risk-chart__info[b-nw1qtgwgbs] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.awb-risk-chart__info-row[b-nw1qtgwgbs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 8px 0;
}

.awb-risk-chart__info-label[b-nw1qtgwgbs] {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

.awb-risk-chart__info-value[b-nw1qtgwgbs] {
    font-size: 14px;
    color: var(--coal);
    font-weight: 600;
}

/* Note — its own white box (legacy `.chart-legend`). */
.awb-risk-chart__note[b-nw1qtgwgbs] {
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.awb-risk-chart-placeholder[b-nw1qtgwgbs] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--snow);
    border: 2px dashed var(--line-strong);
    border-radius: 8px;
    padding: 60px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}
/* /Features/Kyc/Components/Sections/SavingsProfileSection.razor.rz.scp.css */
/* Sparprofil layout — CRM facit (_customer-kyc.scss `.kyc-form-row`, _customer-kyc-savings-profile.scss).
   Fields sit side by side in rows (a semi-grid) rather than stacked; amount inputs carry a "kr" suffix,
   have no spinner buttons, and the risk-allocation table has borders + a shaded header. */

.kyc-form-row[b-zwekphypbz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Each field in a row takes the CRM's fixed field width so the row reads as columns, not full-bleed
   controls. Wraps on narrow viewports. */
.kyc-form-row > .awb-form-field[b-zwekphypbz] {
    flex: 0 1 240px;
}

@media (max-width: 720px) {
    .kyc-form-row[b-zwekphypbz] {
        flex-direction: column;
    }

    .kyc-form-row > .awb-form-field[b-zwekphypbz] {
        flex-basis: auto;
        width: 100%;
    }
}

/* Hide the RadzenNumeric spinner buttons (CRM uses plain text-style number inputs). ::deep reaches the
   Radzen-rendered buttons, which carry no scope attribute. */
.kyc-form-row[b-zwekphypbz]  .rz-numeric-up,
.kyc-form-row[b-zwekphypbz]  .rz-numeric-down,
.risk-allocation-table[b-zwekphypbz]  .rz-numeric-up,
.risk-allocation-table[b-zwekphypbz]  .rz-numeric-down {
    display: none;
}

/* With the spinner gone the "kr" suffix no longer needs to clear it — pull it back to the field edge
   and drop the reserved padding the UnitInside default left for the buttons. */
.kyc-form-row[b-zwekphypbz]  .awb-number-input--unit-inside .awb-number-input__unit,
.risk-allocation-table[b-zwekphypbz]  .awb-number-input--unit-inside .awb-number-input__unit {
    inset-inline-end: 0.75rem;
}

.kyc-form-row[b-zwekphypbz]  .awb-number-input--unit-inside .rz-numeric input,
.risk-allocation-table[b-zwekphypbz]  .awb-number-input--unit-inside .rz-numeric input {
    padding-inline-end: 2rem;
}

/* Risk-allocation grid — borders + shaded header (CRM `.risk-allocation-table`). */
.risk-allocation-table[b-zwekphypbz] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--line-strong);
}

.risk-allocation-table thead tr[b-zwekphypbz] {
    background-color: var(--snow);
}

.risk-allocation-table th[b-zwekphypbz] {
    padding: 10px;
    border: 1px solid var(--line-strong);
    text-align: left;
}

.risk-allocation-table tbody td[b-zwekphypbz] {
    border: 1px solid var(--line-strong);
}

.risk-allocation-table .risk-cell[b-zwekphypbz] {
    padding: 10px;
    font-weight: bold;
    vertical-align: middle;
}

.risk-allocation-table .input-cell[b-zwekphypbz] {
    padding: 5px;
}

.awb-muted[b-zwekphypbz] {
    color: var(--rz-text-secondary-color, var(--muted));
}
/* /Features/Messaging/Components/CustomerThreadView.razor.rz.scp.css */
/* Message history stack (FR-UI-MSG-040, legacy addeqt-crm Thread.jsx): one full-width white Card per
   message, all the same width. The Card supplies the flat white surface (borderless, like everywhere
   else); the wrapper only carries the advisor/customer accent and the spacing between cards. */
.awb-thread-history[b-48ka4hisn5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

/* Advisor (outgoing) vs customer (incoming): a coloured left edge distinguishes the two sides without
   changing the card width or breaking the consistent full-width column. The Card stays borderless
   (matching the flat Card surface used everywhere else); only the accent edge is added here. */
.awb-thread-message--customer[b-48ka4hisn5]  .awb-card {
    border-left: 4px solid var(--awb-info-soft-text, var(--navy));
}

.awb-thread-message-header[b-48ka4hisn5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

/* Message title: bold, prominent (legacy h3), on the same row as the date. */
.awb-thread-message-title[b-48ka4hisn5] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.awb-thread-message-time[b-48ka4hisn5] {
    color: var(--rz-text-secondary-color, var(--muted));
    font-size: 0.9rem;
    white-space: nowrap;
}

.awb-thread-message-sender[b-48ka4hisn5],
.awb-thread-message-branding[b-48ka4hisn5] {
    font-size: 0.9rem;
}

/* Gap before the body (legacy leaves a blank line between the branding line and the message text). */
.awb-thread-message-body[b-48ka4hisn5] {
    margin-top: 1rem;
    white-space: pre-line;
}

.awb-thread-attachments[b-48ka4hisn5] {
    margin-top: 1rem;
    border-top: 1px solid var(--rz-base-300, var(--line));
    padding-top: 0.5rem;
}

.awb-thread-attachments-label[b-48ka4hisn5] {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.awb-thread-attachment-list[b-48ka4hisn5] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.awb-thread-needs-handling[b-48ka4hisn5] {
    margin-bottom: 0.75rem;
}
/* /Features/Messaging/Components/EmailPreview.razor.rz.scp.css */
/* Ported from legacy MessageForm.scss (.email-preview*). Renders the branded email as the customer
   will receive it. */
.email-preview[b-8htysvt031] {
    padding: 20px 5%;
}

.email-preview p[b-8htysvt031] {
    margin: 0;
    padding: 0;
}

.email-preview--standard[b-8htysvt031] {
    background-color: rgb(247, 247, 247);
}

.email-preview__body[b-8htysvt031] {
    margin: 20px 0;
    line-height: 1.6;
}

.email-preview__p[b-8htysvt031] {
    padding-top: 15px;
}

.email-preview__contacts[b-8htysvt031] {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.email-preview__contact-block[b-8htysvt031] {
    min-width: 250px;
}

.email-preview__company-name[b-8htysvt031] {
    padding-top: 15px;
    font-size: 18px;
}

.email-preview__logo[b-8htysvt031] {
    display: block;
    height: 68px;
    margin-top: 24px;
}

.email-preview__footer[b-8htysvt031] {
    font-size: 14px;
}

.email-preview__footer--first[b-8htysvt031] {
    padding-top: 25px;
}

.email-preview__footer-logo[b-8htysvt031] {
    margin-top: 20px;
}
/* /Features/Messaging/Components/MessageForm.razor.rz.scp.css */
/* Legacy MessageForm.jsx is a single vertical column: Titel, Meddelande, attachments,
   Email konfiguration (Ämne + Text) — one field per row, full width. RadzenFormField defaults
   to inline-flex, so without this the fields flow side-by-side and wrap (the reported bug). */
.awb-message-form[b-4h70q20ikw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each RadzenFormField must fill the row, not shrink to content width. ::deep because the
   field element is a child component (scoped CSS otherwise misses it). */
.awb-message-form[b-4h70q20ikw]  .awb-message-form-field {
    width: 100%;
}

/* The "Bifoga fil" button + an invisible native file input laid over it, so a click on the button
   opens the OS file picker (a nested <button> in a <label> does not forward the click). align-items
   keeps the overlay sized to the button, not the row. */
.awb-message-attachment-picker[b-4h70q20ikw] {
    position: relative;
    display: inline-flex;
}

/* ::deep — InputFile is a framework component; its rendered <input> is outside this component's scope. */
.awb-message-attachment-picker[b-4h70q20ikw]  .awb-message-attachment-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.awb-message-form-attachments[b-4h70q20ikw],
.awb-message-email-section[b-4h70q20ikw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Keep the picker (and its input overlay) sized to the button, not stretched to the row width. */
.awb-message-form-attachments[b-4h70q20ikw] {
    align-items: flex-start;
}

/* ...but the attachment list still spans the full row. */
.awb-message-attachment-list[b-4h70q20ikw] {
    align-self: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.awb-message-email-fields[b-4h70q20ikw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--rz-base-300, var(--line));
    border-top: none;
}

/* Collapsible "Email konfiguration" header (legacy email-section-toggle) — a full-width bar with a
   chevron that rotates when open. Replaces the checkbox that caused the reported layout mismatch. */
.awb-message-email-toggle[b-4h70q20ikw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300, var(--line));
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    color: inherit;
    text-align: left;
}

.awb-message-email-toggle--open[b-4h70q20ikw] {
    border-radius: 4px 4px 0 0;
}

.awb-message-email-chevron[b-4h70q20ikw] {
    transition: transform 0.15s ease;
}

.awb-message-email-toggle--open .awb-message-email-chevron[b-4h70q20ikw] {
    transform: rotate(180deg);
}

.awb-message-email-preview-label[b-4h70q20ikw] {
    font-size: 0.875rem;
    font-weight: 600;
}
/* /Features/Migration/Pages/LegacyMigration.razor.rz.scp.css */
.migration-report[b-hd0g3x7daw],
.migration-identities[b-hd0g3x7daw] {
    margin: 0;
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.migration-report[b-hd0g3x7daw] {
    max-height: 32rem;
    overflow: auto;
    padding: 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    background: var(--rz-base-50);
}

.migration-report-heading[b-hd0g3x7daw] {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
}

.migration-error[b-hd0g3x7daw] {
    color: var(--rz-danger);
}

.migration-error-detail summary[b-hd0g3x7daw] {
    cursor: pointer;
}

.migration-error-detail pre[b-hd0g3x7daw] {
    margin-top: 0.5rem;
    white-space: pre-wrap;
}
/* /Features/Notes/Components/AddNoteDialog.razor.rz.scp.css */
.awb-add-note-dialog[b-jd96ndsrq4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Features/Notes/Components/CustomerActivityLogCard.razor.rz.scp.css */
/* Händelser timeline (FR-UI-NOTE-010). Palette + layout mirror notes-activities.html. Badge colours
   override the Common/UI Badge variant, so !important is required (global stylesheet precedence). */

.awb-timeline[b-g9pcb56v2j] {
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 8px;
}

.awb-timeline[b-g9pcb56v2j]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--line-strong);
}

.awb-timeline-content[b-g9pcb56v2j]{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 .5px 1.3px rgba(0, 0, 0, .064), 0 1.6px 4.5px rgba(0, 0, 0, .048), 0 7px 12px rgba(0, 0, 0, .064);
}
.awb-timeline-item[b-g9pcb56v2j] {
    position: relative;
    padding: 0 0 18px 40px;
}

.awb-timeline-dot[b-g9pcb56v2j] {
    position: absolute;
    left: 6px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--navy-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--navy);
}

.awb-timeline-head[b-g9pcb56v2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.awb-timeline-author[b-g9pcb56v2j] {
    font-weight: 600;
}

.awb-timeline-meta[b-g9pcb56v2j] {
    font-size: 12px;
    color: var(--muted);
    margin: 2px 0 4px;
}

.awb-timeline-subtype[b-g9pcb56v2j] {
    font-weight: 600;
    font-size: 12.5px;
}

.awb-timeline-body[b-g9pcb56v2j] {
    font-size: 13px;
    white-space: pre-wrap;
}

.awb-timeline-actions[b-g9pcb56v2j] {
    margin-top: 5px;
    font-size: 12px;
    display: flex;
    gap: 6px;
}

.awb-timeline-actions--none[b-g9pcb56v2j] {
    color: var(--muted);
}

.awb-timeline-showall[b-g9pcb56v2j] {
    text-align: center;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.awb-timeline-pager[b-g9pcb56v2j] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 4px 0;
    font-size: 12.5px;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

.awb-timeline-pager-current[b-g9pcb56v2j] {
    min-width: 44px;
    text-align: center;
}

[b-g9pcb56v2j] .awb-note-badge--note {
    background: var(--navy-dim) !important;
    color: var(--navy) !important;
}

[b-g9pcb56v2j] .awb-note-badge--activity {
    background: var(--gold-tint) !important;
    color: var(--coal) !important;
    border: 1px solid var(--gold-line) !important;
}

[b-g9pcb56v2j] .awb-note-badge--yearly {
    background: var(--amber-tint) !important;
    color: var(--amber-text) !important;
}

[b-g9pcb56v2j] .awb-note-badge--cob,
[b-g9pcb56v2j] .awb-note-badge--created {
    background: var(--snow-2) !important;
    color: var(--coal-dim) !important;
}

[b-g9pcb56v2j] .awb-note-badge--readonly {
    background: var(--snow-2) !important;
    color: var(--coal-dim) !important;
    font-size: 10px !important;
}
/* /Features/Notes/Pages/ActivityStatistics.razor.rz.scp.css */
/* Two-column layout mirroring the legacy CRM Statistics/Activities page:
   sticky filter sidebar + wide week-table column. */
.awb-statistics-layout[b-4ej26esz18] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 1.5rem 0 2.5rem;
}

.awb-statistics-sidebar[b-4ej26esz18] {
    flex: 0 0 16rem;
    position: sticky;
    top: 1.5rem;
}

.awb-statistics-content[b-4ej26esz18] {
    flex: 1 1 auto;
    min-width: 0;
}

.awb-statistics-section[b-4ej26esz18] {
    margin-bottom: 1rem;
}

.awb-statistics-section h3[b-4ej26esz18] {
    font-size: 18px;
    margin-top: 0; /* Radzen material theme sets a global h3 margin-top */
    margin-bottom: 4px;
}

.awb-statistics-select[b-4ej26esz18] {
    width: 100%;
}

.awb-statistics-weekcount[b-4ej26esz18] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.awb-statistics-advisors[b-4ej26esz18] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.awb-statistics-actions[b-4ej26esz18] {
    margin-top: 12px;
}

.awb-statistics-actions button[b-4ej26esz18] {
    display: block;
    background: none;
    cursor: pointer;
    border: 0;
    font: inherit;
    font-size: 12px;
    color: var(--muted);
    outline: none;
    margin: 3px 0;
    padding: 0;
}

.awb-statistics-actions button:hover[b-4ej26esz18] {
    color: currentColor;
}

/* Week card — matches the legacy white box + soft shadow. */
.awb-statistics-week[b-4ej26esz18] {
    background: #fff;
    box-shadow:
        0 0.5px 1.3px rgba(0, 0, 0, 0.064),
        0 1.6px 4.5px rgba(0, 0, 0, 0.048),
        0 7px 12px rgba(0, 0, 0, 0.064);
    padding: 24px 30px 30px;
    border-radius: 4px;
}

.awb-statistics-week + .awb-statistics-week[b-4ej26esz18] {
    margin-top: 20px;
}

.awb-statistics-week h1[b-4ej26esz18] {
    font-size: 22px;
    margin: 0 0 12px;
}

.awb-statistics-table-scroll[b-4ej26esz18] {
    overflow-x: auto;
}

.awb-statistics-table[b-4ej26esz18] {
    width: 100%;
    border-collapse: collapse;
}

.awb-statistics-table th[b-4ej26esz18],
.awb-statistics-table td[b-4ej26esz18] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rz-border, var(--line));
    white-space: nowrap;
}

.awb-statistics-table th[b-4ej26esz18] {
    font-size: 13px;
    font-weight: 400;
}

.awb-statistics-table .awb-statistics-name-col[b-4ej26esz18] {
    font-weight: 700;
}
/* /Features/Notes/Pages/Compliance.razor.rz.scp.css */
.awb-compliance-breach-list[b-gqibwl4p6t] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.awb-compliance-breach-list li + li[b-gqibwl4p6t] {
    margin-top: 0.25rem;
}
/* /Features/PepScreening/Components/PepAllaTab.razor.rz.scp.css */
.awb-pep-export-field[b-1h4ifh623i] {
    margin-left: auto;
}
/* /Features/PepScreening/Components/PepHistoriskaTab.razor.rz.scp.css */
.awb-pep-filter-input[b-uu8prwrwzn] {
    min-width: 14rem;
}

.awb-pep-export-field[b-uu8prwrwzn] {
    margin-left: auto;
}
/* /Features/PepScreening/Components/PepMatchningarTab.razor.rz.scp.css */
/* BUG-3 (ROUND 3): the "Visning" toggle normal-case rule that used to live here
   (`::deep .rz-selectbar .rz-button { text-transform: none !important }`) has been DELETED and moved
   to the GLOBAL stylesheet (src/AdvisorWorkbench.Web/wwwroot/app.css), keyed on the marker class
   `.awb-pep-visning` that now wraps the <RadzenSelectBar> in PepMatchningarTab.razor.

   Root cause (QA-confirmed in the running DOM): a `::deep` rule compiles to `[b-thisScope] <selector>`
   and only matches elements under an ancestor carrying THIS component's scope attribute. The Radzen
   select-bar's inner .rz-button elements render in a tree whose ancestor scope attributes differ from
   this component's, so the compiled selector never matched and `!important` was inert. A GLOBAL rule
   scoped by the `.awb-pep-visning` marker class matches the Radzen DOM regardless of component
   boundaries while staying contained to this toggle — see app.css. */

.awb-pep-export-field[b-aq4re6dsow] {
    margin-left: auto;
}
/* /Features/PepScreening/Components/PepResultGrid.razor.rz.scp.css */
/* Match rows are visually emphasised so a hit never reads like a clean result (FR-UI-PEP-080). The
   Match "Ja" badge already carries the Danger tone; this deep-styles the badge marker class, which is
   rendered inside this component's markup, so the scope attribute reaches it. */
[b-lk6hf7ezcb] .awb-pep-match {
    font-weight: 600;
}

/* BUG-2 (ROUND 3): the match-row cell-emphasis rule that used to live here
   (`::deep tr:has(.awb-pep-match) > td { background ... !important }`) has been DELETED and moved to
   the GLOBAL stylesheet (src/AdvisorWorkbench.Web/wwwroot/app.css).

   Root cause (QA-confirmed in the running DOM): a `::deep` rule compiles to `[b-thisScope] <selector>`
   and only matches elements under an ancestor carrying THIS component's scope attribute. The Radzen
   grid rows render in a tree whose ancestor scope attributes differ from this component's, so the
   compiled selector never matched and `!important` was inert. A GLOBAL rule has no `[bScope]` prefix
   and matches the Radzen DOM regardless of component boundaries — see app.css. */
/* /Features/Regelbok/Components/RegelbokLayout.razor.rz.scp.css */
.rb-layout[b-acnhl0ak3p] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.rb-tree-column[b-acnhl0ak3p],
.rb-main[b-acnhl0ak3p] {
    min-width: 0;
}

/* Below ~900px the 300px tree beside the content overflows the page: stack the tree above it. */
@media (max-width: 900px) {
    .rb-layout[b-acnhl0ak3p] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Regelbok/Components/RegelbokPageView.razor.rz.scp.css */
.rb-crumbs[b-xvi2a1vxx7] {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--muted);
}

.rb-page-title[b-xvi2a1vxx7] {
    margin: 0;
    font-family: var(--font-display);
    overflow-wrap: anywhere;
    font-size: 20px;
    font-weight: 600;
}

.rb-page-meta[b-xvi2a1vxx7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 6px 0 0.5rem;
    font-size: 12.5px;
    color: var(--muted);
}

/* Converted Confluence content. Only the converter's allowlisted tags and rb-* classes reach here. */
.rb-content[b-xvi2a1vxx7] {
    max-width: 860px;
    margin-top: 0.5rem;
    font-size: 14px;
    line-height: 1.6;
    color: var(--coal);
    overflow-wrap: anywhere;
}

.rb-content[b-xvi2a1vxx7]  h3,
.rb-content[b-xvi2a1vxx7]  h4,
.rb-content[b-xvi2a1vxx7]  h5,
.rb-content[b-xvi2a1vxx7]  h6 { font-family: var(--font-display); color: var(--coal); }
.rb-content[b-xvi2a1vxx7]  a { color: var(--navy); }
.rb-content[b-xvi2a1vxx7]  h3 { font-size: 17px; font-weight: 600; margin: 22px 0 8px; }
.rb-content[b-xvi2a1vxx7]  h4 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
.rb-content[b-xvi2a1vxx7]  h5,
.rb-content[b-xvi2a1vxx7]  h6 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.rb-content[b-xvi2a1vxx7]  > :first-child { margin-top: 0; }

.rb-content[b-xvi2a1vxx7]  p { margin: 0 0 10px; }
.rb-content[b-xvi2a1vxx7]  ul,
.rb-content[b-xvi2a1vxx7]  ol { margin: 0 0 12px 22px; padding: 0; }
.rb-content[b-xvi2a1vxx7]  li { margin: 2px 0; }
.rb-content[b-xvi2a1vxx7]  li > p { margin: 0; }
.rb-content[b-xvi2a1vxx7]  pre {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--snow);
    overflow-x: auto;
    white-space: pre-wrap;
}

.rb-content[b-xvi2a1vxx7]  .rb-table-wrap { overflow-x: auto; margin: 6px 0 14px; }
.rb-content[b-xvi2a1vxx7]  table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rb-content[b-xvi2a1vxx7]  th,
.rb-content[b-xvi2a1vxx7]  td {
    border: 1px solid var(--line-strong);
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}
.rb-content[b-xvi2a1vxx7]  th { background: var(--snow); font-weight: 600; }
.rb-content[b-xvi2a1vxx7]  td > p:last-child,
.rb-content[b-xvi2a1vxx7]  th > p:last-child { margin-bottom: 0; }

/* Confluence panels as Workbench notices (mockup decision 6), not Confluence's own colours. */
.rb-content[b-xvi2a1vxx7]  .rb-panel {
    position: relative;
    margin: 10px 0 14px;
    padding: 10px 14px 10px 40px;
    border: 1px solid var(--navy-line);
    border-radius: var(--awb-notice-radius, 8px);
    background: var(--navy-dim);
    font-size: 13.5px;
}
.rb-content[b-xvi2a1vxx7]  .rb-panel::before {
    position: absolute;
    left: 14px;
    top: 10px;
    font-weight: 700;
    content: "ℹ";
    color: var(--navy);
}
.rb-content[b-xvi2a1vxx7]  .rb-panel > :last-child { margin-bottom: 0; }
.rb-content[b-xvi2a1vxx7]  .rb-panel--note {
    border-color: var(--gold-line);
    background: var(--gold-tint);
}
.rb-content[b-xvi2a1vxx7]  .rb-panel--note::before { content: "✎"; color: var(--coal); }
.rb-content[b-xvi2a1vxx7]  .rb-panel--tip {
    border-color: var(--green-line);
    background: var(--green-tint);
}
.rb-content[b-xvi2a1vxx7]  .rb-panel--tip::before { content: "✓"; color: var(--green-text); }
.rb-content[b-xvi2a1vxx7]  .rb-panel--warning {
    border-color: var(--amber-line);
    background: var(--amber-tint);
}
.rb-content[b-xvi2a1vxx7]  .rb-panel--warning::before { content: "!"; color: var(--amber-text); }
.rb-content[b-xvi2a1vxx7]  .rb-panel--neutral {
    padding-left: 14px;
    border-color: var(--line);
    background: var(--snow);
}
.rb-content[b-xvi2a1vxx7]  .rb-panel--neutral::before { content: none; }
.rb-content[b-xvi2a1vxx7]  .rb-panel-title { margin-bottom: 4px; }

.rb-content[b-xvi2a1vxx7]  details {
    margin: 10px 0 14px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.rb-content[b-xvi2a1vxx7]  summary {
    padding: 8px 0;
    font-weight: 500;
    color: var(--navy);
    cursor: pointer;
}
.rb-content[b-xvi2a1vxx7]  details[open] { padding-bottom: 10px; }

.rb-content[b-xvi2a1vxx7]  .rb-figure { margin: 8px 0 14px; }
.rb-content[b-xvi2a1vxx7]  img { max-width: 100%; height: auto; }
.rb-content[b-xvi2a1vxx7]  figcaption {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

/* Macros that only work in Confluence: a dashed grey box in place (mockup decision 7). */
.rb-content[b-xvi2a1vxx7]  .rb-unsupported {
    position: relative;
    margin: 10px 0 14px;
    padding: 12px 14px 12px 38px;
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
    background: var(--snow);
    font-size: 13px;
    color: var(--coal-dim);
}

.rb-content[b-xvi2a1vxx7]  .rb-unsupported::before {
    position: absolute;
    left: 14px;
    top: 12px;
    content: "⧉";
}

/* External links open in a new tab and say so; internal links look like ordinary links. */
.rb-content[b-xvi2a1vxx7]  .rb-external::after {
    content: " ↗";
    font-size: 11px;
}

.rb-content[b-xvi2a1vxx7]  .rb-attachment a {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--snow);
    font-size: 12.5px;
}
.rb-content[b-xvi2a1vxx7]  .rb-attachment a::before { content: "📎"; }
/* /Features/Regelbok/Components/RegelbokSearchBox.razor.rz.scp.css */
.rb-search[b-dcj8vva890] {
    display: flex;
    gap: 8px;
    max-width: 620px;
    margin-bottom: 1rem;
}

.rb-search-field[b-dcj8vva890] {
    flex: 1;
}
/* /Features/Regelbok/Components/RegelbokSearchResults.razor.rz.scp.css */
/* The card has no padding of its own here: header and hit rows span its full width. */
.rb-results[b-8onupirh6l]  .awb-card {
    padding: 0;
}

.rb-results[b-8onupirh6l]  .awb-card-body {
    gap: 0;
}

.rb-results-empty[b-8onupirh6l] {
    padding: 1rem;
}

.rb-results-count[b-8onupirh6l] {
    margin: 0;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    font-weight: 600;
}

.rb-hits[b-8onupirh6l] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rb-hit[b-8onupirh6l] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}

.rb-hit:last-child[b-8onupirh6l] {
    border-bottom: 0;
}

.rb-hit-title[b-8onupirh6l] {
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
}

.rb-hit-title:hover[b-8onupirh6l] {
    text-decoration: underline;
}

.rb-hit-location[b-8onupirh6l] {
    margin: 2px 0 4px;
    font-size: 12px;
    color: var(--muted);
}

.rb-hit-excerpt[b-8onupirh6l] {
    margin: 0;
    font-size: 13px;
    color: var(--coal-dim);
}

.rb-hit-excerpt mark[b-8onupirh6l] {
    padding: 0 1px;
    border-radius: 2px;
    background: var(--amber-tint);
    color: inherit;
}
/* /Features/Regelbok/Components/RegelbokSkeleton.razor.rz.scp.css */
.rb-skeleton[b-qpeytb14a4] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* Same breakpoint as RegelbokLayout: tree above the content on narrow screens. */
@media (max-width: 900px) {
    .rb-skeleton[b-qpeytb14a4] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rb-skeleton-card[b-qpeytb14a4] {
    padding: 1rem;
    border-radius: 4px;
    background: var(--white);
}

.rb-skeleton-line[b-qpeytb14a4] {
    height: 12px;
    margin: 9px 0;
    border-radius: 4px;
    background: var(--snow-2);
}

.rb-skeleton-line--title[b-qpeytb14a4] { height: 18px; }
.rb-skeleton-line--gap[b-qpeytb14a4] { margin-top: 20px; }
.rb-skeleton-line--indent1[b-qpeytb14a4] { margin-left: 16px; }
.rb-skeleton-line--indent2[b-qpeytb14a4] { margin-left: 32px; }
.rb-skeleton-line--30[b-qpeytb14a4] { width: 30%; }
.rb-skeleton-line--40[b-qpeytb14a4] { width: 40%; }
.rb-skeleton-line--55[b-qpeytb14a4] { width: 55%; }
.rb-skeleton-line--60[b-qpeytb14a4] { width: 60%; }
.rb-skeleton-line--65[b-qpeytb14a4] { width: 65%; }
.rb-skeleton-line--70[b-qpeytb14a4] { width: 70%; }
.rb-skeleton-line--80[b-qpeytb14a4] { width: 80%; }
.rb-skeleton-line--90[b-qpeytb14a4] { width: 90%; }
.rb-skeleton-line--95[b-qpeytb14a4] { width: 95%; }
/* /Features/Regelbok/Components/RegelbokTree.razor.rz.scp.css */
/* The tree is a card whose rows run edge to edge (mockup .card.tree): the card keeps only a
   vertical padding, the rows carry their own horizontal one. */
.rb-tree-card[b-dtf2npah42]  .awb-card {
    padding: 8px 0;
}

.rb-tree[b-dtf2npah42] {
    font-size: 13px;
    max-height: calc(100vh - 12rem);
    overflow: auto;
}

/* Stacked above the content (RegelbokLayout below 900px): keep the tree from pushing the page far down. */
@media (max-width: 900px) {
    .rb-tree[b-dtf2npah42] {
        max-height: 40vh;
    }
}
/* /Features/Regelbok/Components/RegelbokTreeBranch.razor.rz.scp.css */
.rb-tree-list[b-ooc4qcjku6] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rb-tree-row[b-ooc4qcjku6] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 12px 5px calc(12px + var(--rb-depth, 0) * 16px);
    line-height: 1.35;
}

.rb-tree-row:hover[b-ooc4qcjku6] {
    background: var(--navy-dim);
}

.rb-tree-row--current[b-ooc4qcjku6] {
    background: var(--navy-dim);
    box-shadow: inset 3px 0 0 var(--navy);
    font-weight: 600;
}

.rb-tree-toggle[b-ooc4qcjku6] {
    flex: 0 0 14px;
    width: 14px;
    padding: 3px 0 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

span.rb-tree-toggle[b-ooc4qcjku6] {
    cursor: default;
}

.rb-tree-link[b-ooc4qcjku6] {
    color: var(--coal);
    text-decoration: none;
}

.rb-tree-row--current .rb-tree-link[b-ooc4qcjku6] {
    color: var(--navy);
}

.rb-tree-link:hover[b-ooc4qcjku6] {
    text-decoration: underline;
}
/* /Features/Regelbok/Pages/RegelbokPage.razor.rz.scp.css */
.rb-stack[b-94qz6wn6el] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* /Features/Reports/Components/CreateReportDialog.razor.rz.scp.css */
/* Rapportera ny affär dialog spacing. Layout only. */
.awb-create-report-dialog[b-tg3ujbmxb2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.awb-create-report-text[b-tg3ujbmxb2] {
    margin: 0;
}
/* /Features/Reports/Components/OwnTradeEditDialog.razor.rz.scp.css */
/* FR-UI-APP-180: standard form field-stack vertical rhythm (ContactEditDialog is the reference). */
.awb-own-trade-dialog[b-kj8p6qcrmp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* DateInput's RadzenDatePicker wraps its <input> in a container carrying its own left inset; stacked
   on the input's padding it reads as a stray left indent next to the dropdown fields. Zero the
   wrapper's start padding so Handelsdatum lines up with Instrument/Typ. (NumberInput gets the same fix
   from the global `.awb-number-input` rule in app.css.) ::deep — Radzen roots carry no scope attr. */
.awb-own-trade-dialog[b-kj8p6qcrmp]  .rz-datepicker {
    padding-inline-start: 0;
}
/* /Features/Reports/Components/ReportItemEditDialog.razor.rz.scp.css */
/* FR-UI-APP-180 field-stack rhythm — same as the sibling dialogs (ContactEditDialog). */
.awb-report-item-dialog[b-zb12cquscw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awb-report-item-input[b-zb12cquscw] {
    width: 100%;
}
/* /Features/Reports/Components/ReportStatePanel.razor.rz.scp.css */
/* State-panel transition buttons: laid out in a row with spacing. Layout only. */
.awb-report-state-panel[b-q2zt5o85f4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
/* /Features/Reports/Components/ReportSummary.razor.rz.scp.css */
/* Summering rows: label left, value right. Layout only. */
.awb-report-summary[b-0lpxe5k93r] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.awb-report-summary-item[b-0lpxe5k93r] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.awb-report-summary-value[b-0lpxe5k93r] {
    font-weight: 600;
}
/* /Features/Reports/Pages/ReportDetailPage.razor.rz.scp.css */
/* Report detail layout. Scoped so the three summary/creator/customer cards sit side by side and the
   read-only item grid + summary read cleanly. Kept to layout only; colours/typography come from the
   design system. */

.awb-report-detail-cards[b-vtc58ocjiv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .awb-report-detail-cards[b-vtc58ocjiv] {
        grid-template-columns: 1fr;
    }
}

.awb-report-info p[b-vtc58ocjiv],
.awb-report-customer p[b-vtc58ocjiv] {
    margin: 0 0 0.35rem;
}

.awb-report-customer-name[b-vtc58ocjiv] {
    font-weight: 600;
}
/* /Features/Reports/Pages/ReportsListPage.razor.rz.scp.css */
/* Affärsrapporter list: give the status filter a sensible width. Layout only. */
.awb-report-filter-input[b-hgld8058aj] {
    min-width: 220px;
}
/* /Features/Signing/Pages/OperationsSigningQueuePage.razor.rz.scp.css */
.awb-ops-queue[b-5zdna3p63o]  .rz-grid-table thead th .rz-column-title {
    padding-inline-start: 0;
}

.awb-ops-actions[b-5zdna3p63o] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

/* Below this width the grid scrolls horizontally inside its card instead of clipping. */
.awb-ops-queue[b-5zdna3p63o]  .rz-grid-table {
    min-width: 1000px;
}

.awb-ops-comment[b-5zdna3p63o] {
    display: block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Features/Signing/SendSigningReminderDialog.razor.rz.scp.css */
/* FR-UI-APP-180 — the standard form field-stack rhythm (ContactEditDialog is the reference). */
.awb-send-reminder-dialog[b-t7bj6v3adi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awb-send-reminder-party[b-t7bj6v3adi] {
    margin: 0;
    font-weight: 600;
}
/* /Features/Signing/SigningDispatchDialog.razor.rz.scp.css */
.awb-signing-dispatch-dialog[b-0yhf1nwu99] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.awb-signing-dispatch-natregno[b-0yhf1nwu99],
.awb-signing-dispatch-value[b-0yhf1nwu99] {
    display: inline-block;
    padding: 0.375rem 0;
}
/* /Features/Signing/SigningStatusPanel.razor.rz.scp.css */
.awb-signing-status-panel[b-23fiticdww] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.awb-signing-status-summary[b-23fiticdww] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.awb-signing-status-dispatch[b-23fiticdww] {
    color: #4b5563;
}

.awb-signing-status-parties[b-23fiticdww] {
    width: 100%;
    border-collapse: collapse;
}

.awb-signing-status-parties th[b-23fiticdww],
.awb-signing-status-parties td[b-23fiticdww] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eceef1;
    vertical-align: middle;
}

.awb-signing-status-link[b-23fiticdww] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.awb-signing-status-qr[b-23fiticdww] {
    padding-top: 0.5rem;
}

.awb-signing-status-signer[b-23fiticdww] {
    display: block;
    color: var(--rz-text-secondary-color, #6c757d);
}
/* /Features/Signing/SigningStep.razor.rz.scp.css */
/* CRM-334 — the "Markera alla" row above the checklist; the list's own gap does not reach a sibling. */
.awb-signing-consents-actions[b-odxp5d2cvk] {
    margin-bottom: 0.75rem;
}

.awb-signing-consents[b-odxp5d2cvk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.awb-signing-consent[b-odxp5d2cvk] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.5;
}

.awb-signing-consent-text[b-odxp5d2cvk] {
    color: #1e2735;
}

.awb-signing-package[b-odxp5d2cvk] {
    width: 100%;
    border-collapse: collapse;
}

.awb-signing-package th[b-odxp5d2cvk],
.awb-signing-package td[b-odxp5d2cvk] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eceef1;
    vertical-align: middle;
}

.awb-signing-package-title[b-odxp5d2cvk] {
    font-weight: 600;
}

.awb-signing-actions[b-odxp5d2cvk] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.awb-signing-gate-hint[b-odxp5d2cvk] {
    color: #96231d;
    font-size: 0.8125rem;
    text-align: right;
    margin: 0.375rem 0 0;
}

.awb-signing-generate[b-odxp5d2cvk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.awb-signing-generate-status[b-odxp5d2cvk] {
    color: #4a5566;
    font-size: 0.8125rem;
}