/* Mobile-First Optimierungen für PhotoVolt CRM */

/* Basis Mobile Optimierungen */
@media (max-width: 768px) {
    
    /* Größere Touch-Targets */
    .btn, button {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Größere Schrift für bessere Lesbarkeit */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Navigation optimiert */
    .nav-item {
        padding: 16px 12px !important;
        font-size: 16px !important;
        min-height: 56px !important;
    }
    
    /* Dashboard Cards größer */
    .dashboard-card {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }
    
    .dashboard-card .text-2xl {
        font-size: 2rem !important;
    }
    
    .dashboard-card .text-sm {
        font-size: 16px !important;
    }
    
    /* Formular-Elemente größer */
    .form-input, .form-select, input, select, textarea {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Verhindert Zoom auf iOS */
    }
    
    /* Kontakte-Liste optimiert */
    .contacts-list-item {
        padding: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .contacts-list-item h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    .contacts-list-item p {
        font-size: 14px !important;
    }
    
    /* Modals vollbildschirm auf Mobile */
    .modal-content {
        max-width: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Header kompakter */
    header {
        padding: 12px 16px !important;
    }
    
    /* Tabellen horizontal scrollbar */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Cards Grid - Single Column auf Mobile */
    .grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Floating Action Button größer */
    .fab {
        width: 64px !important;
        height: 64px !important;
        bottom: 24px !important;
        right: 24px !important;
    }
    
    /* Sidebar vollbreite auf Mobile */
    .sidebar-mobile {
        width: 100% !important;
    }
    
    /* Spacing-Anpassungen */
    .container-mobile {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Icons größer */
    .icon-mobile {
        font-size: 24px !important;
    }
    
    /* Status-Badges größer */
    .badge {
        padding: 8px 12px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
    
    /* Search-Input prominenter */
    .search-input {
        padding: 16px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }
}

/* Extra große Smartphones (inkl. 390px iPhone Pro) */
@media (max-width: 480px) {
    
    /* Noch größere Touch-Targets */
    .btn {
        min-height: 52px !important;
        font-size: 18px !important;
    }
    
    /* Navigation noch prominenter */
    .nav-item {
        padding: 20px 16px !important;
        font-size: 18px !important;
    }
    
    /* Dashboard Cards volle Breite */
    .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Titles größer */
    .mobile-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        margin-bottom: 16px !important;
    }
    
    /* Action-Buttons Stack */
    .action-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .action-buttons .btn {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
}

/* Mobile Modal Optimierungen */
.mobile-modal-container {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.mobile-modal-content {
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
    position: relative !important;
}

/* Desktop Modal Stil */
@media (min-width: 768px) {
    .mobile-modal-container {
        padding: 16px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mobile-modal-content {
        border-radius: 12px !important;
        min-height: auto !important;
    }
}

/* Spezifische 390px iPhone Pro Optimierungen */
@media (max-width: 390px) {
    
    /* Container Padding reduzieren */
    .container, .px-4, .px-6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Header kompakter */
    header {
        padding: 8px 12px !important;
    }
    
    /* Cards kompakter */
    .bg-white {
        margin: 8px 0 !important;
    }
    
    /* Formulare anpassen */
    .space-y-4 > * + * {
        margin-top: 12px !important;
    }
    
    /* Media Folders anpassen */
    .media-folder {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    .media-folder i {
        font-size: 2.5rem !important;
    }
    
    .media-action-btn {
        padding: 6px 8px !important;
        font-size: 10px !important;
        margin: 0 1px !important;
    }
    
    /* Foto-Button optimieren */
    .touch-target {
        min-height: 56px !important;
        padding: 16px 12px !important;
        font-size: 16px !important;
    }
    
    /* Grid anpassungen */
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Text Größen anpassen */
    .text-2xl {
        font-size: 1.5rem !important;
    }
    
    .text-xl {
        font-size: 1.25rem !important;
    }
    
    .text-lg {
        font-size: 1.125rem !important;
    }
    
    /* Modal anpassungen */
    .modal-content {
        padding: 16px !important;
        margin: 8px !important;
    }
    
    /* Camera Modal für 390px */
    .camera-controls-overlay {
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }
    
    #cameraModal .w-20.h-20 {
        width: 72px !important;
        height: 72px !important;
    }
    
    #cameraModal .w-14.h-14 {
        width: 56px !important;
        height: 56px !important;
    }
    
    #cameraModal .space-x-4 > * + * {
        margin-left: 16px !important;
    }
}

/* Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
    
    /* Header kompakter in Landscape */
    header {
        padding: 8px 16px !important;
    }
    
    /* Navigation als horizontal scroll */
    .nav-landscape {
        display: flex !important;
        overflow-x: auto !important;
        padding: 0 !important;
    }
    
    .nav-landscape .nav-item {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* Touch-Targets */
.touch-target {
    min-width: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Camera Controls Overlay */
.camera-controls-overlay {
    min-height: 140px;
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Camera Modal Vollbild */
#cameraModal {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height für Mobile */
}

#cameraModal video {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
}

/* Camera Button Animations */
#capturePhoto {
    transition: transform 0.1s ease, box-shadow 0.2s ease !important;
}

#capturePhoto:active {
    transform: scale(0.95) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.8) !important;
}

/* Calendar Event Items */
.event-item {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    min-height: 48px !important; /* Touch-Target für Mobile */
    padding: 12px !important;
    border-radius: 8px !important;
}

.event-item:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 10 !important;
    position: relative !important;
}

.event-item:active {
    transform: scale(0.98) !important;
}

/* Ganztägige Events */
.event-item.all-day-event {
    border-left-width: 4px !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05)) !important;
    border-color: #3B82F6 !important;
}

.event-item.all-day-event .font-medium {
    color: #1D4ED8 !important;
}

/* Monatsansicht Events */
.event-item-small {
    transition: all 0.15s ease !important;
}

.event-item-small:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    z-index: 10 !important;
    position: relative !important;
}

.event-item-small.all-day-event {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.1)) !important;
    border-left-color: #3B82F6 !important;
}

/* Monatsansicht Mobile Optimierungen */
@media (max-width: 768px) {
    
    /* Monats-Grid mobil */
    .grid-cols-7.grid-rows-6 > div {
        min-height: 80px !important;
        padding: 4px !important;
    }
    
    .event-item-small {
        font-size: 10px !important;
        padding: 2px 4px !important;
        margin-bottom: 2px !important;
    }
    
    .event-item-small .font-medium {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    
    .event-item-small .text-xs {
        font-size: 9px !important;
    }
    
    /* Wochentage Header mobil */
    .grid-cols-7.border-b > div {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    
    /* Tag-Nummern mobil */
    .grid-cols-7.grid-rows-6 span {
        font-size: 12px !important;
    }
}

/* Calendar Day Columns */
.add-task-prompt {
    transition: all 0.2s ease !important;
    min-height: 64px !important; /* Größerer Touch-Target */
    padding: 16px !important;
}

.add-task-prompt:hover {
    background-color: rgba(59, 130, 246, 0.05) !important;
    color: #3B82F6 !important;
}

/* Calendar Mobile Optimierungen */
@media (max-width: 768px) {
    
    /* Workweek Grid mobil */
    #workweekGrid {
        gap: 2px !important;
    }
    
    /* Day Columns mobil */
    #workweekGrid > div {
        min-height: 300px !important;
        padding: 8px !important;
    }
    
    /* Calendar Events mobil */
    .event-item {
        font-size: 14px !important;
        min-height: 52px !important;
        margin-bottom: 4px !important;
        padding: 10px 8px !important;
    }
    
    .event-item .font-medium {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .event-item .text-gray-600 {
        font-size: 12px !important;
        margin-top: 4px !important;
    }
    
    .event-item .text-gray-500 {
        font-size: 11px !important;
        margin-top: 2px !important;
    }
    
    /* Calendar Header mobil */
    .grid-cols-5.border-b > div {
        padding: 12px 8px !important;
        font-size: 14px !important;
    }
    
    .grid-cols-5.border-b .font-medium {
        font-size: 14px !important;
    }
    
    .grid-cols-5.border-b .text-sm {
        font-size: 12px !important;
    }
    
    /* Add Task Prompt mobil */
    .add-task-prompt {
        min-height: 80px !important;
        padding: 20px 12px !important;
        font-size: 16px !important;
    }
    
    .add-task-prompt .fa-plus-circle {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }
    
    /* Calendar Navigation mobil */
    .calendar-nav .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px !important;
        font-size: 18px !important;
    }
    
    /* Calendar View Buttons */
    .calendar-view-buttons .btn {
        font-size: 14px !important;
        padding: 8px 12px !important;
        min-height: 40px !important;
    }
}

/* Touch-Feedback */
@media (hover: none) and (pointer: coarse) {
    
    /* Touch-Feedback für alle interaktiven Elemente */
    .btn:active, 
    .nav-item:active,
    .card:active,
    .contacts-list-item:active,
    .touch-target:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Hover-Effekte entfernen auf Touch-Geräten */
    .hover\\:bg-gray-100:hover {
        background-color: inherit !important;
    }
    
    /* Active-States für Touch */
    .btn:active {
        opacity: 0.8 !important;
    }
    
    /* Menu Button spezielle Touch-Behandlung */
    #menuToggle:active {
        background-color: rgba(59, 130, 246, 0.1) !important;
    }
    
    #mobileLogoutBtn:active {
        background-color: rgba(220, 38, 38, 0.1) !important;
    }
}

/* Accessibility Verbesserungen */
@media (prefers-reduced-motion: reduce) {
    
    /* Animationen reduzieren */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (falls gewünscht) */
@media (prefers-color-scheme: dark) {
    
    /* Optional: Dark Mode Variablen */
    :root {
        --mobile-bg: #1a1a1a;
        --mobile-text: #ffffff;
        --mobile-border: #333333;
    }
}

/* Mobile Viewport Fixes */
html, body {
    width: 100% !important;
    overflow-x: hidden !important;
}

body {
    position: relative !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

/* Container Width Fix */
.container {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Prevent horizontal scroll */
* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* iOS Safari spezifische Fixes */
@supports (-webkit-touch-callout: none) {
    
    /* iOS Zoom verhindern */
    input[type="text"], 
    input[type="email"], 
    input[type="tel"], 
    input[type="password"],
    input[type="date"],
    input[type="time"],
    select, 
    textarea {
        font-size: 16px !important;
        -webkit-appearance: none !important;
        border-radius: 0 !important;
    }
    
    /* iOS Safe Area */
    .ios-safe {
        padding-bottom: env(safe-area-inset-bottom) !important;
        padding-top: env(safe-area-inset-top) !important;
    }
    
    /* iOS Body Fix */
    body {
        -webkit-text-size-adjust: 100% !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Allow text selection in inputs */
    input, textarea {
        -webkit-user-select: text !important;
        user-select: text !important;
    }
}

/* Android Chrome spezifische Fixes */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    
    /* Android Touch-Targets */
    .android-touch {
        min-height: 48px !important;
        min-width: 48px !important;
    }
}