/*
 * 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;
    grid-template-columns: repeat(12, 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;
}


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

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

/* --- Label --- */

.udm-layout-item__label {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--bs-dark-border-subtle);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 0;
}

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

.udm-layout-item__content--with-icon {
    display: flex;
    align-items: center;
    width: 100%;
}

.udm-layout-item__content--with-icon > :first-child {
    flex-shrink: 0;
}

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


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

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


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

/* === Elevated Container (Card + Tabbed-Group gemeinsam) ===
   Sichtbarer Border statt reinem box-shadow: wird NIEMALS von overflow abgeschnitten.
   2px Border (wie bisher) → kein Layout-Shift bei Hover, nur Farbwechsel.
   Dezenter Shadow fuer zusaetzliche Tiefe, aber Border ist der primaere Rahmen. */
.udm-layout-group--card,
.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;
}

/* Hover nur auf die innerste gehoverte Card/Tabbed-Group.
   :has() verhindert, dass der Effekt auf verschachtelte Hovers propagiert. */
.udm-layout-group--card:hover:not(:has(.udm-layout-group--card:hover)),
.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-layout-group--card:hover:not(:has(.udm-layout-group--card:hover)) > .udm-layout-group__header,
.udm-layout-group--card:hover:not(:has(.udm-layout-group--card:hover)) > .target-with-dot > .udm-layout-group__header,
.udm-tabbed-group:hover > .nav-tabs {
    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;
}

.udm-layout-group__header {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--bs-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    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);
    flex-shrink: 0;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}


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

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

/* Elevated Cards: Gap ueberall wo Cards oder Tabbed-Groups enthalten sind.
   em-basiert, damit beides mit der Zeilendichte (udm-fontsize-*) skaliert.
   Kein Padding hier — das kommt gezielt vom Root (Dialog-Rahmen) und __scroll. */
.udm-layout-group__body:has(> .udm-layout-group--card, > .udm-tabbed-group) {
    gap: 0.5em;
}

/* 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;
    grid-template-columns: repeat(12, 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 */

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

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

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

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

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