/* Ce que le suivi de metrologie ajoute a style.css (copie de web/suivi-cv-hemostase/). Memes variables,
   memes filets : rien ici ne redefinit une couleur de l'ecran. */

/* `hidden` doit gagner sur le display des boutons et des onglets de style.css : sans cette regle, les gestes
   d'ecriture restaient visibles sans habilitation (trouve par F11-H2). */
[hidden] { display: none !important; }

.bandeau-essai {
  margin: 0;
  padding: 8px 20px;
  background: var(--surveillance-fond);
  color: var(--surveillance);
  border-bottom: 2px solid var(--surveillance-vif);
  font-size: 14px;
}

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* --- Compteurs d'echeances, cliquables : ils posent le filtre ------------- */

.compteurs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.compteur {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--bord); border-left-width: 4px;
  border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.compteur strong { font-size: 20px; }
.compteur:hover { background: var(--accent-doux); }
.compteur:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compteur.critique { border-left-color: var(--critique-vif); }
.compteur.surveillance { border-left-color: var(--surveillance-vif); }
.compteur.succes { border-left-color: var(--succes-vif); }
.compteur.accent { border-left-color: var(--accent); }

/* Le tableau des echeances se lit de gauche a droite : du texte, pas des chiffres a aligner. */
#tableau-echeances th, #tableau-echeances td { text-align: left; vertical-align: top; white-space: normal; }
#tableau-echeances td:nth-child(1), #tableau-echeances td:nth-child(5), #tableau-echeances td:nth-child(6), #tableau-echeances td:nth-child(7) { white-space: nowrap; }
#tableau-echeances td:nth-child(2) { min-width: 190px; }

tr.cliquable { cursor: pointer; }
tr.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
td .meta, td .meta { font-size: 12.5px; }
.texte-critique { color: var(--critique); }
.texte-surveillance { color: var(--surveillance); }
.texte-succes { color: var(--succes); }
.texte-accent { color: var(--accent); }

/* --- Fiche --------------------------------------------------------------- */

.grille-fiche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px 18px;
  align-items: start;
}
.grille-fiche .champ { display: flex; flex-direction: column; gap: 4px; }
.grille-fiche .champ.case { flex-direction: row; align-items: center; }
.grille-fiche .champ small { font-size: 12px; }
.grille-fiche textarea { min-height: 64px; }
.grille-fiche input[type=number], .grille-fiche input[type=date] {
  font: inherit; padding: 6px 8px; border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit);
  background: var(--surface); color: var(--texte);
}
.grille-fiche .pleine, .actions-fiche { grid-column: 1 / -1; }
.actions-fiche { display: flex; gap: 10px; }
.remarque { margin: 8px 0 0; padding: 8px 10px; background: var(--surface-2); border-radius: var(--rayon-petit); font-size: 14px; }

.bloc-qr .qr-ecran { width: 132px; height: 132px; margin: 6px 0 8px; background: #fff; padding: 6px; }
.bloc-qr .qr-ecran svg { width: 100%; height: 100%; display: block; }

ul.liens { margin: 0; padding-left: 18px; }
ul.liens li { margin: 4px 0; }

.intervention { padding: 12px 0; border-top: 1px solid var(--bord); }
.intervention:first-of-type { border-top: none; }
.intervention-tete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.intervention p { margin: 6px 0; }
.intervention-visa { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.actions-visa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions-visa input { min-width: 260px; }
table.petit { width: auto; margin: 8px 0; font-size: 13.5px; }

.avertissement { border-left: 4px solid var(--surveillance-vif); }
.avertissement p { margin: 0; }

/* --- Affichages CO-MAT-ENR-011 -------------------------------------------
   Invisibles a l'ecran : ils ne se construisent qu'au moment d'imprimer. Trois par A4 portrait, comme le
   formulaire de Kalilab, chacun dans son cadre pour etre decoupe. */

#planches { display: none; }

.page-a4 { break-after: page; page-break-after: always; }
.page-a4:last-child { break-after: auto; page-break-after: auto; }

.affichage {
  box-sizing: border-box;
  height: 90mm;
  margin: 0 0 3mm;
  padding: 3mm;
  border: 0.4mm dashed #888;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  color: #000;
  break-inside: avoid;
}

.affichage table { border-collapse: collapse; width: 100%; }
.affichage-tete td { border: 0.3mm solid #8c8c8c; padding: 1.5mm; vertical-align: middle; text-align: center; height: 19mm; }
.affichage-logo { width: 26%; }
.affichage-logo img { max-width: 100%; max-height: 15mm; }
.affichage-titre { color: #1f3864; font-size: 10pt; }
.affichage-titre .grand { font-size: 12pt; color: #000; margin-top: 1mm; }
.affichage-ref { width: 22%; font-size: 8.5pt; color: #1f3864; line-height: 1.25; }

.affichage-corps { display: flex; gap: 3mm; margin-top: 2.5mm; align-items: stretch; }
.affichage-lignes { flex: 1; }
.affichage-lignes th, .affichage-lignes td {
  border: 0.3mm solid #b4c7e7; padding: 0 2mm; height: 9.4mm; font-size: 10pt; text-align: left; vertical-align: middle;
  position: static; background: none; color: #000; border-radius: 0; text-transform: none; letter-spacing: 0;
}
.affichage-lignes th { width: 44%; color: #2e74b5; font-weight: 700; text-align: center; }
.affichage-lignes tr:nth-child(even) th, .affichage-lignes tr:nth-child(even) td { background: #deebf7; }
.affichage-lignes td { font-weight: 600; }

.affichage-qr { width: 36mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.affichage-qr svg { width: 32mm; height: 32mm; display: block; }
.legende-qr { font-size: 7.5pt; margin-top: 1.5mm; color: #1f3864; }

@media print {
  body.impression-affichages .bandeau,
  body.impression-affichages .bandeau-essai,
  body.impression-affichages .onglets,
  body.impression-affichages .sans-impression { display: none !important; }
  body.impression-affichages #planches { display: block; }
  body.impression-affichages main { padding: 0; margin: 0; }
  .affichage-lignes tr:nth-child(even) th, .affichage-lignes tr:nth-child(even) td {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  @page { size: A4 portrait; margin: 9mm 10mm; }
}

/* Ajout d'un rapport a la main (0185). */
.ajout-rapport { margin-top: 12px; border-top: 1px solid var(--bordure, #d8dee8); padding-top: 10px; }
.ajout-rapport summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }