/* ============================================================
   Feuille de style de l'application "Demande de congés".
   Uniquement de la mise en forme : aucune logique ici.
   ============================================================ */

/* Variables de couleurs, réutilisées partout via var(--nom) */
:root {
  --bleu:#17278c;   /* couleur principale (titres, boutons) */
  --bg:#f4f6fb;     /* fond de page */
  --card:#fff;      /* fond des blocs */
  --bd:#d7dced;     /* couleur des bordures */
  --txt:#1c2536;    /* texte courant */
  --mut:#6b7488;    /* texte secondaire (libellés) */
}

* { box-sizing:border-box; } /* la largeur inclut bordures + padding */

body {
  margin:0;
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.4;
}

/* Bandeau bleu en haut de page */
header { background:var(--bleu); color:#fff; padding:22px 24px; margin-left:220px; }
header h1 { margin:0; font-size:20px; }
header p  { margin:4px 0 0; opacity:.85; font-size:13px; }

/* Conteneur centré */
.wrap { max-width:920px; margin:0 auto; padding:20px 16px 60px; margin-left:220px; }

/* Barre de navigation : colonne fixe sur la gauche */
nav.navbar {
  background:#0f1d66; display:flex; flex-direction:column; gap:4px;
  padding:24px 0; flex-wrap:nowrap;
  position:fixed; top:0; left:0; bottom:0; width:220px; overflow-y:auto;
}
nav.navbar a {
  color:#cfd6f5; text-decoration:none; font-size:14px; font-weight:600;
  padding:12px 20px; border-bottom:none; border-left:3px solid transparent;
}
nav.navbar a:hover { color:#fff; }
nav.navbar a.active { color:#fff; border-left-color:#fff; background:rgba(255,255,255,.08); }

/* Blocs encadrés (Agent, Périodes, Signature) */
fieldset { background:var(--card); border:1px solid var(--bd); border-radius:12px;
           margin:16px 0; padding:16px 18px; }
legend { font-weight:700; color:var(--bleu); padding:0 6px; font-size:14px; }

/* Zone dangereuse (config.html : réinitialisation complète des données). */
fieldset.zone-danger { border-color:#f3c3ca; background:#fff8f9; }
fieldset.zone-danger legend { color:#a3253a; }

/* Grilles responsives : g4 = 4 colonnes, g3 = 3, g2 = 2 */
.grid { display:grid; gap:12px 16px; }
.g4 { grid-template-columns:repeat(4,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g2 { grid-template-columns:repeat(2,1fr); }
.full { grid-column:1/-1; } /* occupe toute la largeur de la grille */

/* Champs de saisie */
label { display:block; font-size:12px; color:var(--mut); margin-bottom:4px; font-weight:600; }
input, select { width:100%; padding:8px 10px; border:1px solid var(--bd); border-radius:8px;
                font-size:14px; background:#fff; color:var(--txt); }
input:focus, select:focus { outline:2px solid var(--bleu); outline-offset:0; border-color:var(--bleu); }
/* Champs verrouillés (identité auto-remplie depuis un compte connecté). */
input[readonly] { background:#eef1fa; color:var(--mut); }

/* Bloc "période" répété (jusqu'à 5 fois) */
.periode { border:1px solid var(--bd); border-radius:10px; padding:14px; margin-bottom:12px; background:#fbfcfe; }
.periode h3 { margin:0 0 10px; font-size:13px; color:var(--bleu); display:flex; justify-content:space-between; }
.rm { background:none; border:none; color:#b23; cursor:pointer; font-size:12px; font-weight:600; }

/* Boutons */
.btn { border:none; border-radius:9px; padding:11px 18px; font-size:14px; font-weight:700; cursor:pointer; }
.btn-p { background:var(--bleu); color:#fff; }   /* bouton principal */
.btn-s { background:#eef1fa; color:var(--bleu); } /* bouton secondaire */

/* Barre de boutons alignés */
.bar { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.hint { font-size:12px; color:var(--mut); margin-top:6px; }

/* Sur petit écran : grilles sur 2 colonnes */
@media(max-width:680px){ .g4,.g3,.g2{grid-template-columns:1fr 1fr;} }

/* --- Marquage des jours dans le calendrier (flatpickr) --- */
/* Jours fériés : en rouge, avec une infobulle (title) donnant leur nom. */
.flatpickr-day.jour-ferie { color:#c0263a; font-weight:700; background:#fde8ea; }
.flatpickr-day.jour-ferie:hover { background:#f8d3d9; }
/* Week-ends : légèrement grisés (sauf s'ils sont sélectionnés/dans la plage). */
.flatpickr-day.jour-weekend:not(.selected):not(.startRange):not(.endRange):not(.inRange) { color:#aab0c0; }

/* --- Liste des demandes (page Validation) --- */
.demande-item { border:1px solid var(--bd); border-radius:10px; padding:14px;
                margin-bottom:12px; background:#fbfcfe; }
.demande-titre { font-weight:700; font-size:14px; }
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px;
         border-radius:999px; margin-left:6px; vertical-align:middle; }
.badge-encours  { background:#fff3d6; color:#8a5a00; }
.badge-validee  { background:#dcf6e3; color:#1a7a3c; }
.badge-refusee  { background:#fde2e5; color:#a3253a; }

/* --- Grille du calendrier mensuel (page Calendrier) --- */
.calendrier-grille { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:14px; }
.cg-entete { text-align:center; font-size:11px; font-weight:700; color:var(--mut); padding:4px 0; }
.cg-jour { min-height:64px; border:1px solid var(--bd); border-radius:8px; padding:6px;
           background:#fbfcfe; font-size:12px; }
.cg-jour.cg-hors-mois { background:transparent; border-color:transparent; }
.cg-jour.cg-weekend { background:#f1f3f9; }
.cg-jour.cg-ferie { background:#fde8ea; border-color:#f3c3ca; }
.cg-num { font-weight:700; color:var(--txt); }
.cg-jour.cg-ferie .cg-num { color:#c0263a; }
.cg-nom-ferie { font-size:10px; color:#c0263a; }
.cg-conges { margin-top:4px; display:flex; flex-direction:column; gap:2px; }
.cg-conge { font-size:10px; padding:1px 5px; border-radius:6px; overflow:hidden;
            text-overflow:ellipsis; white-space:nowrap; }
.cg-conge.cg-validee { background:#dcf6e3; color:#1a7a3c; }
.cg-conge.cg-encours { background:#fff3d6; color:#8a5a00; }

/* Légende du calendrier */
.legende { font-size:12px; color:var(--mut); display:inline-flex; align-items:center; gap:6px; }
.pastille { width:10px; height:10px; border-radius:3px; display:inline-block; }
.pastille-validee { background:#3fae63; }
.pastille-encours { background:#e0a721; }
.pastille-ferie { background:#c0263a; }

/* Sur petit écran : la grille passe sur une seule colonne, les cases s'étirent */
@media(max-width:680px){
  .calendrier-grille { grid-template-columns:repeat(7,1fr); gap:3px; }
  .cg-jour { min-height:52px; padding:4px; font-size:11px; }
}

/* Sur petit écran : la barre latérale redevient une barre horizontale en haut */
@media(max-width:680px){
  nav.navbar { position:static; flex-direction:row; flex-wrap:wrap; width:auto; padding:0 8px; }
  nav.navbar a { border-left:none; border-bottom:3px solid transparent; padding:12px 14px; }
  nav.navbar a.active { border-left-color:transparent; border-bottom-color:#fff; }
  header, .wrap { margin-left:0; }
}

/* --- Liste des congés (page Calendrier) : une ligne compacte par demande --- */
.conge-ligne { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
               border:1px solid var(--bd); border-radius:10px; padding:10px 14px;
               margin-bottom:8px; background:#fbfcfe; }
.conge-nom { font-weight:700; font-size:13px; white-space:nowrap; }
.conge-detail { font-size:12px; color:var(--mut); white-space:nowrap; }
.conge-ligne .btn { padding:6px 12px; font-size:12px; margin-left:auto; }
@media(max-width:680px){
  .conge-ligne { flex-direction:column; align-items:flex-start; gap:6px; }
  .conge-ligne .btn { margin-left:0; }
}

/* --- Pavé de signature (canvas) --- */
.sig-pad {
  width:100%; max-width:500px; height:150px; display:block;
  border:1px dashed var(--bd); border-radius:8px; background:#fff;
  cursor:crosshair;         /* curseur "stylo" à la souris */
  touch-action:none;        /* empêche le défilement pendant qu'on dessine au doigt */
}