/**
 * STEP 4 MOBILE FIXES - Correzioni Complete per Mobile
 * Versione: 2.0.0
 * Data: 2024
 *
 * PROBLEMI RISOLTI:
 * - Pulsanti toggle Irraggiamento/Mensile affiancati correttamente
 * - Layout ottimizzato per tutti i dispositivi mobile
 * - Mappa interattiva migliorata per touch
 * - Configurazioni più accessibili
 */

/* ===================================
   FIX CRITICO: PULSANTI TOGGLE
   Problema: I pulsanti appaiono uno sotto l'altro
   Soluzione: Forza layout affiancato con flexbox
   =================================== */

@media (max-width: 768px) {
    /* Fix container per pulsanti toggle */
    .solar-controls-card .row.g-1 {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        margin: 0 !important;
    }

    /* Fix colonne Bootstrap per pulsanti */
    .solar-controls-card .row.g-1 > .col-6 {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding: 0 0.125rem !important;
    }

    /* Ottimizza i pulsanti stessi */
    .solar-mode-btn {
        font-size: 0.7rem !important;
        padding: 0.5rem 0.25rem !important;
        min-height: 36px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }

    /* Icone più piccole per risparmiare spazio */
    .solar-mode-btn i {
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    /* Testo responsive */
    .solar-mode-btn span {
        display: inline-block !important;
        line-height: 1.2 !important;
    }

    /* Su schermi molto piccoli mostra solo icone */
    @media (max-width: 360px) {
        .solar-mode-btn span.d-inline.d-sm-none {
            display: none !important;
        }

        .solar-mode-btn {
            padding: 0.5rem !important;
        }

        .solar-mode-btn i {
            font-size: 0.9rem !important;
            margin: 0 !important;
        }
    }
}

/* ===================================
   LAYOUT GENERALE STEP 4 - MIGLIORAMENTI
   =================================== */

@media (max-width: 768px) {
    /* Container principale più spazioso */
    #analysis-results-content,
    .step-4-content {
        padding: 0.5rem !important;
    }

    /* Cards con spacing ottimizzato */
    .solar-controls-card,
    .panel-configs,
    .solar-options-card,
    .energy-analysis-modern {
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Headers delle card più compatti */
    .card-header,
    .form-header,
    .analysis-header {
        padding: 0.75rem !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }

    /* Contenuto card ottimizzato */
    .card-body,
    .p-3 {
        padding: 0.75rem !important;
    }
}

/* ===================================
   MAPPA INTERATTIVA - OTTIMIZZAZIONI MOBILE
   =================================== */

@media (max-width: 768px) {
    /* Container mappa ottimizzato */
    .panel-map-container {
        margin-bottom: 1rem !important;
        position: relative !important;
    }

    /* Mappa con altezza ottimale per mobile */
    #panel-overlay-map {
        height: 320px !important;
        width: 100% !important;
        border-radius: 12px !important;
        position: relative !important;
        touch-action: pan-x pan-y !important; /* Migliora gesture su mobile */
    }

    /* Info overlay più leggibili */
    .map-overlay-info {
        position: absolute !important;
        bottom: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        margin: 0 !important;
    }

    .map-overlay-info .bg-white {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        padding: 0.625rem !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    .map-overlay-info .h4 {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    .map-overlay-info small {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
    }

    /* Badge heatmap più visibile */
    .position-absolute.top-0.end-0 .badge {
        font-size: 0.7rem !important;
        padding: 0.375rem 0.625rem !important;
        margin: 0.75rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    /* Controlli mappa per touch */
    .leaflet-control-zoom {
        margin: 10px !important;
    }

    .leaflet-control-zoom a {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 20px !important;
    }
}

/* ===================================
   TIMELINE SLIDER - OTTIMIZZAZIONI
   =================================== */

@media (max-width: 768px) {
    /* Container timeline più accessibile */
    .timeline-container {
        background: #f8f9fa !important;
        border-radius: 8px !important;
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Header timeline */
    .timeline-container .d-flex {
        margin-bottom: 0.5rem !important;
    }

    .timeline-container small {
        font-size: 0.75rem !important;
    }

    /* Slider ottimizzato per touch */
    #solar-month-slider-card {
        width: 100% !important;
        height: 6px !important;
        border-radius: 3px !important;
        background: linear-gradient(90deg, #e9ecef 0%, #dee2e6 100%) !important;
        cursor: pointer !important;
    }

    /* Thumb più grande per touch */
    #solar-month-slider-card::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
        border: 3px solid white !important;
    }

    #solar-month-slider-card::-moz-range-thumb {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
        border: 3px solid white !important;
    }

    /* Labels mesi più leggibili */
    .range-labels {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        color: #6c757d !important;
        margin-top: 0.5rem !important;
        padding: 0 0.25rem !important;
    }
}

/* ===================================
   CONFIGURAZIONI PANNELLI - MOBILE
   =================================== */

@media (max-width: 768px) {
    .panel-configs {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    .panel-configs h5 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Configurazioni in griglia verticale */
    .config-slider-wrapper {
        background: white !important;
        border-radius: 10px !important;
        padding: 0.875rem !important;
        margin-bottom: 0.75rem !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    .config-details {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .config-value {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #1e3a8a !important;
    }
}

/* ===================================
   OPZIONI AGGIUNTIVE - CARDS OTTIMIZZATE
   =================================== */

@media (max-width: 768px) {
    .solar-options-card {
        background: white !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    /* Header opzioni compatto */
    .solar-options-card > .d-flex {
        padding: 0.75rem !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }

    /* Option cards touch-friendly */
    .option-card {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 10px !important;
        background: white !important;
        border: 2px solid #e9ecef !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }

    .option-card:active {
        transform: scale(0.98) !important;
        border-color: #3b82f6 !important;
    }

    /* Toggle switches più grandi per mobile */
    .form-check-input {
        width: 3.5rem !important;
        height: 1.75rem !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .form-check-input:checked {
        background-color: #3b82f6 !important;
        border-color: #3b82f6 !important;
    }

    /* Testi option cards */
    .option-card h6 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }

    .option-card p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        color: #6c757d !important;
        margin-bottom: 0 !important;
    }

    .option-card .text-success,
    .option-card .text-primary {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
    }
}

/* ===================================
   STICKY BAR INTEGRAZIONE
   =================================== */

@media (max-width: 768px) {
    /* Spazio extra quando sticky bar è visibile */
    body.has-sticky-bar.calculator-step-4 {
        padding-bottom: 200px !important;
    }

    /* Smooth scroll per navigazione */
    html {
        scroll-behavior: smooth !important;
    }
}

/* ===================================
   PERFORMANCE OTTIMIZZAZIONI
   =================================== */

@media (max-width: 768px) {
    /* Riduci complessità animazioni */
    * {
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }

    /* GPU acceleration per elementi pesanti */
    #panel-overlay-map,
    .sticky-summary-bar {
        transform: translateZ(0) !important;
        will-change: transform !important;
    }

    /* Ottimizza rendering cards */
    .solar-controls-card,
    .panel-configs,
    .solar-options-card {
        contain: layout style !important;
    }
}

/* ===================================
   IPHONE NOTCH SAFE AREAS
   =================================== */

@media (max-width: 768px) {
    .sticky-summary-bar {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }

    #analysis-results-content {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
    }
}

/* ===================================
   EXTRA SMALL DEVICES (< 375px)
   =================================== */

@media (max-width: 375px) {
    /* Pulsanti ancora più compatti */
    .solar-mode-btn {
        font-size: 0.65rem !important;
        padding: 0.4rem 0.2rem !important;
        min-height: 32px !important;
    }

    /* Mappa più piccola */
    #panel-overlay-map {
        height: 280px !important;
    }

    /* Font sizes ridotti */
    .panel-configs h5,
    .solar-options-card h6 {
        font-size: 0.9rem !important;
    }

    .option-card p {
        font-size: 0.75rem !important;
    }

    /* Form controls più compatti */
    .form-check-input {
        width: 3rem !important;
        height: 1.5rem !important;
    }
}

/* ===================================
   LANDSCAPE ORIENTATION
   =================================== */

@media (max-width: 812px) and (orientation: landscape) {
    /* Mappa più bassa in landscape */
    #panel-overlay-map {
        height: 220px !important;
    }

    /* Padding ridotto */
    .solar-controls-card,
    .panel-configs,
    .solar-options-card {
        padding: 0.5rem !important;
    }

    /* Headers più compatti */
    .card-header,
    .analysis-header {
        padding: 0.5rem !important;
    }

    /* Font più piccoli */
    .solar-mode-btn {
        font-size: 0.65rem !important;
        padding: 0.375rem 0.25rem !important;
    }
}

/* ===================================
   UTILITÀ E HELPER CLASSES
   =================================== */

@media (max-width: 768px) {
    /* Nascondi elementi non essenziali */
    .d-mobile-none {
        display: none !important;
    }

    /* Mostra solo su mobile */
    .d-mobile-only {
        display: block !important;
    }

    /* Text utilities */
    .text-mobile-center {
        text-align: center !important;
    }

    .text-mobile-small {
        font-size: 0.85rem !important;
    }

    /* Spacing utilities */
    .mt-mobile-2 {
        margin-top: 0.5rem !important;
    }

    .mb-mobile-2 {
        margin-bottom: 0.5rem !important;
    }

    .p-mobile-2 {
        padding: 0.5rem !important;
    }
}

/* ===================================
   ANIMAZIONI TOUCH FEEDBACK
   =================================== */

@media (max-width: 768px) {
    /* Feedback visivo per elementi interattivi */
    .btn:active,
    .option-card:active,
    .form-check-input:active,
    .solar-mode-btn:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }

    /* Ripple effect per buttons */
    .solar-mode-btn {
        position: relative !important;
        overflow: hidden !important;
    }

    .solar-mode-btn::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 0 !important;
        height: 0 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.5) !important;
        transform: translate(-50%, -50%) !important;
        transition: width 0.3s, height 0.3s !important;
    }

    .solar-mode-btn:active::after {
        width: 100px !important;
        height: 100px !important;
    }
}

/* ===================================
   SCROLL BEHAVIOR
   =================================== */

@media (max-width: 768px) {
    /* Smooth scrolling per anchor links */
    html {
        scroll-padding-top: 80px !important; /* Account for fixed header */
    }

    /* Scroll snap per sezioni principali */
    .step-4-content {
        scroll-snap-type: y proximity !important;
    }

    .savings-hero-card,
    .solar-controls-card,
    .panel-map-container,
    .panel-configs,
    .solar-options-card {
        scroll-snap-align: start !important;
        scroll-margin-top: 1rem !important;
    }
}

/* ===================================
   DARK MODE SUPPORT (Opzionale)
   =================================== */

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .solar-controls-card,
    .panel-configs,
    .solar-options-card {
        background: #1a1a1a !important;
        border-color: #333 !important;
    }

    .option-card {
        background: #2a2a2a !important;
        border-color: #444 !important;
    }

    .timeline-container {
        background: #2a2a2a !important;
    }

    .map-overlay-info .bg-white {
        background: rgba(26, 26, 26, 0.95) !important;
        color: white !important;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .sticky-summary-bar,
    .btn-action-primary,
    .play-animation-btn {
        display: none !important;
    }

    #panel-overlay-map {
        height: 400px !important;
        page-break-inside: avoid !important;
    }
}