/**
 * ===============================================================================
 * wezunu · Mobile-Shell (autoritativ, lädt ZULETZT)
 * Behebt den 3-Spalten-Kollaps auf Touch: Seitenspalten werden zu echten
 * Off-Canvas-Drawern (statt 0px-Grid-Spalten), Bottom-Tab-Nav wird per
 * js/mobile-nav.js eingehängt. Alles ≤900px. Desktop unverändert.
 * Developed by Toni Sciacca - mail@tonisciacca.com
 * ===============================================================================
 */

@media (max-width: 900px) {

    /* ── Layout: aus dem 3-Spalten-Grid wird ein einspaltiger Stapel ── */
    .sh-layout {
        display: block !important;
        grid-template-columns: none !important;
        height: calc(100vh - var(--sh-hh, 56px));
        margin-top: var(--sh-hh, 56px);
    }

    /* Mittelspalte: immer sichtbar, volle Breite */
    .sh-ctr {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    /* ── Seitenspalten = Off-Canvas-Drawer (aus dem Grid gelöst) ── */
    .sh-sb, .sh-rt {
        position: fixed !important;
        top: var(--sh-hh, 56px);
        bottom: 0;
        width: 86% !important;
        max-width: 340px;
        min-width: 0;
        z-index: 1450;
        background: var(--sh-card, #fff);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 72px; /* Platz über der Bottom-Nav */
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: transform .3s ease;
    }
    .sh-sb { left: 0;  right: auto; border-right: 1px solid var(--sh-border, #e8e8e8); transform: translateX(-100%) !important; box-shadow: 4px 0 24px rgba(0,0,0,.18); }
    .sh-rt { right: 0; left: auto;  border-left: 1px solid var(--sh-border, #e8e8e8); transform: translateX(100%)  !important; box-shadow: -4px 0 24px rgba(0,0,0,.18); }

    .sh-layout.mob-sb-open .sh-sb { transform: translateX(0) !important; }
    .sh-layout.mob-rt-open .sh-rt { transform: translateX(0) !important; }

    /* Desktop-Klapp-Sticks aus */
    .sh-toggle-sb, .sh-toggle-rt, .sh-reopen-sb, .sh-reopen-rt { display: none !important; }

    /* ── Scrim hinter offenem Drawer ── */
    .mob-scrim {
        position: fixed; inset: 0; top: var(--sh-hh, 56px);
        background: rgba(0,0,0,.42);
        z-index: 1440;
        opacity: 0; pointer-events: none;
        transition: opacity .3s ease;
    }
    body.mob-drawer-open .mob-scrim { opacity: 1; pointer-events: auto; }

    /* ── Bottom-Tab-Nav (Markup aus js/mobile-nav.js; Basis-Styles in app-mobile.css) ── */
    .mob-tabbar { z-index: 1500; }
    .mob-tab span { line-height: 1; }
    body.has-mob-tabbar .sh-ctr { padding-bottom: 58px; }

    /* Header kompakt + eigene Hamburger-Fläche frei (Search-Bar faltet app-mobile schon weg) */
    .sh-header { padding: 0 12px !important; }

    /* Panels dürfen nie horizontal überlaufen */
    .sh-panel, .sh-ctr { max-width: 100vw; }

    /* ── Entdecken: Kategorien-Insel → Bottom-Sheet statt 260px-Schwebe-Panel ── */
    .ent-cat-pop {
        position: fixed !important;
        left: 0 !important; right: 0 !important; top: auto !important;
        bottom: 0;
        width: auto !important; max-width: 100% !important;
        max-height: none !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 900;
        box-shadow: 0 -6px 24px rgba(0,0,0,.16) !important;
    }
    body.has-mob-tabbar .ent-cat-pop { bottom: 58px; } /* über der Bottom-Nav */
    .ent-cat-head { cursor: pointer; }
    /* Standardmäßig eingeklappt — nur der Header (Kategorien/Reset/Alle) ist sichtbar */
    .ent-cat-body { max-height: 0 !important; overflow: hidden !important; transition: max-height .28s ease; }
    .ent-cat-pop.ent-cat-open .ent-cat-body { max-height: 48vh !important; overflow-y: auto !important; }
}

/* Tabbar/Scrim gehören nur auf Mobil */
@media (min-width: 901px) {
    .mob-tabbar, .mob-scrim { display: none !important; }
}