/* ============================================================================
 * LAYOUT SHELL — Sidebar-Navigation + Top-Bar + Content-Bereich
 * Herkunft: Con4Mews (Shared/MainLayout.razor.css + Shared/NavMenu.razor.css)
 * Setzt 01-tokens.css voraus.
 *
 * WICHTIG: Im Original nutzt Blazor pro Komponente automatisch gescoptes CSS,
 * dadurch duerfen MainLayout und NavMenu beide eine Klasse ".top-row" haben,
 * ohne sich zu ueberschneiden. Fuer ein framework-neutrales, global geladenes
 * Stylesheet sind die beiden hier bewusst umbenannt:
 *   - Marken-/Hamburger-Zeile im Sidebar-Kopf  -> .sidebar-topbar
 *   - Rechts ausgerichtete Statusleiste oben im Content -> .content-topbar
 * Siehe README.md fuer das passende HTML-Grundgeruest.
 * ==========================================================================*/

/* ── Grundgeruest ─────────────────────────────────────────────────────── */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-width: 0;
}

.content { padding-top: 1.5rem; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
/* Redesign 01.09.2026 (Nutzerwunsch "zentral schöner/angenehmer", blaue Grundfarbe bleibt): sanfter
   vertikaler Verlauf statt Vollton - dieselbe Navy-Basis, etwas mehr Tiefe/"Materialgefuehl" ohne
   den Farbton zu wechseln (bleibt eng an --color-primary-dark orientiert). */
.sidebar {
    background: linear-gradient(180deg, #1E293B 0%, #172033 100%);
    border-right: none;
    box-shadow: 2px 0 16px rgba(15,23,42,0.18);
}

.sidebar-topbar {
    height: 3.25rem;
    background-color: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
}

.navbar-toggler {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.navbar-brand {
    font-size: 1.1rem;
    color: #F1F5F9 !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Content-Topbar (rechts ausgerichtete Statuszeile ueber dem Content) ─
   UI/UX-Review 21.08.2026 (Dark Mode): Farben auf Tokens statt fester Hex-Werte
   umgestellt (keine visuelle Aenderung im Light-Mode - dieselben Werte), damit
   die Leiste im Dark Mode automatisch mitzieht statt als grell-weisser Balken
   in einer sonst dunklen Oberflaeche stehen zu bleiben. .top-row-version bleibt
   bewusst unveraendert (rein dekoratives, untergeordnetes Detail - siehe
   Kommentar dort). */
.content-topbar {
    background-color: var(--color-surface-soft);
    border-bottom: 1px solid var(--color-border);
    justify-content: flex-end;
    height: 3.25rem;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-elevation-sm);
}

.top-row-username {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    display: flex;
    align-items: center;
}

.top-row-version {
    /* Bewusst nicht auf --color-text-muted umgestellt: eine noch deutlichere
       Zuruecknahme als "muted" fuer eine rein dekorative Versionsnummer -
       ausserhalb des Scopes dieses Dark-Mode-Schritts (siehe UI/UX-Review). */
    font-size: 0.72rem;
    color: #94A3B8;
    margin-left: 0.75rem;
    font-family: monospace;
    cursor: default;
}

.content-topbar a, .content-topbar .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.content-topbar a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Desktop-Navmenue ─────────────────────────────────────────────────── */
.nav-item {
    font-size: 0.88rem;
    padding-bottom: 0.125rem;
}
.nav-item:first-of-type { padding-top: 0.75rem; }
.nav-item:last-of-type { padding-bottom: 1rem; }

/* Menue scrollt bei Bedarf separat, Footer ("Abmelden") bleibt immer sichtbar */
.nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.nav-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 0.25rem;
}
.nav-footer .nav-item:last-of-type { padding-bottom: 0.75rem; }

.nav-item a,
.nav-item button.nav-link {
    color: #94A3B8;
    border-radius: var(--radius-sm);
    height: 2rem;
    /* Redesign 01.09.2026: einheitliches horizontales Padding unabhaengig vom Aktiv-Zustand (vorher
       nur .active hatte einen berechneten Wert zum Ausgleich seines eigenen border-left - siehe
       Git-Historie) - Text/Icon springen dadurch nicht mehr seitlich, wenn ein Eintrag aktiv wird. */
    padding: 0 0.65rem;
    display: flex;
    align-items: center;
    line-height: 2rem;
    font-weight: 500;
    font-size: 0.88rem;
    transition: background-color var(--motion-fast), color var(--motion-fast);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

/* Verhindert Zeilenumbruch bei langen Menuepunkten (z. B. "Import (Trainingsdaten)") - ohne dies
   wickelt der Text auf zwei Zeilen, die wegen line-height: 2rem je Zeile aber wie eine grosse
   Leerzeile zwischen den Woertern aussehen (jede umgebrochene Zeile bekommt ihre eigene
   2rem-Zeilenhoehe). Stattdessen: eine Zeile, bei Platzmangel mit "..." abgeschnitten.
   min-width: 0 ist noetig, damit ein Flex-Kind ueberhaupt unter seine Inhaltsbreite schrumpfen
   und text-overflow greifen kann. */
.nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Redesign 01.09.2026 (Nutzerwunsch "zentral schöner/angenehmer", blaue Grundfarbe bleibt): voll
   gefuellter "Pill"-Hintergrund statt der vorherigen duennen Tick-Linie + schwacher Tönung - ein in
   aktuellen SaaS-Oberflaechen (Linear, Vercel, Notion) uebliches, klareres Aktiv-Muster. Farbwert
   bewusst als fester Hex-Wert statt var(--color-primary-dark) - dieser Token wird im Dark Mode auf
   einen helleren Ton (#60A5FA) umgeschaltet (siehe 01-tokens.css, dort fuer Fliesstext-Links auf
   dunklem Grund gedacht), die Sidebar selbst bleibt aber laut bestehender Design-Entscheidung IN
   BEIDEN Modi dunkel (siehe Kommentar bei .sidebar oben) - der hellere Dark-Mode-Ton wuerde hier
   den Weiss-Kontrast von ca. 6.7:1 auf ca. 2.5:1 einbrechen lassen (WCAG-AA-Fehlschlag). #1D4ED8
   ist derselbe Farbwert wie --color-primary-dark im Light Mode, hier nur bewusst konstant gehalten -
   derselbe Grund, warum der gesamte Sidebar-Block bereits durchgehend feste Hex-Werte statt
   Tokens verwendet. */
.nav-item a.active {
    background-color: #1D4ED8;
    color: var(--color-white);
    font-weight: 600;
}

.nav-item a:hover,
.nav-item button.nav-link:hover {
    background-color: rgba(255,255,255,0.07);
    color: #F1F5F9;
}

.nav-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 0.4rem 0.75rem;
}

.nav-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748B;
    padding-top: 0.65rem;
    padding-bottom: 0.2rem;
}

/* ── Mobile Icon-Leiste (ersetzt das Desktop-Menue unter 641px) ─────────── */
.nav-mobile-divider {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    margin: 0.35rem 0.15rem;
    background-color: rgba(255,255,255,0.15);
}

.nav-mobile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    /* Touch-Ziel >=44x44px (Apple HIG/Wroblewski) statt vorher ca. 35x27px: 1rem-Icon (16px) +
       0.875rem Padding je Seite = 44px in beiden Richtungen. */
    padding: 0.875rem;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    text-decoration: none;
    color: #F1F5F9 !important;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}

.nav-mobile-link svg,
.nav-mobile-link svg *,
.nav-mobile-link--btn svg,
.nav-mobile-link--btn svg * {
    color: #F1F5F9 !important;
    stroke: #F1F5F9 !important;
    fill: none;
}

.nav-mobile-link:hover,
.nav-mobile-link--btn:hover {
    background-color: rgba(255,255,255,0.1);
    color: #F1F5F9 !important;
}

/* Redesign 01.09.2026: dieselbe Kontrast-Korrektur wie beim Desktop-Aktiv-Zustand oben
   (.nav-item a.active) - --color-primary allein liegt fuer das weisse Icon nur bei ca. 2.2:1
   (WCAG 1.4.11 verlangt mindestens 3:1 fuer grafische Objekte), der feste dunklere Blauton
   #1D4ED8 schafft ausreichend Kontrast und bleibt unabhaengig vom Farbschema konstant (die
   mobile Icon-Leiste bleibt wie die Desktop-Sidebar bewusst in beiden Modi dunkel). */
.nav-mobile-link.active {
    background-color: #1D4ED8;
    color: #F1F5F9 !important;
}

.nav-mobile-link.active svg,
.nav-mobile-link.active svg * {
    color: #F1F5F9 !important;
    stroke: #F1F5F9 !important;
}

.nav-mobile-link--btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    /* Touch-Ziel >=44x44px, siehe .nav-mobile-link-Kommentar oben. */
    padding: 0.875rem;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #F1F5F9 !important;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}

/* ── Responsive Umschaltung ───────────────────────────────────────────── */
@media (max-width: 640.98px) {
    .content-topbar:not(.auth) { display: none; }
    .content-topbar.auth { justify-content: space-between; }
    .content-topbar a, .content-topbar .btn-link { margin-left: 0; }
}

@media (max-width: 640px) {
    .sidebar-topbar { display: none; }
    .nav-desktop-menu { display: none !important; }

    .nav-mobile-bar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-around;
        background-color: #1E293B;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 0.25rem 0.5rem;
        position: sticky;
        top: 0;
        z-index: 100;
        /* Bei vielen Icons (z. B. Administrator-Rolle: alle Bereiche zusammen) reicht die
           Bildschirmbreite eines Telefons nicht fuer alle Icons bei >=44px Touch-Zielen -
           horizontales Scrollen statt eines gestauchten/umbrechenden Layouts. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-mobile-link,
    .nav-mobile-link--btn {
        /* Verhindert, dass Flexbox die Icons bei zu wenig Platz staucht (kleiner als das
           44x44px-Touch-Ziel) - stattdessen greift oben overflow-x statt einer Stauchung. */
        flex-shrink: 0;
    }
}

@media (min-width: 641px) {
    .page { flex-direction: row; }

    .sidebar {
        /* Nutzeranfrage 30.08.2026: von 205px verbreitert - laengere Menuepunkte (z. B.
           "Buchungstexte (ohne KYO)", "Stammdaten-Konfiguration") liefen bei 205px trotz
           .nav-label-Ellipsis (siehe dort) sichtbar abgeschnitten. */
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
    }

    .content-topbar {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .content-topbar, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* UI/UX-Review 01.09.2026 (Nutzerwunsch: "maxwidth vorsichtig begrenzen und den Inhalt
       zentrieren", Zeilenhoehen der Tabellen bewusst unveraendert lassen): auf sehr breiten
       Monitoren (Ultrawide/4K) lief der Content-Bereich bisher ueber die volle verbleibende
       Breite (Viewport minus 260px Sidebar) - Formulare/Tabellen wirkten dadurch unangenehm
       auseinandergezogen. Zunaechst 1600px, auf Nutzerwunsch (01.09.2026: "etwas schmaler")
       anschliessend auf 1440px reduziert - deutlich grosszuegiger als der am 30.08.2026 fuer
       reinen Fliesstext versuchten, viel engeren 46rem-Breite (dort auf Nutzerwunsch wieder
       entfernt, siehe Kommentar bei ".con4-page-header" in 04-components.css - "sieht nicht gut
       aus"). Bei ueblichen 1920px-Monitoren (Content-Breite abzueglich Sidebar bereits ~1660px)
       ist die Zentrierung dadurch bereits sichtbar (nicht mehr nur auf echten Ultrawide-/4K-
       Aufloesungen beschraenkt wie bei 1600px), bleibt aber mit gleich breiten Raendern
       links/rechts moderat statt aufdringlich. Nur die AEUSSERE Content-Spalte wird schmaler -
       RadzenDataGrid-Tabellen, .table-Zeilenhoehen/-Padding (04-components.css) und alle anderen
       Komponenten darin bleiben unveraendert, sie passen sich lediglich der verfuegbaren Breite
       an (bei zu wenig Raum fuer eine Tabelle sorgt .table-responsive weiterhin fuer horizontales
       Scrollen statt eines Umbruchs). Bewusst nur ab derselben Breakpoint-Grenze wie das
       Sidebar-Layout selbst (min-width: 641px) - auf Mobile bleibt der Content ungebremst volle
       Breite. */
    .content-topbar, article {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar-toggler { display: none; }

    /* Sidebar-Menue nie einklappen auf breiten Screens, auch wenn JS die
       .collapse-Klasse (mobiler Hamburger-Zustand) gerade gesetzt hat */
    .nav-desktop-menu.collapse { display: flex; }

    .nav-mobile-bar { display: none; }

    /* Menue nimmt die restliche Sidebar-Hoehe ein, damit .nav-scroll intern
       scrollen und .nav-footer ("Abmelden") am unteren Rand fixiert bleiben kann */
    .nav-desktop-menu {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
}

/* Mobil: Sidebar-Menue standardmaessig eingeklappt, bis JS/Toggle-Logik
   die .collapse-Klasse entfernt (siehe README.md, Abschnitt "Interaktivitaet") */
@media (max-width: 640.98px) {
    .nav-desktop-menu.collapse { display: none; }
}