/*
 * Athene applicatieshell en gedeelde Blazor-componenten (MainLayout, PaginaKop, themawerkruimte-stepper).
 * Bewust klein: MudBlazor levert het ontwerp; hier alleen responsive gedrag en touch-doelen (IA-CONTRACT §8:
 * bruikbaar op 1024x768 en 768x1024 zonder horizontaal scrollen van de pagina, touch-doelen >= 40px).
 */

/* Themawerkruimte-stepper: vrije navigatie (BR-02), wrapt op smalle schermen en blijft altijd volledig zichtbaar. */
.thema-stappen-lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Algemeen touch-doel van minimaal 40px voor knoppen die van nature kleiner renderen. */
.athene-touch {
    min-height: 40px;
}

.thema-stap-knop {
    min-height: 40px;
    white-space: nowrap;
}

/* Alle klikbare shellonderdelen: touch-doel van minimaal 40px. */
.athene-appbar .mud-button-root,
.athene-appbar .mud-icon-button {
    min-height: 40px;
}

.athene-drawer .mud-nav-link {
    min-height: 44px;
}

/* De groepskiezer in de app bar: compact, maar leesbaar op smalle schermen. */
.athene-groepkiezer {
    min-width: 11rem;
    max-width: 20rem;
}

@media (max-width: 599.98px) {
    .athene-groepkiezer {
        min-width: 7rem;
        max-width: 11rem;
    }

    .athene-merk-tekst {
        display: none;
    }
}

/* Lange inhoud (tabellen, agenda) scrolt intern, nooit de hele pagina. */
.mud-main-content {
    overflow-x: clip; /* clip (geen scrollcontainer) zodat position: sticky blijft werken */
}

/* Foutmelding bij een weggevallen serververbinding (App.razor). */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2000;
    padding: 0.75rem 3rem 0.75rem 1rem;
    background: #fdecea;
    color: #611a15;
    border-top: 2px solid #d32f2f;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}

#blazor-error-ui .reload {
    margin-left: 0.5rem;
    font-weight: 600;
    color: inherit;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    top: 0.6rem;
    cursor: pointer;
}

/* Tabbladen (alle MudTabs): het actieve tabblad krijgt een lichte primaire kleur en de inhoud van het tabblad
   wordt omlijst, zodat direct zichtbaar is welke inhoud bij welk tabblad hoort. Kleuren komen uit het MudBlazor-thema. */
.mud-tabs-tabbar {
    border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), .5);
    overflow: visible;
}

.mud-tabs-tabbar .mud-tab.mud-tab-active {
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .5);
    border-bottom-color: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}

.mud-tabs-tabbar .mud-tab-slider {
    display: none;
}

.mud-tabs-panels {
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .5);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

/* Themawerkruimte-stepper als tabbladen: de stapknoppen krijgen dezelfde vorm als de tabbladen hierboven en de inhoud
   van de actieve stap staat in een omlijst kader (.thema-stap-inhoud in ThemaWerkruimteKader.razor). */
.thema-stappen-lijst {
    gap: 0;
    align-items: flex-end;
    border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), .5);
}

.thema-stappen-lijst > li {
    margin-bottom: -1px;
}

.thema-stap-knop.mud-button-root {
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    box-shadow: none;
}

.thema-stap-knop.mud-button-root:hover {
    background: rgba(var(--mud-palette-primary-rgb), .06);
}

.thema-stap-knop.mud-button-root[aria-current="step"] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    font-weight: 600;
    border-color: rgba(var(--mud-palette-primary-rgb), .5);
    border-bottom-color: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}

.thema-stap-inhoud {
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .5);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

/* Gebruikersmenu (UC-Accountinstellingen #282): initialen rechtsboven, menu met naam, Accountinstellingen en Uitloggen. */
.athene-initialen.mud-avatar {
    background: var(--athene-accent, #e9e2f4);
    color: var(--athene-accent-text, #203b58);
    /* Ring in de appbalktekstkleur: de initialen blijven zichtbaar, ook als accent en appbalk dezelfde kleur hebben (Toscane). */
    box-shadow: 0 0 0 2px var(--athene-nav-text, #ffffff);
    font-weight: 700;
    font-size: 0.8125rem;
}

.athene-gebruikersmenu-naam {
    padding: 10px 16px 8px;
    font-weight: 600;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.athene-menuknop {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 6px 16px;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.athene-menuknop:hover,
.athene-menuknop:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

/* Zichtbare focus in navigatie en appbalk in alle thema's (WCAG 2.4.7/1.4.11, #282 contract F). */
.mud-nav-link:focus-visible,
.mud-navmenu .mud-nav-group > button:focus-visible {
    outline: 3px solid var(--athene-primary, #203b58);
    outline-offset: -3px;
}

.mud-appbar .mud-button-root:focus-visible,
.mud-appbar a:focus-visible {
    outline: 3px solid var(--athene-nav-text, #ffffff);
    outline-offset: 2px;
    border-radius: 6px;
}

/* UC-295 §12: na navigatie krijgt de paginatitel programmatisch focus (FocusOnNavigate) als beginpunt
   voor schermlezer en toetsenbord; dat is geen bedieningselement en krijgt dus geen focusrand. */
h1:focus { outline: none; }

/* De vaste appbalk bedekt geen element dat focus of een scrolldoel krijgt (WCAG 2.4.11). */
html { scroll-padding-top: 76px; }

/* Bij grote tekst of een smal scherm: navigatielabels breken af in plaats van te worden afgekapt, en de groepkiezer
   blijft één regel binnen de appbalk. */
.mud-drawer .mud-nav-link-text { white-space: normal; }
.athene-groepkiezer .mud-button-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

@media (max-width: 600px) {
    .athene-merk-tekst { display: none; }
}

/* UC-295: linkermenu leerkracht (Components/Layout/LeerkrachtNavigatie.razor).
   - Het menu scrolt zelfstandig ten opzichte van de werkpagina, op desktop en in de overlay-drawer.
   - Labels breken af over meerdere regels (grote tekst, zoom, smal scherm); geen ellipsis of horizontale overflow.
   - Bestemming sterk (vet, accentrand, achtergrond), voorouders op de actieve route subtiel (halfvet, smalle rand):
     herkenbaar zonder kleur alleen. */
.athene-drawer .mud-drawer-content {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.athene-lknav-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.athene-lknav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem 0.5rem calc(0.75rem + (var(--lknav-niveau, 0) * 1rem));
    border-left: 4px solid transparent;
    color: var(--mud-palette-drawer-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.athene-lknav-link[data-niveau="1"] { --lknav-niveau: 0; }
.athene-lknav-link[data-niveau="2"] { --lknav-niveau: 1; }
.athene-lknav-link[data-niveau="3"] { --lknav-niveau: 2; }
.athene-lknav-link[data-niveau="4"] { --lknav-niveau: 3; }

.athene-lknav-link .athene-lknav-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

.athene-lknav-link .athene-lknav-indicator {
    flex: 0 0 auto;
}

.athene-lknav-link:hover {
    background: var(--mud-palette-action-default-hover);
}

.athene-lknav-link:focus-visible {
    outline: 3px solid var(--athene-primary, #203b58);
    outline-offset: -3px;
}

.athene-lknav-link.op-route {
    font-weight: 600;
    border-left: 4px solid var(--mud-palette-lines-default);
}

.athene-lknav-link.actief {
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
    border-left: 4px solid var(--mud-palette-primary);
}