/* КАРМАН Инвентаризация — базовые стили */
:root {
  --bg: #101010; --surface: #1a1a1a; --text: #fff;
  --accent: #ffd400; --accent-text: #101010;
  --border: #2a2a2a; --radius: 16px;
  --danger: #e5484d; --ok: #46a758; --warn: #f5a623;
  --surface-raised: color-mix(in srgb, var(--surface) 94%, var(--text));
  --surface-soft: color-mix(in srgb, var(--surface) 82%, var(--bg));
  --text-muted: color-mix(in srgb, var(--text) 58%, transparent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --shadow-md: 0 12px 40px rgba(0,0,0,.14);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
} 
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/*
 * Размер шрифта настраивается пользователем от 100% до 500%: почти все
 * размеры в программе заданы в rem, поэтому масштабируется корень.
 * Настройка живёт на устройстве — у кассира с плохим зрением крупно,
 * у остальных как обычно.
 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; touch-action: pan-x pan-y; font-size: calc(16px * var(--k-font-scale, 1)); }
body {
  margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 28rem),
    var(--bg);
  color: var(--text); font-size: 1rem; line-height: 1.5; letter-spacing: -.006em;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)); min-height: 100vh;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button, a, select, label, .btn, .bn-item, .zone-choice, .shift-segment { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text); }
h1, h2, h3 { line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); } h2 { font-size: clamp(1.15rem, 2vw, 1.35rem); } h3 { font-size: 1.02rem; }
.muted { color: var(--text-muted); font-size: .9rem; }
.center { text-align: center; }
.inline { display: inline; }
.mb { margin-bottom: 12px; }

/* Топбар */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 60px; padding: 8px max(14px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface) 86%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.brand { font-weight: 850; display: flex; align-items: center; gap: 10px; letter-spacing: -.02em; }
.brand-badge {
  display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
  color: var(--accent-text); border-radius: 11px; font-weight: 900;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}
.brand-badge.lg { width: 64px; height: 64px; font-size: 2rem; border-radius: 16px; }
.topbar-user { display: flex; align-items: center; gap: 8px; }
.topbar-name { font-size: .85rem; }
.branch-context-form { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; }
.branch-context-form select { width: clamp(126px, 18vw, 220px); min-height: 38px; padding: 7px 34px 7px 10px; background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; font-size: .86rem; font-weight: 700; }
.branch-context-form input[type="hidden"] { display: none; }

/* Страница */
.page, .admin-content { padding: clamp(14px, 2.5vw, 28px); max-width: 1040px; margin: 0 auto; width: 100%; }
.page-title { margin: 2px 0 20px; font-weight: 820; }

/* Карточки */
.card {
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: var(--radius); padding: clamp(15px, 2vw, 20px); margin-bottom: 14px; display: block;
  box-shadow: var(--shadow-sm);
}
.card-inset { background: var(--surface-soft); border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: calc(var(--radius) - 3px); padding: 14px; margin: 14px 0; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.empty-state { text-align: center; padding: 32px 16px; }

/* ── Кнопки ────────────────────────────────────────────────────────────
   Зоны нажатия >= 44px. Всё описание кнопки живёт здесь и только здесь:
   раньше размеры задавались ещё раз ниже по файлу, побеждало нижнее
   правило, и правка в этом месте не давала никакого эффекта. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: calc(var(--radius) - 4px);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface)); color: var(--text);
  font-size: .96rem; font-weight: 680; line-height: 1.2; text-align: center; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
/* Подсветка от наведения — только там, где есть мышь. На телефоне hover
   «залипал» после нажатия: человек уходил на другой экран, возвращался —
   а кнопка всё ещё горит, будто он на ней стоит. */
@media (hover: hover) {
  .btn:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); box-shadow: 0 6px 18px rgba(0,0,0,.09); }
  .btn-primary:hover { filter: saturate(1.08) brightness(1.03); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 30%, transparent); }
  .btn-danger:hover { filter: brightness(1.05); }
}
/* Нажатие видно на любом устройстве: кнопка проседает и чуть темнеет —
   это единственный отклик на тапе, где hover не существует */
.btn:active { transform: translateY(1px) scale(.98); box-shadow: none; filter: brightness(.95); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent)); color: var(--accent-text); border-color: transparent; font-weight: 780; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn-danger { background: linear-gradient(145deg, color-mix(in srgb, var(--danger) 82%, #fff), var(--danger)); color: #fff; border-color: transparent; box-shadow: 0 8px 22px color-mix(in srgb, var(--danger) 20%, transparent); }
.btn-ghost { background: color-mix(in srgb, var(--surface) 44%, transparent); box-shadow: none; }
.btn-ghost.active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: .86rem; border-radius: 10px; }
.btn-lg { min-height: 52px; padding: 12px 22px; font-size: 1.04rem; border-radius: calc(var(--radius) - 2px); }
.btn-block { width: 100%; }
.stock-legend { margin: 0 0 14px; padding: 12px 14px 12px 30px; list-style: disc; border: 1px solid color-mix(in srgb, var(--border) 90%, transparent); border-radius: calc(var(--radius) - 6px); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.stock-legend li { margin: 4px 0; font-size: .88rem; line-height: 1.45; color: color-mix(in srgb, var(--text) 82%, transparent); }
.stock-legend strong { color: var(--text); }
.stock-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.branch-stock[open] > summary { margin-bottom: 6px; }
/* Состояния кнопки: отправлено, занята, недоступна */
.btn.is-sent { background: linear-gradient(145deg, color-mix(in srgb, var(--ok) 82%, #fff), var(--ok)); color: #fff; border-color: transparent; box-shadow: none; }
.btn[aria-busy="true"] { opacity: .82; cursor: progress; }
.btn:disabled { cursor: not-allowed; transform: none; filter: none; }
.btn.is-sent:disabled { opacity: 1; }
.btn[disabled] { opacity: .56; pointer-events: none; filter: grayscale(.2); }
/* Ожидание: текст прячется, вместо него кружок.
   Кружок раньше всегда рисовался цветом текста жёлтой кнопки — почти чёрным,
   и на тёмной обычной кнопке его не было видно: нажал и не понял, идёт ли что-то. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 58%, transparent); border-right-color: transparent;
  animation: spin .65s linear infinite;
}
.btn-primary.is-loading::after { border-color: color-mix(in srgb, var(--accent-text) 62%, transparent); border-right-color: transparent; }
.btn-danger.is-loading::after, .btn.is-sent.is-loading::after { border-color: rgba(255,255,255,.72); border-right-color: transparent; }

/* Формы */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: .82rem; font-weight: 680; margin: 0 0 7px 2px; color: color-mix(in srgb, var(--text) 72%, transparent); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; font-size: 1rem;
  background-color: color-mix(in srgb, var(--bg) 76%, var(--surface)); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: calc(var(--radius) - 5px); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
select { appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--text) 38%, transparent); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--text) 28%, var(--border)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); background-color: color-mix(in srgb, var(--bg) 62%, var(--surface)); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 20px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 2px; cursor: pointer; border-radius: 12px; }
.check-row:hover { color: color-mix(in srgb, var(--text) 90%, var(--accent)); }
.check-row input[type="checkbox"] { appearance: none; width: 46px; height: 26px; min-height: 26px; flex: 0 0 46px; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--text) 14%, var(--surface)); position: relative; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.check-row input[type="checkbox"]::after { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.24); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.check-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.check-row input[type="checkbox"]:checked::after { transform: translateX(20px); background: var(--accent-text); }
.check-row input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
input[type="range"] { appearance: none; min-height: 34px; padding: 0; background: transparent; border: 0; box-shadow: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--text) 14%, var(--surface)); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -7.5px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 2px 9px rgba(0,0,0,.25); }
input[type="file"] { padding: 6px; }
input[type="file"]::file-selector-button { min-height: 34px; margin-right: 10px; padding: 6px 12px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--text); font-weight: 650; cursor: pointer; }
input[type="color"] { padding: 5px; cursor: pointer; }
input:disabled, select:disabled, textarea:disabled { opacity: .62; cursor: not-allowed; }
details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; user-select: none; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 2px 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 0 14px; }
.form-narrow { max-width: 720px; }
.row-form { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.row-form > input, .row-form > select { width: auto; min-width: 150px; flex: 1 1 160px; }

/* Списки */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-item { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
  .list-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); box-shadow: var(--shadow-md); }
}
.list-item:active { transform: translateY(0) scale(.995); }

/* Таблицы */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .91rem; }
.table th { color: var(--text-muted); font-size: .76rem; font-weight: 760; letter-spacing: .035em; text-transform: uppercase; background: color-mix(in srgb, var(--surface) 88%, var(--bg)); }
.table th, .table td { text-align: left; padding: 12px 11px; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent); vertical-align: middle; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.card:has(> .table) { overflow-x: auto; scrollbar-width: thin; }
.row-danger td { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.row-muted { opacity: .62; }
.text-danger, .danger { color: var(--danger); }
.row-actions { white-space: nowrap; display: flex; justify-content: flex-end; gap: 6px; }

/* Теги и статусы */
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: .73rem; line-height: 1;
  font-weight: 680; background: color-mix(in srgb, var(--text) 9%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.tag-ok { color: color-mix(in srgb, var(--ok) 72%, var(--text)); background: color-mix(in srgb, var(--ok) 13%, transparent); border-color: color-mix(in srgb, var(--ok) 24%, transparent); }
.tag-warn { color: color-mix(in srgb, var(--warn) 78%, var(--text)); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.tag-danger { color: color-mix(in srgb, var(--danger) 78%, var(--text)); background: color-mix(in srgb, var(--danger) 13%, transparent); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.req { color: var(--danger); font-weight: 750; }
.status-badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650; background: color-mix(in srgb, var(--text) 9%, transparent); }
.status-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.status-dot.green { background: var(--ok); } .status-dot.yellow { background: var(--warn); }
.status-dot.red { background: var(--danger); } .status-dot.gray { background: #777; }

/* Прогресс */
/* display: block задан явно — полоску кладут и внутрь ссылки, где div нельзя,
   а span по умолчанию строчный и высота с заливкой к нему не применяются */
.progress { display: block; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; margin: 8px 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent)); transition: width .35s cubic-bezier(.2,.8,.2,1); }

/* Уведомления/алерты */
.alert { padding: 13px 15px; border-radius: calc(var(--radius) - 5px); margin: 12px 0; font-size: .91rem; border: 1px solid transparent; }
.alert-warn { background: color-mix(in srgb, var(--warn) 13%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.alert-info { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Нижняя навигация */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: color-mix(in srgb, var(--surface) 88%, transparent); border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  padding: 5px max(4px, env(safe-area-inset-left)) env(safe-area-inset-bottom);
  backdrop-filter: blur(20px) saturate(155%); -webkit-backdrop-filter: blur(20px) saturate(155%);
  box-shadow: 0 -8px 30px rgba(0,0,0,.08);
}
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 3px; font-size: .7rem; font-weight: 620; min-height: 58px; justify-content: center; color: var(--text-muted);
  background: none; border: 0; cursor: pointer;
  border-radius: 14px; transition: color .18s ease, background .18s ease, transform .18s ease;
}
.bn-item:hover, .bn-item.active { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bn-item.active .bn-ico { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--accent) 30%, transparent)); }
.bn-item:active { transform: scale(.96); }
.bn-ico { font-size: 1.22rem; line-height: 1; transition: transform .18s ease; }

/* Дашборд */
/* ── Плитка с цифрой ──
   Ширина колонки задана в rem, а не в пикселях: при крупном шрифте
   140px оставались 140px, и цифра переставала помещаться в плитку. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-card {
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); border-radius: var(--radius);
  padding: 14px 12px; text-align: center; box-shadow: var(--shadow-sm); min-width: 0;
}
.stat-num { display: block; font-size: clamp(1.5rem, 3vw, 1.85rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.stat-label { display: block; margin-top: 2px; font-size: .76rem; font-weight: 620; line-height: 1.3; color: var(--text-muted); overflow-wrap: break-word; }
/* Цветом красится и фон с цифрой, а не одна рамка: рамку в 1px на телефоне
   не видно, и «ошибки отправки: 3» ничем не отличались от обычной плитки */
.stat-red { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 11%, var(--surface)); }
.stat-red .stat-num { color: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.stat-yellow { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 11%, var(--surface)); }
.stat-yellow .stat-num { color: color-mix(in srgb, var(--warn) 85%, var(--text)); }
.stat-accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
.stat-accent .stat-num { color: var(--accent); }
/* Ноль не кричит, но и не исчезает: пропадающая плитка сдвигает соседние,
   и глаз каждый раз заново ищет нужную цифру */
.stat-card.is-zero { opacity: .5; }
.branch-card .bc-head { display: flex; justify-content: space-between; align-items: center; }
.bc-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: .85rem; margin-top: 12px; color: var(--text-muted); }
.bc-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.branch-msg { font-size: .85rem; background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 6px 10px; border-radius: 8px; }

/* Инвентаризация — экран подсчёта */
.count-header.sticky { position: sticky; top: 58px; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); padding: 8px 0 6px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.count-top { display: flex; align-items: center; gap: 8px; }
.count-where { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.count-where strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count-where .muted { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count-count { font-size: .9rem; font-weight: 820; font-variant-numeric: tabular-nums; }
.count-meta { display: flex; justify-content: space-between; font-size: .8rem; }
.progress-thin { height: 5px; margin: 6px 0; }
.sync-status { flex: 0 0 auto; font-size: 1rem; }
.sync-status[data-state="saved"] { color: var(--ok); }
.sync-status[data-state="pending"] { color: var(--warn); }
.sync-status[data-state="error"] { color: var(--danger); }
.count-toolbar { display: flex; gap: 6px; align-items: center; }
.count-toolbar input { flex: 1; min-width: 0; min-height: 42px; }
.count-chips { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.count-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text); font-size: .8rem; font-weight: 680; cursor: pointer; white-space: nowrap;
}
.chip.is-active { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.chip-num { font-weight: 850; font-variant-numeric: tabular-nums; opacity: .75; }
.chip-num:empty { display: none; }
.inv-zone {
  position: sticky; top: var(--inv-head-h, 150px); z-index: 20; margin: 6px 0 2px; padding: 5px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
  font-size: .72rem; font-weight: 820; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.inv-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.inv-item { background: var(--inv-item-bg, linear-gradient(145deg, var(--surface-raised), var(--surface))); color: var(--inv-item-text, var(--text)); border: 1px solid var(--border); border-radius: 14px; padding: 8px 10px; box-shadow: var(--shadow-sm); transition: border-color .2s ease, background .2s ease, color .2s ease, transform .18s ease; }
/* Флекс, а не сетка: когда картинка товара скрыта на узком экране,
   колонки не съезжают и поля ввода у всех позиций стоят на одной линии */
.inv-row { display: flex; align-items: center; gap: 8px; }
.inv-thumb, .inv-qty-row, .inv-more { flex: 0 0 auto; }
.inv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.inv-name { font-size: .92rem; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.inv-meta { font-size: .72rem; line-height: 1.2; }
.inv-more {
  width: 32px; height: 40px; flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 1.15rem; font-weight: 800; border-radius: 10px;
}
.inv-more:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.inv-item.is-open .inv-more { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.inv-item.done { border-color: color-mix(in srgb, var(--ok) 52%, var(--border)); background: var(--inv-item-bg, linear-gradient(145deg, color-mix(in srgb, var(--ok) 5%, var(--surface-raised)), var(--surface))); }
.inv-item.is-low { background: var(--inv-low-bg, color-mix(in srgb, var(--warn) 24%, var(--surface))); color: var(--inv-low-text, var(--text)); border-color: color-mix(in srgb, var(--warn) 62%, var(--border)); }
.inv-item.is-out { background: var(--inv-out-bg, color-mix(in srgb, var(--danger) 26%, var(--surface))); color: var(--inv-out-text, var(--text)); border-color: color-mix(in srgb, var(--danger) 64%, var(--border)); }
.inv-item.is-low .muted, .inv-item.is-out .muted { color: inherit; opacity: .82; }
.inv-state-note { margin-top: 2px; font-weight: 780; font-size: .75rem; }
.inv-item.is-low .inv-state-note { color: var(--inv-low-text, var(--warn)); }
.inv-item.is-out .inv-state-note { color: var(--inv-out-text, var(--danger)); }
.inv-item-head { display: flex; gap: 10px; align-items: center; }

/*
 * Простой вид подсчёта (включается в настройках). Для слабых телефонов и для
 * тех, кого цвет и движение отвлекают: карточки одного цвета, никаких
 * переходов и вспышек. Пометки состояния остаются текстом — информация
 * не теряется, пропадает только оформление. Кнопки не трогаем: без своего
 * цвета главную кнопку не отличить от остальных.
 */
body:has(.inv-plain) *,
body:has(.inv-plain) *::before,
body:has(.inv-plain) *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body:has(.inv-plain) .inv-item,
body:has(.inv-plain) .inv-item.done,
body:has(.inv-plain) .inv-item.is-low,
body:has(.inv-plain) .inv-item.is-out {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}
body:has(.inv-plain) .inv-item.is-low .muted,
body:has(.inv-plain) .inv-item.is-out .muted { color: var(--text-muted); opacity: 1; }
body:has(.inv-plain) .inv-item .inv-state-note { color: var(--text); font-weight: 700; }
body:has(.inv-plain) .progress-fill { background: var(--text-muted); }
.inv-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; }
/* Иконка или фото рядом с названием товара в таблицах и списках */
.row-thumb { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; vertical-align: middle; margin-right: 7px; }
td .k-ic, .review-main strong .k-ic { vertical-align: middle; margin-right: 7px; }

/* Иконка товара в подсчёте: объём даёт сама .k-ic, размер подгоняем под строку */
.inv-thumb-icon { width: 34px; height: 34px; border-radius: 10px; background: none; }
.inv-thumb-icon .k-ic-glyph { font-size: 19px; }
.inv-qty-row { display: flex; align-items: center; gap: 4px; }
.qty-btn { min-width: 40px; min-height: 44px; font-size: 1.2rem; font-weight: 800; border-radius: 11px;
  background: var(--surface-soft); border: 1px solid var(--border); color: var(--text); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: transform .14s ease, background .16s ease, color .16s ease; }
.qty-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.qty-btn:active { transform: scale(.94); background: var(--accent); color: var(--accent-text); }
.qty-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qty-input { width: 68px; flex: 0 0 auto; text-align: center; font-size: 1.2rem; font-weight: 850; min-height: 44px; padding: 4px; font-variant-numeric: tabular-nums; }
.inv-extra { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.inv-extra .field { flex-basis: 100%; }
.count-actions {
  display: flex; gap: 8px; align-items: center; margin: 12px 0; position: sticky; bottom: 64px; z-index: 30;
  padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  border: 1px solid var(--border); box-shadow: var(--shadow-md); backdrop-filter: blur(12px);
}
.count-actions .btn { flex: 1; }
.icon-btn-lg { min-width: 48px; min-height: 48px; font-size: 1.15rem; }

/* Плотный режим: больше позиций на экране */
body.inv-dense .inv-list { gap: 3px; }
body.inv-dense .inv-item { padding: 4px 8px; border-radius: 11px; box-shadow: none; }
body.inv-dense .inv-thumb { display: none; }
body.inv-dense .inv-meta { display: none; }
body.inv-dense .inv-name { font-size: .86rem; }
body.inv-dense .qty-btn { min-height: 38px; min-width: 36px; }
body.inv-dense .qty-input { min-height: 38px; width: 60px; font-size: 1.05rem; }
body.inv-dense .inv-zone { margin: 4px 0 1px; padding: 3px 8px; }

/* Чек-листы */
.cl-buttons { display: flex; gap: 5px; margin-top: 10px; padding: 4px; border-radius: calc(var(--radius) - 3px); background: var(--surface-soft); }
.btn-choice { flex: 1; border-color: transparent; box-shadow: none; }
.btn-choice.active-yes { background: linear-gradient(145deg, color-mix(in srgb, var(--ok) 82%, #fff), var(--ok)); color: #fff; border-color: transparent; box-shadow: 0 5px 16px color-mix(in srgb, var(--ok) 25%, transparent); }
.btn-choice.active-no { background: linear-gradient(145deg, color-mix(in srgb, var(--danger) 82%, #fff), var(--danger)); color: #fff; border-color: transparent; box-shadow: 0 5px 16px color-mix(in srgb, var(--danger) 25%, transparent); }

/* Фотоотчёты */
.pr-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.pr-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.pr-controls { display: flex; flex-direction: column; gap: 8px; }
.btn-camera { position: relative; overflow: hidden; }
.pr-answer { display: flex; gap: 5px; padding: 4px; border-radius: calc(var(--radius) - 3px); background: var(--surface-soft); }
.pr-mode-toggle { display: flex; gap: 5px; margin-bottom: 12px; padding: 4px; border-radius: calc(var(--radius) - 3px); background: var(--surface-soft); }
.pr-step[data-status="done"] { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); }

/* Заявки */
.order-text { white-space: pre-wrap; background: var(--bg); padding: 12px; border-radius: 8px; font-size: .88rem; }
.order-menu-list { gap: 9px; }
.order-menu-card { padding: 0; overflow: hidden; }
.order-card-link { display: grid; gap: 6px; padding: 14px 16px 11px; transition: background .16s ease; }
.order-card-link:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.order-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.order-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.order-bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.order-bulk-bar > .muted { font-size: .8rem; }
.order-bulk-log { flex: 1 1 100%; margin-top: 8px; padding: 10px 12px; border-radius: calc(var(--radius) - 4px); background: var(--surface-soft); border: 1px solid var(--border); }
.order-bulk-log p { margin: 2px 0; font-size: .82rem; }
.order-supplier-block .order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-supplier-block .order-quick-actions { border-top: 1px solid var(--border); margin-top: 8px; border-radius: 0 0 calc(var(--radius) - 4px) calc(var(--radius) - 4px); }
.order-quick-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 12px 11px; border-top: 1px solid var(--border); background: var(--surface-soft); }
.order-quick-actions > span { margin-right: 3px; color: var(--text-muted); font-size: .75rem; font-weight: 680; }
.order-quick-actions .btn { min-height: 34px; padding: 5px 10px; font-size: .76rem; }
.order-no-channel { padding: 9px 14px 11px; border-top: 1px solid var(--border); }
@media (max-width: 520px) {
  .order-card-link { padding: 12px; }
  .order-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 10px 10px; }
  .order-quick-actions > span { grid-column: 1 / -1; }
  .order-quick-actions .btn { width: 100%; padding-inline: 4px; }
}
.send-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.send-overlay { text-align: center; padding: 24px; }
.spinner { width: 40px; height: 40px; margin: 0 auto 12px; border: 4px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.s-sent, .s-delivered, .s-accepted, .s-received, .s-closed { background: color-mix(in srgb, var(--ok) 25%, transparent); }
.s-send_error, .s-rejected, .s-cancelled { background: color-mix(in srgb, var(--danger) 25%, transparent); }
.s-sending, .s-pending_confirm { background: color-mix(in srgb, var(--warn) 25%, transparent); }

/* Гость / логин */
.guest { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 16px; }
.guest-wrap { width: 100%; max-width: 400px; }
.login-card { padding: 28px; }
.login-logo { text-align: center; margin-bottom: 8px; }

/* Админка */
.admin-layout { display: flex; min-height: calc(100vh - 60px); }
.admin-nav { width: 232px; flex-shrink: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); border-right: 1px solid var(--border); padding: 12px 10px; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; scrollbar-width: thin; }
.an-item { display: block; padding: 10px 12px; margin: 2px 0; border-radius: 11px; font-size: .88rem; font-weight: 590; color: var(--text-muted); transition: color .16s ease, background .16s ease, transform .16s ease; }
.an-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); transform: translateX(2px); }
.an-item.active { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); font-weight: 720; }
.admin-content { flex: 1; max-width: none; min-width: 0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pagination { display: flex; gap: 5px; margin-top: 14px; flex-wrap: wrap; }
.theme-preview { padding: 14px; border-radius: 10px; margin-bottom: 8px; }
.tp-surface { padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.tp-btn { padding: 4px 10px; font-size: .8rem; font-weight: 700; }

/* Модалки, тосты, skeleton */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.58); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: modalFade .18s ease both; }
.modal-card { background: linear-gradient(145deg, var(--surface-raised), var(--surface)); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); padding: clamp(18px, 4vw, 24px); max-width: 480px; width: 100%; max-height: 85vh; overflow: auto; box-shadow: 0 28px 80px rgba(0,0,0,.28); animation: modalUp .24s cubic-bezier(.2,.8,.2,1) both; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@keyframes modalFade { from { opacity: 0; } }
@keyframes modalUp { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.toast { position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(20px) scale(.97);
  background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--text);
  padding: 13px 18px; border-radius: 14px; opacity: 0; pointer-events: none; font-weight: 620; text-align: center;
  transition: opacity .22s ease, transform .25s cubic-bezier(.2,.8,.2,1); z-index: 200; max-width: min(90vw, 520px); box-shadow: 0 18px 50px rgba(0,0,0,.22); backdrop-filter: blur(16px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.skeleton { height: 56px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface) 25%, color-mix(in srgb, var(--surface) 70%, var(--text)) 50%, var(--surface) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.footer { text-align: center; padding: 16px; font-size: .75rem; color: color-mix(in srgb, var(--text) 40%, transparent); }

/*
 * При увеличенном шрифте шапка и нижняя панель остаются обычного размера:
 * это органы управления, а не текст для чтения. Если бы они росли вместе со
 * всем, при 500% кнопка «Ещё» занимала бы четверть экрана и всё наезжало бы
 * друг на друга. Класс ставит скрипт настройки размера.
 */
html.k-fixed-chrome .appbar { font-size: 16px; min-height: 58px; }
html.k-fixed-chrome .appbar-title { font-size: 15px; }
html.k-fixed-chrome .branch-chip { font-size: 13px; }
html.k-fixed-chrome .branch-chip-caret { font-size: 11px; }
html.k-fixed-chrome .icon-btn { width: 42px; height: 42px; font-size: 17px; }
html.k-fixed-chrome .avatar-btn { font-size: 13px; }
html.k-fixed-chrome .icon-badge { font-size: 10px; }
html.k-fixed-chrome .brand-badge { width: 36px; height: 36px; font-size: 16px; }
html.k-fixed-chrome .bottomnav { font-size: 11px; }
html.k-fixed-chrome .bn-item { font-size: 11px; min-height: 58px; padding: 8px 3px; }
html.k-fixed-chrome .bn-ico { font-size: 20px; }
html.k-fixed-chrome .bn-badge { font-size: 10px; min-width: 16px; height: 16px; }
html.k-fixed-chrome .footer { font-size: 12px; }
html.k-fixed-chrome .quick-fab { font-size: 15px; }

/* ── Цех: отправка, рейсы, QR, страница курьера ───────────────── */
.ws-quick { display: flex; gap: 8px; margin-top: 10px; }
.ws-quick .btn { flex: 1; }

.trip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trip-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-soft); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.trip-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trip-main small { overflow-wrap: break-word; }

.qr-box {
  display: flex; justify-content: center; padding: 14px; margin: 8px 0;
  background: #fff; border-radius: 14px;
}
.qr-box img { width: min(260px, 70vw); height: auto; image-rendering: pixelated; }

/* Страница курьера: крупно, ярко, ничего лишнего */
.golink { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.golink-head h1 { margin: 0 0 4px; font-size: 1.35rem; }
.golink-note {
  margin: 8px 0; padding: 9px 12px; border-radius: 11px; font-size: .92rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Путь рейса: четыре шага, активный подсвечен */
.golink-stages {
  list-style: none; margin: 10px 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.golink-stages li {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: 11px; font-size: .72rem; font-weight: 700;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.golink-stages li span { font-size: 1.05rem; line-height: 1; }
.golink-stages li.is-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.golink-stages li.is-now {
  color: var(--accent-text); background: var(--accent); border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ws-additem > summary { cursor: pointer; font-weight: 750; min-height: 40px; display: flex; align-items: center; list-style: none; }
.ws-additem > summary::-webkit-details-marker { display: none; }

.golink-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: point; }
.golink-point { border-left: 4px solid var(--border); }
.golink-point.is-done { border-left-color: var(--ok); opacity: .85; }
.golink-point-head { display: flex; gap: 12px; align-items: flex-start; }
.golink-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.05rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
}
.golink-point.is-done .golink-num { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.golink-point-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.golink-point-main strong { font-size: 1.1rem; }
.golink-addr { text-decoration: underline; text-underline-offset: 2px; }
.golink-orders { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }
.golink-done { margin: 6px 0 0; font-weight: 750; color: var(--ok); }


/* ── Смена: «сейчас», задачи, счётчики ────────────────────────── */
/* Одна задача крупно — то, что нужно делать прямо сейчас */
.shift-now {
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  background:
    radial-gradient(circle at 92% -30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(150deg, var(--surface-raised), var(--surface));
}
.shift-now-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.shift-now-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.shift-now-left {
  font-size: .78rem; font-weight: 750; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted);
}
.shift-now-left.is-soon { background: color-mix(in srgb, var(--warn) 18%, transparent); color: color-mix(in srgb, var(--warn) 85%, var(--text)); }
.shift-now-left.is-over { background: color-mix(in srgb, var(--danger) 16%, transparent); color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.shift-now-title { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.25; }
.shift-now .btn + .btn { margin-top: 8px; }
.shift-till { font-style: normal; font-size: .78rem; font-weight: 650; color: var(--text-muted); }

.shift-tasks-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shift-tasks-head strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.shift-tabs { margin: 12px 0 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shift-all-done { padding: 18px 6px; text-align: center; font-weight: 750; color: color-mix(in srgb, var(--ok) 78%, var(--text)); }

/* Крупная отметка: попасть пальцем с первого раза */
.shift-check { min-width: 46px; min-height: 46px; font-size: 1.1rem; }
.shift-task { padding: 12px; gap: 12px; }
.shift-task-main strong { font-size: 1rem; line-height: 1.3; }

/* ── Цех: производство ────────────────────────────────────────── */
/* Липкая шапка: сколько готово и выбор дня — всегда на экране */
.prod-bar {
  position: sticky; top: calc(58px + 4px); z-index: 40;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: var(--shadow-sm);
}
.prod-bar-main { flex: 1 1 auto; min-width: 0; }
.prod-bar-main strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.prod-bar-main .progress { margin: 5px 0 0; }
.prod-bar-date { display: flex; gap: 6px; flex: 0 0 auto; }
.prod-bar-date input, .prod-bar-date select {
  min-height: 36px; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 680;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); color: var(--text);
  max-width: 132px;
}
html.k-fixed-chrome .prod-bar { font-size: 15px; }

.prod-card { border-left: 4px solid var(--border); }
.prod-card.is-left { border-left-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.prod-card.is-working { border-left-color: var(--warn); }
.prod-card.is-done { border-left-color: var(--ok); opacity: .9; }
/* «Не хватает» — не «готово»: план вырос уже после отметки, полоса краснеет,
   а не гаснет вместе с остальными завершёнными карточками */
.prod-card.is-short { border-left-color: var(--danger); }
.prod-short { margin: 10px 0 0; padding: 9px 12px; border-radius: 11px; font-size: .9rem;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); }
.chip-warn { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
.chip-warn.is-on { background: var(--danger); color: #fff; border-color: transparent; }
.prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prod-head-main { min-width: 0; }
.prod-name { margin: 0 0 2px; font-size: 1.12rem; }
.prod-head p { margin: 0; font-size: .85rem; }
.prod-total { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.prod-total-num { font-size: 1.9rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.prod-total-unit { font-size: .78rem; color: var(--text-muted); font-weight: 700; }
.prod-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.prod-actions-row { display: flex; gap: 8px; }
.prod-actions-row .btn { flex: 1; }
.prod-fact { margin: 10px 0 0; padding: 9px 12px; border-radius: 11px; font-size: .9rem;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent); }
.prod-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.prod-branches { margin-top: 10px; }
.prod-branches > summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--text-muted);
  min-height: 36px; display: flex; align-items: center; list-style: none; }
.prod-branches > summary::-webkit-details-marker { display: none; }
.prod-branch-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.prod-branch-list li { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem;
  padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.prod-branch-list li:last-child { border-bottom: none; }
.prod-branch-list b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-list { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 760px) {
  .prod-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media print {
  .prod-bar, .no-print { display: none !important; }
  .prod-card[hidden] { display: block !important; }
}

/* ── Цех: пошаговая инструкция ────────────────────────────────── */
.guide-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.guide-step { display: flex; gap: 14px; margin: 0; border-left: 4px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.guide-num {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.15rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
  color: var(--accent-text);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 25%, transparent);
}
.guide-body { flex: 1 1 auto; min-width: 0; }
.guide-body h2 { margin: 4px 0 6px; font-size: 1.05rem; }
.guide-body p { margin: 0 0 6px; }
.guide-body ul { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.guide-body li { line-height: 1.45; }
.guide-faq { border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); padding: 8px 0; }
.guide-faq:last-of-type { border-bottom: none; }
.guide-faq > summary { cursor: pointer; font-weight: 700; min-height: 34px; display: flex; align-items: center; list-style: none; }
.guide-faq > summary::-webkit-details-marker { display: none; }
.guide-faq > summary::before { content: '▸'; margin-right: 8px; color: var(--text-muted); transition: transform .15s ease; }
.guide-faq[open] > summary::before { transform: rotate(90deg); }
.guide-faq p { margin: 6px 0 4px 20px; }
.ws-nav { margin-bottom: 12px; }

/* ── Смена: липкая строка состояния ───────────────────────────── */
/* Кнопка «Закончить смену» всегда на экране: строка липнет под шапкой,
   сколько бы задач ни было ниже. */
.shift-bar {
  position: sticky; top: calc(58px + 4px); z-index: 40;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-left: 4px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.shift-bar.is-running { border-left-color: var(--ok); }
.shift-bar.is-closed { border-left-color: color-mix(in srgb, var(--text) 30%, transparent); }
.shift-bar-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.shift-bar-main strong { font-size: .97rem; line-height: 1.25; }
.shift-bar-main strong em { font-style: normal; font-size: .8rem; }
.shift-bar-main small { font-size: .78rem; }
.shift-bar .btn { flex: 0 0 auto; white-space: nowrap; }
html.k-fixed-chrome .shift-bar { font-size: 15px; }

.shift-date-chip { display: inline-flex; flex: 0 0 auto; }
.shift-date-chip input {
  min-height: 34px; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text); font-size: .8rem; font-weight: 680;
}

/* ── График: вся команда ──────────────────────────────────────── */
.schedule-view-toggle { margin-bottom: 10px; }
.schedule-links .chip.is-on { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.team-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.team-day {
  padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: var(--shadow-sm);
}
.team-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.team-day.is-weekend { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 6%, var(--surface-raised)), var(--surface)); }
.team-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.team-day-date { display: flex; flex-direction: column; align-items: center; min-width: 40px; line-height: 1.1; }
.team-day-date b { font-size: 1.25rem; }
.team-day-date small { color: var(--text-muted); font-size: .68rem; }
.team-day-count { flex: 1; font-weight: 700; font-size: .9rem; }
.team-day-empty { margin: 0; }
.team-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.team-person {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 11px;
  background: var(--surface-soft); border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.team-person.is-me { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft)); }
.team-person-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.team-person-main strong { font-size: .92rem; }
.team-person-main strong em { font-style: normal; font-weight: 650; font-size: .78rem; color: color-mix(in srgb, var(--accent) 80%, var(--text)); }
.team-person-main small { font-size: .74rem; }
.team-person-time b { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9rem; }
.team-off { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }

@media (min-width: 760px) {
  .team-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ── Моя зарплата ─────────────────────────────────────────────── */
.pay { display: flex; flex-direction: column; gap: 14px; }
.pay .card { margin: 0; }
.pay-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
/* Та же жёлтая засечка, что в операционном центре: разделы читаются как оглавление */
.pay-h::before {
  content: ''; width: 4px; height: 14px; border-radius: 999px; flex: 0 0 auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent));
}
.pay-dates { margin: -6px 0 0; }

/* Период — три крупные кнопки во всю ширину, без свайпов */
.pay-periods {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.pay-period {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 11px; font-weight: 750; color: var(--text-muted);
}
.pay-period.is-on { background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-sm); }

/* Главное число: одна премиальная карточка с тёплым свечением */
.pay-hero {
  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 88% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(150deg, var(--surface-raised), var(--surface));
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}
.pay-sum { font-size: 2.4rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pay-forecast { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.pay-forecast b { font-variant-numeric: tabular-nums; }
.pay-hero-facts { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; }
.pay-hero-facts > span {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-weight: 650;
}

/* Отметка */
.pay-mark { display: flex; align-items: center; gap: 12px; }
.pay-mark-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pay-mark .btn { flex: 0 0 auto; white-space: nowrap; }

/* Расчёт-чек */
.pay-check { list-style: none; margin: 0; padding: 0; }
.pay-check li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}
.pay-check li > span { display: block; min-width: 0; }
.pay-check li > span > small { display: block; margin-left: 34px; }
.pay-check li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-line-ico {
  display: inline-flex; width: 26px; height: 26px; margin-right: 8px;
  align-items: center; justify-content: center; border-radius: 8px; font-size: .8rem;
  background: color-mix(in srgb, var(--text) 7%, transparent); vertical-align: -6px;
}
.pay-check-total { border-bottom: none !important; padding-top: 12px !important; }
.pay-check-total span { font-weight: 850; font-size: 1.05rem; }
.pay-check-total b { font-size: 1.3rem; font-weight: 900; }

/* Эффективность */
.pay-kpi { display: flex; gap: 16px; align-items: flex-start; }
/* Кольцо заполняется на процент показателя: видно не только число, но и
   насколько оно близко к полному кругу */
.pay-kpi-ring {
  flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  --ring: var(--warn);
  background: conic-gradient(var(--ring) calc(var(--p, 0) * 1%),
              color-mix(in srgb, var(--text) 10%, transparent) 0);
}
.pay-kpi-ring-in {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: baseline; justify-content: center; padding-top: 22px;
  background: var(--surface); font-variant-numeric: tabular-nums;
}
.pay-kpi-ring b { font-size: 1.65rem; font-weight: 900; line-height: 1; }
.pay-kpi-ring small { font-size: .8rem; color: var(--text-muted); }
.pay-kpi-ring.is-ok { --ring: var(--ok); }
.pay-kpi-ring.is-warn { --ring: var(--warn); }
.pay-kpi-ring.is-bad { --ring: var(--danger); }
.pay-kpi-parts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pay-kpi-part { display: flex; flex-direction: column; gap: 2px; }
.pay-kpi-label { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; font-weight: 650; }
.pay-kpi-label small { font-weight: 500; text-align: right; }

/* Задачи */
.pay-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pay-tasks li {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.pay-tasks li:last-child { border-bottom: none; }
.pay-task-mark {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 900;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted);
}
.pay-tasks .is-done .pay-task-mark { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.pay-tasks .is-overdue .pay-task-mark { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.pay-task-title { flex: 1 1 auto; min-width: 0; }
.pay-tasks .is-done .pay-task-title { opacity: .72; }

/* Дни */
.pay-days { list-style: none; margin: 0; padding: 0; }
.pay-days li {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.pay-days li:last-child { border-bottom: none; }
.pay-day-date { flex: 0 0 auto; width: 40px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.pay-day-date b { font-size: 1.1rem; }
.pay-day-date small { color: var(--text-muted); font-size: .68rem; }
.pay-day-time { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.pay-day-sum { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* Полоса часов: длинные и короткие дни видно без чтения цифр */
.pay-day-bar { display: block; height: 4px; border-radius: 999px; max-width: 180px;
  background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.pay-day-bar > span { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent)); }
.pay-days li.is-today { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.pay-days li.is-today .pay-day-date b { color: color-mix(in srgb, var(--accent) 85%, var(--text)); }
.pay-days li.is-weekend .pay-day-date small { color: color-mix(in srgb, var(--accent) 75%, var(--text-muted)); font-weight: 800; }

@media (min-width: 700px) {
  .pay { max-width: 640px; }
}

/* Настройка размера шрифта в шторке */
.font-row { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 0 4px; }
.font-row .icon-btn { width: 60px; height: 60px; font-size: 26px; font-weight: 800; }
.font-row .icon-btn:disabled { opacity: .35; cursor: default; }
.font-value { min-width: 96px; text-align: center; font-size: 24px; font-weight: 850; font-variant-numeric: tabular-nums; }
.font-sample {
  margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; text-align: center;
  background: var(--surface-soft); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.filter-presets { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; padding: 4px; border-radius: calc(var(--radius) - 3px); background: var(--surface-soft); width: fit-content; max-width: 100%; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.release { border-bottom: 1px solid var(--border); padding: 8px 0; }

/* Доступность */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Мобильная адаптация */
@media (max-width: 720px) {
  .page, .admin-content { padding: 13px; }
  .page-title { margin-bottom: 16px; }
  .topbar { min-height: 56px; }
  .topbar-name { display: none; }
  .topbar-user { gap: 5px; }
  .topbar-user .btn-sm { padding-inline: 9px; }
  .admin-layout { flex-direction: column; }
  .an-item { margin: 0; padding: 9px 11px; }
  .an-item:hover { transform: none; }
  .an-item.active { box-shadow: inset 0 -3px 0 var(--accent); }
  .toolbar { align-items: stretch; }
  .toolbar > .row-form { width: 100%; }
  .toolbar > .btn { flex: 1 1 auto; }
  .table th, .table td { padding: 11px 10px; }
  .modal-actions .btn { flex: 1 1 130px; }
}
@media (max-width: 420px) {
  .brand { font-size: .92rem; }
  .brand-badge { width: 33px; height: 33px; }
  /* Иконка помогает узнать товар с одного взгляда — на узком экране просто уменьшаем */
  .inv-thumb { width: 28px; height: 28px; font-size: .85rem; }
  .inv-thumb.k-ic-sm .k-ic-glyph { font-size: 15px; }
  .inv-qty-row { gap: 3px; }
  .qty-btn { min-width: 38px; width: 38px; padding: 0; font-size: 1.1rem; }
  .qty-input { width: 58px; padding-inline: 3px; font-size: 1.1rem; }
  .inv-more { width: 26px; }
  .inv-item { padding: 7px 8px; }
  .ws-stepper-sm { gap: 4px; }
  .bn-item { font-size: .61rem; padding-inline: 1px; }
  .bn-ico { font-size: 1.12rem; }
}
@media (min-width: 900px) {
  body:not(.admin):not(.guest) { padding-bottom: 20px; }
  .bottomnav { position: static; border-radius: var(--radius); max-width: 900px; margin: 0 auto 16px; border: 1px solid var(--border); }
}

/* Массовое изменение значений у выбранных товаров */
.bulk-title { margin: 9px 0 6px; font-size: .86rem; }
#bulkBar { padding: 9px 11px; }
#bulkBar > .row-form { gap: 5px; }
#bulkBar > .row-form .btn { min-height: 30px; padding: 4px 9px; font-size: .76rem; }
.bulk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr)); gap: 8px; }
.bulk-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bulk-item > span:first-child { font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.bulk-controls { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.bulk-controls > select, .bulk-controls > input { flex: 1 1 110px; min-width: 0; min-height: 32px; height: 32px; padding: 4px 8px; font-size: .8rem; }
.bulk-controls > .btn { flex: 0 0 auto; min-height: 32px; padding: 4px 9px; font-size: .76rem; }
/* Подсказки нужны при первом знакомстве, но в плотном списке только мешают —
   держим их одной строкой и раскрываем по наведению */
.bulk-item small { overflow: hidden; font-size: .67rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.bulk-item:hover small, .bulk-item:focus-within small { overflow: visible; white-space: normal; }

.product-select-all { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; margin: 0 0 8px 4px; color: var(--text-muted); font-size: .82rem; cursor: pointer; }
.product-editor-list { display: grid; gap: 6px; }
/* Выключенный пункт шаблона: виден администратору, но приглушён */
.card-inset.is-off { opacity: .55; border-style: dashed; }

/* Добавление позиции прямо в пересчёте */
.add-item-results { display: grid; gap: 4px; max-height: 44vh; overflow-y: auto; margin: 6px 0; }
.add-item-option { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; width: 100%;
  min-height: 42px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-raised); color: var(--text); font-size: .88rem; text-align: left; cursor: pointer; }
.add-item-option:hover, .add-item-option:focus-visible { border-color: var(--accent); }
.add-item-option .muted { flex: 0 0 auto; font-size: .72rem; }
.add-item-chosen-name { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 6px; }
.add-item-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; }
/* Название нового товара — во всю строку: оно длиннее остальных полей */
.add-item-fields .field-span { grid-column: 1 / -1; }
.add-item-new-note { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; }

.product-group-title { margin: 8px 0 1px; padding: 3px 2px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.product-group-title:first-child { margin-top: 0; }
.product-edit-card { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-raised), var(--surface)); box-shadow: var(--shadow-sm); transition: border-color .18s ease, opacity .18s ease; }
.product-edit-card:focus-within { border-color: color-mix(in srgb, var(--accent) 46%, var(--border)); }
.product-edit-card.is-inactive { opacity: .64; }
.product-main-row { display: grid; grid-template-columns: 20px 42px minmax(150px, 1fr) auto 36px; align-items: center; gap: 8px; }
/* Перетаскивание и номер позиции: колонки добавляются только когда порядок можно менять */
.is-sortable .product-main-row { grid-template-columns: 16px 44px 20px 42px minmax(130px, 1fr) auto 36px; }
.product-drag { cursor: grab; color: var(--text-muted); font-size: 1rem; line-height: 1; user-select: none; text-align: center; }
.product-drag:active { cursor: grabbing; }
.product-pos { width: 44px; min-height: 28px; height: 28px; padding: 3px 4px; border-radius: 7px; text-align: center; font-size: .78rem; }
.product-edit-card.is-dragging { opacity: .5; border-style: dashed; }
.product-edit-card.is-moved { animation: posFlash .9s ease; }
@keyframes posFlash { from { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); } to { background: var(--surface); } }
.reorder-hint { margin: 0 0 6px; font-size: .72rem; }
@media (max-width: 700px) {
  /* На телефоне тянуть неудобно — оставляем только номер позиции */
  .is-sortable .product-main-row { grid-template-columns: 40px 18px 38px minmax(0, 1fr) 34px; }
  .product-drag { display: none; }
}
.product-photo-control { position: relative; width: 40px; height: 40px; cursor: pointer; border-radius: 10px; }
.product-photo-control input { display: none; }
.product-photo-visual { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); font-size: 1.15rem; }
.product-photo-visual img { width: 100%; height: 100%; object-fit: cover; }
.product-photo-badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: var(--accent); color: var(--accent-text); font-size: .65rem; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.product-photo-control.is-uploading { pointer-events: none; opacity: .55; }
.product-photo-control.is-uploading::after { content: ""; position: absolute; inset: 14px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .65s linear infinite; }
.product-identity { min-width: 0; }
.product-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
.product-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; color: var(--text-muted); font-size: .72rem; }
.product-status { min-height: 30px; padding: 4px 8px; font-size: .73rem; }
.product-status.is-on { color: var(--ok); }
.product-more { min-width: 34px; min-height: 30px; padding-inline: 6px; }
/* Быстрая правка — плотная строка полей, чтобы на экран помещалось больше товаров */
.product-inline-grid { display: grid; grid-template-columns: minmax(88px, .85fr) minmax(84px, .7fr) minmax(104px, .95fr) 58px 58px 62px 62px; gap: 4px; margin: 5px 0 4px 68px; }
.compact-field { min-width: 0; }
.compact-field > span { display: block; overflow: hidden; margin: 0 0 1px 2px; color: var(--text-muted); font-size: .6rem; font-weight: 680; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.compact-field select, .compact-field input { min-height: 28px; height: 28px; padding: 3px 7px; border-radius: 7px; font-size: .75rem; }
.compact-field select { padding-right: 22px; background-position: calc(100% - 11px) 12px, calc(100% - 7px) 12px; background-size: 5px 5px; }
.compact-number input { text-align: center; padding-inline: 3px; }
.product-branch-hint { display: flex; flex-direction: column; justify-content: end; }
.product-branch-hint a { display: flex; align-items: center; min-height: 28px; padding: 3px 7px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); font-size: .78rem; }
.product-shift-row { display: flex; align-items: center; gap: 6px; margin-left: 68px; }
.product-shift-row > span { flex: 0 0 auto; color: var(--text-muted); font-size: .66rem; font-weight: 680; }
.shift-segments { display: inline-grid; grid-template-columns: repeat(4, minmax(64px, auto)); gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-soft); }
.shift-segment { min-height: 26px; padding: 3px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: .71rem; font-weight: 650; cursor: pointer; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.shift-segment:hover { color: var(--text); }
.shift-segment.active { background: var(--surface-raised); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 -2px 0 var(--accent); }
/* Группы прав роли */
.role-group { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.role-group > legend { padding: 0 6px; font-size: .9rem; font-weight: 700; }
.role-group-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.role-group .check-row small { font-size: .68rem; }

/* Быстрые переключатели в списках шаблонов */
.tpl-toggle { min-height: 32px; padding: 4px 10px; font-size: .78rem; white-space: nowrap; }
.tpl-toggle.is-on { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); color: var(--ok); }
.tpl-toggle.danger { color: var(--danger); }
tr.is-off > td:first-child { opacity: .6; }

.is-saving { opacity: .55 !important; pointer-events: none; }
.is-saved { border-color: var(--ok) !important; }

/* Поставщики: правка прямо в списке */
.supplier-editor-list { display: grid; gap: 6px; }
.supplier-edit-card { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.supplier-edit-card.is-inactive { opacity: .64; }
.supplier-main-row { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto 34px; align-items: center; gap: 6px; }
.supplier-main-row .supplier-name { min-height: 30px; height: 30px; padding: 4px 8px; font-size: .85rem; }
.supplier-count { flex: 0 0 auto; font-size: .72rem; white-space: nowrap; }
.supplier-status { min-height: 28px; padding: 4px 8px; font-size: .73rem; }
.supplier-status.is-on { color: var(--ok); }
.supplier-branch-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.supplier-branch-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: .74rem; cursor: pointer; }
.supplier-branch-chip input { width: 14px; height: 14px; margin: 0; }
.supplier-branch-chip.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }

/* Карточка поставщика: что у него заказывают */
.supplier-products-branch { margin-top: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; }
.supplier-products-branch > summary { cursor: pointer; font-weight: 650; font-size: .85rem; }
.supplier-products-list { display: grid; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; }
.supplier-products-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 3px 0; border-top: 1px solid var(--border); font-size: .82rem; }
.supplier-products-list li .sp-name { flex: 1 1 160px; min-width: 0; }
.supplier-products-list li .muted { font-size: .72rem; }

/* Средний расход в карточке товара */
.cons-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 8px; margin-bottom: 8px; }
.cons-card { padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.cons-branch { display: block; margin-bottom: 5px; font-size: .78rem; font-weight: 700; }
.cons-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: .82rem; }
.cons-row + small { display: block; margin-top: 4px; font-size: .7rem; }

/* Раздел «Расходы и потребление» */
.consumption-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.ct-item { display: flex; flex-direction: column; gap: 2px; }
.ct-item > span { color: var(--text-muted); font-size: .74rem; font-weight: 650; }
.ct-item > strong { font-size: 1.1rem; }
.consumption-table th, .consumption-table td { white-space: nowrap; }
.consumption-table td:first-child, .consumption-table th:first-child { white-space: normal; min-width: 160px; }
.cons-sub { font-size: .7rem; }
.cons-price { min-width: 96px; }
.cons-usage { min-width: 116px; }
.cons-usage-input { width: 78px; min-height: 30px; height: 30px; padding: 3px 6px; font-size: .8rem; text-align: right; }
.cons-price-input { width: 92px; min-height: 30px; height: 30px; padding: 3px 7px; font-size: .8rem; text-align: right; }
.section-title { margin: 14px 0 6px; font-size: 1rem; }

/* Копирование запасов между точками */
.stock-copy { margin-bottom: 8px; }
.stock-copy-title { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: .76rem; font-weight: 700; }
.stock-copy-controls { display: flex; gap: 6px; align-items: end; flex-wrap: wrap; }
.stock-copy-controls .field { flex: 1 1 150px; min-width: 0; margin: 0; }
.stock-copy-controls select { min-height: 34px; height: 34px; padding: 4px 8px; font-size: .82rem; }
.stock-copy-controls .btn { flex: 0 0 auto; min-height: 34px; }
@media (max-width: 700px) {
  .product-edit-card { padding: 8px; }
  .product-main-row { grid-template-columns: 18px 38px minmax(0, 1fr) 34px; gap: 6px; }
  .product-photo-control, .product-photo-visual { width: 36px; height: 36px; }
  .product-more { grid-column: 4; grid-row: 1; }
  .product-status { grid-column: 3; justify-self: start; min-height: 28px; margin-top: 1px; }
  /* На телефоне поля идут по два в ряд, числа — узкой парой */
  .product-inline-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 6px 0 4px 62px; }
  .product-branch-hint { grid-column: 1 / -1; }
  .product-shift-row { display: block; margin-left: 62px; }
  .product-shift-row > span { display: block; margin: 0 0 2px 2px; }
  .shift-segments { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .shift-segment { min-height: 30px; padding-inline: 3px; font-size: .68rem; }
}
@media (max-width: 420px) {
  .product-inline-grid, .product-shift-row { margin-left: 0; }
  .product-inline-grid { margin-top: 7px; }
}

.k-ic { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 26%;
  background:
    radial-gradient(120% 100% at 28% 18%, color-mix(in srgb, var(--ic-a) 92%, #fff) 0%, var(--ic-a) 42%, var(--ic-b) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 6px rgba(0,0,0,.22) inset,
    0 4px 10px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.3); }
.k-ic::after { content: ""; position: absolute; inset: 7% 9% 52%; border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.k-ic-glyph { position: relative; z-index: 1; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)) saturate(1.12); }
.k-ic-sm { width: 30px; height: 30px; } .k-ic-sm .k-ic-glyph { font-size: 17px; }
.k-ic-md { width: 46px; height: 46px; } .k-ic-md .k-ic-glyph { font-size: 26px; }
.k-ic-lg { width: 66px; height: 66px; } .k-ic-lg .k-ic-glyph { font-size: 38px; }
.icon-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.icon-field-current { display: flex; align-items: center; gap: 9px; }
.icon-field-name { font-size: .84rem; font-weight: 650; }
.icon-picker { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.icon-picker[hidden] { display: none; }
.icon-picker-search { margin-bottom: 8px; }
.icon-picker-group { margin-bottom: 10px; }
.icon-picker-group > h4 { margin: 0 0 6px; color: var(--text-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.icon-option { display: grid; justify-items: center; gap: 4px; padding: 6px 3px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text-muted); font-size: .62rem; line-height: 1.15; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.icon-option:hover { background: var(--surface-raised); transform: translateY(-1px); }
.icon-option.active { border-color: var(--accent); background: var(--surface-raised); color: var(--text); }
.icon-option[hidden] { display: none; }
.product-icon-control { position: relative; }
.product-icon-button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.product-icon-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(320px, 78vw); max-height: 320px; overflow: auto; box-shadow: var(--shadow-lg, 0 12px 28px rgba(0,0,0,.28)); }
.settings-color-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 12px; background: var(--surface-soft); }
.settings-color-group legend { padding: 0 6px; font-weight: 760; }
.settings-color-group .muted { margin: 6px 0 0; }
/* ── Проверка подключения iiko: результат по шагам ─────────────────────────
 * «Не работает» одной строкой не говорит, что чинить: между настройкой
 * и продажами шесть шагов, и сломаться может любой. Поэтому виден каждый.
 */
.iiko-check-head { margin-bottom: 8px; font-weight: 700; }
.iiko-check { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.iiko-check li {
  display: grid;
  gap: 1px;
  padding: 8px 10px 8px 12px;
  border-left: 3px solid var(--border);
  border-radius: 0 9px 9px 0;
  background: var(--surface-soft);
  font-size: .84rem;
}
.iiko-check li.is-ok { border-left-color: var(--ok); }
.iiko-check li.is-bad { border-left-color: var(--danger); }
.iiko-check li span { color: var(--text-muted); font-size: .8rem; line-height: 1.35; overflow-wrap: break-word; }

/* ── Продажи из iiko на главной ────────────────────────────────────────────
 * График — столбцы на CSS, без библиотек: в проекте нет сборки, а внешний
 * скрипт ради четырнадцати столбиков — лишняя зависимость и лишний запрос.
 * Высота приходит из разметки долей от лучшего дня, поэтому масштаб сумм
 * значения не имеет: и тысячи, и миллионы рисуются одинаково.
 */
.sales-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sales-metric { display: flex; flex-direction: column; gap: 1px; }
.sales-value { font-size: 1.25rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sales-label { font-size: .74rem; color: var(--text-muted); line-height: 1.3; }

.sales-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 116px;
  padding-bottom: 16px;
  position: relative;
}
.sales-bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.sales-bar-fill {
  display: block;
  width: 100%;
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background .16s ease;
}
/* Выходные тише буднего дня: провал в понедельник и провал в воскресенье —
   разные новости, и различать их нужно до того, как начнут считать */
.sales-bar.is-weekend .sales-bar-fill { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.sales-bar.is-best .sales-bar-fill { background: var(--accent); }
.sales-bar:hover .sales-bar-fill { background: var(--accent); }
.sales-bar-label {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  font-size: .62rem;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Четырнадцать подписей в ряд на телефоне не читаются — оставляем каждую третью */
.sales-bar:not(:nth-child(3n+1)) .sales-bar-label { display: none; }
.sales-note { margin: 14px 0 0; font-size: .78rem; }

@media (min-width: 721px) {
  .sales-chart { height: 150px; gap: 5px; }
  .sales-bar .sales-bar-label { display: block; }
}

/* ── Настройки: список свёрнутых разделов ──────────────────────────────────
 * Экран настроек был одной формой на сто сорок строк — двенадцать
 * заголовков подряд и абзацы объяснений между ними. С телефона нужную
 * настройку находили прокруткой наугад. Теперь страница открывается
 * списком названий: видно целиком, раскрывается то, что нужно.
 */
.settings-form { max-width: 640px; }
.settings-group {
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  overflow: hidden;
}
.settings-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.settings-head::-webkit-details-marker { display: none; }
.settings-title { font-size: .96rem; font-weight: 720; }
/* Подпись объясняет, что внутри, — иначе раскрывать приходится наугад */
.settings-hint { flex: 1 1 auto; color: var(--text-muted); font-size: .78rem; line-height: 1.3; }
.settings-head::after {
  content: '⌄';
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .18s ease;
}
.settings-group[open] > .settings-head::after { transform: rotate(180deg); }
.settings-group[open] > .settings-head { border-bottom: 1px solid var(--border); }
.settings-head:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.settings-head:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.settings-body { padding: 14px; }
.settings-body > h4 { margin: 18px 0 8px; font-size: .84rem; font-weight: 720; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.settings-body > h4:first-child { margin-top: 0; }
.settings-body > .muted { margin: 6px 0 10px; }

/* Длинное объяснение нужно один раз, а мешает каждый раз */
.settings-help { margin: 0 0 12px; }
.settings-help > summary { cursor: pointer; color: var(--text-muted); font-size: .8rem; padding: 4px 0; }
.settings-help > summary:hover { color: var(--text); }
.settings-help .muted { margin: 4px 0 0; font-size: .82rem; line-height: 1.5; }

/* Кнопка держится у нижнего края: форма одна на все разделы */
.settings-save {
  position: sticky;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 20;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}

.settings-qr { width: 132px; height: 132px; margin: 4px 0 12px; padding: 6px; border-radius: 12px; background: #fff; object-fit: contain; }
.settings-staff { display: grid; gap: 5px; margin: 8px 0 10px; padding: 0; list-style: none; }
.settings-staff li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 9px; background: var(--surface-soft); font-size: .84rem; }
.settings-staff small { color: var(--text-muted); text-align: right; }

.inventory-link-actions { margin: 7px 0 14px; }
.inventory-access-form { padding-top: 12px; border-top: 1px solid var(--border); }
.inventory-access-form .field { margin-bottom: 8px; }
.inventory-access-form .check-row { min-height: 42px; font-size: .84rem; }
.inventory-access-page { width: 100%; max-width: 560px; margin: 0 auto; }
.access-lock { display: grid; place-items: center; width: 64px; height: 64px; margin: 2px auto 12px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); font-size: 1.8rem; box-shadow: var(--shadow-sm); }
.inventory-access-page .page-title { text-align: center; margin-bottom: 6px; }
.access-password-card { margin-top: 18px; }
.access-password-card h2 { margin-top: 0; }
.access-staff-grid { display: grid; gap: 7px; }
.access-staff-grid > div { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; background: var(--surface-soft); }
.access-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-weight: 800; }
.access-staff-grid strong, .access-staff-grid small { display: block; }
.access-staff-grid small { color: var(--text-muted); }
@media (max-width: 720px) {
  .admin-inventory-label { display: none; }
  .admin-inventory-btn { min-width: 38px; padding-inline: 9px; }
  .admin .topbar-user > a[href="/dashboard"] { display: none; }
  /*
   * На узком экране подпись уходит под название. Порядок задан явно:
   * стрелка — последний элемент разметки, и без него подпись во всю
   * ширину выталкивала её на третью строку, а раздел вырастал вдвое.
   */
  .settings-head { flex-wrap: wrap; align-items: center; row-gap: 2px; padding: 11px 12px; }
  .settings-title { flex: 1 1 auto; order: 1; }
  .settings-head::after { order: 2; }
  .settings-hint { flex: 1 1 100%; order: 3; }
  .settings-body { padding: 12px; }
}
@media (max-width: 420px) {
  .inventory-link-actions .btn { flex: 1 1 90px; }
  .settings-staff li { display: block; }
  .settings-staff small { display: block; margin-top: 2px; text-align: left; }
}

.integration-card { position: relative; overflow: visible; }
.integration-email { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); }
.integration-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.integration-test-result { min-height: 20px; color: var(--text-muted); font-size: .86rem; font-weight: 650; }
.integration-test-result.is-success { color: var(--success); }
.integration-test-result.is-error { color: var(--danger); }
.integration-advanced { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.integration-advanced summary { cursor: pointer; color: var(--text-muted); font-weight: 700; }
.integration-advanced[open] summary { margin-bottom: 12px; color: var(--text); }
@media (max-width: 480px) {
  .integration-test-row .btn { width: 100%; }
  .integration-test-result { display: block; width: 100%; }
}

.zone-choice-field { min-inline-size: 0; padding: 0; border: 0; }
.zone-choice-field legend { margin-bottom: 8px; font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.zone-choice-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.zone-choice { min-height: 44px; padding: 9px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); color: var(--text); font-weight: 700; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.zone-choice:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.zone-choice:active { transform: scale(.98); }
.zone-choice.active { border-color: var(--accent); background: var(--accent); color: var(--accent-text); box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 20%, transparent); }
.zone-choice:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.branch-assignment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.branch-assignment { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); cursor: pointer; }
.branch-assignment input { flex: 0 0 20px; }
@media (max-width: 720px) {
  .topbar { gap: 7px; }
  .branch-context-form { order: 2; }
  .branch-context-form > span { display: none; }
  .branch-context-form select { width: min(38vw, 150px); }
  body:not(.admin) .topbar-name { display: none; }
  .admin .topbar-name { display: none; }
}
@media (max-width: 430px) {
  .brand { font-size: 0; gap: 0; }
  .brand-badge { font-size: 1rem; }
  .zone-choice { flex: 1 1 calc(50% - 8px); }
}

/* Баннеры */
.banner-strip { display: flex; gap: 12px; overflow-x: auto; margin-bottom: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.banner-strip::-webkit-scrollbar { display: none; }
.banner-item { position: relative; flex: 0 0 auto; max-width: 100%; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.banner-item img { display: block; max-width: 100%; object-fit: cover; }
/* Авто: ширина по экрану, высота подстраивается под устройство */
.banner-auto { flex: 1 1 100%; min-width: min(100%, 320px); }
.banner-auto img { width: 100%; height: clamp(110px, 26vw, 240px); }
/* Фиксированная высота из настроек баннера */
.banner-fixed img { height: var(--banner-h, 180px); width: auto; max-width: 100%; }
.banner-strip:has(.banner-item:only-child) .banner-item { flex: 1 1 100%; }
.banner-strip:has(.banner-item:only-child) .banner-item img { width: 100%; }
/* Текст поверх баннера */
.banner-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; color: #fff; font-weight: 700; font-size: clamp(.9rem, 2.4vw, 1.15rem); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); background: linear-gradient(transparent, rgba(0, 0, 0, .62)); pointer-events: none; }
a.banner-item { transition: transform .15s ease, box-shadow .15s ease; }
a.banner-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.banner-admin-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.banner-upload-preview { width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.banner-upload-preview img { display: block; width: 100%; height: clamp(110px, 24vw, 220px); object-fit: cover; }
.banner-settings-form { padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 82%, var(--bg)); }
.banner-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.banner-settings-actions .check-row { margin: 0; }
.nowrap { white-space: nowrap; }
/* Телефон */
@media (max-width: 600px) {
  .banner-strip { gap: 9px; margin-bottom: 13px; }
  .banner-auto img { height: clamp(96px, 30vw, 150px); }
  .banner-fixed img { height: min(var(--banner-h, 180px), 42vw); }
  .banner-title { padding: 16px 11px 8px; }
}
/* Планшет */
@media (min-width: 601px) and (max-width: 1024px) {
  .banner-auto img { height: clamp(130px, 22vw, 210px); }
}
/* Компьютер */
@media (min-width: 1025px) {
  .banner-auto img { height: clamp(160px, 18vw, 260px); }
}

/* --- Модуль «Цех»: таблица на ПК, карточки на телефоне --- */
.ws-cards { display: none; }
.ws-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.ws-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ws-card-title { font-weight: 600; font-size: 1.05rem; }
.ws-days { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-days label { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); }
/* Порядок шагов цеха в админке */
.step-order { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.step-order-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.step-order-num {
  flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: .8rem;
}
.step-order-label { flex: 1; min-width: 0; font-weight: 650; }
.step-order-title { flex: 1; min-width: 0; min-height: 42px; font-weight: 650; }
.step-order-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.step-order-btns .btn { min-width: 40px; }
.step-order-btns .btn:disabled { opacity: .35; cursor: default; }

/* Пошаговый режим: переход между страницами шагов */
.ws-wizard-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px 0 18px; padding: 10px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ws-wizard-nav .btn { flex: 0 1 auto; }
.ws-wizard-pos { font-size: .78rem; font-weight: 750; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 620px) {
  .ws-wizard-nav { flex-wrap: wrap; position: sticky; bottom: 64px; z-index: 30; backdrop-filter: blur(12px); }
  .ws-wizard-nav .btn { flex: 1 1 46%; }
  .ws-wizard-pos { flex: 1 1 100%; order: -1; text-align: center; }
}

/* Выбор режима показа шагов */
.ws-mode-pick { display: grid; gap: 8px; }
.ws-mode-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.ws-mode-opt:has(input:checked) { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.ws-mode-opt input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.ws-mode-opt span { display: flex; flex-direction: column; gap: 2px; }

/* Незаполненное обязательное поле */
.is-invalid,
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
  animation: shakeField .3s ease;
}
@keyframes shakeField {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Списки отметок в админке: точки цеха и сотрудники */
.ws-check-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; margin-bottom: 12px; }
.ws-check-list > label, .ws-pick-row > label { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.ws-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ws-table { display: none; }
  .ws-cards { display: block; }
}

/* Заявка в цех: строка товара и кнопки количества */
.ws-group { margin: 18px 0 6px; font-size: 0.95rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ws-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ws-line-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-line.is-filled { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.ws-stepper { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ws-stepper .ws-step { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.2rem; }
.ws-qty { width: 88px; min-height: 44px; text-align: center; font-size: 1.05rem; }
.ws-sticky {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; margin-top: 12px;
  background: var(--surface-raised); border-top: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.ws-sticky .btn { min-height: 48px; }
.ws-decide { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ws-decide-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-decide input[name*="comment"] { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .ws-decide { grid-template-columns: 1fr auto; }
  .ws-decide .ws-decide-actions { grid-column: 1 / -1; }
  .ws-sticky { bottom: 64px; }
}
.s-adjusted, .s-assembling { background: color-mix(in srgb, var(--warn) 25%, transparent); }
.s-rejected, .s-cancelled { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.s-assembled, .s-shipped { background: color-mix(in srgb, var(--ok) 25%, transparent); }

/* Фотографии сборки */
.ws-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.ws-photo { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ws-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); }
.ws-photo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ws-photo-form .field { flex: 1 1 220px; }

/* Сводка по товарам: сколько на точках и в категориях */
.product-summary { display: flex; flex-direction: column; gap: 12px; }
.product-summary-total { font-size: 15px; }
.product-summary-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.product-summary-title { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.product-summary-list { list-style: none; margin: 0; padding: 0; }
.product-summary-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.product-summary-list li:last-child { border-bottom: none; }
.list-count { margin-top: 12px; font-size: 13px; }

/* Цех: итоги сборки и дополнительные позиции */
.ws-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ws-totals > div { display: flex; flex-direction: column; gap: 1px; }
.ws-totals span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.ws-totals strong { font-size: .95rem; }
@media (max-width: 620px) {
  .ws-totals { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .ws-totals span { font-size: 10px; }
}
.tag-extra { background: color-mix(in srgb, var(--warn) 30%, transparent); }
.ws-extra-list { display: flex; flex-direction: column; gap: 8px; }
.ws-extra-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ws-extra-row:last-child { border-bottom: none; }

/* Цех: вкладки списка заявок */
.ws-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ws-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 999px; text-decoration: none;
  color: inherit; background: var(--surface); font-size: 14px; min-height: 40px;
}
.ws-tab.is-active { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 700; }
.ws-tab-count { font-size: 12px; opacity: .7; }
.ws-tab.is-active .ws-tab-count { opacity: 1; }

/* Цех: подсказка следующего шага */
.ws-hint { margin: 6px 0; font-size: 14px; color: var(--text-muted); }
.ws-hint.is-mine { color: inherit; font-weight: 600; }
.ws-card.is-mine { border-left: 4px solid var(--warn); }

/* Шкала шагов процесса: инвентаризация, заявка поставщику, заявка в цех */
.flow { margin: 0 0 14px; }
.flow-line { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.flow-step {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: .81rem; color: var(--text-muted);
}
.flow-dot {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%; background: var(--border); font-size: .72rem; font-weight: 800;
}
.flow-label { overflow-wrap: break-word; }
.flow-step.is-done { color: inherit; }
.flow-step.is-done .flow-dot { background: color-mix(in srgb, var(--ok) 55%, transparent); color: #fff; }
.flow-step.is-current { color: var(--accent-text); font-weight: 750; border-color: transparent; background: var(--accent); }
.flow-step.is-current .flow-dot { background: rgba(0, 0, 0, .16); color: inherit; }
.flow-now { margin: 8px 0 0; font-size: .88rem; color: var(--text-muted); }
.flow-now strong { color: var(--text); }
.flow-of { color: var(--text-muted); }
.flow-of::before { content: '· '; }
.flow-hint { display: block; margin-top: 1px; }
.flow-now.is-mine {
  color: var(--text); padding: 9px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-left: 4px solid var(--warn);
}

/*
 * На телефоне шкала сжимается до дорожки точек. Пять подписей в пилюлях
 * переносились на две строки и вместе с подсказкой занимали треть экрана
 * до первой полезной строки. Названия остаются в разметке — их читает
 * экранный диктор, а название текущего шага стоит словами под дорожкой.
 */
@media (max-width: 720px) {
  .flow-line { gap: 0; align-items: center; }
  .flow-step {
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .flow-step:first-child { flex: 0 0 auto; }
  /* Соединительная черта растёт между точками и держит их на равных долях */
  .flow-step + .flow-step::before {
    content: '';
    flex: 1 1 auto;
    height: 2px;
    min-width: 8px;
    background: var(--border);
  }
  .flow-step.is-done + .flow-step::before,
  .flow-step.is-current + .flow-step::before { background: color-mix(in srgb, var(--ok) 45%, transparent); }
  .flow-step .flow-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
  .flow-step.is-current { color: inherit; font-weight: inherit; background: none; }
  .flow-step.is-current .flow-dot {
    background: var(--accent);
    color: var(--accent-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  }
}

/* ======= Оболочка приложения: шапка, таб-бар, шторки ======= */
.appbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 8px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.appbar-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 850; letter-spacing: -.02em; flex: 0 0 auto; }
.appbar-title { font-weight: 750; font-size: .95rem; flex: 1 1 auto; min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.branch-chip {
  flex: 0 1 auto; min-width: 0; max-width: min(44vw, 200px); margin-right: auto;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 38px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--text); font-size: .82rem; font-weight: 700;
  transition: background .18s ease, border-color .18s ease;
}
.branch-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.branch-chip:active { transform: scale(.98); }
.branch-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-chip-caret { opacity: .55; font-size: .7rem; }
.branch-chip > span[aria-hidden] { font-size: .82rem; }

.icon-btn {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--text); font-size: 1.05rem; line-height: 1;
  transition: background .18s ease, transform .14s ease;
}
.icon-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.icon-btn:active { transform: scale(.94); }
.icon-badge {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .66rem; font-weight: 800; border: 2px solid var(--bg);
}
.avatar-btn { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent)); color: var(--accent-text); border-color: transparent; font-size: .82rem; font-weight: 850; letter-spacing: .02em; }
.avatar-lg {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
  color: var(--accent-text); font-weight: 850; font-size: 1.1rem; flex: 0 0 auto;
}

/* Шторка снизу */
.sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); animation: sheetFade .18s ease; }
.sheet-panel {
  position: relative; width: min(560px, 100%);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-bottom: 0;
  border-radius: 24px 24px 0 0;
  padding: 8px clamp(14px, 4vw, 22px) calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 50px rgba(0,0,0,.35);
  max-height: 86vh; overflow-y: auto;
  animation: sheetUp .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetUp { from { transform: translateY(18px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
.sheet-handle { width: 42px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 24%, transparent); margin: 6px auto 14px; cursor: pointer; }
.sheet-title { margin: 0 0 14px; font-size: 1.05rem; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.sheet-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 88px; padding: 12px 8px; border-radius: 18px; text-align: center;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: .8rem; font-weight: 650; transition: transform .16s ease, background .16s ease;
}
.sheet-tile:active { transform: scale(.96); }
.sheet-tile.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sheet-tile-ico { font-size: 1.5rem; line-height: 1; }
.sheet-user { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sheet-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sheet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 52px; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text); font-size: .95rem; font-weight: 620;
}
.sheet-row:active { transform: scale(.99); }
.sheet-row.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 750; }
body.sheet-open { overflow: hidden; }

/* ======= Цех: пошаговая отправка ======= */
.ws-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.ws-steps-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 10px 6px; border-radius: 14px; font-size: .76rem; font-weight: 650;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); color: var(--text-muted);
}
.ws-steps-num {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--border); color: var(--text); font-weight: 800; font-size: .82rem;
}
.ws-steps-item.is-current { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ws-steps-item.is-current .ws-steps-num { background: var(--accent); color: var(--accent-text); }
.ws-steps-item.is-done { color: var(--text); }
.ws-steps-item.is-done .ws-steps-num { background: color-mix(in srgb, var(--ok) 60%, transparent); }
.ws-steps-item.is-wait { opacity: .6; }
/*
 * Шаг-ссылка. Переходить между шагами кнопками внизу значило держать рядом
 * с главной вторую — лишнее нажатие. По самим шагам это естественнее,
 * и нажимается вся плитка, а не только надпись.
 */
.ws-steps-item > a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; color: inherit; text-decoration: none;
}
.ws-steps-item:has(> a) { cursor: pointer; }
.ws-steps-item.is-open { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ws-steps-item > a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 10px; }
@media (hover: hover) {
  .ws-steps-item:has(> a):hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
}
.ws-step-badge {
  display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text); font-size: .7rem; font-weight: 800; vertical-align: middle;
}
.card.is-locked { opacity: .62; }
.ws-sub { margin: 18px 0 8px; font-size: .95rem; }

/* Степпер количества */
.ws-stepper { display: inline-flex; align-items: center; gap: 6px; }
.ws-stepper .ws-qty { width: 86px; text-align: center; font-weight: 700; }
.ws-stepper-sm .ws-qty { width: 62px; padding: 6px; }
.ws-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--text); font-size: 1.2rem; font-weight: 800; line-height: 1;
  transition: transform .12s ease, background .16s ease;
}
.ws-step:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.ws-step:active { transform: scale(.92); }
.ws-stepper-sm .ws-step { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
.ws-decide-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Компактный список позиций: товар · нужно · отправляем */
.ws-grid-head {
  display: grid; grid-template-columns: 1fr 52px auto 26px; gap: 8px; align-items: center;
  padding: 4px 8px; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
}
.ws-grid-head span:nth-child(2) { text-align: center; }
.ws-grid-head span:nth-child(3) { text-align: center; min-width: 132px; }
.ws-grid-row {
  display: grid; grid-template-columns: 1fr 52px auto 26px; gap: 8px; align-items: center;
  padding: 7px 8px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 5px;
  background: var(--surface); transition: background .16s ease, border-color .16s ease;
}
.ws-grid-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ws-grid-name strong { font-size: .9rem; font-weight: 700; overflow-wrap: break-word; }
.ws-grid-name small { font-size: .7rem; }
.ws-grid-asked { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; }
.ws-grid-row.is-changed { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 48%, var(--border)); }
/* Собрано больше заявки — не ошибка, отмечаем спокойным зелёным */
.ws-grid-row.is-over { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 42%, var(--border)); }
.ws-grid-asked[data-over]:not([data-over=""])::after { content: attr(data-over); display: block; color: var(--ok); font-size: .66rem; font-weight: 650; }
.ws-qty-note { display: block; margin-top: 4px; font-size: .7rem; }
.ws-grid-row.is-zero { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 42%, var(--border)); }
.ws-grid-row.is-extra { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ws-grid-more {
  width: 26px; height: 38px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 1.1rem; font-weight: 800; border-radius: 9px;
}
.ws-grid-more:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.ws-grid-extra {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding-top: 7px; margin-top: 3px; border-top: 1px dashed var(--border);
}
.ws-grid-extra input[type="text"] { flex: 1 1 100%; min-height: 40px; }
.ws-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; font-size: .82rem; }
#wsAssemblyHint.is-warn, #wsDecideHint.is-warn { color: var(--warn); font-weight: 700; }
.ws-decide-hint { margin: 8px 0 4px; font-size: .85rem; }

/*
 * Телефон: позиция в одну строку. Раньше кнопки уезжали под название —
 * строка занимала 110 px, и десять позиций превращались в четыре экрана
 * прокрутки. Теперь слева название, под ним мелко «нужно 22 шт.», справа
 * кнопки на всю высоту строки: считать и править можно, не отрывая пальца.
 */
@media (max-width: 620px) {
  .ws-grid-head { display: none; }
  .ws-grid-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name  stepper more" "asked stepper more";
    row-gap: 1px; column-gap: 6px; padding: 6px 8px; margin-bottom: 4px;
  }
  .ws-grid-name { grid-area: name; align-self: end; }
  .ws-grid-name strong { font-size: .92rem; line-height: 1.25; overflow-wrap: break-word; }
  .ws-grid-asked {
    grid-area: asked; align-self: start;
    display: flex; align-items: baseline; gap: 4px;
    font-size: .78rem; font-weight: 700; color: var(--text-muted);
  }
  .ws-grid-asked small { font-weight: 600; }
  .ws-grid-asked[data-label]::before {
    content: attr(data-label); font-size: .68rem; font-weight: 650;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
  }
  /* Кнопки во всю высоту строки: по ним попадают не глядя */
  .ws-grid-row .ws-stepper { grid-area: stepper; grid-row: 1 / 3; align-self: center; }
  .ws-grid-more { grid-area: more; grid-row: 1 / 3; align-self: center; height: 44px; }
  .ws-grid-extra { grid-area: auto; grid-column: 1 / -1; }
  .ws-stepper-sm { gap: 3px; }
  .ws-stepper-sm .ws-step { width: 40px; height: 44px; font-size: 1.15rem; }
  .ws-stepper-sm .ws-qty { width: 54px; min-height: 44px; font-size: 1.02rem; padding-inline: 2px; }
}

/* Статистика: период, выбор точек, топ-списки */
.stats-filters { display: flex; flex-direction: column; gap: 12px; }
.stats-periods { display: flex; gap: 6px; flex-wrap: wrap; }
.stats-periods .chip { border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }
.stats-dates { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.stats-dates .field { flex: 1 1 150px; }
.stats-branches { border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin: 0; }
.stats-branches legend { padding: 0 6px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.stats-branch-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: .8rem; }
.stats-branch-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.stats-branch {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: .85rem; font-weight: 650;
}
.stats-branch.is-on { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.stats-branch input { width: 20px; height: 20px; }
.stats-sub { display: block; font-size: .7rem; margin-top: 2px; }
.stats-top { list-style: none; margin: 0; padding: 0; counter-reset: statsTop; }
.stats-top li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.stats-top li:last-child { border-bottom: none; }
.stats-top li::before {
  counter-increment: statsTop; content: counter(statsTop);
  flex: 0 0 22px; font-size: .72rem; font-weight: 800; color: var(--text-muted);
}
.stats-top-name { flex: 1; min-width: 0; font-weight: 650; overflow-wrap: break-word; }
.stats-top-num { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .9rem; }

/* Заявка поставщику: строки товаров */
.po-line {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 5px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.po-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.po-line-main strong { font-size: .92rem; overflow-wrap: break-word; }
.po-line-main small { font-size: .72rem; }
.po-low-note { color: var(--warn); font-weight: 700; font-size: .72rem; }
.po-line.is-low { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.po-line.is-picked { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }

/* Фото сборки: загрузка сразу после выбора */
.ws-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ws-photo-btn { flex: 1 1 150px; text-align: center; cursor: pointer; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; }
.ws-photo-queue { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ws-photo-up {
  display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
}
.ws-photo-up img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; background: var(--border); flex: 0 0 auto; }
.ws-photo-up-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ws-photo-up-name { font-size: .8rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-photo-up-state { font-size: .75rem; color: var(--text-muted); }
.ws-photo-up.is-done { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); }
.ws-photo-up.is-done .ws-photo-up-state { color: var(--ok); font-weight: 700; }
.ws-photo-up.is-error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.ws-photo-up.is-error .ws-photo-up-state { color: var(--danger); font-weight: 700; }

/* Выбор товаров: категории и мультивыбор */
.ws-cat-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.ws-cat {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  color: var(--text); font-size: .82rem; font-weight: 650;
}
.ws-cat.is-active { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.ws-pick-list {
  display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto;
  margin-bottom: 12px; padding: 4px; border: 1px solid var(--border); border-radius: 14px;
  overscroll-behavior: contain;
}
.ws-pick-group {
  position: sticky; top: -4px; z-index: 2; margin: 2px 0 0; padding: 6px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  font-size: .72rem; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ws-pick {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
/* Степпер здесь узкий: место нужнее названию товара */
.ws-pick .ws-stepper-sm { gap: 4px; }
.ws-pick .ws-stepper-sm .ws-step { width: 36px; height: 40px; font-size: 1.05rem; }
.ws-pick .ws-stepper-sm .ws-qty { width: 42px; min-height: 40px; padding: 4px; font-size: 1rem; }
.ws-pick.is-picked { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ws-pick input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.ws-pick-name {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  cursor: pointer; font-weight: 650; font-size: .88rem; line-height: 1.25; text-align: left;
  overflow-wrap: break-word;
}
.ws-pick-name small { font-weight: 500; font-size: .72rem; }

/* Маршрут курьера */
.ws-route { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ws-route-row {
  display: grid; grid-template-columns: 24px 28px 1fr; grid-template-areas: "check num name" ". . note";
  align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.ws-route-row.is-on { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-route-row.is-target { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.ws-route-on { grid-area: check; width: 22px; height: 22px; }
.ws-route-num { grid-area: num; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--border); font-size: .78rem; font-weight: 800; }
.ws-route-row.is-on .ws-route-num { background: var(--accent); color: var(--accent-text); }
.ws-route-name { grid-area: name; font-weight: 650; font-size: .9rem; }
.ws-route-note { grid-area: note; margin-top: 4px; font-size: .85rem; }
.ws-route-done { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* Сводка отправки */
.ws-ship-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 12px; }
.ws-ship-facts dt { font-size: .76rem; color: var(--text-muted); font-weight: 620; }
.ws-ship-facts dd { margin: 2px 0 0; font-weight: 700; }

/* Цех: прогресс сборки */
.ws-progress-card { display: flex; flex-direction: column; gap: 8px; }
.ws-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ws-progress { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.ws-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width .25s ease; }

/* Страница курьера */
.ws-courier-head { margin-bottom: 10px; }
.ws-courier-head h1 { margin: 0 0 4px; font-size: 1.35rem; }
.ws-courier-notice {
  padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-left: 4px solid var(--warn); font-size: .9rem;
}
.ws-courier-progress { margin: 0 0 14px; }
.ws-courier-ribbon {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory;
  margin: 0 0 14px;
}
.ws-courier-chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  text-decoration: none; color: inherit; scroll-snap-align: start;
}
.ws-courier-chip.is-current { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-courier-chip.is-done { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ws-courier-chip-num {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--border); font-size: .75rem; font-weight: 800;
}
.ws-courier-chip.is-current .ws-courier-chip-num { background: var(--accent); color: var(--accent-text); }
.ws-courier-chip.is-done .ws-courier-chip-num { background: var(--ok); color: #fff; }
.ws-courier-chip-name { font-weight: 650; font-size: .82rem; white-space: nowrap; }
.ws-courier-point { margin-bottom: 12px; }
.ws-courier-point.is-done { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.ws-courier-point-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ws-courier-step-badge {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 800;
}
.ws-courier-point-title { flex: 1; }
.ws-courier-point-title h2 { margin: 0; font-size: 1.15rem; }
.ws-courier-note { margin: 0 0 12px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ws-courier-items { margin: 0 0 12px; }
.ws-courier-items ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-courier-items li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.ws-courier-item-name { min-width: 0; font-weight: 650; }
.ws-courier-item-qty { white-space: nowrap; font-weight: 700; }
.ws-courier-actions { margin-top: 12px; }
.ws-courier-done { color: var(--ok); font-weight: 700; }
.ws-courier-bottom { position: sticky; bottom: 6px; z-index: 10; }

/* Сборка цеха: поиск и фильтры по составу */
.ws-find { margin: 10px 0 12px; }
.ws-find input[type="search"] { width: 100%; min-height: 46px; }
.ws-find .count-chips { margin-top: 8px; }
.ws-grid-row[hidden] { display: none !important; }

/* Вид кнопок задан один раз в начале файла — здесь он больше не повторяется */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Кабинет поставщика по ссылке */
.supplier-portal { max-width: 780px; margin: 0 auto; padding: 16px; }
.sp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px) minmax(0, 120px);
  gap: 8px 12px; align-items: end; padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.sp-row:last-of-type { border-bottom: 0; }
.sp-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-note { grid-column: 1 / -1; }
.sp-row .field { margin: 0; }
@media (max-width: 720px) {
  .sp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 110px); }
  .sp-status { grid-column: 1 / -1; }
}

/* Незаполненное обязательное поле: видно поле и блок, в котором оно спрятано */
.is-invalid,
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 30%, transparent); }
.has-invalid {
  border-radius: 13px;
  outline: 2px solid color-mix(in srgb, var(--danger) 45%, transparent);
  outline-offset: 3px;
  animation: kShake .28s ease;
}
@keyframes kShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .has-invalid { animation: none; } }

/* Отправка нескольких заказов одной поездкой */
.dispatch-list { display: grid; gap: 8px; margin: 10px 0 18px; }
.dispatch-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 13px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, transparent); cursor: pointer;
}
.dispatch-row.is-picked { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dispatch-row.is-blocked { opacity: .7; cursor: default; }
.dispatch-row input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; }
.dispatch-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.dispatch-send { position: sticky; bottom: 74px; z-index: 12; padding-top: 10px; background: linear-gradient(180deg, transparent, var(--surface) 40%); }

/* Сборка цеха: одна финальная кнопка внизу страницы и свёрнутый блок «доложить» */
.ws-bottom-bar { position: sticky; bottom: 78px; z-index: 14; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ws-bottom-bar .muted { margin: 8px 0 0; font-size: .78rem; text-align: center; }
.ws-bottom-bar .alert { margin-top: 0; }
.ws-autosave { margin: 10px 0 0; font-size: .78rem; }
.ws-add-extra summary { cursor: pointer; font-size: .95rem; }
.ws-add-extra[open] summary { margin-bottom: 10px; }
.ws-extra-remove { margin-left: auto; }

/* Кабинет курьера */
.trip-card { border-left: 5px solid var(--border); margin-bottom: 12px; }
.trip-card.is-picked { border-left-color: var(--warn); }
.trip-card.is-transit { border-left-color: var(--accent); }
.trip-card.is-failed { border-left-color: var(--danger); }
.trip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.trip-title { margin: 0; font-size: 1.08rem; }
.trip-line { margin: 8px 0 0; font-size: .9rem; overflow-wrap: break-word; }
.trip-note { margin: 8px 0 0; padding: 9px 11px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: .88rem; }
.trip-sub { margin: 14px 0 8px; font-size: .95rem; }
.trip-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trip-point {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border-radius: 13px;
  background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid transparent;
}
.trip-point.is-done { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.trip-point.is-problem { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.trip-point-num {
  flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: .8rem;
}
.trip-point-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.trip-point-note { font-size: .82rem; }
.trip-point-actions { flex: 0 0 auto; display: flex; gap: 5px; }
.trip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.trip-actions .btn { flex: 1 1 180px; }
.trip-problem { margin: 12px 0 0; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--danger) 13%, transparent); font-size: .9rem; }
.trip-problem-form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }

/* Производственный план цеха: оформление собрано выше, здесь только сводка */
.prod-summary h2 { margin: 0 0 4px; }

/* Печать производственного листа: только план, без интерфейса */
@media print {
  .appbar, .topbar, .bottomnav, .admin-nav, .no-print, .toolbar, .flow, script { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card { break-inside: avoid; border: 1px solid #999; box-shadow: none; background: #fff; }
  .prod-branches[open] summary, .prod-branches summary { list-style: none; }
  .prod-branches { display: block; }
  .prod-branches ul { display: block; }
  a[href]::after { content: ""; }
}

/* Экран проверки заявки перед отправкой */
.review-group { border-left: 5px solid var(--border); }
.review-group.is-workshop { border-left-color: var(--ok); }
.review-group.is-supplier { border-left-color: var(--accent); }
.review-group.is-unset { border-left-color: var(--danger); }
.review-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.review-row:last-of-type { border-bottom: 0; }
.review-row.is-changed { background: color-mix(in srgb, var(--warn) 9%, transparent); border-radius: 12px; padding-inline: 10px; }
.review-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.review-facts { font-size: .78rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.review-qty { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.review-label { font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.review-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.review-reason-field { flex: 1 1 220px; margin: 0; }
.review-calc { font-size: .72rem; overflow-wrap: break-word; }
.review-send { position: sticky; bottom: 74px; z-index: 12; }
.review-fallback { margin-top: 10px; }
.review-fallback summary { cursor: pointer; font-size: .85rem; }
.order-bulk-line { padding: 5px 0; font-size: .85rem; border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent); }
.order-bulk-line.is-ok { color: color-mix(in srgb, var(--ok) 78%, var(--text)); }
.order-bulk-line.is-warn { color: color-mix(in srgb, var(--danger) 78%, var(--text)); }

/* Главный экран: карточки задач вместо меню разделов */
.tasks-lead { margin: -6px 0 12px; }
.tasks-sub { margin: 22px 0 10px; }
.tasks { display: grid; gap: 12px; }
.task-card {
  position: relative;
  padding: 14px 15px; border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
  box-shadow: var(--shadow-sm); border-left: 5px solid var(--border);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.task-card.is-do { border-left-color: var(--accent); }
.task-card.is-warn { border-left-color: var(--danger); }
.task-card.is-wait { border-left-color: color-mix(in srgb, var(--text) 22%, transparent); opacity: .92; }
/* Срочное видно, не читая: слева от полосы лёгкий отсвет её цвета */
.task-card.is-warn { background: linear-gradient(100deg, color-mix(in srgb, var(--danger) 9%, var(--surface)), var(--surface) 42%); }
.task-card.is-do { background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 42%); }
/* Нажимается вся карточка, а не только кнопка: попасть пальцем в кнопку
   на ходу тяжело, а промах по карточке раньше просто ничего не делал */
.task-card .task-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.task-card:active { transform: scale(.995); }
@media (hover: hover) {
  .task-card:has(.task-go:hover) { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
.task-head { display: flex; align-items: flex-start; gap: 11px; }
.task-icon { flex: 0 0 auto; font-size: 1.5rem; line-height: 1.1; }
.task-title-box { flex: 1 1 auto; min-width: 0; }
.task-title { margin: 0; font-size: 1.06rem; line-height: 1.25; }
.task-sub { margin: 3px 0 0; color: var(--text-muted); font-size: .87rem; overflow-wrap: break-word; }
.task-tone {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: .67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted);
}
.task-card.is-do .task-tone { background: var(--accent); color: var(--accent-text); }
.task-card.is-warn .task-tone { background: color-mix(in srgb, var(--danger) 20%, transparent); color: color-mix(in srgb, var(--danger) 82%, var(--text)); }
.task-meta { margin: 9px 0 0; font-size: .81rem; color: var(--text-muted); overflow-wrap: break-word; }
.task-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.task-foot .btn { flex: 1 1 190px; }

/* ── Строка точки в списке сети ── */
.branch-row { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.branch-row-dot { flex: 0 0 auto; }
.branch-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.branch-row-name { font-weight: 700; overflow-wrap: break-word; }
.branch-row-sub { font-size: .82rem; color: var(--text-muted); overflow-wrap: break-word; }
.branch-row .progress-thin { margin: 5px 0 0; }
.branch-row-go { flex: 0 0 auto; color: var(--text-muted); font-size: 1.1rem; }

/* Приёмка товара точкой */
.receipt-quick { margin-bottom: 16px; }
.receipt-row.is-changed { border-color: color-mix(in srgb, var(--warn) 60%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.receipt-reason-field { flex-basis: 100%; }
.receipt-summary { margin: 10px 0 0; font-weight: 650; }
.receipt-summary.is-diff { color: color-mix(in srgb, var(--warn) 80%, var(--text)); }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.receipt-actions .btn { flex: 1 1 200px; }
.receipt-photo-block { padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.receipt-photo-block:first-of-type { border-top: 0; }
.receipt-photo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ws-photo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-photo-item { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-soft); }
.ws-photo-item img { width: 100%; height: 100%; object-fit: cover; }
.ws-photo-item span {
  position: absolute; right: 4px; bottom: 4px; min-width: 18px; padding: 0 5px; border-radius: 7px;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: .68rem; font-weight: 800; text-align: center;
}

/* =======================================================================
   Экран под устройство: ничего не уезжает вбок
   Страница листается только вверх-вниз. Широкие таблицы на телефоне
   разворачиваются в карточки «подпись — значение», ленты переносятся
   на новую строку, длинные строки переносятся по символам.
   ======================================================================= */
/* clip, а не hidden: hidden делает страницу скролл-контейнером,
   из-за чего перестаёт прилипать шапка и заголовки зон в подсчёте */
html, body { max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; overflow-wrap: break-word; }
.page, .admin-content, .card, .card-inset, .alert { min-width: 0; }
.table td, .table th, .list-item, .ws-card, .stock-legend li { overflow-wrap: break-word; }

@media (max-width: 720px) {
  /* Таблица становится списком карточек: первая колонка — заголовок,
     остальные значения идут парами «подпись сверху, значение снизу» */
  .card:has(> .table) { overflow-x: visible; padding: 0; }
  .table:not(.ws-table) { display: block; width: 100%; font-size: .93rem; }
  .table:not(.ws-table) thead { display: none; }
  .table:not(.ws-table) tbody { display: block; }
  .table:not(.ws-table) tr {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    padding: 11px 13px; margin: 0 12px 9px; border: 1px solid var(--border);
    border-radius: 14px; background: color-mix(in srgb, var(--text) 3%, transparent);
  }
  .table:not(.ws-table) tr:first-child { margin-top: 12px; }
  .table:not(.ws-table) tr:last-child { margin-bottom: 12px; }
  .table:not(.ws-table) tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
  .table:not(.ws-table) td {
    display: flex; flex-direction: column; gap: 1px; flex: 1 1 7rem; min-width: 0;
    padding: 0; border: 0; line-height: 1.35;
  }
  .table:not(.ws-table) td::before {
    content: attr(data-label); color: var(--text-muted);
    font-size: .66rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  }
  .table:not(.ws-table) td.cell-title {
    order: -2; flex: 1 1 60%; font-size: 1rem; font-weight: 700;
  }
  .table:not(.ws-table) td.cell-title::before { display: none; }
  /* Номер записи — мелко и справа от названия, а не вместо него */
  .table:not(.ws-table) td.cell-id {
    order: -1; flex: 0 0 auto; margin-left: auto; align-items: flex-end;
    font-size: .72rem; color: var(--text-muted);
  }
  .table:not(.ws-table) td.cell-id::before { display: none; }
  .table:not(.ws-table) td.is-empty { display: none; }
  .table:not(.ws-table) td:not([data-label])::before { display: none; }
  .table:not(.ws-table) .row-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: flex-start; white-space: normal; }
  /* Длинные названия переносятся, а не обрезаются многоточием */
  .product-identity strong, .count-where strong, .count-where .muted { white-space: normal; overflow: visible; }

  /* Ленты чипов: перенос вместо прокрутки вбок */
  .count-chips, .ws-cat-tabs, .ws-courier-ribbon, .stats-periods, .banner-strip {
    flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none;
  }
  .count-chips > *, .ws-cat-tabs > *, .ws-courier-ribbon > *, .banner-strip > * { scroll-snap-align: none; }
  .banner-strip .banner-item { flex: 1 1 100%; }
  .ws-courier-chip-name, .count-chip, .ws-cat-tab { white-space: normal; }
}

/* Кнопка «завести новый товар» в окне добавления позиции */
.add-item-create { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); font-weight: 650; }
.add-item-create:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised)); }

/* Касса: сводка, номиналы и переключатель доступа */
.cash-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; }
.cash-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); }
.cash-summary strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cash-minus { color: var(--danger); }
.cash-result.is-ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.cash-result.is-ok strong { color: var(--ok); }
.cash-result.is-diff { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.cash-result.is-diff strong { color: var(--danger); }
.cash-kind-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cash-kind.is-on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.cash-bills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 6px; margin: 8px 0; }
.cash-bill { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); }
.cash-bill > span { flex: 1 1 auto; font-size: .78rem; color: var(--text-muted); }
.cash-bill input { width: 62px; min-height: 32px; height: 32px; padding: 3px 6px; text-align: center; }
.cash-total-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.cash-total-row strong { flex: 1 1 auto; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.cash-toggle.is-on { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); color: var(--ok); }

/* Окно завершения инвентаризации: список незаполненных и сообщения на месте */
.finish-card { max-width: 560px; }
.finish-status { margin-bottom: 10px; font-size: .92rem; line-height: 1.4; white-space: pre-line; }
.finish-list-wrap { max-height: 42vh; overflow-y: auto; margin: 6px 0; }
.finish-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.finish-list-item { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; width: 100%;
  min-height: 38px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-raised); color: var(--text); font-size: .87rem; text-align: left; cursor: pointer; }
.finish-list-item:hover { border-color: var(--accent); }
.finish-list-item .muted { flex: 0 0 auto; font-size: .72rem; }
.finish-confirm { margin-top: 8px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); border-radius: 10px; }
.inv-item.is-target { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Кнопки окна всегда на виду: длинный список прокручивается, действия закреплены снизу */
.modal-card { display: flex; flex-direction: column; }
.modal-card > .modal-actions {
  position: sticky; bottom: calc(-1 * clamp(18px, 4vw, 24px)); z-index: 2;
  margin-top: auto; padding: 12px 0 0;
  background: linear-gradient(to bottom, transparent, var(--surface) 22%);
}
.finish-card .finish-list-wrap { max-height: 38vh; }
/* Панель подсчёта не должна прятаться за нижним меню */
.count-actions { flex-wrap: wrap; }
.count-actions .finish-next { flex: 1 1 100%; }

/* Касса на телефоне: тап по номиналу, крупные поля, кнопка всегда внизу */
.cash-bills { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.cash-bill { gap: 4px; padding: 3px 4px; }
.cash-bill-add { flex: 1 1 auto; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 8px;
  background: var(--surface-soft); color: var(--text); font-size: .82rem; font-weight: 650; cursor: pointer; }
.cash-bill-add:active { background: color-mix(in srgb, var(--accent) 22%, var(--surface-soft)); }
.cash-bill-minus { min-width: 34px; min-height: 40px; border: 0; border-radius: 8px;
  background: var(--surface-soft); color: var(--text-muted); font-size: 1.05rem; cursor: pointer; }
.cash-bill input { width: 54px; min-height: 40px; height: 40px; font-size: 1rem; font-weight: 700; }
.cash-bill input.is-hit { background: color-mix(in srgb, var(--ok) 22%, var(--surface-raised)); }
.cash-coins { grid-column: 1 / -1; margin-top: 4px; }
.cash-coins > summary { padding: 6px 2px; color: var(--text-muted); font-size: .8rem; cursor: pointer; }
.cash-sticky { position: sticky; bottom: 118px; z-index: 21; padding: 8px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 95%, transparent); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.cash-sticky-save { position: sticky; bottom: 64px; z-index: 21; }
@media (max-width: 700px) {
  .cash-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .cash-summary > div { padding: 6px 8px; }
  .cash-summary strong { font-size: .95rem; }
  .cash-result { grid-column: 1 / -1; }
  .cash-bills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-kind-pick .btn { flex: 1 1 46%; }
}

/* Ввод в граммах: кнопка мелкой единицы и подсветка режима */
.qty-btn.b-sub { min-width: 34px; font-size: .74rem; font-weight: 700; }
.qty-btn.b-sub.is-on { background: color-mix(in srgb, var(--accent) 26%, var(--surface-soft)); color: var(--accent); }
.inv-item.is-sub .qty-input { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }

/* Моя смена: приход, лента задач дня, напоминания */
.shift-checkin { text-align: center; }
.shift-checkin.is-in { text-align: left; }
.shift-checkin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.shift-checkin-row > div { display: flex; flex-direction: column; }
.shift-checkin-row strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.shift-progress-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.shift-progress-top strong { font-size: 1.15rem; }
.shift-now { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.shift-now h2 { margin: 2px 0 4px; }
.shift-now-time { margin: 0 0 6px; color: var(--accent); font-weight: 700; }
.shift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shift-task { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-raised); }
.shift-task.is-done { opacity: .62; }
.shift-task.is-overdue { border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-raised)); }
.shift-task-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.shift-task-main strong { font-size: .95rem; }
.shift-task-main span, .shift-task-main small { font-size: .74rem; }
.shift-check { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--surface); color: var(--ok); font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.shift-task.is-done .shift-check { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--surface)); }
@media (max-width: 700px) {
  .shift-task { padding: 8px; gap: 8px; }
  .shift-check { width: 44px; height: 44px; }
  .shift-now .btn-lg { width: 100%; }
  .shift-checkin .btn-block { min-height: 56px; font-size: 1.05rem; }
}

/* ── Контроль персонала: график, контроль сети, KPI, зарплата ─────────────── */
.modal[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.text-ok { color: color-mix(in srgb, var(--ok) 72%, var(--text)); }
.text-warn { color: color-mix(in srgb, var(--warn) 78%, var(--text)); }
.text-bad { color: color-mix(in srgb, var(--danger) 76%, var(--text)); }
.plain-list { margin: 6px 0 0; padding-left: 18px; }
.field-wide { flex: 1 1 260px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Смена: график дня, показатель, замечания */
.shift-plan-row { display: flex; flex-wrap: wrap; gap: 18px; }
.shift-plan-row > div { display: flex; flex-direction: column; min-width: 96px; }
.shift-plan-row strong { font-size: 1.05rem; }
.shift-kpi-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.shift-kpi-box { flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.shift-kpi-box strong { font-size: 1.35rem; }
.shift-kpi-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.shift-kpi-parts li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--border); }
.shift-violation { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border); }

/* Мой график: карточки по дням */
/* Навигация по периодам: стрелки и даты в одну строку, а не столбик кнопок */
.schedule-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.schedule-nav .btn { flex: 0 0 auto; min-width: 52px; }
.schedule-nav-period { flex: 1; text-align: center; font-weight: 780; font-variant-numeric: tabular-nums; }
.schedule-links { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.schedule-links::-webkit-scrollbar { display: none; }
.schedule-links .chip { min-height: 38px; }

.schedule-summary { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.schedule-summary > div { display: flex; flex-direction: column; }
.schedule-summary strong { font-size: 1.25rem; }
.schedule-next { flex: 1 1 100%; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.schedule-next strong { font-size: 1.3rem; letter-spacing: -.02em; }
.schedule-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Разделители недель: глазу есть за что зацепиться при листании месяца */
.schedule-week {
  margin: 10px 0 2px; font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.schedule-week::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--border) 70%, transparent); }
.schedule-week:first-child { margin-top: 0; }
/* Цвет слева — тип дня: смена, выходной, отпуск, больничный. Цвет не
   единственный признак: рядом всегда значок и слово. */
.schedule-day.k-ok { border-left: 4px solid var(--ok); }
.schedule-day.k-muted { border-left: 4px solid color-mix(in srgb, var(--text) 22%, transparent); }
.schedule-day.k-info { border-left: 4px solid color-mix(in srgb, var(--accent) 80%, transparent); }
.schedule-day.k-warn { border-left: 4px solid var(--warn); }
.schedule-day.k-bad { border-left: 4px solid var(--danger); }
.schedule-day.k-none { border-left: 4px solid transparent; }
.schedule-hours {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 750;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted);
  font-variant-numeric: tabular-nums; vertical-align: 2px;
}
.schedule-day { display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.schedule-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.schedule-day.is-weekend { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.schedule-day.is-empty { opacity: .72; }
.schedule-date { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.schedule-date strong { font-size: 1.4rem; line-height: 1; }
.schedule-main { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.schedule-time { font-size: 1.05rem; font-weight: 600; }

/* Составление графика: сетка */
.schedule-grid th { text-align: center; white-space: nowrap; }
.schedule-grid th small { display: block; font-weight: 400; opacity: .7; }
.schedule-grid th.is-weekend { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.schedule-grid th.is-today { color: var(--accent); }
.schedule-name-col { min-width: 170px; }
.schedule-cell { padding: 3px !important; }
.sched-cell { width: 100%; min-width: 58px; min-height: 52px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  background: transparent; border: 1px dashed var(--border); border-radius: 10px; color: inherit; font: inherit; }
.sched-cell:hover { border-color: var(--accent); }
.sched-cell.is-set { border-style: solid; background: color-mix(in srgb, var(--ok) 10%, transparent); }
.sched-cell.is-muted { background: color-mix(in srgb, var(--text) 6%, transparent); }
.sched-cell.is-info { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sched-cell.is-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.sched-cell.is-bad { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.sched-time { font-size: .74rem; line-height: 1.15; }
.sched-plus { opacity: .35; font-size: 1.1rem; }

/* Контроль сети */
/* ── Контроль ──────────────────────────────────────────────────────────────
 * Шапка раздела: возврат, день и состояние — одной строкой. Три крупных
 * блока подряд занимали пол-экрана телефона до первой полезной цифры.
 */
.ctl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ctl-day { flex: 1 1 150px; min-width: 0; margin: 0; }
.ctl-day input {
  width: 100%;
  min-height: 38px;
  padding: 5px 10px;
  font-size: .92rem;
}

.control-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px 14px; }
.control-totals > div { display: flex; flex-direction: column-reverse; gap: 1px; min-width: 0; }
.control-totals strong { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.control-totals .muted { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: break-word; }

/*
 * Кто на смене: строка на человека вместо таблицы из шести колонок.
 * Скрипт карточек разворачивал её в столбик подписей — восемь строк на
 * человека, и смена из пяти сотрудников занимала три экрана прокрутки.
 * Цветная полоса слева только на отклонении: опоздал, не пришёл, не закрыл.
 */
.ppl-list { display: block; }
.ppl-row {
  display: block;
  padding: 8px 10px 8px 12px;
  border-left: 4px solid transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.ppl-row:last-child { border-bottom: 0; }
.ppl-row.is-late { border-left-color: #f0ad4e; }
.ppl-row.is-out { border-left-color: var(--danger); }
.ppl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ppl-name { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.ppl-time { flex: 0 0 auto; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ppl-facts { margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--text-muted); }

/*
 * Пересчёт и закупка в «Контроле» — свёрнутыми. Списки длинные, а нужны
 * не каждый раз: заголовок несёт итог, открывается только то, что нужно.
 * Оформление то же, что у разделов настроек, — один язык на весь продукт.
 */
.ctl-fold > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 40px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ctl-fold > summary::-webkit-details-marker { display: none; }
.ctl-fold-title { font-size: 1rem; font-weight: 700; }
.ctl-fold-hint { flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--text-muted); overflow-wrap: break-word; }
.ctl-fold > summary::after {
  content: '⌄';
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .18s ease;
}
.ctl-fold[open] > summary::after { transform: rotate(180deg); }
.ctl-fold[open] > summary { margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ctl-fold > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* Зона отбивает список: без неё сорок позиций сливаются в одну простыню */
.ctl-zone {
  margin: 10px 0 2px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.ctl-zone:first-child { margin-top: 0; }
.ctl-supplier { margin-top: 14px; }
.ctl-supplier:first-of-type { margin-top: 4px; }
.ctl-supplier-name { margin: 0 0 4px; font-size: .92rem; font-weight: 700; }
.control-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.control-card { display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 5px;
  border-radius: var(--radius); text-decoration: none; color: inherit; }
.control-card:hover { border-color: var(--accent); }
.control-card.is-green { border-left-color: var(--ok); }
.control-card.is-yellow { border-left-color: var(--warn); }
.control-card.is-orange { border-left-color: color-mix(in srgb, var(--warn) 60%, var(--danger)); }
.control-card.is-red { border-left-color: var(--danger); }
.control-card.is-grey { border-left-color: var(--border); opacity: .75; }
.control-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.control-state { margin: 0; font-size: .85rem; opacity: .75; }
.control-rows { display: flex; flex-wrap: wrap; gap: 12px; }
.control-rows > div { display: flex; flex-direction: column; }
.control-marks { display: flex; gap: 10px; flex-wrap: wrap; font-size: .88rem; }
.control-marks .is-no { opacity: .4; }
.control-marks .is-bad { color: color-mix(in srgb, var(--danger) 76%, var(--text)); }
.control-missing { margin: 0; font-size: .85rem; color: color-mix(in srgb, var(--danger) 70%, var(--text)); }
.control-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--border); }
.control-card.is-green .control-dot, .control-dot.is-green { background: var(--ok); }
.control-card.is-yellow .control-dot, .control-dot.is-yellow { background: var(--warn); }
.control-card.is-orange .control-dot, .control-dot.is-orange { background: color-mix(in srgb, var(--warn) 60%, var(--danger)); }
.control-card.is-red .control-dot, .control-dot.is-red { background: var(--danger); }
.control-dot.is-grey { background: var(--border); }
.control-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .85rem; }

/* Лента событий */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); }
.feed-item:first-child { border-top: 0; }
.feed-time { font-variant-numeric: tabular-nums; opacity: .7; min-width: 44px; }
.feed-item.is-bad .feed-text { color: color-mix(in srgb, var(--danger) 74%, var(--text)); }
.feed-item.is-warn .feed-text { color: color-mix(in srgb, var(--warn) 78%, var(--text)); }

/* KPI */
.kpi-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kpi-big { font-size: 1.7rem; font-weight: 700; }
.kpi-parts, .kpi-rules { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kpi-parts li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--border); }
.kpi-parts li.is-off { opacity: .45; }
.kpi-part-label { display: flex; flex-direction: column; }
.kpi-weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.kpi-rule { align-items: flex-end; }

/* Зарплата */
.payroll-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.payroll-lines li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--border); }
.payroll-lines li:first-child { border-top: 0; }
.payroll-total { border-top: 2px solid var(--accent) !important; font-size: 1.12rem; }

@media (max-width: 640px) {
  .control-grid { grid-template-columns: 1fr; }
  .schedule-name-col { min-width: 140px; }
  .sched-cell { min-width: 50px; min-height: 46px; }
}

/* ── Пункты задачи и раздел «Требует проверки» ────────────────────────────── */
.step-progress { margin-top: 10px; }
.step-progress p { margin: 6px 0 0; }
.step-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step-item { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.step-item.is-done { background: color-mix(in srgb, var(--ok) 8%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }
.step-head { display: flex; gap: 12px; align-items: flex-start; }
.step-num { flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); border-radius: 50%; font-weight: 700; }
.step-item.is-done .step-num { border-color: var(--ok); color: var(--ok); }
.step-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.step-value { font-size: .92rem; padding: 4px 8px; border-radius: 8px; align-self: flex-start;
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.step-photo-link { align-self: flex-start; font-size: .9rem; }
.step-answer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.step-input { flex: 1 1 160px; min-height: 44px; padding: 10px 12px; font-size: 1rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
.step-photo { flex: 1 1 100%; }
.step-photo-btn { cursor: pointer; }
.step-undo { margin-top: 10px; }
.step-finish { position: sticky; bottom: 8px; }

.review-summary { display: flex; flex-wrap: wrap; gap: 22px; }
.review-summary > div { display: flex; flex-direction: column; }
.review-summary strong { font-size: 1.5rem; }
.review-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.review-item { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius);
  transition: opacity .3s, transform .3s; }
.review-item.is-violation { border-left-color: var(--danger); }
.review-item.is-shift { border-left-color: var(--warn); }
.review-item.is-photo { border-left-color: var(--accent); }
.review-item.is-gone { opacity: 0; transform: translateX(24px); }
.review-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
.review-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.review-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .review-actions { width: 100%; }
  .review-actions .btn { flex: 1; }
  .step-answer .btn { flex: 1 1 100%; }
}

.shift-check.is-steps { display: flex; align-items: center; justify-content: center; font-size: .8rem;
  font-weight: 700; text-decoration: none; color: inherit; }

/* ── Проверка уведомлений ─────────────────────────────────────────────────── */
.push-state { padding: 11px 13px; border-radius: 10px; margin: 0 0 12px;
  background: color-mix(in srgb, var(--text) 6%, transparent); }
.push-state.is-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.push-state.is-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.push-state.is-bad { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.push-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.push-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--border); }
.push-devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.push-devices li { display: flex; flex-direction: column; padding: 9px 0; border-top: 1px solid var(--border); }
.push-devices li:first-child { border-top: 0; }

/* ── Ежедневный отчёт ─────────────────────────────────────────────────────── */
.report-totals { display: flex; flex-wrap: wrap; gap: 22px; }
.report-totals > div { display: flex; flex-direction: column; }
.report-totals strong { font-size: 1.5rem; }
.report-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.report-text { white-space: pre-wrap; font-family: inherit; font-size: .92rem; margin: 10px 0 0;
  padding: 12px; background: var(--bg); border-radius: 10px; overflow-x: auto; }
.review-item.is-flag { border-left-color: color-mix(in srgb, var(--danger) 60%, var(--warn)); }

/* ── Конструктор правил «если — то» ───────────────────────────────────────── */
.rule-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.rule-word { font-size: 1.05rem; font-weight: 700; padding-bottom: 12px; min-width: 34px; }
@media (max-width: 640px) { .rule-word { padding-bottom: 0; } .rule-line { align-items: stretch; } }

/* ── Очередь при плохой связи ─────────────────────────────────────────────── */
.queue-box { border-left: 4px solid var(--warn); }
.queue-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; }
.queue-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }

/* ── Замены смен ──────────────────────────────────────────────────────────── */
.swap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.swap-item { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); }
.swap-item.is-open { border-left-color: var(--warn); }
.swap-item.is-claimed { border-left-color: var(--accent); }
.swap-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 240px; min-width: 0; }
.swap-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .swap-actions { width: 100%; } .swap-actions .btn { flex: 1; } }

/* ── Печать QR-кода точки ─────────────────────────────────────────────────── */
.qr-print { text-align: center; }
.qr-print-title { font-size: 1.6rem; margin: 0 0 4px; }
.qr-print-branch { font-size: 2.1rem; font-weight: 700; margin: 0 0 18px; }
.qr-print-code svg { width: 100%; max-width: 320px; height: auto; }
.qr-print-hint { font-size: 1.05rem; margin: 14px 0 4px; }
.qr-print-url { font-size: .8rem; opacity: .6; word-break: break-all; margin: 0; }
.qr-checkin { text-align: center; }
.qr-checkin .page-title { margin-top: 2px; }
@media print {
  .no-print, .topbar, .admin-nav, .bottom-nav, .toast { display: none !important; }
  .admin-layout, .admin-content, body { display: block; background: #fff; color: #000; margin: 0; padding: 0; }
  .qr-print { border: 0; box-shadow: none; page-break-inside: avoid; }
  .qr-print-code svg { max-width: 420px; }
}

/* ── Подпись и коды пунктов ───────────────────────────────────────────────── */
.sign-box { width: 100%; }
.sign-pad { width: 100%; height: 150px; background: #fff; border: 2px dashed var(--border);
  border-radius: 10px; touch-action: none; display: block; }
.sign-actions { display: flex; gap: 8px; margin-top: 8px; }
.sign-actions .btn { flex: 1; }
.step-qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.step-qr-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.step-qr-title { font-size: 1.05rem; }
.step-qr-code svg { width: 100%; max-width: 190px; height: auto; }
@media print {
  .step-qr-sheet { grid-template-columns: repeat(2, 1fr); }
  .step-qr-card { border: 1px dashed #999; page-break-inside: avoid; background: #fff; color: #000; }
}

/* ── Сгруппированное меню ─────────────────────────────────────────────────── */
.an-group { padding: 14px 12px 5px; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; opacity: .5; }
.an-group:first-child { padding-top: 4px; }
.sheet-group { margin: 16px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .55; }
.sheet-group:first-of-type { margin-top: 6px; }
.bn-ico { position: relative; }
.bn-badge { position: absolute; top: -4px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700;
  line-height: 1; border-radius: 8px; background: var(--danger); color: #fff; }

/* ── Подсказки новичку и поиск по разделам ────────────────────────────────── */
.onboarding { border-left: 4px solid var(--accent); transition: opacity .3s; }
.onboarding-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.onboarding-top h2 { margin: 0 0 2px; }
.onboarding-top p { margin: 0 0 10px; }
.onboarding-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.onboarding-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.onboarding-step:first-child { border-top: 0; }
.onboarding-step.is-done { opacity: .55; }
.onboarding-mark { flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); border-radius: 50%; font-size: 1rem; }
.onboarding-step.is-done .onboarding-mark { border-color: var(--ok); color: var(--ok); }
.onboarding-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sheet-search { width: 100%; min-height: 44px; padding: 10px 14px; margin-bottom: 6px; font-size: 1rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
.sheet-empty { padding: 10px 2px; }

/* ── Быстрое действие ─────────────────────────────────────────────────────── */
.quick-wrap { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px) + 10px);
  display: flex; justify-content: center; pointer-events: none; z-index: 40; }
.quick-fab { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px;
  max-width: min(92vw, 420px); min-height: 48px; padding: 11px 20px 11px 16px;
  font: inherit; font-weight: 600; color: var(--accent-text); background: var(--accent);
  border: 0; border-radius: 26px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.quick-fab:active { transform: translateY(1px); }
/*
 * Срочность показываем точкой, а не заливкой всей кнопки. Красный во всей
 * системе означает ошибку или просрочку; «Отметить приход» — обычное
 * рутинное действие, и красная кнопка на весь экран сообщала тревогу там,
 * где ничего не случилось.
 */
.quick-fab.is-urgent { background: var(--accent); color: var(--accent-text); }
.quick-fab.is-urgent .quick-fab-ico::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--accent);
}
.quick-fab.is-urgent .quick-fab-ico { position: relative; }
.quick-fab-ico { font-size: 1.2rem; line-height: 1; }
.quick-fab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px;
  border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.quick-row:first-child { border-top: 0; }
.quick-row-ico { flex: 0 0 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 12px; }
.quick-row.is-urgent .quick-row-ico { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.quick-row-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.quick-row-go { opacity: .4; }
@media (min-width: 900px) { .quick-wrap { bottom: 18px; justify-content: flex-end; padding-right: 22px; } }
/*
 * Кнопка висит над содержимым — под ней нужен запас, иначе она закрывает
 * последнюю карточку. Считаем его из тех же величин, что и положение самой
 * кнопки: высота нижней панели, безопасная зона, зазор, высота кнопки и
 * воздух. Раньше здесь стояло «140px» на глаз, и стоило панели стать выше —
 * кнопка снова наезжала на контент.
 */
:root { --quick-fab-h: 48px; }
body:has(.quick-wrap) {
  padding-bottom: calc(var(--bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px)
    + 10px + var(--quick-fab-h) + 16px);
}
@media (min-width: 900px) { body:has(.quick-wrap) { padding-bottom: calc(18px + var(--quick-fab-h) + 16px); } }

/* ── Перемещения между точками ────────────────────────────────────────────── */
.transfer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.transfer-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); }
.transfer-item.is-sent { border-left-color: var(--warn); }
.transfer-item.is-received { border-left-color: var(--ok); }
.transfer-item.is-draft { border-left-color: var(--border); }
.transfer-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
  color: inherit; text-decoration: none; }
.transfer-route { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 700; flex-wrap: wrap; }
.transfer-arrow { opacity: .5; }
.transfer-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.transfer-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 0; border-top: 1px solid var(--border); }
.transfer-row:first-child { border-top: 0; }
.transfer-row.is-diff { background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.transfer-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.transfer-row-edit { display: flex; gap: 8px; align-items: center; }
.transfer-row-edit .step-input { max-width: 120px; }
.product-hits { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.product-hit { width: 100%; display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 11px 10px; font: inherit; text-align: left; color: inherit; background: none;
  border: 0; border-top: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
.product-hit:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ── Отчёты ───────────────────────────────────────────────────────────────── */
.report-filters .report-periods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.report-periods .tag { text-decoration: none; cursor: pointer; }
/*
 * Фильтры отчёта — одной сеткой. Раньше поля шли обычной строкой формы, и на
 * телефоне общее правило растягивало каждое на всю ширину: две даты занимали
 * два экрана прокрутки до того, как начинался сам отчёт. Теперь даты стоят
 * рядом, а выбор отчёта и точки — во всю ширину, им нужен весь текст.
 */
.report-filters .row-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; }
.report-filters .field { margin-bottom: 0; min-width: 0; }
.report-filters .field > span { font-size: .72rem; margin-bottom: 4px; }
.report-filters .field-report,
.report-filters .field-branch,
.report-filters .row-form > .btn { grid-column: 1 / -1; }
.report-filters .field select,
.report-filters .field input { width: 100%; min-width: 0; }
.report-hint { margin: 10px 0 0; font-size: .82rem; }

@media (min-width: 721px) {
  /* На широком экране всё умещается в одну строку */
  .report-filters .row-form { grid-template-columns: minmax(200px, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, 1fr) auto; }
  .report-filters .field-report,
  .report-filters .field-branch,
  .report-filters .row-form > .btn { grid-column: auto; }
}
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.report-head h2 { margin: 0 0 2px; }
.report-head p { margin: 0 0 8px; }
.report-table th.is-num, .report-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/*
 * Нехватка заметна и на широком экране, а не только в мобильной раскладке.
 *
 * Только на широком: в мобильной раскладке ячейки строчные, и полоса,
 * нарисованная внутренней тенью первой ячейки, вставала красным обрубком
 * прямо перед текстом. Там за состояние отвечает полоса слева у всей строки.
 */
@media (min-width: 721px) {
  .report-table tr.is-short td.is-lead-value { color: var(--danger); font-weight: 700; }
  .report-table tr.is-short td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
}
.report-table td { vertical-align: top; }

/* ── Прогноз потребности ──────────────────────────────────────────────────── */
.forecast-summary { display: flex; flex-wrap: wrap; gap: 20px; }
.forecast-count { display: flex; flex-direction: column; }
.forecast-count strong { font-size: 1.6rem; line-height: 1.1; }
.forecast-count.is-out strong, .forecast-count.is-critical strong { color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.forecast-count.is-soon strong { color: color-mix(in srgb, var(--warn) 82%, var(--text)); }
.forecast-count.is-ok strong { color: color-mix(in srgb, var(--ok) 76%, var(--text)); }
.forecast-table th.is-num, .forecast-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.forecast-table tr.is-out td, .forecast-table tr.is-critical td { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.forecast-table tr.is-soon td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.forecast-table td { vertical-align: top; }
.forecast-count.is-doubt strong { color: color-mix(in srgb, var(--warn) 82%, var(--text)); }
.forecast-table tr.is-doubt td { background: color-mix(in srgb, var(--warn) 6%, transparent); }

.forecast-order { border-left: 4px solid var(--accent); }
.forecast-suppliers { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; }
.forecast-suppliers li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.forecast-suppliers li:first-child { border-top: 0; }
.forecast-supplier-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.scheduler-box .scheduler-url { margin: 6px 0 14px; }
.scheduler-url code { display: block; padding: 10px 12px; font-size: .82rem; word-break: break-all;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }

.review-bulk { border-left: 4px solid var(--accent); }
.review-pick { flex: 0 0 auto; display: flex; align-items: center; padding: 0 2px; }
.review-pick input { width: 22px; height: 22px; }

/* ── Мобильный вид: меню админки и плотность блоков ───────────────────────── */

/* Кнопка меню админки видна только на узких экранах */
.admin-nav-toggle { display: none; }
.admin-nav-backdrop { display: none; }

@media (max-width: 900px) {
  /* Разделов почти три десятка — списком в строку они не читаются.
     На телефоне меню выезжает панелью и закрывается после выбора. */
  .admin-nav-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    position: sticky; top: 56px; z-index: 46;
    min-height: 50px; padding: 12px 14px;
    font: inherit; font-weight: 650; text-align: left; color: var(--text);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 0; border-bottom: 1px solid var(--border); cursor: pointer;
  }
  .admin-nav-toggle-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-nav-toggle-ico { font-size: 1.05rem; opacity: .7; }
  .admin-nav-toggle-caret { opacity: .5; }
  .admin-nav-toggle[aria-expanded="true"] .admin-nav-toggle-caret { transform: rotate(180deg); }

  .admin-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 47;
    background: rgba(0, 0, 0, .45);
  }
  .admin-nav-backdrop[hidden] { display: none; }

  .admin-layout { flex-direction: column; }
  .admin-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 48;
    width: min(84vw, 320px); height: 100dvh;
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0;
    padding: 14px 12px calc(20px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-right: 1px solid var(--border); border-bottom: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  }
  .admin-nav.is-open { transform: translateX(0); }
  .an-item { margin: 0 0 2px; padding: 12px 12px; border-radius: 10px; min-height: 44px;
    display: flex; align-items: center; }
  .an-item.active { box-shadow: none; background: color-mix(in srgb, var(--accent) 18%, transparent); }
  body.admin-nav-open { overflow: hidden; }
}

@media (max-width: 720px) {
  /* Блоки плотнее: на телефоне поля съедали половину экрана */
  .card { padding: 14px 13px; margin-bottom: 10px; border-radius: 14px; }
  .card h2 { font-size: 1.08rem; margin-bottom: 8px; }
  .card h3 { font-size: .98rem; }
  .page-title { font-size: 1.35rem; margin-bottom: 14px; }

  /* Поля формы в один столбец: два поля в ряд по 150px не помещаются */
  .row-form { gap: 10px; }
  .row-form > .field,
  .row-form > input, .row-form > select, .row-form > textarea { flex: 1 1 100%; min-width: 0; width: 100%; }
  .row-form > .btn { flex: 1 1 100%; }
  .row-form > .btn-sm { flex: 0 1 auto; }
  .field { margin-bottom: 12px; }
  .form-grid { display: flex; flex-direction: column; gap: 0; }

  /* Панель действий сверху: кнопки в ряд, но не уже пальца */
  .toolbar { gap: 8px; margin-bottom: 12px; }
  .toolbar > .btn { flex: 1 1 46%; min-height: 44px; }
  .toolbar .tag { align-self: center; }

  /* Широкие таблицы прокручиваются внутри своей рамки, страница — нет */
  .table-wrap { margin-inline: -13px; padding-inline: 13px; }
  .table { font-size: .9rem; }
  .table th, .table td { padding: 10px 8px; }

  /* Строки списков: содержимое сверху, действия снизу на всю ширину */
  .review-item, .swap-item, .transfer-item, .onboarding-step { gap: 10px; }
  .review-actions, .swap-actions { width: 100%; }
  .review-actions .btn, .swap-actions .btn { flex: 1; min-height: 42px; }

  /* Сводки цифрами: перенос вместо сжатия в нечитаемое */
  .forecast-summary, .control-totals, .review-summary, .schedule-summary,
  .shift-kpi-row, .transfer-route { gap: 14px 18px; }
  .forecast-count strong, .control-totals strong, .review-summary strong { font-size: 1.3rem; }

  /* Плитки — в один столбец, иначе текст рвётся по слогам */
  .control-grid, .kpi-weights, .step-qr-sheet { grid-template-columns: 1fr; }
  .sheet-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

@media (max-width: 420px) {
  .card { padding: 13px 11px; }
  .toolbar > .btn { flex: 1 1 100%; }
  .table th, .table td { padding: 9px 6px; }
  .tag { font-size: .74rem; }
}

/* ── Читаемость: приглушённый текст был слишком бледным ───────────────────── */
:root { --text-muted: color-mix(in srgb, var(--text) 66%, transparent); }
.muted { font-size: .92rem; line-height: 1.45; }
small.muted { font-size: .85rem; }
.card > p:last-child, .card > .muted:last-child { margin-bottom: 0; }
.card h2 + .muted, .card h3 + .muted { margin-top: -2px; }

/* Подписи полей читаются лучше, когда они темнее самого поля */
.field > span { color: color-mix(in srgb, var(--text) 78%, transparent); }

/* Метки состояний: одинаковая высота и внятный контраст */
.tag { line-height: 1.35; }

/* ── Широкие таблицы карточками на телефоне ───────────────────────────────── */
@media (max-width: 720px) {
  .table.is-cards { display: block; }
  .table.is-cards thead { display: none; }
  .table.is-cards tbody { display: flex; flex-direction: column; gap: 10px; }

  .table.is-cards tr {
    display: block; padding: 12px 13px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 13px;
  }
  .table.is-cards tr + tr { margin-top: 0; }

  .table.is-cards td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 7px 0; border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    text-align: left;
  }
  .table.is-cards td:first-child {
    border-top: 0; padding-top: 0;
    display: block; font-size: 1.04rem; font-weight: 700;
  }
  .table.is-cards td:first-child::before { display: none; }

  .table.is-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto; max-width: 45%;
    font-size: .82rem; font-weight: 600; line-height: 1.35;
    color: var(--text-muted);
  }
  /* Правая часть строки — само значение, прижато вправо */
  .table.is-cards td > * { text-align: right; }
  .table.is-cards td.is-num { justify-content: space-between; }

  /* Столбец с кнопками занимает всю ширину карточки */
  .table.is-cards td.is-actions {
    display: flex; gap: 8px; flex-wrap: wrap; padding-top: 11px;
  }
  .table.is-cards td.is-actions::before { display: none; }
  .table.is-cards td.is-actions .btn { flex: 1 1 auto; min-height: 40px; }
  .table.is-cards td.is-actions > * { text-align: center; }

  /* Пустое значение не должно оставлять голую подпись */
  .table.is-cards td:empty { display: none; }

  /* Внутри карточек рамка обёртки уже не нужна */
  .table-wrap:has(.table.is-cards) { margin-inline: 0; padding-inline: 0; overflow: visible; }

  /* Подвал таблицы — итоговая строка — тоже карточкой, но выделенной */
  .table.is-cards tfoot { display: block; margin-top: 10px; }
  .table.is-cards tfoot tr { border-color: var(--accent); }
  .table.is-cards tfoot td { display: flex; }
}

/* ── Мелкая полировка ─────────────────────────────────────────────────────── */
/* Заметно, куда попадёт нажатие с клавиатуры */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .an-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}

/* Пустые экраны выглядят намеренно, а не сломанно */
.empty-state { text-align: center; padding: 26px 18px; }
.empty-state p { margin: 0; }

/* Длинные названия и адреса не растягивают карточку */
.card, .table.is-cards td { overflow-wrap: break-word; }

/* Заголовки внутри карточек не липнут к содержимому */
.card h2 { margin-top: 0; }
.card h3 { margin-top: 18px; }
.card h3:first-child { margin-top: 0; }

/* ── Длинные таблицы: шапка не уезжает ────────────────────────────────────── */
@media (min-width: 721px) {
  /* В длинных списках при прокрутке терялось, что за столбец перед глазами */
  .admin-content .table thead th {
    position: sticky; top: 60px; z-index: 5;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    box-shadow: inset 0 -1px 0 var(--border);
  }
  /* Внутри прокручиваемой обёртки шапка липнет к её верху, а не к странице */
  .table-wrap { position: relative; }
}
/* Числа читаются столбиком, когда выровнены по правому краю и одинаковой ширины */
.table td.is-num, .table th.is-num { font-variant-numeric: tabular-nums; }
/* Строку под курсором видно — не промахнёшься при клике в длинном списке */
@media (hover: hover) {
  .table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
}

/* ── Накладные ────────────────────────────────────────────────────────────── */
.invoice-upload label.btn { cursor: pointer; margin-bottom: 8px; }
.invoice-summary { display: flex; flex-wrap: wrap; gap: 20px; }
.invoice-summary > div { display: flex; flex-direction: column; }
.invoice-summary strong { font-size: 1.4rem; }
.invoice-pages { display: flex; gap: 10px; flex-wrap: wrap; }
.invoice-page { display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: inherit; text-decoration: none; font-size: .8rem; }
.invoice-page img { width: 104px; height: 132px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); }
.inv-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inv-item { padding: 12px 13px; background: var(--surface); border: 1px solid var(--border);
  border-left-width: 4px; border-left-color: var(--ok); border-radius: 12px; }
.inv-item.is-unmatched { border-left-color: var(--warn); }
.inv-item.is-weak { border-left-color: color-mix(in srgb, var(--warn) 70%, var(--danger)); }
.inv-item-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.inv-item-nums { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.inv-item-actions { display: flex; gap: 8px; margin-top: 10px; }
.inv-price { margin-top: 8px; padding: 7px 10px; border-radius: 9px; font-size: .88rem; }
.inv-price.is-flat { background: color-mix(in srgb, var(--text) 6%, transparent); }
.inv-price.is-first { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-muted); }
.inv-price.is-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.inv-price.is-alert { background: color-mix(in srgb, var(--danger) 15%, transparent); font-weight: 600; }
.inv-price.is-down { background: color-mix(in srgb, var(--ok) 14%, transparent); }
@media (max-width: 640px) { .inv-item-actions .btn { flex: 1; } }

/* Фактическая приёмка: привезли не то, что в документе */
.inv-fact {
  margin-top: 8px; padding: 7px 10px; border-radius: 9px; font-size: .88rem; line-height: 1.45;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}

/* Возврат поставщику: позиции накладной одним нажатием */
.ret-candidates { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ret-candidates .chip { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; min-height: 40px; }

/* Сверка «заказано → привезено → в накладной» */
.inv-reconcile { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.inv-reconcile li {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px;
  background: var(--surface-soft); border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-left: 3px solid var(--ok);
}
.inv-reconcile li.is-diff { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, var(--surface-soft)); }
.inv-reconcile strong { font-size: .93rem; }
.inv-rec-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--text-muted); }
.inv-rec-nums b { color: var(--text); font-weight: 780; font-variant-numeric: tabular-nums; }
.inv-reconcile li.is-diff .inv-rec-nums b { color: color-mix(in srgb, var(--danger) 70%, var(--text)); }

/* ── «Показать как»: баннер режима просмотра ──────────────────── */
/* Ярко и на каждой странице: администратор не должен забыть, что действует
   от чужого имени */
.viewas-bar {
  position: sticky; top: 58px; z-index: 55;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; font-size: .88rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  color: var(--accent-text);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.viewas-return {
  background: var(--accent-text); color: var(--accent); border: none; font-weight: 800;
  min-height: 34px; border-radius: 999px; padding: 4px 14px; cursor: pointer;
}
html.k-fixed-chrome .viewas-bar { font-size: 14px; }

/* ── Нижняя полка действий ────────────────────────────────────────
   Все липкие кнопки внизу («Отправить», «Сохранить», «Готово») садятся на
   одну высоту над нижней панелью и в один слой — выше плавающей кнопки
   быстрых действий, но ниже шторок. Раньше у каждой был свой отступ и свой
   z-index, и они то прятались за панелью, то перекрывались круглой кнопкой. */
:root { --k-dock-bottom: calc(var(--bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px) + 10px); }
.dispatch-send,
.ws-bottom-bar,
.review-send,
.ws-courier-bottom,
.cash-sticky-save,
.ws-wizard-nav,
.ws-sticky,
.count-actions,
.step-finish,
.inv-actions-sticky {
  position: sticky;
  bottom: var(--k-dock-bottom);
  z-index: 45;
}
/* Второй ярус: подсказка над кнопкой сохранения кассы */
.cash-sticky { bottom: calc(var(--k-dock-bottom) + 54px); z-index: 44; }
/* Круглая кнопка быстрых действий уходит, когда на экране есть своя нижняя
   кнопка: две плавающие кнопки в одном углу — верный способ промахнуться */
body:has(.dispatch-send, .ws-bottom-bar, .review-send, .ws-courier-bottom, .cash-sticky-save, .ws-sticky, .count-actions, .step-finish) .quick-wrap {
  display: none;
}
/* Запас снизу, чтобы последняя карточка не пряталась под полкой и панелью */
body:has(.dispatch-send, .ws-bottom-bar, .review-send, .ws-courier-bottom, .cash-sticky-save, .ws-sticky, .count-actions, .step-finish) .page {
  padding-bottom: calc(var(--k-dock-bottom) + 24px);
}

/* Страница курьера: следующая точка выделена, остальные ждут своей очереди.
   За рулём нужен один очевидный адрес, а не пять одинаковых карточек. */
.golink-point { position: relative; }
.golink-point.is-next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.golink-point:not(.is-next):not(.is-done) { opacity: .72; }
.golink-badge {
  position: absolute; top: -9px; left: 14px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text);
  font-size: .7rem; font-weight: 700; letter-spacing: .01em;
}
.golink-go { display: flex; gap: 8px; margin: 10px 0 0; }
.golink-go .btn { flex: 1 1 0; min-height: 46px; }

/* ── Нижняя панель: где я сейчас — не только цветом ──
   Цвет один в бликах кухонного экрана различается плохо, а у части людей
   не различается вовсе. Активный раздел дополнительно помечен полоской. */
.bn-item { position: relative; }
.bn-item.active::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--accent);
}
/* Клавиатурный обход: панель тоже должна показывать, где фокус */
.bn-item:focus-visible, .chip:focus-visible, .ws-tab:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  .bn-item, .bn-ico, .btn { transition: none; }
  .bn-item.active .bn-ico { transform: none; }
}

/* ── Крупный шрифт: текст не режем и не рвём ──
   При увеличении до 500% обрезка «в одну строку с многоточием» превращает
   надпись в многоточие, а разрыв слова посреди буквы — в кашу. Когда шрифт
   увеличен, прочитать целиком важнее, чем уложить в одну строку.

   Шапка и нижняя панель сюда не входят: они не растут вместе с текстом,
   и обрезка длинного названия точки там по-прежнему уместна. */
html.k-fixed-chrome :is(
  .bulk-item small,
  .chain-step small,
  .compact-field > span,
  .count-where .muted,
  .count-where strong,
  .day-name,
  .dispatch-sub,
  .dsp-state,
  .kpi-name,
  .map-dot b,
  .map-who strong,
  .product-identity strong,
  .ws-photo-up-name
) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Обрезку по числу строк снимаем вместе со способом отображения:
   без этого -webkit-box продолжает резать */
html.k-fixed-chrome :is(
  .map-who span,
  .ord-channel-body small
) {
  display: block;
  -webkit-line-clamp: unset;
}

/* Слово рвётся, только если целиком не влезает, и никогда «где попало».
   Исключение — ссылки и коды: их рвать по буквам правильно. */
html.k-fixed-chrome :is(p, span, strong, small, b, li, h1, h2, h3, td, th, label, summary, a):not(.ord-link):not(.qr-url) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Крупный шрифт: кнопка растёт вниз, а не вбок.
   При 500% надпись «Скопировать ссылку» шире экрана, и страница получала
   горизонтальную прокрутку — то самое, чего на телефоне быть не должно. */
html.k-fixed-chrome .btn {
  white-space: normal;
  max-width: 100%;
  height: auto;
  text-align: center;
}
html.k-fixed-chrome .btn-sm { padding: 8px 10px; }
/* Строки-факты и подписи не должны распирать своего родителя */
html.k-fixed-chrome :is(.wsq-facts, .wsa-facts, .ord-facts, .dlv-facts, .dispatch-sub, .trip-points) {
  max-width: 100%;
}

/* Слово шире экрана: выбор только между переносом и прокруткой вбок.
   При 500% «Кисловодск» занимает 400 пикселей при экране в 360 — уложить
   его целиком нельзя. Переносим, но лишь такое слово: остальные остаются
   целыми, потому что правило выше разрешает разрыв только как последнее
   средство. Гибкому потомку для этого нужно разрешить сжиматься. */
html.k-fixed-chrome :is(.dispatch-body, .dsp-courier-body, .dlv-head, .wsq-open,
                        .ord-channel-body, .trip-main, .ws-grid-name, .issue-body,
                        .dsp-courier, .dlv-card, .wsq-card, .trip-card) {
  min-width: 0;
}
html.k-fixed-chrome :is(.dsp-courier-name, .dsp-courier-role, .dlv-title, .dlv-sub,
                        .wsq-branch, .trip-who, .ord-supplier, .wsa-route) {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Прокручиваемая полоса вкладок должна сжиматься сама, а не распирать
   страницу: без min-width гибкий потомок не уже своего содержимого,
   и при крупном шрифте вкладки утаскивали за край всю страницу. */
html.k-fixed-chrome :is(.wsq-tabs, .schedule-links, .ws-nav, .hub-filters) {
  min-width: 0;
  overflow-x: auto;
}
/* Кнопка курьера — сетка из одной колонки: подпись переносится внутри,
   а не растягивает кнопку */
html.k-fixed-chrome .dsp-courier { min-width: 0; }
html.k-fixed-chrome .dsp-courier > * { min-width: 0; overflow-wrap: break-word; }

/* Строка фактов («ОТГ-0031 · 12 поз. · Центральный цех») — гибкий ряд,
   и каждый её кусок по умолчанию не уже своего текста. При 500% «Центральный
   цех» шире экрана, поэтому разрешаем куску сжаться: тогда переносится он
   один, а не уезжает вся карточка. */
html.k-fixed-chrome :is(.dlv-facts, .wsq-facts, .wsa-facts, .ord-facts, .trip-points) > * {
  min-width: 0;
  overflow-wrap: break-word;
}

/* «В одну строку» при крупном шрифте означает «за краем экрана».
   Числа и короткие подписи держались в строке ради вида таблицы — при
   увеличении важнее, чтобы их было видно целиком. */
html.k-fixed-chrome :is(
  .budget-edit .btn,
  .consumption-table th, .consumption-table td,
  .day-value,
  .dispatch-items,
  .fc-period-label,
  .fc-row-head .tag,
  .forecast-table th.is-num, .forecast-table td.is-num,
  .nowrap,
  .ord-fold-note,
  .ord-item-qty,
  .pay-check li > b,
  .pay-mark .btn,
  .prod-branch-list b,
  .prod-top span,
  .report-table th.is-num, .report-table td.is-num,
  .row-actions,
  .schedule-grid th,
  .shift-bar .btn,
  .shift-now-left,
  .sum-value,
  .supplier-count,
  .team-person-time b,
  .tpl-toggle,
  .trip-count,
  .trip-stage,
  .usage-sum,
  .ws-cat,
  .ws-courier-chip-name,
  .ws-courier-item-qty,
  .ws-fold-note,
  .ws-wizard-pos,
  .wsa-count
) {
  white-space: normal;
  min-width: 0;
}

/* Метка состояния («Отправлена») при 500% сама шире экрана: разрешаем ей
   сжиматься и переноситься, иначе она утаскивает вбок всю карточку. */
html.k-fixed-chrome .status-badge {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}
html.k-fixed-chrome :is(.wsq-top, .ord-head-top, .dlv-top, .trip-card-top) > * { min-width: 0; }

/* ── Список сделанной инвентаризации (история) ─────────────────────────────
 * Отчёт читают с телефона: название — своей строкой, под ним одной строкой
 * все показатели. Нехватка видна цветной полосой слева до того, как начнут
 * вчитываться в цифры.
 *
 * Имена классов свои, а не `.inv-*`: те принадлежат экрану подсчёта, где
 * `.inv-row` — флекс-строка с полем ввода. Пока имена совпадали, название
 * и показатели вставали в две колонки и длинные названия ломались.
 */
.hist-list { display: block; }
.hist-row {
  display: block;
  padding: 7px 10px 7px 12px;
  border-left: 4px solid transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.hist-row:last-child { border-bottom: 0; }
.hist-row.is-low { border-left-color: #f0ad4e; }
.hist-row.is-out { border-left-color: var(--danger); }
.hist-row.is-skipped { opacity: .6; }

.hist-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: break-word;
}
/* Показатели одной строкой: перенос только если совсем не помещаются */
.hist-row-facts {
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
}
/*
 * Пояснение к расчёту — формула вроде «max(0, минимум 5 − факт 2 …)».
 * По умолчанию скрыта: в списке из тридцати позиций формулы занимали бы
 * больше места, чем сами заявки. Открывает её один переключатель на
 * поставщика — скрытый флажок плюс соседний селектор, без скриптов.
 */
.hist-calc-toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.hist-calc-label {
  display: inline-block;
  margin: 0 0 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}
.hist-calc-label::after { content: " ▾"; border: 0; }
.hist-calc-toggle:checked ~ .hist-calc-label::after { content: " ▴"; }
.hist-calc-toggle:focus-visible ~ .hist-calc-label { outline: none; box-shadow: var(--focus-ring); }
.hist-row-note {
  display: none;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted);
  opacity: .72;
}
.hist-calc-toggle:checked ~ .hist-list .hist-row-note { display: block; }
.hist-row-qty { font-weight: 650; color: var(--text); }
.hist-row.is-out .hist-row-qty { color: var(--danger); }
.hist-row.is-low .hist-row-qty { color: #b26a00; }

/*
 * В заявках крупное число — сколько заказать, а не остаток. Красным его
 * красить не за что: о недостающей позиции говорят полоса слева и слово
 * «недостающий» в строке показателей.
 */
.hist-list.is-orders .hist-row.is-out .hist-row-qty { color: var(--text); }

/* Список без состояний: не оставляем пустой отступ под полосу */
.hist-list.is-flat .hist-row { padding-left: 0; border-left: 0; }

/* Поставщик над своим списком: заголовок и тег статуса на одной линии */
.hist-supplier + .hist-supplier { margin-top: 6px; }

/*
 * Кому уходят отчёты: под каждой точкой сразу видно, кто получит письмо.
 * Итог мельче и тише поля ввода — читают его глазами, правят поле.
 */
.recipient-list { display: flex; flex-direction: column; gap: 14px; }
.recipient-row .field { margin-bottom: 4px; }
.recipient-row textarea { min-height: 58px; }
.recipient-result { margin: 0; font-size: .82rem; line-height: 1.4; overflow-wrap: break-word; }

/*
 * Готовый текст заявки: кнопка копирования на виду, сам текст свёрнут —
 * он повторяет список выше и нужен, только чтобы глазами проверить,
 * что именно уйдёт поставщику. Разворачивается тем же флажком без скриптов.
 */
.hist-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hist-actions .hist-calc-label { margin: 0; }
.hist-copy-toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.copy-source {
  display: none;
  flex-basis: 100%;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.hist-copy-toggle:checked ~ .copy-source { display: block; }
.hist-copy-toggle:focus-visible ~ .hist-calc-label { outline: none; box-shadow: var(--focus-ring); }
.hist-group { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; font-size: 1rem; }
.hist-group:first-of-type { margin-top: 2px; }
.hist-total { margin: 8px 0 0; font-size: .85rem; }

/* ── Отчёты на телефоне: строка на позицию, а не столбик подписей ──────────
 * Скрипт карточек таблицы отчётов намеренно пропускает — числа в них
 * сравнивают по столбцу. Поэтому раскладка живёт здесь и ни от какого
 * класса, навешиваемого скриптом, не зависит: подписи проставляет шаблон.
 *
 * Селекторы намеренно двойные — `.table.report-table`. Общее правило
 * мобильных карточек `.table:not(.ws-table) td` весит два класса, и
 * одиночный `.report-table td` ему проигрывал: раскладка не включалась,
 * хотя стили лежали в файле.
 */
@media (max-width: 720px) {
  .table.report-table,
  .table.report-table tbody,
  .table.report-table tr { display: block; width: 100%; }
  .table.report-table thead { display: none; }

  .table.report-table tr {
    padding: 9px 10px 9px 12px;
    border-left: 4px solid transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  .table.report-table tr.is-short { border-left-color: var(--danger); }

  /* Название позиции — своей строкой */
  .table.report-table td.is-lead {
    display: block;
    padding: 0;
    border: 0;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    text-align: left;
  }

  /* Все показатели — одной строкой под названием */
  .table.report-table td {
    display: inline;
    padding: 0;
    border: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: left;
    white-space: normal;
  }
  .table.report-table td::after { content: " · "; }
  .table.report-table td:last-child::after { content: ""; }
  .table.report-table td.is-lead::after { content: ""; }
  /* Перед названием строка обрывается — точка-разделитель там повисала бы */
  .table.report-table td:has(+ td.is-lead)::after { content: ""; }
  .table.report-table td:empty { display: none; }

  /* Главное число открывает строку и выделено весом */
  .table.report-table td.is-lead-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
  }
  .table.report-table tr.is-short td.is-lead-value { color: var(--danger); }

  /*
   * Подпись — только у чисел: «мин 3» без неё не прочесть, а «Ессентуки»
   * и «шт.» понятны сами по себе и лишь занимали бы половину строки.
   */
  .table.report-table td::before { content: ""; }
  .table.report-table td.is-num::before {
    content: attr(data-label) " ";
    /* Оформление задано целиком: общее правило карточек тоже попадает
       в этот ::before и добавляло бы свой регистр и разрядку */
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  .table.report-table td.is-lead-value::before { content: ""; }

  /* Обёртка с горизонтальной прокруткой на телефоне уже не нужна */
  .table.report-table th.is-num, .table.report-table td.is-num { text-align: left; white-space: normal; }
}