/**
 * sys.quebec - Styles Responsive Globaux
 * Ce fichier contient les règles responsive pour l'OS et les apps
 * 
 * Breakpoints:
 * - Mobile: max-width 480px
 * - Tablet: max-width 768px
 * - Desktop: min-width 769px
 */

/* Variables responsive */
:root {
    --mobile-sidebar-width: 280px;
    --mobile-header-height: 56px;
    --mobile-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   MOBILE SIDEBAR PATTERN
   Pour les apps avec sidebar à gauche
   ======================================== */

/* Container principal de l'app */
@media (max-width: 768px) {
    /* Layout de base pour mobile */
    .app-layout {
        position: relative;
        height: 100%;
        overflow: hidden;
    }
    
    /* Sidebar - devient un menu overlay sur mobile */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--mobile-sidebar-width);
        max-width: 85vw;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform var(--mobile-transition);
        box-shadow: none;
    }
    
    .app-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    }
    
    /* Overlay sombre quand sidebar ouverte */
    .mobile-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99;
        opacity: 0;
        transition: opacity var(--mobile-transition);
    }
    
    .mobile-sidebar-overlay.active {
        display: block;
        opacity: 1;
    }
    
    /* Contenu principal prend toute la largeur */
    .app-main {
        width: 100%;
        margin-left: 0;
    }
    
    /* Bouton toggle mobile - affiché sur mobile */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-secondary, #a0aec0);
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .mobile-menu-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary, #f0f0f5);
    }
    
    .mobile-menu-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
    }
    
    /* Bouton fermer sidebar sur mobile */
    .mobile-close-btn {
        display: flex !important;
    }
}

/* Desktop: cacher les contrôles mobile */
@media (min-width: 769px) {
    .mobile-menu-btn,
    .mobile-close-btn,
    .mobile-sidebar-overlay {
        display: none !important;
    }
    
    .app-sidebar {
        transform: none !important;
        position: relative !important;
    }
}

/* ========================================
   HELPERS RESPONSIVE
   Classes utilitaires
   ======================================== */

/* Cacher sur mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Cacher sur desktop */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Afficher seulement sur mobile */
.show-mobile {
    display: none !important;
}

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

/* ========================================
   FORMULAIRES RESPONSIVE
   ======================================== */

@media (max-width: 480px) {
    /* Inputs plus grands sur mobile pour le touch */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important; /* Évite le zoom auto sur iOS */
        min-height: 44px; /* Taille minimum pour touch */
    }
    
    /* Boutons plus grands */
    button, 
    .btn {
        min-height: 44px;
        padding: 12px 16px;
    }
}

/* ========================================
   GRILLES RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .grid-responsive {
        grid-template-columns: 1fr !important;
    }
    
    .flex-responsive {
        flex-direction: column !important;
    }
}

/* ========================================
   MODAL RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .modal-responsive {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
}

/* ========================================
   TOUCH IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Zone de touch plus grande */
    .touch-target {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Désactiver les effets hover sur touch */
    @media (hover: none) {
        *:hover {
            /* Reset hover states pour touch devices */
        }
    }
}

/* ========================================
   SAFE AREA (Notch support)
   ======================================== */

@supports (padding: max(0px)) {
    .safe-area-top {
        padding-top: max(0px, env(safe-area-inset-top));
    }
    
    .safe-area-bottom {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    
    .safe-area-left {
        padding-left: max(0px, env(safe-area-inset-left));
    }
    
    .safe-area-right {
        padding-right: max(0px, env(safe-area-inset-right));
    }
}