/* Styles des écrans Historique, Ordre, Retrait, Reçu (lot WP8). Ne consomme que les jetons de shared/tokens.css.
   Préfixe `wp8-` pour tout ce qui n'est pas dans le catalogue de components.css ; `.receipt` pour le reçu imprimable. */

/* En-tête interne à la section (retour 48 px, titre, une action) */
.wp8-head { display: grid; grid-template-columns: var(--tap-min) 1fr var(--tap-min); align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.wp8-head__title { grid-column: 2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp8-head__action { grid-column: 3; display: inline-grid; place-items: center; }
.wp8-head__back { font-size: var(--text-lg); }

/* En-tête d'état (badge + référence + montant hero) */
.wp8-hero { gap: var(--space-3); }
.wp8-hero .hero-amount { margin-top: var(--space-1); }
.wp8-hero .text-secondary { overflow-wrap: anywhere; }
.wp8-hero .hash { vertical-align: middle; }

/* Historique : titres de jour et liste */
.wp8-day { margin-top: var(--space-2); }
.wp8-day + .list { margin-top: calc(-1 * var(--space-2)); }
.list-item__amount { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* Actions de bas d'écran */
.wp8-actions { padding-bottom: var(--space-4); }

/* Décision de paiement tardif */
.wp8-late { border-color: var(--color-accent); }

/* Carnet d'adresses : ligne sélectionnable (bouton), état choisi */
.wp8-address { cursor: pointer; border-left: 3px solid transparent; }
.wp8-address.is-selected, .wp8-address[aria-checked="true"] { background: var(--color-primary-soft); border-left-color: var(--color-primary); }
.wp8-address .list-item__meta { display: flex; align-items: center; gap: var(--space-1); white-space: normal; }
.wp8-address .list-item__meta .hash { font-size: var(--text-sm); }
.wp8-address:focus-visible { box-shadow: inset var(--focus-ring); border-radius: 0; }

/* Feuille d'ajout d'adresse */
.wp8-sheet { margin: 0; }
.wp8-sheet .sheet__body { max-height: calc(90dvh - 180px); }
.wp8-paste { cursor: pointer; color: var(--color-primary); min-width: var(--tap-min); }
.wp8-paste:hover { background: var(--color-primary-soft); }
.wp8-ok { color: var(--color-success-text); font-weight: 600; }
.wp8-address-full { overflow-wrap: anywhere; padding: var(--space-3); background: var(--color-surface-2); border-radius: var(--radius-md); }
.wp8-confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.wp8-confirm-grid .input { text-align: center; font-size: var(--text-md); letter-spacing: 0.08em; }
.wp8-break { overflow-wrap: anywhere; }
[data-confirm-error] { display: none; }

/* Step-up (PIN / code SMS) affiché dans la section ou la feuille */
.wp8-stepup { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) 0; }
.wp8-stepup .sheet__title { padding: 0; }
.wp8-stepup .pin-pad__key { min-height: 64px; }

/* Formulaire de montant : total visible dans le kv */
.kv dd.kv--total, .kv dt.kv--total { padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-weight: 700; color: var(--color-text); font-size: var(--text-base); }
.amount-input__value:disabled { color: var(--color-text-muted); }

/* Bandeau réseau à l'intérieur d'une section (la section est déjà sous la barre d'app) */
.screen > .banner { border-radius: var(--radius-md); position: static; }

/* Reçu */
.receipt { gap: var(--space-4); }
.receipt__head { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.receipt__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-primary); }
.receipt__brand span { color: var(--color-accent-text); }
.receipt__title { font-size: var(--text-md); }
.receipt__rows dd { font-weight: 500; }
.receipt__rows dd .ref { font-size: var(--text-base); }
.receipt__foot { padding-top: var(--space-3); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); }

@media print {
  .wp8-head, .receipt-actions, .toast-region, [data-sheet] { display: none !important; }
  .screen { gap: var(--space-3); }
  .receipt { border: 1px solid var(--color-border); box-shadow: none; page-break-inside: avoid; }
  .receipt__brand, .receipt__brand span, .receipt a { color: var(--color-text); }
  .hash__copy, .hash__link { display: none !important; }
  .hash__start { overflow: visible; text-overflow: clip; }
}