/* MyKitchen — feuille de style commune.
   Direction : "passe" de cuisine. Fond sombre, fort contraste, gros boutons
   tactiles. Le chrono est l'élément signature : grands chiffres tabulaires qui
   passent du vert à l'orange puis au rouge. La couleur n'encode qu'une chose :
   l'urgence et l'état. Tout le reste reste calme. */

:root {
  --bg:        #0E1116;
  --panel:     #161B22;
  --card:      #1C222B;
  --card-2:    #232B36;
  --border:    #2A313C;
  --border-2:  #3A434F;

  --text:      #F2F4F7;
  --text-soft: #9AA4B2;
  --text-dim:  #6B7480;

  --fresh:     #34C77B;  --fresh-bg:  #14301F;  --fresh-line: #1E6B45;
  --warn:      #F2A516;  --warn-bg:   #3A2A06;  --warn-line:  #946715;
  --late:      #FF5252;  --late-bg:   #3A1414;  --late-line:  #9A2C2C;
  --ready:     #38BDF8;  --ready-bg:  #0C2A3A;
  --action:    #3B82F6;

  --radius:    14px;
  --tap:       56px;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* L'attribut HTML `hidden` doit toujours l'emporter, même sur les éléments
   qui ont un display: flex/grid (sinon le pavé PIN reste affiché). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 0 16px;
  min-height: var(--tap);
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
  user-select: none;
}
button:hover { background: #2A3340; }
button:active { transform: scale(.97); }
button:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
button.primary { background: var(--action); border-color: transparent; color: #fff; font-weight: 600; }
button.give    { background: var(--fresh-line); border-color: transparent; color: #fff; font-weight: 600; }
button.ghost   { background: transparent; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- Écran de connexion ---------------- */

.login {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 28px;
}
.login h1 {
  font-size: 22px; font-weight: 600; margin: 0; letter-spacing: .2px;
  display: flex; align-items: center; gap: 10px;
}
.login .sub { color: var(--text-soft); margin: -16px 0 0; font-size: 15px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 760px;
}
.tile {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; min-height: 78px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .06s ease;
}
.tile:hover { border-color: var(--border-2); background: var(--card-2); }
.tile:active { transform: scale(.98); }
.tile .av {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #2B3442; color: var(--text); font-weight: 600; font-size: 16px;
  background-size: cover; background-position: center;
}
.tile .nm { font-size: 17px; font-weight: 500; }

/* Pavé PIN */
.backdrop {
  position: fixed; inset: 0; background: rgba(6,9,13,.78);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  z-index: 20;
}
.pinpad {
  width: 100%; max-width: 340px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 20px; padding: 22px;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.pinpad .who { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; }
.dots { display: flex; gap: 14px; height: 18px; }
.dots i {
  width: 14px; height: 14px; border-radius: 50%; background: transparent;
  border: 2px solid var(--border-2); transition: background .1s ease, border-color .1s ease;
}
.dots i.on { background: var(--text); border-color: var(--text); }
.pinpad.err .dots i { border-color: var(--late); }
.pinpad.err { animation: shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
@media (prefers-reduced-motion: reduce) { .pinpad.err { animation: none; } }

.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.keys button { min-height: 64px; font-size: 24px; font-weight: 500; }
.msg { color: var(--late); font-size: 14px; min-height: 18px; }

/* ---------------- Écran de production ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.topbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; }
.topbar .spacer { flex: 1; }
.counts { display: flex; gap: 16px; font-size: 13px; color: var(--text-soft); }
.counts b { color: var(--text); }
.counts .late b { color: var(--late); }
.op { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-soft); }
.op .av { width: 30px; height: 30px; border-radius: 50%; background: #2B3442; color: var(--text);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; }
.chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-soft);
}
.chip.active { background: var(--text); color: #0E1116; border-color: var(--text); font-weight: 600; }

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px; padding: 16px; align-items: start;
}
.empty { padding: 64px 16px; text-align: center; color: var(--text-dim); }

/* Ticket */
.ticket {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.ticket .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.ticket .num { font-weight: 600; font-size: 16px; }
.timer { font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.ticket .meta { font-size: 12px; color: var(--text-soft); padding: 8px 12px 0; display: flex; gap: 8px; align-items: center; }
.badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.lines { list-style: none; margin: 0; padding: 8px 6px 4px; display: flex; flex-direction: column; gap: 2px; }
.line {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 8px; padding: 9px 8px; min-height: 0;
  color: var(--text);
}
.line:hover { background: var(--card-2); }
.line .q { font-weight: 700; min-width: 26px; }
.line .lbl { flex: 1; font-size: 15px; line-height: 1.3; }
.line .comp { display: block; font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.line .note { display: block; font-size: 12px; color: var(--warn); margin-top: 2px; }
.line.done .lbl, .line.done .q { color: var(--text-dim); text-decoration: line-through; }
.line .at { font-size: 11px; color: var(--fresh); white-space: nowrap; }
.actions { display: flex; gap: 8px; padding: 8px 12px 12px; }
.actions button { flex: 1; min-height: 48px; font-size: 14px; }

/* Couleurs d'urgence appliquées au ticket */
.ticket.fresh { border-color: var(--fresh-line); }
.ticket.fresh .head { background: var(--fresh-bg); }
.ticket.fresh .timer { color: var(--fresh); }
.ticket.warn  { border-color: var(--warn-line); }
.ticket.warn .head { background: var(--warn-bg); }
.ticket.warn .timer { color: var(--warn); }
.ticket.late  { border-color: var(--late-line); }
.ticket.late .head { background: var(--late-bg); }
.ticket.late .timer { color: var(--late); }

.badge.b-new   { background: var(--fresh-bg); color: var(--fresh); }
.badge.b-prep  { background: var(--warn-bg);  color: var(--warn); }
.badge.b-ready { background: var(--ready-bg); color: var(--ready); }
.badge.b-given { background: #20262F; color: var(--text-dim); }

.ticket.given { opacity: .55; border-color: var(--border); }
.ticket.given .head { background: #20262F; }
.ticket.given .timer { color: var(--text-dim); }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--late-bg); color: var(--late); border: 1px solid var(--late-line);
  padding: 12px 18px; border-radius: 12px; font-size: 14px; z-index: 30;
  max-width: 90vw;
}