/**
 * Admin: tablet & telefoon (≤900px).
 * — Zijbalk als off-canvas drawer + backdrop
 * — Kaart- en panel-layouts gestapeld
 * — Gameconfig-grid 1 kolom (was al in admin.css; hier gegroepeerd)
 */

@media (max-width: 900px) {
    html.admin-html,
    html.admin-html body {
        height: 100%;
        overflow: hidden;
        touch-action: manipulation;
    }

    .admin-page {
        position: relative;
        min-height: 100dvh;
        min-height: 100svh;
    }

    .admin-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        z-index: 320;
        top: max(10px, env(safe-area-inset-top, 0px));
        left: max(10px, env(safe-area-inset-left, 0px));
        min-height: 46px;
        min-width: 46px;
        padding: 0 12px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary, #e8eae6);
        background: rgba(20, 35, 28, 0.96);
        border: 2px solid var(--accent, #c9a227);
        border-radius: 10px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        gap: 0;
    }
    /* Hamburger → X */
    .admin-nav-toggle__bars {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 22px;
        flex-shrink: 0;
    }
    .admin-nav-toggle__bar {
        display: block;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transition: transform 0.2s ease, opacity 0.15s ease;
    }
    .admin-page--nav-open .admin-nav-toggle__bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .admin-page--nav-open .admin-nav-toggle__bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .admin-page--nav-open .admin-nav-toggle__bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .admin-nav-toggle:active {
        filter: brightness(1.08);
    }

    .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 280;
        background: rgba(0, 0, 0, 0.48);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .admin-page--nav-open .admin-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .admin-layout {
        flex: 1;
        min-height: 0;
        flex-direction: column;
    }

    .admin-sidebar {
        position: fixed;
        z-index: 300;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(300px, 88vw);
        max-width: 100%;
        min-width: 0;
        transform: translateX(-102%);
        transition: transform 0.22s ease;
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45);
        border-right: 1px solid var(--border, #444);
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overscroll-behavior: contain;
    }
    .admin-sidebar .admin-nav-vertical {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }
    .admin-page--nav-open .admin-sidebar {
        transform: translateX(0);
    }

    /* Voorkom dat hoofdinhoud onder het drawer meescrollt (iOS) */
    .admin-page--nav-open .admin-main {
        overflow: hidden;
        touch-action: none;
    }

    .admin-main {
        flex: 1;
        min-height: 0;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Vaste Menu-knop (links boven) mag niet over titel/assets heen vallen */
    .admin-app-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0.45rem 0.65rem;
        padding-top: max(0.45rem, calc(10px + env(safe-area-inset-top, 0px) + 48px));
        padding-left: max(0.65rem, calc(10px + env(safe-area-inset-left, 0px) + 56px));
    }
    .admin-app-header__title {
        font-size: 1.05rem;
    }
    .admin-assets-subdir-bar--in-app-header {
        flex: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .admin-assets-subdir-bar--in-app-header .admin-assets-subdir-bar__select,
    .admin-assets-subdir-bar--in-app-header .admin-assets-subdir-bar__input {
        max-width: 100%;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .admin-assets-subdir-bar--in-app-header .admin-assets-subdir-bar__add,
    .admin-assets-subdir-bar--in-app-header .admin-assets-subdir-bar__remove {
        width: 100%;
        justify-content: center;
    }

    .admin-content-inner {
        padding: 0.5rem 0.65rem 0.85rem;
        -webkit-overflow-scrolling: touch;
    }

    .admin-section {
        padding: 12px;
        max-width: none;
        border-radius: 6px;
    }

    .admin-section.admin-terrain-editor,
    .admin-section.admin-object-editor,
    .admin-section.admin-resource-map-editor {
        padding: 0.5rem;
    }

    /* Lijst + editor onder elkaar */
    .admin-panel-layout {
        flex-direction: column;
        gap: 0.85rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-panel--list {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        max-height: min(42vh, 360px);
    }
    .admin-panel--editor {
        flex: 1 1 auto;
        min-height: min(50vh, 480px);
        overflow-y: auto;
    }

    /* Kaart-preview (oude map view) */
    .admin-content-inner:has(.admin-map-view) .admin-map-view .admin-map-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(220px, 1fr);
        gap: 0.5rem;
    }
    .admin-content-inner:has(.admin-map-view) .admin-map-sidebar {
        grid-column: 1;
        grid-row: 1;
        max-height: min(38vh, 300px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-content-inner:has(.admin-map-view) .admin-map-right {
        grid-column: 1;
        grid-row: 2;
        min-height: 220px;
    }

    .admin-map-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(200px, 1fr);
        gap: 0.5rem;
    }
    .admin-map-sidebar {
        grid-column: 1;
        grid-row: 1;
        max-height: min(38vh, 300px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-map-right {
        grid-column: 1;
        grid-row: 2;
        min-height: 200px;
    }

    .admin-map-view--fullscreen .admin-map-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(200px, 1fr);
    }

    .admin-map-toolbar-row,
    .admin-map-top-row {
        gap: 0.4rem;
    }
    .admin-map-toolbar-select {
        max-width: 100%;
    }

    .gameconfig-grid-2x2 {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }

    .admin-backup-grid {
        grid-template-columns: 1fr;
    }

    .admin-section-header-toolbar,
    .admin-resources-header-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-section-toolbar-actions,
    .admin-resources-toolbar-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.45rem 0.5rem;
    }

    /* Nav in drawer: grotere tikvlakken */
    .admin-nav-vertical button {
        min-height: 44px;
        padding: 0.55rem 0.85rem;
        font-size: 1rem;
    }
    .admin-nav-dropdown > .admin-nav-group {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0.6rem 1rem;
        font-size: 0.72rem;
    }

    /* Items / Bronnen: sticky kopregel blijft leesbaar boven brede tabellen */
    .admin-content-inner > .admin-section > .admin-section-header-toolbar:first-child,
    .admin-content-inner > .admin-section > .admin-resources-header-toolbar:first-child {
        z-index: 35;
    }

    /* Items: typefilter + knoppen gestapeld op smalle schermen */
    .admin-items-section .admin-section-header-toolbar {
        gap: 0.55rem;
    }
    .admin-items-toolbar-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .admin-items-toolbar-actions .admin-btn--compact-toolbar {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        font-size: 0.88rem;
        padding: 0.45rem 0.65rem;
    }
    .admin-items-toolbar-filter {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }
    .admin-items-toolbar-filter .admin-section-toolbar-label {
        font-size: 0.8rem;
    }
    .admin-items-type-filter,
    .admin-section .admin-items-type-filter {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px;
        font-size: 0.95rem;
    }

    /* Armour / Wapens: subtype-filterkaart — dropdowns onder elkaar, vol breedte */
    .admin-items-subtype-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }
    .admin-items-subtype-filters__controls {
        grid-template-columns: 1fr;
    }
    .admin-items-subtype-filters__summary {
        align-self: flex-start;
        white-space: normal;
        padding-bottom: 0;
    }
    .admin-items-subtype-filters__select {
        min-height: 44px;
    }

    /* Oud tab-patroon als het nog ergens terugkomt */
    .admin-armour-combat-tabs,
    .admin-armour-slot-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 0.4rem;
        padding-bottom: 0.35rem;
        scrollbar-width: thin;
    }
    .admin-armour-slot-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 42px;
        padding: 0.45rem 0.75rem;
        font-size: 0.88rem;
    }

    /* Tabellen: horizontaal scrollen met rubberband onderdrukt op wrap */
    .admin-resources-table-wrap {
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        max-width: 100%;
    }

    /* Editor layouts die nog een tweede kolom gebruiken (items met lijst vóór refactor, monsters, npc, …) */
    .admin-items-layout {
        flex-direction: column;
        gap: 0.85rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-items-layout .admin-items-list {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        max-height: min(40vh, 340px);
    }
    .admin-items-layout .admin-items-editor {
        flex: 1 1 auto;
        min-height: min(48vh, 460px);
        padding: 0.85rem;
    }

    .admin-section-header-toolbar .admin-btn,
    .admin-resources-header-toolbar .admin-btn,
    .admin-map-toolbar-row .admin-btn,
    .gameconfig-sticky-bar .admin-btn {
        min-height: 42px;
    }

    .admin-content-inner {
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
    }

    @media (prefers-reduced-motion: reduce) {
        .admin-sidebar,
        .admin-sidebar-backdrop,
        .admin-nav-toggle__bar {
            transition: none;
        }
    }
}