/* Compact-by-default controls — the app's "small by default" convention (docs/design-system.md §4).
 *
 * MudBlazor 9.9 still exposes no global size default (MudGlobal carries only menu/tooltip knobs),
 * so "every control renders at its Small metrics unless it asks for something else" has to live
 * somewhere. It lives here, in ONE file, rather than as a Size="Size.Small" repeated on forty call
 * sites that the next button anyone adds would silently miss. Form inputs are dense through
 * Margin.Dense in the markup (the design-system rule) and tables through Dense; this layer covers
 * buttons, which MudBlazor renders at Medium when nothing says otherwise.
 *
 * It loads AFTER MudBlazor.min.css in App.razor, so equal-specificity rules win on source order.
 *
 * THIS FILE NAMES MUDBLAZOR'S OWN CLASSES, and that coupling has already bitten once: the first
 * version selected `.mud-button-root:not([class*="-size-"])` — "a button carrying no size class" —
 * but MudBlazor stamps `mud-button-filled-size-medium` on every unsized button, so the layer
 * matched nothing at all and the whole UI quietly stayed at Medium. `ResponsiveDensityTests`
 * renders a bare MudButton and asserts the class names below, so a MudBlazor upgrade that renames
 * them fails a test instead of silently restoring Medium.
 *
 * The values are MudBlazor's own Small metrics, copied from its stylesheet — this shifts WHICH size
 * is the default, it does not invent a fourth size.
 */

/* :not(.mud-icon-button) matters: an icon button carries the same variant classes, and shrinking
   its font-size would shrink the glyph, not the padding. Icon buttons are handled below. */
.mud-button-filled-size-medium:not(.mud-icon-button) {
    padding: 4px 10px;
    font-size: 0.8125rem;
}

.mud-button-outlined-size-medium:not(.mud-icon-button) {
    padding: 3px 9px;
    font-size: 0.8125rem;
}

.mud-button-text-size-medium:not(.mud-icon-button) {
    padding: 4px 5px;
    font-size: 0.8125rem;
}

/* The StartIcon/EndIcon inside those buttons, matched to the small button's icon size. */
.mud-button-icon-size-medium > *:first-child {
    font-size: 18px;
}

/* Icon buttons deliberately keep MudBlazor's default 48px box: that default IS the touch target,
   and the two hamburgers are the only navigation a phone has. Toolbars and table rows that want a
   dense icon say Size="Size.Small" in the markup, where the intent is visible. */

/* A compact button is still something a finger has to hit. On touch screens the type stays small
   and the height comes back; pointer screens — where the actual work is done — stay dense. */
@media (pointer: coarse) {
    .mud-button-filled-size-medium:not(.mud-icon-button),
    .mud-button-outlined-size-medium:not(.mud-icon-button),
    .mud-button-text-size-medium:not(.mud-icon-button),
    .mud-button-filled-size-small:not(.mud-icon-button),
    .mud-button-outlined-size-small:not(.mud-icon-button),
    .mud-button-text-size-small:not(.mud-icon-button) {
        min-height: 36px;
    }

    /* The same trade for the two compact controls the rule above deliberately skipped, because on
       touch the BOX is the target and both are the primary action of the row they sit in. A
       Size.Small icon button is 26px — that is the edit and the delete on every order LINE, side by
       side, inside a row whose own click opens the order, so a miss is not a no-op: it navigates
       away from what was being corrected. A switch is 44×24, and the ΕΝΕΡΓΟ toggle on «Προϊόντα»
       is the one edit that screen makes in place, in a row that likewise navigates.

       Padding, never size: the glyph and the switch's track keep their metrics, the hit area grows
       around them. The switch is padded on the LABEL, which is what a click is forwarded from —
       `.mud-switch-base` is absolutely positioned and carries the checked `translateX(20px)`, so
       padding THERE would move the thumb off its track. */
    .mud-icon-button.mud-icon-button-size-small {
        padding: 8px;
    }

    label.mud-switch {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}