/* ==========================================================================
   Оформление POS.

   Та же печатная карточка, что и в гостевом меню: бумага, золото, антиква.
   Гость и официант смотрят на одно заведение, и выглядеть оно должно
   одинаково — палитра, шрифты и разрядка взяты из меню один в один.

   Разница только в том, что меню читают, а этим работают. Поэтому цели под
   палец крупные, состояния различимы цветом, а вечером включается ночной
   режим: зал тёмный, и светлая заливка на весь экран светит соседнему столу.
   Это не второй дизайн, а тот же — при другом свете.
   ========================================================================== */

:root {
  /* Бумага. Значения — из меню, менять их вместе. */
  --paper:      #f7f3ea;
  --paper-2:    #fffdf8;
  --paper-edge: #e6dfd1;
  --ink:        #1d1a16;
  --ink-soft:   #6d6455;
  --ink-faint:  #8d8474;
  --gold:       #a8843f;
  --gold-soft:  #cbb083;
  --rule:       rgba(168, 132, 63, .28);
  --rule-soft:  rgba(29, 26, 22, .12);

  --ok:        #2f6b4a;
  --ok-bg:     #e2ecdf;
  --warn:      #8f6412;
  --warn-bg:   #f3e9d2;
  --danger:    #a3322c;
  --danger-bg: #f4e2df;
  --info:      #3c6a8f;

  /* Шапка всегда цвета чернил — как прикреплённая панель в меню. */
  --bar-bg:    #1d1a16;
  --bar-ink:   #f7f3ea;
  --bar-mark:  #cbb083;

  --serif: "Cormorant Garamond", "Didot", "Bodoni MT", "Playfair Display",
           "Times New Roman", Times, Georgia, serif;
  --sans:  "Inter", "Helvetica Neue", Arial, system-ui, -apple-system,
           BlinkMacSystemFont, sans-serif;

  --radius: 4px;
  --tap: 52px;               /* меньше этого палец не попадает */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  color-scheme: light;
}

/* Ночь: те же чернила и то же золото, только наоборот. */
:root[data-theme="night"] {
  --paper:      #16130f;
  --paper-2:    #201c16;
  --paper-edge: #0f0d0a;
  --ink:        #f2ece0;
  --ink-soft:   #b5aa96;
  --ink-faint:  #8a8071;
  --gold:       #cbb083;
  --gold-soft:  #a8843f;
  --rule:       rgba(203, 176, 131, .26);
  --rule-soft:  rgba(242, 236, 224, .12);

  --ok:        #7cc39a;
  --ok-bg:     #17301f;
  --warn:      #d9ac53;
  --warn-bg:   #322708;
  --danger:    #e0837c;
  --danger-bg: #331714;
  --info:      #7fb0d4;

  --bar-bg:    #201c16;
  --bar-ink:   #f2ece0;
  --bar-mark:  #cbb083;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* убирает зум по двойному тапу, оставляя щипок и прокрутку */
  touch-action: manipulation;
}

body {
  margin: 0;
  background: var(--paper-edge);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: contain;
}

/* Антиква — на том, что читают как из меню: названия, суммы, номера столов.
   Подписи и служебное остаются гротеском: в антикве «ОТПРАВЛЕНО» вразрядку
   читается хуже, а его читают на бегу. */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; }

/* В режиме программы интерфейс не должен вести себя как веб-страница:
   ни выделения текста, ни длинного тапа с меню «скопировать». */
.pwa, .pwa button, .pwa .tap {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ------------------------------------------------------------- кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  transition: transform .06s ease, opacity .12s ease;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* Золото — цвет главного действия. Оно же в меню отмечает цену. */
.btn.primary { background: var(--gold); color: #1d1a16; border-color: var(--gold); }
.btn.ok      { background: var(--ok);   color: var(--paper); border-color: var(--ok); }
.btn.danger  { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.btn.ghost   { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn.wide    { width: 100%; }
.btn.big     { min-height: 62px; font-size: 17px; }

:root[data-theme="night"] .btn.ok { color: #10251a; }

/* ------------------------------------------------------------ карточки --- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.mono  { font-variant-numeric: tabular-nums; }

/* Заголовок раздела — как в меню: вразрядку, капителью, с золотой чертой. */
.zone-title, .sheet .group h3, table.grid th {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- вход --- */
/* Экран PIN перекрывает всё: пока человек не назвался, показывать нечего —
   ни столов, ни марок. */
.gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b));
  background: var(--paper-edge);
}

.gate h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Точки вместо цифр: PIN вводят при людях, и через плечо видно всё. */
.gate .dots { display: flex; gap: 16px; height: 16px; }
.gate .dots i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  transition: background .12s ease;
}
.gate .dots i.on { background: var(--gold); border-color: var(--gold); }

.gate .msg { min-height: 22px; font-size: 14px; text-align: center; color: var(--danger); }

/* Соседний вход. Тихая ссылка, а не кнопка: она нужна раз в жизни — когда
   администратор открыл приложение зала и увидел четыре точки вместо шести. */
.gate .elsewhere {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.gate .elsewhere:active { color: var(--gold); }

.pad {
  /* Колонки фиксированные, а не резиновые: на «1fr» кнопки растягиваются в
     овалы, и круглая клавиатура выглядит раздавленной. */
  display: grid;
  grid-template-columns: repeat(3, 78px);
  justify-content: center;
  gap: 14px;
}
.pad button {
  /* Цифра ставится по центру кружка явно. У антиквы цифры разной высоты
     («1» короче «4»), и на базовой линии они сидят вразнобой — на круглой
     кнопке это видно сразу. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 30px;
  font-variant-numeric: tabular-nums lining-nums;
}
.pad button:active { background: var(--paper-edge); transform: scale(.95); }
.pad button.blank { background: none; border: 0; pointer-events: none; }
.pad button.action { font-family: var(--sans); font-size: 15px; color: var(--ink-soft); }

/* Тряска на неверный PIN. Ошибку надо почувствовать, а не вычитать. */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.gate.wrong .dots { animation: shake .32s ease; }
@media (prefers-reduced-motion: reduce) {
  .gate.wrong .dots { animation: none; }
  .btn:active, .pad button:active { transform: none; }
}

/* ------------------------------------------------------- нет связи ------ */
/* Баннер перекрывает всё намеренно: тихий устаревший список хуже ошибки. */
.offline {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: var(--danger-bg);
  color: var(--ink);
}
.offline .head { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 700; }
.offline .body { margin: 0; color: var(--ink-soft); }

/* --------------------------------------------------------------- шапка -- */
/* Всегда цвета чернил, в обоих режимах: в меню такая же прикреплённая
   панель, и по ней приложение узнаётся с первого взгляда. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(8px + var(--safe-t)) 14px 8px;
  min-height: 56px;
  background: var(--bar-bg);
  color: var(--bar-ink);
  box-shadow: 0 6px 18px rgba(29, 26, 22, .16);
}
.topbar h1 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bar-mark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar .who {
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(247, 243, 234, .7);
  white-space: nowrap;
}

/* На узком экране имя уходит: официант и так знает, кто он, а название чека
   важнее — иначе оно переносится на вторую строку и шапка растёт вдвое. */
@media (max-width: 460px) {
  .topbar .who { display: none; }
  .topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .topbar .btn { padding: 0 8px; }
}

/* В шапке кнопки мелкие: сюда не целятся на ходу, а место нужно названию. */
.topbar .btn {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 2px;
  background: transparent;
  border-color: rgba(203, 176, 131, .35);
  color: rgba(247, 243, 234, .8);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
}
.topbar .btn:active { background: rgba(203, 176, 131, .18); }

/* Точка связи. Зелёная — сервер отвечает, красная — нет. */
.netdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b4514b;
  flex: none;
}
.netdot.on { background: #6ea882; }

/* ------------------------------------------------------------- всплывашка */
.toast {
  position: fixed;
  left: 50%;
  /* Выше нижней панели: сообщение, закрывающее кнопку «Оплата», — это
     сообщение, из-за которого нажимают мимо. */
  bottom: calc(88px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 10px 30px rgba(29, 26, 22, .22);
  font-size: 15px;
  /* Сквозное для нажатий: сообщение, перехватившее палец, — это промах по
     кнопке, за который никто не поблагодарит. */
  pointer-events: none;
}
.toast.bad  { background: var(--danger-bg); border-color: var(--danger); }
.toast.good { background: var(--ok-bg); border-color: var(--ok); }

/* ==========================================================================
   Приложение официанта
   ========================================================================== */

.screen { padding: 12px 12px calc(96px + var(--safe-b)); background: var(--paper); min-height: 100vh; }

.zone-title {
  margin: 20px 2px 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.zone-title:first-child { margin-top: 8px; }

/* Сетка столов. Плитка крупная: по ней попадают на ходу. */
.tables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 106px;
  padding: 10px;
  text-align: left;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
}
.tile .num { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1; }
.tile .sum {
  margin-top: auto;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.tile .meta { font-size: 11.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
/* Занятый стол — золотая рамка, как отчёркнутая позиция в меню. */
.tile.busy  { border-color: var(--gold); }
.tile.other { border-color: var(--rule-soft); background: var(--paper-edge); }
.tile .flags { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.flag { width: 8px; height: 8px; border-radius: 50%; }
.flag.new      { background: var(--ink-faint); }
.flag.accepted { background: var(--warn); }
.flag.ready    { background: var(--ok); }
.flag.draft    { background: var(--gold); }

/* --------------------------------------------------------------- чек ---- */
.lines { display: flex; flex-direction: column; }
.line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule-soft);
}
.line:last-child { border-bottom: 0; }
.line .qty {
  min-width: 34px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.line .body { flex: 1; min-width: 0; }
.line .name { font-family: var(--serif); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.line .opts { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.line .note { font-size: 13px; color: var(--warn); }
.line .price {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.line.draft { border-left: 2px solid var(--gold); padding-left: 8px; }
.line.cancelled { opacity: .5; }
.line.cancelled .name { text-decoration: line-through; }

.pill {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 2px;
  background: var(--paper-edge);
  color: var(--ink-soft);
}
.pill.accepted { background: var(--warn-bg); color: var(--warn); }
.pill.ready    { background: var(--ok-bg);   color: var(--ok); }
.pill.draft    { background: transparent; color: var(--gold); border: 1px solid var(--rule); }

.totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule);
}
.totals .row {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.totals .row.big { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.totals .row.off { color: var(--ok); }

/* Нижняя панель действий. Всегда на месте — до неё дотягивается большой палец. */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + var(--safe-b));
  background: linear-gradient(to top, var(--paper) 68%, transparent);
}
.dock .btn { flex: 1; }

/* ------------------------------------------------------------- меню ----- */
.search { position: sticky; top: 56px; z-index: 15; padding: 8px 0; background: var(--paper); }
.search input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
}
.search input::placeholder { color: var(--ink-faint); }
.search input:focus { outline: none; border-bottom-color: var(--gold); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 8px 14px;
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip.on { background: var(--gold); border-color: var(--gold); color: #1d1a16; }

.dish {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 13px 2px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
}
.dish .body { flex: 1; min-width: 0; }
/* Оба — блоки. Многоточие не работает на строчном элементе, и описание
   коктейля в одну строку растягивало всю страницу вширь: на телефоне это
   выглядело как съехавшая вёрстка и уезжающие за край кнопки. */
.dish .name {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.dish .desc {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dish .price {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.dish.off { opacity: .45; }
.dish.off .price::after { content: ' · стоп'; font-family: var(--sans); font-size: 11px; color: var(--danger); }
/* «Скоро» — не то же самое, что «кончилось»: так на сайте выключен целый
   раздел, и официанту важно назвать гостю именно эту причину. */
.dish.soon .price::after { content: ' · скоро'; color: var(--warn); }

/* --------------------------------------------------------------- лист --- */
/* Шторка снизу: выбор вариантов, оплата, всё, что перекрывает экран. */
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(29, 26, 22, .5); }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px 14px calc(16px + var(--safe-b));
  border-radius: 10px 10px 0 0;
  background: var(--paper);
  border-top: 2px solid var(--gold);
}
.sheet h2 { margin: 0 0 2px; font-size: 24px; }
.sheet .sub { margin: 0 0 16px; color: var(--ink-soft); font-size: 14px; }
.sheet .group { margin-bottom: 18px; }
.sheet .group h3 { margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  padding: 11px 14px;
  border-radius: 2px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 15px;
}
.opt.on { background: var(--gold); border-color: var(--gold); color: #1d1a16; }
.opt .add { font-size: 12px; opacity: .8; }

/* Разница при пересчёте: минус — недостача, плюс — нашлось. Цветом, потому
   что смотрят на неё бегло и ищут именно минусы. */
.gap { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.gap.ok { color: var(--ok); }
.gap.warn { color: var(--warn); }
.gap.bad { color: var(--danger); }
.field.slim { min-height: 38px; padding: 0 10px; font-size: 14px; max-width: 140px; }

/* Смена идёт — это строка, а не кнопка: нажимать нечего. */
.on-shift {
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.sheet .dots { display: flex; gap: 14px; justify-content: center; margin: 6px 0 10px; }
.sheet .msg { min-height: 20px; margin: 0 0 8px; text-align: center; font-size: 13px; color: var(--danger); }
.sheet .pad { margin: 0 auto; }

/* Ползунок скидки: цифра рядом, крупная — её называют вслух гостю. */
.percent { display: flex; align-items: center; gap: 14px; }
.percent .range { flex: 1; accent-color: var(--gold); height: 34px; }
.percent .pc {
  min-width: 66px;
  text-align: right;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Счётчики миксов: название слева, «− 2 +» справа. */
.counters { display: flex; flex-direction: column; gap: 2px; }
.counter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--rule-soft);
}
.counter .nm { flex: 1; min-width: 0; font-size: 15px; }
.counter .nm .add { color: var(--gold); font-size: 13px; }
.counter.on .nm { font-weight: 600; }
.counter .grip { display: flex; align-items: center; gap: 8px; }
.counter .step {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  font-size: 20px;
  line-height: 1;
}
.counter .step[disabled] { opacity: .35; }
.counter .n {
  min-width: 22px;
  text-align: center;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  font-size: 24px;
}
.stepper .n {
  min-width: 44px;
  text-align: center;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
}

.field {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
}
.field:focus { outline: none; border-color: var(--gold); }

/* ------------------------------------------------------- готово к выдаче - */
/* Полоса «готово» липнет к верху: её нельзя пролистать мимо. */
.ready-bar { position: sticky; top: 56px; z-index: 25; display: flex; flex-direction: column; gap: 8px; }
.ready-bar:not(:empty) { margin-bottom: 12px; }
.ready-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--ok-bg);
  border: 1px solid var(--ok);
}
.ready-item .body { flex: 1; }
.ready-item .what { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.ready-item .where { font-size: 12.5px; color: var(--ink-soft); }

/* Кнопки сигнала внизу сетки столов: проверить звук стоит в начале смены,
   а не в середине. */
.signal { display: flex; gap: 8px; margin-bottom: 4px; }
.signal .btn { flex: 1; min-height: 42px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   Планшет станции: бар и кухня

   Экран стоит на полке в двух метрах от человека и читается боковым зрением.
   Поэтому всё крупнее, чем в зале, а цвет несёт смысл: серое — не взяли,
   жёлтое — делают, зелёное — готово.
   ========================================================================== */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
  align-content: start;
  min-height: 100vh;
  padding: 14px;
  padding-bottom: calc(14px + var(--safe-b));
  background: var(--paper-edge);
}

.board .empty {
  grid-column: 1 / -1;
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 24px;
}

.mark {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--ink-faint);
  overflow: hidden;
}
.mark.accepted { border-top-color: var(--warn); }
.mark.ready    { border-top-color: var(--ok); }

/* Просрочка кричит и не перестаёт, пока марку не взяли. */
.mark.late { border-top-color: var(--danger); }
.mark.late .mark-head { background: var(--danger-bg); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.mark.late .waited { animation: pulse 1.1s ease-in-out infinite; color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .mark.late .waited { animation: none; } }

.mark-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}
.mark-head .table { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1; }
.mark-head .meta { flex: 1; font-size: 12px; color: var(--ink-soft); }
.mark-head .waited {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mark-items { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.mark-item { display: flex; gap: 12px; align-items: baseline; }
.mark-item .n {
  min-width: 40px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.mark-item .what { flex: 1; }
.mark-item .what b { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.mark-item .opts { display: block; font-size: 16px; font-weight: 600; color: var(--gold); }
.mark-item .note { display: block; font-size: 15px; color: var(--warn); }
.mark-item.gone { opacity: .5; }
.mark-item.gone .what b { text-decoration: line-through; }
.mark-item.gone .why {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--danger);
}

.mark-note {
  margin: 0 14px 12px;
  padding: 8px 10px;
  border-radius: 2px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 15px;
}

.mark-foot { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--rule); }
.mark-foot .btn { flex: 1; min-height: 64px; font-size: 17px; letter-spacing: .06em; }
.mark-foot .muted { align-self: center; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

.station-state {
  padding: 4px 10px;
  border: 1px solid rgba(203, 176, 131, .35);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bar-mark);
}

/* ==========================================================================
   Админка

   Её открывают с ноутбука или планшета в подсобке, поэтому здесь можно
   таблицы и мелкий шрифт — но не мелкие кнопки.
   ========================================================================== */

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  padding: 9px 16px;
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tab.on { background: var(--gold); border-color: var(--gold); color: #1d1a16; }

/* Колонка по центру, а не прижатая влево: иначе на широком экране справа
   висит полоса другого цвета и выглядит как недогрузившаяся страница. */
.panel { padding: 20px 16px; min-height: 100vh; background: var(--paper); }
.panel > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.panel h2 {
  margin: 24px 0 4px;
  font-size: 26px;
}
.panel h2:first-child { margin-top: 0; }
.panel .hint { margin: 0 0 18px; color: var(--ink-soft); font-size: 13.5px; }

/* Плитки чисел отчёта: то, ради чего его открывают, читается сразу. */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.figure { padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.figure .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.figure .value {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.figure.cash .value { color: var(--ok); }
.figure.card .value { color: var(--info); }
.figure.warn .value { color: var(--danger); }

/* Коробка для таблицы: уезжает вбок она, а не страница. Иначе браузер на
   телефоне отъезжает, чтобы вместить самую широкую строку, и всё остальное
   становится мелким — включая кнопки, по которым надо попасть. */
.scroller { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
table.grid th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
table.grid td { padding: 11px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid th.num { text-align: right; }
table.grid tr.off { opacity: .5; }
/* Строка оплаты открывается целиком: попадать в маленькую кнопку «подробнее»
   пальцем на планшете — отдельное упражнение. */
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover td { background: var(--paper-edge); }
.row-actions .field.slim {
  min-height: 36px;
  padding: 0 8px;
  font-size: 13px;
  width: auto;
}

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }

.form { display: grid; gap: 10px; margin-bottom: 24px; }
.form .line-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.form .field { flex: 1; min-width: 140px; }
select.field { appearance: none; }

/* Поле с подписью. Ряд безымянных окошек — загадка: что вписывать в третье,
   знает только тот, кто это писал. */
.field-box { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 5px; }
.field-box label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field-box .field { width: 100%; }
.field-hint { font-size: 12px; color: var(--ink-soft); }

/* PIN показывается один раз — и он должен читаться через всю подсобку. */
.pin-shown {
  margin: 14px 0;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.pin-shown .code {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.pin-shown .note { font-size: 13px; color: var(--ink-soft); }

.journal { font-size: 14px; }
.journal .when { color: var(--ink-faint); white-space: nowrap; }
.journal .what { font-weight: 600; }
.journal .detail { color: var(--ink-soft); overflow-wrap: anywhere; }

/* Полоса состояния синхронизации меню в админке. */
.sync {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.sync .body { flex: 1; }
.sync .body b { font-family: var(--serif); font-size: 18px; }
.sync .muted { font-size: 13.5px; }
.sync .faint { font-size: 12.5px; color: var(--ink-faint); }
.sync.bad { border-left-color: var(--danger); background: var(--danger-bg); }
.sync.off { border-left-color: var(--ink-faint); }

/* ==========================================================================
   План зала

   Один и тот же план в двух местах: управляющий его расставляет, официант по
   нему работает. Координаты в процентах, поэтому зал, нарисованный на
   ноутбуке, узнаётся на телефоне.
   ========================================================================== */

.plan {
  position: relative;
  width: 100%;
  /* На широком экране план не растягивается во весь монитор: зал от этого
     понятнее не становится, а до дальнего стола приходится тянуться мышью. */
  max-width: 860px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background:
    linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0 / 100% 10%,
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 0 0 / 10% 100%,
    var(--paper-2);
  overflow: hidden;
  touch-action: none;          /* стол тащат пальцем, а не прокручивают зал */
}

.spot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;     /* координата — центр стола, а не угол */
  padding: 4px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-align: center;
  line-height: 1.15;
}
.spot .n { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.spot .seats { font-size: 10px; letter-spacing: .08em; color: var(--ink-faint); }
.spot .sum {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.spot .who {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--ink-soft);
}
/* Занятый стол — золотая обводка, как отчёркнутая позиция в меню. */
.spot.busy  { border-color: var(--gold); border-width: 2px; }
.spot.other { border-style: dashed; }
.spot .flags { display: flex; gap: 3px; }

/* Прямоугольный стол на четверых и больше — так план читается как зал,
   а не как россыпь кружков. */
.spot.wide { width: 96px; margin-left: -48px; border-radius: 40px; }

.spot.dragging { z-index: 5; box-shadow: 0 8px 22px rgba(29, 26, 22, .3); }
.plan.editing .spot { cursor: grab; }
.plan.editing .spot:active { cursor: grabbing; }

.plan-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.plan-bar .grow { flex: 1; }
.plan-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }

/* Зоны: у террасы свой план, и это правильно — она и в жизни отдельно. */
.zones { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.zones::-webkit-scrollbar { display: none; }

/* На телефоне план тот же, только столы мельче: иначе четыре в ряд
   наезжают друг на друга и по ним нельзя попасть. */
@media (max-width: 520px) {
  .spot { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .spot.wide { width: 76px; margin-left: -38px; border-radius: 32px; }
  .spot .n { font-size: 17px; }
  .spot .sum { font-size: 11px; }
  .spot .seats, .spot .who { font-size: 9px; }
  .spot .who { max-width: 54px; }
}

/* Шапка чека: сведения слева, «ещё чек» справа — компания за столом делится,
   и второй чек нужен прямо отсюда. */
.check-head { display: flex; align-items: flex-start; gap: 10px; margin: 4px 2px 12px; }
.check-head .muted { flex: 1; font-size: 13px; }
.check-head .split {
  flex: none;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
}

/* Марки внутри приложения зала: та же карточка, что на планшете, только
   в одну колонку и без собственного фона — она лежит на бумаге чека. */
.board.inline {
  min-height: 0;
  padding: 0;
  background: transparent;
  grid-template-columns: 1fr;
}