/* ============================================================
   SidebarLayout – Seitenleiste links, Inhalt rechts; schmal als Schublade.

   CSS-Variablen:
     --oo-sbl-sidebar-width    Breite der Seitenleiste (Parameter SidebarWidth), Standard 16.25rem
     --oo-sbl-header-height    Höhe der Kopfzeile in der schmalen Ansicht, Standard 3rem
     --oo-sbl-backdrop         Farbe des Schleiers hinter der offenen Schublade, Standard rgb(0 0 0 / 0.2)
   Für den Inhalt, gesetzt am Inhaltsbereich:
     --oo-sbl-header-offset    Höhe der oben klebenden Kopfzeile, wenn die Seite scrollt, sonst 0
     --oo-sbl-content-height   sichtbare Höhe des Inhalts (für min-height einer Seite, die den Bildschirm füllt)
   ============================================================ */

/* Es scrollen nur der Inhalt und, was die Anwendung in der Seitenleiste scrollen lässt, nie die Seite (außer am Handy, siehe unten).
   Sonst bekäme das Dokument einen zweiten Scrollbalken, sobald etwas ans Ende des body gehängt wird (etwa der Tooltip-Container
   von Mermaid). */
html:has(.oo-sbl) body {
    overflow: hidden;
}

/* Container-Abfrage statt Media-Abfrage: Entscheidend ist die Breite des Layouts, nicht die des Fensters.
   Farben: Inhalt auf der Fläche (--oo-color-surface), die Seitenleiste tritt mit dem
   Hintergrund (--oo-color-background) zurück. Cards, Listen und getönte Card-Köpfe sind auf diese Verteilung abgestimmt. */
.oo-sbl {
    --oo-sbl-sidebar-width: 16.25rem;
    --oo-sbl-header-height: 3rem;
    --oo-sbl-backdrop: rgb(0 0 0 / 0.2);
    --oo-sbl-aside-width: min(35rem, 38%);
    position: relative;
    display: flex;
    height: 100dvh;
    background: var(--oo-color-surface);
    color: var(--oo-color-text);
    container-type: inline-size;
}

/* Höchstens 85 % des Layouts, damit neben der eingeschobenen Schublade noch Inhalt zu sehen ist. */
.oo-sbl__sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: min(var(--oo-sbl-sidebar-width-user, var(--oo-sbl-sidebar-width)), 85%);
    min-height: 0;
    padding: var(--oo-space-4) var(--oo-space-3) var(--oo-space-3);
    background: var(--oo-color-background);
    border-right: var(--oo-border-width) solid var(--oo-color-border);
}

/* Der Menüknopf setzt den Fokus auf die Seitenleiste selbst (tabindex -1); sie ist ein Bereich, kein Bedienelement. */
.oo-sbl__sidebar:focus {
    outline: none;
}

/* Ein einzelnes Element in der Seitenleiste füllt ihre Höhe, etwa ein Stack mit Benutzermenü unten. */
.oo-sbl__sidebar > :only-child {
    flex: 1 1 auto;
    min-height: 0;
}

/* min-width/min-height 0, sonst wachsen die Flex-Kinder mit ihrem Inhalt, und der Inhalt scrollt nicht. */
.oo-sbl__column {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

/* Kopfzeile und Schleier gibt es nur in der schmalen Ansicht. */
.oo-sbl__header,
.oo-sbl__backdrop {
    display: none;
}

.oo-sbl__header {
    align-items: center;
    gap: var(--oo-space-2);
    flex-shrink: 0;
    height: var(--oo-sbl-header-height);
    padding: 0 var(--oo-space-3);
}

/* Titel zwischen den Knöpfen, bei Überlänge gekürzt. */
.oo-sbl__title {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* isolation: Was im Inhalt übereinander liegt, bleibt unter Seitenleiste und Schleier. */
.oo-sbl__main {
    --oo-sbl-header-offset: 0px;
    --oo-sbl-content-height: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    isolation: isolate;
}

/* Seitenpanel rechts als eigene Spalte, die für sich scrollt. Höchstens 85 % des Layouts. */
.oo-sbl__aside {
    flex-shrink: 0;
    box-sizing: border-box;
    width: min(var(--oo-sbl-aside-width-user, var(--oo-sbl-aside-width)), 85%);
    min-height: 0;
    overflow: auto;
    background: var(--oo-color-surface);
    border-left: var(--oo-border-width) solid var(--oo-color-border);
}

/* Ziehgriffe (Resizable) auf der Grenze zu Seitenleiste und Seitenpanel: selbst ohne Breite, damit die Spalten unverändert
   bleiben; die Trefferfläche ragt per ::before beidseitig hinaus, ::after zeigt die Linie bei Hover, Fokus und Ziehen.
   Gezogene Breiten setzt sidebar-layout.js als --oo-sbl-sidebar-width-user und --oo-sbl-aside-width-user am Layout. */
.oo-sbl__resizer {
    position: relative;
    z-index: 1;
    flex: 0 0 0;
    width: 0;
    cursor: col-resize;
    touch-action: none;
}

.oo-sbl__resizer::before {
    content: "";
    position: absolute;
    inset: 0 -0.25rem;
}

.oo-sbl__resizer:focus {
    outline: none;
}

.oo-sbl__resizer:hover::after,
.oo-sbl__resizer:focus-visible::after,
.oo-sbl--resizing > .oo-sbl__resizer:active::after {
    content: "";
    position: absolute;
    inset: 0 -1px;
    background: var(--oo-primary);
}

/* Während des Ziehens keine Textauswahl und überall der Ziehcursor, auch über iframes im Inhalt. */
.oo-sbl--resizing {
    cursor: col-resize;
    user-select: none;
}

.oo-sbl--resizing iframe {
    pointer-events: none;
}

/* Schmal: Die Seitenleiste liegt links außerhalb und schiebt sich über den Inhalt. Unter 48rem blieben neben ihren 16rem
   weniger als 32rem für den Inhalt. visibility statt nur transform, damit Tab die ausgeblendeten Einträge überspringt;
   beim Ausblenden wird sie erst nach der Bewegung unsichtbar, beim Einblenden sofort (ohne Übergang), sonst ginge der Fokus,
   den der Menüknopf in die Seitenleiste setzt, im ersten Bild ins Leere.
   Kindkombinator am offenen Zustand: Ein verschachteltes SidebarLayout öffnet sich nicht mit dem äußeren. */
@container (max-width: 48rem) {
    .oo-sbl__header {
        display: flex;
    }

    .oo-sbl__sidebar {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 2;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--oo-transition), visibility var(--oo-transition);
    }

    .oo-sbl--open > .oo-sbl__sidebar {
        transform: none;
        visibility: visible;
        box-shadow: var(--oo-shadow-lg);
        transition: transform var(--oo-transition);
    }

    .oo-sbl--open > .oo-sbl__backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--oo-sbl-backdrop);
    }

    /* Schmal sind Seitenleiste und Seitenpanel nicht verstellbar. */
    .oo-sbl__resizer {
        display: none;
    }

    /* Schmal liegt das Seitenpanel rechts über dem Inhalt, unter Schleier und Schublade. */
    .oo-sbl__aside {
        position: absolute;
        inset: 0 0 0 auto;
        z-index: 1;
        box-shadow: var(--oo-shadow-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oo-sbl__sidebar,
    .oo-sbl--open > .oo-sbl__sidebar {
        transition: none;
    }
}

/* Handy: Die Seite scrollt, nicht der Inhaltsbereich. Nur so klappt der Browser die Adressleiste ein, aktualisiert beim
   Herunterziehen und hält das fokussierte Eingabefeld über der Tastatur; bei festem Grundgerüst schiebt er stattdessen die
   ganze Seite hoch. Abfrage nach Fenster und Eingabeart statt Container-Abfrage: Ein schmales Panel neben einer Anwendung
   scrollt weiter in seinem Bereich. Auch im Querformat (niedrig, aber breiter als 48rem): Dort bleibt die Seitenleiste stehen,
   und ohne Seiten-Scrollen blieben neben Adressleiste und Tastatur nur wenige Pixel für den Inhalt. Bis 60rem Breite, damit ein
   Tablet im Querformat nicht umschaltet, sobald seine Tastatur das Fenster niedrig macht.
   Die Seiten mit diesem Layout sollten im viewport-Meta interactive-widget=resizes-content setzen, damit Chrome und Firefox unter
   Android die Seite bei offener Tastatur verkleinern, statt sie darunterzuschieben. */
@media (pointer: coarse) and ((max-width: 48rem) or ((max-height: 30rem) and (max-width: 60rem))) {
    html:has(.oo-sbl) body {
        overflow: visible;
        background: var(--oo-color-surface);
    }

    .oo-sbl {
        height: auto;
        min-height: 100dvh;
    }

    .oo-sbl__main {
        --oo-sbl-content-height: 100dvh;
        overflow: visible;
    }

    /* z-index über dem Inhalt, unter Schleier und Seitenleiste. */
    .oo-sbl__header {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--oo-color-surface);
    }

    .oo-sbl--open > .oo-sbl__backdrop {
        position: fixed;
        z-index: 2;
    }

    /* Breit (Querformat): Seitenleiste und Seitenpanel bleiben beim Scrollen der Seite stehen. */
    .oo-sbl__sidebar,
    .oo-sbl__aside {
        position: sticky;
        top: 0;
        height: 100dvh;
    }

    /* Schmal: Die Seitenleiste liegt fest über der Seite; der Inhalt beginnt unter der klebenden Kopfzeile. */
    @container (max-width: 48rem) {
        .oo-sbl__sidebar {
            position: fixed;
            height: auto;
            z-index: 3;
        }

        .oo-sbl__main {
            --oo-sbl-header-offset: var(--oo-sbl-header-height);
            --oo-sbl-content-height: calc(100dvh - var(--oo-sbl-header-height));
        }

        /* Das Seitenpanel liegt fest unter der klebenden Kopfzeile, über dem Inhalt, unter Schleier und Seitenleiste. */
        .oo-sbl__aside {
            position: fixed;
            inset: var(--oo-sbl-header-height) 0 0 auto;
            height: auto;
            z-index: 1;
        }
    }
}