/* Feuille de style de l'application de gestion des absences */
:root {
  --bleu: #1e5fa8;
  --bleu-fonce: #164579;
  --gris-clair: #f4f6f9;
  --gris: #dbe1e8;
  --texte: #1f2a37;
  --rouge: #c0392b;
  --vert: #1e8449;
  --orange: #b9770e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--gris-clair);
  color: var(--texte);
}

.cache { display: none !important; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bleu);
  color: #fff;
  padding: 0.6rem 1.2rem;
}
header h1 { font-size: 1.15rem; margin: 0; }
#entete-info { display: flex; gap: 0.6rem; align-items: center; }
#entete-enseignant { font-weight: 600; }

/* Zone de contenu : large pour que tous les onglets tiennent sur une ligne,
   mais bornée pour rester lisible sur très grand écran */
main { max-width: 1400px; width: 96%; margin: 1.2rem auto; padding: 0 1rem; }

.carte {
  background: #fff;
  border: 1px solid var(--gris);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.carte-centree { max-width: 420px; margin: 8vh auto; text-align: center; }

.aide { color: #5b6b7c; font-size: 0.88rem; }
.erreur { color: var(--rouge); font-weight: 600; }
.succes { color: var(--vert); font-weight: 600; }
.avertissement { color: var(--orange); font-weight: 600; }

input, select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--gris);
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  margin: 0.3rem 0 0.9rem;
}
label { display: block; text-align: left; font-size: 0.92rem; margin-top: 0.7rem; }
label input[type="checkbox"] { width: auto; margin-right: 0.4rem; }

/* Boutons de validation d'un formulaire : bien détachés des champs au-dessus */
.carte > .btn-principal,
.carte > .liste-boutons-ligne { margin-top: 1.3rem; }
.carte h3 { margin: 0 0 0.8rem; }
.carte h3 + .aide { margin-top: 0; }
.carte + .carte { margin-top: 1.2rem; }

button, a.btn-secondaire {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  padding: 0.55rem 1rem;
  text-decoration: none;
  display: inline-block;
}
.btn-principal { background: var(--bleu); color: #fff; font-weight: 600; }
.btn-principal:hover { background: var(--bleu-fonce); }
.btn-secondaire { background: #fff; color: var(--bleu); border: 1px solid var(--bleu); }
.btn-secondaire:hover { background: #eaf1fa; }

.liste-boutons { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.liste-boutons button { background: #fff; border: 1px solid var(--gris); padding: 0.8rem; font-size: 1rem; }
.liste-boutons button:hover { border-color: var(--bleu); background: #eaf1fa; }
.btn-mode small { color: #5b6b7c; }
.liste-boutons-ligne { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.1rem; }

/* Deux champs côte à côte dans un formulaire (Nom/Prénom, Début/Fin) :
   même espacement vertical qu'un champ simple */
.ligne-champs { display: flex; gap: 1rem; }
.ligne-champs label { flex: 1; }

/* Choix du type de contrat (fiche étudiant) */
.champ-contrat {
  border: 1px solid var(--gris);
  border-radius: 6px;
  margin: 0.7rem 0 0.3rem;
  padding: 0.4rem 0.8rem 0.7rem;
  text-align: left;
}
.champ-contrat legend { font-size: 0.92rem; padding: 0 0.3rem; }
.radio-contrat { margin-top: 0.35rem; font-size: 0.92rem; }
.radio-contrat input { width: auto; margin: 0 0.4rem 0 0; }

/* Calendrier FullCalendar */
#calendrier {
  background: #fff;
  border: 1px solid var(--gris);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --fc-button-bg-color: var(--bleu);
  --fc-button-border-color: var(--bleu);
  --fc-button-hover-bg-color: var(--bleu-fonce);
  --fc-button-hover-border-color: var(--bleu-fonce);
  --fc-button-active-bg-color: var(--bleu-fonce);
  --fc-button-active-border-color: var(--bleu-fonce);
  --fc-today-bg-color: #eaf1fa;
  --fc-border-color: var(--gris);
  font-size: 0.88rem;
}
#calendrier .fc-toolbar-title { font-size: 1.15rem; text-transform: capitalize; }
#calendrier .fc-event { border-radius: 5px; }

/* Vue Liste : en-têtes de jour bien lisibles (bandeau bleu clair, texte foncé) */
#calendrier .fc-list-day-cushion { background: #dde9f6; }
#calendrier .fc-list-day-text,
#calendrier .fc-list-day-side-text {
  color: var(--bleu-fonce);
  font-weight: 700;
  text-decoration: none;
  text-transform: capitalize;
}
#calendrier .fc-list-event:hover td { background: #eaf1fa; }
.creneau-cliquable { cursor: pointer; }
.creneau-cliquable:hover { filter: brightness(1.12); }
/* Sans appel : le fond clair + texte foncé suffit à les distinguer,
   pas de transparence (elle rendait le texte illisible) */
.creneau-sans-appel { cursor: default; }
/* Cours futur : appel pas encore possible (jour même ou passé uniquement).
   Transparence modérée pour rester lisible */
.creneau-futur { cursor: not-allowed; opacity: 0.72; }

/* Légende sous le calendrier : toutes les couleurs sur une même ligne */
.legendes {
  display: flex;
  flex-wrap: wrap;            /* ne passe à la ligne que si l'écran est trop étroit */
  align-items: center;
  gap: 0.4rem 1.4rem;
  margin-top: 0.5rem;
  color: #5b6b7c;
  font-size: 0.88rem;
}
.legende { white-space: nowrap; }
.pastille { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; vertical-align: -1px; margin-right: 0.25rem; }
.p-cours { background: #1e5fa8; }
.p-td { background: #148f77; }
.p-tp { background: #558b2f; }
.p-examen { background: #b9770e; }
.p-soutenance { background: #7d3c98; }
.p-conference { background: #c2185b; }
.p-atelier { background: #8d6e63; }
.p-entreprise { background: #cfd8dc; border: 1px solid #90a4ae; }
.p-cite { background: #adc3d1; border: 1px solid #7fa1b5; }
.p-conge { background: #e8eaed; border: 1px solid #b6bcc4; }
/* Catégories habituellement sans appel : grisées dans la légende */
.legende.estompe { opacity: 0.65; }

/* Appel : deux colonnes Présent / Absent, choix explicite pour chaque étudiant */
.ligne-appel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.4rem;
  border-bottom: 1px solid var(--gris-clair);
}
.ligne-appel:hover { background: var(--gris-clair); }
.entete-appel { font-weight: 700; font-size: 0.85rem; color: #5b6b7c; }
.entete-appel:hover { background: transparent; }
.appel-nom { flex: 1; display: flex; align-items: baseline; gap: 0.6rem; }
.appel-col { width: 88px; text-align: center; flex-shrink: 0; }
.numero-etudiant { color: #7a8794; font-size: 0.82rem; }

.choix-present, .choix-absent {
  width: 64px;
  padding: 0.3rem 0;
  border: 1.5px solid var(--gris);
  border-radius: 6px;
  background: #fff;
  color: #98a4b0;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.choix-present:hover { border-color: var(--vert); color: var(--vert); }
.choix-absent:hover { border-color: var(--rouge); color: var(--rouge); }
.choix-present.actif { background: var(--vert); border-color: var(--vert); color: #fff; }
.choix-absent.actif { background: var(--rouge); border-color: var(--rouge); color: #fff; }

/* Fond de ligne selon le statut : vert pâle présent, rouge pâle absent */
.ligne-presente { background: #edf6ef; }
.ligne-presente:hover { background: #e2f0e5; }
.ligne-absente { background: #fdeaea; }
.ligne-absente:hover { background: #f9dcdc; }

/* Tableaux : défilement horizontal si l'écran est trop étroit */
div[id^="tableau-"] { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; font-size: 0.9rem; }
th, td { padding: 0.5rem 0.7rem; text-align: left; border-bottom: 1px solid var(--gris-clair); }
th { background: var(--bleu); color: #fff; font-weight: 600; }
tr:hover td { background: var(--gris-clair); }
.statut-injustifiee { color: var(--rouge); font-weight: 700; }
.statut-justifiee { color: var(--vert); font-weight: 700; }

/* Emails envoyés : les mails d'une même absence partagent un fond uniforme,
   qui alterne entre deux teintes d'une absence à l'autre */
tr.bloc-absence-a td { background: #eaf3fb; }
tr.bloc-absence-b td { background: #fdf4e5; }
tr.bloc-absence-a:hover td { background: #dcebf8; }
tr.bloc-absence-b:hover td { background: #f9ecd2; }
td.actions button { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

/* Onglets */
.onglets { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.onglet {
  background: #fff; border: 1px solid var(--gris);
  border-radius: 6px 6px 0 0; padding: 0.55rem 1rem;
  white-space: nowrap;   /* un libellé d'onglet ne se coupe jamais en deux lignes */
}
.onglet.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); font-weight: 600; }

/* Barres de filtres : champs et boutons alignés sur la même ligne de base */
.barre-filtres {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;   /* les boutons s'alignent sur le bas des champs */
  margin-bottom: 1.2rem;
}
.barre-filtres label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.85rem;
  color: #5b6b7c;
}
.barre-filtres input,
.barre-filtres select { width: auto; margin: 0; }
.barre-filtres button,
.barre-filtres a.btn-secondaire { margin: 0; }

/* Espace entre les barres d'action et les tableaux qui suivent */
#tableau-creneaux, #tableau-absences, #tableau-etudiants,
#tableau-apercu, #tableau-notifications, #tableau-audit { margin-top: 1.2rem; }

/* Modale */
.modale {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.modale-contenu {
  max-width: 430px;
  width: 92%;
  max-height: 90vh;      /* la fenêtre défile si l'écran est petit */
  overflow-y: auto;
}

textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--gris);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  margin: 0.3rem 0 0.8rem;
  resize: vertical;
}
.carte-modele { margin-bottom: 1rem; }

/* Graphiques de la vue d'ensemble */
.grille-graphiques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.graphique-large { grid-column: 1 / -1; }
.carte-graphique { margin: 0 !important; }
.zone-canvas { position: relative; height: 260px; }
/* Graphique par étudiant : hauteur proportionnelle à l'effectif,
   avec défilement vertical au-delà de 420 px pour rester compact */
.defilement-graph { max-height: 420px; overflow-y: auto; }
@media (max-width: 800px) {
  .grille-graphiques { grid-template-columns: 1fr; }
}

/* Texte des fenêtres de confirmation (respecte les retours à la ligne) */
.confirm-texte { white-space: pre-line; }

pre.corps-mail {
  white-space: pre-wrap;
  background: var(--gris-clair);
  padding: 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  margin: 0.3rem 0 0;
}

/* ── Adaptation à la résolution de l'écran ──────────────────────────────── */

/* Écrans moyens (petit portable, tablette paysage) : les onglets deviennent
   une barre défilante horizontale plutôt que de passer sur deux lignes */
@media (max-width: 1100px) {
  .onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }
  .onglet { flex-shrink: 0; }
}

/* Tablettes et téléphones */
@media (max-width: 800px) {
  main { width: 100%; padding: 0 0.6rem; }
  header { flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 0.8rem; }
  header h1 { font-size: 1rem; }
  .carte { padding: 1rem; }
  .carte-centree { margin: 4vh auto; }

  /* Barre d'outils du calendrier empilée pour rester lisible */
  #calendrier { padding: 0.5rem; font-size: 0.8rem; }
  #calendrier .fc-header-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  #calendrier .fc-toolbar-title { text-align: center; font-size: 1rem; }

  /* Filtres et boutons en colonne, pleine largeur (confort tactile) */
  .barre-filtres { align-items: stretch; flex-direction: column; gap: 0.6rem; }
  .barre-filtres input, .barre-filtres select { width: 100%; }
  .liste-boutons-ligne button { flex: 1; }
  th, td { padding: 0.4rem 0.5rem; font-size: 0.82rem; }
  .appel-col { width: 64px; }
  .choix-present, .choix-absent { width: 54px; }
}