@import '_content/Brassicum.Shared.UI/Brassicum.Shared.UI.mw9aoxsiug.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Tailwind is used for MainLayout styling. */

/* #251 Step 1 — establishes an inline-size containment context on <main> so every page's own
   thresholds can be authored as @container rules against available width instead of viewport
   width. #249 confirmed <main>'s width equals viewport - navWidth exactly at all 96 measurements,
   so this single declaration gives every page (present and future) a box that already has the
   nav subtracted. Applied here alone, nothing else, so its containment side effects (on overlay
   positioning, percentage heights, position:fixed) can be verified in isolation before anything
   is built on top of it. */
main[b-mmc02oft3m] {
    container-type: inline-size;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Tailwind is used for NavMenu styling. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ── Blazor reconnect state machine — visibility rules MUST NOT change ── */
.components-reconnect-first-attempt-visible[b-ibkmh8ft2p],
.components-reconnect-repeated-attempt-visible[b-ibkmh8ft2p],
.components-reconnect-failed-visible[b-ibkmh8ft2p],
.components-pause-visible[b-ibkmh8ft2p],
.components-resume-failed-visible[b-ibkmh8ft2p],
.components-rejoining-animation[b-ibkmh8ft2p] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ibkmh8ft2p],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ibkmh8ft2p],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ibkmh8ft2p],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ibkmh8ft2p],
#components-reconnect-modal.components-reconnect-retrying[b-ibkmh8ft2p],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ibkmh8ft2p],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ibkmh8ft2p],
#components-reconnect-modal.components-reconnect-failed[b-ibkmh8ft2p],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ibkmh8ft2p] {
    display: block;
}

/* ── Dialog chrome ── */
#components-reconnect-modal[b-ibkmh8ft2p] {
    background-color: var(--bx-surface-raised);
    color: var(--bx-text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--bx-radius-md);
    box-shadow: var(--bx-shadow-xl);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ibkmh8ft2p 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-ibkmh8ft2p 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s,
                   components-reconnect-modal-fadeInOpacity-b-ibkmh8ft2p 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-ibkmh8ft2p]::backdrop {
    background-color: var(--bx-surface-overlay);
    animation: components-reconnect-modal-fadeInOpacity-b-ibkmh8ft2p 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ibkmh8ft2p {
    0%   { transform: translateY(30px) scale(0.95); }
    100% { transform: translateY(0); }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ibkmh8ft2p {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ibkmh8ft2p {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Layout ── */
.components-reconnect-container[b-ibkmh8ft2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ibkmh8ft2p] {
    margin: 0;
    text-align: center;
    font-size: var(--bx-fs-body-sm);
    color: var(--bx-text-2);
}

/* ── Retry / Resume buttons ── */
#components-reconnect-modal button[b-ibkmh8ft2p] {
    border: 0;
    background-color: var(--bx-interactive-primary);
    color: white;
    padding: 4px 24px;
    border-radius: var(--bx-radius-sm);
    font-size: var(--bx-fs-body-sm);
    font-weight: var(--bx-fw-medium);
    cursor: pointer;
    transition: background-color var(--bx-duration-fast) var(--bx-ease-standard);
}

#components-reconnect-modal button:hover[b-ibkmh8ft2p] {
    background-color: var(--bx-interactive-primary-hover);
}

#components-reconnect-modal button:active[b-ibkmh8ft2p] {
    background-color: var(--bx-interactive-primary-active);
}

/* ── Rejoining animation ring ── */
.components-rejoining-animation[b-ibkmh8ft2p] {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div[b-ibkmh8ft2p] {
    position: absolute;
    border: 3px solid var(--bx-interactive-primary);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-ibkmh8ft2p 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-ibkmh8ft2p] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-ibkmh8ft2p {
    0%   { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 0; }
    4.9% { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 0; }
    5%   { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 1; }
    100% { top: 0px;  left: 0px;  width: 80px; height: 80px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-ibkmh8ft2p],
    #components-reconnect-modal[open][b-ibkmh8ft2p],
    .components-rejoining-animation div[b-ibkmh8ft2p] {
        animation: none;
        transition: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home dashboard layout — visual spec: docs/mockups/dashboard-redesign.html.
   Scoped CSS because the compiled app.css carries no arbitrary-value Tailwind
   utilities; everything size/grid-specific the mockup needs lives here. */

/* ── KPI band: one grid, the group boundary enforced by row spans ─────────────
   #373/F7 replaced a fixed repeat(4, 1fr) with auto-fit so the strip fits whatever the
   permissions compose. #374 must additionally keep the money tiles (cash · income ·
   expenses · net) and the housekeeping tiles (drafts · trial balance) from sharing a
   row unless all six fit on one.

   The first attempt was two flex groups with 4:2 bases, each auto-fitting internally.
   It does not hold, and the reason is worth recording: while both groups sit on one
   flex line they are sized to a FRACTION of it, and each then auto-fits inside its own
   fraction — so at ~1100px the money group wrapped 3 + 1 inside its 4/6 while the
   housekeeping group was still beside it, painting Cash · Income · Expenses · Drafts
   on row one. Nothing crossed the DOM boundary; the ROWS crossed it, which is what the
   reader sees. Separate flex items cannot prevent that, because neither group knows the
   other is still on its line.

   So the band is ONE grid over all six tiles, and the boundary is a property of the
   track structure rather than of two boxes' relative flexibility:

   • the money group is `display: contents` at every width — its four tiles are direct
     grid items, so they simply fill rows in order;
   • the housekeeping group spans the full row (`grid-column: 1 / -1`) at every width
     EXCEPT the six-across state, so it can only ever begin on a fresh row.

   That makes interleaving structurally impossible: housekeeping is either the tail of
   the single row, or a full-width row of its own after every money tile. The column
   count then steps down with available width, and the money tiles wrap 4 → 2 + 2 → 1
   per row inside their own rows, exactly as ruled.

   Thresholds are @container against <main> (#251 Step 1 — nav width already subtracted),
   offset ~40px for the article's own padding. 6 tiles need 6*180 + 5*14 = 1150 of
   content, 4 need 762, 2 need 374. */
.home-kpis[b-a8k9jrdskn] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

/* Transparent to the grid: the tiles themselves are the grid items. */
.kpi-grp[b-a8k9jrdskn] {
    display: contents;
}

/* Housekeeping alone (a ledger-only caller holds no reports.view, so no money group
   renders): it owns the whole band rather than huddling in one sixth of it. */
.home-kpis > .kpi-ops:only-child[b-a8k9jrdskn] {
    display: grid;
    gap: 14px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@container (max-width: 1189px) {
    .home-kpis[b-a8k9jrdskn] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* From here down the housekeeping group always starts its own row. auto-fit inside
       it, so its two tiles split whatever width that row has and collapse to one column
       when even that is too narrow. */
    .home-kpis > .kpi-ops[b-a8k9jrdskn] {
        display: grid;
        gap: 14px;
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@container (max-width: 801px) {
    .home-kpis[b-a8k9jrdskn] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 413px) {
    .home-kpis[b-a8k9jrdskn] { grid-template-columns: minmax(0, 1fr); }
}

/* Eyebrow period qualifier ("· Sep 2026"), one step dimmer than the label it follows.
   Lives here, not in BxStat.razor.css: the span is written in THIS component, so it
   carries this component's isolation scope. */
.kpi-per[b-a8k9jrdskn] { color: var(--bx-text-disabled); }

/* Currency code beside a money numeral — the scale marker that stops a tile being
   read as a count.

   The separating space is a NO-BREAK SPACE in the markup, not a margin here. Under RTL
   the numeral and the code form a single left-to-right bidi run, and an inline margin on
   the code lands on the OUTSIDE of that run rather than between its two parts — the gap
   simply vanished and Arabic rendered "1,325,000.00AED". A character inside the run
   cannot be reordered away from its neighbours. (The Phase 1 mockup hit the same thing
   and solved it with flex + gap on the value line; that is BxStat's own element, and
   making it a flex row would put a gap inside every other consumer's value too — e.g.
   the Organization panel's "3/5" — so the fix stays local to this call site.) */
.kpi-cur[b-a8k9jrdskn] {
    font-size: 11px;
    font-weight: 500;
    color: var(--bx-text-muted);
    letter-spacing: 0.04em;
}

/* Loading skeleton — the app's animate-pulse slab. The eyebrow stays real, so the tile
   keeps its identity while loading, and the slab holds the value's exact height so the
   band does not reflow when the figure lands. */
.kpi-sk[b-a8k9jrdskn] {
    display: block;
    border-radius: var(--bx-radius-sm);
    background: var(--bx-surface-surface);
    animation: kpi-pulse-b-a8k9jrdskn 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.kpi-sk-v[b-a8k9jrdskn] { height: 23px; width: 7.5rem; margin-top: 7px; }
.kpi-sk-d[b-a8k9jrdskn] { height: 11px; width: 9rem; }

@keyframes kpi-pulse-b-a8k9jrdskn {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    .kpi-sk[b-a8k9jrdskn] { animation: none; }
}

/* ── Main column + side rail (~1.7fr/1fr), one column when narrow ────────── */
.home-grid[b-a8k9jrdskn] {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.home-col[b-a8k9jrdskn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

@media (max-width: 820px) {
    .home-grid[b-a8k9jrdskn] { grid-template-columns: 1fr; }
}

/* KPI tiles migrated to the shared BxStat component (Phase J); its scoped CSS carries the
   mono overline / tabular value / sub-line spec (and the :lang(ar) font reset). */

/* ── Panel header idiom: mono uppercase h3 + optional trailing link/sub ──── */
.panel-h[b-a8k9jrdskn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.panel-t[b-a8k9jrdskn] {
    font-family: var(--bx-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--bx-text-muted);
    margin: 0;
}

/* ── Attention strip ── #375 (F3 + F14) ──────────────────────────────────────
   The BANNER ROW is BxAttentionBanner's as-built recipe and is not touched here. What #375
   owns is where the rows live: a full-width strip directly under the header, no panel, no
   heading, no mono eyebrow.

   The flex sizing is on a WRAPPER, not on the banner itself, for a mechanical reason worth
   recording: Blazor CSS isolation stamps this component's scope attribute on elements written
   in THIS file, and a child component's root element carries its own scope, not ours — so a
   `.attn-strip > *` rule here would compile to `.attn-strip[b-x] > *[b-x]` and match nothing.
   The wrapper is written here, so it is the flex item and the banner simply fills it.

   `flex: 1 1 260px` lets two or three rows share a line at desktop widths. The 720px cap is
   the other half: without it a LONE row stretches the full page width and maroons its drill
   arrow a screen-width from the message it belongs to. */
.attn-strip[b-a8k9jrdskn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 14px;
}

.attn-item[b-a8k9jrdskn] {
    flex: 1 1 260px;
    max-inline-size: 720px;
    min-width: 0;
}

/* F14. All-clear is a LINE, not a panel: muted caption ink on the page's own ground with one
   jade check. Nothing fills, nothing borders — so the quietest state renders as the quietest
   element, the exact inversion of the saturated positive banner it replaces (which was the
   brightest thing in the dark theme). It keeps the slot rather than vanishing, so "nothing
   needs you" stays distinguishable from "the check has not run". */
.allclear[b-a8k9jrdskn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding-block: 7px;
    font-size: var(--bx-fs-caption);
    line-height: var(--bx-lh-caption);
    color: var(--bx-text-muted);
}

.allclear-ok[b-a8k9jrdskn] {
    color: var(--bx-status-positive);
    font-weight: 600;
}

/* #375/F2: `.home-qa` (the quick-action panel's intrinsic-width link row, #373/F13) was deleted
   here with the panel itself — the actions compose the page header's action slot now, off
   BxButton and the shared menu recipe, and neither needs a rule in this file. */

/* ── Admin org panel: 3-up centered stat cells ───────────────────────────── */
.org[b-a8k9jrdskn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.orgcell[b-a8k9jrdskn] {
    background: var(--bx-surface-surface);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.orgcell .n[b-a8k9jrdskn] {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bx-text);
}

.orgcell .n .max[b-a8k9jrdskn] {
    font-size: 13px;
    font-weight: 400;
    color: var(--bx-text-muted);
}

.orgcell .l[b-a8k9jrdskn] {
    font-family: var(--bx-font-mono);
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--bx-text-muted);
    margin-top: 4px;
}

/* Recent-vouchers description clamp (compiled app.css has no max-w-[...]). */
.rec-desc[b-a8k9jrdskn] { max-width: 200px; }

/* #373/F16: the income-vs-expense legend/axis rules, the donut rules (.donut2, .donutwrap,
   .donut-hole, .dlegend, .dl, .dlc, .dlv) and the cash-and-bank rules (.cashrow, .cash-dot,
   .cash-track, .cash-amt, .cash-total) were deleted here — their widgets were retired in
   #62/S0a.3b and the ~120 lines of dead scoped CSS were still shipping to every user. */

/* ── Movement panel: income vs expenses by month (#374 / F8) ──────────────────
   Bar pairs per month, jade income against gold expense — the retired Phase-B chart's
   legend, kept so the dashboard's colour vocabulary does not change. Pure grid + flex
   at percentage heights: no chart library and no SVG. Everything is logical, so the
   year runs right-to-left under RTL with no mirrored asset.

   Geometry: the plot reserves an inline-end gutter for the three axis labels; the
   gridlines are absolutely positioned against the plot's PADDING box, so they stop at
   the gutter, while the columns scroll beneath them when the fiscal year runs past
   twelve months (Q6). */
.mv-legend[b-a8k9jrdskn] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--bx-font-mono);
    font-size: 10px;
    color: var(--bx-text-muted);
    margin-bottom: 6px;
}

.mv-legend:lang(ar)[b-a8k9jrdskn] { font-family: var(--bx-font-arabic); letter-spacing: 0; }

.mv-key[b-a8k9jrdskn] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
    margin-inline-end: 5px;
    vertical-align: middle;
}

.mv-key-inc[b-a8k9jrdskn] { background: var(--bx-color-jade); }
.mv-key-exp[b-a8k9jrdskn] { background: var(--bx-color-gold); }
.mv-key-now[b-a8k9jrdskn] { background: var(--bx-jade-tint); border: 1px solid var(--bx-color-jade-soft); }
.mv-legend-now[b-a8k9jrdskn] { margin-inline-start: auto; }

/* The axis labels are a real GRID TRACK, not an overhang. The first attempt reserved the
   gutter with padding-inline-end on a positioned .mv-plot and hung each label off
   inset-inline-start: 100% — but an absolutely positioned box is laid out against its
   ancestor's PADDING box, so `inset-inline: 0` spanned the reserved gutter too and the
   labels landed past the panel's edge, over the side rail. A track cannot do that: the
   plot area is minmax(0, 1fr) and shrinks to whatever the labels need, so the widest
   realistic figure widens the gutter instead of escaping the panel. */
.mv-plot[b-a8k9jrdskn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: start;
}

.mv-area[b-a8k9jrdskn] {
    position: relative;
    min-width: 0;
}

.mv-gl[b-a8k9jrdskn] {
    position: absolute;
    inset-inline: 0;
    border-top: 1px dashed var(--bx-border-subtle);
}

.mv-gl-top[b-a8k9jrdskn]  { top: 0; }
.mv-gl-mid[b-a8k9jrdskn]  { top: 88px; }
.mv-gl-base[b-a8k9jrdskn] { top: 176px; border-top: 1px solid var(--bx-border); }

/* Three labels in NORMAL flow — an absolutely positioned one contributes nothing to an
   `auto` track's intrinsic size, which would collapse the gutter to zero. Spread over
   the plot's height + one line, lifted half a line, so each sits centred on its own
   gridline (centres land at 0 / 88 / 176). */
.mv-axis[b-a8k9jrdskn] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 190px;
    margin-block-start: -7px;
    font-family: var(--bx-font-mono);
    font-size: 10px;
    color: var(--bx-text-disabled);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

.mv-axis span[b-a8k9jrdskn] {
    line-height: 14px;
    white-space: nowrap;
}

.mv-axis:lang(ar)[b-a8k9jrdskn] { font-family: var(--bx-font-arabic); letter-spacing: 0; }

/* The loading gutter holds the track open at roughly a real label's width, so the panel
   does not jump sideways when the figures land. */
.mv-axis-sk[b-a8k9jrdskn] {
    width: 3.25rem;
    height: 10px;
}

.mv-scroll[b-a8k9jrdskn] { overflow-x: auto; }

.mv-cols[b-a8k9jrdskn] {
    display: grid;
    gap: 2px;
    height: 176px;
    align-items: end;
    min-width: 100%;
}

.mv-mo[b-a8k9jrdskn] {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding: 0 4px;
    border-radius: var(--bx-radius-sm) var(--bx-radius-sm) 0 0;
}

/* The current month wears the tint the selected navigator card wears, tying the plot to
   the "· Sep 2026" eyebrow on the tiles above it. */
.mv-mo-now[b-a8k9jrdskn] { background: var(--bx-jade-tint); }

.mv-bar[b-a8k9jrdskn] {
    display: block;
    flex: 0 1 18px;
    min-width: 5px;
    border-radius: 3px 3px 0 0;
}

.mv-bar-inc[b-a8k9jrdskn] { background: var(--bx-color-jade); }
.mv-bar-exp[b-a8k9jrdskn] { background: var(--bx-color-gold); }

.mv-x[b-a8k9jrdskn] {
    display: grid;
    gap: 2px;
    min-width: 100%;
    margin-top: 6px;
}

.mv-x span[b-a8k9jrdskn] {
    text-align: center;
    font-family: var(--bx-font-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--bx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-x span:lang(ar)[b-a8k9jrdskn] { font-family: var(--bx-font-arabic); letter-spacing: 0; }

/* A month that has not begun draws no bars; its label says so rather than reading as a
   month with nothing in it. */
.mv-x-now[b-a8k9jrdskn]    { color: var(--bx-text); font-weight: 500; }
.mv-x-future[b-a8k9jrdskn] { color: var(--bx-text-disabled); }

.mv-empty[b-a8k9jrdskn] {
    height: 176px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--bx-text-muted);
}

/* Arabic culture: restore proportional Arabic font for scoped mono-styled dashboard labels.
   Letter-spacing reset is covered globally by tailwind.css @layer base. */
.panel-t:lang(ar)[b-a8k9jrdskn],
.orgcell .l:lang(ar)[b-a8k9jrdskn] {
    font-family: var(--bx-font-arabic);
}

/* The mono eyebrow BxStat renders is scoped to BxStat; the qualifier span inside it is
   ours, so it needs the same Arabic reset. */
.kpi-per:lang(ar)[b-a8k9jrdskn] {
    font-family: var(--bx-font-arabic);
    letter-spacing: 0;
}
/* /Components/Shared/BxStat.razor.rz.scp.css */
/* BxStat — KPI/stat tile. Visual spec: docs/mockups/dashboard-redesign.html (.kpi).
   Scoped because the compiled app.css carries no arbitrary-value Tailwind utilities;
   the precise type scale (mono eyebrow, tabular value) lives here. */

/* Inset accent bar — colour comes from the Accent bg-utility class on the element. */
.stat-accent[b-tauzzbelqx] {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

/* Mono uppercase eyebrow/overline. */
.stat-k[b-tauzzbelqx] {
    font-family: var(--bx-font-mono);
    font-size: 9.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--bx-text-muted);
}

/* Tabular value (the number/word). */
.stat-v[b-tauzzbelqx] {
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
    margin-top: 7px;
    font-variant-numeric: tabular-nums;
    color: var(--bx-text);
}

.stat-v .unit[b-tauzzbelqx] {
    font-size: 13px;
    font-weight: 500;
    color: var(--bx-text-muted);
}

/* Sub-line / delta. */
.stat-d[b-tauzzbelqx] {
    font-size: 11px;
    color: var(--bx-text-muted);
    margin-top: 6px;
}

/* Arabic culture: restore proportional Arabic font for the mono-styled eyebrow
   (letter-spacing reset is handled globally by tailwind.css @layer base). */
.stat-k:lang(ar)[b-tauzzbelqx] {
    font-family: var(--bx-font-arabic);
}
/* /Components/Shared/BxToastHost.razor.rz.scp.css */
/* Slide-in from the inline-end edge */
.bx-toast-in[b-re8kgm1zoa] {
    animation: bx-toast-slide-in-b-re8kgm1zoa var(--bx-duration-base) var(--bx-ease-decelerate) both;
}

@keyframes bx-toast-slide-in-b-re8kgm1zoa {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* In RTL the toast stack is on the inline-end (left), so slide from the other direction */
[dir="rtl"] .bx-toast-in[b-re8kgm1zoa] {
    animation-name: bx-toast-slide-in-rtl-b-re8kgm1zoa;
}

@keyframes bx-toast-slide-in-rtl-b-re8kgm1zoa {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bx-toast-in[b-re8kgm1zoa] {
        animation: none;
    }
}