/*
 * UDM Layout System
 * CSS-Grid-basiertes Layout als Alternative zu DxFormLayout.
 * Vorteile: height: 100% funktioniert, kein DX-Overhead, volle Kontrolle.
 *
 * Nutzung: UdmLayout.razor, UdmLayoutItem.razor, UdmLayoutGroup.razor
 */


/* === Root Container === */

.udm-layout {
    display: grid;
    /* minmax(0, 1fr) statt 1fr: verhindert, dass Tracks durch min-content der Items
       (z.B. DevExpress-Editoren) ueber den 1fr-Anteil hinaus wachsen. */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
    height: 100%;
    align-content: start;
    container-type: inline-size;
}

/* Layout fix: Container-Queries komplett deaktivieren.
   Alle ColSpan-Breakpoints sind bereits identisch gesetzt (UiDialogBaseControl.cs),
   aber ohne diese Regel feuern die @container-Queries trotzdem auf dem schmalen Container. */
.udm-layout.udm-layout--keep-mobile {
    container-type: normal;
}

/* Root-Gruppe mit Stretch-/Dashboard-Kontext: der Grid-Container muss die Row strecken,
   sonst loest height: 100% der Root-Gruppe gegen eine content-grosse Grid-Area auf und
   das Layout faellt auf min-height zurueck (sichtbar z.B. bei Dialogen mit VE + FixedHeight "100%"). */
.udm-layout:has(> .udm-layout-group--stretch-children),
.udm-layout:has(> .udm-layout-group--dashboard) {
    align-content: stretch;
}

/* Root-VE (Ansichtsdialog, dessen Wurzel-Dialogelement direkt das ViewElement ist):
   Die Einzelelement-Optimierung in UiDialogRootControl rendert das VE OHNE die Root-Gruppe
   direkt unter .udm-layout — als --fill-row. Dadurch fehlt die grid-template-rows-Zeile, die
   sonst die konfigurierte Hoehe traegt. UiDialogRootControl reicht die konfigurierte %-Hoehe
   (z.B. 75% oder 100%) deshalb direkt als grid-template-rows auf .udm-layout durch (RootLayoutStyle);
   hier fuellt das VE diese Zeile vollstaendig aus, sodass das Grid INTERN scrollt statt den
   Container aufzudruecken. Trifft NUR den Root-VE-Fall (normale Dialoge haben als direktes
   .udm-layout-Kind eine --root-Gruppe, nie --fill-row). */
.udm-layout > .udm-layout-group--fill-row {
    height: 100%;
    align-self: stretch;
    min-height: 0;
}

/* AssignmentList in Grid/DualGrid (.udm-assignment-container--fill) ist grid-artig und braucht Hoehe
   wie ein VE — sitzt aber in einem Formular-Item, nicht in einer Gruppe. Ohne Stretch bliebe die
   Item-Grid-Row content-hoch (Feld nutzt die vorhandene, bounded Layout-Hoehe nicht, z.B. im Tab-Pane).
   Darum: Layout/Body strecken, wenn ein Fill-Assignment enthalten ist. So fuellt das Feld die volle
   Slot-Hoehe — ein zusaetzlicher Element-Titel (Label) wird dabei automatisch abgezogen (Content = flex:1). */
.udm-layout:has(.udm-assignment-container--fill),
.udm-layout-group__body:has(.udm-assignment-container--fill) {
    align-content: stretch;
}

/* Mehrfach-Ansicht (.udm-multiview) braucht Hoehe wie ein Ansichtselement. Ohne diese Regel
   bleibt die Grid-Row content-hoch, weil .udm-layout mit "align-content: start" arbeitet:
   Zeilen werden nach oben geschoben statt gestreckt. Die aktive Sicht faellt dann auf die
   Notfall-Mindesthoehe zurueck, obwohl darunter Platz frei ist. Sichtbar bei Sichten OHNE
   Eigenhoehe (Karten, Diagramm, GIS) — ein Grid faellt nicht auf, weil es mit seinem Inhalt
   waechst.
   Gleiches Muster wie die Fill-AssignmentList darueber. */
.udm-layout:has(.udm-multiview),
.udm-layout-group__body:has(.udm-multiview) {
    align-content: stretch;
}

/* Der eigentliche Kettenbruch: .udm-layout-group hat min-height:0 und kann daher in einer
   gestreckten Grid-Row schrumpfen; .udm-layout-item hat das NICHT -> als Grid-Item gilt
   min-height:auto = Item schrumpft nicht unter seine Inhaltshoehe und bricht mit einem
   inhaltsreichen Fill-Element (Grid mit vielen Zeilen) aus der 100%-Row aus. min-height:0
   schliesst die height:100%-Kette fuer das Formular-Item, sodass es sich exakt einpasst und
   der Inhalt intern scrollt (identisch zum Gruppen-Verhalten, konform zum Layout-Konzept). */
.udm-layout-item:has(> .udm-layout-item__content > .udm-assignment-container--fill),
.udm-layout-item:has(> .udm-layout-item__content--with-help .udm-assignment-container--fill) {
    min-height: 0;
}


/* === Layout Item === */

.udm-layout-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- Feld-Box ---
   Dieselbe Optik wie .udm-cfg-field in den Konfig-Dialogen: eine dezente
   Flaeche bindet Beschriftung und Eingabe sichtbar zusammen, damit ein
   Formular nicht als eine Flaeche voller Felder erscheint.

   Alle Werte kommen aus denselben Variablen wie im AdminClient. Gesetzt
   werden sie von den Dichte- und Farbstaerke-Klassen (udm_admin.css), die
   UiDialogRootControl an den Layout-Container haengt. Damit wirken beide
   Anwendereinstellungen im Dialog genauso wie in den Konfig-Dialogen.

   Welche Elementarten eine Box bekommen, entscheidet UdmDialogFieldBox.
   Grossflaechiges wie Ansichtselement, Kindliste oder Unterdialog bleibt
   aussen vor: dort waere die Flaeche eine Doppelung.

   Bewusst ohne Rueckfallwerte: udm_admin.css setzt alle diese Variablen in
   :root und wird von beiden Clients geladen. Ein Rueckfall waere nur eine
   zweite Wahrheit, die beim naechsten Wert auseinanderlaeuft. */
.udm-layout-item--boxed {
    background: var(--udm-cfg-box-bg);
    border-radius: 7px;
    padding: var(--udm-cfg-box-pad-y)
             var(--udm-cfg-box-pad-x)
             var(--udm-cfg-box-pad-b);
}

.udm-layout-item--boxed > .udm-layout-item__label {
    margin-bottom: var(--udm-cfg-label-gap);
}

/* --- Label --- */

/* Schriftbild wie die Feldtitel in den Konfig-Dialogen (.udm-cfg-label):
   gleiche Groesse, weniger fett, gemischte Schreibung, kein Zeichenabstand.
   Grossbuchstaben mit Sperrung lesen sich schlechter und brauchen mehr Platz.
   Die Farbe kommt aus derselben Variablen wie dort. Die Formel dahinter steht
   nur an einer Stelle, in udm_admin.css, und wird nicht wiederholt. */
.udm-layout-item__label {
    font-size: 0.92em;
    font-weight: 500;
    line-height: 1.3;
    color: var(--udm-cfg-label-color);
    text-transform: none;
    letter-spacing: normal;
    padding-bottom: 0;
}

/* Pflicht-Kennzeichen an der Beschriftung. Gilt fuer beide Layout-Wege:
   native Beschriftung (.udm-layout-item__label) und DevExpress-Caption
   (ueber CaptionCssClass am DxFormLayoutItem). Der Stern traegt die Aussage,
   die Farbe ist nur Verstaerkung. */
.udm-caption-required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 700;
}

.udm-layout-item--caption-horizontal {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.udm-layout-item--caption-horizontal .udm-layout-item__label {
    padding-bottom: 0;
    flex-shrink: 0;
}

/* Horizontale Caption: Content schiebt Checkbox/Switch nach rechts */
.udm-layout-item--caption-horizontal .udm-layout-item__content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


/* --- Content --- */

.udm-layout-item__content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

/* Die frueheren Regeln fuer .udm-layout-item__content--with-icon sind entfallen: Das
   Validierungs-Symbol im Eingabefeld gibt es nicht mehr, die Meldung steht als Text unter
   dem Feld. Der Flex-Fall lebt weiter als --with-help (Feld ohne Beschriftung), weiter
   unten bei der Feldhilfe. */


/* === Anwender-Feldhilfe: immer sichtbarer Kurz-Hint am Feld === */
/* Schriftgroesse relativ (em) -> skaliert mit der dynamischen UDM-Basisschrift. */

/* Anwenderweites Ausblenden (Toggle via body-Klasse, ohne Blazor-DOM-Rebuild ->
   bestehende Eingaben und Scrollpositionen bleiben erhalten). */
body.udm-no-field-hints .udm-layout-item__hint {
    display: none;
}

/* Ein Satz am Feld, ohne eigene Flaeche und ohne Rahmen. Gleiche Regel wie in
   den Konfig-Dialogen (.udm-cfg-fieldhelp): in einer Feld-Box waere eine
   zweite, kraeftiger gefaerbte Box eine Doppelung und wuerde das Feld
   ueberstrahlen.

   Groesse = Stufe "Sekundaer" der Pflicht-Checkliste (0.88em). Gedaempft wird
   ueber die Groesse ODER die Farbe, nie ueber beides: 0.78em auf der
   Grundschrift "medium" (80% = 12,8px) ergab 10px, bei "xtrasmall" 7,8px, und
   die blasse Sekundaerfarbe kam obendrauf. Der Satz ist Hilfe, er soll gelesen
   werden. Zeilenabstand 1.35, weil kleine Schrift Luft zwischen den Zeilen
   braucht. Werte identisch zu .udm-cfg-fieldhelp (UdmConfigForm.razor) --
   beide Clients zeigen denselben Satz-Typ, also dieselbe Optik. */
.udm-layout-item__hint {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.25em;
    padding: 0;
    font-size: 0.88em;
    line-height: 1.35;
    color: var(--bs-body-color);
    background: none;
    border: none;
}

/* Das Info-Symbol traegt keine Aussage: der Satz steht direkt daneben.
   Ohne Flaeche wirkt es nur noch als Stoerung, deshalb ausgeblendet.
   Die Tuer zur ausfuehrlichen Hilfe bleibt der "mehr"-Knopf. */
.udm-layout-item__hint > i {
    display: none;
}

.udm-layout-item__hint-text {
    flex: 1;
}

.udm-layout-item__hint-more {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    color: var(--bs-primary);
    font-weight: 600;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}


/* --- Hilfe-Symbol an der Beschriftung ---
   Standard: unsichtbar. Solange der Satz unter dem Feld steht, waere ein Symbol daneben
   nur eine zweite Anzeige derselben Sache.

   Blendet der Anwender die Feldhinweise aus, verschwindet mit dem Satz auch der
   "mehr"-Knopf. Ohne dieses Symbol wuesste er dann nicht einmal, DASS zu einem Feld etwas
   erklaert ist (Konzept §3.3). Es ist im Aus-Zustand die einzige Tuer: Darueberfahren zeigt
   den Kurz-Hinweis (natives title), Klick oeffnet die ausfuehrliche Hilfe, sofern vorhanden.
   Umgeschaltet wird ueber dieselbe body-Klasse wie der Satz — kein DOM-Neuaufbau. */
.udm-layout-item__help-icon {
    display: none;
    margin-left: 0.35em;
    font-size: 0.85em;
    color: var(--bs-primary);
    opacity: 0.7;
    cursor: help;
    flex: 0 0 auto;
}

body.udm-no-field-hints .udm-layout-item__help-icon {
    display: inline-block;
}

.udm-layout-item__help-icon:hover {
    opacity: 1;
}

/* Nur mit ausfuehrlicher Hilfe ist das Symbol anklickbar. Ohne sie traegt es den
   Kurz-Hinweis im Hover und verspricht nichts, was es nicht einloest. */
.udm-layout-item__help-icon--rich {
    cursor: pointer;
}

/* Feld ohne Beschriftung: Das Symbol steht in der Zeile des Eingabeelements. Das Element
   selbst behaelt die volle Breite, das Symbol bleibt auf Inhaltsbreite. */
.udm-layout-item__content--with-help {
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.udm-layout-item__content--with-help > :first-child {
    flex: 1;
    min-width: 0;
}


/* --- Meldung der Validierung ---
   Gleicher Platz wie der Kurz-Hinweis, aber in Signalfarbe. Frueher stand die Meldung
   hinter einem Symbol IM Eingabefeld: erst nach einem Klick lesbar, sie nahm dem Feld
   Breite weg und schwebte bei hohen Feldern (Memo) in der Mitte.

   Bewusst NICHT an body.udm-no-field-hints gekoppelt: Der Anwender kann Erklaerungen
   ausblenden, aber niemals die Meldung, die ihn am Speichern hindert. */
.udm-layout-item__message {
    margin-top: 0.25em;
    font-size: 0.88em;
    line-height: 1.35;
}

.udm-layout-item__message--error {
    color: var(--bs-danger);
}

.udm-layout-item__message--warning {
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
}


/* === Feldhilfe-Popover (Spalten-/Element-Koepfe, z.B. ViewElement-Grid) === */

/* Info-Icon neben dem Spaltentitel. Hover = Kurz-Hint (natives title),
   Klick = ausfuehrliche Hilfe (nur bei --rich). Groesse relativ zur Header-
   Schrift (kein fixes px), dezente Primaerfarbe wie der Dialog-Hint. */
.udm-field-help-icon {
    margin-left: 0.4em;
    font-size: 0.85em;
    color: var(--bs-primary);
    opacity: 0.75;
    cursor: help;
    vertical-align: baseline;
}

.udm-field-help-icon:hover {
    opacity: 1;
}

.udm-field-help-icon--rich {
    cursor: pointer;
}

.udm-field-help-popover {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 0.75em;
}

.udm-field-help-popover .udm-image-container img {
    max-width: 100%;
    height: auto;
}


/* === Layout Group === */

.udm-layout-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}


/* --- Group mit Card-Decoration --- */

/* === Card-Container (Default — Welcome-Page-Optik) ===
   Dezenter Primary-getoenter Hintergrund (linear-gradient 4%), 1px Border, kompakter Header
   ohne eigenen Hintergrund/Trenn-Border. Vereinheitlicht den Karten-Look mit dem AdminClient
   (UdmConfigSection-Karten in udm-cfg-form). Tabbed-Group bleibt unveraendert (s.u.).
   Single-VE-Wrapper bekommen den klassischen Look ueber --card-legacy (s.u.). */
.udm-layout-group--card {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bs-primary) 4%, var(--bs-body-bg) 96%),
        var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5em;
    overflow: visible;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.udm-layout-group--card:hover:not(:has(.udm-layout-group--card:hover)) {
    border-color: color-mix(in srgb, var(--bs-primary) 18%, var(--bs-border-color) 82%);
}

/* === Tabbed-Group (separat, unveraendert vom alten Look) === */
.udm-tabbed-group {
    background: var(--bs-body-bg);
    border: 2px solid color-mix(in srgb, var(--bs-border-color) 50%, transparent);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: visible;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.udm-tabbed-group:hover {
    border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.udm-tabbed-group:hover > .nav-tabs {
    background: color-mix(in srgb, var(--bs-primary) 12%, white);
}

/* === Legacy-Card (Single-VE-Wrapper) ===
   Beibehaltung des klassischen Looks fuer Gruppen, deren einziges Kind ein ViewElement ist.
   Grids/Charts brauchen einen kraeftigeren Rahmen + getoenten Header, da das VE selbst keine
   eigene Karten-Optik mitbringt. Override gegenueber --card (gleiche Spezifizitaet, spaeter
   in der Kaskade — daher reichen die Properties, die wir ueberschreiben wollen). */
.udm-layout-group--card.udm-layout-group--card-legacy {
    background: var(--bs-body-bg);
    border: 2px solid color-mix(in srgb, var(--bs-border-color) 50%, transparent);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.udm-layout-group--card.udm-layout-group--card-legacy:hover:not(:has(.udm-layout-group--card:hover)) {
    border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.udm-layout-group--card-legacy:hover:not(:has(.udm-layout-group--card:hover)) > .udm-layout-group__header,
.udm-layout-group--card-legacy:hover:not(:has(.udm-layout-group--card:hover)) > .target-with-dot > .udm-layout-group__header {
    background: color-mix(in srgb, var(--bs-primary) 12%, white);
}

/* Einzelnes Element im Container: kein Rahmen/Hover noetig — nichts abzugrenzen. */
.udm-layout-group--card:only-child,
.udm-layout-group--card:only-child:hover:not(:has(.udm-layout-group--card:hover)) {
    border-color: transparent;
    box-shadow: none;
}

/* === Header — Default (neuer Look) ===
   In den neuen Karten traegt der Header keinen eigenen Hintergrund/Trenn-Border mehr —
   die Karte uebernimmt die Abgrenzung. Header ist nur noch die UPPERCASE-Beschriftung. */
.udm-layout-group__header {
    font-size: 1em;
    font-weight: 700;
    color: var(--bs-primary);
    text-transform: uppercase;
    letter-spacing: normal;
    padding: 0.4rem 0.5rem 0.3rem;
    flex-shrink: 0;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* === Header — Legacy (klassischer Look fuer Single-VE-Wrapper) === */
/* Groesse und Zeichenabstand stehen hier nicht mehr drin: alle Gruppen-Koepfe
   tragen dieselbe Schrift. Der klassische Look bleibt ueber Flaeche, Trennlinie
   und Radius erhalten. */
.udm-layout-group--card-legacy > .udm-layout-group__header,
.udm-layout-group--card-legacy > .target-with-dot > .udm-layout-group__header {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-primary) 12%, white);
    border-radius: 5px 5px 0 0;
    background: color-mix(in srgb, var(--bs-primary) 6%, white);
}

/* === Zuklappbare Gruppe === */
/* Header wird zur Klickflaeche; Chevron rechts (margin-left:auto schiebt es ans Ende
   des Flex-Headers). Body wird bei eingeklapptem Zustand ausgeblendet. */
.udm-layout-group__header--toggle {
    cursor: pointer;
    user-select: none;
}

.udm-layout-group__header--toggle:hover {
    color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color));
}

.udm-layout-group__chevron {
    margin-left: auto;
    font-size: 0.9em;
    transition: transform 0.15s ease;
}

/* Eingeklappt: muss alle Body-Layout-Modi (grid/flex/dashboard) uebersteuern —
   daher !important (kein konkurrierendes !important auf display vorhanden). */
.udm-layout-group__body--collapsed {
    display: none !important;
}


/* --- Root-Group: fuellt immer den gesamten verfuegbaren Platz --- */

.udm-layout-group--root {
    grid-column: 1 / -1;
    width: 100%;
    height: 100%;
}

/* Elevated Cards: Luft NUR an der Karte, nicht am ganzen Koerper.
   em-basiert, damit sie mit der Zeilendichte (udm-fontsize-*) skaliert.
   Kein Padding hier — das kommt gezielt vom Root (Dialog-Rahmen) und __scroll.

   Vorher stand hier gap: 0.5em am Koerper, sobald er irgendwo eine Karte
   enthielt. Der groessere Abstand traf damit ALLE Zeilen, auch reine
   Feld-Zeilen. In einem gemischten Dialog sprang deshalb das ganze Layout,
   sobald eine Karte per Feldregel ein- oder ausgeblendet wurde: ohne Karte
   4 px zwischen den Feldern, mit Karte 6,4 px. Am laufenden Dialog gemessen.

   Karten im Scroll-Behaelter sind dessen direkte Kinder, nicht Kinder des
   Koerpers (UIDialogGroupControl.razor). Die Regel dort bleibt unberuehrt,
   es entsteht kein doppelter Abstand. */
.udm-layout-group__body > .udm-layout-group--card,
.udm-layout-group__body > .udm-tabbed-group {
    margin-block: 0.25em;
}

/* Root: groesseres Padding (Dialog-Rahmen). */
.udm-layout-group--root > .udm-layout-group__body,
.udm-layout-group--root > .target-with-dot > .udm-layout-group__body {
    padding: 0.4em;
}

/* Stretch nur wenn Kinder feste Hoehen haben (z.B. ViewElements mit 50%).
   Ohne diese Klasse bleibt align-content: start (default) — fuer einfache Formulare. */

/* Root: Grid bleibt, align-content: stretch fuer volle Hoehe der Grid-Row */
.udm-layout-group--root.udm-layout-group--stretch-children > .udm-layout-group__body,
.udm-layout-group--root.udm-layout-group--stretch-children > .target-with-dot > .udm-layout-group__body {
    align-content: stretch;
}

/* Nicht-Root Gruppen in einem stretch-Root: nur Gruppen MIT fester Hoehe oder eigenen
   stretch-Kindern fuellen die volle Grid-Zellen-Hoehe. Reine Formular-Gruppen (z.B. "Info")
   bleiben bei ihrer natuerlichen Hoehe via align-self: start. */
.udm-layout-group--root.udm-layout-group--stretch-children > .udm-layout-group__body > .udm-layout-group--stretch-children,
.udm-layout-group--root.udm-layout-group--stretch-children > .udm-layout-group__body > .udm-layout-group--fixed-height,
.udm-layout-group--root.udm-layout-group--stretch-children > .target-with-dot > .udm-layout-group__body > .udm-layout-group--stretch-children,
.udm-layout-group--root.udm-layout-group--stretch-children > .target-with-dot > .udm-layout-group__body > .udm-layout-group--fixed-height {
    height: 100%;
}

/* Gruppen OHNE feste Hoehe in einem stretch-Root: nicht strecken */
.udm-layout-group--root.udm-layout-group--stretch-children > .udm-layout-group__body > .udm-layout-group:not(.udm-layout-group--stretch-children):not(.udm-layout-group--fixed-height),
.udm-layout-group--root.udm-layout-group--stretch-children > .target-with-dot > .udm-layout-group__body > .udm-layout-group:not(.udm-layout-group--stretch-children):not(.udm-layout-group--fixed-height) {
    align-self: start;
}

/* Nicht-Root: Flex-Column, damit height: 70%/30% korrekt gegen den Container aufloesen.
   CSS Grid kann prozentuale Hoehen nicht korrekt verteilen (bezieht sich auf Grid-Area, nicht Container). */
.udm-layout-group--stretch-children:not(.udm-layout-group--root) > .udm-layout-group__body,
.udm-layout-group--stretch-children:not(.udm-layout-group--root) > .target-with-dot > .udm-layout-group__body {
    display: flex;
    flex-direction: column;
}

/* Reine Formular-Gruppen in einem Nicht-Stretch-Kontext duerfen nicht schrumpfen.
   Beispiel: Card-Gruppen in einem Tab-Pane mit vielen Feldern.
   In einem stretch-Kontext (Eltern-Gruppe hat stretch-children) muessen sie
   sich einpassen und bei Bedarf intern scrollen (overflow: auto auf dem Body). */
.udm-layout-group:not(.udm-layout-group--stretch-children) > .udm-layout-group__body > .udm-layout-group,
.udm-layout-group:not(.udm-layout-group--stretch-children) > .target-with-dot > .udm-layout-group__body > .udm-layout-group {
    flex-shrink: 0;
}


/* --- Group ohne Decoration --- */
/* Kein Padding: --none Gruppen sind rein strukturelle Wrapper (Spalten, Zusammenhalt).
   Sie duerfen kein eigenes Spacing erzeugen. */

.udm-layout-group--none {
    padding: 0;
}


/* --- Group Body --- */

.udm-layout-group__body {
    display: grid;
    /* minmax(0, 1fr): siehe Begruendung an .udm-layout. */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.25rem;
    align-content: start;
    /* flex/min-height/overflow NUR auf Stretch-Bodies (siehe unten). */
}

/* Stretch-Bodies: muessen den verfuegbaren Platz fuellen und bei Ueberlauf scrollen. */
.udm-layout-group--stretch-children > .udm-layout-group__body,
.udm-layout-group--stretch-children > .target-with-dot > .udm-layout-group__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.udm-layout-group--card > .udm-layout-group__body,
.udm-layout-group--card > .target-with-dot > .udm-layout-group__body {
    padding: 0.4rem;
}

/* Nicht-Layout-Kinder (z.B. ViewElement-Content, Scroll-Container) spannen volle Breite */
.udm-layout-group__body > :not(.udm-layout-item):not(.udm-layout-group) {
    grid-column: 1 / -1;
}


/* --- Scroll Container innerhalb Group --- */

.udm-layout-group__scroll {
    overflow: auto;
}

/* Scroll-Container mit Cards: Flex-Column + Gap. */
.udm-layout-group__scroll:has(> .udm-layout-group--card) {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}


/* --- UserHelpHighlight innerhalb Layout-Gruppen ---
   .target-with-dot ist ein Flex-Child der Group (flex-direction: column).
   Es muss sich wie die Group selbst verhalten: flex-column, flex:1.
   So bleibt der Highlight-Dot funktionsfaehig UND das Layout stimmt. */

.udm-layout-group > .target-with-dot {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

/* Nur beim Root: target-with-dot fuellt den gesamten Platz */
.udm-layout-group--root > .target-with-dot {
    flex: 1;
}


/* === Tabbed Group (Bootstrap Nav-Tabs) === */

/* Aeusserer Container: fuellt die Grid-Zelle und bildet Flex-Column.
   Elevated-Stil (border, shadow, radius, hover) kommt aus dem gemeinsamen
   Selektor oben (.udm-layout-group--card, .udm-tabbed-group). */
.udm-tabbed-group {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Tab-Header: getönter Hintergrund wie Card-Header, keine Bootstrap-Borders */
.udm-tabbed-group > .nav-tabs {
    flex-shrink: 0;
    margin-bottom: 0;
    background: color-mix(in srgb, var(--bs-primary) 6%, white);
    border-bottom: 1px solid color-mix(in srgb, var(--bs-primary) 12%, white);
    border-radius: 5px 5px 0 0;
    padding: 0.15rem 0.25rem 0;
}

/* Tab-Links: schlicht, Underline statt Bootstrap-Border-Tabs */
.udm-tabbed-group > .nav-tabs .nav-link {
    padding: 0.45rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    color: var(--bs-body-color);
    opacity: 0.65;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.udm-tabbed-group > .nav-tabs .nav-link:hover {
    opacity: 1;
    border-bottom-color: color-mix(in srgb, var(--bs-primary) 25%, transparent);
    background: transparent;
}

/* Aktiver Tab: Primary-Underline, fett */
.udm-tabbed-group > .nav-tabs .nav-link.active {
    font-weight: 600;
    color: var(--bs-primary);
    opacity: 1;
    border-bottom: 2px solid var(--bs-primary);
    background: transparent;
}

/* Tab-Pane: fuellt den Rest, nur aktiver Pane sichtbar */
.udm-tab-pane {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 0 0 5px 5px;
}

.udm-tab-pane.active {
    display: flex;
    flex-direction: column;
}

/* UdmLayout innerhalb Tab-Pane fuellt den Pane und scrollt bei Ueberlauf */
.udm-tab-pane > .udm-layout {
    flex: 1;
    min-height: 0;
    overflow: auto;
}


/* === Responsive: Container Queries === */
/* Breakpoints identisch zu DxFormLayout/Bootstrap 5: Xxl>=1400, Xl>=1200, Lg>=992, Md>=768, Sm<576 */
/* Reagieren auf Container-Breite (nicht Viewport) — funktioniert auch in Splitter-Panels */

/* Die Zeilenhoehen wechseln mit denselben Grenzen wie die Spalten (--rows-xl bis --rows-sm,
   gesetzt von DialogRowTemplateBuilder). Sonst bliebe die Zeilenvorlage auf dem Stand der
   breitesten Stufe stehen, waehrend der Browser laengst umgebrochen hat: die zusaetzliche Zeile
   waere dann implizit und damit inhaltshoch, und ein Ansichtselement ohne Eigenhoehe fiele darin
   auf wenige Pixel zusammen.
   !important, weil der Ausgangswert aus dem Inline-Stil kommt.
   Rueckfallwert none: Koerper ohne Zeilenvorlage bleiben so, wie sie ohne diese Regel waeren.

   NUR der Koerper der obersten Gruppe darf die Vorlage lesen (Konzept R5). Die Variablen
   entstehen ausschliesslich dort (UdmLayoutGroup.razor, shouldBuildRowTemplate = isRoot),
   werden als CSS-Variablen aber an jede Untergruppe vererbt. Ein weiterer Selektor faengt sie
   sofort wieder ein: die Untergruppe bekaeme dann die Zeilen des ganzen Dialogs aufgezwungen
   und ihr erstes Feld waere so hoch wie das Ansichtselement daneben.
   Zweiter Selektor wegen .target-with-dot: UdmUserHelpHighlightControl zieht diesen Behaelter
   nur bei hinterlegter Feldhilfe ein. Gleiches Doppelmuster wie bei den Dashboard-Regeln.
   Konzept: docs/03_features/udm-layout/umbruch-zeilenhoehen-konzept.md */

/* Xl: < 1400px */
@container (max-width: 1399px) {
    .udm-layout-item,
    .udm-layout-group:not(.udm-layout-group--root),
    .udm-tabbed-group {
        grid-column: var(--col-xl) !important;
    }

    .udm-layout-group--root > .udm-layout-group__body,
    .udm-layout-group--root > .target-with-dot > .udm-layout-group__body {
        grid-template-rows: var(--rows-xl, none) !important;
    }
}

/* Lg: < 1200px */
@container (max-width: 1199px) {
    .udm-layout-item,
    .udm-layout-group:not(.udm-layout-group--root),
    .udm-tabbed-group {
        grid-column: var(--col-lg) !important;
    }

    .udm-layout-group--root > .udm-layout-group__body,
    .udm-layout-group--root > .target-with-dot > .udm-layout-group__body {
        grid-template-rows: var(--rows-lg, none) !important;
    }
}

/* Md: < 992px */
@container (max-width: 991px) {
    .udm-layout-item,
    .udm-layout-group:not(.udm-layout-group--root),
    .udm-tabbed-group {
        grid-column: var(--col-md) !important;
    }

    .udm-layout-group--root > .udm-layout-group__body,
    .udm-layout-group--root > .target-with-dot > .udm-layout-group__body {
        grid-template-rows: var(--rows-md, none) !important;
    }

    /* Eltern-Stretch-Gruppen: Hoehe freigeben damit gestapelte Kinder wachsen koennen */
    .udm-layout-group--stretch-children:not(.udm-layout-group--root) {
        height: auto !important;
    }

    /* Dashboard responsive: explizite Zeilen aufheben, Kinder stapeln sich.
       Steht bewusst NACH der Zeilenvorlage oben und gewinnt damit: Ein Dashboard verteilt
       Kacheln auf eine feste Flaeche, es soll nicht nach unten ueberlaufen. Fuer normale
       Dialoge gilt das Gegenteil (siehe Konzept, Regel R3). */
    .udm-layout-group--responsive.udm-layout-group--dashboard > .udm-layout-group__body,
    .udm-layout-group--responsive.udm-layout-group--dashboard > .target-with-dot > .udm-layout-group__body {
        grid-template-rows: unset !important;
    }

    .udm-layout-group--responsive > .udm-layout-group__body > .udm-layout-group--fill-row,
    .udm-layout-group--responsive > .target-with-dot > .udm-layout-group__body > .udm-layout-group--fill-row {
        height: auto !important;
        min-height: 300px;
    }
}

/* Sm: < 576px */
@container (max-width: 575px) {
    .udm-layout-item,
    .udm-layout-group:not(.udm-layout-group--root),
    .udm-tabbed-group {
        grid-column: var(--col-sm) !important;
    }

    .udm-layout-group--root > .udm-layout-group__body,
    .udm-layout-group--root > .target-with-dot > .udm-layout-group__body {
        grid-template-rows: var(--rows-sm, none) !important;
    }

    /* Dashboard responsive: wie bei Md, das Dashboard laeuft nicht ueber. */
    .udm-layout-group--responsive.udm-layout-group--dashboard > .udm-layout-group__body,
    .udm-layout-group--responsive.udm-layout-group--dashboard > .target-with-dot > .udm-layout-group__body {
        grid-template-rows: unset !important;
    }

    /* Eltern-Stretch-Gruppen: Hoehe freigeben */
    .udm-layout-group--stretch-children:not(.udm-layout-group--root) {
        height: auto !important;
    }
}


/* === Dashboard Mode === */
/* Trennung von Form-Dialogen (content-basiert, scrollend) und Dashboard-Dialogen
   (Container-fuellend, explizite grid-template-rows, prozentuale Hoehen).
   Aktiviert via IsDashboardLayout = true in den Dialogeinstellungen. */

/* Dashboard-Root: grid-template-rows wird inline berechnet (aus Kinder-Hoehen).
   align-content: stretch sorgt dafuer, dass Rows ihre berechnete Hoehe fuellen.
   align-items: start sorgt dafuer, dass Items ohne fill-row content-sized bleiben. */
.udm-layout-group--root.udm-layout-group--dashboard > .udm-layout-group__body,
.udm-layout-group--root.udm-layout-group--dashboard > .target-with-dot > .udm-layout-group__body {
    align-content: stretch;
    align-items: start;
}

/* Fill-row Kinder (Dashboard ODER Non-Dashboard-Stretch): Percent-Hoehen-Kandidaten
   fuellen ihre berechnete Grid-Row vollstaendig. height: 100% loest gegen die ueber
   grid-template-rows verteilte Row-Hoehe auf — unabhaengig davon, ob die Prozent-Hoehe
   direkt auf der Gruppe oder auf einem verschachtelten VE konfiguriert ist. */
.udm-layout-group--dashboard > .udm-layout-group__body > .udm-layout-group--fill-row,
.udm-layout-group--dashboard > .target-with-dot > .udm-layout-group__body > .udm-layout-group--fill-row,
.udm-layout-group--root.udm-layout-group--stretch-children > .udm-layout-group__body > .udm-layout-group--fill-row,
.udm-layout-group--root.udm-layout-group--stretch-children > .target-with-dot > .udm-layout-group__body > .udm-layout-group--fill-row {
    height: 100%;
    align-self: stretch;
}

/* TabbedGroups mit fill-row: gleiche Logik */
.udm-layout-group--dashboard > .udm-layout-group__body > .udm-tabbed-group.udm-layout-group--fill-row,
.udm-layout-group--dashboard > .target-with-dot > .udm-layout-group__body > .udm-tabbed-group.udm-layout-group--fill-row,
.udm-layout-group--root.udm-layout-group--stretch-children > .udm-layout-group__body > .udm-tabbed-group.udm-layout-group--fill-row,
.udm-layout-group--root.udm-layout-group--stretch-children > .target-with-dot > .udm-layout-group__body > .udm-tabbed-group.udm-layout-group--fill-row {
    height: 100%;
    align-self: stretch;
}

/* Dashboard-Body: flex/overflow fuer Scrollverhalten innerhalb der festen Row-Hoehe */
.udm-layout-group--dashboard > .udm-layout-group__body,
.udm-layout-group--dashboard > .target-with-dot > .udm-layout-group__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}