/*
    Täta textfält. Laddas av Portal (wwwroot/index.html) efter MudBlazor.min.css, aldrig av Shopfloor,
    Kiosk eller Hybrid: de behåller handskmåttet (48 px). MudBlazor 9.4 har ingen global input-default,
    så filen ger varje MudBlazor-textfält (MudTextField, MudNumericField, MudSelect, MudAutocomplete,
    MudDatePicker; Outlined, Filled och Text) samma mått som Margin.Dense. Reglerna är MudBlazors egna
    `-margin-dense`-regler med dense-klassen utbytt mot `.mud-input-control`-prefixet; ändra dem inte
    för hand utan att jämföra mot MudBlazor.min.css. Ett enradigt outlined-fält blir ≈ 40 px (förut 56).
    Sätt aldrig Margin/padding per fält i Portal: täthet väljs här, en gång.
*/

/* Kontrollens yttre marginal. Boolean-fält, sliders och filuppladdning har ingen .mud-input och berörs inte. */
.mud-input-control:not(.mud-input-outlined-with-label):has(> .mud-input-control-input-container > .mud-input) {
    margin: 4px 0;
}

.mud-input-control .mud-input-helper-text {
    margin-top: 4px;
}

/* Text (understruket) */
.mud-input-control .mud-input > input.mud-input-root:not(.mud-input-root-filled):not(.mud-input-root-outlined),
.mud-input-control div.mud-input-slot.mud-input-root:not(.mud-input-root-filled):not(.mud-input-root-outlined) {
    padding-top: 3px;
}

.mud-input-control .mud-input > textarea.mud-input-root:not(.mud-input-root-filled):not(.mud-input-root-outlined) {
    margin-top: 0;
    padding-top: 3px;
}

.mud-input-control .mud-input.mud-input-sizing-auto > textarea.mud-input-root.mud-input-root-text {
    padding-top: 3px;
}

/* Filled */
.mud-input-control .mud-input > input.mud-input-root.mud-input-root-filled,
.mud-input-control div.mud-input-slot.mud-input-root.mud-input-root-filled {
    padding-top: 23px;
    padding-bottom: 6px;
}

.mud-input-control .mud-input > input.mud-input-root.mud-input-root-filled.mud-input-root-hidden-label,
.mud-input-control div.mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-hidden-label {
    padding-top: 10px;
    padding-bottom: 11px;
}

.mud-input-control .mud-input > textarea.mud-input-root.mud-input-root-filled {
    padding-top: 23px;
    padding-bottom: 6px;
    mask-image: linear-gradient(to bottom, transparent 23px, black 23px);
}

.mud-input-control .mud-input > textarea.mud-input-root.mud-input-root-filled.mud-input-root-hidden-label {
    padding-top: 10px;
    padding-bottom: 11px;
    mask-image: linear-gradient(to bottom, transparent 10px, black 10px);
}

/* Outlined */
.mud-input-control .mud-input > input.mud-input-root-outlined,
.mud-input-control div.mud-input-slot.mud-input-root-outlined {
    padding-top: 10.5px;
    padding-bottom: 10.5px;
}

.mud-input-control .mud-input > textarea.mud-input-root-outlined {
    margin-top: 0;
    padding-top: 10.5px;
    padding-bottom: 10.5px;
    mask-image: linear-gradient(to bottom, transparent 10.5px, black 10.5px);
}

/* MudNumericField med spinnerknappar */
.mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end) input.mud-input-root {
    padding-right: 20px;
    padding-inline-end: 20px;
}

.mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end).mud-input-text input.mud-input-root {
    padding-inline-start: 0;
}

.mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end).mud-input-filled input.mud-input-root {
    padding-inline-start: 12px;
}

.mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end).mud-input-outlined input.mud-input-root {
    padding-inline-start: 14px;
}

/* Etiketten: viloläge och flytläge (shrink/fokus) */
.mud-input-control .mud-input-label-filled.mud-input-label-inputcontrol {
    transform: translate(12px, 17px) scale(1);
}

.mud-input-control .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, 12px) scale(1);
}

.mud-input-control .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
.mud-input-control .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform: translate(12px, 7px) scale(0.75);
}

.mud-application-layout-rtl .mud-input-control .mud-input-label-filled.mud-input-label-inputcontrol {
    transform: translate(-12px, 17px) scale(1);
}

.mud-application-layout-rtl .mud-input-control .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-14px, 12px) scale(1);
}

.mud-application-layout-rtl .mud-input-control .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled,
.mud-application-layout-rtl .mud-input-control .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform: translate(-12px, 7px) scale(0.75);
}

/* MentionTextField (Common/MentionTextField.razor.css läser variablerna; Shopfloor sätter dem inte och behåller 12/14/1.75). */
:root {
    --mention-pad-y: 9px;
    --mention-pad-x: 14px;
    --mention-line-height: 1.25;
}