/* ==========================================================================
   Shell — Gesamtlayout der Anwendung

   ┌─ Sidebar ─┐┌─ Main ──────────────┐
   │           ││  Header (sticky)    │
   │           │├─────────────────────┤
   │           ││  Content (scroll)   │
   └───────────┘└─────────────────────┘

   Zustände am .app-shell:
     (Standard)              Sidebar als schmale Icon-Leiste
     .is-sidebar-expanded    Sidebar ausgeklappt (Hamburger im Header)
     .is-sidebar-open        Mobile: Sidebar über dem Inhalt eingeblendet
   ========================================================================== */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    min-height: 100vh;
    background: var(--surface-base);
    transition: grid-template-columns var(--duration-base) var(--ease-out);
    /* `hidden` würde hier einen Scroll-Container erzeugen und damit jedes
       position:sticky im Shell (Header, Sidebar) wirkungslos machen.
       `clip` schneidet ebenso ab, ohne Scrollport. */
    overflow-x: hidden;
    overflow-x: clip;
}
.app-shell.hidden { display: none !important; }

.app-shell.is-sidebar-expanded {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

.sidebar      { grid-area: sidebar; }
.main-header  { grid-area: header; }

.main-wrapper {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content-area {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-6) var(--content-px) var(--space-8);
}

/* ── Mobile: Sidebar verlässt den Grid-Fluss ─────────────────────────── */
@media (max-width: 900px) {
    .app-shell,
    .app-shell.is-sidebar-expanded {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "main";
    }
    .sidebar { grid-area: unset; }
    .content-area {
        padding: var(--space-4) var(--space-4) var(--space-6);
    }
}

@media print {
    .sidebar,
    .main-header,
    .sidebar-overlay { display: none !important; }
    .app-shell { display: block; }
    .content-area { max-width: none; padding: 0; }
}