/* АБК Общепит — мобильный интерфейс. Без внешних шрифтов: сеть может быть без интернета. */
:root {
  --ground: #F3F4F0; --card: #FFFFFF; --ink: #17201C; --muted: #5B655F; --line: #DADDD5; --line-soft: #ECEEE8;
  --accent: #0F6B5C; --accent-dark: #0B5246; --accent-soft: #E2F2EC;
  --warn: #8A4B08; --warn-ink: #6E3B05; --warn-soft: #FDF1DF;
  --danger: #A61B1B; --danger-ink: #8E1616; --danger-soft: #FCE9E7;
  --blue-ink: #1B4F7A; --blue-soft: #E3EEF7; --purple-ink: #6B2160; --purple-soft: #F4E6F1;
  --dark: #17201C; --radius: 14px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
h1, h2, h3 { margin: 0; }
/* Единая шапка страницы: заголовок, ссылка на регламент, действия справа (на телефоне — переносятся) */
h1 { font-size: 22px; line-height: 1.25; font-weight: 800; }
h1 .ref { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 8px; border-radius: 8px; background: #E6ECE8;
  color: #33403A; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-head .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lead { margin: 0; font-size: 13px; color: var(--muted); }
a.back { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; }
a.back:hover { color: var(--ink); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.wrap { max-width: 680px; margin: 0 auto; padding: 16px 16px 96px; display: flex; flex-direction: column; gap: 16px; }
.wrap.wide { max-width: 1200px; }

/* шапка */
.topbar { background: var(--dark); color: #F3F4F0; }
.topbar .in { max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.topbar .brand { font-weight: 800; font-size: 17px; color: #F3F4F0; text-decoration: none; flex: 1; white-space: nowrap; }
.topbar .who { text-align: right; font-size: 13px; line-height: 1.2; }
.topbar .who b { display: block; font-size: 14px; }
.topbar .who span { color: #B8C2BC; }
.topbar form { margin: 0; }
.topbar button { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #45524B; background: transparent; color: #F3F4F0; font: inherit; font-size: 13px; }

/* нижнее меню */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); z-index: 10; padding-bottom: env(safe-area-inset-bottom); }
.tabbar .in { max-width: 680px; margin: 0 auto; display: flex; }
.tabbar a { flex: 1; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; position: relative; }
.tabbar a.on { color: var(--accent); font-weight: 800; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar .badge { position: absolute; top: 8px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* карточки и списки */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.card.pad { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.card.alert { border: 2px solid var(--danger); }
.section-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.list { display: flex; flex-direction: column; }
.list > a, .list > div.row, .list > form.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.list > :last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list .t { font-weight: 700; }
.list .s { font-size: 12px; color: var(--muted); }
.empty { padding: 18px 14px; color: var(--muted); font-size: 14px; }

/* плашки */
.tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag.teal { background: var(--accent-soft); color: var(--accent-dark); }
.tag.amber { background: var(--warn-soft); color: var(--warn-ink); }
.tag.blue { background: var(--blue-soft); color: var(--blue-ink); }
.tag.purple { background: var(--purple-soft); color: var(--purple-ink); }
.tag.red { background: var(--danger-soft); color: var(--danger-ink); }
.tag.gray { background: #E6ECE8; color: #33403A; }
.st-draft { background: #E6ECE8; color: #33403A; }
.st-in_route { background: var(--warn-soft); color: var(--warn-ink); }
.st-approved { background: var(--blue-soft); color: var(--blue-ink); }
.st-posted { background: var(--accent-soft); color: var(--accent-dark); }
.st-returned { background: var(--danger-soft); color: var(--danger-ink); }
.st-superseded, .st-cancelled { background: #EEEFEB; color: var(--muted); }

/* быстрые действия */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick a { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 14px; min-height: 84px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; }
.quick a:first-child { background: var(--accent); border-color: var(--accent); color: #fff; }
.quick a .s { font-size: 12px; font-weight: 600; opacity: .8; }

/* формы */
form.stack { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
input[type=text], input[type=password], input[type=search], input[type=date], input:not([type]), select, textarea {
  min-height: 48px; width: 100%; padding: 0 12px; border-radius: 12px; border: 1px solid #C9CEC6; background: var(--card); color: var(--ink); font: inherit; font-size: 16px;
}
textarea { padding: 12px; min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(15,107,92,.25); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 2px solid #C9CEC6; background: var(--card); font-weight: 600; font-size: 14px; cursor: pointer; }
.chips input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.chips input:focus-visible + span { outline: 3px solid rgba(15,107,92,.35); }
.lines { display: flex; flex-direction: column; gap: 8px; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; padding: 10px; background: #F7F8F5; border-radius: 12px; }
.line.batch { grid-template-columns: minmax(0, 1fr) 96px; }
.line .full { grid-column: 1 / -1; }
.line input { min-height: 44px; }
.qty { font-family: var(--mono); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: var(--radius); border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-dark); color: #fff; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--card); color: var(--ink); border: 2px solid #C9CEC6; }
.btn.ghost:hover { background: #F7F8F5; color: var(--ink); }
.btn.warn { background: var(--card); color: var(--warn); border: 2px solid #C2700A; }
.btn.danger { background: var(--danger); }
.btn.small { min-height: 44px; font-size: 14px; padding: 0 14px; }
.btn[disabled] { background: #A9B1AB; cursor: not-allowed; }
.row-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* сообщения */
.flash { padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.flash.error { background: var(--danger-soft); color: var(--danger-ink); }
.flash.ok { background: var(--accent-soft); color: var(--accent-dark); }
.flash.info { background: var(--warn-soft); color: var(--warn-ink); }
.note { padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-ink); font-size: 13px; }
.lock { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #EEEFEB; color: #33403A; font-size: 13px; }

/* документ */
.dochead { display: flex; flex-direction: column; gap: 6px; }
.dochead .num { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.dochead h1 { font-size: 22px; font-weight: 800; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
table.items { width: 100%; border-collapse: collapse; font-size: 14px; }
table.items th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 6px 0; border-bottom: 1px solid var(--line); }
table.items td { padding: 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.items td.n, table.items th.n { text-align: right; font-family: var(--mono); white-space: nowrap; padding-left: 8px; }
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.photos a { display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #DADDD5; }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera { aspect-ratio: 3 / 4; border-radius: 10px; border: 2px dashed var(--accent); background: var(--card); color: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 13px; cursor: pointer; text-align: center; padding: 6px; }
.camera input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.camera.busy { opacity: .6; pointer-events: none; }
.route { display: flex; flex-direction: column; }
.route .stp { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.route .stp:last-child { border-bottom: 0; }
.route .dot { width: 26px; height: 26px; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; border: 2px solid #A9B1AB; color: var(--muted); }
.route .done .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.route .pending .dot { border-color: #C2700A; color: var(--warn); }
.route .rejected .dot { background: var(--danger); border-color: var(--danger); color: #fff; }
.route .body { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.audit { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.audit span.mono { color: var(--ink); }

/* показатели */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi { padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.kpi b { display: block; font-family: var(--mono); font-size: 24px; }
.kpi span { font-size: 12px; font-weight: 700; color: var(--muted); }
.kpi.red { background: var(--danger-soft); border-color: transparent; } .kpi.red b { color: var(--danger); }
.kpi.amber { background: var(--warn-soft); border-color: transparent; } .kpi.amber b { color: var(--warn); }
.kpi.teal { background: var(--accent-soft); border-color: transparent; } .kpi.teal b { color: var(--accent-dark); }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.filters a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 19px; border: 1px solid #C9CEC6; background: var(--card); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; }
.filters a.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.iiko-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.iiko-form > .field { min-width: 180px; }
.iiko-form input[type=file] { max-width: 100%; }
.iiko-form .field { flex: 1; }
.iiko-form input { min-height: 44px; font-family: var(--mono); }

/* таблицы для компьютера */
.scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); }
table.grid th, table.grid td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
table.grid th { font-size: 12px; color: var(--muted); background: #F7F8F5; position: sticky; top: 0; }
table.grid tr:hover td { background: #FAFBF8; }
.filter-form, .card.pad.filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.filter-form .field input, .filter-form .field select { min-height: 42px; font-size: 14px; }

/* вход */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login .box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.login h1 { font-size: 28px; font-weight: 800; }

@media print {
  .tabbar, .topbar form, .no-print { display: none !important; }
  body { background: #fff; }
  .card { border-color: #999; }
}

/* смена */
.tick { width: 24px; height: 24px; flex-shrink: 0; border-radius: 12px; border: 2px solid #A9B1AB; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.tick.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.list > div.row { align-items: flex-start; }
.check-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.check-actions input:not([type=file]) { flex: 1 1 160px; min-height: 44px; }
.check-actions input[type=file] { flex: 1 1 100%; font-size: 14px; }
.anomaly-box { display: flex; flex-direction: column; gap: 10px; }
.anomaly-box[hidden] { display: none; }
input[type=file] { font: inherit; font-size: 14px; }
.cash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cash-diffs { display: flex; flex-direction: column; gap: 4px; }
.cash-diffs .bad { color: var(--danger-ink); font-weight: 700; }
.cash-diffs .good { color: var(--accent-dark); font-weight: 700; }
.summary-table td.n.bad { color: var(--danger-ink); font-weight: 700; }
.summary-table { font-size: 13px; }
.summary-table td.n, .summary-table th.n { padding-left: 6px; }

/* приёмка */
.receipt-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.line label.mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.line label.mini input, .line label.mini select { font-weight: 400; min-height: 44px; }
.dec-accepted { background: var(--accent-soft); color: var(--accent-dark); }
.dec-reservation { background: var(--warn-soft); color: var(--warn-ink); }
.dec-quarantine, .dec-rejected { background: var(--danger-soft); color: var(--danger-ink); }
.label-sheet { border: 6px solid #A61B1B; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.label-sheet .big { font-size: 34px; font-weight: 900; color: #A61B1B; letter-spacing: .02em; line-height: 1.1; }
.label-sheet dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 18px; margin: 0; }
.label-sheet dt { color: #444; }
.label-sheet dd { margin: 0; font-weight: 700; }
@media print { .label-sheet { border-width: 8px; } .topbar { display: none; } }
table.items td.bad { color: var(--danger-ink); font-weight: 700; }

/* первичные документы: оригинал слева, распознанное справа */
.prim-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 960px) {
  .prim-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .prim-orig { position: sticky; top: 12px; max-height: calc(100vh - 110px); overflow: auto; }
}
.prim-orig { display: flex; flex-direction: column; gap: 10px; }
.prim-orig img { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }
.prim-orig img.zoom { width: 200%; max-width: none; cursor: zoom-out; }
.pline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 10px; border-radius: 12px; background: #F7F8F5; border: 2px solid transparent; }
.pline.ok { border-color: var(--accent); background: #F1F8F5; }
.pline .full { grid-column: 1 / -1; }
.pline .half { grid-column: span 2; }
.pline label { font-size: 11px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.pline input, .pline select { min-height: 38px; padding: 0 8px; font-size: 14px; border-radius: 9px; }
.pline input.num { font-family: var(--mono); text-align: right; }
.pline .pos { font-family: var(--mono); font-weight: 800; }
.pline .marks { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.pline .marks label { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); }
.pline .marks input[type=checkbox] { width: 22px; height: 22px; min-height: 0; }
.checks { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.checks li { padding: 6px 10px; border-radius: 8px; }
.checks .error { background: var(--danger-soft); color: var(--danger-ink); }
.checks .warn { background: var(--warn-soft); color: var(--warn-ink); }
.checks .okay { background: var(--accent-soft); color: var(--accent-dark); }
.hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hgrid .full { grid-column: 1 / -1; }
.hgrid input, .hgrid select { min-height: 42px; font-size: 15px; }
.st-check { background: var(--warn-soft); color: var(--warn-ink); }
.st-verified { background: var(--blue-soft); color: var(--blue-ink); }
.st-synced { background: var(--accent-soft); color: var(--accent-dark); }
.st-rejected { background: #EEEFEB; color: #5B655F; }
.checks .info { background: var(--blue-soft); color: var(--blue-ink); }

/* маркировка: кухонный экран с крупными плитками */
.kind-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kind-tabs a { display: flex; align-items: center; justify-content: center; min-height: 60px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); font-weight: 800; font-size: 17px; text-decoration: none; color: var(--ink); }
.kind-tabs a.on { background: #E8742C; border-color: #E8742C; color: #fff; }
#lsearch { min-height: 56px; font-size: 18px; }
.ltiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ltile { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 92px; padding: 12px; border-radius: 14px; background: #5E9E3A; color: #fff; text-decoration: none; }
.ltile:hover, .ltile:focus { background: #4E8A2F; color: #fff; }
.ltile b { font-size: 16px; line-height: 1.2; }
.ltile span { font-size: 12px; opacity: .9; }
.ltile[hidden] { display: none; }
.stiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stile { position: relative; }
.stile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stile span { display: flex; flex-direction: column; gap: 2px; min-height: 96px; padding: 14px; border-radius: 14px; border: 3px solid #5E9E3A; color: #2F5A18; background: #F1F7EC; font-size: 14px; cursor: pointer; }
.stile span b { font-size: 18px; }
.stile input:checked + span { background: #E8742C; border-color: #E8742C; color: #fff; }
.stile input:focus-visible + span { outline: 3px solid rgba(15,107,92,.35); }
.stepper { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 8px; }
.stepper .btn { font-size: 28px; min-height: 56px; padding: 0; }
.stepper input { min-height: 56px; text-align: center; font-size: 24px; font-family: var(--mono); }
.rule-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 72px 100px; gap: 6px; align-items: center; font-size: 14px; }
.rule-row input, .rule-row select { min-height: 42px; font-size: 15px; }
@media (max-width: 520px) { .rule-row { grid-template-columns: 1fr 1fr; } .rule-row b { grid-column: 1 / -1; } }
.stepper input { width: 100%; border-radius: 12px; border: 1px solid #C9CEC6; background: var(--card); }
.monitor { padding: 12px; display: flex; flex-direction: column; gap: 10px; border: 2px solid #E8742C; }
.mon-head { display: flex; flex-direction: column; gap: 2px; }
.mon-head b { font-size: 17px; }
.mon-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.mon-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #F7F8F5; cursor: pointer; }
.mon-row input[type=checkbox] { width: 26px; height: 26px; flex-shrink: 0; }
.mon-row .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mon-row.soon { background: var(--warn-soft); }
.mon-row.exp { background: var(--danger-soft); }
.mon-time { font-family: var(--mono); font-weight: 800; white-space: nowrap; }
.mon-row.exp .mon-time { color: var(--danger-ink); }
.mon-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }