/* ============================================================================
   UNIQ design tokens — ported from Uni.CRM.Monolith (wwwroot/css/uniq.css).
   Marine palette. Dark is the :root default; light overrides via .uniq-light on
   <html>, which the head script in App.razor sets before first paint. The
   MudBlazor palette mirroring these values lives in Theme/UniqTheme.cs.
   ============================================================================ */

:root,
.uniq-dark {
    --uniq-bg: #060a14;
    --uniq-surface: #0a1220;
    --uniq-surface2: #0f1a2c;
    --uniq-surface3: #162238;
    --uniq-line: rgba(170, 195, 230, 0.08);
    --uniq-line-strong: rgba(170, 195, 230, 0.16);
    --uniq-text: #e6ecf5;
    --uniq-text-dim: #8a97ad;
    --uniq-text-mute: #5d6a80;
    --uniq-accent: #6aaec9;
    --uniq-accent-soft: rgba(106, 174, 201, 0.16);
    --uniq-accent-line: rgba(106, 174, 201, 0.38);
    --uniq-brand: #e8413d;
    --uniq-brand-soft: rgba(232, 65, 61, 0.14);
    --uniq-brand-line: rgba(232, 65, 61, 0.38);
    --uniq-ok: #7dba98;
    --uniq-warn: #d8a860;
    --uniq-bad: #e07a5f;
    --uniq-info: #7fb2dc;
    /* Tones: a translucent tint of the hue under a lighter text of it, >= 6.9:1 over the surfaces (>= 5.8:1 on hover),
       and a soft border of the hue. */
    --uniq-tone-default-bg: rgba(170, 195, 230, 0.12);
    --uniq-tone-default-fg: #c6d2e2;
    --uniq-tone-default-line: rgba(170, 195, 230, 0.28);
    --uniq-tone-primary-bg: rgba(106, 174, 201, 0.18);
    --uniq-tone-primary-fg: #9fcde0;
    --uniq-tone-primary-line: rgba(106, 174, 201, 0.40);
    --uniq-tone-secondary-bg: rgba(239, 83, 80, 0.18);
    --uniq-tone-secondary-fg: #f59a97;
    --uniq-tone-secondary-line: rgba(239, 83, 80, 0.40);
    --uniq-tone-info-bg: rgba(127, 178, 220, 0.18);
    --uniq-tone-info-fg: #aed0ec;
    --uniq-tone-info-line: rgba(127, 178, 220, 0.40);
    --uniq-tone-success-bg: rgba(125, 186, 152, 0.18);
    --uniq-tone-success-fg: #a8d6bc;
    --uniq-tone-success-line: rgba(125, 186, 152, 0.40);
    --uniq-tone-warning-bg: rgba(216, 168, 96, 0.18);
    --uniq-tone-warning-fg: #e8c890;
    --uniq-tone-warning-line: rgba(216, 168, 96, 0.40);
    --uniq-tone-error-bg: rgba(224, 122, 95, 0.18);
    --uniq-tone-error-fg: #f0a896;
    --uniq-tone-error-line: rgba(224, 122, 95, 0.40);
    --uniq-chip-primary-bg: rgba(150, 148, 220, 0.18);
    --uniq-chip-primary-fg: #c4c3f0;
    --uniq-chip-primary-line: rgba(150, 148, 220, 0.40);
    --uniq-tabbar-bg: var(--uniq-surface2);
    --uniq-disabled-bg: rgba(170, 195, 230, 0.06);
}

.uniq-light {
    --uniq-bg: #f2f5fa;
    --uniq-surface: #ffffff;
    --uniq-surface2: #f6f9fd;
    --uniq-surface3: #ebf0f7;
    --uniq-line: rgba(47, 111, 137, 0.10);
    --uniq-line-strong: rgba(47, 111, 137, 0.22);
    --uniq-text: #203E50;
    --uniq-text-dim: #52616B;
    --uniq-text-mute: #8293a8;
    --uniq-accent: #2F6F89;
    --uniq-accent-soft: rgba(47, 111, 137, 0.08);
    --uniq-accent-line: rgba(47, 111, 137, 0.28);
    --uniq-brand: #db0d08;
    --uniq-brand-soft: rgba(219, 13, 8, 0.08);
    --uniq-brand-line: rgba(219, 13, 8, 0.30);
    --uniq-ok: #35634B;
    --uniq-warn: #7D6224;
    --uniq-bad: #8A4536;
    --uniq-info: #215A73;
    /* Tones: a soft tint under a dark text of the same hue, >= 4.9:1 (>= 4.5:1 on hover), and a soft border of the hue. */
    --uniq-tone-default-bg: #EDF0F2;
    --uniq-tone-default-fg: #52616B;
    --uniq-tone-default-line: #C6CCD0;
    --uniq-tone-primary-bg: #DCE8ED;
    --uniq-tone-primary-fg: #285F75;
    --uniq-tone-primary-line: #B7CDD7;
    --uniq-tone-secondary-bg: #F8E4E3;
    --uniq-tone-secondary-fg: #A3140F;
    --uniq-tone-secondary-line: #E1ACAA;
    --uniq-tone-info-bg: #DCE8ED;
    --uniq-tone-info-fg: #215A73;
    --uniq-tone-info-line: #B7CDD7;
    --uniq-tone-success-bg: #E5EFE8;
    --uniq-tone-success-fg: #35634B;
    --uniq-tone-success-line: #B5C9BE;
    --uniq-tone-warning-bg: #F5EEDC;
    --uniq-tone-warning-fg: #7D6224;
    --uniq-tone-warning-line: #DCCB9F;
    --uniq-tone-error-bg: #F6E9E3;
    --uniq-tone-error-fg: #8A4536;
    --uniq-tone-error-line: #D6B8AD;
    --uniq-chip-primary-bg: #E7E4F4;
    --uniq-chip-primary-fg: #473F80;
    --uniq-chip-primary-line: #C9C3E6;
    /* An invalid field's border at rest: the error hue at 3:1, darker than the soft #D6B8AD of buttons and chips. */
    --uniq-input-error-line: #B07B68;
    --uniq-tabbar-bg: #FAFBFC;
    --uniq-disabled-bg: #F4F5F6;
}

html, body {
    margin: 0;
    background: var(--uniq-bg);
    color: var(--uniq-text);
    font-family: 'Inter', 'Geist', system-ui, sans-serif;
}

code {
    color: #c02d76;
}

/* Typography utilities */
.uniq-sans { font-family: 'Inter', 'Geist', system-ui, sans-serif; }
.uniq-mono { font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.uniq-caps { letter-spacing: .06em; text-transform: uppercase; }

/* Numeric cell helper */
.uniq-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Account pages are a narrow single column by default. A page that needs the width says so by
   putting .account-wide on its own root — the layout cannot be told from the page it renders. */
.account-shell {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

.account-shell:has(.account-wide) {
    max-width: 60rem;
}

/* Account pages render statically. MudBlazor lifts the label and opens the outlined border's
   notch from C#, which needs a re-render there is no circuit for — so on these pages the typed
   text drives both. Values mirror MudBlazor's own .mud-shrink rules for the outlined variant. */
.mud-input.mud-input-outlined:has(input:not(:placeholder-shown)) ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(14px, -6px) scale(0.75);
    max-width: calc((100% - 14px) / 0.75);
}

.mud-input.mud-input-outlined:has(input:not(:placeholder-shown)) > .mud-input-outlined-border legend {
    width: auto;
    padding: 0 5px;
}

.qty-center input {
    text-align: center;
}

/* Mud input roots carry flex:1 1 auto, so in any wide cell the field grows and
   pushes the + button away from the number. Pin the field so [-][value][+] stays compact. */
.qty-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.qty-stepper .mud-input-control {
    flex: 0 0 auto;
    width: 90px;
}

/* MudSelect puts Class/Style on its inner input control, so the bare .mud-select root
   keeps flex-grow:1 and opens a gap between the visible 110px box and the next field. */
.additional-line > .mud-select {
    flex: 0 0 auto;
    width: 110px;
}

/* Phone app bar: the email plus labelled Profile/Sign out buttons overflow a 360-430px
   viewport, so below 600px the email hides and the buttons collapse to their icons. Only the
   text span hides: MudBlazor renders the start icon inside .mud-button-label, and the buttons
   keep their name through aria-label. */
@media (max-width: 599px) {
    .mud-appbar .user-email {
        display: none;
    }

    .mud-appbar .appbar-btn-text {
        display: none;
    }

    .mud-appbar .mud-button .mud-button-icon-start {
        margin: 0;
    }

    .mud-appbar .mud-button {
        min-width: 0;
        padding: 6px 8px;
    }

    .mud-appbar .mud-toolbar {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* MudBlazor draws its checkbox as an SVG it swaps from C#, so a static page keeps the native one. */
.account-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.875rem;
}

/* Drawn in the input colours: the input border unchecked, a primary fill with a contrast tick checked. */
.account-checkbox input[type="checkbox"] {
    appearance: none;
    flex: none;
    display: grid;
    place-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    background-color: var(--mud-palette-surface);
    cursor: pointer;
}

.account-checkbox input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: var(--mud-palette-primary-text);
    transform: scale(0);
}

.account-checkbox input[type="checkbox"]:checked {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary);
}

.account-checkbox input[type="checkbox"]:checked::before {
    transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
    .account-checkbox input[type="checkbox"]:not(:checked):hover {
        background-color: var(--uniq-tone-primary-bg);
    }
}

/* Forced colours drop the fills that draw the box and tick; the native checkbox stays legible there. */
@media (forced-colors: active) {
    .account-checkbox input[type="checkbox"] {
        appearance: auto;
    }

    .account-checkbox input[type="checkbox"]::before {
        content: none;
    }
}

/* Keyboard focus must not look like the active nav item (a tinted background); the element selectors outrank MudBlazor's a/button outline resets. */
:focus-visible,
button:not(.mud-button-root):focus-visible,
a:not(.mud-button-root):focus-visible {
    outline: 2px solid var(--uniq-accent);
    outline-offset: 2px;
}

/* The drawer scrolls, so it clips an outline drawn outside the full-width nav links. */
a.mud-nav-link:focus-visible {
    outline-offset: -2px;
}

/* Dialog form rows: short fields share a row on a desktop and stack one per row on a phone. */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.form-row > * {
    flex: 1 1 140px;
    min-width: 140px;
}

/* Numeric fields put Style on the inner input, where a flex basis becomes height; size them from the row. */
.form-row.form-row-narrow > * {
    flex-basis: 100px;
    min-width: 100px;
}

.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.8rem;
}

/* ============================================================================
   UNIQ × MudBlazor — generic overrides ported from uniq-mud.css: tables,
   filter bars and control sizing follow the design tokens. Opt in per component
   with Class="uniq-mud-table" / Class="uniq-filter-bar".
   ============================================================================ */

/* ---------- Filter bar — normalize MudTextField/MudSelect compactness ---------- */
.uniq-filter-bar { border-bottom: 1px solid var(--uniq-line); }
.uniq-filter-bar .mud-input-label,
.uniq-filter-bar .mud-input-label-animated { font-size: 11px !important; }
.uniq-filter-bar .mud-input-outlined-border { border-color: var(--uniq-line-strong) !important; }
/* Text buttons (clear etc.) and boolean inputs center against the input height instead of hugging
   the bottom edge. The nudge compensates the floating label that overhangs the outlined border. */
.uniq-filter-bar .mud-button-text,
.uniq-filter-bar .mud-input-control-boolean-input { align-self: center; margin-top: 4px; }

/* ---------- MudTable — compact, token-driven ---------- */
.uniq-mud-table.mud-table { background: transparent; font-size: 12.5px; }
.uniq-mud-table .mud-table-container { background: transparent; }
.uniq-mud-table .mud-table-root { border-collapse: collapse; }

.uniq-mud-table .mud-table-head .mud-table-cell {
    font-size: 10.5px;
    color: var(--uniq-text-mute);
    letter-spacing: .3px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 8px 12px;
    background: var(--uniq-surface2);
    border-bottom: 1px solid var(--uniq-line);
}

.uniq-mud-table .mud-table-body .mud-table-cell {
    padding: 10px 12px;
    border-bottom: 1px solid var(--uniq-line);
    vertical-align: middle;
    color: var(--uniq-text);
}

/* Loading / no-records row. Mud paints it with --mud-palette-surface, which is white until the
   theme provider learns the theme — that only happens after the first render, one JS hop later,
   while the html class the head script set has already darkened everything around it. */
.mud-table-empty-row { background: transparent; }

/* Hover — subtle surface, not Material blue */
.uniq-mud-table .mud-table-body .mud-table-row:hover,
.uniq-mud-table .mud-table-body .mud-table-row.mud-table-row-hover:hover {
    background: var(--uniq-surface2) !important;
}

/* Selected — accent stripe */
.uniq-mud-table .mud-table-body .mud-selected-item {
    background: var(--uniq-accent-soft) !important;
    box-shadow: inset 2px 0 0 var(--uniq-accent);
}

/* Remove Material elevation from panel-wrapped tables */
.uniq-mud-table.mud-table.mud-elevation-0 { box-shadow: none; }

/* Pagination / footer buttons — lighter */
.uniq-mud-table + .mud-stack .mud-button-text { color: var(--uniq-text-dim); }

/* ---------- Tones — each MudBlazor colour of a chip, outlined button or alert takes its tint, dark text and soft border ---------- */
:is(.mud-chip-color-default, .mud-button-outlined-default, .mud-alert-text-normal) {
    --uniq-tone-bg: var(--uniq-tone-default-bg); --uniq-tone-fg: var(--uniq-tone-default-fg); --uniq-tone-line: var(--uniq-tone-default-line);
}
:is(.mud-chip-color-primary, .mud-button-outlined-primary, .mud-alert-text-primary) {
    --uniq-tone-bg: var(--uniq-tone-primary-bg); --uniq-tone-fg: var(--uniq-tone-primary-fg); --uniq-tone-line: var(--uniq-tone-primary-line);
}
:is(.mud-chip-color-secondary, .mud-button-outlined-secondary, .mud-alert-text-secondary) {
    --uniq-tone-bg: var(--uniq-tone-secondary-bg); --uniq-tone-fg: var(--uniq-tone-secondary-fg); --uniq-tone-line: var(--uniq-tone-secondary-line);
}
:is(.mud-chip-color-info, .mud-button-outlined-info, .mud-alert-text-info) {
    --uniq-tone-bg: var(--uniq-tone-info-bg); --uniq-tone-fg: var(--uniq-tone-info-fg); --uniq-tone-line: var(--uniq-tone-info-line);
}
:is(.mud-chip-color-success, .mud-button-outlined-success, .mud-alert-text-success) {
    --uniq-tone-bg: var(--uniq-tone-success-bg); --uniq-tone-fg: var(--uniq-tone-success-fg); --uniq-tone-line: var(--uniq-tone-success-line);
}
:is(.mud-chip-color-warning, .mud-button-outlined-warning, .mud-alert-text-warning) {
    --uniq-tone-bg: var(--uniq-tone-warning-bg); --uniq-tone-fg: var(--uniq-tone-warning-fg); --uniq-tone-line: var(--uniq-tone-warning-line);
}
:is(.mud-chip-color-error, .mud-button-outlined-error, .mud-alert-text-error) {
    --uniq-tone-bg: var(--uniq-tone-error-bg); --uniq-tone-fg: var(--uniq-tone-error-fg); --uniq-tone-line: var(--uniq-tone-error-line);
}
/* Primary chips (RFQ Quoting, PO issued) get a lavender of their own: in the primary blue they read like the info statuses.
   Primary outlined buttons keep the blue tint on hover. */
.mud-chip-color-primary {
    --uniq-tone-bg: var(--uniq-chip-primary-bg); --uniq-tone-fg: var(--uniq-chip-primary-fg); --uniq-tone-line: var(--uniq-chip-primary-line);
}

/* ---------- MudChip — filled and text chips are tonal instead of a saturated fill under white text ---------- */
/* Equal specificity to MudBlazor's colour rules, so this file loading after MudBlazor.min.css decides.
   The icon and close button inherit the text colour. */
:is(.mud-chip-filled, .mud-chip-text):is(.mud-chip-color-default, .mud-chip-color-primary, .mud-chip-color-secondary, .mud-chip-color-info,
                                         .mud-chip-color-success, .mud-chip-color-warning, .mud-chip-color-error) {
    color: var(--uniq-tone-fg);
    background-color: var(--uniq-tone-bg);
    --mud-ripple-color: var(--uniq-tone-fg) !important;
}

/* MudBlazor swaps in a darkened solid fill on hover/focus (the chip's only focus cue, it has outline: 0), which would sink
   the dark text. Keep the tint and deepen it with an overlay of the text colour; as a shadow rather than the background,
   a browser without color-mix() drops only the overlay instead of the whole fill. */
:is(.mud-chip-filled, .mud-chip-text).mud-clickable:is(.mud-chip-color-default, .mud-chip-color-primary, .mud-chip-color-secondary, .mud-chip-color-info,
                                                       .mud-chip-color-success, .mud-chip-color-warning, .mud-chip-color-error):is(:focus-visible, :active):not(.mud-disabled) {
    background-color: var(--uniq-tone-bg);
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--uniq-tone-fg) 6%, transparent);
}

/* Hover only for a fine pointer, as MudBlazor does, so the deeper tint does not stick after a tap. */
@media (hover: hover) and (pointer: fine) {
    :is(.mud-chip-filled, .mud-chip-text).mud-clickable:is(.mud-chip-color-default, .mud-chip-color-primary, .mud-chip-color-secondary, .mud-chip-color-info,
                                                           .mud-chip-color-success, .mud-chip-color-warning, .mud-chip-color-error):hover:not(.mud-disabled) {
        background-color: var(--uniq-tone-bg);
        box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--uniq-tone-fg) 6%, transparent);
    }
}

/* A clickable filled chip is a pressed filter among outlined ones: the same soft border keeps its edge and its width. */
.mud-chip-filled.mud-clickable:is(.mud-chip-color-default, .mud-chip-color-primary, .mud-chip-color-secondary, .mud-chip-color-info,
                                  .mud-chip-color-success, .mud-chip-color-warning, .mud-chip-color-error) {
    border: 1px solid var(--uniq-tone-line);
}

/* Outlined chips keep the surface under them (white on the papers they sit on) with a soft border and the dark text of the hue. */
.mud-chip-outlined:is(.mud-chip-color-default, .mud-chip-color-primary, .mud-chip-color-secondary, .mud-chip-color-info,
                      .mud-chip-color-success, .mud-chip-color-warning, .mud-chip-color-error) {
    color: var(--uniq-tone-fg);
    border-color: var(--uniq-tone-line);
}

/* ---------- MudButton / MudIconButton ---------- */
/* Outlined: transparent with a soft border of the hue, the tint of the hue on hover, focus and press. */
.mud-button-outlined:is(.mud-button-outlined-default, .mud-button-outlined-primary, .mud-button-outlined-secondary, .mud-button-outlined-info,
                        .mud-button-outlined-success, .mud-button-outlined-warning, .mud-button-outlined-error) {
    border-color: var(--uniq-tone-line);
}

.mud-button-outlined:is(.mud-button-outlined-default, .mud-button-outlined-primary, .mud-button-outlined-secondary, .mud-button-outlined-info,
                        .mud-button-outlined-success, .mud-button-outlined-warning, .mud-button-outlined-error):is(:focus-visible, :active) {
    border-color: var(--uniq-tone-line);
    background-color: var(--uniq-tone-bg);
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-outlined:is(.mud-button-outlined-default, .mud-button-outlined-primary, .mud-button-outlined-secondary, .mud-button-outlined-info,
                            .mud-button-outlined-success, .mud-button-outlined-warning, .mud-button-outlined-error):hover {
        border-color: var(--uniq-tone-line);
        background-color: var(--uniq-tone-bg);
    }
}

/* On their own tint the primary and secondary palette colours fall under 4.5:1; the tone's text keeps it. */
.mud-button-outlined:is(.mud-button-outlined-primary, .mud-button-outlined-secondary):is(:focus-visible, :active) {
    color: var(--uniq-tone-fg);
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-outlined:is(.mud-button-outlined-primary, .mud-button-outlined-secondary):hover {
        color: var(--uniq-tone-fg);
    }
}

/* The success palette colour is the confirming fill; as text it would fall under 4.5:1 on its own tint. */
.mud-button-outlined.mud-button-outlined-success {
    color: var(--uniq-tone-success-fg);
}

/* A dialog's default text buttons (Cancel, Close) are the neutral tone. */
.mud-dialog-actions .mud-button-text.mud-button-text-default {
    color: var(--uniq-tone-default-fg);
}

.mud-dialog-actions .mud-button-text.mud-button-text-default:is(:focus-visible, :active) {
    background-color: var(--uniq-tone-default-bg);
}

@media (hover: hover) and (pointer: fine) {
    .mud-dialog-actions .mud-button-text.mud-button-text-default:hover {
        background-color: var(--uniq-tone-default-bg);
    }
}

/* Filled buttons sit flat at rest, on hover, focus and press. */
.mud-button-filled,
.mud-button-filled:is(:hover, :focus-visible, :active) {
    box-shadow: none;
}

/* Disabled buttons share one neutral look whatever their colour; a ring rather than a border keeps a filled button's size. */
.mud-button-root.mud-button-outlined:disabled {
    border-color: var(--mud-palette-action-disabled-background);
    background-color: var(--uniq-disabled-bg);
}

.mud-button-root.mud-button-filled:disabled {
    background-color: var(--uniq-disabled-bg) !important;
    box-shadow: inset 0 0 0 1px var(--mud-palette-action-disabled-background);
}

/* ---------- MudAlert (Text variant, the default) — the tint and dark text of its severity, icon included ---------- */
.mud-alert:is(.mud-alert-text-normal, .mud-alert-text-primary, .mud-alert-text-secondary, .mud-alert-text-info,
              .mud-alert-text-success, .mud-alert-text-warning, .mud-alert-text-error) {
    color: var(--uniq-tone-fg);
    background-color: var(--uniq-tone-bg);
}

.mud-alert:is(.mud-alert-text-normal, .mud-alert-text-primary, .mud-alert-text-secondary, .mud-alert-text-info,
              .mud-alert-text-success, .mud-alert-text-warning, .mud-alert-text-error) .mud-alert-icon {
    color: inherit;
}

/* ---------- Inputs — the palette sets the soft border, the primary focus and the error text ---------- */
/* An invalid field's border is soft only at rest, where focus keeps MudBlazor's error border; on the dark surfaces a soft line falls under 3:1. */
.uniq-light .mud-input.mud-input-error:not(:focus-within) .mud-input-outlined-border {
    border-color: var(--uniq-input-error-line) !important;
}

/* MudBlazor borders a disabled field in the disabled text grey, which would outline it more than an editable one. */
.mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--mud-palette-action-disabled-background);
}

/* ---------- MudTabs — a light header with muted inactive tabs; MudBlazor keeps the active tab and slider primary ---------- */
.mud-tabs-tabbar {
    background-color: var(--uniq-tabbar-bg);
}

.mud-tab {
    color: var(--mud-palette-text-secondary);
}

/* ---------- MudList / MudSelect — the chosen option is the info tone, whatever colour the list carries ---------- */
.mud-list-item.mud-selected-item {
    color: var(--uniq-tone-info-fg) !important;
    background-color: var(--uniq-tone-info-bg) !important;
}

/* ---------- Control sizing — Mud defaults are too large for the dense look ---------- */
.mud-button-root.mud-button-size-small {
    font-size: 11.5px !important;
    letter-spacing: .2px;
    min-height: 26px;
    padding: 2px 10px;
}
.mud-button-root.mud-button-size-small .mud-icon-root.mud-svg-icon {
    font-size: 14px !important;
    height: 14px; width: 14px;
}

.mud-toggle-group .mud-toggle-item {
    font-size: 11.5px !important;
    letter-spacing: .2px;
    min-height: 26px;
    padding: 2px 10px;
}
.mud-toggle-group.mud-toggle-group-size-small .mud-toggle-item {
    font-size: 11.5px !important;
    min-height: 24px;
    padding: 0 10px;
}

.mud-input-label,
.mud-input-label-animated {
    font-size: 11.5px;
}
.mud-input-root input,
.mud-input-root .mud-select-input {
    font-size: 12.5px;
}

.mud-typography-caption { font-size: 11px; }

/* ---------- List popovers — kill the double scrollbar ---------- */
/* The popover scrolls (inline style or .overflow-y-auto) AND .mud-list scrolls
   (max-height:inherit); the popover's 2px of borders make the list overflow the content box by
   exactly that much → two scrollbars. Scroll the list only; flex fits it under the max-height. */
.mud-popover:has(> .mud-list) {
    overflow-y: hidden !important;
    display: flex;
    flex-direction: column;
}
.mud-popover:has(> .mud-list) > .mud-list {
    flex: 1 1 auto;
    min-height: 0;
}

/* Collapsible group headers are real buttons, so Enter and Space toggle without scrolling the page.
   MudBlazor centres every button's content, which would centre wrapped header lines. */
.group-toggle {
    width: 100%;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    justify-content: flex-start;
}

/* A header stays under the app bar while the rows below it scroll past, so its figures stay in
   view. It sticks only while no ancestor below the page scroller clips overflow (MudPaper does not).
   The app bar is Dense, which MudBlazor sizes at 3/4 of --mud-appbar-height at every width.
   z-index: above table cells and inputs (MudBlazor's go up to 3), below the drawer and popovers. */
.group-sticky {
    position: sticky;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    z-index: 5;
    background: var(--mud-palette-surface);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    box-shadow: 0 1px 0 var(--uniq-line);
}

/* Rounded MudTabs cut their corners with overflow:hidden, which makes them the scroll container of
   every sticky header inside and pins nothing; clip cuts the same corners without scrolling. */
.mud-tabs.mud-tabs-rounded {
    overflow: clip;
}

/* RFQ lines come as one table per group. A fixed layout takes the column widths from the header
   alone, whatever the rows hold, so the groups line up; extra width is shared out in proportion,
   and a narrower screen scrolls the table. */
.rfq-lines .mud-table-root {
    table-layout: fixed;
}

/* Dense cells pad 40px across; over eleven columns that alone would push the table past the 1400px page. */
.rfq-lines .mud-table-root .mud-table-cell {
    padding-inline: 6px;
}

/* A fixed column does not widen for a long word, which would run into the next cell instead. */
.rfq-lines td {
    overflow-wrap: anywhere;
}

/* A quantity or an amount never wraps away from its unit or currency. */
.rfq-lines .num {
    text-align: right;
    white-space: nowrap;
}

/* MudBlazor lays every button out as a row, which would put a day's number beside its summary. */
.meals-day {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Distinct from today's solid border inside the cell: dashed, another colour, drawn outside it. */
button.meals-day:focus-visible {
    outline: 2px dashed var(--mud-palette-text-primary);
    outline-offset: 2px;
}

/* Group names wrap between words only; the table scrolls sideways before a name splits mid-word. */
.meals-group {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

/* Meal counts reach 9999: slimmer side padding shows four digits without widening the day table. */
.meal-count .mud-input {
    width: 64px;
}

.meal-count .mud-input > input.mud-input-root {
    padding-inline: 6px;
}