/* ==========================================================================
   Impression — la feuille du papier.
   ==========================================================================
   Deux matériels, deux mises en page, jamais une seule redimensionnée :

     - le ROULEAU 80 mm de l'imprimante thermique du comptoir. Largeur fixe,
       hauteur libre, pas de marge machine, pas de couleur, pas d'aplat : la
       tête chauffe le papier, un fond gris sort noir et use le rouleau.
     - la FEUILLE A4 en noir et blanc, portrait ou paysage, pour ce qui part
       chez un tiers : grossiste, CNAMGS, inspecteur.

   Tout est en niveaux de gris et en traits : l'officine imprime en
   monochrome, et une couleur qui porte du sens deviendrait un gris illisible.

   La taille de page (`@page`) ne peut pas dépendre d'une classe CSS : elle est
   posée juste avant l'impression par `impression.js`, qui injecte la règle
   correspondant au document en cours.
   ========================================================================== */

/* --------------------------------------------------------------- communs */

.kp-doc {
  color: #000;
  background: #fff;
  font-family: "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  line-height: 1.35;
}

/* Les chiffres d'une colonne de prix doivent s'aligner verticalement : sans
   chiffres tabulaires, « 1 111 » est plus étroit que « 8 888 » et la colonne
   se met à onduler. */
.kp-doc .kp-montant,
.kp-doc .kp-nb {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kp-doc table { width: 100%; border-collapse: collapse; }
.kp-doc th, .kp-doc td { vertical-align: top; text-align: left; }
.kp-doc .kp-gras { font-weight: 700; }
.kp-doc .kp-machine { font-family: Consolas, "DejaVu Sans Mono", monospace; }
.kp-doc .kp-centre { text-align: center; }
.kp-doc .kp-muet { color: #444; }

/* ================================================================ ROULEAU */

.kp-doc-rouleau {
  width: 80mm;
  padding: 3mm 3mm 8mm;   /* le bas nourrit la coupe du massicot */
  font-family: Consolas, "DejaVu Sans Mono", monospace;
  font-size: 11px;
  line-height: 1.3;
}

.kp-doc-rouleau .kp-ticket-entete { text-align: center; }
.kp-doc-rouleau .kp-ticket-officine { font-size: 14px; font-weight: 700; }
.kp-doc-rouleau .kp-regle { border-top: 1px dashed #000; margin: 4px 0; }
.kp-doc-rouleau .kp-regle-pleine { border-top: 1px solid #000; margin: 4px 0; }

.kp-doc-rouleau table { font-size: 11px; }
.kp-doc-rouleau th, .kp-doc-rouleau td { padding: 1px 0; border: 0; }
.kp-doc-rouleau thead th { border-bottom: 1px solid #000; font-weight: 700; }

/* Un nom de produit long — « AMOXICILLINE/ACIDE CLAVULANIQUE 500/62,5 mg » —
   dépasse largement 80 mm. Il se coupe et retombe à la ligne : le tronquer
   ferait délivrer la mauvaise boîte au prochain contrôle du ticket. */
.kp-doc-rouleau .kp-article {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kp-doc-rouleau .kp-ticket-total { font-size: 13px; font-weight: 700; }
.kp-doc-rouleau .kp-ticket-pied { margin-top: 6px; text-align: center; font-size: 10px; }

/* Un avoir n'est pas un ticket : il se voit au premier coup d'œil, sans lire
   les montants négatifs. */
.kp-doc-rouleau .kp-bandeau-avoir {
  border: 2px solid #000;
  padding: 2px 0;
  margin: 4px 0;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
}

/* ==================================================================== A4 */

.kp-doc-a4, .kp-doc-a4-paysage {
  font-size: 10.5pt;
  padding: 0;
}
.kp-doc-a4-paysage { font-size: 9pt; }

.kp-doc-a4 .kp-entete, .kp-doc-a4-paysage .kp-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10mm;
  border-bottom: 2px solid #000;
  padding-bottom: 3mm;
  margin-bottom: 5mm;
}
.kp-doc .kp-entete-nom { font-size: 15pt; font-weight: 700; letter-spacing: .3px; }
.kp-doc .kp-entete-legal { font-size: 8pt; line-height: 1.5; }
.kp-doc .kp-entete-droite { text-align: right; }
.kp-doc .kp-titre-doc { font-size: 13pt; font-weight: 700; text-transform: uppercase; }
.kp-doc .kp-reference { font-size: 10pt; }

.kp-doc .kp-blocs {
  display: flex;
  gap: 6mm;
  margin-bottom: 5mm;
}
.kp-doc .kp-bloc {
  flex: 1;
  border: 1px solid #000;
  padding: 2.5mm 3mm;
}
.kp-doc .kp-bloc-titre {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: .6px;
  border-bottom: 1px solid #000;
  margin-bottom: 1.5mm;
  padding-bottom: 1mm;
}

.kp-doc .kp-tableau th, .kp-doc .kp-tableau td {
  border: 1px solid #000;
  padding: 1.2mm 1.8mm;
}
.kp-doc .kp-tableau thead th {
  background: #e8e8e8;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: .4px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Deux cents lignes font cinq pages : sans cela, les colonnes des pages 2 à 5
   n'ont plus de nom et le document devient illisible au guichet. */
.kp-doc .kp-tableau thead { display: table-header-group; }
.kp-doc .kp-tableau tfoot { display: table-footer-group; }
.kp-doc .kp-tableau tr { page-break-inside: avoid; break-inside: avoid; }

.kp-doc .kp-totaux {
  margin-top: 4mm;
  margin-left: auto;
  width: 80mm;
}
.kp-doc .kp-totaux td { padding: 1mm 1.8mm; border: 1px solid #000; }
.kp-doc .kp-totaux .kp-ligne-total { font-weight: 700; font-size: 12pt; }

/* Le cadre que le guichet remplit à la main : il doit rester vide et avoir la
   place d'un cachet humide, sinon il finit signé dans la marge. */
.kp-doc .kp-cadres { display: flex; gap: 6mm; margin-top: 8mm; }
.kp-doc .kp-cadre {
  flex: 1;
  border: 1px solid #000;
  min-height: 30mm;
  padding: 2mm 3mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.kp-doc .kp-cadre-titre { font-size: 8pt; text-transform: uppercase; letter-spacing: .6px; }

.kp-doc .kp-mention {
  margin-top: 6mm;
  border: 1px solid #000;
  padding: 2mm 3mm;
  font-size: 8.5pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.kp-doc .kp-pied-doc {
  margin-top: 5mm;
  border-top: 1px solid #000;
  padding-top: 1.5mm;
  font-size: 8pt;
  display: flex;
  justify-content: space-between;
}

/* La case où l'on écrit au crayon, dans les rayons. Elle est large exprès :
   un chiffre écrit debout devant une étagère n'est pas un chiffre soigné. */
.kp-doc .kp-case-comptage {
  border: 1px solid #000;
  height: 7mm;
  min-width: 22mm;
}

.kp-doc .kp-vide {
  border: 1px dashed #000;
  padding: 6mm;
  text-align: center;
  font-style: italic;
}

/* ============================================================ impression */

@media print {
  /* Ces trois-là sont déjà posées par `app.css` ; on les répète parce que
     l'ordre de chargement des feuilles ne doit pas décider si la navigation
     s'imprime ou non. */
  html, body { height: auto; overflow: visible; background: #fff; }
  body > * { display: none !important; }
  .zone-impression { display: block !important; }

  .zone-impression .kp-doc { width: auto; }
  .zone-impression .kp-doc-rouleau { width: auto; padding: 0 0 8mm; }

  a[href]::after { content: none !important; }   /* pas d'URL greffée aux liens */
}

/* ================================================= aperçu à l'écran */

/* Le même document, vu dans une fenêtre avant d'engager du papier. Fond blanc
   et texte noir même en thème sombre : on montre la feuille, pas l'écran. */
.kp-apercu {
  background: #fff;
  color: #000;
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--trait, #ccc);
  padding: 6mm;
}
.kp-apercu .kp-doc-rouleau { margin: 0 auto; border: 1px solid #ddd; }