/* _content/AidaPartnerPortal.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-x2t0feryhx] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sidebar[b-x2t0feryhx] {
    background: var(--sidebar-bg);
    border-right: 0.5px solid var(--sidebar-border);
    flex-shrink: 0;
}

main[b-x2t0feryhx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* min-width: 0 verhindert, dass ein zu breites Kind (z. B. eine lange, nicht umbrechende
       Zeile) die Flex-Box ueber die verfuegbare Breite hinaus aufbläht - genau das waere die
       Ursache fuer waagrechtes Scrollen im schmalen Fenster (Aufgabe 10, Schritt 4, Punkt 6). */
    min-width: 0;
}

.content[b-x2t0feryhx] {
    padding-top: 1.1rem;
    flex: 1;
}

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

    .sidebar[b-x2t0feryhx] {
        /* 240px -> 260px (Markus, 10.09.2026): die Glyphen vor den Eintraegen brauchen die
           Spalte, sonst rutschen laengere Beschriftungen wie "Aktivitaetsprotokoll" naeher an den
           Rand. */
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }
}

/* Footer sticks to the bottom of the main column. */
.app-footer[b-x2t0feryhx] {
    margin-top: auto;
}

/* Vorlagen-Stil fuer den ECHTEN Fehlerfall (#blazor-error-ui) - unveraendert aus der
   Blazor-Vorlage uebernommen, nur der Inhaltstext in MainLayout.razor ist deutsch. Getrennt von
   der Reconnect-Anzeige (siehe app.css) - siehe Aufgabe 10, Schritt 1. */
#blazor-error-ui[b-x2t0feryhx] {
    background: var(--warn-bg);
    color: var(--text-primary);
    bottom: 0;
    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: 1000;
}

    #blazor-error-ui .dismiss[b-x2t0feryhx] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/AidaPartnerPortal.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-0luhn8jal2] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--sidebar-border);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-0luhn8jal2] {
    background-color: rgba(255, 255, 255, 0.3);
}

.top-row[b-0luhn8jal2] {
    /* A touch taller than before (Markus, 2026-08-20: +~6px). Kept identical to TopBar's height so
       the sidebar header divider still lines up with the top bar's bottom border. */
    height: 3.625rem;
    background: transparent;
    border-bottom: 0.5px solid var(--sidebar-border);
}

.navbar-brand[b-0luhn8jal2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sidebar-brand);
}

.navbar-brand-mark[b-0luhn8jal2] {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Vertically centre the brand (mark + text) within the taller header row. */
.top-row .container-fluid[b-0luhn8jal2] {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-item[b-0luhn8jal2] {
    font-size: 0.875rem;
    padding-bottom: 2px;
}

    .nav-item:first-of-type[b-0luhn8jal2] {
        padding-top: 0.75rem;
    }

    .nav-item[b-0luhn8jal2]  .nav-link {
        background: none;
        border: none;
        border-radius: var(--radius);
        height: var(--row-h);
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 0.6rem;
    }

.nav-item[b-0luhn8jal2]  .nav-link {
    color: var(--sidebar-fg);
}

.nav-item[b-0luhn8jal2]  a.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-fg-active);
    font-weight: 500;
}

.nav-item[b-0luhn8jal2]  .nav-link:hover {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-fg-active);
}

/* Die Glyphe vor jedem Eintrag. FESTE Breite ist der Kern: die Zeichen sind unterschiedlich
   breit (das schmale "key" gegen das breite "users"), und ohne feste Spalte staenden die
   Beschriftungen zickzack. Der Wert deckt das breiteste Solid-Zeichen dieser Auswahl ab.

   Die Glyphen sind rein schmueckend - deshalb aria-hidden am Element und keine Beschriftung im
   Markup: der Text daneben ist der Name des Eintrags, eine Vorlesehilfe wuerde ihn sonst
   doppelt ansagen.

   Etwas blasser als der Text und beim Ueberfahren/Aktivsein voll deckend: die Glyphe fuehrt das
   Auge, sie soll die Beschriftung aber nicht ueberstimmen.

   Die Deckkraft ist GEMESSEN, nicht geschaetzt (10.09.2026): mit 0.65 kam die Glyphe im HELLEN
   Farbschema auf 2.89:1 gegen den Leistenhintergrund und lag damit unter den 3:1, die fuer
   grafische Elemente gelten - im dunklen waren es 4.12:1. Mit 0.75 sind es 3.54:1 hell und
   5.02:1 dunkel (beides am 10.09.2026 im Browser nachgemessen). Wer den Wert senkt, prueft
   beide Schemata nach. */
.nav-item[b-0luhn8jal2]  .nav-glyph {
    width: 1.15rem;
    margin-right: 0.55rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.9em;
    opacity: 0.75;
    /* Der Tiefstellwert ist GEMESSEN (Markus hat es mit blossem Auge gesehen, 10.09.2026):
       Glyphe und Beschriftung sind zwei Flex-Elemente, und align-items: center zentriert je die
       BOX, nicht die sichtbare Flaeche. Die Boxen sind verschieden hoch (Glyphe 12.6px, Text
       14px), also fallen die Grundlinien um 1.8px auseinander und die Glyphe stand 1.30px zu
       hoch, gemessen gegen die Versalmitte der Beschriftung. 0.1em der GLYPHENSCHRIFT sind
       1.26px - danach bleiben 0.05px, das ist unter der Sichtbarkeitsschwelle. In em und nicht
       in px, damit der Ausgleich mitwaechst, wenn jemand die Schriftgroesse aendert. */
    position: relative;
    top: 0.1em;
}

.nav-item[b-0luhn8jal2]  .nav-link:hover .nav-glyph,
.nav-item[b-0luhn8jal2]  a.active .nav-glyph {
    opacity: 1;
}

/* Der frueher hier stehende Stil fuer gesperrte Verwaltungseintraege (.nav-link-locked) ist
   entfallen: seit 2026-09-03 werden nicht berechtigte Eintraege gar nicht mehr gerendert, siehe
   NavMenu.razor. Das Token --sidebar-fg-locked bleibt in tokens.css stehen, es kostet nichts und
   waere bei einem gesperrten Eintrag an anderer Stelle sofort wieder verwendbar. */

.nav-section-verwaltung[b-0luhn8jal2] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 0.5px solid var(--sidebar-border);
    padding-bottom: 1rem;
}

.nav-section-title[b-0luhn8jal2] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidebar-section);
    padding-bottom: 0.35rem;
}

.nav-scrollable[b-0luhn8jal2] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-0luhn8jal2] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-0luhn8jal2] {
        display: none;
    }

    .nav-scrollable[b-0luhn8jal2] {
        display: block;
        height: calc(100vh - 3.625rem);
        overflow-y: auto;
    }
}
/* _content/AidaPartnerPortal.Web/Components/Layout/TopBar.razor.rz.scp.css */
.topbar[b-t1ywkxfppv] {
    /* Exactly the sidebar brand-row height (NavMenu .top-row: 3.625rem) with no vertical padding, so
       the top bar's bottom border lines up on the same Y as the sidebar header's divider. Raised a
       touch (Markus, 2026-08-20: +~6px). */
    height: 3.625rem;
    /* Top bar shares the sidebar's chrome tone (grey in light, raised dark in dark) so the frame
       reads as one, distinct from the white/near-black content area. */
    background-color: var(--sidebar-bg);
    border-bottom: 0.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    /* Less right padding so the sign-out button sits closer to the edge (Markus, 2026-08-20). */
    padding: 0 0.9rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.topbar-user[b-t1ywkxfppv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    /* min-width: 0 erlaubt dem Text unten, per Ellipsis zu kuerzen, statt die Kopfzeile im
       schmalen Fenster (Aufgabe 10, Schritt 4, Punkt 6) waagrecht zu sprengen. */
    min-width: 0;
    max-width: 60vw;
}

.topbar-name[b-t1ywkxfppv] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.topbar-company[b-t1ywkxfppv] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.topbar-logout[b-t1ywkxfppv] {
    margin: 0;
    display: flex;
}

.topbar-logout-btn[b-t1ywkxfppv] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    /* Same height as the theme switch (32px) rather than shorter (Markus, 2026-08-20). */
    height: 32px;
    padding: 0 0.85rem;
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, filter 0.12s ease;
}

.topbar-logout-btn:hover[b-t1ywkxfppv] {
    background: var(--surface-2);
}

/* Druck-Feedback wie bei den übrigen Sekundär-Buttons: beim Klick dunkler + leichter
   Innenschatten, ohne Bewegung. */
.topbar-logout-btn:active[b-t1ywkxfppv] { filter: brightness(0.88); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); }