/* ============================================================================
   Система интерфейса «Этикетки»
   ============================================================================

   ЧТО ИЗМЕНИЛОСЬ И ПОЧЕМУ.

   Прежний вид был «инженерным чертежом»: сетка на фоне, уголки у панелей,
   моноширинный шрифт в подписях, капслок, заголовки колонок 9.5px. Красиво
   как приём, но читать тяжело — отсюда жалоба «непонятно, где какой столбец,
   что к чему относится».

   Взято из интерфейсов, которыми пользуются каждый день (Apple, Airbnb,
   Booking, Meta) — не внешний вид, а принципы:

   1. ВОЗДУХ ВМЕСТО ЛИНИЙ. Раньше блоки разделялись рамками и уголками.
      Теперь — расстоянием и мягкой тенью. Глазу не нужно продираться
      сквозь границы.

   2. ОДИН РАЗМЕР ТЕКСТА ДЛЯ ЧТЕНИЯ. База 15px вместо 13-14. Подписи не мельче
      12px. Мелкий текст был экономией места ценой усилий читающего.

   3. ИЕРАРХИЯ ВЕСОМ, А НЕ РЕГИСТРОМ. Капслок с разрядкой читается медленнее
      обычного текста. Заголовки теперь отличаются размером и насыщенностью.

   4. ЦВЕТ — СИГНАЛ, А НЕ УКРАШЕНИЕ. Бирюзовый только на действии и активном
      разделе. Статусы — мягкая заливка, а не рамка-обводка.

   5. ЦИФРЫ ВЫРАВНЕНЫ. Табличные цифры, выравнивание вправо: столбец сумм
      читается сверху вниз, разряды совпадают.

   6. СОСТОЯНИЯ ВИДНЫ. Наведение, фокус, загрузка, пустота — у каждого свой
      вид. Пустая таблица объясняет, что делать дальше.

   Фирменные цвета сохранены: бирюзовый и тёмно-синий Атеуко.
   ============================================================================ */

:root{
  /* поверхности */
  --bg:#f6f8f9;
  --surface:#ffffff;
  --surface-2:#fbfcfd;
  --field:#f4f7f8;
  --bg2:#ffffff;      /* старое имя поверхности: страницы ещё ссылаются на него */

  /* линии: тоньше и светлее, чем раньше — разделяют, но не режут */
  --line:#e8eef0;
  --line2:#d4dfe2;

  /* текст: три уровня вместо пяти, каждый с понятной ролью */
  --txt:#16232e;      /* основной */
  --dim:#5a6b78;      /* второстепенный */
  --faint:#93a3ad;    /* подписи, единицы */

  /* фирменные */
  --teal:#0f9aa4;
  --teal-dark:#0b7d86;
  --teal-soft:#e6f6f7;
  --navy:#24506f;

  /* имена из прежней версии — на них ещё ссылаются калькулятор и карточка заказа */
  --teal-deep:#0b7d86;
  --amber-deep:#8f5f16;
  --amber-glow:rgba(183,121,31,.16);

  /* смысловые */
  --danger:#d64b40;   --danger-soft:#fdeceb;
  --good:#1f8f63;     --good-soft:#e8f5ef;
  --amber:#b7791f;    --amber-soft:#fdf3e2;
  --blue:#2277ab;     --blue-soft:#e9f3f9;

  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --cond:'IBM Plex Sans Condensed',var(--sans);

  --r:10px;           /* скругление карточек */
  --r-sm:7px;         /* скругление кнопок и полей */
  --shadow:0 1px 2px rgba(22,35,46,.04), 0 4px 16px rgba(22,35,46,.05);
  --shadow-lift:0 2px 4px rgba(22,35,46,.05), 0 12px 32px rgba(22,35,46,.09);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- каркас ---------- */
/* Полоса прокрутки резервируется всегда: страница с прокруткой и без неё
   центрируются одинаково — логотип и меню не прыгают при переходах. */
html{scrollbar-gutter:stable}

.wrap{max-width:1500px; margin:0 auto; padding:0 28px 72px}

/* ---------- шапка ----------
   Была рамкой снизу через всю ширину. Стала «плавающей» полосой: содержимое
   отделено воздухом, а не линией. */
.bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:18px 0 16px; margin-bottom:28px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px}
.brand small{color:var(--dim); font-size:13px; font-weight:500; letter-spacing:0}

/* ---------- навигация ----------
   Раньше девять одинаковых капслочных ссылок. Теперь обычный текст,
   активный раздел — заливкой, а не подчёркиванием: заметнее и спокойнее. */
.nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap; font-size:13.5px}
.nav a{
  color:var(--dim); text-decoration:none;
  padding:7px 11px; border-radius:var(--r-sm);
  transition:background .15s, color .15s;
}
.nav a:hover{background:var(--line); color:var(--txt)}
.nav a.active{background:var(--teal-soft); color:var(--teal-dark); font-weight:600}
.nav .me{color:var(--txt); font-weight:600; padding:7px 4px 7px 12px; font-size:13.5px}

/* ---------- заголовки ---------- */
h1{font-size:27px; font-weight:600; letter-spacing:-.02em; color:var(--txt); margin:0 0 6px}
.sub{color:var(--dim); font-size:14.5px; margin-bottom:24px; max-width:80ch}
.sect{
  font-size:12.5px; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--dim); margin:30px 0 12px;
}

/* ---------- карточка ----------
   Уголки-засечки убраны: это декор, который спорил с содержимым. */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ---------- таблицы ----------
   Вертикальных линий нет вовсе: колонки разделяет расстояние. Группы —
   едва заметной линией, только там, где меняется смысл. */
/* ПОЛЗУНОК ПРОКРУТКИ ОБЯЗАН БЫТЬ НА ЭКРАНЕ.
   Горизонтальный ползунок рисуется по нижней кромке СВОЕГО элемента. Пока
   элемент рос вместе с таблицей, при 43 заказах он оказывался в полутора
   тысячах пикселей ниже сгиба: прокрутка формально была, а дотянуться до
   неё человек не мог, не пролистав весь список. Отсюда и «горизонтальной
   прокрутки нет».

   Вычитать из 100vh фиксированное число НЕЛЬЗЯ — пробовал, не работает:
   на узком экране шапка переносится и растёт, и низ области уезжает за
   край окна на 40–71 px (замеры 1280×1024, 1024×768, 768×1024). Высоту
   задаёт раскладка: страница-таблица занимает ровно экран, а область
   прокрутки забирает остаток. Тогда её нижняя кромка — это нижняя кромка
   окна при любой высоте шапки. Шапка таблицы и без того липкая, поэтому
   заголовки при вертикальной прокрутке не теряются. */
.tscroll{overflow:auto; -webkit-overflow-scrolling:touch}

.wrap.fill{height:100vh; display:flex; flex-direction:column; padding-bottom:18px}
.wrap.fill .panel{flex:1; min-height:0; display:flex}
.wrap.fill .tscroll{flex:1; min-height:0; width:100%}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px}

thead th{
  position:sticky; top:0; z-index:2;
  background:var(--surface-2);
  font-size:12px; font-weight:600; letter-spacing:0;
  color:var(--dim); text-align:left;
  padding:13px 16px; white-space:nowrap;
  border-bottom:1px solid var(--line2);
}
thead th small{
  display:block; font-size:11px; font-weight:400; color:var(--faint);
  margin-top:3px; letter-spacing:0;
}

tbody td{padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--surface-2)}

/* граница смысловой группы — тонкая и светлая, только как подсказка */
th.g, td.g{border-left:1px solid var(--line)}

/* КОЛОНКА ДЕЙСТВИЙ ЗАКРЕПЛЕНА У ПРАВОГО КРАЯ.
   Она была последней в таблице шире полутора тысяч пикселей. При окне
   1259 px её кнопки стояли за экраном, и «Клиент подтвердил» дотянуться было
   нечем: заказ вставал на «Расчёт зафиксирован» и дальше не шёл. Ширину
   таблицы ужимать нельзя — цифры и статусы должны читаться, — поэтому
   действия не уезжают вместе с таблицей, а стоят на месте.

   Заливка обязательна: прозрачная ячейка пропускала бы под собой уходящие
   колонки. Наведение красит закреплённую ячейку тем же цветом, что и строку,
   иначе она выпадала бы из подсветки и читалась как чужая.
   Имя отдельное — actcol. Класс .acts уже занят внутренним блоком кнопок
   внутри ячейки; закреплять надо саму ячейку, а не обёртку кнопок, иначе
   липкость считается относительно ячейки и никуда не приводит. */
th.actcol, td.actcol{
  position:sticky; right:0; z-index:1;
  background:var(--surface);
  border-left:1px solid var(--line2);
}
thead th.actcol{background:var(--surface-2); z-index:3}
tbody tr:hover td.actcol{background:var(--surface-2)}

.num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.num .big, .num.big{font-size:15px; font-weight:600; color:var(--txt); font-family:var(--sans)}
.sub-num{display:block; font-size:12px; color:var(--faint); margin-top:3px; font-family:var(--sans)}
.code{font-weight:600}
.code a{color:var(--teal-dark); text-decoration:none}
.code a:hover{text-decoration:underline}
.size{font-weight:600; font-size:15px; white-space:nowrap}
.muted{color:var(--faint)}

/* ---------- статусы ----------
   Были рамки-обводки. Стали мягкие заливки: спокойнее и лучше различимы
   боковым зрением. */
.chip{
  display:inline-block; font-size:12.5px; font-weight:500;
  padding:4px 11px; border-radius:20px; white-space:nowrap;
  background:var(--line); color:var(--dim); border:0;
}
.chip.calculated{background:var(--blue-soft); color:var(--blue)}
.chip.confirmed{background:var(--teal-soft); color:var(--teal-dark)}
.chip.prod_1c{background:var(--blue-soft); color:var(--navy)}
.chip.in_production{background:var(--amber-soft); color:var(--amber)}
.chip.completed{background:var(--good-soft); color:var(--good)}
.chip.cancelled{background:var(--danger-soft); color:var(--danger)}

/* ---------- кнопки ----------
   Главное действие — заливкой, второстепенное — контуром, опасное — красным
   только по наведению: чтобы «Отменить» не кричал с экрана постоянно. */
.btn{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  padding:8px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line2); background:var(--surface); color:var(--txt);
  cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover{background:var(--field); border-color:var(--faint)}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.btn.primary{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600}
.btn.primary:hover{background:var(--teal-dark); border-color:var(--teal-dark)}
.btn.danger{color:var(--danger); border-color:var(--line2)}
.btn.danger:hover{background:var(--danger-soft); border-color:var(--danger)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--dim)}
.btn.ghost:hover{background:var(--line); color:var(--txt)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.acts{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}

/* ---------- поля ---------- */
input,select,textarea{font-family:var(--sans); font-size:14.5px; color:var(--txt)}
.field{
  display:flex; align-items:center; background:var(--field);
  border:1px solid var(--line2); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s;
}
.field:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.field input,.field select{
  width:100%; background:transparent; border:0; outline:none; padding:10px 12px;
}
.field .unit{padding:0 12px; color:var(--faint); font-size:13px; white-space:nowrap}

/* ---------- фильтры ---------- */
.filters{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.filters select,.filters input{
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-sm);
  padding:9px 12px; font-size:14px; outline:none; color-scheme:light;
}
.filters select:focus,.filters input:focus{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.filters select option{background:#fff; color:#16232e}

/* ---------- пустое состояние ----------
   Раньше — сухое «Заказов пока нет». Теперь объясняет, что делать. */
.empty{padding:56px 28px; text-align:center; color:var(--faint)}
.empty b{display:block; color:var(--txt); font-size:16px; font-weight:600; margin-bottom:8px}
.empty span{font-size:14px; line-height:1.6}
.empty a{color:var(--teal-dark)}

/* ---------- уведомление ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--txt); color:#fff; font-size:14.5px;
  padding:13px 20px; border-radius:var(--r-sm); box-shadow:var(--shadow-lift);
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:60;
  max-width:min(90vw,520px); text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--danger)}

/* ---------- сообщения ---------- */
.note{
  border-radius:var(--r-sm); padding:13px 16px; font-size:14px; line-height:1.6;
  margin-bottom:18px; border:1px solid transparent;
}
.note.warn{background:var(--amber-soft); border-color:#f0dcb8; color:#7a5312}
.note.bad{background:var(--danger-soft); border-color:#f7cdc9; color:#96322a}
.note.info{background:var(--teal-soft); border-color:#c5e9ec; color:var(--teal-dark)}

/* ---------- модальное окно ---------- */
.modal-bg{
  position:fixed; inset:0; background:rgba(22,35,46,.45);
  display:none; align-items:center; justify-content:center; z-index:50;
  backdrop-filter:blur(2px);
}
.modal-bg.show{display:flex}
.modal{
  background:var(--surface); border-radius:var(--r); padding:26px 28px 22px;
  width:min(540px,92vw); box-shadow:var(--shadow-lift);
}
.modal h3{font-size:19px; font-weight:600; margin:0 0 6px}
.modal .mh{color:var(--dim); font-size:14px; margin-bottom:18px}
.modal .mf{margin-bottom:14px}
.modal .mf label{display:block; font-size:13px; color:var(--dim); margin-bottom:6px; font-weight:500}
.modal .mf select,.modal .mf input{
  width:100%; background:var(--field); border:1px solid var(--line2);
  border-radius:var(--r-sm); padding:10px 12px; outline:none; color-scheme:light;
}
.modal .mf select:focus,.modal .mf input:focus{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.modal .mrow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.modal .macts{display:flex; gap:10px; margin-top:20px}
.modal .macts .mbtn{
  flex:1; font-size:14.5px; font-weight:600; padding:11px; border-radius:var(--r-sm);
  border:0; background:var(--teal); color:#fff; cursor:pointer;
}
.modal .macts .mbtn:hover{background:var(--teal-dark)}
.modal .macts .mbtn.ghost{background:var(--surface); color:var(--dim); border:1px solid var(--line2)}
.modal .macts .mbtn.ghost:hover{background:var(--field); color:var(--txt)}

/* ---------- узкий экран ----------
   У станка смотрят с телефона: таблица скроллится, отступы ужимаются,
   но размер текста не уменьшается — читать всё равно нужно. */
@media (max-width:900px){
  .wrap{padding:0 14px 48px}
  h1{font-size:22px}
  .bar{padding:14px 0 12px; margin-bottom:20px}
  .nav{gap:2px; font-size:13px}
  .nav a{padding:6px 9px}
  thead th{padding:11px 12px}
  tbody td{padding:12px 12px}
  .modal{padding:20px}
  .modal .mrow{grid-template-columns:1fr}
}