/*
 * SOLUTION RADICALE - Mobile Responsiveness Fix pour Dashboard RDConnect
 * Surcharge complète du template YNEX pour mobile
 */

/* Variables CSS pour contrôle total */
:root {
    --sidebar-width-mobile: 280px;
    --sidebar-width-desktop: 250px;
    --header-height: 60px;
    --transition-speed: 0.3s;
    --primary-color: #111c43;
    --shadow-mobile: 0 5px 15px rgba(0,0,0,0.3);
    --z-sidebar: 1040;
    --z-overlay: 1039;
    --z-header: 1041;
}

/* RESET COMPLET DU COMPORTEMENT MOBILE */
@media (max-width: 991.98px) {
    
    /* ÉTAPE 1 : Reset du layout principal */
    .page-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }
    
    /* ÉTAPE 2 : Sidebar mobile - Position fixe absolue */
    .app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important; /* Caché par défaut */
        width: 280px !important;
        height: 100vh !important;
        z-index: var(--z-sidebar) !important;
        background: #fff !important;
        box-shadow: var(--shadow-mobile) !important;
        transition: all var(--transition-speed) ease-in-out !important;
        overflow-y: auto !important;
        transform: translateX(0) !important;
    }
    
    /* Sidebar visible quand classe 'mobile-menu-open' */
    .mobile-menu-open .app-sidebar {
        left: 0 !important;
        transform: translateX(0) !important;
    }
    
    /* ÉTAPE 3 : Header mobile - Toujours visible */
    .app-header,
    .main-header-container,
    .header-content-left,
    .header-content-right {
        position: relative !important;
        z-index: var(--z-header) !important;
        background: #fff !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    /* ÉTAPE 4 : Bouton hamburger - Forcer l'affichage */
    .sidemenu-toggle,
    .header-link[data-bs-toggle="sidebar"],
    .sidebar-toggle,
    .mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 999 !important;
        cursor: pointer !important;
        padding: 8px !important;
        border: none !important;
        background: transparent !important;
        font-size: 18px !important;
    }
    
    /* Icône hamburger personnalisée */
    .mobile-hamburger-icon {
        display: inline-block !important;
        width: 24px !important;
        height: 18px !important;
        position: relative !important;
        cursor: pointer !important;
    }
    
    .mobile-hamburger-icon span {
        display: block !important;
        height: 2px !important;
        width: 100% !important;
        background: var(--primary-color) !important;
        margin: 4px 0 !important;
        transition: all var(--transition-speed) ease !important;
        border-radius: 1px !important;
    }
    
    /* Animation hamburger -> X */
    .mobile-menu-open .mobile-hamburger-icon span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px) !important;
    }
    
    .mobile-menu-open .mobile-hamburger-icon span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .mobile-menu-open .mobile-hamburger-icon span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px) !important;
    }
    
    /* ÉTAPE 5 : Overlay sombre */
    .mobile-sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: var(--z-overlay) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all var(--transition-speed) ease !important;
    }
    
    .mobile-menu-open .mobile-sidebar-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* ÉTAPE 6 : Menu items - Forcer affichage */
    .app-sidebar .side-menu__label,
    .app-sidebar .category-name,
    .app-sidebar .sidemenu-label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 14px !important;
        padding: 8px 16px !important;
        white-space: normal !important;
    }
    
    .app-sidebar .side-menu__item,
    .app-sidebar .nav-item {
        display: block !important;
        width: 100% !important;
        margin: 2px 0 !important;
    }
    
    .app-sidebar .side-menu__link,
    .app-sidebar .nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
        color: #333 !important;
        text-decoration: none !important;
        border-radius: 6px !important;
        margin: 0 8px !important;
        transition: all 0.2s ease !important;
    }
    
    .app-sidebar .side-menu__link:hover,
    .app-sidebar .nav-link:hover {
        background: #f8f9fa !important;
        color: var(--primary-color) !important;
    }
    
    /* ÉTAPE 7 : Logo et header sidebar */
    .app-sidebar .main-sidebar-header {
        padding: 16px !important;
        border-bottom: 1px solid #e9ecef !important;
        display: block !important;
        width: 100% !important;
    }
    
    .app-sidebar .header-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ÉTAPE 8 : Scroll et conteneur */
    .app-sidebar .main-sidebar {
        height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        padding: 0 !important;
    }
    
    /* ÉTAPE 9 : Désactiver tous les effets de hover/click desktop */
    .app-sidebar[data-nav-style],
    .app-sidebar[data-nav-layout],
    .app-sidebar[data-toggled] {
        position: fixed !important;
        left: -280px !important;
        width: 280px !important;
    }
    
    .mobile-menu-open .app-sidebar[data-nav-style],
    .mobile-menu-open .app-sidebar[data-nav-layout],
    .mobile-menu-open .app-sidebar[data-toggled] {
        left: 0 !important;
    }
    
    /* ÉTAPE 10 : Corps principal - Empêcher le scroll quand menu ouvert */
    .mobile-menu-open body {
        overflow: hidden !important;
    }
    
    /* ÉTAPE 11 : Fix spécifique pour les icônes */
    .app-sidebar .sidemenu-icon,
    .app-sidebar .side-menu__icon {
        margin-right: 12px !important;
        font-size: 16px !important;
        width: 20px !important;
        text-align: center !important;
        display: inline-block !important;
    }
    
    /* ÉTAPE 12 : Animation des sous-menus */
    .app-sidebar .slide-menu {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    
    .app-sidebar .slide.open > .slide-menu {
        max-height: 500px !important;
    }
    
    /* ÉTAPE 13 : Style spécial pour les cartes et contenus */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .col-xl-12,
    .col-lg-12,
    .col-md-12 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .card {
        margin-bottom: 16px !important;
    }
}

/* ÉTAPE 14 : Style pour tablettes */
@media (max-width: 768px) {
    .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .app-sidebar {
        width: 260px !important;
        left: -260px !important;
    }
    
    .mobile-menu-open .app-sidebar {
        left: 0 !important;
    }
}

/* ÉTAPE 15 : Fix pour très petits écrans */
@media (max-width: 480px) {
    .app-sidebar {
        width: 240px !important;
        left: -240px !important;
    }
    
    .mobile-menu-open .app-sidebar {
        left: 0 !important;
    }
    
    .main-content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ÉTAPE 16 : Classes utilitaires pour debug */
.debug-mobile {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.debug-sidebar {
    border: 2px solid blue !important;
    background: rgba(0, 0, 255, 0.1) !important;
}

/* ÉTAPE 17 : Classes d'état forcées */
.force-mobile-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.force-mobile-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ÉTAPE 18 : Animation smooth pour tout */
* {
    -webkit-tap-highlight-color: transparent;
}

.app-sidebar,
.mobile-sidebar-overlay,
.mobile-hamburger-icon span {
    will-change: transform, opacity, visibility;
}

/* ÉTAPE 19 : Fix pour les conflits avec Bootstrap */
@media (max-width: 991.98px) {
    .navbar-toggler {
        display: none !important;
    }
    
    .navbar-collapse {
        display: none !important;
    }
    
    .navbar-expand-lg .navbar-nav {
        flex-direction: column !important;
    }
}

/* ÉTAPE 20 : Print media - Cacher le menu */
@media print {
    .app-sidebar,
    .mobile-sidebar-overlay,
    .sidemenu-toggle {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
}