/* ============================================================
   mudblazor-overrides.css
   Overrides MudBlazor defaults so every Mud component renders in
   the e-Vibe 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: matte charcoal + soft iridescent 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;
}

/* ---------- 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 ---------- */
.portal-drawer.mud-drawer {
    background: var(--surface) !important;
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    margin: var(--chrome-gap) 0 var(--chrome-gap) var(--chrome-gap);
    height: calc(100vh - (2 * var(--chrome-gap)));
    box-shadow: var(--shadow-bento) !important;
}

/* 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 .18s ease, color .18s ease;
}
.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); }

.portal-drawer .mud-nav-link.active {
    background: var(--accent-soft);
    color: var(--nav-active-text); font-weight: 600;
}
.portal-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--accent); }

.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 {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-bento);
    transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

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

/* primary action: iridescent gradient pill */
.btn-ai.mud-button-filled-primary,
.btn-ai.mud-button-filled {
    background: var(--ai-gradient);
    color: var(--on-accent);
    border-radius: var(--radius-pill);
    box-shadow: none;
}
.btn-ai.mud-button-filled-primary:hover,
.btn-ai.mud-button-filled:hover { filter: brightness(1.06); box-shadow: none; }
/* pill-shape any plain button that opts in */
.btn-pill.mud-button-root { border-radius: var(--radius-pill); }

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