/* styles-distribution.css — styles des sept écrans du pivot (lot G).
 *
 * Ce fichier ne définit QUE des classes préfixées « pv- » (pivot), plus un repli pour
 * `.btn-danger` utilisé par les modales de confirmation. Il ne redéfinit aucune classe
 * de styles.css : les jetons de couleur, la carte, les boutons, les tables et les champs
 * viennent de là, cet écran ne fait que les assembler.
 *
 * Mobile-first : tout est en une colonne par défaut ; les grilles n'apparaissent qu'à
 * partir de 880 px, comme le reste de l'application. Le gérant est souvent sur son téléphone.
 */

/* ---------- repli : bouton destructeur ---------- */
.btn-danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn-danger:hover { background: #9c332a; border-color: #9c332a; }

/* ---------- blocs ---------- */
.pv-bloc { padding: 14px; margin-bottom: 14px; }
.pv-bloc-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.pv-bloc-tete h4 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.pv-meta { font-size: 12px; color: var(--ink-faint); }
.pv-sku { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: normal; }
.pv-note { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0; line-height: 1.45; }
.pv-note-cle { color: var(--accent-600); font-weight: 600; }
.pv-note-l { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; white-space: normal; }
.pv-erreur {
  font-size: 12.5px; color: var(--crit); background: var(--crit-bg);
  border-radius: var(--radius-s); padding: 7px 10px; margin-top: 6px; white-space: normal;
}
.pv-erreur .pv-meta { color: var(--crit); opacity: .8; }

/* ---------- badges ---------- */
.pv-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.pv-b-ok { color: var(--ok); background: var(--ok-bg); }
.pv-b-warn { color: var(--warn); background: var(--warn-bg); }
.pv-b-crit { color: var(--crit); background: var(--crit-bg); }
.pv-b-neutre { color: var(--ink-soft); background: var(--bg-2); }
.pv-b-neuf { color: var(--accent-600); background: var(--accent-bg); }

/* ---------- bandeaux ---------- */
.pv-alerte {
  border-radius: var(--radius-s); padding: 10px 12px; margin: 10px 0;
  font-size: 13px; line-height: 1.45; border: 1px solid transparent;
}
.pv-alerte-info { background: var(--green-100); border-color: #cfe0d4; color: var(--green-800); }
.pv-alerte-ok { background: var(--ok-bg); border-color: #c7ded0; color: var(--ok); }
.pv-alerte-warn { background: var(--warn-bg); border-color: #e8d5a4; color: #6b4e0e; }
.pv-alerte-crit { background: var(--crit-bg); border-color: #e7c2bd; color: #7d2a23; }
.pv-avert { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.pv-avert-crit { color: var(--crit); }

/* ---------- conversion : les deux unités, toujours ---------- */
.pv-conversion { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-conv {
  margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent-600);
  background: var(--accent-bg); border: 1px solid var(--accent-line);
  border-radius: var(--radius-s); padding: 8px 10px;
}
.pv-ecart {
  margin: 10px 0; font-size: 13px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px;
}
.pv-ecart b { font-variant-numeric: tabular-nums; }

/* ---------- chiffres clés ---------- */
.pv-chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 14px; }
.pv-chiffre {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px;
}
.pv-chiffre span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-faint); font-weight: 600; }
.pv-chiffre b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-chiffre.pv-crit { background: var(--crit-bg); border-color: #e7c2bd; }
.pv-chiffre.pv-crit b { color: var(--crit); }
.pv-chiffre.pv-neuf { background: var(--accent-bg); border-color: var(--accent-line); }
.pv-crit { color: var(--crit); }
.pv-neuf { color: var(--accent-600); }

/* ---------- actions ---------- */
.pv-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.pv-actions-l { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.pv-actions-l .field { min-width: 90px; }
/* Décollements repris des attributs `style=`, que la CSP rendait inertes :
 * barre d'actions sous un tableau (lots récurrents), champ « Motif » (entrées). */
.pv-actions-l-espacee { margin-top: 12px; }
.pv-champ-espace { margin-top: 14px; }

/* ---------- formulaires ---------- */
.pv-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pv-form-bloc { padding: 16px; }
.pv-champ-large { grid-column: 1 / -1; }
.pv-form input, .pv-form select { width: 100%; }
.pv-ligne-saisie {
  display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end;
  padding: 12px 0; border-bottom: 1px dashed var(--line-2);
}
.pv-ligne-saisie:last-of-type { border-bottom: none; }
.pv-ligne-saisie .pv-conv { grid-column: 1 / -1; margin-top: 0; }
.pv-mini { width: 80px; }

/* ---------- onglets ---------- */
.pv-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pv-onglet {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-soft);
  padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.pv-onglet:hover { background: var(--surface-2); color: var(--ink); }
.pv-onglet.on { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* ---------- panier ---------- */
.pv-colonnes { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pv-col-gauche { padding: 14px; }
.pv-col-droite { min-width: 0; }
.pv-col-gauche h3 { margin: 0 0 2px; font-size: 15px; }
.pv-liste { list-style: none; margin: 10px 0 0; padding: 0; max-height: 420px; overflow-y: auto; }
.pv-liste li { border-bottom: 1px solid var(--line); }
.pv-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: none; font-family: inherit; text-align: left; cursor: pointer;
  padding: 10px 4px; color: var(--ink);
}
.pv-item:hover { background: var(--surface-2); }
.pv-item-nom { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 600; }
.pv-item-nom em { font-style: normal; font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.pv-item-qte {
  display: flex; flex-direction: column; align-items: flex-end; flex: none;
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px;
}
.pv-item-qte em { font-style: normal; font-size: 10px; color: var(--ink-faint); font-weight: 400; }

.pv-barre {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  position: sticky; bottom: calc(var(--bottom-h) + 10px); z-index: 5;
}
.pv-barre-info { display: flex; flex-direction: column; gap: 2px; }
.pv-barre-info b { font-size: 15px; }
.pv-barre-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-barre-actions .btn { flex: 1 1 auto; justify-content: center; }

/* ---------- progression d'envoi ---------- */
.pv-progression { padding: 14px; margin-bottom: 14px; border-left: 4px solid var(--green-600); }
.pv-prog-tete { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.pv-jauge { height: 10px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
/* `width: 0` est le filet de sécurité de la jauge : un bloc sans largeur occupe
 * toute la piste. Si jamais la largeur réelle n'était pas posée par le CSSOM
 * (voir dessinerProgression), mieux vaut une jauge vide qu'une jauge pleine —
 * une barre à 100 % en face de « 0 / 18 lignes » fait mentir l'écran. */
.pv-jauge span { display: block; width: 0; height: 100%; background: var(--green-600); transition: width .4s ease; }
.pv-prog-pied { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- récapitulatif de répétition ---------- */
.pv-recap { margin-top: 18px; }
.pv-recap-tete h3 { margin: 0 0 4px; font-size: 16px; }
.pv-sceau {
  font-size: 12.5px; font-weight: 600; color: var(--green-800); background: var(--green-100);
  border-radius: var(--radius-s); padding: 9px 11px; margin-bottom: 12px;
}
.pv-sceau-ko { color: #7d2a23; background: var(--crit-bg); }

/* ---------- caisses ---------- */
.pv-cible {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-soft);
  padding: 8px 0; border-top: 1px solid var(--line); margin-top: 8px;
}
.pv-cible b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-confirmations { margin: 10px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pv-confirm { display: flex; flex-direction: column; gap: 6px; }
.pv-check {
  display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 11px 12px; cursor: pointer;
}
.pv-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.pv-brut {
  font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--bg-2);
  border: 1px dashed var(--line-2); border-radius: var(--radius-s);
  padding: 7px 9px; display: inline-block; margin-top: 5px; white-space: normal; word-break: break-word;
}
.pv-quota {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.pv-quota:last-child { border-bottom: none; }
.pv-quota.pv-crit b { color: var(--crit); }

/* ---------- candidats d'un article ambigu ---------- */
.pv-candidats { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.pv-candidat {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-s);
}
.pv-candidat:hover { border-color: var(--green-600); }
/* Cible non retenable (déclinaisons illisibles) : montrée pour être comprise,
   jamais cliquable — le serveur la refuserait de toute façon. */
.pv-candidat-ko { cursor: not-allowed; opacity: 0.62; background: var(--surface-2, var(--surface)); }
.pv-candidat-ko:hover { border-color: var(--line-2); }
.pv-candidat input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.pv-cand-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.pv-cand-corps b { word-break: break-word; }

/* ---------- journal des entrées ---------- */
.pv-audit td { color: var(--ink-soft); font-style: italic; }

/* ---------- réglages ---------- */
/* minmax(0, 1fr) et non 1fr : la table des défauts par famille porte un
 * min-width de 560 px, et une piste `1fr` prend pour minimum la taille de son
 * contenu. La grille s'étirait donc à 807 px sur un écran de 390, poussant les
 * boutons « Enregistrer » hors champ. Un minimum à 0 rend la main au
 * .table-wrap, qui sait déjà défiler horizontalement. */
.pv-reglages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

/* ---------- écrans larges ---------- */
@media (min-width: 880px) {
  .pv-colonnes { grid-template-columns: 320px 1fr; align-items: start; }
  .pv-col-gauche { position: sticky; top: 16px; }
  .pv-form { grid-template-columns: repeat(2, 1fr); }
  .pv-ligne-saisie { grid-template-columns: 2fr 1fr 1fr auto; }
  .pv-chiffres { grid-template-columns: repeat(6, 1fr); }
  .pv-barre { flex-direction: row; align-items: center; justify-content: space-between; bottom: 16px; }
  .pv-barre-actions .btn { flex: 0 0 auto; }
  .pv-reglages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .pv-reglages .pv-bloc { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-jauge span { transition: none; }
}

/* ---------- comptes (réglages) ---------- */
/* Un compte désactivé reste visible : le masquer donnerait l'impression qu'il a
   été supprimé, alors qu'il porte encore le nom de ses écritures passées. */
.pv-inactif td { opacity: 0.55; }
.pv-inactif td b { font-weight: 500; }