:root { --twitch-color: #9146FF; --bg-dark: #0f0f0f; --card-bg: #1a1a1a; }
body { font-family: 'Poppins', sans-serif; background: var(--bg-dark); color: white; margin: 0; display: flex; min-height: 100vh; }
        
/* Sidebar */
.sidebar { width: 250px; background: var(--card-bg); border-right: 1px solid #333; padding: 20px; display: flex; flex-direction: column; }
.sidebar h1 { font-size: 1.2rem; color: var(--twitch-color); margin-bottom: 30px; }
.nav-link { color: #bbb; text-decoration: none; padding: 10px; border-radius: 5px; margin-bottom: 5px; display: block; }
.nav-link:hover, .nav-link.active { background: #252525; color: white; }

/* Main Content */
.main-content { flex: 1; padding: 30px; overflow-y: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { background: var(--card-bg); padding: 20px; border-radius: 12px; border-left: 4px solid var(--twitch-color); }
.stat-card h3 { margin: 0; font-size: 0.8rem; color: #888; text-transform: uppercase; }
.stat-card p { margin: 10px 0 0; font-size: 1.8rem; font-weight: bold; }
        
.admin-only { border-color: #ff4b4b; } /* Différencier les widgets admin */
    

.filter-btn { 
    color: #888; 
    text-decoration: none; 
    font-size: 0.75rem; 
    padding: 4px 10px; 
    border: 1px solid #333; 
    border-radius: 4px; 
    transition: 0.2s;
}
.filter-btn:hover { border-color: var(--twitch-color); color: white; }
.filter-btn.active { background: var(--twitch-color); color: white; border-color: var(--twitch-color); }

/* Styles pour les boutons de filtres (PHP/JS) */
.btn-filter, .btn-time {
    background: #252525;
    color: #888;
    border: 1px solid #333;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-filter:hover, .btn-time:hover {
    border-color: #444;
    color: white;
}

/* État actif pour les boutons (géré par ton JS) */
.btn-time.active {
    background: var(--twitch-color) !important;
    color: white !important;
    border-color: var(--twitch-color) !important;
}

/* Conteneur pour aligner les boutons proprement */
.chart-filters, .time-filters {
    display: flex;
    gap: 8px;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* --- RESPONSIVE GENERAL --- */

@media (max-width: 1050px) {

    body { flex-direction: column !important; }
    /* 1. On transforme la sidebar en barre de navigation horizontale en haut */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        flex-direction: row !important;
        padding: 10px !important;
        justify-content: space-around;
    }

    .sidebar h1, .sidebar img, .sidebar p { display: none; } /* Cache le logo/photo sur mobile pour gagner de la place */

    /* 2. On annule la marge de gauche du contenu principal */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }

    /* 3. On force l'empilement des colonnes dans view_user.php */
    .user-grid { 
        grid-template-columns: 1fr !important; 
    }

    /* 4. On remet le stream en dessous du contenu sur mobile */
    .sticky-stream {
        position: static !important;
        order: 2;
    }
}

@media (max-width: 600px) {
    /* Réseaux sur 2 colonnes au lieu de 3 sur petit tel */
    .networks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}