/**
 * Layout principal pour l'interface de gestion
 * Gère la disposition en 3 colonnes et le responsive
 */

/* Neutralisation TOTALE du scroll horizontal */
* {
    box-sizing: border-box;
}

/* Neutralisation du padding du body pour les pages de gestion */
body.management-page {
    padding: 0 20px; /* Restaurer un peu de padding pour les marges */
    margin: 0;
    overflow-x: hidden !important;
}

/* Neutralisation du html pour éviter tout overflow */
html {
    overflow-x: hidden !important;
}

/* Contraindre les éléments header sur les pages de gestion */
body.management-page .header-logo,
body.management-page #global-auth-bar {
    max-width: 100%;
    overflow-x: hidden;
}

/* Neutralisation du main-container de base.css pour les pages de gestion */
body.management-page .main-container {
    max-width: 1320px; /* Largeur max raisonnable */
    width: 100%;
    display: block;
    gap: 0;
    margin: 0 auto; /* Centrer avec marges automatiques */
    padding: 0;
    overflow-x: hidden;
}

/* Layout principal - Compromis : largeur max avec centrage */
.management-layout {
    display: flex;
    min-height: calc(100vh - 200px);
    max-width: 1280px; /* Largeur max désirée */
    width: 100%;
    margin: 0 auto; /* Centrage avec marges automatiques */
    gap: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Zone A : Menu latéral - largeur fixe */
.zone-a {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    flex-shrink: 0;
}

/* Zone B : Conteneur pour tous les panneaux - largeur calculée */
.zone-b {
    width: 1080px; /* 1280 - 200 = 1080px */
    display: flex;
    gap: 20px;
    padding: 25px 20px;
    overflow-x: hidden;
    align-items: flex-start;
}

/* Messages d'erreur et de chargement */
.error-message {
    text-align: center;
    padding: 40px 20px;
    color: #ff6b6b;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.loading-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.no-users-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 1.1rem;
}

/* Masquer le panneau utilisateur pour les sections autres que users */
.management-layout.hide-user-detail .user-detail-container {
    display: none;
}

/* Responsive */
@media (max-width: 1200px) {
    .management-layout {
        gap: 20px;
        padding: 20px;
    }
}

@media (max-width: 1024px) {
    .management-layout {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }
    
    .main-content {
        order: 1;
    }
    
    .sidebar {
        order: 0;
    }
}

@media (max-width: 768px) {
    .management-layout {
        padding: 10px;
        gap: 15px;
    }
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}