/* =============================================================================
   Numeric values — styling for the shared NumericValue component.

   Font: IBM Plex Mono (Google Fonts), already loaded by App.razor for the
   landing page, so this adds no new network request. It is the right face for
   figures rather than a stylistic preference:
     - monospaced, so decimal points line up down a table column even when the
       surrounding UI font (Zain for Arabic, IBM Plex Sans for English) is not;
     - drawn for data and code, so 0/O, 1/l/I and 5/S stay unambiguous at the
       small sizes used in dense grids — the difference between reading a
       purchase order as 1,015.00 and 1,O15.OO;
     - it is the same family already used for numeric "kickers" and codes on the
       landing page, so figures read consistently across the marketing site and
       the app.

   The font-family selectors below look heavier than they need to be, and are
   deliberately so. NomiDar.styles.css declares

       html[dir="rtl"] * { font-family: 'Zain', … !important }
       html[dir="ltr"] * { font-family: 'IBM Plex Sans', … !important }

   which is !important AND has specificity (0,1,1) — a type, an attribute and the
   universal selector. A plain `.mw-num { … !important }` is only (0,1,0), so it
   loses: with both declarations !important, specificity decides, and every figure
   silently rendered in the UI font instead (verified in the browser before this
   was fixed). Prefixing with `html[dir]` lifts these to (0,2,1)/(0,3,1) so they
   win, and the descendants must be listed explicitly because the global rule's
   `*` targets the inner spans too.
   ============================================================================= */

html[dir] .mw-num,
html[dir] .mw-num .mw-num__figure,
html[dir] .mw-num .mw-num__suffix,
html[dir] .mw-num .mw-num__placeholder {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace !important;
}

.mw-num {
    /* Fixed-width digits: the whole point of a numeric column is that the reader
       can compare magnitudes vertically without reading every digit. */
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;

    /* A figure is always LTR, even inside an Arabic page. `isolate` stops the
       bidi algorithm from reordering the number against the Arabic text around
       it, which is what turns "-1,250.00 QAR" into nonsense in an RTL cell. */
    direction: ltr;
    unicode-bidi: isolate;

    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    white-space: nowrap;
    font-size: 0.9375em; /* mono runs visually larger than the UI face at the same px */
    letter-spacing: 0;
}

/* The figure itself, kept separate from the suffix so the currency code can be
   de-emphasised without weakening the number. */
.mw-num__figure {
    font-variant-numeric: inherit;
    font-feature-settings: inherit;
}

/* Currency code / percent sign: present but quieter than the amount. */
.mw-num__suffix {
    font-size: 0.85em;
    font-weight: 500;
    opacity: 0.72;
    letter-spacing: 0.02em;
}

/* Missing value — an em dash that should not attract the eye. */
.mw-num__placeholder {
    opacity: 0.45;
    font-family: inherit;
}

/* ── Variant: money ──────────────────────────────────────────────────────────
   Amounts carry the most weight in a procurement/finance UI, so they sit at
   normal contrast with a slightly heavier face than surrounding body text. */
.mw-num--money {
    font-weight: 500;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ── Variant: unit price ─────────────────────────────────────────────────────
   A per-unit rate is an input to a total rather than a headline figure, so it
   reads one step quieter than the money it produces. */
.mw-num--unit-price {
    font-weight: 400;
    opacity: 0.92;
}

/* ── Variant: quantity ───────────────────────────────────────────────────────
   Quantities are not money and should not compete with it; lighter weight, and
   trailing zeros are dimmed so 12.0000 does not read as heavier than 12. */
.mw-num--quantity {
    font-weight: 400;
    opacity: 0.9;
}

/* ── Variant: percent ────────────────────────────────────────────────────────
   Percentages are usually a status signal (completion, variance, margin), so
   they get a slightly tighter, quieter treatment. */
.mw-num--percent {
    font-weight: 500;
}

.mw-num--percent .mw-num__suffix {
    /* the % sign belongs tight against its number, unlike a currency code */
    margin-inline-start: -0.2em;
    opacity: 0.8;
}

/* ── Variant: integer / counts ───────────────────────────────────────────────
   Counts are reference information, not amounts. */
.mw-num--integer {
    font-weight: 500;
}

/* ── State: negative ─────────────────────────────────────────────────────────
   In this product a negative is nearly always a variance, credit or shortfall.
   Colour alone is not the only cue — the minus sign remains — so this stays
   accessible for colour-blind readers. */
.mw-num--negative {
    color: var(--mud-palette-error, #b3261e);
}

/* ── State: zero ─────────────────────────────────────────────────────────────
   A zero is real data, unlike a null, but it rarely needs attention. */
.mw-num--zero {
    opacity: 0.75;
}

/* ── State: empty (null) ─────────────────────────────────────────────────────*/
.mw-num--empty {
    font-weight: 400;
}

/* ── Emphasis ────────────────────────────────────────────────────────────────*/
.mw-num--strong {
    font-weight: 600;
    font-size: 1em;
}

.mw-num--strong .mw-num__suffix {
    opacity: 0.85;
}

.mw-num--muted {
    font-weight: 400;
    opacity: 0.68;
}

/* ── Alignment ───────────────────────────────────────────────────────────────
   Figures are flush to the trailing edge of their cell in BOTH directions, and
   deliberately not mirrored for RTL.

   The point of aligning a money column is that the decimal points form a
   straight vertical line, so the reader can compare magnitudes at a glance. That
   only happens when every figure shares its trailing edge. Flipping to
   flex-start under RTL — the reflex, and what `text-align: end` does elsewhere in
   this app — puts the leading digit on the shared edge instead, which leaves
   18,518.40 and -250.00 with their decimal points in different places. Because
   the figure itself is direction: ltr, flex-end always means "after the last
   decimal", whichever way the page reads. */
.mw-num--end {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

/* ── Dark mode ───────────────────────────────────────────────────────────────
   MudBlazor's dark theme is signalled by .mud-dark on <html> (see
   language-interop.js). Error red needs lifting on a dark surface to keep its
   contrast ratio, and the muted opacities need to be less aggressive because
   light-on-dark text loses legibility faster as opacity drops. */
/* An explicit lighter red rather than var(--mud-palette-error): that variable is
   declared once globally and does not change under .mud-dark (measured — it stays
   rgb(220,38,38) in both themes), and the light theme's red is too dark against a
   dark surface to hold its contrast ratio. */
.mud-dark .mw-num--negative {
    color: #ff8a80;
}

.mud-dark .mw-num__suffix {
    opacity: 0.8;
}

.mud-dark .mw-num__placeholder {
    opacity: 0.55;
}

.mud-dark .mw-num--muted {
    opacity: 0.75;
}

.mud-dark .mw-num--quantity,
.mud-dark .mw-num--unit-price {
    opacity: 0.95;
}

/* ── Print ───────────────────────────────────────────────────────────────────
   Amounts must stay legible on a printed PO or invoice, where opacity tricks
   and colour do not survive a monochrome printer. */
@media print {
    .mw-num,
    .mw-num__suffix,
    .mw-num__placeholder {
        opacity: 1;
        color: #000;
    }

    .mw-num--negative {
        color: #000;
        font-weight: 600;
    }
}