/* ============================================================================
   AWB BUTTON LOOK — port of the bfs2nordnet FINA-197 UI refresh (D11).

   Source of truth (reference, not copied verbatim):
     bfs2nordnet/Bfs2NordnetWeb/wwwroot/css/ui-components.css  (.app-btn* rules)
     bfs2nordnet/Bfs2NordnetWeb/wwwroot/css/design-tokens.css  (palette, radius, shadows)
   on branch feature/FINA-181-overlapping-stock-portfolios (b5a675f + 403a6a5).

   WHY GLOBAL, NOT SCOPED (D11): Blazor scoped CSS does not propagate its scope
   attribute into a sub-component's markup, and Common/UI/Button.razor renders a
   <RadzenButton> internally — a rule in Button.razor.css therefore never reaches
   the real <button> element without `::deep`, and `::deep` still only matches
   inside that one component's scope. bfs2nordnet reached the same conclusion and
   documented it in its own Button.razor.css.

   WHY A SEPARATE FILE, NOT app.css (D11): app.css is an append-at-EOF merge
   hotspot between parallel branches. Linked from Components/App.razor next to
   app.css.

   WHY IT KEYS ON THE RADZEN CLASSES: AWB's <Button> public API is unchanged — it
   still takes Radzen's ButtonStyle / Variant / Size (D11: adopting bfs2nordnet's
   own ButtonVariant/AppButtonSize enums would churn every call site for zero
   visual gain). So the new look is mapped onto what Radzen actually emits:

       .rz-button .rz-button-{xs,sm,md,lg}
       .rz-variant-{filled,flat,outlined,text}
       .rz-{primary,secondary,light,base,dark,success,danger,warning,info}
       .rz-shade-default   (always present)
       .rz-button-icon-only  (Icon with no Text)

   Verified against Radzen.Blazor 11.1.0 by rendering the full ButtonStyle x
   Variant x Size matrix through bUnit and reading the emitted class attribute.
   RadzenButtonMarkupContractTests pins those class names so a Radzen upgrade
   that renames them fails a test instead of silently reverting this design.

   COLOUR = ButtonStyle.  FILL TREATMENT = Variant (Filled/Flat solid, Outlined
   hairline, Text bare). bfs2nordnet's nine .app-btn--* variants are the cells of
   that matrix; the remaining cells are derived consistently from the same tokens.

   EVERYTHING IS SCOPED UNDER `.awb-button` — the wrapper span emitted by
   Common/UI/Button.razor. A bare `.rz-button` rule would also hit Radzen's
   pagers, select-bars, date pickers, file uploads and grid internals.

   `!important` IS USED ONLY ON COLOUR AND box-shadow. Radzen's material theme
   paints the palette from four-class selectors
   (`.rz-button.rz-variant-outlined.rz-primary.rz-shade-default`) and draws the
   outlined border as an inset box-shadow, so those declarations have to be beaten
   outright rather than relying on stylesheet order. Geometry and typography need
   no `!important`: Radzen sets them on single-class selectors (`.rz-button-md`),
   which `.awb-button > .rz-button-md` outranks. Keeping geometry un-important is
   deliberate — it lets a page's own scoped rule (the BankID pill in
   Login.razor.css, the top-bar hamburger in AppTopBar.razor.css) keep its
   bespoke padding/radius without a fight.
   ============================================================================ */

:root {
    /* Brand profile (CRM-320): every colour resolves to a token declared in app.css. The legacy COB
       wizard palette (--awb-cob-*) is deliberately NOT reused here. */
    --awb-btn-primary: var(--navy);
    --awb-btn-primary-hover: var(--navy-hover);
    --awb-btn-primary-active: var(--navy-press);
    --awb-btn-primary-tint: var(--navy-dim);
    --awb-btn-primary-line: var(--navy-line);

    --awb-btn-success: var(--green-text);
    --awb-btn-success-tint: var(--green-tint);
    --awb-btn-warning: var(--amber-text);
    --awb-btn-warning-tint: var(--amber-tint);
    --awb-btn-danger: var(--red);
    --awb-btn-danger-tint: var(--red-tint);
    --awb-btn-info: var(--navy);
    --awb-btn-info-tint: var(--navy-dim);
    --awb-btn-dark: var(--coal);

    /* Neutrals */
    --awb-btn-text: var(--coal-dim);
    --awb-btn-text-muted: var(--muted);
    --awb-btn-on-fill: #ffffff;
    --awb-btn-border: var(--line-strong);
    --awb-btn-border-strong: rgba(17, 24, 39, 0.24);
    --awb-btn-surface: var(--white);
    --awb-btn-surface-subtle: var(--snow);
    --awb-btn-surface-muted: var(--snow-2);

    /* Shape, depth, motion */
    --awb-btn-radius: var(--radius-sm);
    --awb-btn-shadow-rest: 0 1px 2px rgb(20 30 50 / 5%);
    --awb-btn-shadow-hover: 0 1px 3px rgb(20 30 50 / 8%), 0 1px 2px rgb(20 30 50 / 6%);
    --awb-btn-transition: 150ms ease;
    --awb-btn-font-weight: 500;
    --awb-btn-disabled-opacity: 0.55;

    /* Focus ring. Radzen's material theme sets `--rz-outline-normal: none`, so
       its `.rz-button:focus { outline: var(--rz-outline-normal) }` renders NO
       visible ring at all. This is not an outline we remove — it is one we add.
       Painted outside the button (offset) so it stays visible on both the navy
       filled buttons and the bare text buttons. */
    --awb-btn-focus-ring: var(--navy);
}

/* === Base ==================================================================
   Non-size properties only. Padding/font-size are per size class below, so a
   ButtonSize.Small button stays visually small — bfs2nordnet flattens all sizes
   to one padding, which would erase AWB's ~45 deliberately small grid-action
   buttons. */
.awb-button > .rz-button {
    border-radius: var(--awb-btn-radius);
    font-weight: var(--awb-btn-font-weight);
    text-transform: none;
    letter-spacing: normal;
    box-shadow: var(--awb-btn-shadow-rest);
    transition: background-color var(--awb-btn-transition),
                color var(--awb-btn-transition),
                border-color var(--awb-btn-transition),
                transform var(--awb-btn-transition),
                box-shadow var(--awb-btn-transition);
}

/* Subtle lift on hover, settle on press — the signature of the refresh. */
.awb-button > .rz-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--awb-btn-shadow-hover);
}

.awb-button > .rz-button:active:not(:disabled) {
    transform: translateY(0);
}

/* === Sizes ================================================================= */
.awb-button > .rz-button-xs:not(.rz-button-icon-only) {
    padding: 3px 8px;
    font-size: 11px;
}

.awb-button > .rz-button-sm:not(.rz-button-icon-only) {
    padding: 5px 10px;
    font-size: 12.5px;
    border-radius: var(--radius-xs);
}

.awb-button > .rz-button-md:not(.rz-button-icon-only) {
    padding: 8px 14px;
    font-size: 13.5px;
}

.awb-button > .rz-button-lg:not(.rz-button-icon-only) {
    padding: 10px 18px;
    font-size: 14px;
}

/* Icon-only buttons keep Radzen's square/centred sizing — overriding their
   padding would knock the glyph off centre. They still get the radius, palette,
   hover lift and focus ring from the rules above and below. */

/* === Solid fills (Variant.Filled and Variant.Flat) =========================
   Radzen's Flat is "filled without elevation"; both read as a solid button, so
   both map to bfs2nordnet's solid .app-btn--<style> look. */
.awb-button > .rz-variant-filled.rz-primary,
.awb-button > .rz-variant-flat.rz-primary {
    background: var(--awb-btn-primary) !important;
    color: var(--awb-btn-on-fill) !important;
    border: 1px solid var(--awb-btn-primary) !important;
}

.awb-button > .rz-variant-filled.rz-primary:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-primary:hover:not(:disabled) {
    background: var(--awb-btn-primary-hover) !important;
    border-color: var(--awb-btn-primary-hover) !important;
}

.awb-button > .rz-variant-filled.rz-primary:active:not(:disabled),
.awb-button > .rz-variant-flat.rz-primary:active:not(:disabled) {
    background: var(--awb-btn-primary-active) !important;
    border-color: var(--awb-btn-primary-active) !important;
}

/* Secondary and Base are the subtle neutral fill. Radzen's own Secondary is a
   saturated accent; bfs2nordnet deliberately renders it as a quiet neutral
   (.app-btn--secondary) and maps its Text variant off ButtonStyle.Base, so Base
   belongs in the same neutral family. */
.awb-button > .rz-variant-filled.rz-secondary,
.awb-button > .rz-variant-flat.rz-secondary,
.awb-button > .rz-variant-filled.rz-base,
.awb-button > .rz-variant-flat.rz-base {
    background: var(--awb-btn-surface-muted) !important;
    color: var(--awb-btn-text) !important;
    border: 1px solid var(--awb-btn-border-strong) !important;
}

.awb-button > .rz-variant-filled.rz-secondary:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-secondary:hover:not(:disabled),
.awb-button > .rz-variant-filled.rz-base:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-base:hover:not(:disabled) {
    background: var(--awb-btn-border) !important;
}

/* Light — the white, hairline-bordered workhorse (83 call sites in AWB). No
   resting shadow, per .app-btn--light. */
.awb-button > .rz-variant-filled.rz-light,
.awb-button > .rz-variant-flat.rz-light {
    background: var(--awb-btn-surface) !important;
    color: var(--awb-btn-text) !important;
    border: 1px solid var(--awb-btn-border) !important;
    box-shadow: none !important;
}

.awb-button > .rz-variant-filled.rz-light:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-light:hover:not(:disabled) {
    background: var(--awb-btn-surface-subtle) !important;
    border-color: var(--awb-btn-border-strong) !important;
    box-shadow: var(--awb-btn-shadow-hover) !important;
}

.awb-button > .rz-variant-filled.rz-success,
.awb-button > .rz-variant-flat.rz-success {
    background: var(--awb-btn-success) !important;
    color: var(--awb-btn-on-fill) !important;
    border: 1px solid var(--awb-btn-success) !important;
}

.awb-button > .rz-variant-filled.rz-danger,
.awb-button > .rz-variant-flat.rz-danger {
    background: var(--awb-btn-danger) !important;
    color: var(--awb-btn-on-fill) !important;
    border: 1px solid var(--awb-btn-danger) !important;
}

.awb-button > .rz-variant-filled.rz-warning,
.awb-button > .rz-variant-flat.rz-warning {
    background: var(--awb-btn-warning) !important;
    color: var(--awb-btn-on-fill) !important;
    border: 1px solid var(--awb-btn-warning) !important;
}

.awb-button > .rz-variant-filled.rz-info,
.awb-button > .rz-variant-flat.rz-info {
    background: var(--awb-btn-info) !important;
    color: var(--awb-btn-on-fill) !important;
    border: 1px solid var(--awb-btn-info) !important;
}

.awb-button > .rz-variant-filled.rz-dark,
.awb-button > .rz-variant-flat.rz-dark {
    background: var(--awb-btn-dark) !important;
    color: var(--awb-btn-on-fill) !important;
    border: 1px solid var(--awb-btn-dark) !important;
}

/* Hue fills brighten on hover (.app-btn--success/danger/warning/info). */
.awb-button > .rz-variant-filled.rz-success:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-success:hover:not(:disabled),
.awb-button > .rz-variant-filled.rz-danger:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-danger:hover:not(:disabled),
.awb-button > .rz-variant-filled.rz-warning:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-warning:hover:not(:disabled),
.awb-button > .rz-variant-filled.rz-info:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-info:hover:not(:disabled),
.awb-button > .rz-variant-filled.rz-dark:hover:not(:disabled),
.awb-button > .rz-variant-flat.rz-dark:hover:not(:disabled) {
    filter: brightness(1.08);
}

/* === Outlined ==============================================================
   Transparent body, hairline border, hue-tinted hover. Radzen draws its outline
   as `box-shadow: inset 0 0 0 var(--rz-border-width)`, so the shadow has to be
   cleared or the button shows a double edge next to our real border. */
.awb-button > .rz-variant-outlined {
    background: transparent !important;
    box-shadow: none !important;
}

.awb-button > .rz-variant-outlined:hover:not(:disabled) {
    box-shadow: none !important;
}

/* Neutral outline — ButtonStyle.Light/Secondary/Base/Dark. This is
   bfs2nordnet's .app-btn--outline (which it reaches via ButtonStyle.Light). */
.awb-button > .rz-variant-outlined.rz-light,
.awb-button > .rz-variant-outlined.rz-secondary,
.awb-button > .rz-variant-outlined.rz-base,
.awb-button > .rz-variant-outlined.rz-dark {
    color: var(--awb-btn-text) !important;
    border: 1px solid var(--awb-btn-border-strong) !important;
}

.awb-button > .rz-variant-outlined.rz-light:hover:not(:disabled),
.awb-button > .rz-variant-outlined.rz-secondary:hover:not(:disabled),
.awb-button > .rz-variant-outlined.rz-base:hover:not(:disabled),
.awb-button > .rz-variant-outlined.rz-dark:hover:not(:disabled) {
    background: var(--awb-btn-surface-subtle) !important;
    border-color: var(--awb-btn-text-muted) !important;
}

.awb-button > .rz-variant-outlined.rz-light:active:not(:disabled),
.awb-button > .rz-variant-outlined.rz-secondary:active:not(:disabled),
.awb-button > .rz-variant-outlined.rz-base:active:not(:disabled),
.awb-button > .rz-variant-outlined.rz-dark:active:not(:disabled) {
    background: var(--awb-btn-surface-muted) !important;
}

/* Hue outlines — derived from the same tokens as the solid fills, so an
   Outlined+Danger button reads as the quiet form of a Danger button. */
.awb-button > .rz-variant-outlined.rz-primary {
    color: var(--awb-btn-primary) !important;
    border: 1px solid var(--awb-btn-primary-line) !important;
}

.awb-button > .rz-variant-outlined.rz-primary:hover:not(:disabled) {
    background: var(--awb-btn-primary-tint) !important;
}

.awb-button > .rz-variant-outlined.rz-success {
    color: var(--awb-btn-success) !important;
    border: 1px solid var(--awb-btn-success) !important;
}

.awb-button > .rz-variant-outlined.rz-success:hover:not(:disabled) {
    background: var(--awb-btn-success-tint) !important;
}

.awb-button > .rz-variant-outlined.rz-danger {
    color: var(--red-text) !important;
    border: 1px solid var(--red-line) !important;
}

.awb-button > .rz-variant-outlined.rz-danger:hover:not(:disabled) {
    background: var(--awb-btn-danger-tint) !important;
}

.awb-button > .rz-variant-outlined.rz-warning {
    color: var(--awb-btn-warning) !important;
    border: 1px solid var(--awb-btn-warning) !important;
}

.awb-button > .rz-variant-outlined.rz-warning:hover:not(:disabled) {
    background: var(--awb-btn-warning-tint) !important;
}

.awb-button > .rz-variant-outlined.rz-info {
    color: var(--awb-btn-info) !important;
    border: 1px solid var(--awb-btn-info) !important;
}

.awb-button > .rz-variant-outlined.rz-info:hover:not(:disabled) {
    background: var(--awb-btn-info-tint) !important;
}

/* === Text ==================================================================
   Bare, no border, no lift — .app-btn--text. */
.awb-button > .rz-variant-text {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.awb-button > .rz-variant-text:hover:not(:disabled) {
    transform: none;
    box-shadow: none !important;
}

/* Neutral text buttons take the brand colour, as .app-btn--text does. */
.awb-button > .rz-variant-text.rz-light,
.awb-button > .rz-variant-text.rz-secondary,
.awb-button > .rz-variant-text.rz-base,
.awb-button > .rz-variant-text.rz-dark,
.awb-button > .rz-variant-text.rz-primary {
    color: var(--awb-btn-primary) !important;
}

.awb-button > .rz-variant-text.rz-light:hover:not(:disabled),
.awb-button > .rz-variant-text.rz-secondary:hover:not(:disabled),
.awb-button > .rz-variant-text.rz-base:hover:not(:disabled),
.awb-button > .rz-variant-text.rz-dark:hover:not(:disabled),
.awb-button > .rz-variant-text.rz-primary:hover:not(:disabled) {
    background: var(--awb-btn-primary-tint) !important;
}

.awb-button > .rz-variant-text.rz-success {
    color: var(--awb-btn-success) !important;
}

.awb-button > .rz-variant-text.rz-success:hover:not(:disabled) {
    background: var(--awb-btn-success-tint) !important;
}

.awb-button > .rz-variant-text.rz-danger {
    color: var(--awb-btn-danger) !important;
}

.awb-button > .rz-variant-text.rz-danger:hover:not(:disabled) {
    background: var(--awb-btn-danger-tint) !important;
}

.awb-button > .rz-variant-text.rz-warning {
    color: var(--awb-btn-warning) !important;
}

.awb-button > .rz-variant-text.rz-warning:hover:not(:disabled) {
    background: var(--awb-btn-warning-tint) !important;
}

.awb-button > .rz-variant-text.rz-info {
    color: var(--awb-btn-info) !important;
}

.awb-button > .rz-variant-text.rz-info:hover:not(:disabled) {
    background: var(--awb-btn-info-tint) !important;
}

/* === Disabled ==============================================================
   Unmistakably inert: faded, no lift, no elevation, not-allowed cursor. Covers
   both Disabled="true" and Busy="true" (Radzen renders IsBusy as a disabled
   button carrying .rz-state-disabled). */
.awb-button > .rz-button:disabled,
.awb-button > .rz-button.rz-state-disabled {
    opacity: var(--awb-btn-disabled-opacity);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* === Focus ring ============================================================
   Added, not inherited: the material theme's --rz-outline-normal is `none`.
   :focus-visible keeps it off mouse clicks and on for keyboard traversal. */
.awb-button > .rz-button:focus-visible {
    outline: 2px solid var(--awb-btn-focus-ring);
    outline-offset: 2px;
}