/*
    Shared quote-screen primitives: stat tiles, panels, badges, empty states.

    Promoted here from BuildQuote.razor.css / QuoteList.razor.css when the quote preview dialog
    became the third consumer — AppContext.md's own rule: two copies is under the rule of three,
    a third means promote rather than copy again. Blazor scopes each component's CSS to that
    component, so there is no way to share these from a .razor.css file.

    Being global, these are written WITHOUT `::deep` — that pseudo-element only exists in scoped
    stylesheets, where it is what lets a rule escape into a child component's markup. Here the
    selector reaches MudBlazor's internals directly.

    Everything uses `var(--mud-palette-*)`. This app has three switchable themes and a literal
    hex only looks right in one of them. The single documented exception is Theming/ChartPalette.cs,
    where ApexCharts cannot read a CSS custom property.
*/

/* ---------------------------------------------------------------- stat tiles */

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 104px;
    padding: 8px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
}

.stat span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.stat strong {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

/* The money figure gets the same emphasis treatment the builder gives Amount Due, so the one
   number an operator scans for reads the same on every screen. */
.stat-money {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.stat-money strong {
    color: var(--mud-palette-primary);
}

/* ---------------------------------------------------------------- panel */

.panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05);
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    min-height: 48px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.panel-head .mud-icon-root {
    color: inherit;
}

.panel-title {
    font-family: "Roboto Slab", serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.22);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.panel-spacer {
    flex: 1;
}

/* ---------------------------------------------------------------- badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge .mud-icon-root {
    font-size: 14px;
    color: inherit;
}

/* The one badge variant that isn't `mud-theme-{color}` (see Components/Global/Components/
   StatusBadge.razor) — a provisional/neutral state with no fill color to reach for at all,
   not just a different color choice. Every filled badge (Sent, Accepted, Finalized, Wholesale,
   Tax exempt) gets its background+text pairing from MudBlazor's own `mud-theme-*` utility
   classes instead of a rule here, specifically so the pairing can't drift apart the way
   `.status-sent` used to (it hand-paired `--mud-palette-secondary` with the wrong text
   variable, `--mud-palette-text-secondary` — a muted grey meant for body copy — instead of
   `--mud-palette-secondary-text`, the color MudBlazor actually computed for contrast). */
.badge-outline {
    border: 1px solid var(--mud-palette-lines-default);
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
}

/* ---------------------------------------------------------------- numeric table cells

   Promoted here when the breakdown table became the third table to need them (quote builder
   line-item grid, preview-dialog sheet, breakdown view). Every one of those is a hand-rolled
   <table> whose <th>/<td> carry `class="c-num"` literally, so a plain global selector reaches
   them; the scoped copies each kept only the extras that are genuinely local to their table
   (a fixed column width, a larger figure), which is what had drifted while three copies existed.

   Only what all three actually shared lives here: figures right-align, never wrap, and use
   tabular figures so a column of numbers lines up digit for digit. */

.c-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The money column in each of those tables. Weight is the shared emphasis; size and color are
   per-table decisions and stay in the scoped sheets. */
.c-amount {
    font-weight: 600;
}

/* ---------------------------------------------------------------- empty state */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 16px;
    padding: 34px 20px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
}

.empty p {
    margin: 0;
    font-size: 15px;
}

.empty .mud-icon-root {
    color: var(--mud-palette-text-disabled);
}