/**
 * MBCDI Frontend Responsive CSS
 * Media queries et adaptations responsive
 * @version 5.5.1
 * @package MBCDI
 * 
 * Architecture: Mobile-first
 * Base styles (0-767px) sont dans les autres fichiers CSS
 * Ce fichier contient uniquement les adaptations pour écrans plus larges
 */

/* ============================================================================
   BREAKPOINTS STANDARDS
   ============================================================================ */

/**
 * STRATÉGIE MOBILE-FIRST:
 * - Base (défaut)     : 0-767px    (Mobile)
 * - Tablette          : 768-1023px
 * - Desktop           : 1024-1199px
 * - Large Desktop     : 1200px+
 * 
 * Les styles de base (mobile) sont dans les fichiers principaux.
 * Ce fichier ajoute les adaptations pour écrans plus larges.
 */


/* ============================================================================
   PETITS MOBILES (< 360px)
   ============================================================================ */

@media (max-width: 360px) {
    /* Commerce Cards - Actions en colonne sur très petits écrans */
    .mbcdi-commerce-card-actions {
        flex-direction: column;
        gap: var(--mbcdi-space-xs);
    }
    
    .mbcdi-btn-details,
    .mbcdi-btn-go-primary {
        width: 100%;
    }
}


/* ============================================================================
   TABLETTE (768px+)
   ============================================================================ */

@media (min-width: 768px) {
    /* === APP CONTAINER === */
    .mbcdi-app {
        position: relative !important;
        height: 600px !important;
    }
    
    /* === TOPBAR === */
    .mbcdi-topbar {
        max-width: 450px !important;
    }
    
    /* === COMMERCE CARDS === */
    .mbcdi-commerce-logo-large {
        width: 70px;
        height: 70px;
    }
    
    /* === SEARCHBAR === */
    .mbcdi-searchbar {
        left: 24px;
        right: auto;
        top: 24px;
        max-width: 400px;
    }
    
    /* === AUTOCOMPLETE === */
    .mbcdi-autocomplete-results {
        max-height: 400px;
    }
    
    /* === LOCATION MODAL === */
    .mbcdi-location-modal-content {
        padding: 32px;
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* === POSITION TOGGLE === */
    .mbcdi-btn-position-toggle {
        top: 24px;
        bottom: auto;
        left: auto;
        right: 24px;
    }
    
    .mbcdi-position-menu {
        top: 76px;
        bottom: auto;
        left: auto;
        right: 24px;
    }
}


/* ============================================================================
   TABLETTE - ADAPTATIONS SPÉCIFIQUES (480-768px)
   ============================================================================ */

@media (min-width: 480px) and (max-width: 768px) {
    .mbcdi-commerce-logo-large {
        width: 65px;
        height: 65px;
    }
}


/* ============================================================================
   DESKTOP (1024px+)
   ============================================================================ */

@media (min-width: 1024px) {
    /* === APP CONTAINER === */
    .mbcdi-app {
        height: 700px !important;
    }
    
    /* === SEARCHBAR === */
    .mbcdi-searchbar {
        max-width: 450px;
    }
    
    /* === COMMERCE CARDS === */
    .mbcdi-commerce-list {
        max-height: 500px;
    }
    
    /* === AUTOCOMPLETE === */
    .mbcdi-autocomplete-results {
        max-height: 500px;
    }
}


/* ============================================================================
   LARGE DESKTOP (1200px+)
   ============================================================================ */

@media (min-width: 1200px) {
    /* === APP CONTAINER === */
    .mbcdi-app {
        height: 800px !important;
        max-width: 1600px;
        margin: 0 auto;
    }
    
    /* === SEARCHBAR === */
    .mbcdi-searchbar {
        max-width: 500px;
    }

    /* === ADMIN - ITINERARIES === */
    .mbcdi-trace-container {
        flex-direction: row;
        gap: var(--mbcdi-space-lg);
    }
}


/* ============================================================================
   DARK MODE (préférence système)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    /* NOTE: Dark mode complet sera implémenté dans v5.4
       Pour l'instant, on adapte uniquement les éléments critiques */
    
    .mbcdi-search-input-wrapper {
        background: var(--mbcdi-grey-1);
        border-color: var(--mbcdi-grey-3);
    }
    
    .mbcdi-search-input {
        color: var(--mbcdi-white);
    }
    
    .mbcdi-autocomplete-results {
        background: var(--mbcdi-grey-1);
        border-color: var(--mbcdi-grey-3);
    }
    
    .mbcdi-autocomplete-item {
        color: var(--mbcdi-white);
        border-bottom-color: var(--mbcdi-grey-3);
    }
    
    .mbcdi-autocomplete-item:hover {
        background: var(--mbcdi-grey-2);
    }
}


/* ============================================================================
   ORIENTATION PAYSAGE (MOBILES)
   ============================================================================ */

@media (max-height: 600px) and (orientation: landscape) {
    /* Adapter la hauteur de l'app en mode paysage sur mobile */
    .mbcdi-app {
        height: 100vh !important;
    }
    
    /* Réduire les espacements verticaux */
    .mbcdi-topbar {
        padding: var(--mbcdi-space-xs) var(--mbcdi-space-md);
    }
    
    .mbcdi-commerce-list {
        max-height: calc(100vh - 200px);
    }
}


/* ============================================================================
   TRÈS GRANDS ÉCRANS (1600px+)
   ============================================================================ */

@media (min-width: 1600px) {
    .mbcdi-app {
        max-width: 1800px;
    }
    
    .mbcdi-container {
        max-width: 1400px;
    }
}


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

@media print {
    /* Masquer les éléments interactifs lors de l'impression */
    .mbcdi-searchbar,
    .mbcdi-btn-position-toggle,
    .mbcdi-position-menu,
    .mbcdi-bottom-sheet,
    .mbcdi-modal-overlay,
    .leaflet-control-container {
        display: none !important;
    }
    
    /* Adapter la carte pour l'impression */
    .mbcdi-app {
        height: auto !important;
        position: relative !important;
    }
    
    #map {
        height: 600px !important;
        page-break-inside: avoid;
    }
    
    /* Afficher les informations en mode liste */
    .mbcdi-commerce-list {
        max-height: none !important;
        overflow: visible !important;
    }
    
    .mbcdi-commerce-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--mbcdi-grey-8);
    }
}


/* ============================================================================
   ACCESSIBILITÉ - RÉDUCTION DES ANIMATIONS
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================================
   HIGH DPI / RETINA
   ============================================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimisations pour écrans haute densité */
    .mbcdi-commerce-logo,
    .mbcdi-commerce-logo-large {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* ============================================================================
   LAYOUT RESPONSIVE (migré de frontend.css v5.4.1)
   ============================================================================ */

/* === Desktop (769px+) - Layout bottomsheet en sidebar === */
@media screen and (min-width: 769px) {
    .mbcdi-topbar {
        max-width: 450px !important;
    }
    
    .mbcdi-bottomsheet {
        left: auto !important;
        right: 16px !important;
        bottom: 16px !important;
        width: 380px !important;
        border-radius: 16px !important;
        max-height: 60vh !important;
        transform: translateY(calc(100% - 80px)) !important;
    }

    .mbcdi-bottomsheet.mbcdi-expanded {
        transform: translateY(0) !important;
    }
}

/* === Mobile (max 768px) - Layout fullscreen optimisé === */
@media screen and (max-width: 768px) {
    /* S'assurer que l'app prend toute la hauteur sur mobile */
    .mbcdi-app {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999999 !important;
    }
    
    .mbcdi-map-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .mbcdi-topbar {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        z-index: 1000 !important;
    }
    
    .mbcdi-ui-logo {
        margin-bottom: 10px !important;
    }
    
    .mbcdi-search-expanded {
        max-height: calc(100vh - 200px) !important;
        max-height: calc(100dvh - 200px) !important;
        overflow-y: auto !important;
    }
    
    .mbcdi-bottomsheet {
        max-height: 70vh !important;
        max-height: 70dvh !important;
    }
    
    .mbcdi-bottomsheet-content {
        max-height: calc(70vh - 80px) !important;
        max-height: calc(70dvh - 80px) !important;
        overflow-y: auto !important;
    }
    
    /* Boutons plus grands sur mobile (minimum 44px pour toucher) */
    .mbcdi-btn,
    .mbcdi-btn-primary,
    .mbcdi-btn-secondary,
    .mbcdi-btn-expand,
    .mbcdi-btn-collapse {
        padding: 12px 16px !important;
    }
    
    .mbcdi-input-start,
    .mbcdi-input-dest,
    .mbcdi-input-dest-main {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    
    .mbcdi-error-message {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* === iOS Safari Fix === */
@supports (-webkit-touch-callout: none) {
    .mbcdi-app {
        height: -webkit-fill-available !important;
    }
}