/* Все цвета — через переменные: тёмная тема переопределяет их одним блоком,
   а правила ниже остаются одними и теми же. */
:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --ink: #1b2430;
  --muted: #6b7787;
  --line: #d8dee8;
  --accent: #1f5fd0;
  --accent-soft: #e8f0fe;
  --ok: #1c7c3f;
  --warn: #a86400;
  --err: #b3261e;
  --input-bg: #ffffff;
  --th-bg: #eef2f8;
  --tab-bg: #eaeef4;
  --row-mark: #eef2f8;
  --total-bg: #f7f9fc;
  --ok-bg: #eaf7ee;    --ok-line: #bde3c8;
  --err-bg: #fdeceb;   --err-line: #f3c9c5;
  --warn-bg: #fdf4e6;  --warn-line: #f0dcc0;
  --danger-line: #eccac7;
  --on-accent: #ffffff;
  --shadow: rgba(20, 28, 40, .35);
}

/* Тёмная тема. Включается атрибутом data-theme="dark" на <html>: его ставит скрипт в
   шапке страницы до отрисовки, поэтому светлый экран не мелькает. Печать принудительно
   светлая (блок @media print ниже) — тёмный лист на бумаге не нужен. */
html[data-theme="dark"] {
  --bg: #10151b;
  --panel: #1a212a;
  --ink: #e7ecf3;
  --muted: #a9b6c7;
  --line: #2d3744;
  --accent: #7ab0ff;
  --accent-soft: #1d2a3d;
  --ok: #6ecb8f;
  --warn: #e3b770;
  --err: #f08e86;
  --input-bg: #131920;
  --th-bg: #222c38;
  --tab-bg: #222c38;
  --row-mark: #26313f;
  --total-bg: #1f2936;
  --ok-bg: #16301f;    --ok-line: #2c5a3d;
  --err-bg: #3a1f1e;   --err-line: #6c3632;
  --warn-bg: #33280f;  --warn-line: #6a5527;
  --danger-line: #6c3632;
  --on-accent: #0d1218;
  --shadow: rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.top {
  display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
header.top .brand { font-weight: 700; font-size: 15px; }
header.top .spacer { flex: 1; }
header.top .who { color: var(--muted); font-size: 13px; }
#theme-toggle { font-size: 15px; padding: 4px 9px; }

main { padding: 18px; max-width: 100%; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.card h2 { margin: 0 0 12px; font-size: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.grow { flex: 1; }

button, .btn {
  font: inherit; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); cursor: pointer;
}
button:hover, .btn:hover { background: var(--accent-soft); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover { filter: brightness(1.07); }
button.danger { color: var(--err); border-color: var(--danger-line); }
button.ghost { border-color: transparent; background: transparent; }

input, select, textarea {
  font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--input-bg); color: var(--ink); max-width: 100%;
}
label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12.5px; }
.field { margin-bottom: 12px; }

table { border-collapse: collapse; width: 100%; background: var(--panel); }
th, td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; vertical-align: middle; }
th { background: var(--th-bg); font-weight: 600; position: sticky; top: 0; z-index: 2; }
td.num, th.num { text-align: right; }
td.center, th.center { text-align: center; }

.grid-wrap { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--line); border-radius: 8px; }

/* Печатная форма: таблица показывается целиком, листается сама страница. Внутренняя
   прокрутка (max-height выше) здесь вредна — из-за неё не видно, сколько всего строк,
   а при печати и так всё разбивается на листы. */
.grid-wrap.no-clip { max-height: none; overflow: visible; }

/* Вкладки цехов: полоса сразу под заголовком, активная — как открытая страница. */
.tabs {
  display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap;
  padding: 8px 18px 0; background: var(--bg);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.tabs-tail { flex: 1; }
.tab {
  padding: 7px 14px; border: 1px solid var(--line); border-bottom: none;
  border-radius: 8px 8px 0 0; background: var(--tab-bg); color: var(--ink);
  font-size: 13.5px; line-height: 1.2; white-space: nowrap;
}
.tab:hover { background: var(--accent-soft); text-decoration: none; }
.tab.active { background: var(--panel); font-weight: 600; }
.tab.manage { color: var(--muted); background: transparent; border-color: transparent; }
.tab.manage:hover { color: var(--accent); background: var(--accent-soft); }
.tab.manage.active { color: var(--ink); background: var(--panel); border-color: var(--line); }
@media (max-width: 700px) {
  .tabs { padding: 6px 10px 0; }
  .tab { padding: 6px 10px; font-size: 13px; }
}
.grid-wrap input.qty { width: 74px; text-align: right; }

/* Строки листа — компактные: блюд в цехе много, а при «форменных» отступах на экран
   влезает вдвое меньше позиций. Поля ввода здесь ниже, чем в остальных формах. */
.grid-wrap th { padding: 4px 7px; }
.grid-wrap td { padding: 2px 6px; line-height: 1.25; }
.grid-wrap td input { padding: 0 5px; height: 22px; }
/* кнопки внутри строки (заполнить строку, удалить) тоже задавали высоту строки */
.grid-wrap td button { padding: 0 5px; line-height: 1.5; }

/* Заголовки покупателей — вертикально: имена длинные, а столбцов много, поэтому
   горизонтальные подписи съедают всю ширину таблицы. Ширину столбца задаём здесь же,
   иначе поле количества вернёт прежнюю ширину. */
.grid-wrap th.buyer {
  width: 44px; min-width: 44px; padding: 6px 2px;
  vertical-align: bottom; text-align: center;
}
.grid-wrap th.buyer .vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);   /* читается снизу вверх, как корешок книги */
  white-space: nowrap;
  overflow: hidden;
  max-height: 200px;
  margin: 0 auto;
  font-size: 12.5px;
}
/* Кнопка «×» в шапке не должна уширять столбец: иначе соседние покупатели
   получают разную ширину (45 и 50px) и таблица «дышит». */
.grid-wrap th.buyer form { margin: 2px 0 0; }
.grid-wrap th.buyer button { padding: 0 2px; min-width: 0; line-height: 1.2; }
.grid-wrap td.buyer-cell { width: 44px; min-width: 44px; padding: 4px 2px; }
.grid-wrap td.buyer-cell input.qty { width: 40px; padding: 0 2px; text-align: center; }

/* Порядок блюд — перетаскиванием за ручку: она должна выглядеть как «за что берут»,
   но места в строке почти не занимать. */
.grip { cursor: grab; color: var(--muted); user-select: none; margin-right: 4px; font-size: 12px; }
.grip:active { cursor: grabbing; }
tr.dragging { opacity: .5; }
tr.dragging td { background: var(--row-mark); }
.grid-wrap .sticky-l { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.grid-wrap thead th.sticky-l { z-index: 3; }
tr.total-row td { font-weight: 600; background: var(--total-bg); }

.flash { padding: 9px 13px; border-radius: 6px; margin-bottom: 12px; border: 1px solid; }
.flash.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.flash.err { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.flash.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

.login-wrap { max-width: 360px; margin: 8vh auto; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; background: var(--accent-soft); color: var(--accent); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.err { background: var(--err-bg); color: var(--err); }

dialog { border: 1px solid var(--line); border-radius: 8px; padding: 18px; max-width: 520px; width: 92%; background: var(--panel); color: var(--ink); }
dialog::backdrop { background: var(--shadow); }

/* Печать всегда светлая: бумага белая, и тёмная тема тут только мешает. Переменные
   переопределяем и для :root, и для тёмного селектора — иначе он выигрывает по весу. */
@media print {
  :root,
  html[data-theme="dark"] {
    --bg: #ffffff; --panel: #ffffff; --ink: #000000; --muted: #444444; --line: #999999;
    --input-bg: #ffffff; --th-bg: #eeeeee; --tab-bg: #eeeeee; --total-bg: #ffffff;
    --row-mark: #ffffff;
  }
  header.top, .no-print, button, .btn { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
  .card { border: 0; padding: 0; margin: 0; }
  .grid-wrap { max-height: none; overflow: visible; border: 0; }
  th, td { border: 1px solid #999; font-size: 11px; padding: 2px 4px; }
  th { background: #eee; position: static; }
  .grid-wrap input.qty { border: 0; width: auto; }
  /* на бумаге высоты больше, поэтому вертикальным именам даём длину побольше */
  .grid-wrap th.buyer .vert { max-height: 230px; font-size: 10.5px; }
  .print-head { display: block !important; }
  @page { size: A4 landscape; margin: 10mm; }
}
.print-head { display: none; margin-bottom: 10px; }