/* styles-import.css — écran « Import du catalogue » et le bloc d'unité de vente
 * (plan V4, LOT 8).
 *
 * Une feuille à part plutôt qu'une rallonge de styles.css : ce sont les styles
 * d'un écran neuf et d'un geste neuf (la pose de l'unité), et les garder
 * séparés rend le diff de ce lot lisible. Les variables (--ink, --line,
 * --crit, …) viennent de styles.css : rien n'est redéfini ici.
 *
 * Mobile d'abord, comme le reste : une seule colonne, l'élargissement vient
 * après. Aucune police externe, aucune image, aucune dépendance.
 */

/* ------------------------------------------------- l'unité de vente */

/* Le bloc du geste unique. Il est encadré : ce n'est pas un champ de plus
 * dans un formulaire, c'est une décision définitive. */
.unite-bloc {
  border: 1px solid var(--line-2, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}
.unite-bloc.unite-a-poser {
  border-color: var(--crit);
  box-shadow: inset 3px 0 0 var(--crit);
}
.unite-bloc.unite-figee { opacity: .92; }
.unite-bloc select { width: 100%; }
.unite-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* La conversion « en toutes lettres » : du texte qui se lit, pas une étiquette.
 * Interligne large et largeur de lecture bornée — on veut qu'elle soit lue. */
.unite-lettres {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 68ch;
  color: var(--ink-soft);
}
.bandeau .unite-lettres { color: inherit; }

/* ------------------------------------------------- réserve : miroir */

.miroir { padding: 16px; }
.miroir input[readonly] {
  background: var(--bg-2);
  color: var(--ink-soft);
  cursor: default;
}
.miroir table th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
  padding-right: 14px;
}
.detail-caisse { font-size: 12.5px; margin-top: 3px; }
.stk-caisse { font-size: 12px; }
.stk-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.stk-pages { align-items: center; margin-top: 12px; }

/* ------------------------------------------------- l'écran d'import */

.imp-lancer { padding: 16px; }
.imp-quotas {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.imp-quota-alerte { color: var(--crit); font-weight: 600; }

.imp-rapport, .imp-entree { padding: 14px; }
.imp-journal { display: flex; flex-direction: column; gap: 12px; }

.imp-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.imp-date { font-weight: 700; font-size: 14px; }

/* Les compteurs d'un rapport : deux colonnes sur téléphone, quatre au large.
 * Ce sont des nombres qu'on compare d'un import à l'autre — chiffres tabulaires. */
.attrs-import { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.attrs-import .attr { padding: 8px 10px; }
.attrs-import .v { font-size: 15px; }

.imp-detail { margin-top: 12px; }
.imp-detail h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--ink-faint);
}
.imp-detail ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* Un libellé de caisse peut être long et sans espace : il ne doit jamais
 * pousser une largeur et faire défiler la page horizontalement. */
.imp-detail li { overflow-wrap: anywhere; }

@media (min-width: 720px) {
  .attrs-import { grid-template-columns: repeat(4, 1fr); }
}