/* =============================================================================
 * RESPONSIVE.CSS — ERGÄNZUNG v4.0.0
 * Mobile-First Erweiterung für ALLE Seiten
 *
 * ANLEITUNG: Diesen Block ANS ENDE der bestehenden responsive.css anfügen.
 *            Kollidiert NICHT mit den vorhandenen Regeln (v3.8.0).
 *
 * NEU abgedeckt:
 *   ✅ Globaler Header + Burger-Menü
 *   ✅ Home-Page Card-Grid (1→2→3→4 Spalten)
 *   ✅ Admin-Pages Grid
 *   ✅ Versandstellen Grid
 *   ✅ Stundenleistung Tabs (horizontal scrollbar)
 *   ✅ Touch-Targets (44px Minimum)
 *   ✅ iOS Zoom-Prevention
 *   ✅ Modals/Notifications auf Mobile
 *   ✅ 4K/Ultrawide max-width Begrenzung
 *   ✅ Print Styles
 * ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. GLOBALE GRUNDLAGEN
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Verhindert horizontales Overflow auf allen Seiten */
html, body {
    overflow-x: hidden;
    min-width: 0;
}

/* Touch-freundliche Targets auf Touch-Geräten */
@media (pointer: coarse) {
    button,
    a[role="button"],
    .mantine-ActionIcon-root,
    .mantine-Button-root,
    .mantine-Switch-track,
    .mantine-Checkbox-input {
        min-height: 44px;
        min-width: 44px;
    }

    /* iOS: Verhindert Auto-Zoom bei Input-Fokus */
    .mantine-TextInput-input,
    .mantine-PasswordInput-input,
    .mantine-NumberInput-input,
    .mantine-Select-input,
    .mantine-Textarea-input {
        font-size: 16px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. UTILITY-KLASSEN: mobile-only / desktop-only
 *    Gesteuert über CSS, genutzt in app.py für Burger vs. Desktop-Nav
 * ═══════════════════════════════════════════════════════════════════════════════ */

.mobile-only {
    display: none !important;
}

.desktop-only {
    display: flex !important;
}

@media (max-width: 767px) {
    .mobile-only {
        display: flex !important;
    }

    .desktop-only {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. GLOBALER APP-HEADER (#global-header)
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Smartphone: Kompakter Header — nur Logo + Burger */
@media (max-width: 575px) {
    #global-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Logo kleiner */
    #global-header .mantine-Image-root {
        height: 26px !important;
    }
}

/* Tablet: Etwas kompakter */
@media (min-width: 576px) and (max-width: 767px) {
    #global-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. 4K / ULTRAWIDE — MAX-WIDTH BEGRENZUNG
 *    Verhindert extremes Stretching auf breiten Monitoren
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Alle Seiten-Container begrenzen */
#app-shell-main > div {
    max-width: 2200px;
    margin-left: auto;
    margin-right: auto;
}

/* Zusätzliches Padding auf sehr breiten Screens */
@media (min-width: 2000px) {
    #app-shell-main {
        padding-left: 4vw !important;
        padding-right: 4vw !important;
    }
}

/* Monitor-Page: Eigene max-width */
@media (min-width: 1600px) {
    .monitor-page {
        max-width: 1800px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. HOME-PAGE — CARD GRID RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════════════ */

.home-page {
    max-width: 2200px;
    margin: 0 auto;
}

/* Smartphone: 1 Spalte, weniger Padding */
@media (max-width: 575px) {
    .home-main {
        padding: 12px 8px !important;
    }

    .home-card-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Toolbar: Vertikal stapeln */
    .home-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .home-search-wrap {
        width: 100% !important;
    }

    .home-header-right {
        width: 100% !important;
        justify-content: flex-end !important;
    }

    /* Listen-Ansicht: Kompakt */
    .home-list-row {
        flex-wrap: wrap !important;
        padding: 10px 8px !important;
        gap: 6px !important;
    }

    .home-list-col-dot {
        display: none !important;
    }

    .home-spark-wrap {
        display: none !important;
    }

    .home-list-head {
        display: none !important;
    }

    .home-list-col-actions {
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

/* Tablet: 2 Spalten */
@media (min-width: 576px) and (max-width: 991px) {
    .home-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .home-main {
        padding: 16px 12px !important;
    }
}

/* Desktop: 3 Spalten */
@media (min-width: 992px) and (max-width: 1599px) {
    .home-card-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 4K/Ultrawide: 4 Spalten */
@media (min-width: 1600px) {
    .home-card-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. ADMIN PANEL — RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════════════ */

.admin-page {
    max-width: 2200px;
    margin: 0 auto;
}

@media (max-width: 575px) {
    .admin-page {
        padding: 12px 8px !important;
    }

    /* Section Header: Stapelung */
    .admin-section-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .admin-search-wrapper {
        width: 100% !important;
    }

    .admin-search-input {
        width: 100% !important;
        max-width: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. VERSANDSTELLEN — RESPONSIVE GRID
 * ═══════════════════════════════════════════════════════════════════════════════ */

.vs-page {
    max-width: 2200px;
    margin: 0 auto;
}

/* Smartphone: 1 Spalte, gestapelte Card-Inhalte */
@media (max-width: 575px) {
    .vs-grid {
        grid-template-columns: 1fr !important;
    }

    .vs-page-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .vs-top-bar {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .vs-card-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .vs-card-right {
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* Tablet: 2 Spalten */
@media (min-width: 576px) and (max-width: 991px) {
    .vs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop: 3 Spalten (Standard in versandstellen.css) — hier nur 4K */
@media (min-width: 1600px) {
    .vs-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. STUNDENLEISTUNG — RESPONSIVE TABS + INPUTS
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Tabs: Horizontal scrollbar auf Smartphone */
@media (max-width: 575px) {
    .stundenleistung-dark .mantine-Tabs-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;         /* Firefox */
    }

    .stundenleistung-dark .mantine-Tabs-list::-webkit-scrollbar {
        display: none;                 /* Chrome/Safari */
    }

    .stundenleistung-dark .mantine-Tabs-tab {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* Größere Inputs für Touch-Bedienung */
    .stundenleistung-dark .mantine-NumberInput-input {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 15px !important;    /* >16px → kein iOS-Zoom */
    }

    /* Header-Bar: Weniger Padding */
    .stundenleistung-dark [style*="padding: 0 28px"] {
        padding: 0 12px !important;
    }

    .stundenleistung-dark [style*="maxWidth: 1400px"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Action-Buttons: Wrap auf 2 Zeilen */
    .stundenleistung-dark .mantine-Group-root[style*="gap: 4px"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* Tablet: Etwas größere Touch-Targets */
@media (min-width: 576px) and (max-width: 991px) {
    .stundenleistung-dark .mantine-NumberInput-input {
        height: 34px !important;
        min-height: 34px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. MODALS & NOTIFICATIONS — MOBILE OPTIMIERUNG
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575px) {
    /* Notifications: Volle Breite unten */
    .mantine-Notification-root {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
    }

    /* Modals: Als Bottom-Sheet */
    .mantine-Modal-inner {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .mantine-Modal-content {
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .mantine-Modal-body {
        padding: 16px !important;
    }

    .mantine-Modal-header {
        padding: 16px 16px 8px !important;
    }
}

/* Tablet: Modal max-width begrenzen */
@media (min-width: 576px) and (max-width: 991px) {
    .mantine-Modal-content {
        max-width: 90vw !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. PLOTLY CHARTS — GLOBALE ANPASSUNGEN
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Charts: Container-Breite füllen */
.js-plotly-plot,
.js-plotly-plot .plotly {
    width: 100% !important;
}

/* Touch-Geräte: Modebar ausblenden (stört Touch-Gesten) */
@media (pointer: coarse) {
    .js-plotly-plot .plotly .modebar {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 11. DATEN-TABELLEN / CSS-GRIDS — SCROLL-HILFE
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Momentum-Scrolling auf iOS */
.mantine-ScrollArea-viewport,
[style*="overflow-x: auto"],
[style*="overflowX: auto"] {
    -webkit-overflow-scrolling: touch;
}

/* Visueller Scroll-Hinweis: Gradient-Schatten rechts auf Tablet/Mobile */
@media (max-width: 991px) {
    .diagram-card {
        position: relative;
    }

    .diagram-card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to left,
            var(--mantine-color-body) 0%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 3;
        opacity: 0.6;
        border-radius: 0 var(--mantine-radius-md) var(--mantine-radius-md) 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 12. PRINT STYLES
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media print {
    #global-header,
    .ctrl-btn-group,
    .pagination-container,
    .auto-rotation-toggle,
    .home-toolbar,
    .admin-search-wrapper,
    .vs-back-btn,
    .home-vt-group {
        display: none !important;
    }

    .monitor-page {
        padding: 0 !important;
    }

    .diagram-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .diagram-card::after {
        display: none !important;
    }

    #app-shell-main {
        padding-top: 0 !important;
    }
}