/* Layout principal */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Sidebar positioning - FIXED */
#sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    z-index: 1001 !important;
    background: #fff !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important;
    overflow-y: auto !important;
}

/* Styles pour le menu latéral */
#sidebar {
    background: #fff !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important;
}

/* Styles pour les boutons du menu latéral */
#sidebar .components {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sidebar .components li {
    margin: 0 !important;
    padding: 0 !important;
}

#sidebar .components li a {
    display: block !important;
    padding: 12px 20px !important;
    color: #374151 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    margin: 5px 10px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

#sidebar .components li a:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    transform: translateX(5px) !important;
}

#sidebar .components li.active a {
    background: #e5e7eb !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

#sidebar .components li a i {
    margin-right: 10px !important;
    width: 16px !important;
    text-align: center !important;
    color: #6b7280 !important;
}

#sidebar .components li a span {
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* Style spécial pour le bouton "Envoyer un message" */
#sidebar .components li a#new_ticket {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%) !important;
    color: white !important;
    border: 2px solid #FF6B35 !important;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
}

#sidebar .components li a#new_ticket:hover {
    background: linear-gradient(135deg, #E55A2B 0%, #E68A1A 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4) !important;
    border-color: #E55A2B !important;
}

/* Style pour le bouton de déconnexion */
#sidebar .components li:last-child a {
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    background: #fef2f2 !important;
}

#sidebar .components li:last-child a:hover {
    background: #dc2626 !important;
    color: white !important;
    border-color: #dc2626 !important;
}

/* Header de la sidebar */
#sidebar .sidebar-header {
    padding: 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
}

#sidebar .sidebar-logo-full img {
    max-width: 100% !important;
    height: auto !important;
}

/* Main wrapper positioning for normal mode - CORRECTED APPROACH */
#wrapper.loginsidebarwrapper {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
    position: relative !important;
    min-height: 100vh !important;
    background-color: #ffffff !important;
}

/* Override hide-sidebar styles - MAXIMUM SPECIFICITY */
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
}

/* Override ALL possible conflicting styles */
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
}

/* Main wrapper positioning for mini sidebar mode */
body.mini-sidebarbody #wrapper.loginsidebarwrapper {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
}

body.hide-sidebar:not(.show-sidebar) body.mini-sidebarbody #wrapper.loginsidebarwrapper {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
}

/* Navbar positioning - FIXED */
.navbar.header {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
}

body.hide-sidebar:not(.show-sidebar) .navbar.header {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
}

body.mini-sidebarbody .navbar.header {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
}

body.hide-sidebar:not(.show-sidebar) body.mini-sidebarbody .navbar.header {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
}

/* Content area positioning - CORRECTED for structure */
#content {
    padding-top: 20px !important; /* Reduced padding since no navbar */
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    min-height: calc(100vh - 20px) !important;
}

/* Override inline styles */
#content[style*="padding-top: 30px"] {
    padding-top: 80px !important;
}

/* Container alignment fixes */
.container {
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: none !important;
}

.loginsidebarwrapper{
    width: calc(100% - 250px) !important;
    margin-left: 250px !important;
    background-color: #ffffff !important;
    min-height: 100vh !important;
}

body.hide-sidebar:not(.show-sidebar) .loginsidebarwrapper{
    width: calc(100% - 250px) !important;
    margin-left: 250px !important;
}

.mini-sidebarwrapper{
    width: calc(100% - 80px) !important;
    margin-left: 80px !important;
}

body.hide-sidebar:not(.show-sidebar) .mini-sidebarwrapper{
    width: calc(100% - 80px) !important;
    margin-left: 80px !important;
}

/* Mobile styles */
@media (max-width: 768px) {
  /* Sidebar mobile */
  #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -250px !important;
    width: 250px !important;
    height: 100vh !important;
    z-index: 1001 !important;
    transition: left 0.3s ease !important;
  }
  
  #sidebar.mobile-open {
    left: 0 !important;
  }
  
  /* Wrapper mobile - FULL WIDTH */
  #wrapper.loginsidebarwrapper {
    margin-left: 0 !important;
    width: 100% !important;
    position: relative !important;
  }
  
  body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  body.mini-sidebarbody #wrapper.loginsidebarwrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  body.hide-sidebar:not(.show-sidebar) body.mini-sidebarbody #wrapper.loginsidebarwrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* Navbar mobile - FULL WIDTH */
  .navbar.header {
    margin-left: 0 !important;
    width: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }
  
  body.hide-sidebar:not(.show-sidebar) .navbar.header {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  body.mini-sidebarbody .navbar.header {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  body.hide-sidebar:not(.show-sidebar) body.mini-sidebarbody .navbar.header {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* Content mobile - CENTERED */
  #content {
    padding-top: 80px !important; /* Garder le padding pour mobile car navbar visible */
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: center !important;
  }
  
  /* Container mobile - CENTERED */
  .container {
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: none !important;
    text-align: center !important;
  }
  
  /* Wrapper classes mobile */
  .loginsidebarwrapper {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
  }
  
  body.hide-sidebar:not(.show-sidebar) .loginsidebarwrapper {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  .mini-sidebarwrapper {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
  }
  
  body.hide-sidebar:not(.show-sidebar) .mini-sidebarwrapper {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  /* Burger menu styles */
  .burger-menu-container {
    position: relative !important;
    z-index: 1000 !important;
  }
  
  .burger-menu-btn {
    background: #374151 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  .burger-menu-btn:hover {
    background: #1f2937 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(55, 65, 81, 0.3) !important;
  }
  
  .burger-menu-btn i {
    font-size: 18px !important;
    font-weight: bold !important;
  }
  
  #toggle-sidebar {
    display: block !important;
  }
}

/* ULTIMATE OVERRIDE - Force our styles to be the last word */
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
}

@media (max-width: 768px) {
  body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
  body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
  body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
  body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper,
  body.hide-sidebar:not(.show-sidebar) #wrapper.loginsidebarwrapper {
      margin-left: 0 !important;
      width: 100% !important;
  }
}

/* Masquer complètement la navbar en version bureau */
@media (min-width: 769px) {
    .navbar.header {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        z-index: -9999 !important;
        pointer-events: none !important;
    }
    
    /* Ajuster le contenu sans navbar */
    #content {
        padding-top: 20px !important; /* Réduire le padding-top car plus de navbar */
    }
    
    /* Masquer tous les éléments de navigation */
    .navbar-nav {
        display: none !important;
    }
    
    .navbar-header {
        display: none !important;
    }
    
    .navbar-collapse {
        display: none !important;
    }
    
    .navbar-brand {
        display: none !important;
    }
}

/* Supprimer seulement les bordures de debug colorées */
*[style*="border: 5px solid red"],
*[style*="border: 5px solid green"],
*[style*="border: 5px solid blue"],
*[style*="border: 5px solid yellow"],
*[style*="border: 5px solid purple"],
*[style*="border: 5px solid pink"] {
    border: none !important;
    outline: none !important;
}

/* Masquer complètement l'overlay en version bureau */