:root {
  --bg:#0c0c0c; --surface:#161616; --surface2:#1f1f1f; --surface3:#272727; --border:#333;
  --red:#e8220a; --red-dim:#8c1406; --cream:#f5e9d0; --cream-dim:#c8b98a;
  --text:#f0ece4; --text-muted:#8a8a8a; --green:#22c55e; --green-dim:rgba(34,197,94,.15);
  --orange:#f97316; --orange-dim:rgba(249,115,22,.14); --blue:#3b82f6;
  --yellow:#eab308; --ticket:#fdfbf4; --ticket-ink:#1a1a1a;
  --radius:10px; --radius-sm:6px; --shadow:0 6px 22px rgba(0,0,0,.55);
  --mono:'DM Sans',ui-monospace,Menlo,monospace;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; min-height:100vh; }
button { cursor:pointer; font-family:inherit; border:none; outline:none; }

/* ── HEADER ─────────────────────────────────── */
#header {
  position:sticky; top:0; z-index:100;
  background:rgba(12,12,12,.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 16px; display:flex; align-items:center; gap:12px; height:56px;
}
.logo { font-family:'Bebas Neue',sans-serif; font-size:1.55rem; color:var(--cream); letter-spacing:1px; }
.logo span { color:var(--red); }
.logo small { font-family:'DM Sans',sans-serif; font-size:.78rem; color:var(--text-muted); font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-left:6px; }
.spacer { flex:1; }

/* ── TOPBAR ─────────────────────────────────── */
#topbar {
  position:sticky; top:56px; z-index:99;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 16px; background:var(--surface); border-bottom:1px solid var(--border);
}
.tb-counter { display:flex; align-items:center; gap:8px; }
.tb-label { font-size:.76rem; color:var(--text-muted); font-weight:600; }
.tb-btn {
  width:34px; height:34px; border-radius:8px; background:var(--surface3); color:var(--cream);
  border:1px solid var(--border); font-size:1.35rem; line-height:1; transition:all .15s;
}
.tb-btn:active { transform:scale(.9); background:var(--red); color:#fff; }
.tb-num { font-family:'Bebas Neue',sans-serif; font-size:1.55rem; color:var(--cream); min-width:26px; text-align:center; }
.tb-queue { font-size:.85rem; font-weight:800; color:var(--cream); background:var(--red); padding:6px 14px; border-radius:20px; }

/* ── KDS GRID — tickets en colonnes ─────────── */
#queue {
  padding:14px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));
  align-items:start;
  gap:14px;
}

.empty-state { grid-column:1/-1; text-align:center; color:var(--text-muted); padding:60px 20px; }
.empty-state .emoji { font-size:3.5rem; display:block; margin-bottom:14px; }
.empty-state h2 { font-family:'Bebas Neue',sans-serif; font-size:1.6rem; color:var(--cream-dim); letter-spacing:1px; font-weight:400; }

/* ── BOUTON RETOUR GLOBAL (undo flottant) ───── */
#undo-fab {
  position:fixed; left:16px; bottom:20px; z-index:250;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px 12px 14px; border-radius:30px;
  background:#fff; color:#111; font-weight:800; font-size:.9rem;
  box-shadow:0 6px 24px rgba(0,0,0,.5); transition:transform .15s;
  max-width:calc(100vw - 32px);
}
#undo-fab:active { transform:scale(.96); }
.undo-fab-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:#111; color:#fff;
  font-size:1.05rem; flex-shrink:0;
}
.undo-fab-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── TICKET (style reçu de caisse) ──────────── */
.ticket {
  background:var(--ticket); color:var(--ticket-ink);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  border-top:6px solid var(--orange);
  font-family:var(--mono);
}
.ticket.late { border-top-color:var(--red); box-shadow:0 0 0 2px var(--red), 0 6px 22px rgba(232,34,10,.3); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 2px var(--red),0 6px 22px rgba(232,34,10,.3);} 50%{box-shadow:0 0 0 2px var(--red),0 6px 30px rgba(232,34,10,.55);} }

.ticket-head {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px 6px;
}
.ticket-name { font-weight:800; font-size:1.08rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111; }
.ticket-type { font-size:1rem; }

.ticket-sub {
  display:flex; align-items:center; gap:8px;
  padding:0 12px 8px; font-size:.82rem; font-weight:700; color:#555;
  border-bottom:2px dashed #d8cfb8;
}
.ticket-sub.late { color:var(--red); }
.ticket-late { background:var(--red); color:#fff; font-size:.68rem; font-weight:800; padding:1px 7px; border-radius:10px; letter-spacing:.5px; }
.ticket-count { margin-left:auto; color:#888; font-size:.78rem; }

.ticket-progress { height:4px; background:#e6dcc4; }
.ticket-progress-fill { height:100%; background:var(--orange); transition:width .25s; }
.ticket.late .ticket-progress-fill { background:var(--red); }

/* ── LIGNES PIZZA (tappable) ────────────────── */
.pizza-list { padding:2px 0; }
.pizza-row {
  display:flex; align-items:flex-start; gap:9px;
  padding:11px 12px; border-bottom:1px dashed #e4dcc6;
  cursor:pointer; user-select:none; transition:background .1s;
  -webkit-tap-highlight-color:transparent;
}
.pizza-row:last-child { border-bottom:none; }
.pizza-row:active { background:#f0e9d6; }
.pizza-row.done { opacity:.4; }
.pizza-row.done .pr-name { text-decoration:line-through; }

.pr-qty {
  font-family:'Bebas Neue',sans-serif; font-size:1.2rem; line-height:1.1;
  min-width:22px; text-align:center; color:#111;
  background:#efe7d2; border-radius:5px; padding:1px 4px; flex-shrink:0;
}
.pr-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; margin-top:5px; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.pr-dot.tomate { background:#D85A30; }
.pr-dot.creme { background:#EF9F27; }
.pr-dot.none { background:#bbb; }
.pr-main { flex:1; min-width:0; }
.pr-name { font-size:1.02rem; font-weight:700; color:#111; line-height:1.25; display:block; }
.pr-mods { margin-top:3px; display:flex; flex-wrap:wrap; gap:4px; }
.pr-mod { font-size:.78rem; font-weight:700; color:#b4400a; background:#fbe6d6; padding:1px 7px; border-radius:10px; }
.pr-check { width:22px; text-align:center; font-size:1.2rem; color:var(--green); font-weight:900; flex-shrink:0; margin-top:2px; }

/* ── COMMENTAIRE ────────────────────────────── */
.ticket-comment {
  font-size:.85rem; font-weight:600; color:#7a3a00; font-style:italic;
  background:#fff6e8; border-top:2px dashed #d8cfb8;
  padding:8px 12px;
}

/* ── TOAST ──────────────────────────────────── */
#toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:12px 20px; border-radius:30px; font-size:.85rem; font-weight:600; z-index:300;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1); white-space:nowrap; box-shadow:var(--shadow);
}
#toast.show { transform:translateX(-50%) translateY(0); }
#toast.success { border-color:var(--green); color:var(--green); }
#toast.error { border-color:var(--red); color:var(--red); }