/* Tableau de bord des collecteurs — complète `commun.css`, ne la remplace pas.
 *
 * 🔴 Aucun CDN, aucune bibliothèque de graphiques : le serveur tourne hors ligne chez
 * Guillaume, et une balise <script src="https://…"> y afficherait une page morte. Le
 * graphique est du SVG engendré côté serveur (`tableau_bord.histogramme_svg`).
 *
 * 🔴 Le vert est RÉSERVÉ à `ok`. Une source « partielle » est orange, jamais verte :
 * c'est la couleur qui porte la nuance que le mot ne suffit pas à imposer.
 */

/* ── Ce que nous ne voyons pas ─────────────────────────────────────────────── */

#lacunes { border-left: 4px solid var(--orange); padding-left: 14px }

table.lacunes { width: 100%; border-collapse: collapse; margin-top: 10px }
table.lacunes caption {
  text-align: left; color: var(--orange); font-weight: 600; padding-bottom: 6px;
}
table.lacunes th, table.lacunes td {
  text-align: left; vertical-align: top; padding: 5px 10px 5px 0;
  border-top: 1px solid var(--trait); font-weight: 400;
}
table.lacunes th { white-space: nowrap; font-weight: 600 }
table.lacunes .quoi { color: var(--orange); white-space: nowrap }
table.lacunes .detail { color: var(--gris) }

#lacunes .rien { color: var(--gris) }

/* ── Portails ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 12px; white-space: nowrap; border: 1px solid transparent;
}
.badge-ok       { background: #e3efe9; color: var(--vert); border-color: #bcd8cd }
.badge-partiel  { background: #fbf0d9; color: var(--orange); border-color: #e8d0a0 }
.badge-echec    { background: #f8e2e0; color: var(--alerte); border-color: #e7bab5 }
.badge-jamais_vue { background: #eceae6; color: var(--gris); border-color: var(--trait) }

tr.etat-partiel th[scope="row"]    { color: var(--orange) }
tr.etat-echec th[scope="row"]      { color: var(--alerte) }
tr.etat-jamais_vue th[scope="row"] { color: var(--gris) }

td.nombre { text-align: right; font-variant-numeric: tabular-nums }
td.date   { white-space: nowrap; color: var(--gris) }
td.detail { color: var(--gris); font-size: 12.5px; max-width: 34em }
.tronque  { color: var(--orange) }
.sur      { color: var(--gris); font-weight: 400 }

/* ── Acquisition ───────────────────────────────────────────────────────────── */

svg.histogramme { width: 100%; height: auto; display: block; margin: 6px 0 4px }
svg.histogramme .grille { stroke: var(--trait); stroke-width: 1 }
svg.histogramme .axe { fill: var(--gris); font-size: 11px }
svg.histogramme rect { shape-rendering: crispEdges }

.vide { color: var(--gris); padding: 24px 0 }

ul.legende {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px;
}
ul.legende li { display: flex; align-items: center; gap: 6px }
.pastille {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none;
}

/* ── Passes annexes ────────────────────────────────────────────────────────── */

.cartes {
  display: grid; gap: 14px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.carte {
  border: 1px solid var(--trait); border-radius: 6px; padding: 12px 14px;
  background: #fff;
}
.carte h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600 }
.carte .chiffre {
  margin: 0; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.carte .reste { margin: 4px 0 0; font-size: 12px; color: var(--orange) }
.carte .aide { margin: 6px 0 0; font-size: 11.5px; color: var(--gris) }

.jauge {
  height: 5px; background: var(--trait); border-radius: 3px; overflow: hidden;
  margin-top: 8px;
}
.jauge-remplie { height: 100%; background: var(--vert) }