/* ========================================
   TYPOGRAPHY & DENSITY - lettertype en compacte invoervelden
   ======================================== */

/* Globaal lettertype - override MudBlazor's Roboto default */
html,
body,
.mud-typography,
.mud-input,
.mud-input-control,
.mud-button-root,
.mud-table,
.mud-nav-link,
.mud-tooltip,
.mud-chip,
.mud-list-item-text {
    font-family: "Inter", "Helvetica", "Arial", sans-serif;
}

/* GLOBAL DEFAULT FONT SIZE */
body,
.mud-typography,
.mud-input,
.mud-input-root,
.mud-input-slot,
.mud-select-input,
.mud-checkbox .mud-typography,
.mud-button,
.mud-menu-item,
.mud-list-item {
    font-size: 0.825rem !important;
}

/* Dialog titel uitzondering - voorkom verkleining van dialog titels */
.mud-dialog-title .mud-typography-h6 {
    font-size: 1.25rem !important;
}

/* GLOBAL DENSE INPUT STYLES - compacte invoervelden */
.mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* PMA-aanvulling: de regel hierboven (portal) wint van MudBlazor's eigen spacing-utilities (beide
   !important, één class, en dit bestand laadt later), waardoor een veld met Class="mb-3" zijn ruimte
   kwijtraakt. De PMA zet die spacing op tientallen velden (formulieren en dialogs); met twee classes
   wint een expliciete utility weer. Zelfde schaal als MudBlazor (4px per stap). */
.mud-input-control.mt-1, .mud-input-control.my-1 { margin-top: 4px !important; }
.mud-input-control.mt-2, .mud-input-control.my-2 { margin-top: 8px !important; }
.mud-input-control.mt-3, .mud-input-control.my-3 { margin-top: 12px !important; }
.mud-input-control.mt-4, .mud-input-control.my-4 { margin-top: 16px !important; }
.mud-input-control.mt-5, .mud-input-control.my-5 { margin-top: 20px !important; }
.mud-input-control.mt-6, .mud-input-control.my-6 { margin-top: 24px !important; }
.mud-input-control.mb-1, .mud-input-control.my-1 { margin-bottom: 4px !important; }
.mud-input-control.mb-2, .mud-input-control.my-2 { margin-bottom: 8px !important; }
.mud-input-control.mb-3, .mud-input-control.my-3 { margin-bottom: 12px !important; }
.mud-input-control.mb-4, .mud-input-control.my-4 { margin-bottom: 16px !important; }
.mud-input-control.mb-5, .mud-input-control.my-5 { margin-bottom: 20px !important; }
.mud-input-control.mb-6, .mud-input-control.my-6 { margin-bottom: 24px !important; }

.mud-input-control .mud-input-slot {
    padding: 6px 10px !important;
    min-height: unset !important;
}

.mud-input>input.mud-input-root-outlined.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding: 6px !important;
}

.mud-select .mud-input-slot {
    padding: 6px 10px !important;
    min-height: unset !important;
}

/* PMA-afwijking: de portal-regel `.mud-input-label { transform: translateY(-50%) !important; }` is
   bewust NIET overgenomen. De portal zet labels links naast het veld (.bw-dialog-form-label); de PMA
   gebruikt zwevende outlined labels (Label="..."), en die regel zou het gefloate label zijn x-offset
   en schaal afnemen, zodat het over de linkerrand van het veld valt. */

/* PMA-aanvulling: INPUT LABELS even groot als de invoertekst.
   Zonder dit blijft het rustende label (bv. "Zoek issue...", "Tags toevoegen") op
   MudBlazor's standaardgrootte (~1rem) en oogt het groter dan de inhoud (0.825rem).
   De shrink-transform en outlined-notch schalen relatief mee, dus blijven uitgelijnd. */
.mud-input-label-inputcontrol {
    font-size: 0.825rem !important;
}

/* PMA-aanvulling: RUSTEND OUTLINED-LABEL VERTICAAL CENTREREN.
   MudBlazor zet het rustende (lege, niet-gefocuste) outlined-dense label vast op
   translate(14px, 12px) — gekalibreerd voor de standaard veldhoogte. De compacte
   input-CSS hierboven (padding 6px + font 0.825rem) maakt het veld lager, waardoor 12px ~7px
   onder het midden valt. 4.6px centreert het (empirisch gemeten tegen de MudBlazor-CSS).
   De :not(.mud-shrink):not(:focus-within)-guard zorgt dat alleen het rustende label
   verschuift; het gefloate label (op de rand) blijft intact. */
.mud-input:not(.mud-shrink):not(:focus-within) ~ label.mud-input-label-outlined.mud-input-label-inputcontrol.mud-input-label-margin-dense {
    transform: translate(14px, 4.6px) scale(1) !important;
}

.mud-input-control .mud-input-root {
    margin-top: 0 !important;
}

/* Multi-line MudTextField (Lines > 1). The two dense rules above are written for single-line inputs:
   without the outlined variant's top offset a textarea's first line sits on the border and gets clipped,
   so it gets extra top padding and a readable line height back. */
.mud-input-control textarea.mud-input-slot {
    padding: 8px 10px 6px !important;
    line-height: 1.4;
    box-sizing: border-box;
    overflow: auto;
    resize: vertical;
}