/* ============================================================
   Mobile / iPad / Capacitor-App Optimierungen
   ------------------------------------------------------------
   Wirkt zusaetzlich zum Desktop-CSS aus index.html.
   Ergaenzt nicht ersetzt — der Desktop-Look bleibt unveraendert.
   Wirkt auf:
     - iPad Safari (PWA via Add-to-Homescreen)
     - Capacitor-App (gebundled iOS-App)
     - Mobile Browser allgemein
   ============================================================ */

/* --- Touch-Optimierungen fuer ALLE Geraete --- */

/* Tap-Highlight beim Antippen entfernen (sieht gerade auf iOS billig aus) */
* {
    -webkit-tap-highlight-color: transparent;
}

/* UI-Elemente sollten nicht text-selektierbar sein.
   Inputs/Textareas/Code-Bloecke ausnehmen. */
.btn, .nav-item, .tab, .card-header, .modal-header,
[onclick], button, .menu-item {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

/* Kein Doppel-Tap-Zoom auf interaktiven Elementen */
button, .btn, .nav-item, .tab, [onclick] {
    touch-action: manipulation;
}

/* --- Safe-Area-Insets fuer iPhone X+ und iPad mit Home-Indicator --- */

body {
    /* env(safe-area-inset-*) liefert die Werte des Notches und des
       Home-Indicators. Bei Capacitor "overlaysWebView: false" muss
       der Inhalt darunter beginnen, sonst rutscht er hinter die Statusbar. */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    /* Verhindert das gummibandartige Wegspringen beim Ueberscrollen */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* --- Touch-Target-Vergroesserung (Apple HIG: min 44x44 pt) --- */

@media (pointer: coarse), (max-width: 1024px) {
    .btn {
        min-height: 44px;
        padding: 10px 16px;
    }
    .btn-small {
        min-height: 36px;
        padding: 6px 12px;
    }
    .nav-item {
        min-height: 48px;
        padding: 10px 16px;
    }
    .tab {
        min-height: 44px;
        padding: 10px 16px;
    }
    /* Form-Inputs auf iOS muessen mindestens 16px Schriftgroesse haben,
       sonst zoomt iOS automatisch beim Fokus rein. */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], input[type="time"],
    input[type="search"], textarea, select {
        font-size: 16px !important;
        min-height: 44px;
    }
    /* Kleine Aktion-Icons in Tabellen muessen nicht 44px sein,
       aber zumindest 36px und gut greifbar. */
    .table-action, .icon-btn {
        min-width: 36px;
        min-height: 36px;
    }
}

/* --- iPad Landscape: Sidebar bleibt offen --- */

@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    /* Sidebar nicht zusammenklappen */
    .sidebar {
        width: 240px !important;
    }
    .main-content {
        margin-left: 240px !important;
    }
}

/* --- iPad Portrait: Sidebar zusammenklappen, Burger-Menu --- */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .sidebar {
        width: 60px !important;
    }
    .sidebar .nav-item-label {
        display: none;
    }
    .main-content {
        margin-left: 60px !important;
    }
}

/* --- Modale auf Mobile/iPad als Bottom-Sheet --- */

@media (max-width: 768px) {
    .modal-overlay > div {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 95vh !important;
        margin: 0 !important;
        margin-top: auto !important;
        border-radius: 16px 16px 0 0 !important;
        animation: slideUp 0.25s ease-out;
    }
    .modal-overlay {
        align-items: flex-end !important;
    }
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0.7; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* --- Trainings-Wizard auf iPad: Step-Bubbles werden Tabs --- */

@media (max-width: 1024px) {
    /* Wizard-Modal Vollbild */
    #wizard-overlay > div {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* Step-Bubbles als horizontale Scroll-Liste */
    #wizard-overlay [class*="wiz-step-bubble"] {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
    /* Wizard-Body: max-height anpassen */
    #wiz-body {
        max-height: calc(100vh - 220px) !important;
    }
}

/* --- Feldplanung auf iPad: Wochenraster horizontal scrollbar --- */

@media (max-width: 1024px) {
    #plan-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Capacitor-spezifisch: Schwarzer Hintergrund hinter Notch --- */

html {
    background-color: #0f0f0f;
}

body.capacitor-app {
    /* Kommt durch Capacitor automatisch dazu wenn die App-Hülle aktiv ist.
       Notche-Bereich oben in der App-Brand-Farbe statt durchsichtig. */
    background-color: #0f0f0f;
}

/* --- Drucken (selten gebraucht aber sauber) --- */

@media print {
    .sidebar, .topbar, .btn { display: none !important; }
}