/* ==================================== */
/* DOCUMENT PANEL - COLPOSCOPIE         */
/* Overrides de document-panel.css,     */
/* charge avant par colposcopie.html    */
/* ==================================== */

/* ==================================== */
/* COLPOSCOPIE SPECIFIC OVERRIDES       */
/* ==================================== */

/* Fiche patient styles */
.fiche-form {
  background: var(--bg-canvas);
}

/* ==================================== */
/* PREVIEW OVERLAY (scanner)            */
/* Sans ces regles, l'image se rend a sa taille naturelle (4961x7016)
   et les overlays % deviennent inexploitables. Aligne avec Senologie
   et avec print-preview.js / getPrintStyles(). */
/* ==================================== */

.scanner-preview-overlay {
  position: relative;
  width: 100%;
  max-width: min(800px, 100%);
  margin: 0 auto;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.scanner-bg-image {
  width: 100%;
  height: auto;
  display: block;
}

.scanner-data-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Multi-volet : chaque page est son propre contexte de positionnement
   pour que .scanner-data-overlay s'aligne sur son <img> frere. */
.multi-volet-preview .scanner-preview-page {
  position: relative;
}

.scanner-field {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #000;
  line-height: 1.2;
  overflow: hidden;
}

.scanner-check,
.form-overlay-check {
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  line-height: 1;
}

.scanner-signature-img {
  position: absolute;
  object-fit: contain;
}

/* ==================================== */
/* EDITION SUR L'IMAGE (editOnImage)    */
/* Les previewPositions sont en % de l'image : les tailles des champs
   suivent la largeur de l'image (cqw), référence 800px (1.375cqw = 11px,
   le texte de l'aperçu). Le champ reste sur sa ligne du document à toute
   largeur (téléphone, zoom). La marge négative (bordure + padding) pose le
   texte saisi en (top, left), là où l'aperçu et l'impression l'écrivent. */
/* ==================================== */

.scanner-preview-overlay.editable-overlay {
  container-type: inline-size;
}

.editable-overlay .on-image-input,
.editable-overlay .on-image-textarea {
  font-size: 1.375cqw;
  padding: 0.125cqw 0.375cqw;
  margin: calc(-1px - 0.125cqw) 0 0 calc(-1px - 0.375cqw);
}

/* Image étroite (téléphone) : l'icône de calendrier ou d'horloge, de taille
   fixe, tronquerait la date ; le sélecteur natif s'ouvre au toucher. */
@container (max-width: 480px) {
  .editable-overlay .on-image-input::-webkit-calendar-picker-indicator {
    display: none;
  }
}

/* Case et bouton radio centrés en (left + 0.625cqw, top + 0.625cqw) : à
   800px, le carré de 14px décalé de 2px du style commun. 10px au moins pour
   rester cochables sur téléphone, toujours centrées sur le carré imprimé. */
.editable-overlay .on-image-checkbox,
.editable-overlay .on-image-radio {
  width: max(1.75cqw, 10px);
  height: max(1.75cqw, 10px);
  transform: translate(calc(0.625cqw - 50%), calc(0.625cqw - 50%));
}