/* ==========================================================================
   Layer3 design system, as on platform.layer3.nz (wwwroot/css/platform.css there).
   Display: Anton (always uppercase). Body: Roboto. Labels and numbers: Roboto Mono.
   No shadows. Cards 6px, inputs and buttons 4px, chips 3px.
   The platform builds this from its own markup; this app is MudBlazor throughout, so the same look is applied to
   MudBlazor's own classes here, with the palette and type roles in Components/ThemeConfig.cs.
   Loaded last, after MudBlazor.min.css and app.css.
   ========================================================================== */

:root {
    --l3-ink: #24263C;
    --l3-ink-2: #2e3150;
    --l3-ink-deep: #1a1c2e;
    --l3-accent: #ED4729;
    --l3-accent-hover: #d63d21;
    --l3-accent-soft: #fdebe7;
    --l3-canvas: #EDE9E3;
    --l3-surface: #FFFFFF;
    --l3-teal: #528C8E;
    --l3-teal-soft: #e5efef;
    --l3-honey: #F7C426;
    --l3-honey-soft: #fdf3d3;
    --l3-hover: #f6f3ef;
    --l3-line: #d8d2c8;
    --l3-muted: #b9b2a6;
    --l3-text-2: #5b5d72;

    --l3-font-display: Anton, Impact, "Arial Narrow", sans-serif;
    --l3-font-body: Roboto, Helvetica, Arial, sans-serif;
    --l3-font-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

    --l3-radius-card: 6px;
    --l3-radius-control: 4px;
    --l3-radius-chip: 3px;

    --l3-content-max: 1280px;
    --l3-gutter: 32px;
}

@media (max-width: 720px) {
    :root { --l3-gutter: 16px; }
}

/* ---------- Base ---------------------------------------------------------- */
html, body {
    background: var(--l3-canvas);
    color: var(--l3-ink);
    font-family: var(--l3-font-body);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--l3-accent); }
a:hover { color: var(--l3-ink); }
:focus-visible { outline: 2px solid var(--l3-accent); outline-offset: 2px; }

/* Type roles, for use in any page */
.l3-display { font-family: var(--l3-font-display); text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; }
.l3-eyebrow { font-family: var(--l3-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.l3-label { font-family: var(--l3-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--l3-text-2); }
.l3-num { font-family: var(--l3-font-mono); font-variant-numeric: tabular-nums; }
.l3-lede { font-size: 16px; line-height: 1.55; font-weight: 300; max-width: 760px; }

/* ---------- App shell: ink rail, mobile top bar ----------------------------- */
.mud-drawer.l3-rail {
    background: var(--l3-ink);
    color: #fff;
}
.l3-rail .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}
.l3-rail__brand { display: block; padding: 26px 22px 6px; }
.l3-rail__brand img { height: 22px; width: auto; display: block; }
.l3-rail__product {
    font-family: var(--l3-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--l3-honey); padding: 8px 22px 14px;
}
.l3-rail__foot {
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column; gap: 10px;
}
.l3-rail__user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.l3-rail__user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.l3-rail__user-sub { font-family: var(--l3-font-mono); font-size: 10.5px; letter-spacing: .06em; color: rgba(237,233,227,.6); }
.l3-rail__signout {
    background: none; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85);
    border-radius: var(--l3-radius-control); padding: 6px 10px; font: 500 13px var(--l3-font-body); cursor: pointer; text-align: center;
}
.l3-rail__signout:hover { border-color: #fff; color: #fff; }
.l3-rail__version { font-family: var(--l3-font-mono); font-size: 10px; letter-spacing: .08em; color: rgba(237,233,227,.4); text-transform: uppercase; }
.l3-avatar {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--l3-radius-chip);
    background: var(--l3-accent); color: #fff; display: grid; place-items: center;
    font-family: var(--l3-font-mono); font-size: 12px; font-weight: 500;
}

/* Navigation inside the rail */
.l3-rail .mud-navmenu { padding: 0 12px 16px; flex: 1 1 auto; }
.l3-nav__heading {
    font-family: var(--l3-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(237,233,227,.55); padding: 14px 10px 6px;
}
.l3-rail .mud-nav-link {
    padding: 8px 10px;
    border-radius: var(--l3-radius-control);
    border-left: 3px solid transparent;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    min-height: 0;
}
.l3-rail .mud-nav-link:hover { background: rgba(255,255,255,.06) !important; color: #fff; }
.l3-rail .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-left-color: var(--l3-accent);
    font-weight: 500;
}
.l3-rail .mud-nav-link .mud-nav-link-icon { color: inherit; opacity: .75; font-size: 1.15rem; margin-right: 0; }
.l3-rail .mud-nav-link.active .mud-nav-link-icon { color: var(--l3-accent); opacity: 1; }
.l3-rail .mud-nav-link-text { margin-left: 10px; letter-spacing: 0; }
/* A count beside a menu item, such as the quote requests waiting. */
.l3-nav__count { display: inline-block; min-width: 18px; margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: var(--l3-accent); color: #fff; font: 600 11px/16px var(--l3-font-mono); text-align: center; vertical-align: 1px; }
/* A group's own row reads as a section heading that opens and closes. */
.l3-rail .mud-nav-group > .mud-nav-link {
    font-family: var(--l3-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(237,233,227,.6); margin-top: 10px;
}
.l3-rail .mud-nav-group > .mud-nav-link .mud-nav-link-text { font-family: inherit; letter-spacing: inherit; }
.l3-rail .mud-nav-group > .mud-nav-link.active { background: none; border-left-color: transparent; color: rgba(237,233,227,.85); }
.l3-rail .mud-nav-group .mud-collapse-container .mud-nav-link { padding-left: 10px; }
.l3-rail .mud-navmenu .mud-divider { border-color: rgba(255,255,255,.08); }
.l3-rail .mud-navmenu .mud-typography { color: rgba(237,233,227,.5); }

/* Top bar: only on narrow screens, where the rail becomes a drawer. */
.mud-appbar.l3-topbar { background: var(--l3-ink); }
.l3-topbar__logo { height: 20px; width: auto; display: block; }
@media (min-width: 960px) {
    .mud-appbar.l3-topbar { display: none; }
    .mud-layout .mud-main-content { padding-top: 0; }
}

/* ---------- Page header band and page body ---------------------------------- */
.l3-page-header { background: var(--l3-ink); color: #fff; }
.l3-page-header__inner {
    max-width: var(--l3-content-max); margin: 0 auto;
    padding: 28px var(--l3-gutter);
    display: flex; flex-direction: column; gap: 10px;
}
.l3-page-header__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.l3-page-header__eyebrow { color: var(--l3-honey); }
.l3-page-header__title {
    font-family: var(--l3-font-display); font-size: clamp(28px, 4.2vw, 46px); line-height: 1.02;
    text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; margin: 0; font-weight: 400;
}
.l3-page-header__lede { color: rgba(255,255,255,.88); font-size: 15px; font-weight: 300; max-width: 760px; }
.l3-page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.l3-page-header__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 4px; }
.l3-page-header__meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.l3-page-header__meta-item .l3-label { color: var(--l3-canvas); opacity: .7; }
.l3-page-header__meta-item > :last-child { font-size: 15px; }
/* Buttons in the band sit on ink. */
.l3-page-header .mud-button-root.mud-button-outlined { border-color: rgba(255,255,255,.4); color: #fff; }
.l3-page-header .mud-button-root.mud-button-outlined:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.l3-page-header .mud-button-text { color: #fff; }
.l3-page-header .mud-icon-button { color: #fff; }
.l3-page-header .mud-chip-outlined { border-color: rgba(255,255,255,.4); color: #fff; }

.l3-page {
    max-width: var(--l3-content-max); width: 100%; margin: 0 auto;
    padding: 24px var(--l3-gutter) 64px;
}

/* ---------- Surfaces ------------------------------------------------------- */
.mud-paper { box-shadow: none; }
.mud-card, .mud-paper:not(.mud-popover):not(.mud-appbar):not(.mud-drawer) { border-radius: var(--l3-radius-card); }
.mud-paper-outlined { border-color: var(--l3-line); }
.mud-expand-panel { box-shadow: none !important; border: 1px solid var(--l3-line); }
.mud-expand-panel + .mud-expand-panel { border-top: none; }

/* Page titles that are not in a header band still read as display text. */
.mud-typography-h4 { margin-bottom: 4px; }

/* ---------- Tables --------------------------------------------------------- */
.mud-table { box-shadow: none; }
.mud-table-head .mud-table-cell {
    font-family: var(--l3-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em;
    text-transform: uppercase; color: var(--l3-ink);
    border-bottom: 2px solid var(--l3-ink);
    white-space: nowrap;
}
.mud-table-body .mud-table-cell { border-bottom: 1px solid var(--l3-canvas); }
.mud-table-dense .mud-table-row .mud-table-cell { padding: 8px 12px; }
/* Under its breakpoint a MudTable stacks each row as a card; its labels match the header style. */
.mud-table-cell[data-label]::before,
.mud-xs-table .mud-table-cell::before,
.mud-sm-table .mud-table-cell::before,
.mud-md-table .mud-table-cell::before {
    font-family: var(--l3-font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .1em;
    text-transform: uppercase; color: var(--l3-text-2);
}
/* Stacked rows: each record is set apart, and its first cell reads as the record's title rather than a labelled field.
   One block per MudTable breakpoint, matching MudBlazor's own stacking widths. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-body .mud-table-cell:last-child { border-bottom: 2px solid var(--l3-line); }
    .mud-xs-table .mud-table-body .mud-table-cell:first-child { justify-content: flex-start; font-weight: 500; font-size: 15px; padding-top: 12px; }
    .mud-xs-table .mud-table-body .mud-table-cell:first-child::before { display: none; }
}
@media (max-width: 960px) {
    .mud-sm-table .mud-table-body .mud-table-cell:last-child { border-bottom: 2px solid var(--l3-line); }
    .mud-sm-table .mud-table-body .mud-table-cell:first-child { justify-content: flex-start; font-weight: 500; font-size: 15px; padding-top: 12px; }
    .mud-sm-table .mud-table-body .mud-table-cell:first-child::before { display: none; }
}
@media (max-width: 1280px) {
    .mud-md-table .mud-table-body .mud-table-cell:last-child { border-bottom: 2px solid var(--l3-line); }
    .mud-md-table .mud-table-body .mud-table-cell:first-child { justify-content: flex-start; font-weight: 500; font-size: 15px; padding-top: 12px; }
    .mud-md-table .mud-table-body .mud-table-cell:first-child::before { display: none; }
}
/* Plain HTML tables in pages (quote lines, bills) get the same header treatment. */
table.l3-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.l3-table th {
    font-family: var(--l3-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
    text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--l3-ink); white-space: nowrap;
}
table.l3-table td { padding: 8px 12px; border-bottom: 1px solid var(--l3-canvas); vertical-align: top; }
table.l3-table tbody tr:hover { background: var(--l3-hover); }
table.l3-table .num { text-align: right; font-family: var(--l3-font-mono); font-variant-numeric: tabular-nums; }
/* A wide table scrolls inside its card on a phone rather than pushing the page sideways. */
.l3-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Controls -------------------------------------------------------- */
.mud-button-root { border-radius: var(--l3-radius-control); }
.mud-button-filled, .mud-fab { box-shadow: none !important; }
.mud-button-filled.mud-button-filled-primary:hover { background-color: var(--l3-accent-hover); }
.mud-button-outlined.mud-button-outlined-default { border-color: var(--l3-ink); }
.mud-button-outlined.mud-button-outlined-default:hover { border-color: var(--l3-accent); color: var(--l3-accent); background: transparent; }
.mud-input-outlined-border { border-color: var(--l3-line); }
.mud-input-label { font-family: var(--l3-font-body); }

/* Chips read as the platform's mono tags. */
.mud-chip.mud-chip-size-small {
    font-family: var(--l3-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    border-radius: var(--l3-radius-chip); height: 22px;
}

/* Tabs: sentence case, accent underline, on white. */
.mud-tabs-tabbar { background: var(--l3-surface); border-bottom: 1px solid var(--l3-line); }
.mud-tab { text-transform: none; font-size: 14px; letter-spacing: 0; min-width: 0; padding: 10px 16px; }
.mud-tab.mud-tab-active { color: var(--l3-ink); font-weight: 500; }
.mud-tab-slider { background: var(--l3-accent) !important; height: 3px !important; }
.mud-tabs-panels { background: var(--l3-surface); }

/* Alerts: a soft tint and a coloured left edge, as the platform's banners. */
.mud-alert { border-radius: var(--l3-radius-control); border-left: 3px solid transparent; }
.mud-alert-text-info { background: var(--l3-canvas); color: var(--l3-ink); border-left-color: var(--l3-ink); }
.mud-alert-text-success { background: var(--l3-teal-soft); color: #2f6466; border-left-color: var(--l3-teal); }
.mud-alert-text-warning { background: var(--l3-honey-soft); color: #7a5d00; border-left-color: var(--l3-honey); }
.mud-alert-text-error { background: var(--l3-accent-soft); color: #b5321b; border-left-color: var(--l3-accent); }
.mud-alert-text-info .mud-alert-icon, .mud-alert-text-success .mud-alert-icon,
.mud-alert-text-warning .mud-alert-icon, .mud-alert-text-error .mud-alert-icon { color: inherit; }

.mud-dialog { border-radius: var(--l3-radius-card); }
.mud-snackbar, .mud-popover { border-radius: var(--l3-radius-control); font-family: var(--l3-font-body); }
.mud-popover { border: 1px solid var(--l3-line); }

/* ---------- Print ---------------------------------------------------------- */
@media print {
    .mud-drawer, .mud-appbar, .l3-page-header__actions, .mud-button-root { display: none !important; }
    .mud-main-content { margin-left: 0 !important; padding-top: 0 !important; }
    html, body, .mud-layout { background: #fff; }
}

/* A fact's second line in the header band (a linked company, who created it). */
.l3-page-header__sub { font-size: 12.5px; color: rgba(237,233,227,.65); }

/* Label and value rows, as the platform's key-value lists: the label on the left, the figure on the right, so long
   labels wrap without pushing their numbers onto the next line. */
.l3-kv { display: flex; flex-direction: column; }
.l3-kv__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--l3-canvas); }
.l3-kv__row:last-child { border-bottom: none; }
.l3-kv__label { color: var(--l3-text-2); min-width: 0; }
.l3-kv__value { font-family: var(--l3-font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.l3-kv__row--sub .l3-kv__label { padding-left: 14px; font-size: 12.5px; }
.l3-kv__row--sub .l3-kv__value { font-size: 12.5px; color: var(--l3-text-2); }
.l3-kv__row--total { border-top: 2px solid var(--l3-ink); border-bottom: none; padding-top: 8px; }
.l3-kv__row--total .l3-kv__label { color: var(--l3-ink); font-weight: 500; }
.l3-kv__row--total .l3-kv__value { font-weight: 500; font-size: 15px; }
.l3-kv__group { font-family: var(--l3-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--l3-teal); padding: 14px 0 4px; }
.l3-kv__group:first-child { padding-top: 0; }

/* A plain chip in the header band would be dark on dark. */
.l3-page-header .mud-chip-filled.mud-chip-color-default { background: rgba(255,255,255,.14); color: #fff; }
/* Info chips are ink, the colour of the band itself, so in the band they get an outline to stand out. */
.l3-page-header .mud-chip-filled.mud-chip-color-info { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }

/* Honey is a fill colour; as text on white it is too faint, so text uses its dark shade. */
.mud-warning-text { color: #8a6a00 !important; }

/* Dashboard figures, as the platform's metric cards: a mono label over an Anton value, on a thin top rule. */
.mud-card.l3-metric { border-top: 3px solid var(--l3-ink); height: 100%; }
.l3-metric .mud-typography-h4 { font-size: 2.4rem; }
@media (max-width: 600px) { .l3-metric .mud-typography-h4 { font-size: 1.8rem; } }

/* Disabled buttons in the header band stay visible on ink. */
.l3-page-header .mud-button-root.mud-button-disabled,
.l3-page-header .mud-button-root:disabled { color: rgba(255,255,255,.35) !important; border-color: rgba(255,255,255,.2) !important; }
.l3-page-header .mud-button-filled.mud-button-disabled,
.l3-page-header .mud-button-filled:disabled { background: rgba(255,255,255,.1) !important; }

/* MudBlazor shows the active tab panel as display:contents, so padding given to it does nothing. Tabs whose panels
   hold loose content pad the panel container instead. */
.l3-tabs > .mud-tabs-panels { padding: 16px; background: var(--l3-surface); }
@media (max-width: 600px) { .l3-tabs > .mud-tabs-panels { padding: 12px; } }

/* The header of an expand/collapse block: the whole row is the button. */
.l3-collapse-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
}

/* Button labels stay on one line; a narrow row wraps the buttons, not the words inside them. */
.mud-button-label { white-space: nowrap; }
/* ...and a button is never squeezed narrower than its label, which cut labels and icons off where a row could not wrap. */
.mud-button-root { flex-shrink: 0; }

/* A quote section with nothing in it yet: greyed out, still openable. */
.mud-expand-panel.l3-section-empty .mud-expand-panel-header { background: var(--l3-hover); }
.mud-expand-panel.l3-section-empty .mud-expand-panel-header .mud-typography-h6 { color: var(--l3-muted); }
.mud-expand-panel.l3-section-empty .mud-expand-panel-header .mud-switch { opacity: .6; }

/* The "working" cover over the page while something slow runs (WorkingOverlay). It takes clicks straight away and
   fades in after a moment, so quick actions don't flash it. Above dialogs, below snackbars. */
.l3-working {
    position: fixed; inset: 0; z-index: 1450;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(36, 38, 60, .28);
    animation: l3-working-in .2s ease .35s both;
}
.l3-working__card {
    display: flex; align-items: center; gap: 16px; max-width: 420px;
    padding: 20px 24px; border-radius: 8px; background: var(--l3-surface);
    border-top: 3px solid var(--l3-accent); box-shadow: 0 8px 28px rgba(26, 28, 46, .25);
}
.l3-working__text { font-family: var(--l3-font-body); font-size: .95rem; color: var(--l3-ink); }
@keyframes l3-working-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .l3-working { animation-duration: .01s; } }