/* ===== Drawer =====
   Seitenpanel über dem Inhalt. Liegt auf --oo-z-overlay: über Seiteninhalt und Kopfzeilen (--oo-z-dropdown),
   unter Kontextmenüs und Toasts; Dialoge öffnen als <dialog> im Top Layer und liegen damit immer darüber.
   Breite über --oo-drawer-width (Parameter Width).
   ======================== */

/* Mit Hintergrund scrollt die Seite dahinter nicht mit */
html:has(.oo-drawer__backdrop) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.oo-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--oo-z-overlay);
    background-color: var(--oo-dialog-backdrop, hsla(0, 0%, 100%, 0.75));
    animation: oo-drawer-einblenden var(--oo-transition-slow);
}

.oo-drawer {
    --oo-drawer-width: 40rem;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: var(--oo-z-overlay);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(var(--oo-drawer-width), 100vw);
    max-width: 100vw;
    background-color: var(--oo-color-surface);
    color: var(--oo-color-text);
    box-shadow: var(--oo-shadow-lg);
    font-size: var(--oo-font-size-md);
    outline: none;
}

.oo-drawer--right {
    right: 0;
    border-left: var(--oo-border-width) solid var(--oo-color-border);
    animation: oo-drawer-von-rechts var(--oo-transition-slow);
}

.oo-drawer--left {
    left: 0;
    border-right: var(--oo-border-width) solid var(--oo-color-border);
    animation: oo-drawer-von-links var(--oo-transition-slow);
}

/* ── Kopf: Titel, Aktionen, Schließen-X ── */

.oo-drawer__header {
    padding: var(--oo-space-3) var(--oo-space-3) var(--oo-space-3) var(--oo-space-5);
    border-bottom: var(--oo-border-width) solid var(--oo-color-border);
}

.oo-drawer__title {
    min-width: 0;
    font-size: var(--oo-font-size-lg);
    font-weight: 600;
    line-height: 1.3;
}

/* ── Inhalt scrollt, Kopf und Fuß bleiben stehen ── */

.oo-drawer__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--oo-space-4) var(--oo-space-5);
}

.oo-drawer__footer {
    padding: var(--oo-space-3) var(--oo-space-5);
    border-top: var(--oo-border-width) solid var(--oo-color-border);
}

/* ── Handy: volle Breite ── */

@media (max-width: 48rem) {
    .oo-drawer {
        width: 100vw;
    }

    .oo-drawer__header {
        padding-left: var(--oo-space-4);
    }

    .oo-drawer__body,
    .oo-drawer__footer {
        padding-left: var(--oo-space-4);
        padding-right: var(--oo-space-4);
    }
}

/* ── Animation: dezentes Hereinfahren. Ohne fill-mode bleibt danach kein transform stehen,
   sonst wären position:fixed-Elemente im Drawer (Lightbox, Dropdowns) an das Panel gebunden. ── */

@keyframes oo-drawer-von-rechts {
    from { transform: translateX(2rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes oo-drawer-von-links {
    from { transform: translateX(-2rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes oo-drawer-einblenden {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .oo-drawer,
    .oo-drawer__backdrop {
        animation: none;
    }
}