/* Styles personnalisés de l'application */

/* ==========================================
   1. HARMONISATION GLOBALE & ARRIÈRE-PLAN
   ========================================== */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f8f9fa; /* Un gris très clair, plus doux pour les yeux que le blanc pur */
    color: #2d3748; /* Un gris foncé presque noir, plus moderne */
}

/* ==========================================
   2. STYLISATION & SURVOL DES BOUTONS (Hover)
   ========================================== */
.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px); /* Le bouton monte légèrement au survol */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* L'ombre s'accentue */
}

/* ==========================================
   3. ARRONDI ET OMBRES DES CARTES (Cards)
   ========================================== */
.card {
    border: none !important;
    border-radius: 12px !important; /* Angles arrondis plus doux */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; /* Légère ombre pour donner du relief */
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important; /* L'ombre s'accentue au survol de la carte */
}

.card-header {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    font-weight: 600;
}

/* ==========================================
   4. DESIGN DES TABLEAUX (Dash DataTable)
   ========================================== */
/* Arrondit les angles du conteneur de tes tableaux de membres, stars et utilisateurs */
.dash-spreadsheet-container {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    background-color: white;
}

/* Force un effet visuel de survol de ligne (hover) très propre et interactif */
.dash-spreadsheet tr:hover td {
    background-color: #f7fafc !important; /* Un bleu-gris très léger */
    color: #1a202c !important;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Style élégant pour les lignes sélectionnées dans les tableaux */
.dash-spreadsheet tr.selected td {
    background-color: #edf2f7 !important;
    font-weight: bold;
}

/* ==========================================
   5. PERSONNALISATION DE LA SCROLLBAR
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* Pour la scrollbar horizontale des tableaux sur mobile */
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ==========================================
   6. OPTIMISATIONS POUR TÉLÉPHONES (Mobile)
   ========================================== */
@media (max-width: 768px) {
    /* Donne un peu plus de hauteur aux boutons sur mobile pour faciliter le clic au pouce */
    .btn {
        padding: 10px 18px !important;
    }
    
    /* Évite que les tableaux ne collent trop aux bords de l'écran tactile */
    .dash-spreadsheet-container {
        margin-left: 2px;
        margin-right: 2px;
    }
}