/* =============================================
   Layout général
   ============================================= */

/* Structure principale */
.screen.active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* =============================================
   Header
   ============================================= */
header {
    background: white;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    z-index: 100;
    transition: all var(--transition-normal);
}

header.compressed .header-content {
    padding: 4px var(--spacing-lg);
}

header.compressed .header-logo-wide {
    height: 28px;
}

header.compressed .user-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

header.compressed .user-details {
    height: 30px;
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

header.compressed #logout-btn {
    height: 28px;
    padding: 0 var(--spacing-sm);
    font-size: 11px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl);
    gap: var(--spacing-lg);
    transition: padding var(--transition-normal);
}

.header-logo-wide {
    height: 100px;
    width: auto;
    transition: height var(--transition-normal);
    display: block;
}

.header-logo-mobile {
    display: none; /* Masqué par défaut en desktop */
    height: 50px;
    width: auto;
}

/* User Info */
.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    font-size: 20px;
    transition: all var(--transition-normal);
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 1;
    visibility: visible;
    transition: all var(--transition-normal);
}

#user-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

.badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--border-radius-sm);
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#logout-btn {
    height: 40px;
    border-radius: 20px;
    padding: 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    white-space: nowrap;
    transition: all var(--transition-normal);
}

/* =============================================
   Navigation horizontale
   ============================================= */
#main-nav {
    display: flex;
    align-items: stretch;
    /* background: linear-gradient(to bottom, #f8f9fa, #e9ecef); */
    border-top: 1px solid #e0e0e0;
    border-bottom: 2px solid var(--nav-active-color, var(--primary-color));
    position: relative;
}

.nav-controls-left {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-xs);
}

.nav-arrow {
    background: white;
    border: none;
    /* border-radius: var(--border-radius-sm); */
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition-fast);
    color: var(--primary-color);
}

.nav-arrow:hover {
    background: var(--primary-color);
    color: white;
}

.nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-arrow--hidden {
    display: none;
}

.nav-menu-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-sm);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition-fast);
    color: var(--primary-color);
    font-weight: 600;
}

.nav-menu-btn:hover {
    background: var(--primary-color);
    color: white;
}

.nav-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: var(--spacing-md);
    background: white;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 250px;
    max-height: 400px;
    overflow-y: auto;
}

.nav-menu-dropdown.active {
    display: block;
}

.nav-menu-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--spacing-md);
    border: none;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition-fast);
    color: var(--text-dark);
    white-space: nowrap;
}

.nav-menu-dropdown button:hover {
    background: #f5f5f5;
}

.nav-menu-dropdown button.active {
    background: var(--primary-color);
    color: white;
}

#nav-tabs-container {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    padding: 0 var(--spacing-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

#nav-tabs-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#nav-tabs-container button {
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-fast);
    color: var(--text-dark);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

#nav-tabs-container button:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--primary-color);
}

#nav-tabs-container button.active {
    background: transparent;
    color: var(--primary-color);
    font-weight: 600;
    border-bottom-color: currentColor;
    z-index: 1;
}

/* =============================================
   Main Content
   ============================================= */
main {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-xl);
    background: transparent;
    scrollbar-gutter: stable; /* Réserve l'espace scrollbar pour éviter les sauts de largeur */
}

/* Layout pour onglets avec tableaux uniquement (pas de scroll de page sur desktop) */
main.table-only-tab {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

main.table-only-tab .page-header,
main.table-only-tab .filters-bar {
    flex-shrink: 0;
}

main.table-only-tab .table-container {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

/* =============================================
   Layout Split-View (calendrier + tableau)
   Principe : le calendrier dicte la hauteur,
   le tableau s'aligne avec scroll interne
   ============================================= */

/* Main split-view : flex layout avec scroll si nécessaire */
main.split-view-tab {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Scroll de page si le contenu dépasse */
    overflow-x: hidden;
}

/* Headers et filters : ne pas compresser dans le flex layout */
main.split-view-tab .page-header,
main.split-view-tab .filters-bar {
    flex-shrink: 0;
}

/* Page header */
.page-header {
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    flex-shrink: 0; /* Ne pas compresser dans les layouts flex */
}

.page-header h2 {
    color: var(--primary-color);
    font-size: 2rem;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Filters bar */
.filters-bar {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    flex-shrink: 0; /* Ne pas compresser dans les layouts flex */
}

/* Conteneurs grid : remplissent l'espace disponible en split-view */
main.split-view-tab .presences-container,
main.split-view-tab .volontaires-container,
main.split-view-tab .planning-container,
main.split-view-tab .traiteur-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Split 50/50 */
    gap: var(--spacing-lg);
    align-items: stretch; /* Les deux colonnes à la même hauteur */
    flex: 1 1 0; /* Remplit l'espace restant du main */
    min-height: 0; /* Permet shrink si nécessaire */
}

/* Panel calendrier : doit remplir l'espace disponible pour définir la hauteur */
main.split-view-tab .calendar-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 0; /* Permet au grid stretch de fonctionner correctement */
}

/* Panel liste : s'aligne sur la hauteur du calendrier grâce au stretch */
main.split-view-tab .presences-list-panel,
main.split-view-tab .volontaires-list-panel,
main.split-view-tab .traiteur-list-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 0; /* Permet shrink */
}

/* Table container : scroll interne si contenu dépasse */
main.split-view-tab .table-container {
    flex: 1 1 0; /* Remplit l'espace du panel */
    min-height: 0; /* Permet shrink */
    overflow-y: auto; /* Scroll INTERNE uniquement */
    max-height: none; /* Annule la règle par défaut de 600px */
}

.calendar-panel-full {
    grid-column: 1 / -1;
}

/* =============================================
   Responsive
   ============================================= */

/* Tablettes (entre 768px et 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Autoriser le scroll sur tablette */
    main.table-only-tab {
        overflow-y: auto; /* Changer de hidden à auto pour permettre le scroll */
    }

    main.split-view-tab {
        overflow-y: auto; /* Assurer le scroll pour split-view aussi */
    }

    /* Page header plus compact sur tablette */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
        overflow: visible; /* Ne pas couper le contenu */
    }

    .page-header h2 {
        font-size: 1.6rem;
        margin: 0;
    }

    .header-actions {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: var(--spacing-sm);
    }

    .header-actions button {
        flex: 1 1 auto;
        min-width: 150px;
    }

    /* Tableaux avec scroll sur tablette */
    .table-container {
        max-height: 65vh;
        overflow-y: auto;
    }

    /* Main avec padding en bas pour éviter coupure */
    main {
        padding-bottom: var(--spacing-lg);
    }
}

/* Mobile (768px et moins) */
@media (max-width: 768px) {
    /* Sur mobile, rétablir le scroll normal */
    main.table-only-tab,
    main.split-view-tab {
        display: block;
        overflow-y: visible; /* Changé de auto à visible pour ne pas couper le contenu */
        overflow-x: hidden;
        padding-bottom: var(--spacing-lg); /* Espace en bas pour éviter que le contenu soit coupé */
    }

    /* Tableaux mobile : maximiser la hauteur disponible */
    main.table-only-tab .table-container,
    main.split-view-tab .table-container,
    .table-container {
        flex: none;
        min-height: auto;
        /* Calcul optimisé:
           100vh - header sticky (~80px) - page-header compact (~60px max) - marges (~20px) - summary cards variable
           = environ 160-220px à soustraire selon le contexte
        */
        height: calc(100vh - 160px);
        max-height: calc(100vh - 160px);
        overflow-x: auto; /* Scroll horizontal pour tableaux larges */
        overflow-y: auto; /* Scroll vertical */
        -webkit-overflow-scrolling: touch; /* Smooth scroll sur iOS */
    }

    /* Pour les pages avec summary-cards, réduire la hauteur disponible */
    .summary-cards ~ * .table-container,
    .summary-cards + * .table-container {
        height: calc(100vh - 280px);
        max-height: calc(100vh - 280px);
    }

    main.split-view-tab .presences-container,
    main.split-view-tab .volontaires-container,
    main.split-view-tab .planning-container,
    main.split-view-tab .traiteur-container {
        flex: none;
        min-height: auto;
        grid-template-columns: 1fr;
    }

    main.split-view-tab .calendar-panel,
    main.split-view-tab .presences-list-panel,
    main.split-view-tab .volontaires-list-panel,
    main.split-view-tab .traiteur-list-panel {
        flex: none;
        min-height: auto;
    }

    /* En mobile split-view : afficher le tableau AVANT le calendrier */
    main.split-view-tab .presences-list-panel,
    main.split-view-tab .volontaires-list-panel,
    main.split-view-tab .traiteur-list-panel {
        order: 1;
    }

    main.split-view-tab .calendar-panel {
        order: 2;
    }

    main.split-view-tab .calendar-panel > div:first-child,
    main.split-view-tab #traiteur-calendar,
    main.split-view-tab #planning-calendar {
        flex: none;
        min-height: auto;
        overflow: visible;
    }

    /* SUPPRIMÉ: Doublons des règles main.split-view-tab ci-dessus */

    main {
        padding: var(--spacing-sm); /* Padding réduit en mobile pour maximiser l'espace */
        min-height: auto; /* Autoriser le main à s'étendre selon son contenu */
    }

    /* Réduire encore plus le padding pour les onglets avec tableaux */
    main.table-only-tab,
    main.split-view-tab {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Header mobile : épuré et compact, tout sur une ligne */
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: white; /* S'assurer que le header a un fond pour masquer le contenu qui défile dessous */
    }

    .header-content {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
        flex-wrap: nowrap; /* Force tout sur une ligne */
    }

    /* Switcher entre logo wide et mobile */
    .header-logo-wide {
        display: none !important; /* Masquer le logo horizontal en mobile */
    }

    .header-logo-mobile {
        display: block; /* Afficher le logo vertical en mobile */
        height: 50px;
        max-width: 80px;
        object-fit: contain;
    }

    /* User info épurée : masquer les détails (nom + rôle) */
    .user-info {
        gap: var(--spacing-sm);
    }

    .user-details {
        display: none !important; /* Masquer nom + badge en mobile */
    }

    .user-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    #alertes-btn {
        font-size: 18px;
        padding: 4px;
    }

    #logout-btn {
        font-size: 11px;
        padding: 4px 10px;
        height: 28px;
    }

    #main-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-controls-left {
        padding: 0 var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .nav-menu-btn {
        font-size: 13px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    .nav-arrow {
        padding: 6px 10px;
        font-size: 14px;
    }

    #nav-tabs-container {
        padding: 0 var(--spacing-sm);
        gap: 3px;
    }

    #nav-tabs-container button {
        font-size: 13px;
        padding: var(--spacing-sm) var(--spacing-md);
        min-width: auto;
    }

    /* Menu dropdown en mobile : pleine largeur sous la navigation */
    #main-nav {
        position: relative; /* Pour le positionnement du dropdown */
    }

    .nav-menu-dropdown {
        position: fixed; /* Fixed pour rester visible avec sticky header */
        top: 130px; /* Approximatif : header (~60px) + nav (~50px) + margin */
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        max-width: calc(100vw - 2 * var(--spacing-sm));
        z-index: 2000; /* Au-dessus du header sticky */
    }

    .nav-menu-dropdown button {
        padding: var(--spacing-md);
        font-size: 14px;
    }

    /* Page header et boutons d'actions ULTRA compact en mobile */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 6px; /* Gap minimal */
        overflow: visible; /* Ne pas couper le contenu */
        margin: 0 0 8px 0; /* Marge minimale */
        padding: 0;
    }

    .page-header h2 {
        font-size: 1.1rem; /* Titre encore plus petit */
        margin: 0;
        line-height: 1.3;
    }

    .header-actions {
        display: grid; /* Grid au lieu de flex pour contrôle total */
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour économiser l'espace vertical */
        width: 100%;
        gap: 6px; /* Gap minimal */
    }

    .header-actions button {
        width: 100%;
        justify-content: center;
        padding: 6px 8px; /* Boutons très compacts */
        font-size: 12px; /* Texte petit */
        line-height: 1.2;
        white-space: nowrap; /* Éviter le retour à la ligne */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Si un seul bouton, prendre toute la largeur */
    .header-actions button:only-child {
        grid-column: 1 / -1;
    }

    /* S'assurer que les cartes ne débordent pas */
    .card {
        margin-bottom: var(--spacing-md);
        overflow: visible;
    }

    /* Animation de swipe pour les pages */
    main#main-content {
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    main#main-content.swiping {
        transition: none;
    }

    /* Animations pour les transitions entre onglets */
    @keyframes slideInFromRight {
        from {
            transform: translateX(100%);
            opacity: 0.8;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideInFromLeft {
        from {
            transform: translateX(-100%);
            opacity: 0.8;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideOutToLeft {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(-100%);
            opacity: 0.8;
        }
    }

    @keyframes slideOutToRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0.8;
        }
    }

    main#main-content.slide-in-right {
        animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    main#main-content.slide-in-left {
        animation: slideInFromLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Les styles summary-cards sont maintenant dans cards.css */
}