/* ============================================================
   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
   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 wie beim ClassicSidebarLayout: 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;
    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), 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);
}

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

/* 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 erst nach der Bewegung. */
@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 0s linear 0.3s;
    }

    .oo-sbl--open .oo-sbl__sidebar {
        transform: none;
        visibility: visible;
        box-shadow: 0 0 24px rgb(0 0 0 / 0.15);
        transition: transform var(--oo-transition);
    }

    .oo-sbl--open .oo-sbl__backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgb(0 0 0 / 0.2);
    }
}

/* 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): Die Seitenleiste bleibt beim Scrollen der Seite stehen. */
    .oo-sbl__sidebar {
        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));
        }
    }
}