/* ============================================================================================
   Glass design system — the single source of truth for the redesign's surfaces.

   Everything here is layered *on top of* MudBlazor's own stylesheet: MudBlazor keeps painting the
   palette (see Common/BcTheme.cs, which supplies both PaletteLight and PaletteDark), and this file
   turns its flat Material surfaces into frosted panes floating over a colour-mesh background.

   Theme switching is a class on <html> — `thm-dark` or `thm-light` — stamped server-side in
   Components/App.razor from the bc_theme cookie, so the first paint is already correct with no
   flash and no JavaScript. Every colour below comes from a token defined in those two blocks; never
   hardcode a hex in a page or a component.

   RTL: use logical properties (inset-inline-*, margin-inline-*, text-align: start/end). MudBlazor
   flips the drawer by swapping .mud-drawer-pos-left for .mud-drawer-pos-right, so shell rules are
   written once per anchor rather than relying on direction alone.
   ============================================================================================ */

/* ── Tokens ───────────────────────────────────────────────────────────────────────────────── */

.thm-dark {
    --bc-base: #140F1A;
    /* The four mesh blooms that make the background read as lit glass rather than flat paint. */
    --bc-m1: rgba(138, 102, 160, .60);
    --bc-m2: rgba(31, 92, 35, .50);
    --bc-m3: rgba(62, 37, 73, .85);
    --bc-m4: rgba(156, 196, 155, .16);

    --bc-pane: rgba(255, 255, 255, .055);
    --bc-pane-2: rgba(255, 255, 255, .10);
    --bc-pane-3: rgba(255, 255, 255, .14);
    --bc-pane-solid: rgba(24, 17, 31, .80);
    --bc-field: rgba(255, 255, 255, .05);

    --bc-edge: rgba(255, 255, 255, .10);
    --bc-edge-strong: rgba(255, 255, 255, .22);

    --bc-ink: #F5F1F8;
    --bc-ink-2: #C9BFD2;
    --bc-ink-3: #ADA2B8;

    --bc-accent: #C39BD8;
    --bc-accent-btn: #7E52A0;
    --bc-accent-ink: #FFFFFF;
    --bc-accent-wash: rgba(138, 102, 160, .22);

    --bc-green: #9CC49B;
    --bc-warn: #EBBE55;
    --bc-err: #F2938B;
    --bc-info: #A3AFF2;
    --bc-danger-btn: #B3453C;

    --bc-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    --bc-shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
    --bc-hi: inset 0 1px 0 rgba(255, 255, 255, .14);
    --bc-row-hover: rgba(255, 255, 255, .05);
    --bc-scrim: rgba(12, 8, 16, .55);
    --bc-media-shadow: 0 6px 16px rgba(0, 0, 0, .40);
    --bc-tint: .16;
}

.thm-light {
    --bc-base: #EDE7F2;
    --bc-m1: rgba(138, 102, 160, .48);
    --bc-m2: rgba(156, 196, 155, .55);
    --bc-m3: rgba(91, 58, 107, .26);
    --bc-m4: rgba(255, 255, 255, .55);

    --bc-pane: rgba(255, 255, 255, .55);
    --bc-pane-2: rgba(255, 255, 255, .78);
    --bc-pane-3: rgba(255, 255, 255, .95);
    --bc-pane-solid: rgba(255, 255, 255, .92);
    --bc-field: rgba(255, 255, 255, .68);

    --bc-edge: rgba(255, 255, 255, .80);
    --bc-edge-strong: rgba(91, 58, 107, .20);

    --bc-ink: #221A29;
    --bc-ink-2: #5A5064;
    --bc-ink-3: #5E5568;

    --bc-accent: #5B3A6B;
    --bc-accent-btn: #5B3A6B;
    --bc-accent-ink: #FFFFFF;
    --bc-accent-wash: rgba(91, 58, 107, .10);

    --bc-green: #1F5C23;
    --bc-warn: #7A5400;
    --bc-err: #B3261E;
    --bc-info: #3A49A8;
    --bc-danger-btn: #B3261E;

    --bc-shadow: 0 18px 40px rgba(60, 40, 75, .18);
    --bc-shadow-lg: 0 30px 70px rgba(60, 40, 75, .28);
    --bc-hi: inset 0 1px 0 rgba(255, 255, 255, .95);
    --bc-row-hover: rgba(91, 58, 107, .06);
    --bc-scrim: rgba(60, 40, 75, .35);
    --bc-media-shadow: 0 6px 16px rgba(60, 40, 75, .18);
    --bc-tint: .12;
}

/* Shared geometry — the redesign's rhythm, in one place. */
.thm-dark,
.thm-light {
    --bc-gap: 18px;
    --bc-rail: 272px;
    /* The design's bar is content-driven and lands at 71px (12px padding around a 47px user chip);
       pinning it keeps the main content's top offset a single sum rather than a guess. */
    --bc-bar: 71px;
    --bc-r-pane: 22px;
    --bc-r-rail: 26px;
    --bc-r-inner: 18px;
    --bc-r-field: 14px;
    --bc-r-pill: 999px;
    --bc-blur: blur(24px) saturate(150%);
    --bc-blur-strong: blur(34px) saturate(160%);
    --bc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Background ───────────────────────────────────────────────────────────────────────────── */

html {
    background-color: var(--bc-base);
}

/* Body has to stay see-through or it would paint over the mesh behind it (a negative-z-index
   pseudo-element sits behind its parent's content, but not behind its parent's background). */
body {
    background: transparent !important;
}

/* The mesh is a fixed pseudo-element rather than a body background so it never scrolls with the
   content and never tints what sits on top of it. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(52% 46% at 14% 8%, var(--bc-m1) 0%, transparent 62%),
        radial-gradient(44% 40% at 88% 16%, var(--bc-m2) 0%, transparent 60%),
        radial-gradient(60% 55% at 76% 92%, var(--bc-m3) 0%, transparent 65%),
        radial-gradient(38% 34% at 34% 78%, var(--bc-m4) 0%, transparent 62%);
}

/* MudBlazor paints the layout and main content opaque; the mesh has to show through both. */
.mud-layout,
.mud-main-content {
    background: transparent !important;
}

/* ── Scrollbars ───────────────────────────────────────────────────────────────────────────── */

* {
    scrollbar-width: thin;
}

.thm-dark * {
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.thm-light * {
    scrollbar-color: rgba(91, 58, 107, .28) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: var(--bc-r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
    background-color: var(--bc-edge-strong);
}

/* ── Shell: drawer ────────────────────────────────────────────────────────────────────────── */

/* The rail floats: inset on all four sides with rounded corners, rather than butting against the
   viewport. --mud-drawer-width-left is 290px (rail + one gap) so MudBlazor's own main-content
   offset lands exactly one gap clear of the rail's right edge — but that same variable is what
   MudBlazor sizes the drawer from, via a rule more specific than this one. Without the !important
   the rail renders 290px wide and swallows the gap it was meant to leave. */
.mud-drawer.mud-drawer-fixed {
    top: var(--bc-gap) !important;
    bottom: var(--bc-gap);
    height: auto !important;
    width: var(--bc-rail) !important;
    border-radius: var(--bc-r-rail);
    background: var(--bc-pane) !important;
    backdrop-filter: var(--bc-blur-strong);
    -webkit-backdrop-filter: var(--bc-blur-strong);
    border: 1px solid var(--bc-edge);
    box-shadow: var(--bc-shadow), var(--bc-hi);
    overflow: hidden;
}

.mud-drawer.mud-drawer-fixed.mud-drawer-pos-left.mud-drawer--open {
    left: var(--bc-gap);
}

.mud-drawer.mud-drawer-fixed.mud-drawer-pos-right.mud-drawer--open {
    right: var(--bc-gap);
}

.mud-drawer.mud-drawer-fixed.mud-drawer-pos-left.mud-drawer--closed {
    left: calc(-1 * (var(--bc-rail) + var(--bc-gap)));
}

.mud-drawer.mud-drawer-fixed.mud-drawer-pos-right.mud-drawer--closed {
    right: calc(-1 * (var(--bc-rail) + var(--bc-gap)));
}

/* Temporary (phone) drawer slides in flush — no floating gap to fight the overlay. */
.mud-drawer.mud-drawer-temporary {
    top: 0 !important;
    bottom: auto;
    height: 100% !important;
    border-radius: 0;
}

.mud-drawer-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 4px;
}

/* ── Shell: brand header inside the rail ──────────────────────────────────────────────────── */

.bc-rail-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--bc-edge);
    flex: none;
}

.bc-rail-mark {
    width: 42px;
    height: 42px;
    border-radius: var(--bc-r-field);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(138, 102, 160, .55), rgba(31, 92, 35, .45));
    border: 1px solid var(--bc-edge-strong);
    box-shadow: var(--bc-hi);
    color: var(--bc-ink);
}

.bc-rail-mark img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bc-rail-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bc-ink);
    min-width: 0;
}

.bc-rail-credit {
    flex: none;
    padding: 14px 20px;
    border-top: 1px solid var(--bc-edge);
    text-align: center;
    font-size: 11px;
}

.bc-rail-credit a {
    color: var(--bc-ink-3);
    text-decoration: none;
}

.bc-rail-credit a:hover {
    color: var(--bc-accent);
}

/* ── Shell: nav ───────────────────────────────────────────────────────────────────────────── */

.mud-navmenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}

.mud-navmenu .mud-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--bc-r-field);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bc-ink-2);
    border: 1px solid transparent;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}

.mud-navmenu .mud-nav-link .mud-nav-link-icon {
    font-size: 20px;
    color: var(--bc-ink-3);
    flex: none;
    margin: 0;
}

.mud-navmenu .mud-nav-link:hover {
    background: var(--bc-row-hover);
    color: var(--bc-ink);
}

.mud-navmenu .mud-nav-link.active {
    background: var(--bc-pane-2);
    border-color: var(--bc-edge);
    box-shadow: var(--bc-hi);
    color: var(--bc-ink);
    font-weight: 700;
}

.mud-navmenu .mud-nav-link.active .mud-nav-link-icon {
    color: var(--bc-accent);
}

/* Group headers read as section labels, not as another link. */
.mud-navmenu .mud-nav-group > .mud-nav-link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bc-ink-3);
}

.mud-navmenu .mud-nav-group.mud-expanded > .mud-nav-link,
.mud-navmenu .mud-nav-group.mud-expanded > .mud-nav-link .mud-nav-link-icon {
    color: var(--bc-ink);
}

.mud-navmenu .mud-nav-group.mud-expanded > .mud-nav-link .mud-nav-link-icon {
    color: var(--bc-accent);
}

/* MudBlazor indents nested links with padding-inline-start:36px and drops the trailing padding,
   which leaves a child row wider than its parent and flush to the rail's edge. The design indents
   the whole row instead, so it keeps its own padding and stays inside the rail. */
.mud-navmenu .mud-nav-group .mud-collapse-container .mud-nav-link {
    margin-inline-start: 14px;
    width: calc(100% - 14px);
    padding-inline: 14px !important;
    font-size: 13px;
}

.mud-navmenu .mud-nav-group .mud-collapse-container .mud-nav-link .mud-nav-link-icon {
    font-size: 19px;
}

.mud-navmenu .mud-nav-link-expand-icon {
    color: var(--bc-ink-3);
}

/* ── Shell: app bar ───────────────────────────────────────────────────────────────────────── */

/* The <header> stays a transparent positioning shell; the toolbar inside it is the glass pill, so
   MudBlazor's drawer-aware margin/width maths keeps working untouched. */
.mud-appbar {
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
}

.mud-appbar > .mud-toolbar {
    pointer-events: auto;
    margin: var(--bc-gap);
    height: var(--bc-bar);
    min-height: var(--bc-bar);
    padding-inline: 22px 14px;
    gap: 12px;
    border-radius: var(--bc-r-pane);
    background: var(--bc-pane);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--bc-edge);
    box-shadow: var(--bc-shadow), var(--bc-hi);
    color: var(--bc-ink);
}

/* Main content clears the pill (gap + bar + gap) and keeps one gap either side. */
.mud-main-content {
    padding-top: calc(var(--bc-bar) + var(--bc-gap) * 2) !important;
    padding-inline: var(--bc-gap) !important;
    padding-bottom: 26px !important;
}

/* ── Top bar contents ─────────────────────────────────────────────────────────────────────── */

.bc-topbar-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bc-topbar-title h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--bc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-topbar-title p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--bc-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    border-radius: var(--bc-r-pill);
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    box-shadow: var(--bc-hi);
}

.bc-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #6D4489, #1A4D1E);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.bc-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bc-ink);
    line-height: 1.2;
}

.bc-user-role {
    font-size: 11px;
    color: var(--bc-ink-3);
    line-height: 1.2;
}

/* The headline figure a detail page leads with — a customer's balance, a PIN's value. Sits at the
   trailing end of the page's own title row (the compact .bc-balance-chip is the app-bar variant). */
.bc-figure-card {
    padding: 12px 24px;
    border-radius: 18px;
    text-align: end;
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge-strong);
    box-shadow: var(--bc-hi);
}

.bc-figure-card strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--bc-accent);
}

.bc-figure-card span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--bc-ink-3);
}

/* The title row on a detail page: back plate, name, chips, then the figure card. */
.bc-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: var(--bc-gap);
}

.bc-detail-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--bc-ink);
}

/* The portal's running balance, shown in the bar on customer pages. */
.bc-balance-chip {
    padding: 8px 18px;
    border-radius: 16px;
    text-align: end;
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge-strong);
    box-shadow: var(--bc-hi);
}

.bc-balance-chip strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bc-accent);
    line-height: 1.1;
}

.bc-balance-chip span {
    font-size: 10.5px;
    color: var(--bc-ink-3);
}

.mud-appbar .mud-icon-button {
    color: var(--bc-ink-2);
    border-radius: 12px;
    border: 1px solid transparent;
}

.mud-appbar .mud-icon-button:hover {
    background: var(--bc-pane-2);
    border-color: var(--bc-edge);
    color: var(--bc-ink);
}

/* ── Segmented controls: language + theme ─────────────────────────────────────────────────── */

.bc-seg {
    display: inline-flex;
    align-items: center;
    margin: 0;
    border-radius: var(--bc-r-pill);
    overflow: hidden;
    border: 1px solid var(--bc-edge);
    background: var(--bc-pane-2);
}

.bc-seg button {
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--bc-ink-3);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bc-seg button + button {
    border-inline-start: 1px solid var(--bc-edge);
}

.bc-seg button:hover {
    color: var(--bc-ink);
    background: var(--bc-row-hover);
}

.bc-seg button.current {
    background: var(--bc-pane-3);
    box-shadow: var(--bc-hi);
    color: var(--bc-ink);
    font-weight: 700;
    cursor: default;
}

.bc-seg .mud-icon-root {
    font-size: 15px;
}

/* ── Surfaces: paper, cards ───────────────────────────────────────────────────────────────── */

.mud-paper:not(.mud-alert):not(.mud-popover):not(.mud-table-toolbar) {
    background: var(--bc-pane);
    backdrop-filter: var(--bc-blur);
    -webkit-backdrop-filter: var(--bc-blur);
    border: 1px solid var(--bc-edge);
    border-radius: var(--bc-r-pane);
    box-shadow: var(--bc-shadow), var(--bc-hi);
    color: var(--bc-ink);
}

/* Elevation is expressed by the glass, not by a Material drop shadow stack. */
.mud-paper.mud-elevation-0 {
    box-shadow: var(--bc-hi);
}

.mud-card {
    background: var(--bc-pane);
    border: 1px solid var(--bc-edge);
    border-radius: var(--bc-r-pane);
    box-shadow: var(--bc-shadow), var(--bc-hi);
    backdrop-filter: var(--bc-blur);
    -webkit-backdrop-filter: var(--bc-blur);
    overflow: hidden;
}

.mud-card-content {
    color: var(--bc-ink-2);
}

/* A pane nested inside another pane must not double the frost. */
.mud-paper .mud-paper:not(.mud-popover) {
    background: var(--bc-pane-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--bc-hi);
    border-radius: var(--bc-r-inner);
}

.mud-divider {
    border-color: var(--bc-edge);
}

/* ── Typography ───────────────────────────────────────────────────────────────────────────── */

.mud-typography {
    color: inherit;
}

.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    color: var(--bc-ink);
    letter-spacing: -.01em;
    font-weight: 700;
}

.mud-typography-subtitle1,
.mud-typography-subtitle2 {
    color: var(--bc-ink);
    font-weight: 700;
}

.mud-typography-body1,
.mud-typography-body2 {
    color: var(--bc-ink-2);
}

.mud-typography-caption {
    color: var(--bc-ink-3);
}

/* Serials, PINs, batch references, 2FA keys — anything that has to line up character by character. */
.bc-mono {
    font-family: var(--bc-mono);
    font-feature-settings: "tnum" 1;
}

/* Section label above a group of panes ("REPORTS", provider name, …). */
.bc-section-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bc-ink-2);
}

.bc-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bc-edge);
}

.bc-hint {
    font-size: 12px;
    color: var(--bc-ink-3);
    line-height: 1.5;
}

/* A standing note about the page itself — not an event, so it is quieter than a MudAlert and
   carries no severity. */
.bc-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--bc-r-inner);
    font-size: 13px;
    line-height: 1.5;
    color: var(--bc-ink-2);
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
}

.bc-note .mud-icon-root {
    flex: none;
    margin-top: 1px;
}

.bc-note.bc-note-accent {
    background: var(--bc-accent-wash);
}

.bc-note.bc-note-accent .mud-icon-root {
    color: var(--bc-accent);
}

/* ── Tables ───────────────────────────────────────────────────────────────────────────────── */

/* A table is the pane's inner surface: rounded, outlined, frosted rows over the glass. */
.mud-table {
    background: transparent !important;
    box-shadow: none !important;
    border: none;
}

.mud-table.mud-table-outlined {
    border: none;
}

.mud-table > .mud-table-container {
    border-radius: var(--bc-r-inner);
    overflow: auto;
    border: 1px solid var(--bc-edge);
    background: transparent;
}

.mud-table .mud-table-root {
    background: transparent;
}

.mud-table .mud-table-head .mud-table-cell {
    padding: 11px 16px;
    background: var(--bc-pane-2);
    border-bottom: 1px solid var(--bc-edge);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bc-ink-3);
    white-space: nowrap;
}

.mud-table .mud-table-head .mud-table-cell .mud-button-root,
.mud-table .mud-table-head .mud-table-cell .mud-table-sort-label {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

.mud-table .mud-table-body .mud-table-cell {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--bc-ink-2);
    border-bottom: 1px solid var(--bc-edge);
}

/* Dense is the app's default, but the redesign's rows are not cramped: it keeps the same 11/16
   rhythm as a normal row and only gives up the extra line-height. Squeezing these was what made
   every list read as one solid block. */
.mud-table.mud-table-dense .mud-table-body .mud-table-cell,
.mud-table.mud-table-dense .mud-table-head .mud-table-cell {
    padding: 11px 16px;
}

.mud-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

.mud-table .mud-table-body .mud-table-row:hover {
    background: var(--bc-row-hover) !important;
}

.mud-table .mud-table-foot .mud-table-cell {
    background: var(--bc-pane-2);
    border-top: 1px solid var(--bc-edge);
    color: var(--bc-ink);
    font-weight: 700;
}

.mud-table-pagination,
.mud-table-toolbar {
    background: transparent !important;
    border: none;
    color: var(--bc-ink-2);
}

.mud-table-pagination {
    padding-inline: 4px;
    font-size: 12px;
}

.mud-table-pagination .mud-select .mud-input-slot {
    color: var(--bc-ink);
    font-weight: 700;
}

/* MudSimpleTable renders plain <td>s rather than .mud-table-cell, so the rules above miss it.
   It is used for the label/value blocks on the detail pages. */
.mud-simple-table table td,
.mud-simple-table table th {
    border-color: var(--bc-edge);
    color: var(--bc-ink-2);
    padding: 9px 14px;
}

.mud-simple-table table td b,
.mud-simple-table table th {
    color: var(--bc-ink);
}

/* Sticky header inside a scrolling pane, as the report tables use. */
.mud-table.mud-table-sticky-header .mud-table-head .mud-table-cell {
    background: var(--bc-pane-solid);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ── Chips ────────────────────────────────────────────────────────────────────────────────── */

.mud-chip {
    height: 24px;
    padding: 0 10px;
    border-radius: var(--bc-r-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    box-shadow: none;
}

.mud-chip.mud-chip-size-medium {
    height: 26px;
}

.mud-chip.mud-chip-filled.mud-chip-color-default {
    background: var(--bc-pane-2);
    color: var(--bc-ink-2);
    border-color: var(--bc-edge);
}

.mud-chip.mud-chip-outlined {
    background: var(--bc-pane-2);
    border-color: var(--bc-edge);
}

/* Tone chips: a wash of the tone plus the tone as ink, rather than a solid block of colour. */
.mud-chip.mud-chip-filled.mud-chip-color-success {
    background: color-mix(in srgb, var(--bc-green) calc(var(--bc-tint) * 100%), transparent);
    color: var(--bc-green);
}

.mud-chip.mud-chip-filled.mud-chip-color-warning {
    background: color-mix(in srgb, var(--bc-warn) calc(var(--bc-tint) * 100%), transparent);
    color: var(--bc-warn);
}

.mud-chip.mud-chip-filled.mud-chip-color-error {
    background: color-mix(in srgb, var(--bc-err) calc(var(--bc-tint) * 100%), transparent);
    color: var(--bc-err);
}

.mud-chip.mud-chip-filled.mud-chip-color-info {
    background: color-mix(in srgb, var(--bc-info) calc(var(--bc-tint) * 100%), transparent);
    color: var(--bc-info);
}

.mud-chip.mud-chip-filled.mud-chip-color-primary {
    background: color-mix(in srgb, var(--bc-accent) calc(var(--bc-tint) * 100%), transparent);
    color: var(--bc-accent);
}

.mud-chip.mud-chip-filled.mud-chip-color-secondary {
    background: color-mix(in srgb, var(--bc-green) calc(var(--bc-tint) * 100%), transparent);
    color: var(--bc-green);
}

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────── */

.mud-button-root {
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
}

.mud-button-filled {
    box-shadow: none;
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--bc-accent-btn);
    color: var(--bc-accent-ink);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--bc-accent-btn) 40%, transparent), var(--bc-hi);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background: color-mix(in srgb, var(--bc-accent-btn) 85%, #fff);
}

.mud-button-filled.mud-button-filled-error {
    background: var(--bc-danger-btn);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--bc-danger-btn) 40%, transparent), var(--bc-hi);
}

.mud-button-filled.mud-button-filled-secondary {
    background: var(--bc-green);
    color: var(--bc-accent-ink);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--bc-green) 35%, transparent), var(--bc-hi);
}

.mud-button-outlined {
    background: var(--bc-pane);
    border-color: var(--bc-edge-strong);
    color: var(--bc-accent);
}

.mud-button-outlined:hover {
    background: var(--bc-pane-2);
    border-color: var(--bc-edge-strong);
}

.mud-button-text {
    color: var(--bc-accent);
}

.mud-button-text:hover {
    background: var(--bc-accent-wash);
}

.mud-icon-button {
    color: var(--bc-ink-2);
}

.mud-icon-button:hover {
    background: var(--bc-row-hover);
    color: var(--bc-ink);
}

.mud-icon-button.mud-icon-button-color-primary {
    color: var(--bc-accent);
}

.mud-icon-button.mud-icon-button-color-error {
    color: var(--bc-err);
}

/* "Back to the list" on a detail page: a rounded glass plate rather than a bare icon, so it reads
   as a control against the page's own panes. */
.mud-icon-button.bc-back {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--bc-pane);
    border: 1px solid var(--bc-edge);
    box-shadow: var(--bc-hi);
    color: var(--bc-ink-2);
}

.mud-icon-button.bc-back:hover {
    background: var(--bc-pane-2);
    color: var(--bc-ink);
}

/* A compact square action, as used in the stock card footers. */
.bc-icon-action {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    color: var(--bc-accent);
}

.bc-icon-action:disabled {
    background: transparent;
    color: var(--bc-ink-3);
}

.mud-fab {
    border-radius: var(--bc-r-field);
}

/* ── Inputs ───────────────────────────────────────────────────────────────────────────────── */

.mud-input-label,
.mud-input-label-inputcontrol {
    color: var(--bc-ink-3);
}

.mud-input,
.mud-input-slot,
.mud-input-root {
    color: var(--bc-ink);
}

.mud-input-root::placeholder,
.mud-input-slot::placeholder {
    color: var(--bc-ink-3);
    opacity: 1;
}

/* Outlined is the house variant: a frosted well with a soft edge, not a Material notch. */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--bc-r-field);
    border-color: var(--bc-edge);
}

.mud-input.mud-input-outlined {
    background: var(--bc-field);
    border-radius: var(--bc-r-field);
    box-shadow: var(--bc-hi);
}

.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--bc-edge-strong);
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--bc-accent);
    border-width: 1px;
}

.mud-input.mud-input-outlined.mud-focused {
    box-shadow: var(--bc-hi), 0 0 0 3px var(--bc-accent-wash);
}

.mud-input.mud-input-filled {
    background: var(--bc-field);
    border-radius: var(--bc-r-field) var(--bc-r-field) 0 0;
}

.mud-input.mud-input-underline::before {
    border-bottom-color: var(--bc-edge-strong);
}

.mud-input-adornment,
.mud-input-adornment .mud-icon-root {
    color: var(--bc-ink-3);
}

.mud-input-helper-text {
    color: var(--bc-ink-3);
    font-size: 11.5px;
}

.mud-input-helper-text.mud-input-error,
.mud-input-error .mud-input-helper-text {
    color: var(--bc-err);
}

/* ── Switches, checkboxes, radios, sliders ────────────────────────────────────────────────── */

.mud-switch .mud-switch-track {
    background: var(--bc-edge-strong);
    opacity: 1;
    border-radius: var(--bc-r-pill);
}

.mud-switch .mud-switch-base.mud-checked + .mud-switch-track,
.mud-switch .mud-switch-base.mud-checked ~ .mud-switch-track {
    background: var(--bc-accent-btn);
    opacity: 1;
}

.mud-switch .mud-switch-thumb {
    background: var(--bc-ink-3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.mud-switch .mud-checked .mud-switch-thumb {
    background: #fff;
}

.mud-checkbox .mud-icon-root,
.mud-radio .mud-icon-root {
    color: var(--bc-ink-3);
}

.mud-checkbox .mud-checked .mud-icon-root,
.mud-radio .mud-checked .mud-icon-root {
    color: var(--bc-accent);
}

.mud-slider .mud-slider-track {
    background: var(--bc-accent);
}

/* ── Alerts ───────────────────────────────────────────────────────────────────────────────── */

/* Alerts read as tinted notes with a tone rule down the leading edge. */
.mud-alert {
    border-radius: 16px;
    padding: 13px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bc-ink-2);
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    border-inline-start: 3px solid var(--bc-ink-3);
    box-shadow: none;
    backdrop-filter: none;
}

.mud-alert .mud-alert-message {
    padding: 0;
    color: inherit;
}

.mud-alert .mud-alert-icon {
    padding: 0;
    margin-inline-end: 11px;
    align-items: flex-start;
}

.mud-alert.mud-alert-filled-success,
.mud-alert.mud-alert-outlined-success,
.mud-alert.mud-alert-text-success {
    background: color-mix(in srgb, var(--bc-green) calc(var(--bc-tint) * 90%), transparent);
    border-inline-start-color: var(--bc-green);
    color: var(--bc-ink-2);
}

.mud-alert.mud-alert-filled-warning,
.mud-alert.mud-alert-outlined-warning,
.mud-alert.mud-alert-text-warning {
    background: color-mix(in srgb, var(--bc-warn) calc(var(--bc-tint) * 90%), transparent);
    border-inline-start-color: var(--bc-warn);
    color: var(--bc-ink-2);
}

.mud-alert.mud-alert-filled-error,
.mud-alert.mud-alert-outlined-error,
.mud-alert.mud-alert-text-error {
    background: color-mix(in srgb, var(--bc-err) calc(var(--bc-tint) * 90%), transparent);
    border-inline-start-color: var(--bc-err);
    color: var(--bc-ink-2);
}

.mud-alert.mud-alert-filled-info,
.mud-alert.mud-alert-outlined-info,
.mud-alert.mud-alert-text-info {
    background: color-mix(in srgb, var(--bc-info) calc(var(--bc-tint) * 90%), transparent);
    border-inline-start-color: var(--bc-info);
    color: var(--bc-ink-2);
}

.mud-alert.mud-alert-filled-success .mud-alert-icon,
.mud-alert.mud-alert-outlined-success .mud-alert-icon,
.mud-alert.mud-alert-text-success .mud-alert-icon {
    color: var(--bc-green);
}

.mud-alert.mud-alert-filled-warning .mud-alert-icon,
.mud-alert.mud-alert-outlined-warning .mud-alert-icon,
.mud-alert.mud-alert-text-warning .mud-alert-icon {
    color: var(--bc-warn);
}

.mud-alert.mud-alert-filled-error .mud-alert-icon,
.mud-alert.mud-alert-outlined-error .mud-alert-icon,
.mud-alert.mud-alert-text-error .mud-alert-icon {
    color: var(--bc-err);
}

.mud-alert.mud-alert-filled-info .mud-alert-icon,
.mud-alert.mud-alert-outlined-info .mud-alert-icon,
.mud-alert.mud-alert-text-info .mud-alert-icon {
    color: var(--bc-info);
}

/* ── Dialogs ──────────────────────────────────────────────────────────────────────────────── */

.mud-overlay .mud-overlay-scrim,
.mud-overlay-dialog + .mud-overlay-scrim,
.mud-dialog-container .mud-overlay-scrim {
    background: var(--bc-scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mud-dialog {
    border-radius: var(--bc-r-pane);
    background: var(--bc-pane-solid);
    backdrop-filter: blur(34px) saturate(160%);
    -webkit-backdrop-filter: blur(34px) saturate(160%);
    border: 1px solid var(--bc-edge-strong);
    box-shadow: var(--bc-shadow-lg), var(--bc-hi);
    overflow: hidden;
    color: var(--bc-ink);
}

.mud-dialog .mud-dialog-title {
    padding: 16px 20px;
    border-bottom: 1px solid var(--bc-edge);
    color: var(--bc-ink);
}

.mud-dialog .mud-dialog-title .mud-typography {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bc-ink);
}

.mud-dialog .mud-dialog-content {
    padding: 18px 20px;
    color: var(--bc-ink-2);
}

.mud-dialog .mud-dialog-actions {
    padding: 14px 20px;
    gap: 10px;
    border-top: 1px solid var(--bc-edge);
    background: var(--bc-pane-2);
    margin: 0;
}

/* ── Dialog forms ─────────────────────────────────────────────────────────────────────────── */

/* The redesign's field is a caption above a rounded well, not Material's floating label over an
   underline. MudBlazor emits the label *after* the input inside the container, so reversing the
   column puts it where the design wants it without touching a single page's markup.
   :has() scopes this to real text/select/date controls — switches, checkboxes and radio groups
   are also .mud-input-controls and must keep their own layout. */
.mud-dialog .mud-input-control-input-container:has(> .mud-input) {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
}

.mud-dialog .mud-input-control-input-container:has(> .mud-input) > .mud-input-label {
    position: static;
    transform: none;
    transition: none;
    pointer-events: auto;
    max-width: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bc-ink-3);
    margin: 0 0 7px;
    line-height: 1.2;
}

.mud-dialog .mud-input-control-input-container > .mud-input {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 13px;
    background: var(--bc-field);
    border: 1px solid var(--bc-edge);
    box-shadow: var(--bc-hi);
    box-sizing: border-box;
    margin: 0;
}

/* Kill Material's underline and its focus swipe — the well carries the state instead. */
.mud-dialog .mud-input-control-input-container > .mud-input::before,
.mud-dialog .mud-input-control-input-container > .mud-input::after {
    display: none;
}

.mud-dialog .mud-input-control-input-container > .mud-input.mud-input-outlined {
    padding: 0 14px;
}

.mud-dialog .mud-input-control-input-container > .mud-input.mud-input-outlined .mud-input-outlined-border {
    display: none;
}

.mud-dialog .mud-input-control-input-container > .mud-input:hover {
    border-color: var(--bc-edge-strong);
}

.mud-dialog .mud-input-control-input-container > .mud-input.mud-focused {
    border-color: var(--bc-accent);
    box-shadow: var(--bc-hi), 0 0 0 3px var(--bc-accent-wash);
}

.mud-dialog .mud-input-slot,
.mud-dialog .mud-input-root {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bc-ink);
}

.mud-dialog .mud-input-slot::placeholder {
    font-weight: 400;
    color: var(--bc-ink-3);
}

/* A multi-line field grows instead of being pinned to the single-row height. */
.mud-dialog .mud-input-control-input-container > .mud-input:has(.mud-input-root-multiline) {
    min-height: 0;
    padding: 11px 14px;
}

.mud-dialog .mud-input-helper-text {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.45;
}

/* One rhythm between fields, overriding whatever mt-* a page happened to use. */
.mud-dialog .mud-input-control + .mud-input-control {
    margin-top: 14px !important;
}

/* A field with an action beside it — the "generate a password" dice. With the label now sitting
   above the well, centring the row would float the button level with the caption; the design has it
   square against the well, as a plate of the same height. */
.mud-dialog .mud-stack.mud-stack-row:has(> .mud-input-control) {
    align-items: flex-end !important;
    gap: 8px;
}

.mud-dialog .mud-stack.mud-stack-row:has(> .mud-input-control) > .mud-input-control {
    flex: 1;
    min-width: 0;
}

.mud-dialog .mud-stack.mud-stack-row:has(> .mud-input-control) > .mud-icon-button {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    color: var(--bc-accent);
}

/* The order total / headline figure a dialog confirms before you commit to it. */
.bc-dlg-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--bc-r-field);
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
}

.bc-dlg-total span {
    font-size: 12.5px;
    color: var(--bc-ink-2);
}

.bc-dlg-total strong {
    margin-inline-start: auto;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bc-accent);
}

/* Dialog header: tone icon, title, close. See Components/DialogHeading.razor. */
.bc-dlg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.bc-dlg-head .bc-dlg-icon {
    font-size: 19px;
    flex: none;
    color: var(--bc-accent);
}

.bc-dlg-head.bc-danger .bc-dlg-icon {
    color: var(--bc-err);
}

.bc-dlg-head h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bc-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-dlg-head .mud-icon-button {
    flex: none;
    color: var(--bc-ink-3);
}

/* ── Menus, popovers, tooltips, snackbars ─────────────────────────────────────────────────── */

.mud-popover {
    border-radius: var(--bc-r-inner);
    background: var(--bc-pane-solid);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid var(--bc-edge-strong);
    box-shadow: var(--bc-shadow), var(--bc-hi);
    color: var(--bc-ink);
}

.mud-list-item {
    color: var(--bc-ink-2);
    border-radius: 10px;
}

.mud-list-item:hover {
    background: var(--bc-row-hover);
    color: var(--bc-ink);
}

.mud-list-item.mud-selected-item {
    background: var(--bc-accent-wash);
    color: var(--bc-ink);
}

.mud-tooltip {
    background: var(--bc-pane-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--bc-edge-strong);
    border-radius: 10px;
    color: var(--bc-ink);
    font-size: 11.5px;
}

.mud-snackbar {
    border-radius: var(--bc-r-inner);
    background: var(--bc-pane-solid);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--bc-edge-strong);
    box-shadow: var(--bc-shadow);
    color: var(--bc-ink);
}

/* ── Tabs & expansion panels ──────────────────────────────────────────────────────────────── */

/* A page-level tab set is ONE pane: an 8px frame holding the tab strip above the panel body. Left
   alone, MudBlazor tints only the tab bar and leaves the content behind it unpanelled, which reads
   as a stray light strip floating over the background. Dialogs render outside .mud-main-content,
   so their tabs (the receipt-template editor) keep MudBlazor's plain treatment. */
.mud-main-content .mud-tabs {
    background: var(--bc-pane);
    backdrop-filter: var(--bc-blur);
    -webkit-backdrop-filter: var(--bc-blur);
    border: 1px solid var(--bc-edge);
    border-radius: 24px;
    box-shadow: var(--bc-shadow), var(--bc-hi);
    padding: 8px 8px 0;
    overflow: hidden;
}

.mud-main-content .mud-tabs .mud-tab {
    min-height: 40px;
}

.mud-main-content .mud-tabs > .mud-tabs-tabbar {
    background: transparent !important;
    color: inherit;
    padding: 6px 8px;
    border-radius: 0;
}

.mud-main-content .mud-tabs > .mud-tabs-panels {
    padding: 20px 22px 22px;
    border-top: 1px solid var(--bc-edge);
}

.mud-tabs .mud-tabs-tabbar {
    background: transparent;
}

.mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--bc-ink-3);
    min-height: 40px;
    border-radius: var(--bc-r-field);
}

.mud-tabs .mud-tab:hover {
    color: var(--bc-ink);
    background: var(--bc-row-hover);
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--bc-ink);
    font-weight: 700;
}

.mud-tabs .mud-tab-slider {
    background: var(--bc-accent);
}

.mud-expand-panel {
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    border-radius: var(--bc-r-inner) !important;
    box-shadow: var(--bc-hi);
    margin-bottom: 10px;
}

.mud-expand-panel .mud-expand-panel-header {
    color: var(--bc-ink);
    font-weight: 600;
}

/* ── Progress ─────────────────────────────────────────────────────────────────────────────── */

.mud-progress-linear .mud-progress-linear-bar {
    background: var(--bc-accent);
}

.mud-progress-linear {
    border-radius: var(--bc-r-pill);
    overflow: hidden;
    background: var(--bc-pane-2);
}

.mud-progress-circular {
    color: var(--bc-accent);
}

/* ── Charts ───────────────────────────────────────────────────────────────────────────────── */

/* ApexCharts writes its own SVG text in a fixed grey; pull it onto the theme's ink instead.
   Series colours come from BcTheme.Charts(dark), set per page in C#. */
.apexcharts-text,
.apexcharts-xaxis text,
.apexcharts-yaxis text,
.apexcharts-legend-text {
    fill: var(--bc-ink-3) !important;
    color: var(--bc-ink-3) !important;
    font-family: inherit !important;
}

.apexcharts-gridline,
.apexcharts-xaxis line,
.apexcharts-yaxis line {
    stroke: var(--bc-edge);
}

.apexcharts-tooltip,
.apexcharts-tooltip-title {
    background: var(--bc-pane-solid) !important;
    border-color: var(--bc-edge-strong) !important;
    color: var(--bc-ink) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mud-chart-legend-item,
.mud-chart .mud-typography {
    color: var(--bc-ink-2);
}

/* ── Page furniture used by the feature pages ─────────────────────────────────────────────── */

/* KPI tile: a glass pane with a blurred tone bloom bleeding out of its top corner. */
.bc-kpi {
    position: relative;
    overflow: hidden;
    border-radius: var(--bc-r-pane);
    padding: 20px 22px;
    height: 100%;
    box-sizing: border-box;
}

.bc-kpi::before {
    content: "";
    position: absolute;
    top: -40px;
    inset-inline-end: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--bc-kpi-tone, var(--bc-accent));
    opacity: .17;
    filter: blur(28px);
    pointer-events: none;
}

.bc-kpi > * {
    position: relative;
}

.bc-kpi-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.bc-kpi-head .mud-icon-root {
    font-size: 17px;
    color: var(--bc-kpi-tone, var(--bc-accent));
}

.bc-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bc-ink-2);
}

.bc-kpi-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--bc-ink);
}

.bc-kpi-unit {
    font-size: 11px;
    color: var(--bc-ink-3);
    margin-top: 4px;
}

/* Donut with the total in the hole and a hand-built legend beside it: MudChart's own legend can't
   show a value per slice, which is the whole point of this card. */
.bc-donut-hole {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bc-donut-total {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--bc-ink);
}

.bc-donut-caption {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bc-ink-3);
    margin-top: 3px;
}

.bc-donut-hole ~ .mud-chart .mud-chart-legend,
.mud-chart-donut + .mud-chart-legend {
    display: none;
}

.bc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--bc-dot-color, var(--bc-accent));
    box-shadow: 0 0 8px var(--bc-dot-color, var(--bc-accent));
}

/* Report hub card — same bloom, plus a rounded icon plate and a trailing call to action. */
.bc-report-card {
    display: block;
    position: relative;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
    padding: 22px;
    border-radius: var(--bc-r-pane);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.bc-report-card:hover {
    border-color: var(--bc-edge-strong) !important;
    transform: translateY(-2px);
}

.bc-report-card::before {
    content: "";
    position: absolute;
    top: -50px;
    inset-inline-end: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--bc-kpi-tone, var(--bc-accent));
    opacity: .16;
    filter: blur(30px);
    pointer-events: none;
}

.bc-report-card > * {
    position: relative;
}

.bc-report-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.bc-icon-plate {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    box-shadow: var(--bc-hi);
    color: var(--bc-kpi-tone, var(--bc-accent));
}

.bc-report-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bc-ink);
    line-height: 1.3;
}

.bc-report-desc {
    font-size: 12.5px;
    color: var(--bc-ink-3);
    margin-top: 7px;
    line-height: 1.5;
}

.bc-report-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bc-accent);
}

/* Product/voucher card on Stock and the portal. */
.bc-product-card {
    border-radius: 20px;
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    box-shadow: var(--bc-hi);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bc-product-card.bc-out {
    background: var(--bc-pane);
}

.bc-product-media {
    margin: 10px 10px 0;
    height: 104px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--bc-pane);
    box-shadow: var(--bc-media-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bc-ink-3);
}

.bc-product-card.bc-out .bc-product-media {
    filter: grayscale(1) opacity(.55);
}

.bc-product-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--bc-ink);
    line-height: 1.3;
}

.bc-product-denom {
    font-size: 12px;
    color: var(--bc-ink-3);
    margin-top: 2px;
}

/* Upload drop zone. */
.bc-dropzone {
    border-radius: var(--bc-r-rail);
    padding: 40px 32px;
    text-align: center;
    background: var(--bc-pane);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 2px dashed var(--bc-edge-strong);
    box-shadow: var(--bc-hi);
}

.bc-dropzone.bc-dropzone-active {
    border-color: var(--bc-accent);
    background: var(--bc-accent-wash);
}

.bc-dropzone-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: var(--bc-r-pane);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bc-accent-wash);
    border: 1px solid var(--bc-edge);
    color: var(--bc-accent);
}

/* A short label/value stack, used by detail headers. */
.bc-field-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bc-ink-3);
    margin-bottom: 7px;
}

/* ── Tone helpers ─────────────────────────────────────────────────────────────────────────── */

.bc-tone-accent { --bc-kpi-tone: var(--bc-accent); }
.bc-tone-green { --bc-kpi-tone: var(--bc-green); }
.bc-tone-info { --bc-kpi-tone: var(--bc-info); }
.bc-tone-warn { --bc-kpi-tone: var(--bc-warn); }
.bc-tone-err { --bc-kpi-tone: var(--bc-err); }

.bc-ink { color: var(--bc-ink); }
.bc-ink-2 { color: var(--bc-ink-2); }
.bc-ink-3 { color: var(--bc-ink-3); }
.bc-accent-text { color: var(--bc-accent); }
.bc-green-text { color: var(--bc-green); }
.bc-warn-text { color: var(--bc-warn); }
.bc-err-text { color: var(--bc-err); }

/* ── Account card (sign-in, 2FA, password, denied, guest link) ────────────────────────────── */

.bc-account-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.bc-account-card {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    padding: 38px 36px 28px;
    border-radius: 30px;
    background: var(--bc-pane);
    backdrop-filter: var(--bc-blur-strong);
    -webkit-backdrop-filter: var(--bc-blur-strong);
    border: 1px solid var(--bc-edge);
    box-shadow: var(--bc-shadow), var(--bc-hi);
    color: var(--bc-ink);
}

.bc-account-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 26px;
}

.bc-account-mark {
    width: 64px;
    height: 64px;
    border-radius: var(--bc-r-pane);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
    background: linear-gradient(145deg, rgba(138, 102, 160, .6), rgba(31, 92, 35, .5));
    border: 1px solid var(--bc-edge-strong);
    box-shadow: var(--bc-hi);
    color: var(--bc-ink);
}

.bc-account-mark img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Non-brand cards (2FA, password, denied) lead with a smaller plate and a smaller title. */
.bc-account-mark.bc-account-mark-sm {
    width: 56px;
    height: 56px;
    border-radius: 20px;
}

.bc-account-mark.bc-plate-green {
    background: linear-gradient(145deg, rgba(156, 196, 155, .55), rgba(31, 92, 35, .5));
}

.bc-account-mark.bc-plate-err {
    background: linear-gradient(145deg, rgba(242, 147, 139, .45), rgba(179, 38, 30, .45));
}

.bc-account-name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--bc-ink);
}

.bc-account-name.bc-account-name-sm {
    font-size: 18px;
    line-height: 1.3;
}

.bc-account-tagline {
    font-size: 13px;
    color: var(--bc-ink-3);
    margin-top: 6px;
}

.bc-account-lang {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.bc-account-credit {
    margin-top: 14px;
    text-align: center;
    font-size: 11px;
}

.bc-account-credit a {
    color: var(--bc-ink-3);
    text-decoration: none;
}

.bc-account-credit a:hover {
    color: var(--bc-accent);
}

.bc-account-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 11px;
    color: var(--bc-ink-3);
}

/* Plain form controls — the account pages are static SSR, so they use elements, not MudBlazor. */
.bc-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bc-ink-3);
    margin: 18px 0 7px;
}

.bc-input {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    color: var(--bc-ink);
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    border-radius: 16px;
    box-shadow: var(--bc-hi);
    outline: none;
}

.bc-input::placeholder {
    color: var(--bc-ink-3);
    opacity: 1;
}

.bc-input:focus {
    border-color: var(--bc-edge-strong);
    box-shadow: var(--bc-hi), 0 0 0 3px var(--bc-accent-wash);
}

/* Also used on an <a> (the guest link's download button), hence the reset and box-sizing. */
.bc-btn {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    margin-top: 26px;
    height: 50px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--bc-accent-ink);
    background: var(--bc-accent-btn);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--bc-accent-btn) 45%, transparent), var(--bc-hi);
}

.bc-btn:hover {
    background: color-mix(in srgb, var(--bc-accent-btn) 85%, #fff);
}

.bc-link-row {
    margin-top: 20px;
    text-align: center;
    font-size: 12.5px;
}

.bc-link-row a {
    color: var(--bc-accent);
    font-weight: 600;
    text-decoration: none;
}

.bc-link-row a:hover {
    text-decoration: underline;
}

.validation-message {
    color: var(--bc-err);
    font-size: 11.5px;
    margin-top: 6px;
    display: block;
}

/* 2FA enrollment: the QR has to stay on white paper to stay scannable. */
.bc-qr {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.bc-qr-plate {
    padding: 14px;
    border-radius: var(--bc-r-inner);
    background: #FFFFFF;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    line-height: 0;
}

.bc-qr-plate svg {
    width: 180px;
    height: 180px;
    display: block;
}

.bc-key {
    font-family: var(--bc-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-align: center;
    color: var(--bc-ink);
    padding: 12px 14px;
    border-radius: var(--bc-r-field);
    background: var(--bc-pane-2);
    border: 1px solid var(--bc-edge);
    margin: 10px 0 20px;
    word-break: break-all;
}

.bc-steps {
    font-size: 12.5px;
    color: var(--bc-ink-2);
    line-height: 1.7;
    margin-bottom: 18px;
}

/* Key/value rows on the guest-link card. */
.bc-kv {
    border-radius: var(--bc-r-inner);
    border: 1px solid var(--bc-edge);
    background: var(--bc-pane-2);
    overflow: hidden;
    margin-bottom: 18px;
}

.bc-kv-row {
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--bc-edge);
}

.bc-kv-row:last-child {
    border-bottom: none;
}

.bc-kv-row dt {
    margin: 0;
    font-size: 12.5px;
    color: var(--bc-ink-3);
}

.bc-kv-row dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--bc-ink);
    text-align: end;
}

/* ── Responsive ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 959px) {
    .mud-appbar > .mud-toolbar {
        margin: 10px;
        padding-inline: 12px 8px;
    }

    .mud-main-content {
        padding-top: calc(var(--bc-bar) + 20px) !important;
        padding-inline: 10px !important;
    }

    .bc-topbar-title h1 {
        font-size: 17px;
    }

    /* The language switcher has to stay in the bar on a phone, so it gets narrower rather than
       going away. */
    .bc-seg button {
        padding: 8px 8px;
    }

    .bc-account-card {
        padding: 28px 22px 22px;
        border-radius: 24px;
    }
}

/* Frosting is expensive on long tables; drop it where the pane is the whole page. */
@media (prefers-reduced-motion: reduce) {
    .bc-report-card {
        transition: none;
    }
}

/* ── Print ────────────────────────────────────────────────────────────────────────────────── */

@media print {
    body::before {
        display: none;
    }

    .mud-drawer,
    .mud-appbar {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .mud-paper,
    .mud-card,
    .mud-dialog {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
}