/* ========================================
   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;
}

.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;
}

.mud-input-label {
    transform: translateY(-50%) !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;
}