/* static/css/style.css */

/* Définition des Variables CSS pour les Thèmes Clair et Sombre */
:root {
    /* Couleurs du Thème Clair (Par Défaut) */
    --body-bg: #f8f9fa;
    /* Fond de la page */
    --container-bg: #ffffff;
    /* Fond des conteneurs/cartes */
    --text-color: #212529;
    /* Couleur du texte principal */
    --heading-color: #343a40;
    /* Couleur des titres */
    --primary-btn-bg: #007bff;
    /* Fond du bouton primaire */
    --primary-btn-border: #007bff;
    /* Bordure du bouton primaire */
    --primary-btn-hover-bg: #0056b3;
    /* Fond du bouton primaire au survol */
    --primary-btn-hover-border: #0056b3;
    /* Bordure du bouton primaire au survol */
    --card-shadow: rgba(0, 0, 0, 0.05);
    /* Ombre des cartes */
    --footer-bg: #e9ecef;
    /* Fond du pied de page */
    --footer-text-color: #6c757d;
    /* Couleur du texte du pied de page */
    --input-bg: #ffffff;
    /* Fond des champs de saisie */
    --input-border: #ced4da;
    /* Bordure des champs de saisie */
    --input-text: #212529;
    /* Couleur du texte des champs de saisie */
    --alert-danger-bg: #f8d7da;
    /* Fond des alertes danger Django */
    --alert-danger-border: #f5c6cb;
    /* Bordure des alertes danger Django */
    --alert-danger-text: #721c24;
    /* Texte des alertes danger Django */
    --alert-info-bg: #d1ecf1;
    /* Fond des alertes info Django */
    --alert-info-border: #bee5eb;
    /* Bordure des alertes info Django */
    --alert-info-text: #0c5460;
    /* Texte des alertes info Django */
    --alert-success-bg: #d4edda;
    /* Fond des alertes success Django */
    --alert-success-border: #c3e6cb;
    /* Bordure des alertes success Django */
    --alert-success-text: #155724;
    /* Texte des alertes success Django */

    /* --- NOUVELLES VARIABLES POUR LES TABLEAUX (THÈME CLAIR) --- */
    --table-header-bg: #e9ecef;
    /* Fond des en-têtes de tableau */
    --table-border-color: #dee2e6;
    /* Couleur des bordures de tableau */
    --table-hover-bg: #e2e6ea;
    /* Fond au survol des lignes de tableau */
}

/* Couleurs du Thème Sombre */
[data-theme="noir"] body {
    --body-bg: #2c3e50;
    --container-bg: #34495e;
    --text-color: #ecf0f1;
    --heading-color: #ffffff;
    --primary-btn-bg: #4a90e2;
    --primary-btn-border: #4a90e2;
    --primary-btn-hover-bg: #3a7bd5;
    --primary-btn-hover-border: #3a7bd5;
    --card-shadow: rgba(0, 0, 0, 0.2);
    --footer-bg: #212529;
    --footer-text-color: #adb5bd;
    --input-bg: #495057;
    --input-border: #6c7577;
    --input-text: #e2e6ea;
    --alert-danger-bg: #721c24;
    --alert-danger-border: #f5c6cb;
    --alert-danger-text: #f8d7da;
    --alert-info-bg: #0c5460;
    --alert-info-border: #bee5eb;
    --alert-info-text: #d1ecf1;
    --alert-success-bg: #155724;
    --alert-success-border: #c3e6cb;
    --alert-success-text: #d4edda;
    --table-header-bg: #495057;
    --table-border-color: #6c757d;
    --table-hover-bg: #3a4755;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-btn-bg);
    border-color: var(--primary-btn-border);
    color: var(--container-bg);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-btn-hover-bg);
    border-color: var(--primary-btn-hover-border);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--heading-color) !important;
}

/* Réduire l'épaisseur de la navbar */
.navbar {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.navbar-brand img {
    max-height: 32px !important;
}

.navbar-nav .nav-link {
    font-size: 0.9rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

[data-theme="noir"] .navbar-light.bg-light {
    background-color: var(--container-bg) !important;
    color: var(--text-color);
}

[data-theme="noir"] .navbar-light .navbar-nav .nav-link {
    color: var(--text-color);
}

[data-theme="noir"] .navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary-btn-bg);
}

.messages-container {
    padding-top: 15px;
}

.alert {
    margin-bottom: 15px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-text);
}

.footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text-color);
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Identical variable definitions removed from here */


.container,
.main-card-container {
    background-color: var(--container-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--card-shadow);
    margin-top: 30px;
    margin-bottom: 30px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* Transition douce */
}

/* Styles pour les titres */
h1,
h2,
h3,
h4,
h5,
h6 {
    /* Ajouté h4, h5, h6 pour la cohérence */
    color: var(--heading-color);
    margin-bottom: 20px;
    transition: color 0.3s ease;
    /* Transition douce */
}

/* Boutons personnalisés */
.btn-primary {
    background-color: var(--primary-btn-bg);
    border-color: var(--primary-btn-border);
    color: var(--container-bg);
    /* Couleur du texte des boutons pour assurer le contraste */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-btn-hover-bg);
    border-color: var(--primary-btn-hover-border);
}

/* Barre de navigation (assurez-vous qu'elle s'adapte si elle n'est pas explicitement stylisée avec les classes Bootstrap dark/light) */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--heading-color);
    /* Ajuster la couleur du logo/nom */
}

/* Si votre navbar utilise .navbar-light .bg-light, vous devrez peut-être la surcharger pour le mode sombre */
body.dark-mode .navbar-light.bg-light {
    background-color: var(--container-bg) !important;
    /* Fond de barre de navigation plus sombre */
    color: var(--text-color);
}

body.dark-mode .navbar-light .navbar-nav .nav-link {
    color: var(--text-color);
}

body.dark-mode .navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary-btn-bg);
}


/* Style des messages Django */
.messages-container {
    padding-top: 15px;
}

.alert {
    margin-bottom: 15px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-text);
}

/* Pied de page */
.footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text-color);
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Champs de saisie (Input/Textarea/Select) */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    /* Assurer que les états de focus respectent également le thème */
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Couleur du texte de l'espace réservé (placeholder) */
[data-theme="noir"] input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="noir"] textarea::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #aeb9c4;
    opacity: 1;
}



/* --- AJOUTS POUR LES TABLEAUX --- */
/* Appliquer la couleur de texte principale aux tableaux et leurs cellules */
.table {
    color: var(--text-color);
    /* Applique la couleur du texte à l'ensemble du tableau */
    border-color: var(--table-border-color);
    /* Applique la couleur de bordure */
    transition: border-color 0.3s ease;
}

.table th {
    background-color: var(--table-header-bg);
    /* Fond des en-têtes de tableau */
    color: var(--text-color);
    /* Assure que le texte des en-têtes est correct */
    border-color: var(--table-border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.table td {
    color: var(--text-color);
    /* Assure que le texte des cellules est correct */
    border-color: var(--table-border-color);
    transition: border-color 0.3s ease;
}

/* Optionnel: Style au survol des lignes si vous utilisez .table-hover */
.table-hover tbody tr:hover {
    background-color: var(--table-hover-bg);
}

/* Ajustements pour les bordures Bootstrap si elles ne s'adaptent pas */
.table> :not(caption)>*>* {
    border-bottom-width: 1px;
    border-color: var(--table-border-color);
}

/* --- FIN AJOUTS POUR LES TABLEAUX --- */