/* ===== Compact fields (plan changes/plan/compacte-velden.html, part A) =====
   The one place with field sizes. MudBlazor 8.15 has no theme value for the height of a field, so this file overrides its
   rules with the same selectors. It is loaded right after MudBlazor.min.css (App.razor): an equal selector earlier in the
   page would lose. Every exclusion sits in :where(...), so a rule here weighs exactly as much as MudBlazor's own rule for
   that element and only wins on order; the shrunk label and MudBlazor's dense, filled and multiline variants keep winning.

   Mouse (default): about 40 px. Touch (any-pointer: coarse, so also a hybrid laptop with a touch screen): 48 px.
   Height = padding, never a fixed height, so a field grows with zoom and large text.
   Not touched: a field in a table cell or an editable data-grid cell (MudBlazor gives those their own margins). */

:root {
    --kz-field-h: 40px;            /* outlined field: one line (.mud-input line-height 1.1876em, about 19 px) + 2 x pad */
    --kz-field-pad: 10.5px;
    --kz-field-label-y: 12px;      /* outlined label at rest, in the middle */
    --kz-text-label-space: 12px;   /* Text field: room for the label above the line (MudBlazor 16 px) */
    --kz-text-pad-top: 4px;        /* 12 + 19 + 4 + 5 = 40 px (MudBlazor 6 px / 7 px = 48 px) */
    --kz-text-pad-bottom: 5px;
    --kz-text-label-y: 18px;       /* Text label at rest, on the line (MudBlazor 24 px); 18 px: within 4 px of the line (17 px was 4.6 px; plan productregel-restpunten 1.7) */
    --kz-adorn-btn: 28px;          /* a button in a field: calendar, clock, search, clear */
    --kz-field-gap: 8px 12px;      /* gap in a grid of fields (used by part B, the product-rule card) */
    --kz-head-size: 0.75rem;       /* heading above a group of fields (part B) */
    --kz-help-size: 0.75rem;       /* helper text and error (12 px), in rem so it grows with large text */
}

@media (any-pointer: coarse) {
    :root {
        --kz-field-h: 48px;
        --kz-field-pad: 14.5px;
        --kz-field-label-y: 16px;
        --kz-text-label-space: 16px;
        --kz-text-pad-top: 6px;    /* 16 + 19 + 6 + 7 = 48 px: as MudBlazor makes it */
        --kz-text-pad-bottom: 7px;
        --kz-text-label-y: 24px;
        --kz-option-min-h: 48px;   /* an option in an open list; with a mouse the lists keep their size */
        --kz-adorn-btn: 40px;
        --kz-field-gap: 10px 12px;
    }

    .mud-popover .mud-list-item {
        min-height: var(--kz-option-min-h);
    }
}

/* ---- Outlined (with a border), also Margin.Dense */
.mud-input>input.mud-input-root-outlined:where(:not(.mud-table-cell *, .edit-mode-cell *)),
div.mud-input-slot.mud-input-root-outlined:where(:not(.mud-table-cell *, .edit-mode-cell *)),
.mud-input>input.mud-input-root-outlined.mud-input-root-margin-dense:where(:not(.mud-table-cell *, .edit-mode-cell *)),
div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    padding-top: var(--kz-field-pad);
    padding-bottom: var(--kz-field-pad);
}

.mud-input-label-outlined:where(:not(.mud-input-label-shrink)):where(:not(.mud-table-cell *, .edit-mode-cell *)),
.mud-input-label-outlined.mud-input-label-margin-dense:where(:not(.mud-input-label-shrink)):where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    transform: translate(14px, var(--kz-field-label-y)) scale(1);
}

/* multi-line outlined field (MudBlazor: margin-top 18.5px, padding 0 14px 18.5px; dense 10.5px) */
.mud-input>textarea.mud-input-root-outlined:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-top: var(--kz-field-pad);
    padding-bottom: var(--kz-field-pad);
}

.mud-input>textarea.mud-input-root-outlined.mud-input-root-margin-dense:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-top: 0;
    padding-top: var(--kz-field-pad);
    padding-bottom: var(--kz-field-pad);
    mask-image: linear-gradient(to bottom, transparent var(--kz-field-pad), black var(--kz-field-pad));
}

/* ---- Text (only a line underneath): own variables, otherwise the outlined padding would make it higher */
.mud-input-control>.mud-input-control-input-container>div.mud-input.mud-input-text.mud-input-text-with-label:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-top: var(--kz-text-label-space);
}

/* MudBlazor's dense (padding-top 3px), filled and multiline rules have one class more and keep winning. */
.mud-input>input.mud-input-root:where(:not(.mud-input-root-outlined, .mud-input-root-filled)):where(:not(.mud-table-cell *, .edit-mode-cell *)),
div.mud-input-slot.mud-input-root:where(:not(.mud-input-root-outlined, .mud-input-root-filled)):where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    padding-top: var(--kz-text-pad-top);
    padding-bottom: var(--kz-text-pad-bottom);
}

.mud-input>textarea.mud-input-root:where(:not(.mud-input-root-outlined, .mud-input-root-filled)):where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-top: var(--kz-text-pad-top);
    margin-bottom: var(--kz-text-pad-bottom);
}

.mud-input-label-inputcontrol:where(:not(.mud-input-label-outlined, .mud-input-label-filled, .mud-input-label-shrink)):where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    transform: translate(0, var(--kz-text-label-y)) scale(1);
}

/* Margin.Dense: MudBlazor keeps padding-top 3px and the label follows the rule above (MudBlazor's own dense label class,
   mud-input-label-margin-dense, has no Text rule): mouse 39 px, touch 45 px as now. */

/* ---- margin around a field: Margin.Normal gets the dense margin */
.mud-input-control.mud-input-control-margin-normal:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-top: 4px;
    margin-bottom: 4px;
}

.mud-input-control.mud-input-control-margin-normal.mud-input-outlined-with-label:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-top: 8px;
    margin-bottom: 4px;
}

/* ---- helper text and error */
.mud-input-helper-text:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    font-size: var(--kz-help-size);
}

/* ---- a button in a field (Autocomplete, DatePicker, TimePicker, search; clear is a button next to the adornment): a fixed size.
   With a finger the whole 48 px field is the touch area. The edge margins keep the icon where MudBlazor puts it
   (MudBlazor: 12 px padding, -12 px margin = (24 px icon - 48 px button) / 2). */
.mud-input-adornment .mud-icon-button:where(:not(.mud-table-cell *, .edit-mode-cell *)),
.mud-input .mud-icon-button.mud-input-clear-button:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    width: var(--kz-adorn-btn);
    height: var(--kz-adorn-btn);
    padding: 0;
}

/* in a Text field the box under the label is lower (mouse 28 px, touch 32 px): the button takes that height, so it stays inside */
.mud-input-text .mud-input-adornment .mud-icon-button:where(:not(.mud-table-cell *, .edit-mode-cell *)),
.mud-input-text .mud-icon-button.mud-input-clear-button:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    width: calc(var(--kz-field-h) - var(--kz-text-label-space));
    height: calc(var(--kz-field-h) - var(--kz-text-label-space));
}

.mud-input-adornment .mud-icon-button.mud-icon-button-edge-end:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-inline-end: calc((24px - var(--kz-adorn-btn)) / 2);
}

.mud-input-adornment .mud-icon-button.mud-icon-button-edge-start:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-inline-start: calc((24px - var(--kz-adorn-btn)) / 2);
}

/* the same edge margins for the lower button in a Text field */
.mud-input-text .mud-input-adornment .mud-icon-button.mud-icon-button-edge-end:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-inline-end: calc((24px - (var(--kz-field-h) - var(--kz-text-label-space))) / 2);
}

.mud-input-text .mud-input-adornment .mud-icon-button.mud-icon-button-edge-start:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-inline-start: calc((24px - (var(--kz-field-h) - var(--kz-text-label-space))) / 2);
}

/* ---- the up/down buttons of a number field: MudBlazor makes them 2 x 28 px, made for its 56 px field. They share the
   height of the field (each half) and the arrow follows: outlined half the field, Text half the line + padding. */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.mud-input-control.mud-input-number-control .mud-input-outlined .mud-input-numeric-spin button .mud-icon-root:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    font-size: calc(var(--kz-field-h) / 2);
}

.mud-input-control.mud-input-number-control .mud-input-text .mud-input-numeric-spin button .mud-icon-root:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    font-size: calc((var(--kz-field-h) - var(--kz-text-label-space)) / 2 - 1px);   /* - 1px: a dense Text field is 1 px lower (padding-top 3px) */
}

/* A dense Text field keeps MudBlazor's padding-top 3px, so its box under the label is (--kz-text-pad-top - 3px) lower: 27 px with a mouse, 29 px with a finger.
   Measured (part A): the button stuck out by 3 px with a finger; with a mouse it was 28 px in the 27 px box (review point 5). The dense class sits on the
   control, the input is a sibling of the button. One rule: the variables give the mouse and the finger size (plan productregel-restpunten 1.7). */
.mud-input-control-margin-dense .mud-input-text .mud-input-adornment .mud-icon-button:where(:not(.mud-table-cell *, .edit-mode-cell *)),
.mud-input-control-margin-dense .mud-input-text .mud-icon-button.mud-input-clear-button:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    width: calc(var(--kz-field-h) - var(--kz-text-label-space) - (var(--kz-text-pad-top) - 3px));
    height: calc(var(--kz-field-h) - var(--kz-text-label-space) - (var(--kz-text-pad-top) - 3px));
}

.mud-input-control-margin-dense .mud-input-text .mud-input-adornment .mud-icon-button.mud-icon-button-edge-end:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-inline-end: calc((24px - calc(var(--kz-field-h) - var(--kz-text-label-space) - (var(--kz-text-pad-top) - 3px))) / 2);
}

.mud-input-control-margin-dense .mud-input-text .mud-input-adornment .mud-icon-button.mud-icon-button-edge-start:where(:not(.mud-table-cell *, .edit-mode-cell *)) {
    margin-inline-start: calc((24px - calc(var(--kz-field-h) - var(--kz-text-label-space) - (var(--kz-text-pad-top) - 3px))) / 2);
}