/**
 * Mobile Optimierung v1.0
 * Touch-friendly, Responsive, Performance-optimiert
 */

/* ================== MOBILE BREAKPOINTS ================== */

/* Tablet (bis 1024px) */
@media (max-width: 1024px) {
    .sidebar {
        width: 220px;
    }
    
    .main-content {
        margin-left: 220px;
    }
}

/* Mobile (bis 768px) */
@media (max-width: 768px) {
    /* Sidebar zu Drawer machen */
    .sidebar {
        position: fixed;
        left: -280px;
        width: 280px;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 2px 0 20px rgba(0,0,0,0.2);
    }
    
    .sidebar.open {
        left: 0;
    }
    
    /* Overlay wenn Sidebar offen */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Main Content full width */
    .main-content {
        margin-left: 0;
        padding: 16px;
    }
    
    /* Mobile Header mit Hamburger */
    .mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .hamburger-menu {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        padding: 8px;
    }
    
    .hamburger-menu span {
        width: 24px;
        height: 3px;
        background: #374151;
        border-radius: 2px;
        transition: all 0.3s;
    }
    
    /* Page Header responsiv */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px;
    }
    
    .header-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }
    
    .header-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Tables responsive */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 0.85em;
    }
    
    table th,
    table td {
        padding: 8px !important;
        white-space: nowrap;
    }
    
    /* Filters stack vertikal */
    .filters-row {
        flex-direction: column !important;
        gap: 12px;
    }
    
    .filters-row > * {
        width: 100% !important;
        min-width: auto !important;
    }
    
    /* Buttons größer für Touch */
    .btn {
        min-height: 44px;
        padding: 12px 20px !important;
        font-size: 15px;
    }
    
    /* Form Inputs größer */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="number"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
    
    /* Modals full screen */
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        margin: 10px !important;
    }
    
    /* Dashboard Grid */
    #dashboardWidgets {
        grid-template-columns: 1fr !important;
    }
    
    /* Bulk-Bar responsive */
    #bulkOperationsBar {
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    #bulkOperationsBar .btn {
        width: 100%;
    }
}

/* Small Mobile (bis 480px) */
@media (max-width: 480px) {
    /* Page Content weniger Padding */
    .page-content {
        padding: 12px !important;
    }
    
    /* Cards weniger Padding */
    .card {
        padding: 16px !important;
    }
    
    /* Stats Grid 1 Spalte */
    .stats-widget > div {
        grid-template-columns: 1fr !important;
    }
    
    /* Kleinere Fonts in Tabellen */
    table {
        font-size: 0.75em;
    }
    
    table th,
    table td {
        padding: 6px !important;
    }
}

/* ================== TOUCH OPTIMIERUNGEN ================== */

/* Größere Touch-Targets */
@media (hover: none) and (pointer: coarse) {
    /* Alle interaktiven Elemente mindestens 44x44px */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Table Rows größer */
    table tr {
        min-height: 48px;
    }
    
    /* Checkboxen größer */
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
    
    /* Disable Hover-Effekte */
    *:hover {
        /* Entferne hover-only Effekte */
    }
    
    /* Active States für Touch */
    button:active,
    .btn:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
}

/* ================== UTILITIES ================== */

/* Mobile-Only */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* Scrollbar Mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
}

/* Safe Areas (iPhone X+) */
@supports (padding: max(0px)) {
    .main-content {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* Landscape Optimierung */
@media (max-width: 768px) and (orientation: landscape) {
    .page-header {
        padding: 12px 16px !important;
    }

    .mobile-header {
        padding: 8px 16px;
    }
}

/* ================== MENÜPLAN MOBILE / KÜCHEN-MODUS ================== */

@media (max-width: 768px) {
    /* Menüplan scrollbar horizontal */
    .menuplan-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Menüplan 2-Spalten auf Tablet */
    .menuplan-week-grid {
        grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
        min-width: unset !important;
    }

    /* Wochenbar kompakter */
    .menuplan-week-bar {
        flex-direction: column;
        gap: 6px;
    }
    .menuplan-week-bar-title {
        font-size: 1em !important;
    }

    /* Typ-Filter wrappen */
    #menuplanTypeFilter {
        padding: 0 0 10px 0 !important;
    }
}

/* Küchen-Modus: Einzelspalte, große Schrift (Smartphone) */
@media (max-width: 480px) {
    .menuplan-week-grid {
        grid-template-columns: 1fr !important;
    }
    .menuplan-day-col {
        min-width: unset !important;
    }
    .menuplan-day-name {
        font-size: 1.1em !important;
        font-weight: 700;
    }
    .menuplan-day-date {
        font-size: 1em !important;
    }
    .menuplan-menutype {
        font-size: 1.05em !important;
        font-weight: 700 !important;
    }
    .menuplan-menu-item {
        font-size: 0.95em !important;
        padding: 10px 12px !important;
    }
    .menuplan-component-name {
        font-size: 0.9em !important;
    }
    .menuplan-nutrients {
        font-size: 0.8em !important;
    }
    .menuplan-price {
        font-size: 0.85em !important;
    }
    /* Allergen-Tags größer für Küche */
    .menuplan-allergen-tag {
        font-size: 0.75em !important;
        padding: 2px 5px !important;
    }
}