/* ============================================================================
 * 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 ──────────────────────────────────────────────────────────── */
.sidebar {
    background-color: #1E293B;
    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: 0 1px 4px rgba(15,23,42,0.06);
}

.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: 8px;
    height: 2rem;
    display: flex;
    align-items: center;
    line-height: 2rem;
    font-weight: 500;
    font-size: 0.88rem;
    transition: background-color 0.15s, color 0.15s;
    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;
}

.nav-item a.active {
    background-color: var(--stripe-primary-nav-active);
    color: #93C5FD;
    font-weight: 600;
    border-left: 3px solid var(--color-primary);
    padding-left: calc(0.5rem - 3px);
}

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

/* Unter-Trennlinie/-Beschriftung INNERHALB eines fachlichen Bereichs (Nutzerentscheidung
   30.08.2026) - trennt reine Anzeige-Uebersichten optisch von den Aktionen darueber, ohne den
   fachlichen Bereich (z. B. "Allgemein") zu verlassen. Bewusst schwaecher als .nav-divider/
   .nav-section-label (kuerzerer Rand, kleinerer Abstand, kein Uppercase) - sie soll als
   Unterebene erkennbar bleiben, nicht wie ein weiterer gleichrangiger Bereich wirken. */
.nav-subdivider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 0.3rem 1.25rem;
}

.nav-subsection-label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #64748B;
    padding-top: 0.15rem;
    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 0.15s, color 0.15s;
}

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

.nav-mobile-link.active {
    background-color: var(--color-primary);
    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 0.15s, color 0.15s;
}

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

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