/* Numerals — every figure lines up under the one above it (docs/design-system.md §2b).
 *
 * THE BUG THIS FILE EXISTS FOR: Syne, the display face, ships PROPORTIONAL figures. A "1" is
 * 6.6px where a "0" is 11.9px at 20px — so «202,86 €» and «251,55 €», right-aligned in the same
 * totals card, put their commas in different places and the column visibly staggers. Roboto's
 * figures happen to be tabular already, which is why the tables looked fine and the totals, the
 * dashboard tiles and every Typo.h* number did not: the raggedness followed the FONT, not the
 * alignment. Both faces expose a `tnum` feature, so the fix is to ask for it everywhere rather
 * than to keep numbers out of the display face.
 *
 * `font-variant-numeric` inherits, so `html` covers the document — except form controls, which
 * the UA resets with the `font` shorthand, and that reset takes the numeric variant with it.
 * Hence the explicit rule for inputs: a price grid is a table of INPUTS, and it staggered too.
 *
 * The rest of the file is the alignment contract itself: money and quantities are right-aligned,
 * in both the header and the cell, through ONE class instead of a `Style="text-align:right"`
 * repeated per column and forgotten on half of them.
 */

html {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

input,
textarea,
select,
button {
    font-variant-numeric: inherit;
    font-feature-settings: inherit;
}

/* A numeric column: right-aligned header AND cell. On a phone MudBlazor stacks the row into a
   `label … value` flex line, where text-align does nothing and the value is already hard right.

   MudSimpleTable needs its own, longer selector. Its cells are aligned by
   `.mud-simple-table table * tr > td` — one class and three type selectors, which outranks a bare
   `td.fabrica-num` and silently left-aligns the column (the pricing ladder's ΠΟΣΟ column was
   exactly this). Two classes and two types beats it. */
.mud-table-cell.fabrica-num,
.mud-table-cell.fabrica-num .mud-input-slot,
.mud-simple-table table th.fabrica-num,
.mud-simple-table table td.fabrica-num,
th.fabrica-num,
td.fabrica-num {
    text-align: right;
}

/* A numeric INPUT inside a grid (the τιμοκατάλογος cells, the shop price column). Left-aligned
   digits inside a right-aligned column is the same stagger one layer down. */
.fabrica-num .mud-input-slot,
.fabrica-num input[type="text"],
.fabrica-num input[type="number"] {
    text-align: right;
}

/* Money. One component renders it (Components/Shared/Money.razor) so the currency mark, the
   spacing and the grouping are decided once. The mark is set in the BODY face at a lighter
   colour: it is a unit, not a digit, and at h5/h6 sizes a display-face € overpowers the number. */
.fabrica-money {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.fabrica-money-cur {
    margin-inline-start: 0.28em;
    font-family: var(--mud-typography-default-family);
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* A totals ladder (net / VAT / total) is a two-column grid, not three stacked flex rows: rows
   that size themselves independently cannot keep their value columns on one axis, which is what
   put the order's «Σύνολο» a few pixels off the «Καθαρή αξία» above it. The label column takes
   what it needs, the value column takes the rest and every figure hangs off the same right edge. */
.fabrica-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.35rem 1.5rem;
}

.fabrica-totals > .fabrica-totals-value {
    text-align: right;
}

/* The grand total is emphasised by WEIGHT and size, never by a different family: swapping the
   face for the last row is exactly what made the € marks disagree. */
.fabrica-totals-grand {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.fabrica-totals-rule {
    grid-column: 1 / -1;
    height: 1px;
    margin: 0.35rem 0;
    background: var(--mud-palette-lines-default);
}