/* ItreeMud: Stylesheet der Komponentenbibliothek
 *
 * Herkunft: ausgezogen aus app.css (ItreeBlazor.Client, Branch feature/mudblazor). Reihenfolge, Kommentare und Regeln
 * sind unveraendert, damit die Kaskade gleich bleibt. Ausgelassen sind nur Regeln, die ausschliesslich nicht migrierte
 * Teile betreffen (Seiten, Layout, Login, Cockpit, Stepper, Aufgaben, Upload, ProgressBar, Bootstrap-Tabellen).
 * Einzige Anpassung: der Pfad des Hamburger-Icons ist relativ zu dieser Datei (img/hamburger-icon.svg) und damit unabhaengig
 * von PathBase bzw. <base href> des Konsumenten. "app.css" in den Kommentaren meint diese Datei.
 *
 * Einbindung durch Konsumenten in der Host-Page (wwwroot/index.html bzw. Components/App.razor), nach MudBlazor.min.css
 * (und nach Bootstrap, falls verwendet):
 *   <link href="_content/ItreeMud/itreemud.css" rel="stylesheet" />
 */

/* general*/
/* Schrift aus dem aktiven Theme (ItreeTheme bzw. Kunden-Theme mit schriften), damit Fliesstext, native
   Eingaben (Bootstrap-Reboot: font-family: inherit) und .mud-input dieselbe Schrift wie die Mud-Komponenten
   zeigen. Fallback = ItreeTheme-Default, solange MudThemeProvider die Variable noch nicht gesetzt hat. */
html, body {
    font-family: var(--mud-typography-default-family, 'Roboto', Helvetica, Arial, sans-serif);
    font-size: 100%;
}

a:hover {
    text-decoration: underline !important;
    cursor: pointer;
}

a:focus {
    background-color: transparent !important;
}

/* ### Kunden-Theme: Bootstrap-Variablen an die Mud-Palette angleichen ###
   Einzige Quelle der Wahrheit fuer die Kundenfarbe ist das Theme, das eine Consumer-App per
   ItreeTheme.ErstelleKundenTheme(...) baut und an ItreeRootComponent.Theme uebergibt; MudThemeProvider
   uebersetzt es zur Laufzeit in --mud-palette-*. Bootstrap-Klassen, die Consumer weiterhin nutzen
   (btn-primary, text-primary, --bs-primary ...) werden hier auf dieselben Werte gespiegelt, damit die
   Kundenfarbe nicht ein zweites Mal (z. B. in einer eigenen app_{KANTON}.css) gepflegt werden muss. */
:root {
    --bs-primary: var(--mud-palette-primary);
    --bs-primary-rgb: var(--mud-palette-primary-rgb);
    --bs-link-color: var(--mud-palette-primary);
    --bs-link-hover-color: var(--mud-palette-primary-darken);
}

/* ### Menu ### */

.navbar-expand-xl {
    justify-content: space-between;
}

/* z-index wie die MudBlazor-AppBar (1300): über Popovers (1200) und Seiteninhalt, aber unter dem Dialog-Backdrop
   (1400). Der frühere Wert 10002 stammt aus der Zeit der alten Fenster (z-index ab 10002); er hob das Menü über den
   abgedunkelten Hintergrund eines modalen Fensters, das Menü blieb dort hell, klickbar und ragte in maximierte Fenster.
   position: relative, weil MudBlazor den z-index der Untermenü-Popover nur aus positionierten Vorfahren ableitet: Statisch
   bekamen sie 1201 und lagen unter dem Menü (z. B. unter einer Aktiv-Linie, die in das Popover ragt), so 1301. */
.navbar-collapse {
    justify-content: flex-start;
    position: relative;
    z-index: 1300;
}

.navbar-toggler-icon {
    background-image: url('img/hamburger-icon.svg');
}

.navbar-toggler-menu {
    background-color: transparent !important;
}

.navbar-toggler-menu svg {
    color: var(--mud-palette-primary);
}

/* ItreeMenu, Desktop: Hauptpunkte nebeneinander in div.itree-menu. Ein Hauptpunkt mit Kindern ist ein MudMenu
   (div.mud-menu.itree-menu-item > div.mud-menu-activator > span.itree-menu-link > a), einer ohne Kinder
   div.itree-menu-item > span.itree-menu-link > a. Die Untermenues sind MudMenu-Listen (.itree-menu-group) im Popover
   (.itree-menu-popover), ihre Eintraege MudMenuItems bzw. verschachtelte MudMenus, beide mit .itree-menu-item.
   Consumer uebersteuern den Abstand der Hauptpunkte ueber ".itree-menu > .itree-menu-item .itree-menu-link". */
.itree-menu {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
}

    .itree-menu > .itree-menu-item {
        display: flex;
        align-self: stretch;
        position: relative;
        user-select: none;
    }

.itree-menu-link {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
}

.itree-menu > .itree-menu-item .itree-menu-link {
    padding: 0.375rem 0.75rem;
}

/* MudBlazor setzt den Aktivator eines MudMenu auf display: contents. So ist er nicht fokussierbar: Tab übersprang die
   Hauptpunkte mit Kindern, Enter und die Pfeiltasten kamen nie an. */
.itree-menu > .itree-menu-item > .mud-menu-activator {
    display: flex;
}

    .itree-menu > .itree-menu-item > .mud-menu-activator:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

.itree-menu-item a {
    color: inherit;
}

.itree-menu-expand-arrow {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.itree-menu-popover .mud-menu-list-wrapper {
    max-height: 80vh;
    overflow-y: auto;
}

/* Verschachtelte MudMenus sind in der Liste display: inline. Als Block hat der Eintrag die Fläche seines
   Aktivators, auf die der Hover zielt. */
.itree-menu-group > .mud-menu.itree-menu-item {
    display: block;
}

.itree-menu-group .mud-menu-item {
    white-space: nowrap;
}

    /* Zeilenhöhe wie beim früheren Menü (MudMenu: 4px Rand um den Text) */
    .itree-menu-group .mud-menu-item .mud-menu-item-text {
        margin: 2px 0;
    }

.itree-menu-group .itree-menu-link {
    cursor: inherit;
}

.itree-menu-group .itree-menu-expand-arrow {
    margin-left: auto;
    padding-left: 1rem;
}

/* Eine Spalte, die nie breiter wird als der Rahmen (minmax(0, 1fr) statt der impliziten auto-Spalte). Die auto-Spalte
   wuchs auf die Mindestbreite ihres Inhalts: Ein ItreeGrid mit Resizable (Tabelle width:max-content) ragte bei
   schmalem Fenster rechts aus dem Rahmen, und die Seite scrollte quer. Jetzt scrollt das Grid in sich. */
.site-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 5px 20px 5px;
    border-left: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
    width: max-content;
}

/* Mud-Eingaben mit "For" zeigen die Meldung aus dem EditContext selbst unter dem Feld an. Wo die Meldung stattdessen
   als Tooltip (ItreeCustomValidationMessage Type=Tooltip) erscheint und die Zeile nicht wachsen darf (z. B. Tabellen),
   blendet diese Klasse auf dem Feld die Meldung unter dem Feld aus; der rote Rahmen bleibt. */
.itree-hide-error-text .mud-input-helper-text.mud-input-error {
    display: none;
}

/* Fokus der Eingabefelder (Unterstreichung, Outlined-Rahmen, Label) in ItreeTheme.Fokusfarbe (--itree-fokusfarbe, von
   ItreeRootComponent gesetzt), ohne Angabe in der Primärfarbe wie bei MudBlazor. Gleiche Selektoren wie in
   MudBlazor.min.css, darum muss app.css danach geladen werden. Die Fehlerregeln von MudBlazor sind spezifischer bzw.
   !important, ein Feld mit Fehler bleibt also auch mit Fokus in der Fehlerfarbe. */
.mud-input.mud-input-underline:after,
.mud-input.mud-input-filled.mud-input-underline:after {
    border-bottom-color: var(--itree-fokusfarbe, var(--mud-palette-primary));
}

.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-color: var(--itree-fokusfarbe, var(--mud-palette-primary));
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--itree-fokusfarbe, var(--mud-palette-primary));
}

/* ### Zahlenfelder (MudNumericField) ###
   Variant.Text hat seitlich keinen Innenabstand (MudBlazor: .mud-input>input.mud-input-root { padding: 6px 0 7px }),
   rechtsbündige Werte klebten dadurch am Zellen-/Feldrand. Wie früher (Telerik k-input-inner) 8px rechts. Mit
   Spin-Buttons reserviert MudBlazor rechts bereits Platz (.mud-input-showspin), mit Adornment steht dieses dort.
   Spezifischer als die MudBlazor-Regel (0,2,1). */
.mud-input-control.mud-input-number-control:not(.mud-input-showspin) .mud-input.mud-input-text:not(.mud-input-adorned-end) > input.mud-input-root {
    padding-right: 8px;
    padding-inline-end: 8px;
}

/* ### Checkboxen ###
   MudCheckBox in der Primärfarbe des (Kunden-)Themes, angehakt wie leer, also wie Color="Color.Primary". Der MudBlazor-
   Default Color.Default setzt keine Farbklasse, die Checkbox erbt dann das Grau von .mud-icon-button
   (--mud-palette-action-default). Eine Farbe am Aufruf (Klasse mud-<farbe>-text, !important) geht vor. Deaktiviert bleibt
   sie grau: MudBlazor setzt dann .mud-disabled und färbt über --mud-palette-text-disabled. */
.mud-checkbox > .mud-icon-button:not(.mud-disabled) {
    color: var(--mud-palette-primary);
    --mud-ripple-color: var(--mud-palette-primary);
}

/* Native Checkboxen (<input type="checkbox"> ohne MudCheckBox) ebenso. Bei MudCheckBox ist das input unsichtbar
   (opacity: 0), dort wirkt die Regel nicht. */
input[type="checkbox"] {
    accent-color: var(--mud-palette-primary);
}

/* ItreeMultiSelect: die Kästchen vor den Einträgen wie die Checkboxen (MudBlazor: grau über .mud-list-item-icon).
   Deaktivierte Einträge bleiben grau (.mud-list-item-disabled, !important). */
.itree-multiselect-list .mud-list-item-icon {
    color: var(--mud-palette-primary);
}

/* Checkbox-Listen (je Zeile eine Checkbox mit Beschriftung): kompakt wie Dense + Size.Small, 28px statt 48px je Zeile.
   Gilt in jedem Filtermenü eines ItreeGrid (.itree-grid-filter-menu, also auch in eigenen FilterMenuTemplates und
   ItreeFilterCheckboxList) und in jedem Container mit der Klasse itree-checkbox-list (Mehrfachauswahl in Formularen). */
.itree-checkbox-list .mud-checkbox > .mud-icon-button,
.itree-grid-filter-menu .mud-checkbox > .mud-icon-button {
    padding: 4px;
}

    .itree-checkbox-list .mud-checkbox > .mud-icon-button > .mud-icon-root,
    .itree-grid-filter-menu .mud-checkbox > .mud-icon-button > .mud-icon-root {
        font-size: 1.25rem;
    }

/* ItreeDropDownList: waehlbarer DefaultText-Eintrag ueber den Eintraegen (setzt den Wert zurueck) */
.itree-dropdown-optionlabel {
    padding: 12px 16px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-family: var(--mud-typography-body1-family);
    font-size: var(--mud-typography-body1-size);
    font-weight: var(--mud-typography-body1-weight);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
}

    .itree-dropdown-optionlabel:hover,
    .itree-dropdown-optionlabel-selected {
        background-color: var(--mud-palette-action-default-hover);
    }

/* Fehlerbalken von Blazor: über allen MudBlazor-Ebenen (Dialog 1400, Snackbar 1500, Tooltip 1600). Mit 1000 lag er bei
   einem Fehler in einem offenen Fenster unter dessen abgedunkeltem Overlay und «Reload» war nicht klickbar.
   Schrift fest dunkel: MudBlazor.min.css stylt den Balken selbst (Hintergrund --mud-palette-error, Schrift
   --mud-palette-error-text = Weiss, .reload/.dismiss color: inherit). Hier wird nur der Hintergrund hellgelb, ohne eigene
   Schriftfarbe stand der Text weiss auf hellgelb. Fester Wert statt Theme-Variable, weil auch der Hintergrund fest ist und
   der Balken schon vor dem ersten Rendern des MudThemeProvider (noch keine --mud-palette-*) erscheinen kann. */
#blazor-error-ui {
    background: lightyellow;
    color: #212529;
    bottom: 20px;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

#return {
    color: cornflowerblue;
    margin-top: 10px;
    margin-left: 25px;
}

#return:hover{
    color: black;
    cursor: pointer;
}

/* Buttons */
.button-grp {
    gap: 10px;
}

/* ### ItreeButton: eigenes, MudBlazor-angelehntes Button-Chrome (vorher nur ueber ein externes Theme der
   Consumer-index.html gestylt, ohne eigene Regeln in dieser Datei) ###
   Buttons mit Text sehen aus wie früher im Kendo-Default-Theme (k-button-solid-base): hellgrauer Hintergrund
   mit feiner Umrandung. Reine Icon-Buttons (.itree-button-icon-only) bleiben transparent.
   Höhe 30px (20px Inhalt + 2 × 4px Padding + 2 × 1px Rand) wie die Mud-Eingaben (MudTextField, MudSelect) und die
   ItreeSearchbox, damit Buttons und Felder in einer Zeile (z. B. Grid-Toolbar) gleich hoch sind. */
.itree-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 64px;
    padding: 4px 16px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--mud-default-borderradius, 4px);
    background-color: #f5f5f5;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.43;
    cursor: pointer;
    transition: background-color .2s ease-in-out, opacity .2s ease-in-out;
}

    .itree-button:hover {
        background-color: #ebebeb;
    }

    .itree-button:disabled,
    .itree-button.itree-button-disabled {
        color: var(--mud-palette-text-disabled);
        background-color: var(--mud-palette-action-disabled-background);
        cursor: default;
    }

    /* Der Spinner (MudProgressCircular Small, 24px) ist grösser als Icon und Text (20px) und liess den Button
       während des Ladens höher werden. */
    .itree-button .spinner-button.mud-progress-circular {
        width: 20px;
        height: 20px;
    }

.itree-button-icon-only {
    min-width: 0;
    padding: 4px;
    border-color: transparent;
    border-radius: 50%;
    background-color: transparent;
}

    .itree-button-icon-only:hover:not(:disabled) {
        background-color: var(--mud-palette-action-default-hover);
    }

.itree-button-primary {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

    .itree-button-primary:hover {
        background-color: var(--mud-palette-primary-darken);
    }

/* Leeren-Button in der ItreeSearchbox: muss in die 30px hohe Box (28px innen) passen */
.itree-button-clear {
    min-width: 0;
    padding: 2px;
}

.icon-width {
    min-width: 100px;
}

/* ### ItreeForm/ItreeFormData: Label-Feld-Layout in zwei Spalten (vorher nur ueber ein externes Theme der
   Consumer-index.html gestylt, ohne eigene Regeln in dieser Datei) ### */
.itree-form-fields {
    width: 100%;
}

.itree-form-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Label wie beim früheren horizontalen Formular: 25 % breit, rechtsbündig, 10px vor dem Feld, 14px Schrift */
.itree-form-label {
    flex: 0 0 25%;
    max-width: 25%;
    margin-right: 10px;
    text-align: right;
    font-size: 0.875rem;
    line-height: 1.4285714286;
}

.itree-form-field-wrap {
    flex: 1 1 auto;
    max-width: calc(75% - 10px);
    min-width: 0;
}

/* Checkbox ohne Text: an der Grundlinie stünde sie über dem Label, deshalb mittig */
.itree-form-field:has(> .itree-form-field-wrap .mud-checkbox) {
    align-items: center;
}

/* Label/Wert-Paare ohne ItreeFormData (ItreeHistoryGrundAenderungenErfassen, SapBusinessPartnerIdComponent, Consumer-
   Formulare): Label links neben dem Wert, per float (kein Flex-Elternteil). Masse wie beim frueheren Edit-Formular:
   Label 30 % rechtsbuendig, beginnt jeweils eine neue Zeile (clear), Feld 63 % mit 30px Abstand, 1rem Zeilenabstand.
   Das Feld ist hoechstens 70 % - 30px breit, damit es immer neben dem Label bleibt: 30 % + 30px + 63 % passen erst ab
   rund 430px Containerbreite in eine Zeile, darunter rutschte das Feld unter das Label (inhaltsbreite Fenster, z. B.
   AVG2 Leistungsstunden). Ab 430px gilt weiter 63 %, breitere Formulare sehen unveraendert aus. Frueher (develop) galt
   dasselbe float-Layout (k-edit-label/k-edit-field mit den Overrides 63 % und 30px), der Container war dort aber
   mindestens 400px breit (k-edit-form-container), siehe Mindestbreite im Fenster unten. */
.itree-edit-field {
    width: 63%;
    max-width: calc(70% - 30px);
    margin: 0 0 1rem 30px;
    float: left;
    position: relative;
}

    .itree-edit-field input[type="checkbox"] {
        margin-top: 8px;
    }

.itree-edit-label {
    width: 30%;
    margin: 0 0 1rem;
    padding: calc(0.25rem + 1px) 0;
    line-height: 1.4285714286;
    text-align: right;
    float: left;
    clear: both;
}

/* Ein .itree-form-field um ein solches Float-Paar ist keine Flex-Zeile, sondern ein normaler Block
   (SapBusinessPartnerIdComponent ohne UseFormClass im Float-Formular von AVG2 BetriebAllgemein). Als Flex-Container
   bildete es einen eigenen Formatierungskontext, rutschte neben die Floats davor, und das Label bekam 15 % einer rund
   200px schmalen Zeile (dreizeilig). develop: k-form-field war ausserhalb von .k-form ein normaler Block. */
.itree-form-field:has(> .itree-edit-label) {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
}

/* Mindestbreite der Label/Feld-Paare in inhaltsbreiten Fenstern (ItreeWindow mit FullWidth="false" oder ohne MaxWidth,
   erkennbar am fehlenden mud-dialog-width-full). Ein solches Fenster schrumpft auf seinen Titel, das Label bekam 30 %
   einer schmalen Breite und brach um ("Anzahl / Stunden", AVG2 Leistungsstunden 369px, Richtstellen 381px).
   develop: k-edit-form-container hatte im Telerik-Theme min-width 400px, die Formulare waren durch die breitere
   NumericTextBox tatsaechlich 498 bis 518px breit (gemessen), die Labels im Fenster 14px. Die Labels sind jetzt 16px
   ("Total Richtstellen" 123px), 400px (Label 120px) reichen deshalb nicht: 500px wie das develop-Mass.
   Gilt fuer das Element, das die Paare direkt enthaelt (itree-edit-* und ItreeForm/ItreeFormData), nicht fuer Seiten
   und nicht fuer Fenster mit fester Breite. Bei sehr schmalem Browserfenster hoechstens so breit, dass der Dialog samt
   Rand (2 x 32px) und Innenabstand (2 x 24px) noch hineinpasst. */
.mud-dialog:not(.mud-dialog-width-full) :has(> .itree-edit-label),
.mud-dialog:not(.mud-dialog-width-full) :has(> .itree-form-field) {
    min-width: min(500px, 100vw - 112px);
}

.itree-padding-top-5 {
    padding-top: 5px;
}

/* Error window settings*/
.error-title {
    font-weight: bold;
    padding-left: 10px;
    color: var(--mud-palette-error);
}

.error-content {
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
}

/* Spinner*/
.spinner-button {
    align-self: center;
}

/* ItreeSpinner und Boot-Spinner der Consumer (index.html, vor dem Blazor-Start): reiner CSS-Ring, damit beide gleich
   aussehen. Er dreht sich nur (transform) und läuft deshalb auch weiter, wenn Blazor WebAssembly den Hauptthread
   blockiert. Farbe ist die Primärfarbe des aktiven Themes; .itree-spinner-neutral (und ohne MudThemeProvider) grau. */
.itree-spinner {
    --itree-spinner-farbe: var(--mud-palette-primary, #595959);
    width: 3rem;
    height: 3rem;
    border: .35rem solid rgba(0, 0, 0, .15);
    border-top-color: var(--itree-spinner-farbe);
    border-radius: 50%;
    animation: itree-spinner-drehen .75s linear infinite;
    will-change: transform;
}

    .itree-spinner.itree-spinner-neutral {
        --itree-spinner-farbe: #595959;
    }

/* Ring in einem hellen Ton der Spinnerfarbe. Hinter @supports, weil eine Deklaration mit var() ohne color-mix-Support
   erst zur Laufzeit ungültig wird und dann nicht auf die graue border oben zurückfällt, sondern den Ring ganz entfernt. */
@supports (color: color-mix(in srgb, red 20%, transparent)) {
    .itree-spinner {
        border-color: color-mix(in srgb, var(--itree-spinner-farbe) 20%, transparent);
        border-top-color: var(--itree-spinner-farbe);
    }
}

@keyframes itree-spinner-drehen {
    to {
        transform: rotate(360deg);
    }
}

/* Spinner (Buttons, ReleaseAccordion): MudBlazors Indeterminate-Animation lässt den Bogen über stroke-dasharray von 1px auf
   100px wachsen. Diese Animation läuft im Hauptthread, den Blazor WebAssembly beim Laden und Rendern blockiert; der
   Spinner blieb dann oft als kaum sichtbares Strichlein stehen. Ein fester Bogen, der sich nur dreht (transform), läuft
   auch bei blockiertem Hauptthread weiter. */
.loader-indicator.mud-progress-circular,
.spinner-button.mud-progress-circular {
    will-change: transform;
}

    .loader-indicator .mud-progress-circular-circle.mud-progress-indeterminate,
    .spinner-button .mud-progress-circular-circle.mud-progress-indeterminate {
        animation: none;
        stroke-dasharray: 80px, 200px;
    }

/* Field sizes */
.field-small {
    width: 150px !important;
}

.field-medium {
    width: 300px !important;
}

.field-large {
    width: 400px !important;
}

/* Im Label/Feld-Formular (.itree-edit-field) begrenzen die Grössenklassen bei Mud-Eingabefeldern nur die Eingabe, nicht
   den ganzen Feldbereich. Die Fehlermeldung unter dem Feld brach sonst in dessen Breite um (BUR-Nummer in 150px, AVG2
   BetriebAllgemein), obwohl rechts davon Platz frei ist. Der Feldbereich reicht bis zum rechten Rand (70 % - 30px, die
   Höchstbreite von .itree-edit-field), die Meldung bricht erst dort um. Die Eingabe ist so breit wie bisher (Grösse,
   höchstens der Feldbereich). develop: die ValidationMessage neben der Telerik-Textbox hatte width: max-content und
   brach nie um, auch wenn sie dadurch über den Rand hinauslief. */
.itree-edit-field:is(.field-small, .field-medium, .field-large):has(> .mud-input-control) {
    width: calc(70% - 30px) !important;
}

    .itree-edit-field.field-small > .mud-input-control > .mud-input-control-input-container {
        width: 150px;
        max-width: 100%;
    }

    .itree-edit-field.field-medium > .mud-input-control > .mud-input-control-input-container {
        width: 300px;
        max-width: 100%;
    }

    .itree-edit-field.field-large > .mud-input-control > .mud-input-control-input-container {
        width: 400px;
        max-width: 100%;
    }

/* Dropzone: Rahmen in der Primärfarbe, Hintergrund in ItreeTheme.DropzoneHintergrund (--itree-dropzone-hintergrund, von
   ItreeRootComponent gesetzt), ohne Angabe neutral hellgrau. Beim Überfahren und beim Hineinziehen einer Datei
   (.dropAreaDrug) kommt etwas Primärfarbe in den Hintergrund. */
.dropArea {
    border: 2px dashed var(--mud-palette-primary);
    border-radius: 0.5em;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--itree-dropzone-hintergrund, #F8F9FA);
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    min-height: 200px;
}

    .dropArea:hover,
    .dropAreaDrug {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--itree-dropzone-hintergrund, #F8F9FA));
        color: #333;
    }

.dropArea-sm {
    min-height: 0 !important;
}

/* Searchbox */
.searchbox {
    display: inline-flex;
    height: 30px;
    width: 30%;
    border-color: rgba(0, 0, 0, 0.08);
    border-width: 1px;
    border-style: solid;
}

/* Suchfeld und Suchen-Button in einer Zeile (wie in der Grid-Toolbar). Oben ausgerichtet: Zeigt ein Mud-Feld darunter
   eine Validierungsmeldung an, wird es höher, der Button bleibt dann auf Höhe des Eingabefelds statt sich zu strecken. */
.searchbox-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: row wrap;
    gap: 8px;
}

.searchbox-box > * {
    display: inline-flex;
}

.searchbox:focus-within {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.searchbox-input:focus-visible {
    outline: 0px;
}

.searchbox-bg {
    background-color: #f8f9fa;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(33, 37, 41, 0.125);
    color: var(--mud-palette-text-primary);
    padding: 6px;
}

/* Cockpit Actions */
.action_menu {
    margin-left: 20px;
}

.action_menu_item {
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
}

.action_menu_item:hover {
    background-color: #dedede;
}

.action_menu_item > .mud-icon-root {
    margin-right: 10px;
    vertical-align: middle;
}

/* ItreeTranslation */
#translation {
    cursor: pointer;
}

#translation:hover {
    font-weight: bold;
}

.trsl {
    vertical-align: top;
}

/* ItreeCustomValidation: Icon rot (Color.Error am MudIcon), Abstand wie frueher */
.custom-validierung .mud-icon-root {
    margin-left: 5px;
    margin-top: 5px;
}

.error-dialog {
    max-height: 80vh;
    max-width: 80vw;
}

.confirm-dialog {
    max-height: 80vh;
    max-width: 80vw;
}

/* ### ItreeTabs (Klasse itree-tabs auf dem MudTabs-Container) ###
   Register-Optik wie die Bootstrap-nav-tabs (früher ul.nav-tabs + .site-content im AVG2-BetriebLayout): Linie unter der
   Leiste, der aktive Tab als weisser Reiter mit Rahmen, der die Linie unterbricht, und links ein Balken in der
   Primärfarbe; der Inhalt im Kasten wie .site-content.
   Position.Left gespiegelt (Linie rechts der Leiste, Kasten links offen); Position.Bottom/Right sind nicht gestaltet.
   Auswahlbalken, Ripple und die Mindestbreite 160px je Tab schaltet ItreeTabs.razor über MudTabs-Parameter ab.
   Alle Selektoren gehen über den Kindkombinator: Verschachtelte ItreeTabs (Stammdaten Top > Left, Einstellungen
   Left > Top) stylen so nur ihre eigene Leiste und ihren eigenen Kasten. */

/* Leiste: transparent statt surface, die Linie als innerer Schatten statt border-bottom. .mud-tabs-tabbar-content hat
   overflow:hidden, ein Reiter mit margin-bottom:-1px wie bei Bootstrap würde abgeschnitten. Der aktive Tab reicht bis
   an die Leistenkante und deckt den Schatten mit seinem Hintergrund ab. */
.itree-tabs > .mud-tabs-tabbar {
    background-color: transparent;
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
}

.itree-tabs > .mud-tabs-tabbar.mud-tabs-vertical {
    box-shadow: inset -1px 0 0 var(--mud-palette-lines-default);
}

/* Leiste so hoch wie die Tabs (MudBlazor: min-height 48px). Oben stehen die Tabs unten bündig: neben den höheren
   Scroll-Buttons (bei vielen Tabs) und neben einem höheren Tab-Kopf (z. B. mit Icon) erreicht der aktive Tab sonst die
   Linie nicht. */
.itree-tabs > .mud-tabs-tabbar > .mud-tabs-tabbar-inner {
    min-height: 0;
}

.itree-tabs > .mud-tabs-tabbar:not(.mud-tabs-vertical) > .mud-tabs-tabbar-inner,
.itree-tabs > .mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-tabbar-wrapper {
    align-items: flex-end;
}

/* Links: jeder Tab so breit wie der breiteste, damit er bis an die Linie reicht. MudBlazor setzt auf die Hülle je Tab
   width:fit-content als Inline-Style, min-width gewinnt dagegen. */
.itree-tabs > .mud-tabs-tabbar.mud-tabs-vertical .mud-tabs-tabbar-wrapper > * {
    min-width: 100%;
}

/* Tab-Kopf wie .nav-link: Masse aus Bootstrap 5.3, Schrift und Zeilenhöhe geerbt, Tab-Texte in normaler Schreibung wie
   früher (MudBlazor: Versalien, 500, 48px hoch). Farben grey/black wie die .nav-link-Regeln oben (Navigation Tab). */
.itree-tabs > .mud-tabs-tabbar .mud-tab {
    min-height: 0;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    border-radius: .375rem .375rem 0 0;
    color: grey;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* Hover unterstrichen wie a:hover, Rahmen hell (Bootstrap --bs-secondary-bg), kein Hintergrund (MudBlazor:
   action-default-hover) */
.itree-tabs > .mud-tabs-tabbar .mud-tab:hover {
    background-color: transparent;
    text-decoration: underline;
    border-color: var(--bs-secondary-bg, #e9ecef) var(--bs-secondary-bg, #e9ecef) var(--mud-palette-lines-default);
}

/* Aktiver Tab: Reiter in der Hintergrundfarbe, Rahmen unten ebenso, er deckt die Linie der Leiste ab. Links ein Balken in
   der Primärfarbe: Der Rahmen ist dort 2px breiter, das Padding 2px schmaler, Text und Tabbreite bleiben. Steht nach der
   Hover-Regel (gleiche Spezifität), beim Hovern bleibt er so und wird nur unterstrichen. */
.itree-tabs > .mud-tabs-tabbar .mud-tab.mud-tab-active {
    color: black;
    font-weight: bold;
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default) var(--mud-palette-lines-default) var(--mud-palette-surface) var(--mud-palette-primary);
    border-left-width: 3px;
    padding-left: calc(1rem - 2px);
}

.itree-tabs > .mud-tabs-tabbar .mud-tab.mud-disabled {
    color: var(--mud-palette-text-disabled);
}

/* Breite des fetten Texts reservieren: Sonst wird ein Tab beim Aktivieren breiter, die folgenden Tabs rücken nach, bei
   Position.Left verschiebt sich der Inhalt neben der Leiste. ItreeTabPanel setzt data-text nur bei Text (nicht bei
   HeaderContent). Die unsichtbare fette Kopie ohne Höhe bestimmt die Mindestbreite, der Text steht wie bisher (oben
   zentriert, links linksbündig). Der leere Alternativtext (/ "") hält sie aus dem zugänglichen Namen des Tabs. */
.itree-tabs > .mud-tabs-tabbar .mud-tab > span[data-text] {
    display: inline-flex;
    flex-direction: column;
}

.itree-tabs > .mud-tabs-tabbar .mud-tab > span[data-text]::after {
    content: attr(data-text) / "";
    font-weight: bold;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

/* Position.Left: Tab-Köpfe linksbündig, Reiter zur Linie rechts hin offen */
.itree-tabs > .mud-tabs-tabbar.mud-tabs-vertical .mud-tab {
    justify-content: flex-start;
    text-align: left;
    border-radius: .375rem 0 0 .375rem;
}

.itree-tabs > .mud-tabs-tabbar.mud-tabs-vertical .mud-tab:hover {
    border-color: var(--bs-secondary-bg, #e9ecef) var(--mud-palette-lines-default) var(--bs-secondary-bg, #e9ecef) var(--bs-secondary-bg, #e9ecef);
}

/* Rechts (zur Linie hin) offen, Balken links wie bei Position.Top */
.itree-tabs > .mud-tabs-tabbar.mud-tabs-vertical .mud-tab.mud-tab-active {
    border-color: var(--mud-palette-lines-default) var(--mud-palette-surface) var(--mud-palette-lines-default) var(--mud-palette-primary);
}

/* Inhalt im Kasten wie .site-content: Rahmen auf den drei Seiten ohne Leiste, dort trennt deren Linie */
.itree-tabs > .mud-tabs-panels {
    padding: 20px 5px;
    border-left: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Position.Left/Right: MudBlazor macht den Panel-Container zur Flex-Zeile und das aktive Panel zu display:contents. Alle
   Kinder des Panels (Seitentitel, Toolbar, Grid) standen dadurch nebeneinander. Als Block stehen sie wie bei Position.Top
   untereinander; flex-grow und min-width aus MudBlazor bleiben, der Container füllt weiter den Platz neben den Tabs.
   Der Kasten ist links offen, dort ist die Linie der Leiste. */
.itree-tabs > .mud-tabs-panels.mud-tabs-vertical {
    display: block;
    padding: 20px 5px 20px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-left: 0;
}

/* Verschachtelt (im Inhalt eines ItreeTabs, z. B. Stammdaten Top > Left, oder in .site-content wie die Betrieb-Seiten):
   kein eigener Kasten. Der äussere Rahmen umfasst schon alles, ein zweiter stünde wenige Pixel daneben. Die Linie der
   Leiste trennt weiterhin Tabs und Inhalt. */
.itree-tabs .itree-tabs > .mud-tabs-panels {
    padding: 20px 0 0 0;
    border: 0;
}

.site-content .itree-tabs > .mud-tabs-panels {
    padding: 20px 0 0 0;
    border: 0;
}

.itree-tabs .itree-tabs > .mud-tabs-panels.mud-tabs-vertical,
.site-content .itree-tabs > .mud-tabs-panels.mud-tabs-vertical {
    padding: 0 0 0 20px;
}

/* ItreeTabs Navigation: nur die Leiste, der Inhalt steht ausserhalb (AVG2 BetriebLayout: @Body in .site-content, dessen
   Kasten ohne Rahmen oben an die Linie der Leiste anschliesst) */
.itree-tabs.itree-tabs-navigation > .mud-tabs-panels {
    display: none;
}

/* ### ItreeDropDownList/ItreeComboBox/ItreeMultiSelect mit Width="auto": so breit wie der Inhalt (wie früher) ###
   Das Feld (.mud-input-control, flex:1 1 auto) und sein äusserer Container (.mud-select, flex-grow:1) füllten sonst die
   ganze Zeile, in einer Flex-Zeile schoben sie die folgenden Elemente an den rechten Rand. */
.mud-input-control.itree-breite-auto {
    width: fit-content;
    flex: 0 0 auto;
}

.mud-select:has(> .mud-input-control.itree-breite-auto) {
    flex: 0 0 auto;
}

/* Das Feld wächst mit dem gewählten Text (wie früher Width="auto"): Ohne field-sizing richtet sich fit-content nach der
   Eigenbreite des <input> (size-Default, ca. 20 Zeichen), längere Texte wurden abgeschnitten ("Abrechnungsgrundlag…",
   zwei Einträge beginnen gleich). Nur MudSelect (ItreeDropDownList/ItreeMultiSelect), nicht die ComboBox: dort würde
   das Feld beim Tippen mitwachsen. Browser ohne field-sizing (Firefox, Safari) behalten die bisherige Breite. */
.mud-select:not(.mud-autocomplete) > .mud-input-control.itree-breite-auto input.mud-input-slot {
    field-sizing: content;
}

/* Feste Breite (Width="100px"): Die Breite steht per Style auf dem Feld, der Container (.mud-select, flex-grow:1) füllte
   in einer Flex-Zeile trotzdem den ganzen Rest, so dass justify-content-between keinen Platz mehr verteilen konnte. */
.mud-input-control.itree-breite-fest {
    flex: 0 0 auto;
}

.mud-select:has(> .mud-input-control.itree-breite-fest) {
    flex: 0 0 auto;
}

/* ### Fenster und Dialoge: Titelleiste im Hellgrau von Buttons und Grid-Kopf (background-gray), mit Trennlinie und einem
   Balken in der Kundenfarbe links ###
   Früher #EBD3AE auf allen Fenstern und Dialogen; die Farbe kam in keiner Palette vor (Theme, Kundenfarben, Buttons).
   Über --itree-window-titlebar-bg kann ein Consumer den Hintergrund weiterhin übersteuern. */
.mud-dialog > .mud-dialog-title {
    background-color: var(--itree-window-titlebar-bg, var(--mud-palette-background-gray));
    color: var(--mud-palette-text-primary);
    border-left: 4px solid var(--mud-palette-primary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    padding: 8px 12px;
}

/* Fussbereich mit den Buttons (WindowFooter, ItreeWindowFooter): seitlich wie der Titel (12px) statt 8px. Eine
   ItreeButtonGroup füllt die Breite, damit ihre Position (Links/Mitte/Rechts) gilt; sonst stünde sie immer rechts.
   Anders als der Titel liegt der Fussbereich in MudBlazors Fokus-Container, nicht direkt unter .mud-dialog. */
.mud-dialog .mud-dialog-actions {
    padding: 8px 12px 12px;
}

    .mud-dialog .mud-dialog-actions > .button-grp {
        flex: 1 1 auto;
    }

/* ### Aufklappbare Abschnitte (MudExpansionPanel): Balken in der Kundenfarbe links an der Kopfzeile, wie die Titelleiste
   der Fenster und der Kacheln ###
   Als Schatten statt als Rahmen, damit sich Text und Pfeil nicht verschieben. An der Kopfzeile, nicht am Abschnitt selbst:
   dessen box-shadow ist die Erhöhung (mud-elevation-1) und ginge sonst verloren. */
.mud-expand-panel > .mud-expand-panel-header {
    box-shadow: inset 4px 0 0 var(--mud-palette-primary);
}

/* Tieferer Schatten statt mud-elevation-1: Dessen Schatten fällt fast nur nach unten, die Oberkante eines aufgeklappten
   Abschnitts war kaum zu sehen (2 % dunkler als der Hintergrund). Die erste Ebene ist eine feine Linie an der Oberkante,
   die übrigen geben nach unten und seitlich Tiefe, reichen aber nicht nach oben: Zugeklappte Abschnitte liegen
   aneinander, ein Schatten nach oben trübte sonst den Abschnitt darüber ein. Flache Abschnitte (Elevation="0", z. B.
   verschachtelt in den Releasenotes) bleiben flach. */
.mud-expand-panel:not(.mud-elevation-0) {
    box-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.08),
        0 2px 2px -1px rgba(0, 0, 0, 0.2),
        0 4px 6px -2px rgba(0, 0, 0, 0.16),
        0 8px 14px -6px rgba(0, 0, 0, 0.14);
}

/* Audit-Hinweis «Geändert am … von …» oben rechts im Tab */
.audit {
    font-size: 0.8rem;
    color: var(--mud-palette-secondary);
    margin: 0 0.25rem 0.25rem 0;
}

/* ### ItreeIconPopout ###
   Symbol mit Zähler für die Kopfzeile, Symbol in deren Schriftfarbe. Das Popout wächst als Kreis aus der Mitte des
   Symbols (clip-path). Die Mitte liegt 22px vom rechten Rand des Popouts (8px Überstand + halbe Symbolbreite) und 24px
   über seiner Oberkante (10px Abstand + halbe Symbolhöhe): Grösse und Lage von Symbol und Popout nur zusammen mit den
   Keyframes ändern. Inhalt mit der Klasse itree-icon-popout-eintrag und style="--i: n" blendet gestaffelt ein. */
.itree-icon-popout {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.itree-icon-popout-knopf {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    display: grid;
    place-items: center;
    cursor: pointer;
    animation: itree-ip-rein .35s cubic-bezier(.2, .9, .3, 1.3), itree-ip-wackeln .9s ease .5s;
}

    .itree-icon-popout-knopf:hover,
    .itree-icon-popout-knopf.offen {
        background: color-mix(in srgb, currentColor 12%, transparent);
    }

    /* Feiner Ring als Rückmeldung beim Öffnen */
    .itree-icon-popout-knopf.offen::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        pointer-events: none;
        animation: itree-ip-ring .5s ease-out;
    }

.itree-icon-popout-anzahl {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.itree-icon-popout-hintergrund {
    position: fixed;
    inset: 0;
    z-index: 1349;
    cursor: default;
}

/* Breite setzt der Parameter Width */
.itree-icon-popout-fenster {
    position: absolute;
    top: calc(100% + 10px);
    right: -8px;
    z-index: 1350;
    max-width: calc(100vw - 16px);
    max-height: min(560px, calc(100vh - 96px));
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .2), 0 4px 12px rgba(0, 0, 0, .12);
    outline: none;
    animation: itree-ip-fenster-rein .42s cubic-bezier(.25, .8, .25, 1);
}

    /* Spitze unter dem Symbol */
    .itree-icon-popout-fenster::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 15px;
        width: 14px;
        height: 14px;
        background: var(--mud-palette-surface);
        border-radius: 2px;
        transform: rotate(45deg);
    }

    .itree-icon-popout-fenster.zu {
        animation: itree-ip-fenster-raus .24s cubic-bezier(.4, 0, .6, 1) forwards;
    }

.itree-icon-popout-kopf {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px 8px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    animation: itree-ip-einblenden .3s ease .12s backwards;
}

.itree-icon-popout-kopftext {
    flex: 1;
    min-width: 0;
}

.itree-icon-popout-titel {
    margin: 0;
    font-size: .9375rem;
    font-weight: 500;
}

.itree-icon-popout-untertitel {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.itree-icon-popout-inhalt {
    overflow-y: auto;
}

.itree-icon-popout-eintrag {
    animation: itree-ip-einblenden .3s ease backwards;
    animation-delay: calc(var(--i, 0) * 35ms + 160ms);
}

@keyframes itree-ip-rein {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes itree-ip-wackeln {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
}

@keyframes itree-ip-ring {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); }
    to { box-shadow: 0 0 0 10px transparent; }
}

@keyframes itree-ip-fenster-rein {
    from { clip-path: circle(12px at calc(100% - 22px) -24px); transform: translateY(-6px); }
    to { clip-path: circle(900px at calc(100% - 22px) -24px); transform: none; }
}

@keyframes itree-ip-fenster-raus {
    from { clip-path: circle(900px at calc(100% - 22px) -24px); }
    to { clip-path: circle(12px at calc(100% - 22px) -24px); transform: translateY(-6px); }
}

@keyframes itree-ip-einblenden {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .itree-icon-popout-knopf,
    .itree-icon-popout-knopf.offen::after,
    .itree-icon-popout-fenster,
    .itree-icon-popout-fenster.zu,
    .itree-icon-popout-kopf,
    .itree-icon-popout-eintrag {
        animation: none;
    }
}