/* piece.css — IDENTITE VISUELLE DES PIECES EXTERIA (ecran), alignee sur les PDF approuves.
 *
 * Objectif : une meme presentation entre le PDF et l'ecran pour devis, commandes client et
 * fournisseur, bons de livraison, factures et avoirs. Les valeurs reprennent EXACTEMENT la palette
 * de `app/pieces_pdf.py` : un seul vocabulaire graphique, aucune divergence possible.
 *
 *   --piece-bleu        #4d7ca8   titres (BLEU_DOUX)
 *   --piece-entete      #dde8f5   bandeau des tableaux (FOND_ENTETE)
 *   --piece-entete-txt  #2b5a86   texte du bandeau (TEXTE_ENTETE)
 *   --piece-gris        #6b7280   texte secondaire (GRIS)
 *   --piece-gris-clair  #f3f5f8   encadres dates/statut (GRIS_CLAIR)
 *   --piece-bordure     #d7dde5   bordures (BORDURE)
 *   --piece-ligne-alt   #fbfcfe   lignes alternees du tableau
 *   --piece-total       #e6eef7   mise en evidence du total TTC
 *
 * REGLE DE NON-REGRESSION : ce fichier ne touche NI aux formulaires, NI aux boutons, NI aux calculs.
 * Il habille ; il ne remplace aucun comportement. Les controles de saisie restent des controles
 * standards, seulement re-alignes pour tenir dans la presentation du document.
 */

.piece {
  --piece-bleu: #4d7ca8;
  --piece-entete: #dde8f5;
  --piece-entete-txt: #2b5a86;
  --piece-gris: #6b7280;
  --piece-gris-clair: #f3f5f8;
  --piece-bordure: #d7dde5;
  --piece-ligne-alt: #fbfcfe;
  --piece-total: #e6eef7;

  background: #fff;
  border: 1px solid var(--piece-bordure);
  border-radius: 6px;
  padding: 22px 24px 26px;
  margin-bottom: 18px;
}

/* --- Titre bleu centre + numero, comme l'en-tete du PDF --- */
.piece__titre {
  margin: 0;
  text-align: center;
  color: var(--piece-bleu);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .3px;
}
.piece__numero {
  margin: 2px 0 14px;
  text-align: center;
  color: var(--piece-gris);
  font-size: 13px;
}

/* --- Bandeau dates / statut : trois cases encadrees sur fond gris clair --- */
.piece__bandeau {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--piece-bordure);
  background: var(--piece-gris-clair);
  border-radius: 4px;
  overflow: hidden;
}
.piece__case {
  padding: 7px 10px;
  border-right: 1px solid var(--piece-bordure);
  font-size: 12px;
  line-height: 1.5;
}
.piece__case:last-child { border-right: 0; }
.piece__case-label {
  display: block;
  color: var(--piece-gris);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 10.5px;
}
.piece__case-valeur { color: #1f2937; }

/* --- Blocs emetteur / destinataire --- */
.piece__blocs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}
.piece__bloc-titre {
  margin: 0 0 4px;
  color: var(--piece-bleu);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.piece__bloc { font-size: 13px; line-height: 1.65; color: #1f2937; }
.piece__bloc strong { color: #111827; }
.piece__bloc .piece__petit { color: var(--piece-gris); font-size: 11.5px; }

/* --- Encadres Livraison / Reference chantier / rubriques annexes --- */
.piece__modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--piece-bordure);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 14px;
}
.piece__module {
  padding: 8px 10px;
  border-right: 1px solid var(--piece-bordure);
  font-size: 12.5px;
  line-height: 1.6;
}
.piece__module:last-child { border-right: 0; }

/* --- Titre de section bleu --- */
.piece__section-titre {
  margin: 18px 0 8px;
  color: var(--piece-bleu);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* --- Tableau des lignes : bandeau bleu clair, alternance, bordures fines --- */
.piece__tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.piece__tableau thead th {
  background: var(--piece-entete);
  color: var(--piece-entete-txt);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  text-align: left;
  padding: 7px 9px;
  border: 1px solid var(--piece-bordure);
  white-space: nowrap;
}
.piece__tableau tbody td {
  padding: 7px 9px;
  border: 1px solid var(--piece-bordure);
  vertical-align: top;
}
.piece__tableau tbody tr:nth-child(odd) { background: #fff; }
.piece__tableau tbody tr:nth-child(even) { background: var(--piece-ligne-alt); }
.piece__tableau .piece__num { text-align: right; white-space: nowrap; }
.piece__tableau .piece__ref { color: var(--piece-gris); font-size: 11.5px; }
.piece__tableau .piece__ref-ligne { display: block; margin-top: 2px; }

/* --- Totaux : detail TVA a gauche, recapitulatif mis en evidence a droite --- */
.piece__totaux {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: 18px;
  margin-top: 14px;
  align-items: start;
}
.piece__recap {
  border: 1px solid var(--piece-bordure);
  border-radius: 4px;
  overflow: hidden;
  font-size: 13px;
}
.piece__recap-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--piece-bordure);
  background: var(--piece-gris-clair);
}
.piece__recap-ligne:last-child { border-bottom: 0; }
.piece__recap-ligne--total {
  background: var(--piece-total);
  font-weight: 700;
  font-size: 15px;
  color: #12324f;
}
.piece__recap-ligne--acompte { background: #fff; color: var(--piece-gris); }

/* --- Notes et conditions commerciales --- */
.piece__notes {
  margin-top: 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--piece-bleu);
  background: var(--piece-gris-clair);
  font-size: 12px;
  color: #374151;
  line-height: 1.6;
}
.piece__conditions { margin-top: 10px; font-size: 12px; color: var(--piece-gris); line-height: 1.6; }

/* --- Bloc signature : cadre vide, comme le « Bon pour accord » du PDF --- */
.piece__signature-mention { margin: 18px 0 6px; font-size: 13px; color: #374151; }
.piece__signature {
  min-height: 64px;
  border: 1px solid var(--piece-bordure);
  border-radius: 4px;
  max-width: 340px;
}

/* --- Barre d'actions de l'ecran (absente du PDF : elle n'existe qu'a l'ecran) --- */
.piece__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.piece__edition {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--piece-bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.piece__edition .form-group { margin-bottom: 0; }
.piece__edition .ligne-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
}

/* --- Adapte aux ordinateurs ET aux tablettes --- */
@media (max-width: 1024px) {
  .piece__totaux { grid-template-columns: 1fr; }
  .piece__recap { max-width: 420px; margin-left: auto; }
}
@media (max-width: 820px) {
  .piece { padding: 16px 14px 20px; }
  .piece__titre { font-size: 22px; }
  .piece__bandeau { grid-template-columns: 1fr; }
  .piece__case { border-right: 0; border-bottom: 1px solid var(--piece-bordure); }
  .piece__case:last-child { border-bottom: 0; }
  .piece__blocs, .piece__modules { grid-template-columns: 1fr; }
  .piece__module { border-right: 0; border-bottom: 1px solid var(--piece-bordure); }
  .piece__module:last-child { border-bottom: 0; }
  .piece__tableau { font-size: 12px; }
  .piece__tableau thead th, .piece__tableau tbody td { padding: 5px 6px; }
}

/* --- Impression : l'ecran doit ressembler au PDF aussi sur papier --- */
@media print {
  .piece { border: 0; padding: 0; }
  .piece__actions, .piece__edition, .navbar, .app-bar, .tous-modules { display: none !important; }
}

/* --- BL : colonnes de stock -----------------------------------------------------------
   Les trois cellules de stock (physique / reserve / disponible) doivent rester des <td>
   NUS : la recette (test_delivery_stock_isolated.py) porte sur cette structure exacte, et
   c'est aussi ce que produisait la page generee en Python avant extraction. L'alignement
   a droite ne peut donc pas passer par la classe .piece__num : il est porte par la POSITION
   des colonnes (4, 5 et 6 du tableau des lignes). Verifie a l'ecran, en mobile et a
   l'impression : nombres alignes et non tronques. */
.piece__tableau--bl tbody td:nth-child(4),
.piece__tableau--bl tbody td:nth-child(5),
.piece__tableau--bl tbody td:nth-child(6) {
  text-align: right;
  white-space: nowrap;
}
@media print {
  .piece__tableau--bl tbody td:nth-child(4),
  .piece__tableau--bl tbody td:nth-child(5),
  .piece__tableau--bl tbody td:nth-child(6) { text-align: right; }
}