/* App du revendeur (page /revendeur) — téléphone d'abord.
   Composants et jetons : ui.css (aucune couleur écrite ici). Connexion : pages/login.css. */

.ui.rv { min-height: 100vh; min-height: 100dvh; }

/* ── Coquille : en-tête, contenu, barre du bas ───────────────── */
.ui .rv-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.ui .rv-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 56px; padding: env(safe-area-inset-top, 0px) var(--s-2) 0 var(--s-4);
  background: var(--c-head); border-bottom: 1px solid var(--c-line);
}
.ui .rv-head .icon-btn:first-child { margin-left: calc(var(--s-2) * -1); }
.ui .rv-title { flex: 1; min-width: 0; margin: 0; font-size: var(--f-title); font-weight: 800; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui .rv-main {
  flex: 1 1 auto; width: 100%; max-width: 560px; margin: 0 auto;
  padding: var(--s-4) var(--s-4) calc(88px + env(safe-area-inset-bottom, 0px));
}
.ui .rv-screen { display: flex; flex-direction: column; gap: var(--s-3); }
.ui .rv-screen > .section-title { margin: var(--s-4) 0 0; }

.ui .rv-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: var(--c-nav); border-top: 1px solid var(--c-line);
}
.ui .rv-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; padding: 6px 2px;
  color: var(--c-muted); text-decoration: none; text-align: center;
  font-size: var(--f-min); font-weight: 700; line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.ui .rv-tab .icon { width: 24px; height: 24px; }
.ui .rv-tab[aria-current="page"] { color: var(--c-active); }
.ui .rv-tab[aria-current="page"] .icon { stroke-width: 2.4; }

/* ── Sans réseau ─────────────────────────────────────────────── */
.ui .rv-offline {
  position: sticky; top: 56px; z-index: 9;
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0; padding: var(--s-2) var(--s-4);
  background: var(--c-warn-bg); color: var(--c-warn);
  font-size: var(--f-small); font-weight: 700;
}
.ui .rv-offline .icon { width: 18px; height: 18px; }
.ui .rv-offline-note { margin: 0; font-size: var(--f-small); font-weight: 700; color: var(--c-warn); }

/* ── Accueil ─────────────────────────────────────────────────── */
.ui .rv-hello { margin: 0; font-size: var(--f-title); font-weight: 800; }
.ui .rv-remind { display: flex; flex-direction: column; gap: var(--s-2); background: var(--c-warn-bg); border-color: transparent; }
.ui .rv-remind-title { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; font-size: 18px; font-weight: 800; color: var(--c-warn); }
.ui .rv-remind-title .icon { margin-top: 3px; }
.ui .rv-remind-text { margin: 0; }

.ui .rv-owed { display: flex; flex-direction: column; gap: var(--s-1); }
.ui .rv-owed-label { margin: 0; font-weight: 700; color: var(--c-muted); }
.ui .rv-owed-value { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.15; }
.ui .rv-due { margin: 0; font-weight: 700; }
.ui .rv-late { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-1) 0 0; font-weight: 700; color: var(--c-bad); }
.ui .rv-late .icon { margin-top: 2px; }
.ui .rv-more { align-self: flex-start; margin: var(--s-1) 0 0 calc(var(--s-3) * -1); }

.ui .rv-gap { margin-top: var(--s-2); }
.ui .rv-logout { margin-top: var(--s-5); color: var(--c-muted); }
.ui .rv-hint { margin: 0; color: var(--c-muted); }
.ui .rv-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.ui .rv-actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }

/* ── Stock ───────────────────────────────────────────────────── */
.ui .rv-big { font-size: 24px; font-weight: 800; min-width: 3ch; justify-content: flex-end; }
.ui .rv-badges { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.ui .rv-badges:empty { display: none; }
.ui .rv-wrap { white-space: normal; display: flex; gap: var(--s-2); align-items: flex-start; }
.ui .rv-wrap .icon { color: var(--c-warn); margin-top: 2px; flex: none; }

/* ── Comptage et commande : une ligne = un produit + un champ ── */
.ui .rv-form { display: flex; flex-direction: column; gap: var(--s-3); }
.ui .rv-count-row { flex-wrap: wrap; }
.ui .rv-count-row .row-main { cursor: pointer; }
.ui .rv-count-row .row-title { white-space: normal; }
.ui .rv-qty { flex: none; width: 96px; font-size: 20px; font-weight: 800; text-align: center; }
.ui .rv-row-error { flex-basis: 100%; margin: 0; }
.ui .rv-foot { flex-direction: column; margin: var(--s-2) calc(var(--s-4) * -1) 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.ui .rv-foot .btn { flex: none; }
.ui .rv-total { margin: 0; font-weight: 700; color: var(--c-muted); }

/* ── Après le comptage ───────────────────────────────────────── */
.ui .rv-done { display: flex; flex-direction: column; gap: var(--s-2); }
.ui .rv-done p { margin: 0; }
.ui .rv-done-title { display: flex; align-items: center; gap: var(--s-2); font-size: 18px; font-weight: 800; color: var(--c-ok); }

/* ── Commandes ───────────────────────────────────────────────── */
.ui .rv-order { display: flex; flex-direction: column; gap: var(--s-2); }
.ui .rv-order p { margin: 0; }
.ui .rv-order-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ui .rv-order-title { font-weight: 800; }
.ui .rv-order.is-big .rv-order-title { font-size: 18px; }
.ui .rv-order-step { font-weight: 700; }
.ui .rv-order-lines { margin: 0; padding-left: var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.ui .rv-note { font-size: var(--f-small); }
.ui .rv-current { display: flex; flex-direction: column; gap: var(--s-2); }
.ui .rv-current p { margin: 0; }
.ui .folded .rv-order { border: 0; padding: 0; }
.ui .rv-sum { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; margin-right: var(--s-2); }

.ui .rv-steps { list-style: none; margin: var(--s-1) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ui .rv-step { display: flex; align-items: center; gap: var(--s-3); color: var(--c-muted); }
.ui .rv-step-dot {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-input-line);
}
.ui .rv-step.is-done { color: var(--c-text); }
.ui .rv-step.is-done .rv-step-dot { background: var(--c-ok-bg); border-color: var(--c-ok); color: var(--c-ok); }
.ui .rv-step-name { flex: 1; font-weight: 700; }
.ui .rv-step-date { font-size: var(--f-small); }

/* ── Ce que je dois ──────────────────────────────────────────── */
.ui .rv-pay { color: var(--c-ok); }

@media (min-width: 768px) {
  .ui .rv-tabs { left: 50%; right: auto; width: 560px; transform: translateX(-50%); border: 1px solid var(--c-line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
}

/* ── Mode vente : noter une vente, mes ventes, je verse ─────── */
.ui .rv-queue { position: static; background: var(--c-active-bg); color: var(--c-active); }
.ui .rv-sell { min-height: 64px; font-size: 20px; }
.ui .rv-owed-small { font-size: 26px; }

.ui .rv-notice {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin: 0; padding: var(--s-3); border-radius: var(--r-md);
  font-weight: 700;
}
.ui .rv-notice .icon { flex: none; margin-top: 2px; }
.ui .rv-note-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.ui .rv-note-warn,
.ui .rv-note-info { background: var(--c-warn-bg); color: var(--c-warn); }
.ui .rv-note-bad { background: var(--c-bad-bg); color: var(--c-bad); }

.ui .rv-sale-line { gap: var(--s-2); }
.ui .rv-stepper { display: flex; align-items: center; gap: var(--s-1); flex: none; }
.ui .rv-stepper .rv-qty { width: 64px; text-align: center; }
.ui .rv-picks > li + li { border-top: 1px solid var(--c-line-soft); }
.ui .rv-wrap-title { white-space: normal; }
.ui .rv-row-action { flex-basis: 100%; justify-content: flex-start; margin: calc(var(--s-2) * -1) 0 0 calc(var(--s-3) * -1); color: var(--c-muted); }
.ui .rv-v-step { margin-top: 2px; font-size: var(--f-small); font-weight: 700; white-space: normal; }

.ui .rv-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ui .rv-choices { display: flex; flex-direction: column; gap: var(--s-2); }
.ui .rv-choice {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--touch); padding: var(--s-3);
  border: 1.5px solid var(--c-line); border-radius: var(--r-md); background: var(--c-card);
  font-weight: 700; cursor: pointer;
}
.ui .rv-choice input { width: 20px; height: 20px; flex: none; accent-color: var(--c-action); }
.ui .rv-choice:has(input:checked) { border-color: var(--c-action); background: var(--c-active-bg); }
.ui .rv-amount { font-size: 24px; font-weight: 800; }
.ui .rv-chip:has(input:checked) { border-color: var(--c-action); background: var(--c-active-bg); color: var(--c-active); }
.ui .rv-chip:has(input:focus-visible) { outline: 2px solid var(--c-action); outline-offset: 2px; }