/* VAT reports (#1083) — styles for the Summaries hub (/vat-report) and the VAT status chip.
   Deliberately its OWN file rather than an append to site.css: every rule here is scoped to a
   .vat-* class, and keeping it separate is what makes that checkable at a glance instead of by
   reading 167 lines inside the app's global stylesheet.

   Load position is load-bearing. Pages/_Layout.cshtml links this right after site.css and
   therefore BEFORE MudBlazor.min.css — the specificity of every selector below is chosen against
   MudBlazor's, and moving this link after MudBlazor's would make several rules win that are meant
   to lose (and vice versa). Keep it where it is.

   Blazor CSS isolation (.razor.css) is NOT usable here: these rules target MudBlazor's internal
   elements (.mud-table-cell, .mud-table-container), which the scoped-css rewriter does not stamp. */

/* VAT Summaries: the Sales/Import VAT figures link into the lists they were computed from
   (#1083). A class, not an inline style — an inline text-decoration shorthand outranks
   MudBlazor's (unimportant) :hover/:focus-visible rules and silently removes every interaction
   state, including the keyboard focus ring. This file loads BEFORE MudBlazor.min.css, hence the
   element + two-class specificity so these still win. */
a.mud-link.vat-sum-link {
    text-decoration: underline dotted rgba(28, 25, 25, 0.55);
    text-underline-offset: 3px;
    /* inline-block + padding lift the tap target off the 20px line height (to 32px, clearing
       WCAG 2.5.8). It also sets the table's row height — every row grows ~12px with it, which
       is why the rows measure 45px rather than 33px. */
    display: inline-block;
    padding: 6px 0;
}
a.mud-link.vat-sum-link:hover,
a.mud-link.vat-sum-link:focus-visible {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}
a.mud-link.vat-sum-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── VAT Summaries table (/vat-report) ──────────────────────────────────────────────────────
   Every TABLE selector below is scoped to .vat-summaries-table on purpose. .mud-table,
   .mud-table-cell and .mud-table-container are ALSO MudDataGrid's classes: ~33 other MudTables
   and every DynmaicDataGridExperimental page (Class="wms-table", whose row backgrounds are
   !important and would silently swallow half of this) share them, so a global rule would
   restyle the whole app untested. (.vat-chip-dot at the end is deliberately global — that chip
   also renders outside this table, on the sales list.)

   This file loads BEFORE MudBlazor.min.css (Pages/_Layout.cshtml), so it loses every specificity TIE — each rule here carries at least one class more than the MudBlazor
   rule it has to outrank rather than reaching for !important. Getting that wrong fails
   silently: the first cut of .vat-zero/.vat-figure-key sat at (0,2,0) against MudBlazor's
   (0,3,0) `.mud-table-root .mud-table-body .mud-table-cell` and simply never applied. */

/* The card is rounded (--mud-default-borderradius) but never overflow-hidden, and the
   .mud-table-container that actually holds the rows is square — so the LAST row's hover band
   painted its square corners straight over the card's rounded ones. */
.vat-summaries-table .mud-table-container {
    border-radius: inherit;
}

/* MudBlazor's row hover is rgba(0,0,0,.039) = #F5F5F5 on white, while the page surface behind
   the card is #F3F3F4. On the last row (which sits flush on the card's bottom edge) the two
   merged, the card lost its only boundary, and the row read as sitting BEHIND the table rather
   than being highlighted.

   What actually FIXED that is Outlined on the MudTable — the card now has a 1px border, so no
   row background can be mistaken for the end of the table. This colour is the second half:
   #E9EEF6 sits ΔE76 ≈ 4.4 from the page surface (#F5F5F5 sat at 0.84 and #EFF1F4 at 1.47, both
   below the ~2.3 just-noticeable difference), so the highlight is now distinguishable from the
   page on its own merits rather than only by the border.

   Set as the palette VARIABLE, not a :hover rule: MudBlazor's is a six-class selector inside
   @media(hover:hover) and would win on both specificity and load order, whereas a variable wins
   by inheritance and leaves that media query in charge of WHEN hover applies at all (never on
   touch). */
.mud-table.vat-summaries-table {
    --mud-palette-table-hover: #E9EEF6;
}

/* Header: a quiet 12px label on its own band, instead of body text on white that made the
   header row indistinguishable from a data row. white-space:nowrap is what GUARANTEES
   "Report value (EUR)" stays on one line (it used to wrap and leave the header 20px taller than
   every row); dropping to 12px is what keeps that affordable, by narrowing the column enough
   that nothing else is squeezed. Both are load-bearing — neither is redundant.
   40px against the 45px rows: a header shorter than that stopped reading as the table's first
   row and started reading as a label strip glued above it.
   #6B6B70 on #FAFAFA is 5.08:1. The label TEXT is deliberately untouched: #1085 carries these
   names forward and the 1083 test plan quotes them verbatim. */
.vat-summaries-table .mud-table-root .mud-table-head .mud-table-cell {
    background-color: #FAFAFA;
    color: #6B6B70;
    font-size: 12px;
    font-weight: 600;
    height: 40px;
    white-space: nowrap;
    border-bottom: 1px solid #E6E6E8;
}

/* Hairlines. MudBlazor's #E0E0E0 drew seven hard rules through a seven-row table, which is most
   of what made it look like a spreadsheet export. (No last-row exception needed: MudBlazor's own
   `.mud-table-root>.mud-table-body:last-child>.mud-table-row:last-child>.mud-table-cell` already
   removes it at (0,6,0), above anything here.)

   Desktop only. Below MudTable's Xs breakpoint the layout STACKS, and MudBlazor deliberately
   makes each stacked cell borderless so a row reads as one card — an unguarded version of this
   rule outranks that (0,4,0 against 0,2,0) and draws a line under all eight fields of every row.
   MudBlazor's stacked block is @media(max-width:600px), so this complements it at 600.02px
   rather than 601px — the 0.02 is Bootstrap's convention for closing the fractional-width gap a
   zoomed viewport can land in. */
@media (min-width: 600.02px) {
    .vat-summaries-table .mud-table-root .mud-table-body .mud-table-cell {
        border-bottom: 1px solid #F0F0F1;
    }
}

/* Digit under digit. Proportional numerals let 290,00 and 0,00 drift out of line in columns
   whose whole purpose is vertical comparison. Month never wraps: the two filing columns lost
   the width caps that used to hold them back, and the first thing they take space from is
   "February 2026". */
.vat-summaries-table .mud-table-cell {
    font-variant-numeric: tabular-nums;
}

.vat-summaries-table .mud-table-root .mud-table-body .mud-table-cell:first-child {
    white-space: nowrap;
}

/* See _ZeroClass / _Empty in VatReportSummaries.razor for why these exist. #6B6B70 is 5.30:1 on
   a resting row and 4.55:1 on a hovered one — a de-emphasis that still clears AA in both states.
   The placeholder shares that grey rather than going lighter: it carries the "not filed yet"
   meaning, so it is not decorative, and the first cut (#B9B9BE, 1.95:1) made the one glyph that
   resolves the ambiguity the least readable thing in the row.

   The link underline is deliberately NOT muted with the text. It is the only persistent cue that
   these figures are links (see .vat-sum-link above), which puts it under WCAG 1.4.11's 3:1 bar
   for non-text indicators — the muted version measured 2.21:1, and being more specific than the
   :hover/:focus-visible rule it also killed the dotted→solid affordance on those cells. */
.vat-summaries-table .mud-table-root .mud-table-body .mud-table-cell.vat-zero {
    color: #6B6B70;
}

.vat-summaries-table .vat-empty {
    color: #6B6B70;
}

/* Below the stacking breakpoint MudBlazor renders each DataLabel through .mud-table-cell::before,
   which INHERITS the cell's colour — so a field whose value happened to be 0,00 came out with a
   muted label as well, and the card read as if that one field were disabled. The de-emphasis
   belongs to the figure, never to the name of the field. */
@media (max-width: 600px) {
    .vat-summaries-table .mud-table-root .mud-table-body .mud-table-cell.vat-zero::before {
        color: var(--mud-palette-text-primary);
    }
}

/* Difference is the one figure in the row that is derived rather than read. */
.vat-summaries-table .mud-table-root .mud-table-body .mud-table-cell.vat-figure-key {
    font-weight: 600;
}

/* The live computation (Sales − Import = Difference) ends here; Status and the two fields that
   only ever fill from "Reported" onwards begin. Same colour as the row dividers on purpose: a
   heavier rule stopped reading as a grouping cue and started reading as a seam between two
   tables. */
.vat-summaries-table .vat-group-start {
    border-left: 1px solid #F0F0F1;
}

/* The dot on a VatStatusChip (shared by the Summaries hub and the sales list). Purely
   decorative — aria-hidden in the component, because the LABEL is what states the state. Its
   colour is the saturated version of the chip's tint, which is what keeps the soft chips apart
   at a glance without loud fills.

   It is a flex item of MudChip's .mud-chip-content (inline-flex), which is what centres it —
   hence flex:none rather than a display/vertical-align pair, which that context ignores. */
.vat-chip-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}