/*
 * RPG Oase
 * Mobile Seitenleisten
 *
 * Wird zentral über includes/navigation.php geladen.
 *
 * Desktop bleibt unverändert.
 * Bis 800px sowie in schmalen Querformat-Viewports mit geringer Höhe:
 * - linke und rechte Seitenleiste werden zu ausfahrbaren Drawern
 * - der Hauptinhalt verwendet die verfügbare Breite
 * - kleine Buttons am linken/rechten Bildschirmrand öffnen die Leisten
 */


/* =========================================================
   DESKTOP – MOBILE ELEMENTE AUS
   ========================================================= */

.mobile-sidebar-controls,
.mobile-sidebar-backdrop {
    display: none;
}


/* =========================================================
   HANDY
   ========================================================= */

@media (max-width: 800px), (orientation: landscape) and (max-height: 600px) and (max-width: 1180px) {

    html,
    body {
        overflow-x: hidden;
    }


    body.mobile-sidebar-is-open {
        overflow: hidden;
    }


    /*
     * Aus dem bisherigen 3-Spalten-Layout wird auf dem Handy
     * eine einzige Hauptspalte.
     */
    .site-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        overflow: visible !important;
    }


    .main-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /*
     * Falls die vorherige Testversion mit dem allgemeinen
     * horizontalen Scroll-Wrapper bereits installiert wurde:
     * Auf echten Handybreiten wird sie hier neutralisiert.
     */
    .mobile-horizontal-scroll {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        overflow-x: visible !important;
        overflow-y: visible !important;
    }


    .mobile-horizontal-scroll-inner {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /*
     * Beide Seitenleisten liegen außerhalb des sichtbaren
     * Bereichs und fahren beim Öffnen darüber.
     */
    .sidebar-left,
    .sidebar-right {
        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;

        display: block !important;

        width: min(82vw, 280px) !important;
        min-width: 0 !important;
        max-width: 280px !important;

        margin: 0 !important;
        padding: 14px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: var(--color-surface) !important;

        border-radius: 0 !important;

        box-shadow: var(--shadow) !important;

        z-index: 5000 !important;

        visibility: hidden;

        transition:
            transform 0.22s ease,
            visibility 0.22s ease;
    }


    .sidebar-left {
        left: 0 !important;

        transform:
            translateX(
                calc(-100% - 24px)
            ) !important;
    }


    .sidebar-right {
        right: 0 !important;

        transform:
            translateX(
                calc(100% + 24px)
            ) !important;
    }


    .sidebar-left.is-mobile-open,
    .sidebar-right.is-mobile-open {
        visibility: visible;

        transform:
            translateX(0) !important;
    }


    /*
     * Seitenspezifische Desktop-Abstände der Navigation dürfen
     * den mobilen Drawer nicht nach unten verschieben.
     */
    .sidebar-left .navigation,
    .sidebar-right .navigation {
        margin-top: 0 !important;
    }


    /*
     * Kleine, dezente Laschen am Bildschirmrand.
     */
    .mobile-sidebar-controls {
        display: contents;
    }


    .mobile-sidebar-toggle {
        position: fixed !important;

        top: 50% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 38px !important;
        height: 52px !important;

        min-width: 38px !important;

        padding: 0 !important;
        margin: 0 !important;

        background:
            var(--color-surface-light) !important;

        color:
            var(--color-primary) !important;

        border:
            1px solid
            var(--color-border) !important;

        box-shadow:
            0 2px 10px
            rgba(0, 0, 0, 0.25) !important;

        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        opacity: 0.92;

        transform:
            translateY(-50%) !important;

        cursor: pointer;

        z-index: 5200 !important;

        transition:
            background-color 0.2s ease,
            color 0.2s ease,
            opacity 0.2s ease;
    }


    .mobile-sidebar-toggle:hover,
    .mobile-sidebar-toggle:focus {
        background:
            var(--color-surface-hover) !important;

        color:
            var(--color-link-hover) !important;

        opacity: 1;

        outline: none;
    }


    .mobile-sidebar-toggle-left {
        left: 0 !important;

        border-left: 0 !important;

        border-radius:
            0
            var(--radius-small)
            var(--radius-small)
            0 !important;
    }


    .mobile-sidebar-toggle-right {
        right: 0 !important;

        border-right: 0 !important;

        border-radius:
            var(--radius-small)
            0
            0
            var(--radius-small) !important;
    }


    .mobile-sidebar-toggle[hidden] {
        display: none !important;
    }


    /*
     * Abdunklung hinter einer geöffneten Leiste.
     */
    .mobile-sidebar-backdrop {
        position: fixed;

        inset: 0;

        display: block;

        background:
            rgba(0, 0, 0, 0.48);

        z-index: 4900;
    }


    .mobile-sidebar-backdrop[hidden] {
        display: none !important;
    }

}

/* =========================================================
   HARDFIX: HANDY IM QUERFORMAT
   =========================================================
   Einige Android-/Chrome-Kombinationen melden Landscape-Media-
   Queries uneinheitlich. navigation.php setzt deshalb zusätzlich
   html.mobile-sidebar-mode anhand der echten Viewport-Maße.
   Diese Regeln haben absichtlich höhere Spezifität als das Design.
*/

html.mobile-sidebar-mode,
html.mobile-sidebar-mode body {
    overflow-x: hidden !important;
}

html.mobile-sidebar-mode body .site-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow: visible !important;
}

html.mobile-sidebar-mode body .main-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html.mobile-sidebar-mode body .sidebar-left,
html.mobile-sidebar-mode body .sidebar-right {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: min(86vw, 310px) !important;
    min-width: 0 !important;
    max-width: 310px !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 78px 12px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 5000 !important;
    transition: transform 0.22s ease, visibility 0.22s ease !important;
}

html.mobile-sidebar-mode body .sidebar-left:not(.is-mobile-open) {
    left: 0 !important;
    right: auto !important;
    transform: translate3d(calc(-100% - 32px), 0, 0) !important;
}

html.mobile-sidebar-mode body .sidebar-right:not(.is-mobile-open) {
    right: 0 !important;
    left: auto !important;
    transform: translate3d(calc(100% + 32px), 0, 0) !important;
}

html.mobile-sidebar-mode body .sidebar-left.is-mobile-open,
html.mobile-sidebar-mode body .sidebar-right.is-mobile-open {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
}

html.mobile-sidebar-mode body .mobile-sidebar-controls {
    display: contents !important;
}

html.mobile-sidebar-mode body .mobile-sidebar-toggle {
    display: flex !important;
}

html.mobile-sidebar-mode body .mobile-sidebar-backdrop:not([hidden]) {
    display: block !important;
}


/* =========================================================
   HARDFIX V6: LANDSCAPE-HANDY DARF NICHT IM 3-SPALTEN-FLUSS BLEIBEN
   ========================================================= */
html.mobile-sidebar-mode body .site-layout > .sidebar-left,
html.mobile-sidebar-mode body .site-layout > .sidebar-right {
    position: fixed !important;
    float: none !important;
    flex: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
}

html.mobile-sidebar-mode body .site-layout > .sidebar-left:not(.is-mobile-open),
html.mobile-sidebar-mode body .site-layout > .sidebar-right:not(.is-mobile-open) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html.mobile-sidebar-mode body .site-layout > .sidebar-left:not(.is-mobile-open) {
    left: 0 !important;
    right: auto !important;
    transform: translate3d(-110%, 0, 0) !important;
}

html.mobile-sidebar-mode body .site-layout > .sidebar-right:not(.is-mobile-open) {
    right: 0 !important;
    left: auto !important;
    transform: translate3d(110%, 0, 0) !important;
}

html.mobile-sidebar-mode body .site-layout > .sidebar-left.is-mobile-open,
html.mobile-sidebar-mode body .site-layout > .sidebar-right.is-mobile-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
}