/* ==========================================================================
   Style général (Corps et Typographie)
   ========================================================================== */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 20px; 
    color: #2c3e50; 
    background-color: #f5f7fa; 
}

h1 { color: #34495e; border-left: 5px solid #3498db; padding-left: 15px; }
h2, h3 { margin-top: 0; color: #34495e; }

/* ==========================================================================
   Composants (Boutons, Badges, Alertes)
   ========================================================================== */
.btn { padding: 8px 15px; border-radius: 4px; text-decoration: none; font-weight: bold; cursor: pointer; border: none; display: inline-block; }
.btn-primary { background: #3498db; color: white; }
.btn-success { background: #27ae60; color: white; }
.btn-outline { background: transparent; border: 1px solid #bdc3c7; color: #7f8c8d; }
.btn-save { padding: 15px 30px; background: #27ae60; color: white; border: none; cursor: pointer; font-size: 1em; border-radius: 5px; font-weight: bold; }
.btn-suggest { background: #3498db; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8em; margin-bottom: 10px; }
.btn-week { padding: 8px 15px; border-radius: 4px; text-decoration: none; color: white; font-weight: bold; }

.badge-salle { background: #ebf8ff; color: #2c5282; padding: 4px 8px; border-radius: 4px; font-weight: bold; border: 1px solid #bee3f8; font-size: 0.9em; }

.alert { padding: 15px; border-radius: 5px; margin-bottom: 20px; font-weight: bold; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ==========================================================================
   Formulaires et Filtres
   ========================================================================== */
.filter-bar { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px; border: 1px solid #e1e8ed; }
label { font-weight: bold; display: block; margin-bottom: 5px; font-size: 0.9em; }
select, input, input[type="date"] { padding: 8px; border: 1px solid #ced4da; border-radius: 4px; margin-right: 10px; box-sizing: border-box; }
.filter-bar select, .filter-bar input[type="date"] { width: auto; }

/* ==========================================================================
   Tables (index.php)
   ========================================================================== */
table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; }
th { background-color: #34495e; color: white; padding: 12px; text-align: left; font-size: 0.85em; text-transform: uppercase; }
td { border-bottom: 1px solid #eee; padding: 12px; vertical-align: top; font-size: 90%; }
tr:hover { background-color: #fcfdfe; }

.prof-resp { color: #2c3e50; font-weight: bold; display: block; margin-bottom: 4px; }
.prof-sub { color: #7f8c8d; font-size: 0.85em; font-style: italic; border-top: 1px solid #f0f0f0; padding-top: 4px; margin-top: 4px; }
.action-links { display: flex; gap: 15px; font-size: 1.2em; }

/* ==========================================================================
   Planification (planning_edit.php)
   ========================================================================== */
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: auto; }
.grid-form select, .grid-form input { width: 100%; padding: 10px; margin-bottom: 15px; margin-right: 0; }
.section { background: white; border: 1px solid #e1e8ed; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.calcul-auto { background: #e8f4fd; border-left: 5px solid #3498db; }

.occ { color: #e74c3c !important; background-color: #ffd7d7 !important; }
option.occ-resp { color: #e74c3c !important; background-color: #ffd7d7 !important; font-weight: bold; }
option.occ-sub { color: #e67e22 !important; background-color: #ffebd7 !important; }
option.classe-ok { color: #27ae60 !important; background-color: #e8f5e9 !important; font-weight: bold; }

/* ==========================================================================
   Calendrier (planning_calendar.php)
   ========================================================================== */
.cal-container { display: flex; flex-direction: row; gap: 15px; padding: 20px; align-items: flex-start; overflow-x: auto; background-color: #f4f7f6; min-height: 100vh; width: max-content; min-width: 100%; }
.time-axis { width: 30px; margin-top: 77px; display: grid; grid-template-rows: repeat(120, 20px); }
.time-label { grid-column: 1; font-size: 0.75em; color: #95a5a6; text-align: right; padding-right: 8px; height: 20px; line-height: 20px; }
.day-column { flex: 0 0 380px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.day-header { text-align: center; padding: 10px; background: #2c3e50; color: white; border-radius: 8px 8px 0 0; font-weight: bold; }
.grid-header { display: grid; grid-template-columns: repeat(4, 1fr); background: #ecf0f1; font-weight: bold; font-size: 0.75em; text-align: center; padding: 5px 0; border-bottom: 1px solid #ddd; }
.grid-body { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(120, 20px); position: relative; background-image: linear-gradient(#eee 1px, transparent 1px); background-size: 100% 20px; }
.slot { font-size: 0.7em; padding: 4px; margin: 1px; z-index: 10; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); grid-row-end: span 2; overflow: hidden; }
.time-tag { display: block; font-weight: bold; color: #2c3e50; border-bottom: 1px solid rgba(0,0,0,0.05); margin-bottom: 2px; font-size: 0.9em; }
.nav-weeks { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }

/* ==========================================================================
   Hub d'Administration (admin.php)
   ========================================================================== */
.hub-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px 0; }
.card { border: 1px solid #ddd; padding: 20px; text-align: center; border-radius: 8px; transition: background 0.3s; text-decoration: none; color: #333; background: white; }
.card:hover { background: #eef2f7; border-color: #3498db; }
.card h3 { margin-top: 0; }