/* ============================================================
   mudblazor-overrides.css
   Overrides MudBlazor defaults so every Mud component renders in
   the Bento Grid look (flat, boxed, token-driven, light/dark).
   Used by the interactive client app AND by any MudBlazor component
   rendered on a public SSR page.
   Pairs with: custom.css (tokens + own classes) · bootstrap-overrides.css.
   Tokens live in custom.css — reference var(--token), never literals.
   ============================================================ */

/* ---------- Canvas: deep forest-teal + soft warm (terracotta/butter) glows ---------- */
.portal-canvas, .mud-layout.portal {
    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 560px at 100% -8%, var(--glow-violet), transparent 60%),
        radial-gradient(900px 520px at -8% 108%, var(--glow-blue), transparent 58%),
        radial-gradient(700px 480px at 50% 120%, var(--glow-rose), transparent 60%);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- Main content: full-height column so the footer sticks to the bottom ----------
   MudMainContent is plain block flow, so on a short page (a 1-row table) the footer stopped
   right under the content with dead canvas below it. Make the region at least a viewport tall
   and push the last child down. box-sizing is pinned to border-box so Mud's appbar padding-top
   counts inside the 100vh and never adds a phantom scrollbar. The content column keeps
   `flex: 1 0 auto` so it — not the footer — absorbs the free space. */
.mud-layout.portal .mud-main-content.portal-main {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* the app bar floats one gap below the top edge, so the page starts one gap lower than
       MudBlazor's flush-bar offset — the same air under the bar as beside it */
    padding-top: calc(var(--mud-appbar-height) + var(--chrome-gap));
}
.mud-layout.portal .portal-main > .mud-container { flex: 1 0 auto; }
.mud-layout.portal .portal-main > .app-foot { flex: 0 0 auto; margin-top: auto; }

/* ---------- App bar: translucent, floating, hairline ---------- */
.portal-appbar.mud-appbar {
    background: var(--surface-translucent) !important;
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border: 1px solid var(--outline);
    border-radius: var(--radius-pill);
    margin: var(--chrome-gap);
    width: auto;
    box-shadow: var(--shadow-bento) !important;
}
.portal-appbar .mud-text-secondary { color: var(--text-secondary); }

/* ---------- Drawer: floating matte surface card ----------
   The margin is logical (the drawer sits on the right in Arabic) and the height selector carries
   .mud-drawer-responsive on purpose: MudBlazor sets `height: 100%` at that specificity, which used to
   win and push the card's bottom corners one gap below the viewport. */
.portal-drawer.mud-drawer {
    background: var(--surface) !important;
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    margin: var(--chrome-gap);
    margin-inline-end: 0;
    box-shadow: var(--shadow-bento) !important;
}
.mud-layout.portal .portal-drawer.mud-drawer.mud-drawer-responsive {
    height: calc(100vh - (2 * var(--chrome-gap)));
    height: calc(100dvh - (2 * var(--chrome-gap)));
}

/* ---------- Floating chrome geometry (desktop, drawer docked) ----------
   MudBlazor lays the bar and the page out for a drawer flush against the edge: both start at exactly
   one drawer-width. Ours floats one gap in, so at those offsets the bar slid under the drawer on one
   side and ran off the viewport on the other (its width is `100% - drawer`), and the page began 8px
   from the drawer but 24px from the far edge. Everything is restated one gap further in; the bar is
   `position: fixed` with both insets at 0, so `width: auto` lets its margins define the pill.
   The -right twins are the same rules for Arabic, where the drawer docks on the right. 1280px is
   MudBlazor's `lg` breakpoint — the width from which a Responsive drawer docks. */
@media (min-width: 1280px) {
    .mud-layout.portal.mud-drawer-open-responsive-lg-left.mud-drawer-left-clipped-never .portal-appbar.mud-appbar {
        margin-left: calc(var(--mud-drawer-width-left) + 2 * var(--chrome-gap));
        width: auto;
    }
    .mud-layout.portal.mud-drawer-open-responsive-lg-left .portal-main.mud-main-content {
        margin-left: calc(var(--mud-drawer-width-left) + var(--chrome-gap));
    }
    .mud-layout.portal.mud-drawer-open-responsive-lg-right.mud-drawer-right-clipped-never .portal-appbar.mud-appbar {
        margin-right: calc(var(--mud-drawer-width-right) + 2 * var(--chrome-gap));
        width: auto;
    }
    .mud-layout.portal.mud-drawer-open-responsive-lg-right .portal-main.mud-main-content {
        margin-right: calc(var(--mud-drawer-width-right) + var(--chrome-gap));
    }
}

/* nav links — pill rows, accent-tinted active state */
.portal-drawer .mud-nav-link {
    color: var(--text-secondary);
    margin: 2px .65rem; padding: .6rem .85rem;
    border-radius: var(--radius-pill); font-weight: 500; font-size: .9rem;
    transition: background var(--duration-state) var(--ease-out), color var(--duration-state) var(--ease-out);
}
.portal-drawer .mud-nav-link .mud-nav-link-icon { color: var(--text-secondary); transition: color .18s ease; }
.portal-drawer .mud-nav-link:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
.portal-drawer .mud-nav-link:hover .mud-nav-link-icon { color: var(--accent); }

/* The selectors repeat MudBlazor's own (`.mud-navmenu … .active:not(.mud-nav-link-disabled)`): its
   default-colour rule is that specific, and a shorter selector here lost to it — the pill kept
   MudBlazor's faint wash while our white icon still applied, so in the light theme the active item's
   icon was white on near-white. */
.portal-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.portal-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
    background: var(--nav-active-bg);
    color: var(--on-accent-solid); font-weight: 600;
    box-shadow: 0 6px 18px -6px var(--accent);
}
.portal-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--on-accent-solid); }

.portal-drawer .mud-nav-link.mud-nav-link-disabled {
    color: var(--text-disabled) !important; opacity: 1;
}
.portal-drawer .mud-nav-link.mud-nav-link-disabled .mud-nav-link-icon { color: var(--text-disabled); }

/* ---------- Surface card: flat matte, contrast not shadow ---------- */
.surface-card.mud-paper,
button.surface-card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-bento);
    transition: background var(--duration-state) var(--ease-out), border-color var(--duration-state) var(--ease-out),
        transform var(--duration-state) var(--ease-out), box-shadow var(--duration-state) var(--ease-out);
}

/* A tile the user picks is a real <button> (keyboard + screen reader for free); strip the UA button
   chrome so the tile look above lands on it unchanged. */
button.surface-card {
    appearance: none;
    display: block;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
}

/* ---------- Data grid inside a surface card ----------
   MudDataGrid reuses the mud-table internals. Without this the toolbar, rows and
   pager ignore the card's radius and read as offset from the dark container — so we
   clip to the radius and give the toolbar content, the first/last cells and the pager
   one shared horizontal inset, keeping every column flush to the card edge. The
   toolbar's real content sits in an inner .mud-toolbar-gutters, so the inset goes
   there (zero the outer wrapper to avoid doubling). */
.surface-card.mud-table { overflow: hidden; }
.surface-card.mud-table > .mud-table-toolbar { padding-inline: var(--grid-inset); }
.surface-card.mud-table .mud-table-toolbar .mud-toolbar { padding-inline: 0; }
.surface-card.mud-table .mud-table-cell:first-child { padding-left: var(--grid-inset); }
.surface-card.mud-table .mud-table-cell:last-child { padding-right: var(--grid-inset); }
.surface-card.mud-table .mud-table-pagination { padding-inline: var(--grid-inset); }
.surface-card.mud-table .mud-table-pagination .mud-toolbar { padding-inline: 0; }

/* A grid toolbar grows with its filters. MudToolBar fixes its height for an app bar, so on a phone —
   where the filters stack — they spilled over the first rows of every multi-filter grid. One row of
   filters keeps MudBlazor's own height. */
.mud-table-toolbar { height: auto; min-height: var(--mud-internal-toolbar-height); }

/* primary action: solid Terracotta pill (gradient is reserved for brand mark / hero / progress) */
.btn-ai.mud-button-filled-primary,
.btn-ai.mud-button-filled {
    background: var(--accent);
    color: var(--on-accent-solid);
    border-radius: var(--radius-pill);
    box-shadow: none;
}
.btn-ai.mud-button-filled-primary:hover,
.btn-ai.mud-button-filled:hover { background: var(--accent); filter: brightness(1.05); box-shadow: none; }
/* pill-shape any plain button that opts in */
.btn-pill.mud-button-root { border-radius: var(--radius-pill); }

/* ---------- Press feedback ----------
   A button gives a little under the finger, so a click is answered before its result arrives.
   Text buttons only (.mud-button): the icon-button base class is shared by switches, checkboxes
   and radios, whose own thumb/tick already moves. */
.mud-button-root.mud-button { transition: transform var(--duration-press) var(--ease-out), background-color var(--duration-state) var(--ease-out), border-color var(--duration-state) var(--ease-out), color var(--duration-state) var(--ease-out), filter var(--duration-state) var(--ease-out); }
.mud-button-root.mud-button:active:not(:disabled) { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
    .mud-button-root.mud-button:active:not(:disabled) { transform: none; }
}

/* ---------- Tabs: sentence case ----------
   MudBlazor upper-cases tab labels. Ours already carry one all-caps voice — the accent eyebrow
   above every title and form group — and a second one beside it made a form's tab row shout louder
   than its own heading. Tabs read as the buttons do: sentence case, semibold. */
.mud-tabs .mud-tab { text-transform: none; font-weight: 600; font-size: .9rem; letter-spacing: .01em; }

/* ---------- Data grid typography ----------
   A column title stays on one line (a header that wraps doubles the header row's height for every
   column), and an action column (CellClass="cell-end") keeps its buttons on one row instead of
   stacking into a ragged pile. Below 600px the grid lists each cell as its own labelled line, where
   wrapping is right, so the action rule starts at the grid's own stacking breakpoint. */
.mud-table-head .mud-table-cell { white-space: nowrap; font-weight: 600; }
@media (min-width: 600px) {
    .mud-table-cell.cell-end { white-space: nowrap; }
}
/* the pager is reference information: one quiet line under the rows */
.mud-table-pagination .mud-table-pagination-caption,
.mud-table-pagination .mud-table-pagination-select { color: var(--text-secondary); font-size: .82rem; }

/* ---------- Form inputs: Bento "Filled" variant ----------
   Project rule: every Mud input (MudTextField/MudSelect/MudNumericField/…) is
   Variant="Variant.Filled". MudBlazor's stock filled fill is a hardcoded
   rgba(0,0,0,.09) — basically invisible on our deep forest surface — so we
   retint it to the surface tokens. We keep the signature filled silhouette:
   a subtly-shaded box, rounded ONLY at the top, with a flat bottom underline
   that thickens to the accent on focus (Mud draws it via :before/:after, so
   there is no 1px reflow on focus). Light + dark both ride the tokens. */
.mud-input.mud-input-filled {
    background-color: var(--field-fill);
    border-top-left-radius: var(--radius-input);
    border-top-right-radius: var(--radius-input);
}
.mud-input.mud-input-filled:hover { background-color: var(--field-fill-hover); }
.mud-input.mud-input-filled.mud-focused { background-color: var(--field-fill); }

/* resting underline → hairline; hover → stronger; focus/active (:after) → accent */
.mud-input.mud-input-filled.mud-input-underline::before { border-bottom-color: var(--outline-strong); }
.mud-input.mud-input-filled.mud-input-underline:hover::before { border-bottom-color: var(--text-secondary); }
.mud-input.mud-input-filled.mud-input-underline::after { border-bottom-color: var(--accent); }
/* error keeps Mud's behaviour but recoloured to our error token */
.mud-input.mud-input-filled.mud-input-underline.mud-input-error::after { border-bottom-color: var(--error); }

/* ---------- Responsive (MudBlazor chrome) ---------- */
@media (max-width: 600px) {
    .portal-drawer.mud-drawer { border-radius: var(--radius-sm); }
    .page-header__actions .mud-button-root { width: 100%; }
}