:root {
    --bg-color: #23272a;
    --nav-color: #2c2f33;
    --text-color: #ffffff;
    --accent-color: #7289da;
    --grid-line: #2f3136;
    --row-height: 50px;
    --danger: #f04747;
    --success: #43b581;
    --warning: #faa61a;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }

/* LAYOUT GLOBAL */
html, body {
    height: 100%; /* Force la hauteur */
    overflow: hidden; /* Empêche le scroll global du navigateur */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
}

/* HEADER (Fixe) */
header {
    flex: 0 0 60px;
    background: var(--nav-color);
    padding: 0 15px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid var(--accent-color);
    z-index: 1000;
}
header h1 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; margin: 0; }

/* NAVIGATION */
nav { display: flex; align-items: center; gap: 15px; }
nav a { color: #bbb; text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
nav a:hover { color: white; }
.user-info { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.2); padding: 5px 10px; border-radius: 20px; font-size: 0.85rem; }
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-color); }
.btn-logout { color: var(--danger) !important; margin-left: 5px; }
#mobile-menu-btn { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; }

/* MAIN (Zone de contenu) */
main {
    flex: 1; /* Prend tout l'espace sous le header */
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
    /* C'EST ICI LA CORRECTION : */
    overflow-y: auto; /* Autorise le scroll si le contenu (comme le Dashboard) dépasse */
    position: relative;
}

/* DASHBOARD (Mes Calendriers) */
/* On ajoute des marges spécifiques car 'main' n'a plus de padding */
.calendar-list, .intro, .create-section {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.calendar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.calendar-card { background: var(--nav-color); padding: 25px; border-radius: 12px; text-align: center; border: 1px solid #202225; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.cal-icon img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 3px solid var(--nav-color); }
.role-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; display: inline-block; margin: 5px 0; }
.role-admin { background: #f04747; color: white; }
.role-coach { background: #faa61a; color: black; }
.role-player { background: #43b581; color: white; }

/* --- PAGE CALENDRIER (Spécifique) --- */
/* Cette classe verrouille le main pour utiliser le scroll interne de la grille */
.calendar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%; /* Prend 100% du main */
    background: #202225;
}

.calendar-header-info {
    flex: 0 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--nav-color); padding: 10px 15px; border-bottom: 1px solid #000;
    gap: 10px; flex-wrap: wrap;
}
.cal-title { display: flex; align-items: center; gap: 10px; }
.cal-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mini-logo { width: 32px; height: 32px; border-radius: 50%; }

/* GRILLE SEMAINE */
.week-grid {
    flex: 1; /* Remplit le reste de l'écran */
    overflow: auto; /* Scroll interne activé */
    
    display: grid;
    /* PC : Heure + 7 colonnes */
    grid-template-columns: 50px repeat(7, 1fr);
    grid-auto-rows: var(--row-height);
    
    background: #202225;
    position: relative;
}

/* Headers */
.day-header {
    background: var(--nav-color); text-align: center; padding: 10px 0;
    border-bottom: 2px solid var(--accent-color); border-right: 1px solid var(--grid-line);
    position: sticky; top: 0; z-index: 20; font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.time-marker {
    text-align: right; padding-right: 5px; color: #888; font-size: 0.75rem;
    transform: translateY(-8px); border-right: 1px solid var(--grid-line);
    position: sticky; left: 0; background: var(--nav-color); z-index: 15;
}
.header-corner { 
    background: var(--nav-color); position: sticky; top: 0; left: 0; z-index: 30; 
    border-bottom: 2px solid var(--accent-color); border-right: 1px solid var(--grid-line); 
    display: flex; align-items: center; justify-content: center; font-size: 0.7rem; 
}
.grid-cell { border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); position: relative; min-height: 50px; }
.grid-cell:hover { background: rgba(255,255,255,0.03); }

/* Events */
.event-item {
    position: absolute; left: 2px; right: 2px; top: 1px; padding: 2px 5px; border-radius: 3px;
    font-size: 0.75rem; color: white; overflow: hidden; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.4); z-index: 10;
    display: flex; align-items: center; font-weight: 600;
}
.type-scrim { background: var(--danger); border-left: 3px solid rgba(0,0,0,0.3); }
.type-tournament { background: var(--warning); color: black; border-left: 3px solid rgba(0,0,0,0.3); }
.type-training { background: var(--success); border-left: 3px solid rgba(0,0,0,0.3); }
.type-meeting { background: var(--accent-color); border-left: 3px solid rgba(0,0,0,0.3); }

/* Vue Mois */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; height: 100%; overflow-y: auto; }
.month-cell { background: #2c2f33; padding: 5px; border: 1px solid #202225; min-height: 80px; }
.month-date { font-weight: bold; color: #aaa; margin-bottom: 5px; display: block; }
.month-event { font-size: 0.7rem; padding: 2px; margin-bottom: 2px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; background: #444; }

/* UI */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 2000; padding: 10px; }
.modal-content { background: #2f3136; width: 100%; max-width: 450px; border-radius: 8px; padding: 20px; border: 1px solid #444; max-height: 90vh; overflow-y: auto; }
.form-row { display: flex; gap: 10px; }
.form-group { margin-bottom: 15px; flex: 1; }
.form-group label { display: block; margin-bottom: 5px; color: #aaa; font-size: 0.8rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; background: #202225; border: 1px solid #444; color: white; border-radius: 4px; font-size: 0.95rem; }
.close-modal { float: right; font-size: 1.5rem; cursor: pointer; color: #aaa; }
.btn { background: var(--accent-color); color: white; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-size: 0.9rem; }
.btn-outline { background: transparent; border: 1px solid var(--accent-color); color: var(--accent-color); }
.btn-outline.active { background: var(--accent-color); color: white; }

/* Mode Dispo */
.avail-mode .grid-cell { cursor: crosshair; }
.grid-cell.is-available { background-color: rgba(67, 181, 129, 0.5) !important; border: 1px solid #43b581; }
.avail-mode .event-item { opacity: 0.1; pointer-events: none; }
#availControls { display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: #2f3136; padding: 10px 20px; border-radius: 50px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); border: 1px solid #43b581; z-index: 100; align-items: center; gap: 15px; width: 90%; max-width: 500px; justify-content: center; flex-wrap: wrap; }
.members-container, .invite-box { width: 100%; max-width: 800px; margin: 20px auto; padding: 0 20px; }

/* ========================================= */
/* MOBILE (Correction Jour par Jour)         */
/* ========================================= */
@media screen and (max-width: 768px) {
    /* Header */
    header { padding: 0 10px; }
    #mobile-menu-btn { display: block; }
    nav { display: none; position: absolute; top: 60px; left: 0; width: 100%; background: var(--nav-color); flex-direction: column; align-items: flex-start; padding: 20px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); z-index: 999; }
    nav.active { display: flex; }
    nav a, .user-info { width: 100%; margin: 5px 0; }

    /* Layout */
    main { padding: 0; } /* Plein écran */
    .calendar-header-info { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; border-radius: 0; }
    .cal-controls { justify-content: space-between; }
    .btn-group { flex: 1; display: flex; }
    .btn-group .btn { flex: 1; text-align: center; }

    /* GRILLE MOBILE : Force 1 jour = 1 écran */
    .week-grid {
        display: grid;
        /* 50px Heure + 7 Jours de (Largeur Écran - 50px) */
        grid-template-columns: 50px repeat(7, calc(100vw - 50px)); 
        
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* Magnétisme */
        scroll-padding-left: 50px; /* Décale le snap pour éviter que l'heure cache le jour */
    }

    .day-header, .grid-cell {
        scroll-snap-align: start; /* Le début de la colonne s'aligne */
    }

    /* Colonnes Fixes */
    .time-marker, .header-corner {
        position: sticky; left: 0; z-index: 50;
        background: var(--nav-color); border-right: 1px solid var(--accent-color);
    }

    /* Modale & Controls */
    .form-row { flex-direction: column; gap: 0; }
    #availControls { width: 95%; flex-direction: column; padding: 15px; border-radius: 10px; gap: 10px; bottom: 10px; }
    #availControls button { width: 100%; }
}