/* ═══════════════════════════════════════════════════════════════════════
   CONGES.CSS — Module « Congés & couverture » (Bloc 2)
   ─────────────────────────────────────────────────────────────────────
   Grille d'équipe : lignes = personnes, colonnes = jours. Les couleurs
   portent du sens (absence / demande / fermeture / non travaillé) et ne
   sont jamais le SEUL porteur de l'information — un title au survol
   redit toujours en clair ce que la couleur suggère.
   ═════════════════════════════════════════════════════════════════════ */

.cg-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.cg-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--wood-dark);
  margin-bottom: 12px;
}

.cg-vide {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ─── Barre d'outils ─────────────────────────────────────────────── */
.cg-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cg-nav, .cg-actions { display: flex; align-items: center; gap: 8px; }
.cg-periode {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 6px;
  white-space: nowrap;
}
.cg-filtre { max-width: 220px; }

/* ─── File des demandes en attente ───────────────────────────────── */
.cg-attente { border-left: 3px solid var(--orange); }
.cg-attente-liste { display: flex; flex-direction: column; }
.cg-attente-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.cg-attente-ligne:first-child { border-top: none; }
.cg-attente-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-attente-nom { font-size: 14px; font-weight: 600; color: var(--text); }
.cg-attente-detail { font-size: 13px; color: var(--text-muted); }
.cg-attente-meta { font-size: 11px; color: var(--text-muted); }
.cg-attente-com {
  font-size: 12px;
  color: var(--text);
  background: var(--wood-pale);
  border-radius: 6px;
  padding: 5px 9px;
  margin-top: 3px;
  max-width: 460px;
}
.cg-attente-btns { display: flex; gap: 6px; flex-shrink: 0; }

/* ─── Légende ────────────────────────────────────────────────────── */
.cg-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.cg-lg {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: 4px;
}
.cg-lg-abs   { background: var(--accent); }
.cg-lg-prev  { background: repeating-linear-gradient(45deg, var(--accent) 0 3px, var(--accent-soft) 3px 6px); }
.cg-lg-ferme { background: var(--wood-light); }
.cg-lg-off   { background: var(--wood-pale); border: 1px solid var(--border); }
.cg-lg-txt b { color: var(--text); }

/* ─── Grille ─────────────────────────────────────────────────────── */
.cg-grille-wrap { overflow-x: auto; }

/* La largeur des colonnes vient du <colgroup> posé par conges.js, et la
   largeur totale d'un style en ligne sur la table. NE PAS remettre width:100%
   ici : avec table-layout:fixed, le navigateur retomberait sur la première
   ligne (celle des mois, faite de colspan) pour deviner les largeurs — c'est
   exactement le défaut corrigé le 23/07, colonne des noms démesurée et jours
   illisibles. */
.cg-grille {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  table-layout: fixed;
}

.cg-grille th, .cg-grille td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
  text-align: center;
  height: 26px;
  overflow: hidden;
}

.cg-th-nom, .cg-td-nom {
  text-align: left !important;
  padding: 0 8px !important;
  position: sticky;
  left: 0;
  background: var(--white);
  z-index: 3;
  border-left: 1px solid var(--border);
  box-shadow: 1px 0 0 var(--border);
}

.cg-th-mois th {
  background: var(--wood-pale);
  font-size: 11px;
  font-weight: 600;
  color: var(--wood-dark);
  height: 22px;
}
.cg-th-jours th {
  background: var(--wood-bg);
  font-weight: 500;
  color: var(--text-muted);
  height: 22px;
}

.cg-td-nom {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cg-aussi {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

.cg-groupe td {
  background: var(--wood-pale);
  text-align: left;
  padding: 4px 10px !important;
  font-size: 11px;
  font-weight: 600;
  color: var(--wood-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  height: 22px;
  position: sticky;
  left: 0;
}
.cg-groupe-n { font-weight: 400; color: var(--text-muted); text-transform: none; }

/* États d'une cellule — l'ordre compte : absence par-dessus fermeture. */
.cg-off   { background: var(--wood-pale); }
.cg-ferme { background: var(--wood-light); }
.cg-auj   { box-shadow: inset 0 0 0 2px var(--orange); }

.cg-abs      { background: var(--accent); }
.cg-abs-prev { background: repeating-linear-gradient(45deg, var(--accent) 0 3px, var(--accent-soft) 3px 6px); }

/* Demi-journées : la moitié de la cellule seulement */
.cg-demi-m { background: linear-gradient(to bottom, var(--accent) 0 50%, transparent 50% 100%); }
.cg-demi-a { background: linear-gradient(to bottom, transparent 0 50%, var(--accent) 50% 100%); }

/* Zone cliquable d'une cellule occupée */
.cg-pt { display: block; width: 100%; height: 100%; cursor: pointer; }

.cg-pastille {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  vertical-align: 1px;
}
.cg-prod { background: var(--green-soft); color: var(--green); }
.cg-renf { background: var(--accent-soft); color: var(--accent); }

.cg-aide {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.6;
}

/* ─── Mobile : la grille reste consultable, en défilement ─────────── */
@media (max-width: 768px) {
  .cg-toolbar { flex-direction: column; align-items: stretch; }
  .cg-nav, .cg-actions { justify-content: space-between; }
  .cg-filtre { max-width: none; flex: 1; }
  .cg-th-nom, .cg-td-nom { width: 128px !important; min-width: 128px; }
  .cg-attente-ligne { flex-direction: column; align-items: stretch; }
  .cg-attente-btns { justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VUE COUVERTURE & ALERTES (Bloc 3)
   ═════════════════════════════════════════════════════════════════════ */

.cg-onglets {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cg-onglet {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.cg-onglet:hover { color: var(--text); }
.cg-onglet.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.cg-alertes-titre {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.cg-alertes-titre b { color: var(--red); }
.cg-calcule { margin-left: auto; font-size: 11px; }

.cg-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px;
  font-size: 14px;
  color: var(--green);
}
.cg-ok i { font-size: 20px; }

.cg-alerte {
  display: flex;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  margin-bottom: 9px;
  background: var(--wood-bg);
}
.cg-alerte.cg-rouge { border-left-color: var(--red); }
.cg-alerte.cg-ambre { border-left-color: var(--orange); }
.cg-alerte.cg-info  { border-left-color: var(--accent); }

.cg-alerte-ico { font-size: 19px; flex-shrink: 0; margin-top: 1px; color: var(--text-muted); }
.cg-rouge .cg-alerte-ico { color: var(--red); }
.cg-ambre .cg-alerte-ico { color: var(--orange); }
.cg-info  .cg-alerte-ico { color: var(--accent); }

.cg-alerte-corps { flex: 1; min-width: 0; }
.cg-alerte-titre { font-size: 14px; font-weight: 600; color: var(--text); }
.cg-alerte-detail { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 3px; }

.cg-barre {
  height: 6px;
  background: var(--wood-pale);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 9px;
}
.cg-barre-in { height: 100%; background: var(--orange); }
.cg-barre-txt { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.cg-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cg-puce {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--wood-pale);
  color: var(--text);
}
.cg-puce-plus { color: var(--text-muted); }

.cg-renforts {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cg-renforts-titre { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.cg-renfort-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  border-top: 1px solid var(--border);
}
.cg-renfort-ligne:first-of-type { border-top: none; }
.cg-renfort-dep { color: var(--text-muted); font-size: 12px; }

.cg-tag { font-size: 11px; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.cg-tag-vert  { background: var(--green-soft); color: var(--green); }
.cg-tag-rouge { background: #FBEAEA; color: var(--red); }

/* Grille de couverture : le chiffre EST l'information, la couleur l'appuie. */
.cg-cv { font-size: 11px; color: var(--text); text-align: center; }
.cg-cv-vert  { background: var(--green-soft); }
.cg-cv-ambre { background: #FBF0DC; }
.cg-cv-rouge { background: #FBEAEA; color: var(--red); font-weight: 700; }
.cg-cv-cap td { font-weight: 600; background: var(--wood-bg); }
.cg-cv-cap .cg-td-nom { font-weight: 600; }

.cg-lg-vert  { background: var(--green-soft); border: 1px solid var(--green); }
.cg-lg-ambre { background: #FBF0DC; border: 1px solid var(--orange); }
.cg-lg-rouge { background: #FBEAEA; border: 1px solid var(--red); }

/* Bandeau de capacité perdue (correctif 23/07) */
.cg-capa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.cg-capa-bloc {
  background: var(--wood-bg);
  border-radius: 8px;
  padding: 12px 14px;
}
.cg-capa-n { font-size: 22px; font-weight: 600; color: var(--wood-dark); }
.cg-capa-l { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

.cg-avert {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: #FBF0DC;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
}
.cg-avert i { font-size: 17px; color: var(--orange); flex-shrink: 0; }

/* Mobilisations (23/07) : la décision de renfort, visible en vert */
.cg-mob { background: var(--green); }
.cg-lg-mob { background: var(--green); }
.cg-renfort-droite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }