/* ============================================================================
   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: #4a90d9;
    --uniq-accent-soft: rgba(74, 144, 217, 0.16);
    --uniq-accent-line: rgba(74, 144, 217, 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: #5fa98c;
    --uniq-warn: #d8a860;
    --uniq-bad: #e8413d;
    --uniq-info: #6b9bc4;
}

.uniq-light {
    --uniq-bg: #f2f5fa;
    --uniq-surface: #ffffff;
    --uniq-surface2: #f6f9fd;
    --uniq-surface3: #ebf0f7;
    --uniq-line: rgba(0, 71, 155, 0.10);
    --uniq-line-strong: rgba(0, 71, 155, 0.22);
    --uniq-text: #0b1a30;
    --uniq-text-dim: #4d6075;
    --uniq-text-mute: #8293a8;
    --uniq-accent: #00479b;
    --uniq-accent-soft: rgba(0, 71, 155, 0.08);
    --uniq-accent-line: rgba(0, 71, 155, 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: #1f7a48;
    --uniq-warn: #8a5a10;
    --uniq-bad: #db0d08;
    --uniq-info: #2e6494;
}

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;
}

/* 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: #b00020;
    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); }

/* ---------- 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;
}