:root {
  --green-dark: #1f6b3f;
  --green: #2f8f57;
  --green-light: #e8f5ec;
  --border: #e2e5e9;
  --text: #1c2530;
  --text-muted: #6b7480;
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --danger: #c0392b;
  --yellow-bg: #fff6da;
  --yellow-border: #ecd98c;
  --yellow-text: #8a6d1a;
  --red-bg: #fdecea;
  --red-border: #f0b8ae;
  --stopped-bg: #eef0f2;
  --stopped-border: #dde1e5;
  /* Яркие цвета для ячеек "Остатки" — по просьбе Сергея сделать заметнее
     издалека (кухонный планшет), сплошная заливка вместо бледного тона. */
  --stock-green-bg: #1fa855;
  --stock-green-border: #157a3d;
  --stock-yellow-bg: #ffc82e;
  --stock-yellow-border: #d99a00;
  --stock-yellow-text: #5a3d00;
  --stock-red-bg: #e0342b;
  --stock-red-border: #a8241d;
  /* Разделы карточки стола / "Итого по посадке" — лёгкие оттенки по
     категории (Салаты/Супы/Горячее), по просьбе Сергея. */
  --cat-salad-bg: #eaf7ec;
  --cat-salad-border: #bfe3c8;
  --cat-salad-text: #2f7a44;
  --cat-soup-bg: #fff3e0;
  --cat-soup-border: #f0d9a8;
  --cat-soup-text: #9a6a12;
  --cat-hot-bg: #fdece8;
  --cat-hot-border: #f0c4b8;
  --cat-hot-text: #b23c22;
  --cat-other-bg: #eef0f2;
  --cat-other-border: #dde1e5;
  --cat-other-text: #6b7480;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.header {
  background: var(--green-dark);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header .brand-mark {
  width: 36px;
  height: 36px;
  background: #fff;
  color: var(--green-dark);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.header .brand-name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
}

.header .brand-sub {
  font-size: 12px;
  opacity: 0.85;
}

.header .meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

.header .meta a {
  color: #fff;
  text-decoration: underline;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.tabs {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.tabs a {
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}

.tabs a.active {
  background: var(--green-dark);
  color: #fff;
}

.tabs a:not(.active):hover {
  background: var(--green-light);
}

h1 {
  font-size: 24px;
  margin: 0 0 4px;
}

.page-sub {
  color: var(--text-muted);
  margin: 0 0 20px;
  font-size: 14px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.card .label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.card .value {
  font-size: 28px;
  font-weight: 700;
}

.panel {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.panel h2 {
  margin-top: 0;
  font-size: 17px;
}

.panel .panel-sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: -8px;
  margin-bottom: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
}

td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}

.badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}

.badge.muted {
  background: #eef0f2;
  color: var(--text-muted);
}

.badge.stop {
  background: #fdecea;
  color: var(--danger);
}

.num {
  font-weight: 700;
}

.num.warn {
  color: var(--danger);
}

.empty-state {
  color: var(--text-muted);
  padding: 30px 0;
  text-align: center;
}

.dish-group {
  margin-bottom: 22px;
}

.dish-group:last-child {
  margin-bottom: 0;
}

.dish-group h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.dish-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--border);
  font-size: 16px;
}

.dish-line:last-child {
  border-bottom: none;
}

.dish-line .qty {
  font-weight: 700;
  color: var(--green-dark);
}

.grid-table {
  overflow-x: auto;
}

/* Ячейки "Остатки" (по просьбе Сергея, "Сегодня") — одна ячейка на
   позицию меню (кроме напитков), цвет по остатку: зелёный обычно,
   жёлтый при остатке 5 и меньше, красный при 2 и меньше, "стоп" — бледная,
   не светится (0 или меньше, либо явный /stop). */
.stock-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 4px 0 4px;
}

.stock-cell {
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
}

.stock-cell .stock-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  line-height: 1.25;
}

.stock-cell .stock-count {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.stock-cell .stock-stop-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* "Из них с собой" у супов/салатов (по просьбе Сергея, 2026-09) —
   маленькая плашка под основной цифрой "заказано/остаток", отдельным
   цветом от самого счётчика, чтобы сразу считывалась глазом, но не
   спорила с ним за внимание. Контраст подобран отдельно под каждый цвет
   ячейки (см. .stock-cell.status-*) — та же логика, что и у кнопок
   ниже (.stock-form button и т.д.): полупрозрачный белый на насыщенных
   зелёном/красном, потемнее оверлей на жёлтом, нейтральный — везде
   остальном (стоп/без остатка). */
.stock-cell .stock-takeaway {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.stock-cell.status-green .stock-takeaway,
.stock-cell.status-red .stock-takeaway {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.stock-cell.status-yellow .stock-takeaway {
  background: rgba(0, 0, 0, 0.14);
  color: var(--stock-yellow-text);
}

.stock-cell .stock-form {
  display: flex;
  gap: 6px;
}

.stock-cell .stock-form input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.stock-cell .stock-form button {
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
  white-space: nowrap;
}

/* Яркие, насыщенные заливки — по просьбе Сергея заметнее издалека
   (кухонный планшет), а не бледный оттенок. У "стоп" заливка нарочно
   остаётся бледной — это отдельный, изначально согласованный сигнал
   "не светится". */
.stock-cell.status-green {
  background: var(--stock-green-bg);
  border-color: var(--stock-green-border);
}

.stock-cell.status-green .stock-name,
.stock-cell.status-green .stock-count {
  color: #ffffff;
}

.stock-cell.status-yellow {
  background: var(--stock-yellow-bg);
  border-color: var(--stock-yellow-border);
}

.stock-cell.status-yellow .stock-name,
.stock-cell.status-yellow .stock-count {
  color: var(--stock-yellow-text);
}

.stock-cell.status-red {
  background: var(--stock-red-bg);
  border-color: var(--stock-red-border);
}

.stock-cell.status-red .stock-name,
.stock-cell.status-red .stock-count {
  color: #ffffff;
}

.stock-cell.status-green .stock-form input[type="number"],
.stock-cell.status-yellow .stock-form input[type="number"],
.stock-cell.status-red .stock-form input[type="number"] {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
}

.stock-cell.status-green .stock-form button,
.stock-cell.status-red .stock-form button {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
}

.stock-cell.status-yellow .stock-form button {
  background: rgba(0, 0, 0, 0.12);
  color: var(--stock-yellow-text);
}

/* Кнопка "🚫 Стоп"/"Снять стоп" в ячейке "Остатки" (по просьбе Сергея) —
   одно нажатие, тот же bot.menu.set_stop, что и /stop-/unstop бота.
   Отдельная форма под "OK" по остатку — та же ширина, во всю ячейку. */
.stock-cell .stock-stop-form {
  margin-top: 6px;
}

.stock-cell .stock-stop-form button {
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.08);
}

.stock-cell .stock-stop-form button.btn-stop {
  color: var(--danger);
}

.stock-cell .stock-stop-form button.btn-unstop {
  color: var(--green-dark);
}

/* На насыщенных цветных ячейках — та же логика контраста, что и у
   ".stock-form button" выше: полупрозрачный белый фон на зелёной/
   красной/бледной "стоп", потемнее на жёлтой. */
.stock-cell.status-green .stock-stop-form button,
.stock-cell.status-red .stock-stop-form button,
.stock-cell.status-stopped .stock-stop-form button {
  background: rgba(255, 255, 255, 0.92);
}

.stock-cell.status-yellow .stock-stop-form button {
  background: rgba(0, 0, 0, 0.12);
}

.stock-cell.status-stopped {
  background: var(--stopped-bg);
  border-color: var(--stopped-border);
  opacity: 0.7;
}

.stock-cell.status-stopped .stock-count {
  color: var(--text-muted);
}

.stock-cell.status-no_limit {
  background: var(--card-bg);
}

.stock-cell.status-no_limit .stock-count {
  color: var(--text-muted);
}

/* Шахматка "Столы" — по просьбе Сергея: ровные линии между ячейками и
   одинаковый размер у всех ячеек (и колонки времени, и столиков),
   независимо от того, сколько текста внутри. table-layout: fixed
   вместе с шириной колонок в colgroup ниже держит это железно — ячейка
   не "разъезжается" от длинного имени, а перевод строки внутри ячейки
   происходит по словам (overflow-wrap). */
table.grid {
  table-layout: fixed;
  border-collapse: collapse;
}

table.grid col.grid-col-time {
  width: 90px;
}

table.grid col.grid-col-table {
  width: 130px;
}

table.grid th,
table.grid td {
  border: 1px solid var(--border);
}

table.grid th {
  border-bottom: 1px solid var(--border);
}

.grid-time {
  height: 64px;
  vertical-align: middle;
  text-align: center;
}

.grid-cell {
  height: 64px;
  vertical-align: top;
  padding: 6px 8px;
  overflow: hidden;
}

.cell-booking {
  padding: 3px 0;
  overflow-wrap: break-word;
}

.cell-booking + .cell-booking {
  border-top: 1px dashed var(--border);
}

.cell-guest {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.cell-drinks {
  font-size: 11px;
  color: var(--green-dark);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.cell-occupied {
  background: #fff6df;
}

.cell-free {
  background: #f2faf4;
}

/* Управление шахматкой кликом (по просьбе Сергея, 2026-09) — карточка
   гостя кликабельна (выбор), а сама ячейка подсвечивается при наведении,
   пока выбор активен, как подсказка "сюда можно посадить". См.
   tables.html/tables_move_booking в dashboard/app.py. */
.cell-booking {
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.cell-booking:hover {
  background: rgba(0, 0, 0, 0.05);
}

.cell-booking-selected {
  background: var(--green-light) !important;
  outline: 2px solid var(--green-dark);
  outline-offset: -2px;
}

.tables-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-dark);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 320px;
}

.login-card h1 {
  text-align: center;
  margin-bottom: 20px;
}

.login-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 14px;
}

.login-card button {
  width: 100%;
  padding: 10px 12px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.login-error {
  color: var(--danger);
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}

.flash {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  white-space: pre-line;
}

.flash-ok {
  background: var(--green-light);
  color: var(--green-dark);
}

.flash-error {
  background: #fdecea;
  color: var(--danger);
}

.manual-order-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.manual-order-form input[type="text"] {
  flex: 1 1 200px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

.manual-order-form textarea {
  flex: 2 1 320px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.manual-order-form select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

.manual-order-form button {
  padding: 9px 18px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* "Доп. списание без брони" (по просьбе Сергея) — звонок вне обеда,
   N порций одного блюда без разбивки по гостям, без брони/чека на
   кухню; списывает прямо из уже заданного остатка (см. /menu/writeoff
   в dashboard/app.py). Та же визуальная форма, что и у ручного ввода
   брони в "Заказы" (.manual-order-form) — просто отдельный класс,
   чтобы не путать эти два разных действия. */
.writeoff-heading {
  margin: 18px 0 4px;
  font-size: 15px;
}

.writeoff-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.writeoff-form select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

.writeoff-form input[type="number"] {
  width: 140px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

.writeoff-form button {
  padding: 9px 18px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* Форма "Новый заказ" (шаг 2) — по гостю в отдельном fieldset, чтобы на
   планшете/телефоне было видно, где заканчивается один гость и
   начинается следующий, даже когда гостей много. */
.new-order-guest {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin-bottom: 14px;
}

.new-order-guest legend {
  font-weight: 700;
  padding: 0 6px;
}

.new-order-guest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.new-order-guest-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.new-order-guest-grid select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  background: #fff;
}

.new-order-comment {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.new-order-submit {
  padding: 12px 22px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin: 4px 0 20px;
}

/* "+ Добавить ещё гостя" на шаге 2 "Доставка — по гостям" (по просьбе
   Сергея, 2026-09) — та же зелёная пунктирная рамка, что и .guest-add-btn
   у уже сохранённого заказа, только это <button type="submit"> с
   formaction (см. delivery_guests_step2.html), а не <a> — нажатие
   отправляет всю форму (уже введённые блюда гостей сохраняются) на
   отдельный роут, который просто перерисовывает шаг 2 с people+1. */
.new-order-add-guest-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin: 0 0 14px;
  border: 1px dashed var(--green);
  border-radius: 8px;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.new-order-add-guest-btn:hover {
  background: var(--green);
  color: #fff;
}

/* "Взять с собой" по гостю (по просьбе Сергея) — одно-два блюда этого
   гостя навынос, пока сам гость сидит за столом; показывается только
   для "В зале" (для "С собой" и так весь заказ навынос). */
.new-order-takeaway {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13px;
}

.new-order-takeaway-label {
  color: var(--text-muted);
  flex-basis: 100%;
  margin-bottom: 2px;
}

.new-order-takeaway label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  cursor: pointer;
}

/* "Весь заказ — с собой" (по просьбе Сергея, 2026-09) — быстрый способ
   отметить сразу все блюда гостя навынос одной галочкой вместо трёх по
   отдельности; лёгкая рамка справа отделяет её от блюд-по-отдельности. */
.new-order-takeaway-all {
  padding-right: 14px;
  border-right: 1px solid var(--border);
}

/* Пометка "стоп" у десерта в "Новый заказ" (по просьбе Сергея) — сама
   позиция закончилась (is_sold_out), тот же бледный тон, что и ячейка
   "Остатки" в статусе "стоп" (см. .stock-cell.status-stopped). Опции
   блюд в <select> помечаются тем же текстом "— стоп" прямо в подписи
   (см. new_order_guests.html) и получают disabled — отдельного класса
   для них не нужно, браузер сам показывает disabled-опции бледными. */
.stop-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--stopped-bg);
  border: 1px solid var(--stopped-border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.btn-cancel {
  padding: 6px 12px;
  background: #fdecea;
  color: var(--danger);
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* Повторная печать чека (по просьбе Сергея — испортился/потерялся
   бумажный чек) — нейтральный тон, намеренно не красный и не зелёный,
   чтобы не путать ни с "Отменить" (btn-cancel), ни с положительным
   confirm-действием: печать сама по себе ничего не меняет в брони. */
.btn-print {
  padding: 6px 12px;
  background: var(--stopped-bg);
  color: var(--text);
  border: 1px solid var(--stopped-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-print:hover {
  background: var(--stopped-border);
}

/* Обёртка для нескольких кнопок-действий в одной ячейке/карточке
   (печать + отменить) — в ряд, с небольшим отступом между ними. */
.row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* "Посадки" (по просьбе Сергея) — обзорные карточки посадок 11:00-15:00
   и карточки столов внутри одной посадки, см. dashboard/app.py. */
.seating-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.seating-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--text);
}

.seating-time {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.seating-free-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.seating-free-tables {
  font-size: 18px;
  font-weight: 700;
}

.seating-card-full {
  background: var(--stock-green-bg);
  border-color: var(--stock-green-border);
  color: #fff;
}

.seating-full-label {
  font-size: 16px;
  font-weight: 700;
}

.btn-back {
  align-self: center;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* 7 столов в ряд на одном экране (по просьбе Сергея) — те же 7 id, что и
   в config/tables.json и на шахматке "Столы" (1,2,3,4,5.1,5.2,6), поэтому
   фиксированное число колонок вместо auto-fit: карточки не расползаются
   по 3-4 в ряд на широком экране, а всегда стоят в одну строку рядом
   друг с другом, как столы в зале. На узких экранах (планшет/телефон) —
   откат на auto-fit ниже, см. media-запрос в конце файла. */
.table-cards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 20px 0;
  align-items: start;
}

/* Несколько броней ОДНОГО стола (стол 2 — общий, см. config/tables.json:
   max_parties) теперь стоят в один столбец, друг под другом, а не рядом
   по горизонтали (по просьбе Сергея, 2026-09) — так сразу видно, что это
   один физический стол с несколькими компаниями, а не разные столы. */
.table-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.table-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 8px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  min-width: 0;
}

/* Пустой стол (по просьбе Сергея, 2026-09) — либо на него вообще нет
   брони на этот слот, либо бронь только что удалили ("Удалить заказ"):
   лёгкая пунктирная заглушка без кнопок, самая левая в ряду (см.
   сортировку в seating_detail), чтобы официант видел весь зал сразу, а
   не только занятые столы. Специально бледнее обычной карточки — тут
   нечего "отдавать" и не с чем работать. */
.table-card.table-card-empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--border);
  box-shadow: none;
}

.table-card.table-card-empty .table-card-number {
  color: var(--text-muted);
}

.table-card.table-card-empty .table-card-lines .empty-state {
  padding: 4px 0 0;
}

.table-card-head {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.table-card-number {
  font-size: 15px;
  font-weight: 700;
}

.table-card-guest {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.table-card-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* "Удалить заказ" (по просьбе Сергея, 2026-09) — гость не пришёл или
   отменил бронь целиком; отдельный низ карточки, чтобы не путать с
   кнопками самих блюд/"Стол пришёл" выше. Тот же красный тон, что и
   .btn-cancel на "Заказы"/"Заказы с собой" — визуально одна и та же
   опасная операция, просто с карточки стола, а не из таблицы. */
.table-card-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  text-align: right;
}

.cancel-booking-btn {
  padding: 4px 8px;
  background: #fdecea;
  color: var(--danger);
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* Подсказка "Заказ по гостям →" (по просьбе Сергея, 2026-09) — карточка
   брони, оформленной кнопками/формой "Новый заказ", кликабельна целиком
   (кроме самих кнопок отдано/пришёл/удалить — у них свои обработчики,
   см. JS ниже) и ведёт на отдельный экран seating_booking_detail. Эта
   строка — просто визуальная подсказка, что карточка кликабельна, сама
   по себе никакого отдельного обработчика не имеет — клик по ней тоже
   ловится общим обработчиком клика по карточке. */
.table-card.table-card-clickable {
  cursor: pointer;
}

.table-card-detail-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* "По гостям" (по просьбе Сергея, 2026-09) — кто из гостей что заказал,
   можно убрать конкретного гостя (не пришёл) или отметить одно его блюдо
   "с собой". Раньше был разворачивающийся блок прямо на карточке стола;
   теперь отдельный экран seating_booking_detail.html (клик по карточке
   на /seatings/<slot>, см. .table-card-clickable/.table-card-detail-hint
   выше) — эти классы там и используются, .panel вокруг уже задаёт нужные
   отступы самой страницы. */
.guest-row {
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 6px;
}

.guest-row:first-child {
  margin-top: 0;
}

.guest-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.guest-row-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  line-height: 1.35;
}

.guest-remove-btn {
  flex-shrink: 0;
  padding: 3px 7px;
  background: #fdecea;
  color: var(--danger);
  border: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* "✎ изменить" на строке гостя (по просьбе Сергея, 2026-09: "нужно
   добавить возможность редактировать заказ каждого гостя, сейчас можно
   только удалить") — нейтральный (не красный, не зелёный) маленький
   значок-ссылка рядом с "✕ убрать гостя", та же геометрия кнопки, просто
   свой цвет, чтобы не путать правку с удалением. */
.guest-edit-btn {
  flex-shrink: 0;
  padding: 3px 7px;
  background: #eef0f2;
  color: var(--text-muted);
  border: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.guest-edit-btn:hover {
  background: #e2e5e9;
}

.guest-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.guest-row-items {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.guest-item-toggle {
  padding: 3px 7px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}

.guest-item-toggle.active {
  background: var(--yellow-bg);
  border-color: var(--yellow-border);
  color: var(--yellow-text);
  font-weight: 700;
}

/* delivery_guests_detail.html — тот же список блюд гостя, что и
   .guest-item-toggle у "Посадок", но не кнопка: у доставки нет "с собой",
   переключать нечего, поэтому просто текстовые бирки для чтения. */
.guest-row-item-plain {
  padding: 3px 7px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
}

/* "+ Добавить гостя" на экране seating_booking_detail (по просьбе
   Сергея, 2026-09) — за стол подсело больше людей, чем было в брони.
   Зелёный тон и пунктирная рамка нарочно противоположны красной
   "✕ не пришёл" выше — явно другое, положительное действие. Обычная
   ссылка <a>, а не форма/кнопка — просто ведёт на форму выбора блюд
   (seating_guest_add), сохранять здесь нечего. */
.guest-add-btn {
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--green);
  border-radius: 6px;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.guest-add-btn:hover {
  background: var(--green);
  color: #fff;
}

/* Разделы Салаты/Супы/Горячее внутри карточки стола (по просьбе Сергея,
   2026-09: разноцветная заливка по категориям отвлекает — оставляем
   только нейтральную рамку-прямоугольник вокруг раздела и подпись сверху,
   без цвета. Цветом и ярлычком (🥡) теперь выделяется только позиция "с
   собой" (см. .serve-line-takeaway ниже) — это и есть то, что реально
   нужно заметить с первого взгляда, а не сама категория блюда. Напитки
   сюда не попадают (см. _booking_dish_lines), а "cat-other" — просто
   подстраховка на случай не предусмотренной категории, в реальных
   заказах не встречается. */
.cat-group {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

/* Карточка стола целиком "отдана" (table-card-done, заливка зелёным) —
   рамки разделов внутри становятся полупрозрачно-белыми, чтобы быть
   видны на сплошном зелёном фоне (тот же приём, что и у .serve-line
   ниже для этого состояния). */
.table-card.table-card-done .cat-group {
  border-color: rgba(255, 255, 255, 0.4);
}

.table-card.table-card-done .cat-group-label {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.serve-line {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  min-width: 0;
}

.serve-check {
  visibility: hidden;
  font-weight: 700;
  color: var(--green-dark);
}

.serve-line.served .serve-check {
  visibility: visible;
}

.serve-line.served {
  background: var(--green-light);
  border-color: var(--green-dark);
}

.serve-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.serve-qty {
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.serve-line.served .serve-qty {
  color: var(--green-dark);
}

.serve-line-unmatched {
  cursor: default;
  background: var(--yellow-bg);
  border-color: var(--yellow-border);
  color: var(--yellow-text);
}

/* Позиция гостя "с собой" внутри брони "в зале" (по просьбе Сергея,
   2026-09) — та же мягкая пастельная жёлтая пара (--yellow-*), что и у
   .serve-line-unmatched выше, а не насыщенный --stock-yellow-* "Стол
   пришёл": та заливка — на весь стол и означает "начинайте готовить
   прямо сейчас", здесь же просто постоянная метка одной позиции
   ("упаковать, а не подать за стол") — не должна выглядеть так же тревожно
   и не должна визуально сливаться с сигналом "стол пришёл". Не путать с
   .serve-line.served (зелёный "отдано") — оба класса могут стоять
   одновременно. */
.serve-line-takeaway {
  border-color: var(--yellow-border);
}

.serve-line-takeaway:not(.served) {
  background: var(--yellow-bg);
  color: var(--yellow-text);
}

.table-card.table-card-done {
  background: var(--stock-green-bg);
  border-color: var(--stock-green-border);
}

.table-card.table-card-done .table-card-number,
.table-card.table-card-done .table-card-guest {
  color: #fff;
}

.table-card.table-card-done .table-card-head {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.table-card.table-card-done .serve-line {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.table-card.table-card-done .serve-qty,
.table-card.table-card-done .serve-check {
  color: #fff;
}

/* "Стол пришёл / начинайте готовить" (по просьбе Сергея) — жёлтая
   заливка, чтобы не путать с зелёным "отдано": жёлтый = "начинайте с
   этого стола прямо сейчас", зелёный = "этот стол уже полностью готов".
   Кнопка-переключатель в шапке карточки — обычное серое состояние, когда
   не нажата, и та же жёлтая заливка, когда активна. */
.arrived-toggle {
  margin-top: 6px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--stock-yellow-border);
  background: var(--bg);
  color: var(--stock-yellow-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.arrived-toggle.active {
  background: var(--stock-yellow-bg);
  border-color: var(--stock-yellow-border);
  color: var(--stock-yellow-text);
}

.table-card.table-card-arrived {
  background: var(--stock-yellow-bg);
  border-color: var(--stock-yellow-border);
  border-width: 2px;
}

.table-card.table-card-arrived .table-card-number,
.table-card.table-card-arrived .table-card-guest {
  color: var(--stock-yellow-text);
}

.table-card.table-card-arrived .table-card-head {
  border-bottom-color: var(--stock-yellow-border);
}

.table-card.table-card-arrived .arrived-toggle {
  background: #fff;
  border-color: var(--stock-yellow-text);
}

/* Рамки разделов (Салаты/Супы/Горячее) на сплошном жёлтом фоне "Стол
   пришёл" — тот же приём, что и у table-card-done выше, только цвет
   подписи берём из --stock-yellow-text, как и у остальных элементов
   этого состояния (arrived-toggle, номер стола). */
.table-card.table-card-arrived .cat-group {
  border-color: rgba(255, 255, 255, 0.5);
}

.table-card.table-card-arrived .cat-group-label {
  color: var(--stock-yellow-text);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* "Итого по посадке" — теперь тремя разделами (Салаты/Супы/Горячее, по
   просьбе Сергея), тот же приём лёгких оттенков + цветной линии, что и в
   карточке стола (см. .cat-group выше), только крупнее — тут места
   больше, панель на всю ширину экрана вверху страницы. */
.seating-totals-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.seating-totals-group {
  border-radius: 8px;
  padding: 10px 14px 12px;
}

.seating-totals-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 2px solid transparent;
}

.seating-totals-group.cat-salad {
  background: var(--cat-salad-bg);
}

.seating-totals-group.cat-salad .seating-totals-group-label {
  color: var(--cat-salad-text);
  border-bottom-color: var(--cat-salad-border);
}

.seating-totals-group.cat-soup {
  background: var(--cat-soup-bg);
}

.seating-totals-group.cat-soup .seating-totals-group-label {
  color: var(--cat-soup-text);
  border-bottom-color: var(--cat-soup-border);
}

.seating-totals-group.cat-hot {
  background: var(--cat-hot-bg);
}

.seating-totals-group.cat-hot .seating-totals-group-label {
  color: var(--cat-hot-text);
  border-bottom-color: var(--cat-hot-border);
}

.seating-totals-group.cat-other {
  background: var(--cat-other-bg);
}

.seating-totals-group.cat-other .seating-totals-group-label {
  color: var(--cat-other-text);
  border-bottom-color: var(--cat-other-border);
}

.seating-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seating-total-line {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: 14px;
}

.seating-total-line:last-child {
  border-bottom: none;
}

.seating-total-qty {
  font-weight: 700;
}

/* «Заказы с собой» — карточки, разбитые по времени колонками (по
   просьбе Сергея, 2026-09, вместо прежней таблицы строк). Колонок
   заранее не известное число (сколько разных времён набралось на
   сегодня), поэтому auto-fit, а не фиксированные 7, как у .table-cards
   (там всегда ровно 7 физических столов). Внутри колонки карточки
   одного времени стоят друг под другом. */
.takeaway-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 20px 0;
  align-items: start;
}

.takeaway-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.takeaway-column-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--green-light);
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
}

.takeaway-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  min-width: 0;
}

.takeaway-card-head {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.takeaway-card-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
}

.takeaway-card-guest {
  font-size: 13px;
  color: var(--text);
  overflow-wrap: break-word;
}

.takeaway-card-order {
  font-size: 13px;
  white-space: pre-line;
  line-height: 1.35;
  margin-bottom: 8px;
}

.takeaway-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.takeaway-card-source {
  font-size: 11px;
  color: var(--text-muted);
}

/* «Доставка» — список заказов в виде карточек, как на "Посадках" (см.
   .table-card/.cat-group/.serve-line выше), по просьбе Сергея, 2026-09:
   вместо прежней таблицы строк с одной длинной строкой заказа — те же
   плашки блюд по разделам (Салаты/Супы/Горячее/...), только шапка
   карточки — название организации/адреса, а не номер стола (у доставки
   столов нет вообще, см. DELIVERY_TABLE_ID). Карточек заранее не
   известное количество, поэтому auto-fit-сетка, как у .takeaway-columns,
   а не фиксированные 7 колонок, как у .table-cards (там всегда 7
   физических столов зала). */
.delivery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 20px 0;
  align-items: start;
}

/* Плашки блюд на "Доставке" — визуально те же .serve-line, что и на
   карточке стола, но НЕ кликабельные: на доставке не нужно отмечать
   "отдано" по каждому блюду отдельно, заказ уезжает клиенту целиком. */
.serve-line-static {
  cursor: default;
}

/* Учёт ланчей по видам на карточке "Доставка — по гостям" (по просьбе
   Сергея, 2026-09: "нужно вести учет ланчей по видам и количеству") —
   маленькие серые плашки под шапкой карточки, до списка блюд по
   разделам: "Полный × 2, Суп+салат × 1, Только суп × 1" и т.п. — только
   те виды, что реально встретились у гостей этого заказа (см.
   _lunch_type_counts). Нейтральный серый, а не цветной — это счётчик
   для владельца/кухни, не часть самого заказа блюд ниже. */
.lunch-type-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -2px 0 8px;
}

.lunch-type-chip {
  display: inline-block;
  background: #eef0f2;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* "Изменить состав →" на карточке доставки "по гостям" — та же
   подсказка-ссылка, что и .table-card-detail-hint на "Посадках", но там
   это просто текст внутри кликабельной целиком карточки, а здесь
   отдельная ссылка (карточка доставки целиком не кликабельна). */
a.table-card-detail-hint {
  display: block;
  text-decoration: none;
}

/* На узких экранах (планшет/телефон) фиксированные 7 колонок ужали бы
   карточку стола до нечитаемой ширины — откатываемся на auto-fit, как
   было раньше; 7-в-ряд рассчитан на широкий экран зала/кухни. */
@media (max-width: 1000px) {
  .table-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .takeaway-columns {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 640px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }
  th, td {
    padding: 8px 6px;
  }
}

/* "Новый заказ" на "Кухне" (по просьбе Сергея) — должно быть заметно
   издалека на кухонном планшете, тем же принципом яркой сплошной заливки,
   что и остатки блюд (--stock-*). Мигает несколько раз через CSS-анимацию
   (без JS) и остаётся видимой до следующего автообновления страницы. */
.kitchen-alert-banner {
  margin: 0 0 16px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--stock-red-bg);
  border: 3px solid var(--stock-red-border);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5px;
  animation: kitchen-alert-blink 1s ease-in-out 5;
}

@keyframes kitchen-alert-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Вкладка "Доставка" (по просьбе Сергея, 2026-09) — две большие ссылки-
   кнопки на два вида заказа (по гостям / общий), тот же зелёный акцент,
   что и .new-order-submit, только как <a>, а не <button> — ведут на
   форму, сохранять здесь нечего (тот же принцип, что и .guest-add-btn). */
.delivery-new-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.btn-primary {
  padding: 12px 22px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--green);
}

/* Форма "общего" заказа на доставку, шаг 2 (delivery_bulk_step2.html) —
   по каждой категории список ВСЕХ блюд дня, у каждого просто поле
   "количество" вместо выбора одного варианта (по просьбе Сергея,
   2026-09: несколько видов супов/горячих/салатов сразу, гарнир отдельной
   строкой независимо от горячего) — принципиально другой ввод, чем в
   .new-order-guest-grid (там один <select> на гостя), поэтому свой
   класс, а не переиспользование той сетки. */
.delivery-bulk-group {
  margin-bottom: 16px;
}

.delivery-bulk-group h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.delivery-bulk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.delivery-bulk-row:last-child {
  border-bottom: none;
}

.delivery-bulk-row-name {
  flex: 1 1 auto;
}

.delivery-bulk-row input[type="number"] {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

.delivery-bulk-row.is-stopped .delivery-bulk-row-name {
  color: var(--text-muted);
}

/* Таблица "Горячее × Гарнир" на шаге 2 общего заказа доставки (по
   просьбе Сергея, 2026-09) — каждая пара горячее+гарнир своя ячейка со
   своим количеством, чтобы можно было заказать сразу несколько разных
   пар (например "Цыплёнок — Пюре" и "Рыба — Спагетти" одновременно).
   Скролл по горизонтали на случай, если гарниров в меню дня много и
   таблица не помещается на телефоне. */
.delivery-hotgrid-scroll {
  overflow-x: auto;
}

.delivery-hotgrid {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
}

.delivery-hotgrid th,
.delivery-hotgrid td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
}

.delivery-hotgrid thead th {
  font-weight: 700;
  color: var(--text-muted);
}

.delivery-hotgrid tbody th {
  text-align: left;
  font-weight: 600;
}

.delivery-hotgrid tr.is-stopped th {
  color: var(--text-muted);
}

.delivery-hotgrid input[type="number"] {
  width: 60px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}