/* public/css/style.css */

/* Styles généraux pour le corps de la page */
body {
    background-color: #f4f7f6; /* Fond légèrement gris pour le corps */
    color: #333;
    font-family: 'Inter', sans-serif; /* Police par défaut, assurez-vous qu'elle est chargée ou utilisez une alternative */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Permet au contenu principal de prendre l'espace disponible, poussant le footer en bas */
}

/* Styles pour la section de sélection de date et le titre sur index.php */
.date-selector-header .card.shadow-sm {
    border: none; 
}
.date-selector-header .form-label.me-2.mb-0.text-nowrap { /* Style pour le label du sélecteur de date */
    font-weight: 500;
    color: #495057;
}
.date-selector-header .form-control-sm { /* Style pour le champ de date */
    border-radius: 0.25rem; 
}
.date-selector-header .btn-primary { /* Style pour le bouton "Afficher" (même s'il est caché) */
    background-color: #0056b3; 
    border-color: #0056b3;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.date-selector-header .btn-primary:hover {
    background-color: #004085;
    border-color: #00376e;
}
.date-selector-header .d-flex.justify-content-between.align-items-center {
    gap: 1rem; 
}


/* Styles pour la table d'horaire (#horaire-patrouilles) sur index.php */
#horaire-patrouilles {
    border-radius: .375rem; /* Coins arrondis pour la table entière */
    overflow: hidden; /* Pour que les coins arrondis de la table s'appliquent à l'en-tête */
    border: 1px solid #dee2e6; /* Bordure subtile pour la table */
    border-collapse: separate; /* Nécessaire pour border-spacing et les coins arrondis sur thead */
    border-spacing: 0;
}

#horaire-patrouilles th, 
#horaire-patrouilles td {
    vertical-align: middle; 
    border-color: #e9ecef; /* Lignes de séparation plus claires */
}

#horaire-patrouilles thead th { 
    background-color: #343a40; /* Fond sombre pour l'en-tête */
    color: white;
    position: sticky; 
    top: 0; 
    z-index: 10; /* Au-dessus des cellules du corps */
    font-weight: 500; /* Police un peu moins grasse pour l'en-tête */
    padding: 0.75rem 0.5rem; /* Plus de padding dans l'en-tête */
    border-bottom-width: 2px; /* Bordure inférieure plus épaisse pour l'en-tête */
}

/* Première colonne de l'en-tête (Date) */
#horaire-patrouilles thead th.sticky-col.first-col-header {
    position: sticky;
    left: 0;
    z-index: 11; /* Au-dessus des autres en-têtes et des cellules du corps */
    background-color: #343a40; /* Doit avoir un fond pour cacher le contenu qui défile */
    border-right: 1px solid #495057; /* Ligne de séparation plus visible */
    border-top-left-radius: .375rem; /* Assurer l'arrondi */
}
/* S'assurer que l'arrondi droit est appliqué à la dernière cellule de l'en-tête si elle n'est pas la première */
#horaire-patrouilles thead th:last-child:not(.first-col-header) {
    border-top-right-radius: .375rem;
}


/* Première colonne du corps (Blocs Horaires) */
#horaire-patrouilles tbody td.sticky-col.first-col-body {
    position: sticky;
    left: 0;
    background-color: #f8f9fa !important; /* Fond pour cacher le contenu qui défile, important pour surcharger */
    font-weight: 600;
    min-width: 180px; 
    padding: 0.6rem 0.5rem;
    border-right: 1px solid #dee2e6; 
    z-index: 5; /* Au-dessus des cellules normales du corps mais sous l'en-tête sticky */
}

/* Styles pour les boutons dans la table d'horaire */
#horaire-patrouilles .btn { 
    font-size: 0.8rem; 
    padding: 0.4rem 0.6rem; 
    line-height: 1.3; 
    white-space: normal; 
    width: 100%; 
    min-height: 42px; 
    border-radius: 0.25rem; 
    font-weight: 500;
    transition: all 0.2s ease-in-out; 
}
#horaire-patrouilles .btn:hover:not(:disabled) { 
    transform: translateY(-1px); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#horaire-patrouilles .btn-outline-success { border-color: #198754; color: #198754; }
#horaire-patrouilles .btn-outline-success:hover { background-color: #198754; color: white; }
#horaire-patrouilles .btn-info { background-color: #0dcaf0; border-color: #0dcaf0; color: #000;}
#horaire-patrouilles .btn-info:hover { background-color: #0baccc; border-color: #0baccc; color: #000;}
#horaire-patrouilles .btn-warning { background-color: #ffc107; border-color: #ffc107; color: #000;}
#horaire-patrouilles .btn-warning:hover { background-color: #e0a800; border-color: #e0a800; color: #000;}
#horaire-patrouilles .btn-danger { background-color: #dc3545; border-color: #dc3545; }
#horaire-patrouilles .btn-secondary, 
#horaire-patrouilles .btn-outline-secondary.disabled { /* Pour le bouton "Passé" et "Voitures Max" */
    background-color: #6c757d; 
    border-color: #6c757d; 
    color:white;
}
/* Style spécifique pour le bouton "Passé" qui est outline-secondary et disabled */
#horaire-patrouilles .btn-outline-secondary.disabled { 
    color: #6c757d; 
    background-color: #e9ecef; 
    border-color: #ced4da;
} 

/* Conteneur de la table responsive */
.table-responsive { 
    max-height: calc(100vh - 280px); /* Ajuster la hauteur max */
    border-radius: .375rem; /* Coins arrondis pour le conteneur scrollable */
    /* overflow: auto; est déjà une classe Bootstrap, mais on s'assure */
}

/* Informations sur les patrouilleurs sous les boutons */
.patrouilleurs-info { 
    color: #495057; 
    padding: 0.25rem 0; 
    font-size:0.78rem; 
    line-height: 1.3; 
    min-height: 2.6em; /* Pour aligner même si vide */
}
.patrouilleurs-info .text-success { color: #198754 !important; } 
.patrouilleurs-info .text-warning { color: #ffc107 !important; } /* Si vous l'utilisez */
.patrouilleurs-info .text-muted { color: #6c757d !important; }


/* Styles pour la page profil.php */
.profile-page-card { /* Classe à ajouter aux cartes de la page profil si besoin de styles spécifiques */
    border: none; 
    border-radius: 0.5rem; 
}
.profile-page-card .card-header {
    background-color: #6c757d; 
    color: white;
    border-bottom: none;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
}
.profile-page-card .card-header h4 {
    font-weight: 500; 
}
.profile-page-card .list-group-item {
    background-color: #fff; 
    border-color: #e9ecef; 
}
.profile-page-card .table-sm th, 
.profile-page-card .table-sm td {
    padding: 0.5rem; 
}
.stat-card { /* Carte spécifique pour les statistiques sur profil.php */
    background-color: #e9f5ff; 
    border-left: 5px solid #007bff; 
}
.stat-card .card-header {
    background-color: #007bff !important; /* Important pour surcharger le style général .card-header */
    color:white !important;
}
.stat-card p {
    margin-bottom: 0.5rem;
}

/* Styles pour la section admin (général) */
.admin-section .card {
    margin-bottom: 1.5rem;
}
.admin-section .card-header {
    background-color: #f8f9fa; /* Fond clair pour les en-têtes de carte admin */
    border-bottom: 1px solid #dee2e6;
}
.admin-section .card-header h2, .admin-section .card-header h4 {
    color: #343a40; /* Texte plus foncé pour les titres admin */
}

/* Styles pour les formulaires admin */
.admin-form label {
    font-weight: 500;
}

/* Footer (pour s'assurer qu'il est en bas) */
footer.bg-light {
    /* background-color: #f8f9fa !important; est déjà une classe bootstrap */
    /* Si vous avez besoin de forcer le footer en bas et que main flex:1 ne suffit pas, */
    /* vous pourriez avoir besoin d'une structure HTML/CSS plus complexe pour le "sticky footer". */
    /* Pour l'instant, avec main flex:1, cela devrait bien fonctionner sur la plupart des pages. */
}