/* /Applications/MAMP/htdocs/MatchMyGame/assets/css/dashboard.css */

:root {
    --dash-primary: #6366f1;
    --dash-primary-light: #eef2ff;
    --dash-bg: #f3f4f6;
    --dash-white: #ffffff;
    --dash-text-main: #1f2937;
    --dash-text-muted: #6b7280;
    --dash-border: #e5e7eb;
    --dash-gray-light: #f9fafb;
    --dash-danger: #ef4444;
    --dash-danger-light: #fef2f2;
    --dash-success: #22c55e;
    --dash-warning: #f59e0b;
}

/* --- LAYOUT DU DASHBOARD --- */
.dash-topbar { background: var(--dash-white); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--dash-border); position: sticky; top: 0; z-index: 100; }
.dash-logo { font-size: 20px; font-weight: 800; color: var(--dash-primary); display: flex; align-items: center; gap: 8px; }

.dashboard-container { max-width: 1200px; margin: 24px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 350px; gap: 24px; }

/* --- PANNEAUX (Cards génériques) --- */
.dash-panel { background: var(--dash-white); border-radius: 24px; padding: 24px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); margin-bottom: 24px; border: 1px solid var(--dash-border); }
.dash-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dash-panel-title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin: 0; }
.dash-panel-title i { color: var(--dash-primary); }

/* Filtres type pilules */
.filter-tabs { display: flex; gap: 8px; background: var(--dash-gray-light); padding: 4px; border-radius: 12px; }
.filter-tab { padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--dash-text-muted); border-radius: 8px; cursor: pointer; border: none; background: none; transition: 0.2s; }
.filter-tab.active { background: var(--dash-white); color: var(--dash-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* --- NOTIFICATIONS --- */
/* --- NOTIFICATIONS --- */
.notif-list { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    max-height: 350px; /* La limite de hauteur magique */
    overflow-y: auto;  /* Active le défilement vertical si ça dépasse */
    padding-right: 6px; /* Évite que le texte ne colle à la barre de défilement */
}

/* Stylisation de la barre de défilement (Scrollbar personnalisée) pour garder un design épuré */
.notif-list::-webkit-scrollbar { 
    width: 5px; 
}
.notif-list::-webkit-scrollbar-track { 
    background: transparent; 
}
.notif-list::-webkit-scrollbar-thumb { 
    background: var(--dash-border); 
    border-radius: 10px; 
}
.notif-list::-webkit-scrollbar-thumb:hover { 
    background: var(--dash-text-muted); 
}
.notif-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--dash-primary-light); border: 1px solid #c7d2fe; border-radius: 12px; }
.notif-item.friend { background: var(--dash-gray-light); border-color: var(--dash-border); }
.notif-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.notif-content { flex: 1; }
.notif-text { font-size: 13px; line-height: 1.4; color: var(--dash-text-main); }
.notif-time { font-size: 11px; color: var(--dash-text-muted); margin-top: 4px; }
.notif-actions { display: flex; gap: 8px; }
.btn-icon-circle { width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.btn-accept { background: var(--dash-success); color: white; }
.btn-accept:hover { background: #16a34a; }
.btn-decline { background: var(--dash-danger-light); color: var(--dash-danger); }
.btn-decline:hover { background: var(--dash-danger); color: white; }

/* --- AGENDA --- */
.agenda-day { margin-bottom: 24px; }
.day-header { font-size: 14px; font-weight: 700; color: var(--dash-text-muted); margin-bottom: 12px; padding-bottom: 4px; border-bottom: 2px solid var(--dash-border); }

.dash-session-card { display: flex; gap: 16px; padding: 16px; border: 1px solid var(--dash-border); border-radius: 16px; transition: 0.2s; cursor: pointer; background: var(--dash-white); margin-bottom: 12px; text-decoration: none; color: inherit;}
.dash-session-card:hover { border-color: var(--dash-primary); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.session-time { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--dash-gray-light); padding: 10px; border-radius: 12px; min-width: 60px; }
.session-time strong { font-size: 16px; color: var(--dash-primary); }
.session-time span { font-size: 11px; color: var(--dash-text-muted); font-weight: 600; text-align: center; }

.session-details { flex: 1; display: flex; flex-direction: column; justify-content: center;}
.session-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; color: var(--dash-text-main); }
.session-meta { display: flex; gap: 12px; font-size: 12px; color: var(--dash-text-muted); font-weight: 500; margin-bottom: 8px; }

/* Statuts dans l'agenda */
.status-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; width: fit-content; }
.s-host { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; } 
.s-accepted { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } 
.s-pending { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; } 

/* --- AMIS --- */
/* --- AMIS --- */
.friends-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); 
    gap: 12px; 
    max-height: 250px; /* Un peu plus petit car les icônes prennent moins de place verticale */
    overflow-y: auto;
    padding-right: 6px;
    padding-bottom: 6px; /* Laisse un peu d'air en bas du scroll */
}

/* On applique la même scrollbar discrète que pour les notifications */
.friends-grid::-webkit-scrollbar { width: 5px; }
.friends-grid::-webkit-scrollbar-track { background: transparent; }
.friends-grid::-webkit-scrollbar-thumb { background: var(--dash-border); border-radius: 10px; }
.friends-grid::-webkit-scrollbar-thumb:hover { background: var(--dash-text-muted); }

.friend-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: 0.2s; }
.friend-mini:hover { transform: scale(1.05); }
.friend-mini img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.online-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: var(--dash-success); border: 2px solid var(--dash-white); border-radius: 50%; }
.offline-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: var(--dash-border); border: 2px solid var(--dash-white); border-radius: 50%; }
.friend-name { font-size: 11px; font-weight: 600; color: var(--dash-text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }

/* --- STATS GLOBALES --- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-box { background: var(--dash-gray-light); padding: 16px; border-radius: 16px; text-align: center; border: 1px solid var(--dash-border); }
.stat-value { font-size: 24px; font-weight: 800; color: var(--dash-primary); margin-bottom: 4px; }
.stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--dash-text-muted); }

/* Responsive Mobile 
@media (max-width: 900px) {
    .dashboard-container { grid-template-columns: 1fr; }
    .sidebar { grid-row: 1; }
}*/
/* ==========================================================================
   RESPONSIVE MOBILE (Approche chirurgicale)
   ========================================================================== */
@media (max-width: 900px) {
    .dashboard-container { 
        grid-template-columns: 1fr; 
    }
    
    /* * 1. PAR DÉFAUT : Ordre naturel du HTML. 
     * Le main-content est au-dessus de la sidebar.
     * Parfait pour le Profil et les Détails de Session.
     */
    .main-content { grid-row: 1; }
    .sidebar { grid-row: 2; }

    /* * 2. EXCEPTION : Le Dashboard.
     * Si le container possède la classe .layout-dashboard, on inverse l'ordre.
     */
    .layout-dashboard .sidebar { grid-row: 1; }
    .layout-dashboard .main-content { grid-row: 2; }
}