/**
 * Mobile Bottom-Sheet-Layout (2D)
 *
 * Ersetzt auf Smartphones das über die Karte gelegte Links-Panel durch eine
 * Google-Maps-artige Aufteilung: Karte oben, unten eine feste Tab-Leiste
 * (Iconbar) und darüber ein Bottom-Sheet mit dem Panel-Inhalt. Das Sheet lässt
 * sich per Wischen/Griff in drei Zustände bringen: versteckt / halb / voll.
 *
 * Alles ist auf `body.mobile-layout` (per mobile-sheet.js gesetzt) UND den
 * Breakpoint gescoped, damit Desktop komplett unberührt bleibt. Die Regeln
 * überschreiben bewusst die vorhandenen Links-Drawer-Regeln aus responsive.css
 * (höhere Spezifität durch `body.mobile-layout` + !important).
 */

@media (max-width: 768px) {

    /* ===== Untere Tab-Leiste (Iconbar horizontal) ===== */
    body.mobile-layout #sidebar-iconbar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        /* über dem (fixen) Footer; --ms-bottom-inset hebt die Leiste auf iOS über
           die Safari-Bottom-Leiste, sonst verschwindet sie dahinter. */
        bottom: calc(var(--ms-footer-h, 0px) + var(--ms-bottom-inset, 0px)) !important;
        top: auto !important;
        width: 100% !important;
        height: 56px !important;
        /* Safe-Area (Home-Indicator) unter den Buttons freihalten */
        box-sizing: content-box !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        background: #fff !important;
        border-top: 1px solid #e0e0e0 !important;
        box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.12) !important;
        z-index: 1602 !important;
        padding: 0 4px env(safe-area-inset-bottom, 0px) 4px !important;
        gap: 0 !important;
    }

    body.mobile-layout #sidebar-iconbar .iconbar-btn {
        flex: 0 0 auto !important;
        min-width: 64px !important;
        height: 100% !important;
        flex-direction: column !important;
        gap: 2px !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 18px !important;
        color: #555 !important;
        background: transparent !important;
    }
    body.mobile-layout #sidebar-iconbar .iconbar-btn .iconbar-label {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        max-width: 68px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    body.mobile-layout #sidebar-iconbar .iconbar-btn.active {
        color: var(--primary-color, #007A66) !important;
        box-shadow: inset 0 -3px 0 var(--primary-color, #007A66) !important;
    }

    /* ===== Bottom-Sheet (bisheriges Links-Panel) ===== */
    body.mobile-layout #sidebar,
    body.mobile-layout #sidebar.has-iconbar,
    body.mobile-layout #sidebar.closed,
    body.mobile-layout #sidebar.has-iconbar.closed {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--ms-tabbar-h, 56px) + var(--ms-footer-h, 0px) + var(--ms-bottom-inset, 0px)) !important;
        top: auto !important;
        width: 100% !important;
        height: var(--ms-half-h, 45vh) !important; /* Standard = halb; Zustandsklassen überschreiben */
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.28) !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 1001 !important;
        /* Zustand über die Höhe (nicht translateY!), damit der Inhalt in JEDER
           Höhe korrekt scrollt. Klassen .ms-full/.ms-half/.ms-hidden setzen die Höhe. */
        transform: none !important;
        transition: height 0.28s ease !important;
    }

    /* Zustände — MÜSSEN die Basis-Regel schlagen. Die Basis matcht auch
       `#sidebar.has-iconbar.closed` (3 Klassen, height:45vh !important); ohne
       `.has-iconbar` hier hätte `.ms-hidden` (2 Klassen) niedrigere Spezifität
       und das Sheet würde trotz ms-hidden NICHT schließen. */
    body.mobile-layout #sidebar.has-iconbar.ms-full   { height: var(--ms-full-h, 82vh) !important; }
    body.mobile-layout #sidebar.has-iconbar.ms-half   { height: var(--ms-half-h, 45vh) !important; }
    body.mobile-layout #sidebar.has-iconbar.ms-hidden,
    body.mobile-layout #sidebar.has-iconbar.ms-hidden.closed { height: 0 !important; }
    /* Während des Ziehens (inline transform aktiv): keine Transition */
    body.mobile-layout #sidebar.ms-dragging { transition: none !important; }

    /* Ziehgriff oben im Sheet */
    body.mobile-layout .ms-grip {
        flex: 0 0 auto;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
        touch-action: none;
    }
    body.mobile-layout .ms-grip::before {
        content: '';
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #cfcfcf;
    }

    /* Panel-Inhalt scrollt innerhalb des Sheets.
       WICHTIG: Die Tab-Fläche ist per Basis-CSS eine Flex-Spalte
       (display:flex; flex-direction:column). Dadurch wurde der Modul-Inhalt (z.B.
       #alkis-panel) als Flex-Item zusammengedrückt (Formular nur ~135px hoch).
       Auf Mobile machen wir daraus einen NORMALEN Block, der scrollt — der Inhalt
       fließt in natürlicher Höhe und wird nie gestaucht. `flex:1 1 auto` bleibt für
       die Größe INNERHALB des Sheets (Tab-Fläche ist selbst Flex-Item des Sheets). */
    body.mobile-layout #sidebar .sidebar-tab-content.active {
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Flurstückmodul: natürliche Blockhöhe statt interner 100%-Höhe-Flexspalte,
       damit das Formular komplett und stabil sichtbar bleibt; Ergebnisse fließen
       darunter, gescrollt wird über die Tab-Fläche. */
    body.mobile-layout #sidebar #alkis-panel {
        height: auto !important;
        display: block !important;
    }
    body.mobile-layout #sidebar #alkis-results.visible { display: block !important; }
    body.mobile-layout #sidebar #alkis-results-list { overflow: visible !important; }

    /* Eingabefelder/Zeilen kompakt (Padding klein), ABER font-size 16px:
       iOS Safari zoomt beim Fokus in Felder mit <16px hinein -> die ganze Ansicht
       skaliert hoch und man muss horizontal scrollen. 16px verhindert das. */
    body.mobile-layout #sidebar #alkis-panel .alkis-form-group input {
        padding: 6px 10px !important;
    }
    body.mobile-layout #sidebar #alkis-panel .alkis-row { margin-bottom: 6px !important; }
    body.mobile-layout #sidebar #alkis-panel .alkis-form-group label { margin-bottom: 2px !important; }

    /* iOS-Auto-Zoom verhindern: alle Eingaben in Sheet/Modal/Ortssuche >= 16px */
    body.mobile-layout #sidebar input,
    body.mobile-layout #sidebar select,
    body.mobile-layout #sidebar textarea,
    body.mobile-layout .modal-container input,
    body.mobile-layout .modal-container select,
    body.mobile-layout .modal-container textarea,
    body.mobile-layout #searchPanel input {
        font-size: 16px !important;
    }

    /* Ausnahme: die „Zeilen je Seite"-Auswahl der Attribut- und der
       Editiertabelle. Die 16px von oben sind für TIPP-Felder gedacht; in einer
       12px-Werkzeugleiste wirkt ein 16px-Auswahlfeld wie ein Formularfeld und
       überragt Blätterknöpfe und Infotext deutlich. Hier wird nichts getippt,
       iOS öffnet ein Auswahlrad. */
    body.mobile-layout .modal-container .attr-table-pagesize select,
    body.mobile-layout .modal-container .edit-table-pagesize select {
        font-size: 13px !important;
        padding: 1px 4px;
    }

    /* Karte nimmt die volle Fläche ein (Sheet liegt darüber, Tableiste darunter) */
    body.mobile-layout #map-container {
        width: 100% !important;
    }

    /* Karten-Steuerung über Tableiste + Footer heben, damit sie nie verdeckt wird */
    body.mobile-layout .map-controls {
        bottom: calc(var(--ms-tabbar-h, 56px) + var(--ms-footer-h, 0px) + var(--ms-bottom-inset, 0px) + 12px) !important;
        z-index: 1000 !important;
    }

    /* Karten-Datenquellen (#dataCopyright) auf Mobil ausblenden — Inhalt steht im
       Info-Panel. */
    body.mobile-layout #dataCopyright { display: none !important; }

    /* ===== Info-Button in der unteren Tab-Leiste =====
       Bewusst OHNE .iconbar-btn-Klasse (sonst hängt app.js einen Tab-Handler an).
       Stattdessen exakt dasselbe RENDERING wie ein Tab nachbauen: Block-Button (KEIN
       flex — die Tabs sind blockifizierte Default-Buttons!), gleiche Maße/Farbe, das
       Icon inline oben, Label als Block darunter. margin-left:auto schiebt ihn ganz
       nach rechts, abgesetzt von den Tabs. */
    body.mobile-layout #sidebar-iconbar .mobile-info-btn {
        display: block !important;
        flex: 0 0 auto !important;
        min-width: 64px !important;
        height: 100% !important;
        margin-left: auto !important;
        text-align: center !important;
        position: static !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #555 !important;
        font-size: 18px !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }
    body.mobile-layout #sidebar-iconbar .mobile-info-btn .iconbar-label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
    /* Icon ebenfalls sicher zentrieren */
    body.mobile-layout #sidebar-iconbar .mobile-info-btn > i {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    /* Aktiv (Panel offen): wie ein aktiver Tab hervorheben */
    body.mobile-layout #sidebar-iconbar .mobile-info-btn.is-open {
        color: var(--primary-color, #007A66) !important;
    }

    /* Info-Panel: klappt über der Tab-Leiste rechts auf */
    body.mobile-layout .mobile-info-panel {
        position: fixed !important;
        right: 8px !important;
        bottom: calc(var(--ms-tabbar-h, 56px) + var(--ms-footer-h, 0px) + var(--ms-bottom-inset, 0px) + 8px) !important;
        width: 250px !important;
        max-width: calc(100vw - 16px) !important;
        background: #fff !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
        z-index: 1301 !important;
        overflow: hidden !important;
        max-height: 70vh !important;
    }
    body.mobile-layout .mobile-info-panel.open { display: flex !important; flex-direction: column !important; }
    body.mobile-layout .mobile-info-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        background: var(--primary-color, #007A66) !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    body.mobile-layout .mobile-info-close {
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        font-size: 18px !important;
        line-height: 1 !important;
        padding: 0 2px !important;
        cursor: pointer !important;
    }
    body.mobile-layout .mobile-info-body {
        display: flex !important;
        flex-direction: column !important;
        padding: 4px 0 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body.mobile-layout .mobile-info-body > * {
        padding: 11px 14px !important;
        font-size: 14px !important;
        color: var(--primary-color, #007A66) !important;
        text-decoration: none !important;
        border-bottom: 1px solid #eee !important;
    }
    /* Alle Infos vollständig ausschreiben — nichts abschneiden, langer Text/URLs
       brechen um. */
    body.mobile-layout .mobile-info-body,
    body.mobile-layout .mobile-info-body * {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-overflow: clip !important;
    }
    body.mobile-layout .mobile-info-body > *:last-child { border-bottom: none !important; }
    body.mobile-layout .mobile-info-copyright {
        color: #777 !important;
        font-size: 12px !important;
    }
    /* Karten-Datenquellen-Block (kompakt, gedämpft) */
    body.mobile-layout .mobile-info-datacopy {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 10px 14px !important;
        border-bottom: none !important;
    }
    body.mobile-layout .mobile-info-datacopy-title {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #999 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 2px !important;
    }
    body.mobile-layout .mobile-info-datacopy a,
    body.mobile-layout .mobile-info-datacopy span:not(.mobile-info-datacopy-title) {
        font-size: 12px !important;
        color: #777 !important;
        text-decoration: none !important;
        line-height: 1.35 !important;
    }
    body.mobile-layout .mobile-info-datacopy a { color: var(--primary-color, #007A66) !important; }

    /* NETGIS-Hinweis ganz unten — klein, dezent, ohne Logo */
    body.mobile-layout .mobile-info-netgis {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        padding: 8px 14px 10px !important;
        border-top: 1px solid #eee !important;
        border-bottom: none !important;
        font-size: 10.5px !important;
        color: #aaa !important;
        line-height: 1.3 !important;
    }
    body.mobile-layout .mobile-info-netgis a {
        font-size: 10.5px !important;
        color: #999 !important;
        text-decoration: none !important;
    }
    body.mobile-layout .mobile-info-netgis a:hover { text-decoration: underline !important; }

    /* Maßstabsauswahl (#scale-dropdown) + Maßstabsleiste (.scale-bar) auf Mobil
       ausblenden — der ganze .scale-container enthält beide. */
    body.mobile-layout .scale-container { display: none !important; }

    /* Hintergrundkarten-Switcher auf Mobil sichtbar/bedienbar machen.
       Desktop: per JS neben die Sidebar positioniert. Mobil ist die Iconbar eine
       volle Tab-Leiste -> die per JS gesetzte inline-left läge außerhalb des
       Bildschirms (Switcher „verschwindet"). Daher fix OBEN LINKS (immer im
       sichtbaren Kartenbereich über dem Sheet; OL-Zoom ist dort ausgeblendet) und
       ÜBER dem Sheet stapeln, damit die aufgeklappte Liste anklickbar ist. Das
       !important überschreibt die inline-left aus updatePosition(). */
    /* Per JS nach <body> umgehängt -> position:fixed (viewportrelativ), damit der
       z-index wirklich über dem Sheet greift. top unter dem Header. */
    body.mobile-layout .basemap-switcher {
        position: fixed !important;
        left: 8px !important;
        top: calc(var(--header-height, 50px) + 8px) !important;
        bottom: auto !important;
        z-index: 1300 !important;
    }
    body.mobile-layout .basemap-switcher .bmsw-tray {
        max-height: 60vh !important;   /* aufgeklappte Liste im sichtbaren Bereich */
    }

    /* Waehrend die Geometrie-Werkzeugleiste sichtbar ist (Body-Klasse aus
       edit-geometry.js), rutscht der Hintergrundkarten-Wechsler unter sie —
       sonst ueberdecken sich beide oben links. --edit-geom-h liefert die
       tatsaechlich gemessene Leistenhoehe. */
    body.mobile-layout.edit-geom-active .basemap-switcher {
        top: calc(var(--header-height, 50px) + 16px + var(--edit-geom-h, 104px)) !important;
    }
    /* Footer auf Mobile ausblenden — die Tab-Leiste ersetzt ihn. Sonst erscheint
       er (© / Impressum / Datenschutz / Sprache) unter der Tab-Bar. Damit ist
       auch --ms-footer-h = 0 und die Tab-Bar sitzt ganz unten. */
    body.mobile-layout #app-footer {
        display: none !important;
    }

    /* iOS: Gummiband-/Overscroll unterbinden, damit fixe Leisten nicht wegrutschen */
    body.mobile-layout {
        overscroll-behavior: none !important;
    }

    /* ===== Header kompakt (Logo + Titel + Werkzeuge passen auf schmale Screens) =====
       Links (Logo + Titel) darf schrumpfen, der Titel kürzt sich per Ellipsis; die
       Werkzeug-Buttons rechts bleiben fix. Das Logo wird kleiner und in der Breite
       gedeckelt, damit ein breites Wortmarken-Logo nicht die halbe Zeile frisst. */
    body.mobile-layout #header { padding: 0 6px !important; }
    body.mobile-layout .header-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    body.mobile-layout .header-home-link { min-width: 0 !important; gap: 6px !important; }
    body.mobile-layout .header-logo {
        height: 30px !important;
        max-width: 44vw !important;
        width: auto !important;
        object-fit: contain !important;
    }
    body.mobile-layout #header h1 {
        font-size: 15px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.mobile-layout .header-tools { flex: 0 0 auto !important; gap: 4px !important; }

    /* Schließen-X bleibt sichtbar (oben rechts) — schließt das Panel ganz nach unten */
    body.mobile-layout #sidebar-close-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* GPS-Infoleiste: unten würde sie unter Tableiste/Footer verschwinden ->
       oben, direkt unter den Header. Auf schmalen Screens umbrechen lassen. */
    body.mobile-layout .gps-info-bar {
        top: calc(var(--header-height, 50px) + 8px) !important;
        bottom: auto !important;
        max-width: calc(100vw - 16px) !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        white-space: normal !important;
        row-gap: 4px !important;
    }

    /* Sheet-Kopf ist ein großer Ziehbereich (leichteres Wischen) */
    body.mobile-layout .sidebar-header {
        touch-action: none !important;
        cursor: grab !important;
        /* Eigener Stacking-Kontext ÜBER dem Sheet-Inhalt/Griff, damit die
           Kopf-Buttons (X, +WMS) nie von etwas verdeckt werden. */
        position: relative !important;
        z-index: 5 !important;
    }
    /* Die Kopf-Buttons müssen immer klickbar sein und dürfen NICHT im Ziehbereich
       „verschluckt" werden (Buttons behalten normales Zeigerverhalten). */
    body.mobile-layout .sidebar-header .panel-header-actions,
    body.mobile-layout .sidebar-header .panel-header-actions > button {
        position: relative !important;
        z-index: 6 !important;
        pointer-events: auto !important;
        touch-action: auto !important;
        cursor: pointer !important;
    }

    /* +WMS / +GEO nur im Ebenen-Tab (Body-Klasse ms-layers-tab via JS) */
    body.mobile-layout .add-wms-btn,
    body.mobile-layout #add-geo-btn { display: none !important; }
    body.mobile-layout.ms-layers-tab .add-wms-btn,
    body.mobile-layout.ms-layers-tab #add-geo-btn { display: inline-flex !important; }

    /* ===== Abfrage-/Detailfenster (ModalManager) unten andocken ===== */
    /* Overlay nie blockieren – Karte bleibt rundherum bedienbar */
    body.mobile-layout .modal-overlay {
        background: transparent !important;
        pointer-events: none !important;
    }
    /* Fenster: unten angedockt, volle Breite, über Tableiste + Footer,
       X sitzt (wie im Standard-Kopf) oben rechts. Inhalt scrollbar. */
    body.mobile-layout .modal-container {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: calc(var(--ms-tabbar-h, 56px) + var(--ms-footer-h, 0px) + var(--ms-bottom-inset, 0px)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        /* Höchstens halbe sichtbare Höhe (per JS aus visualViewport, iOS-sicher) */
        max-height: var(--ms-modal-max-h, 50vh) !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        transform: none !important;
        pointer-events: auto !important;
        box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.28) !important;
    }
    body.mobile-layout .modal-container .modal-header { cursor: default !important; }
    body.mobile-layout .modal-container .modal-body {
        max-height: calc(var(--ms-modal-max-h, 50vh) - 48px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body.mobile-layout .modal-resize-handle { display: none !important; }

    /* ===== Start-Modal (Nutzungsbedingungen) auf Mobil =====
       Das Fenster ist unten angedockt und nur ~50vh hoch. Der lange Text schob
       Checkbox und "Weiter" aus dem Sichtbereich — man musste sie suchen.
       Deshalb: Bedienelemente nach oben, Text darunter. Und nur EIN Scrollbereich
       (der aeussere .modal-body); .start-modal-body hat auf Desktop einen eigenen
       (max-height: 400px), verschachtelt ist das auf kleinen Schirmen unbrauchbar. */
    body.mobile-layout .start-modal-content {
        display: flex !important;
        flex-direction: column !important;
    }
    body.mobile-layout .start-modal-checkbox {
        order: -2 !important;
        margin-bottom: 10px !important;
    }
    body.mobile-layout .start-modal-footer {
        order: -1 !important;
        margin-bottom: 14px !important;
    }
    body.mobile-layout .start-modal-footer .btn-primary {
        width: 100% !important;
    }
    body.mobile-layout .start-modal-body {
        order: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        margin-bottom: 0 !important;
    }

    /* Unterer Abstand im scrollbaren Fensterinhalt: ohne ihn klebt die letzte
       Zeile an der Kante bzw. verschwindet hinter der unteren Leiste. */
    body.mobile-layout .modal-container .modal-body {
        padding-bottom: 24px !important;
    }}

/* ===== Sehr schmale Geräte (z.B. iPhone SE, ~320-360px) =====
   Wenn es selbst kompakt eng wird: Titel ausblenden (Logo brandet ohnehin) und
   Logo/Buttons noch etwas kleiner, damit alle Werkzeuge sicher passen. iPhone 14
   (390px) behält den Titel. */
@media (max-width: 360px) {
    body.mobile-layout #header h1 { display: none !important; }
    body.mobile-layout .header-logo { height: 26px !important; max-width: 50vw !important; }
    body.mobile-layout .header-tool-btn,
    body.mobile-layout a.header-tool-btn,
    body.mobile-layout button.header-tool-btn {
        width: 36px !important; height: 36px !important;
        min-width: 36px !important; min-height: 36px !important;
        max-width: 36px !important; max-height: 36px !important;
        font-size: 16px !important;
    }
    body.mobile-layout .header-tools { gap: 3px !important; }
}

/* Info-Button/-Panel standardmäßig aus (nur auf Mobil via body.mobile-layout an).
   Top-Level (außerhalb der Media-Query), damit sie auf Desktop sicher verborgen
   sind — die Sichtbarkeit setzen die body.mobile-layout-Regeln oben. */
.mobile-info-btn,
.mobile-info-panel { display: none; }