/* Kitchen display: read it from three metres away, in a hurry, with wet hands. */
.kds {
  --bg: #12141a;
  --panel: #191d26;
  --panel-2: #1f2430;
  --line: #2a3140;
  --ink: #eef1f5;
  --muted: #8e99ab;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-family: var(--font-ui);
}
.kds a { color: #f0d79a; }

.k-bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem; background: rgba(18, 20, 26, .96); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px); flex-wrap: wrap;
}
.k-title { font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; gap: .5rem; }
.k-title .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #4ec27f; }
.k-title[data-state="offline"] .dot { background: #d3564c; }
.k-title[data-state="reconnecting"] .dot, .k-title[data-state="connecting"] .dot { background: #d8a33a; }

.k-stations { display: flex; gap: .35rem; flex-wrap: wrap; }
.k-station {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 999px; padding: .35rem .8rem; font-weight: 700; font-size: .86rem;
  display: inline-flex; align-items: center; gap: .4rem;
}
.k-station.is-active { color: #fff; background: #2b3342; border-color: #3d4759; }
.k-station i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.k-station b { font-variant-numeric: tabular-nums; }

.k-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.k-metric { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.k-metric b { color: var(--ink); }
.k-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 8px; padding: .4rem .75rem; font-size: .84rem; font-weight: 600;
}
.k-btn:hover { background: var(--panel-2); }
.k-btn.is-on { background: #3d5a3a; border-color: #4d6f49; }
.k-clock { font-family: var(--font-mono); font-size: .9rem; color: var(--muted); }

.k-grid {
  display: grid; gap: .7rem; padding: .8rem .9rem 5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  align-items: start;
}

.ticket {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 24px -18px #000;
}
.ticket.is-new { animation: land .5s cubic-bezier(.2,.9,.3,1); }
@keyframes land {
  from { transform: translateY(-10px) scale(.98); box-shadow: 0 0 0 3px rgba(78, 194, 127, .5); }
  to { transform: none; }
}
.t-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; border-bottom: 1px solid var(--line); }
.t-station { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 5px; color: #12141a; }
.t-no { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; }
.t-table { color: var(--muted); font-size: .84rem; }
.t-timer { margin-left: auto; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sla-green .t-timer { color: #62d093; }
.sla-amber .t-timer { color: #e5b551; }
.sla-red .t-timer { color: #ff6f61; }
.sla-red { border-color: #6b2f2a; box-shadow: 0 0 0 1px rgba(255, 111, 97, .25), 0 10px 24px -18px #000; }

.t-items { list-style: none; margin: 0; padding: .55rem .65rem; display: grid; gap: .4rem; flex: 1; }
.t-item { display: grid; grid-template-columns: 2.1rem 1fr; gap: .4rem; align-items: baseline; font-size: 1.02rem; }
.t-item .q { font-family: var(--font-mono); font-weight: 800; color: #c8d2e0; }
.t-item .n { font-weight: 600; }
.t-mods { grid-column: 2; font-size: .84rem; color: #ffd9a3; }
.t-note { grid-column: 2; font-size: .84rem; color: #ffb4a3; }
.t-who { grid-column: 2; font-size: .76rem; color: var(--muted); }

.t-foot { display: flex; gap: .4rem; padding: .55rem .65rem; border-top: 1px solid var(--line); background: var(--panel-2); }
.t-foot button { flex: 1; border: 0; border-radius: 8px; padding: .55rem .4rem; font-weight: 700; font-size: .88rem; background: #2c3547; color: var(--ink); }
.t-foot button:hover { background: #354057; }
.t-foot .go { background: #3f7d55; }
.t-foot .go:hover { background: #4a9163; }
.t-foot .ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); flex: 0 0 auto; padding: .55rem .6rem; }
.t-badges { display: flex; gap: .3rem; padding: 0 .65rem .5rem; flex-wrap: wrap; }
.t-badge { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .4rem; border-radius: 4px; background: #2b3342; color: #9fb0c6; }
.t-badge.sim { background: #2f3552; color: #a9b5e8; }
.t-badge.auto { background: #3b3350; color: #c3aee8; }
.t-badge.cooking { background: #4a3f21; color: #e5c368; }
.t-badge.ready { background: #24452f; color: #7fd39b; }

.k-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 3rem 1rem; }
.k-empty h2 { font-weight: 600; color: #b6c0ce; }

.k-side {
  position: fixed; right: 0; bottom: 0; left: 0; background: rgba(20, 23, 30, .97);
  border-top: 1px solid var(--line); padding: .5rem .9rem; display: flex; gap: .5rem;
  align-items: center; flex-wrap: wrap; font-size: .84rem; z-index: 15;
}
.k-side .label { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 700; }
.allday { display: inline-flex; align-items: center; gap: .3rem; background: #1f2430; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .6rem; }
.allday b { font-family: var(--font-mono); }
.stopped { display: inline-flex; align-items: center; gap: .3rem; background: #3a2523; border: 1px solid #5c3833; color: #ffb4a3; border-radius: 999px; padding: .2rem .6rem; }

.embed .k-bar { padding: .45rem .6rem; }
.embed .k-grid { padding: .6rem .6rem 3.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.embed .k-side { position: sticky; }

@media (max-width: 560px) {
  .k-grid { grid-template-columns: 1fr; }
  .k-right { width: 100%; }
}