/*
 * Feuille de style unique. Reprend les contraintes qui rendaient l'ancienne app
 * utilisable en service — base 20 px, cibles tactiles larges, pas de zoom — sans
 * son CDN Tailwind (une dependance reseau sur le WiFi d'un restaurant est un
 * point de panne de plus, pour du CSS qui tient en 150 lignes).
 */

:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #14181f;
  --ink-soft: #5b6472;
  --line: #dfe3e9;
  --accent: #1668e3;
  --ok: #1a7f45;
  --danger: #c02626;
  --warn: #a8620a;
  --radius: 12px;
  --tap: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181f;
    --card: #1e232c;
    --ink: #f2f4f7;
    --ink-soft: #9aa4b2;
    --line: #303743;
  }
}

* { box-sizing: border-box; }

/* L'attribut `hidden` DOIT gagner.
   La feuille de l'agent utilisateur pose `[hidden] { display: none }` avec la
   meme specificite qu'une classe : n'importe quelle regle de ce fichier posant
   un `display` -- `.screen { display: flex }` -- passe apres et l'annule en
   silence. Les trois ecrans se sont ainsi affiches empiles pendant que le code
   croyait n'en montrer qu'un, sans qu'aucun test le voie : le texte lu par les
   assertions etait bien la, simplement plus bas que le viewport. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 20px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.bar__title { font-weight: 700; font-size: 18px; }

.pill {
  font-size: 14px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill[data-state="open"]  { color: var(--ok);     border-color: currentColor; }
.pill[data-state="error"],
.pill[data-state="closed"] { color: var(--danger); border-color: currentColor; }
/* « injoignable depuis cette page » n'est pas une panne du restaurant : ni le
   rouge de l'alarme, ni le gris neutre qui se confondrait avec « — ». */
.pill[data-state="blocked"] { color: var(--warn); border-color: currentColor; }

main { padding: 16px 14px calc(20px + env(safe-area-inset-bottom)); }

.screen { display: flex; flex-direction: column; gap: 16px; }
.screen--center { align-items: center; text-align: center; padding-top: 32px; }

.lead { margin: 8px 0; }
.muted { color: var(--ink-soft); }
.small { font-size: 15px; }

.btn {
  min-height: var(--tap);
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost   { background: transparent; }
.btn--xl      { min-height: 64px; font-size: 21px; }
.btn:disabled { opacity: .5; }

.manual { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.manual label { font-size: 16px; color: var(--ink-soft); }
.manual input {
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

#video { width: 100%; border-radius: var(--radius); background: #000; }

.order-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.order-head__table { font-size: 26px; font-weight: 700; display: block; }
.order-head__meta  { font-size: 16px; color: var(--ink-soft); }
.order-head__total { font-size: 24px; font-weight: 700; white-space: nowrap; }

.lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.line {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.line__qte  { font-weight: 700; min-width: 2.4em; font-variant-numeric: tabular-nums; }
.line__body { flex: 1; min-width: 0; }
.line__name { font-weight: 600; }
/* `pre-line` : les options arrivent deja separees par des sauts de ligne, au
   format que l'ancienne caisse imprime (« -2 X Sauce »). */
.line__comment { font-size: 16px; color: var(--ink-soft); white-space: pre-line; }
.line__total { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.footer .btn { flex: 1; }
.footer .btn--primary { flex: 2; }

.result { font-size: 64px; line-height: 1; }
.result__title { font-size: 24px; margin: 4px 0; }
.result__detail { color: var(--ink-soft); margin: 0 0 12px; max-width: 34ch; white-space: pre-line; }

/* --------------------------------------------------- garde anti-doublon */
/* Un doublon en caisse est de l'argent encaisse en trop. Le bouton est donc
   eteint par defaut des qu'un ticket est deja parti, et il faut ecrire un mot
   pour le rallumer : un geste qu'on ne fait pas par inadvertance. */
.resend {
  border: 1px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resend__head { margin: 0; font-weight: 700; color: var(--danger); }
.resend__warn { margin: 0; font-size: 16px; color: var(--ink); }
.resend__label { font-size: 16px; color: var(--ink-soft); }
.resend__label b { color: var(--ink); letter-spacing: .04em; }
.resend input {
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.resend input:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

/* Etat « deja envoye » du bouton principal : il reste lisible, mais il est
   visiblement hors service tant que le mot n'est pas ecrit. */
.btn--primary:disabled { background: var(--ink-soft); border-color: var(--ink-soft); }

/* Explication du « hors ligne ». Cachee tant que la caisse repond : elle ne
   sert qu'a la minute ou quelqu'un est bloque, et le reste du temps elle
   pousserait l'addition hors de l'ecran. */
.hint {
  margin: 0;
  padding: 12px 16px;
  background: var(--warn-bg, #fff7ed);
  border-bottom: 1px solid var(--warn-line, #fed7aa);
  color: var(--warn-fg, #7c2d12);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hint strong { font-size: 15px; }
.hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.hint[hidden] { display: none !important; }

/* Pourquoi l'envoi ne peut pas partir, dit sous l'addition et avant le clic. */
.send-problem {
  margin: 0 16px 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--warn-bg, #fff7ed);
  border: 1px solid var(--warn-line, #fed7aa);
  color: var(--warn-fg, #7c2d12);
  font-size: 14px;
  line-height: 1.45;
}
.send-problem[hidden] { display: none !important; }

/* ── Code du restaurant ─────────────────────────────────────────────────────
   Demande une seule fois par telephone. Les touches sont a la taille du pouce
   (--tap) : ce code se tape debout, en salle, souvent d'une main. */
.pin__title { margin: 0; font-size: 22px; text-align: center; }
.pin__help { margin: 0; color: var(--ink-soft); text-align: center; font-size: 15px; }
.pin__dots {
  display: flex;
  gap: 14px;
  justify-content: center;
  min-height: 20px;
  margin: 4px 0 2px;
}
.pin__dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--line);
}
.pin__dot--on { background: var(--ink); border-color: var(--ink); }
.pin__error { margin: 0; color: var(--danger); text-align: center; font-weight: 600; }
.pin__error[hidden] { display: none; }
.pin__pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
}
.pin__key { min-height: var(--tap); font-size: 24px; font-weight: 600; }