/* Атрибут hidden — это всего лишь браузерное display:none, и ЛЮБОЕ правило с display
   его перебивает: меню групп в справочнике имело display:flex и не закрывалось, сколько
   ни кликай мимо (заявка 120). Одна строка закрывает это для всех элементов сразу. */
[hidden]{display:none !important}
:root{--gap-sep:22px;  /* заявка 1372: один разделительный отступ на всю систему */
  
  --bg:#FFFFFF; --panel:#F7F7F9; --card:#FFFFFF; --ink:#17171A; --muted:#7C808A; --line:#EEEFF2;
  --accent:#F56F10; --accent-dark:#DD5F06; --accent-soft:#FCE5D4;
  /* Заливка под белым текстом: фирменный оранжевый даёт с белым 2.93:1 при норме 4.5.
     Заявки 694/715: #C05207 (4.72) и #D45C06 (3.94) читались тёмными, как коричневый;
     кнопки крупные и жирные, там норма 3:1 — #EA6508 даёт 3.3. Ярким #F56F10 остаётся графика. */
  --accent-btn:#EA6508;
  --green:#219234; --green-soft:#ECFAEE; --red:#D93025; --red-soft:#FBEAE9;
  --dark:#262626; --dark2:#393939; --r:10px;
  --shadow:0 4px 4px rgba(0,0,0,.05), 0 4px 3px rgba(0,0,0,.04);
  --shadow-lg:0 4px 20px rgba(0,0,0,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.45;min-height:100dvh}  /* заявка 518: плотнее */
a{color:inherit;text-decoration:none}
/* Заявка 404: ссылка внутри текста — системным оранжевым. По умолчанию ссылки в админке
   наследуют цвет текста (строки таблиц кликаются целиком), поэтому одиночную ссылку
   в заголовке или подписи глазом не отличить от обычных слов. */
/* заявка 432: период в заголовке отчёта — не ссылка, но и не серый текст: мягкая
   плашка в фирменном оттенке. Ссылки в системе оранжевые буквами, эта — заливкой,
   спутать нельзя */
.hchip{display:inline-block;background:var(--accent-soft);color:var(--ink);
  border-radius:8px;padding:1px 9px;font-size:.92em;vertical-align:baseline}
.alink{color:var(--accent-dark);font-weight:700}
/* заявка 439: наведение показывает цветом, а не подчёркиванием — линия под
   текстом в плотной таблице читается как помарка */
.alink:hover{color:var(--accent)}
/* Заявка 429: мелкая ссылка внутри листа — «Смотреть ДДС», имя гостя в таблице,
   позиция меню — должна читаться как ссылка. Раньше она наследовала цвет текста
   (a{color:inherit}) и была неотличима от обычной ячейки: про половину переходов
   человек просто не знал. Берём ту же примету, что у номера смены в ABC.
   Ссылки со своим классом (.btn, .backbtn, .perchip, строки-ссылки) не трогаем,
   как и те, где цвет задан на месте: там вид выбран осознанно. */
.wrap a:not([class]),.pos-wrap a:not([class]){color:var(--accent-dark);font-weight:700}
.wrap a:not([class]):hover,.pos-wrap a:not([class]):hover{color:var(--accent)}
/* Заявка 434: в таблице так красить нечего. Название товара, позиция меню, имя гостя —
   это сама строка, а не текстовая ссылка внутри фразы: покрашенная колонка превращает
   лист в частокол оранжевого и перетягивает взгляд с цифр. В ячейке оставляем цвет
   текста, а подсказка «сюда можно нажать» — подчёркивание при наведении. */
.wrap td a:not([class]),.pos-wrap td a:not([class]){color:inherit;font-weight:inherit}
/* Заявка 354: цвет кнопке нужен явный. Без него Chrome берёт свой чёрный, а Safari
   на телефоне — системный синий: названия позиций в кипере приезжали синими, хотя на
   компьютере чёрные. inherit — цвет родителя, то есть обычный текст интерфейса.
   Кнопки со своим цветом (.btn, .cat-chip и прочие) задают его сами и не затронуты. */
/* Заявка 379: «кнопки не всегда нажимаются». Дело не в интернете. Без touch-action
   мобильный браузер ждёт возможного двойного тапа (это ~300 мс) и всё это время считает
   палец кандидатом на прокрутку: чуть сместился — click не приходит вовсе, нажатие
   «проглатывается». manipulation отключает ожидание двойного тапа, оставляя обычные
   прокрутку и щипок. Плюс явный отклик на нажатие, чтобы палец видел, что попал. */
button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}
/* заявка 952: только прокрутка — ни щипка, ни зума двойным касанием по тексту (щипок ещё и в backnav.js) */
html{touch-action:pan-x pan-y}
a,.btn,summary,label,input[type=checkbox],input[type=radio]{touch-action:manipulation}
.btn:active,button.qtybtn:active,.cat-chip:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.btn:active,button.qtybtn:active,.cat-chip:active{transform:none}}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:9px 12px;min-height:44px;width:100%}
/* 16px не даёт iOS Safari зумить страницу при фокусе на поле */
input,select,textarea{font-size:16px}
/* заявка 452: «27.08.2026, 11:15» не влезало и обрезалось многоточием — у поля даты
   со временем своя ширина по содержимому, шире обычного поля */
input[type=datetime-local]{min-width:215px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
/* Галочка — не текстовое поле. Правило выше растягивало её на всю ширину колонки и на
   44px в высоту: в меню «Колонки» получались пустые прямоугольники вместо галочек
   (заявка 88), и каждый экран лечил это своим inline-стилем. Тач-цель даёт обёртка
   label с отступами, а не сам квадратик. */
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;flex:none;
  accent-color:var(--accent);cursor:pointer}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 4px}
.field{margin-bottom:12px}
/* заявка 1047: отступ под строкой полей — классом, а не инлайном: плотный вид
   справочника инлайновый стиль перебить не может */
.frowmb{margin-bottom:12px}
.num{font-variant-numeric:tabular-nums}

/* топбар */
.topbar{background:var(--dark);color:#fff;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-lg);
  padding-top:env(safe-area-inset-top)}  /* заявка 1346: страница уходит под часы (cover) — шапка отступает */
/* Заявка 474: шапка управления, как шапка кипера, тянется от края до края — разделы
   слева, «Кипер» и сотрудник справа. Раньше она была зажата в 1440px и на широком
   экране висела по центру с пустыми полями, а кипер — во всю ширину */
.topbar-in{display:flex;align-items:center;gap:6px;padding:0 16px 0 10px;
  min-height:64px;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* заявка 994: полоса подразделов под тёмной шапкой — светлая, во всю ширину, открытый
   пункт подчёркнут оранжевым (образец «МоегоСклада»). Не липнет отдельно: она часть
   sticky-шапки, а sort.js сам меряет её высоту в --th-top для шапок таблиц */
.subnav{display:flex;gap:2px;background:#fff;padding:0 16px;overflow-x:auto;
  scrollbar-width:none;border-bottom:1px solid var(--line)}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:11px 12px 10px;font-size:13.5px;font-weight:600;color:var(--muted);
  white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--ink)}
/* заявка 996: открытый подраздел видно с одного взгляда — полоса толще и подпись жирнее.
   Заявка 1001: свечение под полосой убрано — не понравилось */
.subnav a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
@media(max-width:700px){.subnav{display:none}}
/* вкладки листа, оставшиеся ради телефона (CRM, справочник): на широком экране их
   заменяет полоса подразделов */
.tabs.mobonly{display:none}
@media(max-width:700px){.tabs.mobonly{display:flex}}
@media(max-width:1120px){
  /* заявки 602/611 клали правый блок второй строкой (hdrbreak) и переносили разделы.
     Заявка 902: шапка всегда в одну строку — как только она перестала влезать (ползунок
     прокрутки), скрипт в base.html прячет разделы в список под лого (navfold) */
  .topbar-in > .shell-switch{margin-left:auto}
  .shell-switch + .topuser{margin-left:0}
  .topnav a{margin:2px 0;padding:8px 12px;min-height:40px}
  .topuser span span:last-child{display:none}
}

/* заявка 998: лого мельче и прижато влево — разделы начинаются ближе к началу полосы
   подразделов, между ними больше не пустой отрезок в полсотни пикселей */
.logo{font-weight:800;font-size:14.5px;white-space:nowrap;padding:14px 8px 14px 0;letter-spacing:.2px}
.logo b{color:var(--accent)}
/* статус кассы в шапке управления: мелкой строкой ПОД логотипом (заявка 187).
   Логотип с ним — одна колонка, поэтому у самого логотипа снимаем нижний отступ */
.brandcol{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 4px 4px 0}  /* заявка 724: со строкой компании колонка ровно в 64px шапки */
.brandcol .logo{padding:0}
.topshift{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  letter-spacing:.3px;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none;
  white-space:nowrap;line-height:1}
.topshift:hover{color:#fff}
.topshift i{width:6px;height:6px;border-radius:50%;background:#16A34A;display:block}
.topshift.off i{background:#e05263}
/* смену забыли закрыть (SHIFT_MAX_H): не «открыта» и не «закрыта», а отдельное состояние */
.topshift.stale{color:#F2B26B}
.topshift.stale i{background:#e0a052}
.topnav{display:flex;gap:2px}
.topnav{gap:4px;align-items:center}
/* заявка 461: высота шапки совпадает с кипером — 64px в обеих оболочках */
.topnav a{padding:10px 16px;margin:10px 0;color:rgba(255,255,255,.66);font-weight:500;font-size:14px;
  white-space:nowrap;border-radius:10px;min-height:44px;display:flex;align-items:center}
.topnav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.topnav a.on{color:#fff;background:var(--dark2)}
/* заявка 448: переключатель между двумя оболочками — управлением и кипером.
   Крупнее пунктов меню и оформлен отдельно: это не «ещё один раздел» */
.shell-switch{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  color:#fff;font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.25);
  border-radius:12px;padding:9px 14px;min-height:44px;white-space:nowrap}
.shell-switch:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.shell-switch svg{width:18px;height:18px}
.shell-switch + .topuser{margin-left:14px}
@media(max-width:640px){.shell-switch span{display:none}.shell-switch{padding:9px 11px}}
/* Заявка 538: на телефоне шапка управления выглядит как в кипере — только квадратик
   логотипа, кнопки иконками, всё в одну строку; разделы остаются строкой ниже */
@media(max-width:600px){
  /* заявка 665: лого на той же точке, что в кипере (6px от края) — при переключении
     оболочек шапка не прыгает */
  .topbar-in{padding:0 8px 0 6px}
  .umenu.logomenu summary{padding-left:0}
  .logo .lbt{display:none}
  .brandcol{padding:6px 8px 6px 0}
  .topshift{font-size:9.5px}
  /* заявка 684: правый блок тех же размеров, что в кипере, — иконки при переключении
     оболочек стоят на тех же точках. Раньше эти правила проигрывали базовым ниже по
     файлу (та же специфичность), точка смены в «Кипере» раздувала кнопку до 61px,
     а «?» был уже колокольчика кипера */
  .topbar .topuser{gap:6px}
  .topbar .topuser>a,.topbar .topuser .bugbtn{padding:7px 9px}
  .topbar .topuser>a{min-width:37px;justify-content:center;box-sizing:border-box}
  .topbar .shell-switch{padding:8px 10px;position:relative}
  .topbar .shell-switch+.topuser{margin-left:0}  /* зазор даёт gap самой шапки */
  .topuser .lb{display:none}
  .topuser span{display:none}
  .topuser img{width:30px;height:30px}
}
/* Заявка 472: справа от переключателя оболочек всё выглядит одинаково с двух сторон —
   «Баг», «?» и «Выйти» такими же обведёнными кнопками, как exit-кнопки кипера */
.topuser a,.topuser .bugbtn{border:1px solid rgba(255,255,255,.25);border-radius:10px;
  padding:8px 12px;min-height:40px;display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
.topuser a:hover,.topuser .bugbtn:hover{background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.45)}
.topuser{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap;
  color:rgba(255,255,255,.65);font-size:13px}

/* layout */
/* имя гостя приходит из кабинета: одно слово в 60 символов раздвигало карточку шире
   экрана и уносило вбок всю страницу зала */
.card,.chk-line,.pos-top{overflow-wrap:anywhere}
/* ...но не в кнопках: там нет чужого текста, зато «Наличные» ломалось на «Нали/чные» */
.card button,.card .btn,.pos-top button,.pos-top a{overflow-wrap:normal}
/* ...и не в заголовке самой карточки: он свой, не чужой, и рваться посреди слова не
   должен. «Доступ» в настройках сотрудников превращался в «Дост/уп»: заголовок —
   flex-строка, рядом стоит длинная подпись («вход в Офис: …»), и на телефоне она
   дожимала слово до переноса. Подпись теперь уезжает на свою строку, слово целое. */
.card > summary{overflow-wrap:normal;flex-wrap:wrap}
/* Заявка 353: и не в листах документов. На телефоне «21.08.2026 22:41» рвалось в
   столбик по одному символу, а «Lounge MM» — на два этажа: колонка ужималась, а
   overflow-wrap:anywhere резал что угодно. Даты, числа и суммы держим одной строкой,
   таблица вместо этого едет вбок (.tscroll.has-x). Названия по-прежнему переносятся. */
.tscroll table td,.tscroll table th{overflow-wrap:normal}
.tscroll table td.num,.tscroll table th.num,.tscroll table td.r,.tscroll table th.r{white-space:nowrap}
.wrap{max-width:1880px;margin:0 auto;padding:20px 16px 48px}  /* заявки 622/629: таблицам шире */
/* шапка таблицы липнет к окну и не должна уезжать под тёмный топбар (он sticky, 64px).
   На кассовой поверхности прокручивается не окно, а .pos-wrap — там отступ не нужен,
   и pos_base обнуляет эту переменную у себя */
body{--th-top:64px}
.pagehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
h1{font-size:20px;font-weight:800}
h2{font-size:15px;font-weight:700;margin-bottom:8px}
.sub{color:var(--muted);font-size:13px}
/* Заявка 325 делала полосу подразделов липкой, но с 498/500 она живёт внутри .pagehead
   (высотой в саму полосу) и прилипнуть физически не может. Заявка 899: липкость снята —
   иначе sort.js считал её липкой и опускал шапку таблицы на её высоту, а в зазоре
   между топбаром и шапкой сквозили строки (688 чинил то же точечно у листов с «Назад») */
.tabs{display:flex;gap:4px;background:var(--panel);border-radius:12px;padding:4px;flex-wrap:wrap}
.tabs a{padding:8px 16px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--muted);
  min-height:38px;display:flex;align-items:center}
.tabs a.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
/* Заявки 498/500: вкладки раздела живут в ОДНОЙ строке с кнопкой «Назад» — навигация
   в одном месте и не прыгает от длины заголовка («Перемещения» длиннее «Списаний»).
   Порядок наводит flex-order: назад → вкладки → перенос строки (.phbr) → заголовок.
   Вкладки остаются отдельной пилюлей (панель со скруглением) — визуально сами по себе.
   На страницах без кнопки «Назад» (дашборд) всё как было — правило под :has #}*/
.pagehead:has(> .backslot) > .backslot{order:-3;display:inline-flex;align-items:center}
/* без своего margin: слева и на дашборде, и здесь один и тот же gap шапки —
   иначе вкладки на внутренних листах стояли на 12px правее (заявка 505) */
.pagehead:has(> .backslot) > .tabs{order:-2}
.pagehead:has(> .backslot) > .phbr{order:-1}
/* заявка 983: без вкладок разрыв .phbr лишний — нулевой высоты, но своей строкой он
   удваивал зазор (14px до и после), и «Назад» съедала 82px до заголовка. Слот во всю
   строку — заголовок переносится сам, зазор один */
.pagehead:not(.bkinline):not(:has(> .tabs)) > .backslot{flex:1 0 100%}
.pagehead:not(.bkinline):not(:has(> .tabs)) > .phbr{display:none}
/* и сама кнопка ниже: 46px держались ради одной линии с полосой вкладок (501) — без
   вкладок равняться не на что */
.pagehead:not(.bkinline):not(:has(> .tabs)) .backbtn{min-height:36px;padding:5px 12px 5px 9px}
/* Заявка 505: вкладки начинаются с одного и того же места ПО ВСЕЙ системе.
   Слева фиксированный слот 210px: на дашборде его занимает название компании,
   на остальных листах — кнопка «Назад» (она «как будто заменяет название»).
   Какой бы ни была ширина подписи, строка вкладок прибита к одному x.
   На телефоне слот не держим — там шапка складывается в столбик */
@media(min-width:641px){
  /* заявка 506: ширину держит СЛОТ, кнопка внутри остаётся обычного размера */
  /* заявка 507: слот ужат до 185px — вкладки стоят ближе к названию/кнопке,
     мёртвого зазора меньше, точка начала по-прежнему одна на всю систему */
  /* заявки 509/510: слот ужат до предела — 179px, по самой длинной подписи
     «Назад» («Карточка гостя»). Уже нельзя: на этой странице кнопка вытолкнет вкладки,
     и они перестанут начинаться с одной точки */
  /* заявка 1375: слот держим под НАСТОЯЩИЕ вкладки. `.tabs-mob` на компьютере спрятан,
     а правило всё равно резервировало 156px, и между названием листа и кнопками
     висела дыра неизвестно от чего (в «Деньгах» — 80px) */
  .pagehead:has(> .tabs:not(.tabs-mob)) > .backslot{min-width:156px}
  .pagehead:has(> .tabs:not(.tabs-mob)):not(:has(> .backslot)) > h1{flex:0 0 156px;max-width:156px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.spacer{flex:1}
/* На телефоне шапка страницы складывается в столбик: кнопка возврата и заголовок
   в строке, всё остальное (поиск, действия) — своей строкой во всю ширину. До правки
   поле поиска налезало на кнопку «назад» и заголовок (заявка 264). */
.pagehead-search{flex:1;max-width:420px}
/* быстрый период рядом с полями дат — одинаково на всех листах (заявка 260) */
.perchips{display:flex;gap:6px;flex-wrap:wrap}
.perchip{min-height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--muted);font:inherit;font-size:13px;font-weight:600;white-space:nowrap}
.perchip:hover{color:var(--ink)}
/* заявка 424: тем же чипом бывает и ссылка («По месяцам» в ДДС) — у неё своя
   раскладка и подчёркивание, поэтому равняем к кнопке явно */
a.perchip{display:inline-flex;align-items:center;text-decoration:none}
.perchip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
/* заявка 437: весь выбор периода — под одним чипом. summary рисует треугольник и
   ведёт себя как строка списка: гасим и то и другое, чтобы он выглядел ровно чипом */
.perline{display:flex;gap:4px;align-items:center}
.perstep{min-height:44px;padding:0 10px;font-size:16px;line-height:1;color:var(--muted)}
.perstep:hover{color:var(--accent-dark);border-color:var(--accent)}
.persel{position:relative}
/* заявка 438: кнопка стоит в ряду с полями фильтра — и ростом должна быть с них,
   иначе висит выше строки. Поля в системе 44px */
.persel>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;white-space:nowrap;min-height:44px}
.persel>summary::-webkit-details-marker{display:none}
.persel>summary::marker{content:''}
.persel[open]>summary{border-color:var(--accent);color:var(--accent-dark)}
/* заявка 462: список вариантов не должен выходить за край экрана — переносим чипы
   и держим ширину в пределах окна */
.persel-box{position:absolute;z-index:60;top:calc(100% + 6px);left:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:10px;
  max-width:min(92vw, 420px)}
.persel-box .perchips{flex-wrap:wrap}
.perown-box{display:flex;gap:10px}
.perown-box label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);
  font-weight:600;white-space:nowrap}
.perown-box input{min-height:38px}
@media(max-width:520px){.perown-box{flex-direction:column}}
/* четыре чипа стоят одной строкой: в две они читаются как два разных фильтра.
   Ширину берём по содержимому — подписи в разных языках разной длины */
.perchips{flex-wrap:nowrap}
/* .frow .field ниже по файлу задаёт flex:1 и min-width:130px с той же силой селектора и
   побеждало по порядку: блок периода ужимался до 130px, «Месяц» и «Всё» вылезали за него
   и ложились под поля дат (заявка 283). Добавленный .frow поднимает вес — порядок правил
   больше не решает. */
/* заявка 443: период всегда стоит первым в строке фильтров. Раньше он ехал по строке
   вслед за соседями (месяц, склад, гость) и на каждом листе оказывался в новом месте */
.field.per,.frow .field.per{flex:0 0 auto;min-width:max-content;order:-1}
@media(max-width:700px){
  .field.per,.frow .field.per{flex:1 0 100%;min-width:0}
  .perchips{flex-wrap:wrap}
}
@media(max-width:700px){
  .pagehead{gap:10px}
  .pagehead h1{font-size:20px}
  /* заявка 1355: у документа в строке названия стоят ещё номер, карандаш и дата.
     Длинное название («Перемещение MM → Lounge MM») занимало всю строку целиком,
     и номер с карандашом валились на следующие. Название чуть мельче — номер влезает */
  .pagehead.docph > h1{font-size:16px}
  /* заявка 747: форма удаления документа — кнопка, а не строка фильтров; стоит рядом
     с «Сохранить», а не своей строкой */
  .pagehead > form:not(.op-pin-form),
  .pagehead > .frow{width:100%;flex:1 0 100%;max-width:none}
  .pagehead > .spacer{display:none}
  /* заявка 971: «Пречек» в чеке — в строке названия стола, плашки и «чел» ниже.
     Заявка 1116: кнопки стоят вплотную за названием стола, порядок задаёт разметка —
     ни margin-left:auto, ни order их больше не растаскивают по краям */
  /* заявка 1221: статус документа — тоже не на всю строку, он стоит за датой */
  .pagehead > form.phpre,
  .pagehead > form.opst-f,
  .pagehead > form.covers-f{width:auto;flex:none}
  /* заявка 745: кнопки шапки листа переносятся целиком, надпись внутри не ломается */
  /* заявка 1041: у карточки в шапке одна кнопка «Закрыть» — целой строки она не стоит,
     встаёт в строку с бейджами (в отличие от полосы кнопок документа) */
  .pagehead.cardph > .headbtns{width:auto;flex:none;margin-left:auto}
  /* заявка 1312: длинное имя гостя распирало строку и «Закрыть» падала на вторую.
     Поле имени занимает остаток строки, а не свою ширину по числу букв */
  .pagehead.cardph > h1.gname{flex:1 1 0;min-width:0}
  /* заявка 1177: у платежа дата, мелкая плашка «расход» и «Закрыть» стоят одной
     строкой; ссылка на связанный документ уходит под них. Тремя строками шапка
     занимала пол-экрана */
  /* селектор с .pagehead — правило «дата во всю строку» (заявка 986) стоит ниже
     по файлу и при равной силе побеждало бы */
  .pagehead.payph > .opnum > .opdt{flex:0 1 auto;order:1}
  .pagehead.payph > .badge{font-size:11px;padding:3px 8px;min-width:0;order:2}
  .pagehead.payph > .headbtns{order:3}
  .pagehead.payph > .paylink{order:4;flex:1 0 100%;font-size:13px}
  /* «от» и широкое поле не оставляли места кнопке — подпись убираем, поле ужимаем:
     значок календаря и так говорит, что это дата */
  .pagehead.payph > .opnum > .opdt > span{display:none}
  .pagehead.payph .opnum input[type=datetime-local]{font-size:14px;width:auto;max-width:186px;
    padding-left:24px;padding-right:2px;background-size:13px;background-position:6px center}
  .pagehead.cardph > .headbtns > .btn{flex:none}
  .pagehead > .headbtns{flex-wrap:wrap!important;width:100%}
  .pagehead > .headbtns > .btn{white-space:nowrap;flex:1 1 auto}
  /* заявка 749: «Проведено» (order:9) — под названием документа, кнопки — ниже него */
  .pagehead > button.btn, .pagehead > .op-pin-form{order:10}
}
/* заявка 260: кнопка возврата — одна на всё приложение, слева от заголовка */
/* заявка 501: та же высота, что у полосы вкладок (38px пункта + 4px полей сверху
   и снизу) — они стоят в одной строке и должны смотреться одной линией */
.backbtn{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:8px 14px 8px 11px;
  border-radius:12px;background:var(--panel);color:var(--muted);font-weight:600;font-size:13.5px;
  white-space:nowrap}
.backbtn:hover{color:var(--ink)}
/* заявка 1049: та же кнопка справа в строке — выход, а не шаг назад: стрелки нет */
.backbtn.xclose::before{display:none}
/* заявка 671: «←» текстом падал в системный шрифт (в гугловском Manrope нет U+2190) и
   на Windows стоял ниже подписи. Стрелка — svg-маска цветом текста, центр держит flex */
.backbtn::before{content:"";flex:0 0 auto;width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}
/* заявка 324: колонка «№» — по содержимому и не тянется; 56px хватает на «000» с полями.
   Заявка 924: тот же класс во всех списках документов, 56px вмещает четыре цифры */
/* заявка 1185: служебные колонки слева — минимальной ширины: галочка, номер, дата
   и время не должны отодвигать данные, ради которых лист и открывают */
th.col-num{width:42px;min-width:42px;max-width:42px;white-space:nowrap}
th.bulk-c,td.bulk-c{width:28px;min-width:28px;max-width:28px;padding-left:6px;padding-right:2px}
.bulk-c input[type=checkbox]{width:15px;height:15px;min-height:0}
/* заявка 368: колонка времени по содержимому — «19:24» и не шире; ширину не тянут */
th.col-time{width:64px;min-width:64px;max-width:64px}
/* та же ширина в обычных таблицах (смены, ПКО, X-отчёт): там ширину не тянут мышью,
   но автораскладка всё равно раздувала колонку под заголовок */
th[data-c="time"]{width:64px;min-width:64px;max-width:64px}
th.col-time,th[data-c="time"],td[data-c="time"]{white-space:nowrap}
/* заявка 308: разрыв строки после кнопки возврата — заголовок всегда с новой строки */
.pagehead .phbr,.st-head .phbr{flex:1 0 100%;height:0;margin:0}
/* заявка 1050: разрыв строки только для телефона (на широком экране шапка одной строкой) */
.pagehead>.phbr.phbr-sm{display:none}
/* заявка 968: в чеке кипера «Назад» стоит в строке с названием стола, без переноса */
.pagehead.bkinline>.phbr{display:none}
.pagehead.bkinline>.backslot{margin-right:6px}
.backbtn span{font-size:15px;line-height:1}

/* карточки и сетки */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
/* заявка 1047: карточка справочника должна влезать в экран без прокрутки. На широком
   экране (мышь) поля ниже и плотнее; на телефоне и планшете рост полей держит палец —
   там всё как было. Раздел берётся из data-sec на body */
@media(min-width:1100px){
  body[data-sec="refs"] .card{padding:12px}
  body[data-sec="refs"] .card .field{margin-bottom:8px}
  body[data-sec="refs"] .card h2{margin-bottom:8px}
  body[data-sec="refs"] .card input:not([type=checkbox]):not([type=radio]),
  body[data-sec="refs"] .card select,
  body[data-sec="refs"] .card textarea{min-height:34px;padding:5px 10px;font-size:14px}
  /* у select своя внутренняя высота: min-height его не ужимает (WebKit) */
  body[data-sec="refs"] .card select:not([multiple]){height:34px}
  body[data-sec="refs"] .card td,body[data-sec="refs"] .card th{padding-top:5px;padding-bottom:5px}
  body[data-sec="refs"] .card .frowmb,
  body[data-sec="company"] .card .frowmb{margin-bottom:8px}
  body[data-sec="refs"] .card label{margin-bottom:2px}
  body[data-sec="refs"] .card h2 .btn{min-height:32px;padding:5px 12px}
  body[data-sec="refs"] .card{margin-bottom:10px}
  body[data-sec="refs"] .istats .stat{padding:11px 14px}
  /* нижний воздух страницы держит место под панель разделов — на широком экране
     панели нет, и он только выталкивал карточку за край */
  body[data-sec="refs"] .wrap{padding-bottom:20px}
}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:16px}
.stat{background:var(--card);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px 20px;position:relative}
.stat .ico{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center}
.stat .ico svg{width:18px;height:18px}
.stat .foot{margin:14px -20px -18px;margin-top:auto;padding:9px 20px;border-top:1px solid var(--line);
  background:#FCFCFC;border-radius:0 0 var(--r) var(--r);display:flex;justify-content:space-between;
  align-items:center;font-size:12.5px;font-weight:600;color:var(--muted)}
.stat .foot .go{width:25px;height:25px;border-radius:99px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink)}
.stat .foot .go svg{width:11px;height:11px}
a.stat{display:flex;flex-direction:column}
a.stat:hover .foot{color:var(--ink)}
.stat .v{padding-bottom:12px}

/* заявка 396: итог по отобранным платежам — строкой над списком, а не тремя плитками:
   на телефоне плитки отодвигали сам список за нижний край экрана */
.totbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:12px;
  padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);font-size:13.5px;color:var(--muted)}
.totbar b{color:var(--ink);font-weight:700}
/* заявка 1351: итог больше не уезжает в правый угол монитора — он стоит сразу за
   «Итого по фильтру», рядом с числом документов, а не в полутора метрах от него */
.totbar .net b{font-size:16px}
.totbar .neg{color:var(--red)}
.totbar .th{display:flex;align-items:baseline;gap:10px}
/* Заявка 409: на телефоне перенос раскидывал пары «подпись — число» по строкам как попало,
   а «сальдо» уезжало вправо отдельной строкой. Столбцом ровнее: каждая пара на своей
   строке, подпись слева, число справа, итог отделён чертой. */
@media(max-width:700px){
  .totbar{display:grid;gap:7px;padding:12px 14px}
  .totbar > *{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .totbar .net{border-top:1px solid var(--line);padding-top:9px}
}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border-radius:99px;
  padding:7px 16px;font-size:13px;font-weight:600}
.chip .dot{width:8px;height:8px;border-radius:99px;background:var(--accent)}
.stat .v{font-size:24px;font-weight:700;margin-top:5px;letter-spacing:-.02em}
.stat .l{font-size:13px;font-weight:500;color:var(--muted)}
/* Выделенная метрика — тот же приём, но в НАШИХ цветах. Тёмно-синий #202938 с
   салатовым #BFFF6B не встречались больше нигде в продукте: на восьми экранах
   подряд это читалось как вставка из чужой системы. Тёмный фон — наш --dark,
   число — фирменный оранжевый (5.16:1), рост — зелёный из общей палитры. */
.stat.hi{background:var(--dark);color:#fff;border-color:var(--dark)}
.stat.hi .l{color:rgba(255,255,255,.62)}
.stat.hi .v{color:var(--accent)}
.stat.hi .sub{color:rgba(255,255,255,.6)}
.stat.hi .sub .pos{color:#4ADE80}
.grid2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* заявка 451: в одну колонку она должна ещё и УЖИМАТЬСЯ. Голый 1fr имеет минимум по
   содержимому: широкая таблица внутри распирала колонку, а с ней и страницу — телефон
   отзумливал экран и нижняя панель уезжала с низа */
@media(max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}

/* таблицы */
/* Одна прокрутка на страницу (Арс, 20.08: «две полоски справа очень бесят»). Раньше
   список ездил в своём окошке высотой в экран, и рядом с полосой браузера была вторая.
   Теперь список тянется вниз, а вбок контейнер ездит, только если таблица реально не
   влезла — класс has-x ставит sort.js по факту ширины. Пока его нет, у контейнера нет
   прокрутки вовсе, и липкая шапка считается от окна, а не от него. */
.tscroll{overflow:visible}
/* Заявка 1184: лист, который не влез по ширине, прокручивается вбок — и контейнер
   становится прокруткой по обеим осям, поэтому шапка липла к нему, а не к окну, и при
   прокрутке страницы уезжала вверх. Отдаём контейнеру и вертикаль: список листается
   внутри рамки, а заголовки стоят на месте. (overflow-y:clip тут не годится — Safari
   откатывает его в hidden, и получается та же прокрутка.) */
.tscroll.has-x{overflow-x:auto}
/* ...но только у складских листов (data-resizable): там колонки тянут, лист длинный
   и шапка нужна перед глазами. У прочих списков (чеки смены) панель массовых действий
   считает место по странице, и внутренняя прокрутка ломала бы ей расчёт */
.tscroll.has-x:has(table[data-resizable]){overflow:auto;max-height:calc(100vh - 190px)}
/* Правило Арса о ширине таблиц, окончательное (заявки 1246 → 1302 → 1309):
     · плашка во ВСЮ страницу — таблица по содержимому и прижата влево: растянутая на
       полтора метра монитора, она разносит подпись и число по разным краям экрана;
     · плашка в ПОЛОВИНУ страницы (двухколоночные сетки — карточка гостя, дашборд) —
       таблица занимает её целиком: иначе половина тела плашки пустует.
   Первые две правки читали это правило наоборот; здесь оно записано так, как Арс
   сформулировал его сам в заявке 1309. */
table{width:auto;max-width:100%;border-collapse:collapse;font-size:13px}  /* заявка 518 */
.grid2 table,.refsplit table{width:100%}
/* Состав документа и сетка прайса — колонки делят ширину карточки, как было.
   Таблицы с перетягиваемыми колонками (data-resizable: остатки, платежи, заказы) тоже:
   ширину колонок там задаёт человек и запоминает браузер, а «по содержимому» ломало бы
   его настройку при каждой перерисовке. Образец «Остатков», на который ссылался Арс, —
   как раз такая таблица. */
#lines,#edlines,#invlines,#plGrid{width:100%}
/* Перетягивание колонок само выставляет таблице ширину суммой колонок (sort.js,
   wh_resize.js) — общий max-width её бы обрезал, и растянутая колонка после
   перезагрузки схлопывалась обратно (заявка 198 наоборот). */
table[data-resizable]{width:100%;max-width:none}
/* колонки уже тянули руками — таблица снова живёт на всю ширину, как до правки 1246:
   ширины считает sort.js от неё, и «по содержимому» ломало бы сохранённую настройку */
table[data-cw-fixed]{width:100%;max-width:none}
/* шапка таблицы остаётся видной при прокрутке длинных списков (остатки, обороты, товары).
   64px — высота липкого топбара, иначе заголовки уезжают под него. */
th{font-size:11.5px;text-transform:none;color:var(--muted);font-weight:700;text-align:left;
  padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:var(--th-top,0);z-index:5;background:#fff;
  box-shadow:inset 0 -1px 0 var(--line)}
/* контейнер сам стал прокруткой — шапка липнет к его верху, отступ под топбар лишний */
.tscroll.has-x th{top:0}
/* заявка 1406: под липкой строкой действий пачкой (bulk.js меряет её в --bulk-h) */
body:has(.bulkbar) th{top:calc(var(--th-top,0px) + var(--bulk-h,0px))}
body:has(.bulkbar) .tscroll.has-x th{top:0}
.card th{background:#fff}
table[data-nosticky] th{position:relative;top:auto}
/* заявка 1010: прайс-лист длинный, и подписи колонок (поставщики) нужны на любой строке.
   Рамка прокручивается сама — шапка липнет к её верху, а не уезжает вместе со страницей */
.plwrap{max-height:calc(100vh - 240px);overflow:auto}
.plwrap table[data-nosticky] th{position:sticky;top:0;z-index:6}
@media(max-width:700px){.plwrap{max-height:calc(100vh - 210px)}}  /* relative, не static: ручкам .c-grip нужен позиционированный th, иначе они съезжают к краю страницы и дают 3px горизонтальной прокрутки */
td{padding:5px 10px;border-bottom:1px solid var(--line);vertical-align:middle}  /* заявки 518/522 */
tr:last-child td{border-bottom:0}
tr.rowlink{cursor:pointer}
tr.rowlink:hover{background:#F3F4F6}
/* заявка 668: строку под курсором видно целиком в любом листе, не только в кликабельных */
.wrap table tr:hover>td{background:#F3F4F6}
/* заявка 559: галочка статуса — по одной оси с подписью, строка компактная и
   прижата к названию документа */
/* заявка 1017: правило было привязано к inline-стилю order:9, который снят в 1005, —
   и подпись «Проведено»/«Ожидание» перестала стоять по одной оси с галочкой */
.pagehead form.postchk,.pagehead span.postchk{margin-top:0}
.pagehead form.postchk label.chk,.pagehead span.postchk label.chk{display:inline-flex;align-items:center;gap:7px;
  min-height:0;margin:0;font-size:13.5px;line-height:1}
.pagehead form.postchk input[type=checkbox],.pagehead span.postchk input[type=checkbox]{margin:0;flex:none}
/* заявка 542: в матрице ДДС строка под курсором подсвечивается слабым оранжевым —
   глаз ведёт статью до её цифр в правых колонках */
/* заявка 554: подсветка строк раздела «Деньги»; заявка 562 — серым, как у техкарт,
   оранжевая остаётся только у матрицы ДДС и P&L */
.cf-matrix tr:hover td{background:rgba(245,111,16,.09)}
.money-hl tr:hover td{background:#FAFAFB}
td.r,th.r{text-align:right}
.pos{color:var(--green);font-weight:700}
.neg{color:var(--red);font-weight:700}

/* кнопки — пять порядков (заявка 992). Порядок = вес действия, а не место на экране:
   1-й .btn                — оранжевая заливка. Сохранить или создать. На листе одна,
                             две только в паре «Сохранить + Создать».
   2-й .btn.ghost.mark     — оранжевый текст и рамка. Важное действие: рассчитать стол,
                             перенести стол, провести, оплатить, открыть/закрыть смену.
   3-й .btn.ghost.ink      — чёрная рамка. Следующие по важности: Найти, Показать,
                             второй путь к тому же документу (скан-приёмка).
   4-й .btn.ghost          — тонкая серая рамка. Опции: Excel, Фильтр, панель выделения.
   5-й .btn.danger.sm      — красный контур, при наведении бледная заливка. Удаление.
                             Сплошной красный .btn.danger — только в окне подтверждения.
   Вне порядков: кнопки-состояния (.btn.ghost.sel, вкладки, чипы — мягкая заливка без
   рамки) и вспомогательные значки (.xbtn: крестик, плюс, карандаш, шестерёнка).
   Лестница — про офис и кипер. Кабинет гостя (/lk, /lk2: fx-btn, pk-btn, v2-btn,
   bk-btn) живёт по своим кнопкам и под неё не переделывается (решение Вовы 09.09). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-btn);
  color:#fff;font-weight:600;border:0;border-radius:10px;padding:10px 18px;min-height:42px;font-size:14px}
.btn:hover{background:#D45C06}
.btn:active{background:#F56F10}
.btn:disabled{background:#E4E1DC;color:#8A8F98;cursor:default;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:#c9ccd1;background:#FAFAFB}
.btn.danger{background:var(--red)}
/* заявка 164: «Удалить» в строке листа — не главное действие экрана, сплошной красный
   перетягивал взгляд с самих данных. Крупные .btn.danger (в формах и модалках) громкие
   по-прежнему, как и «Удалить» в панели массовых действий — там это и есть действие */
/* Крестик закрытия — вместо слова «Закрыть» в шапках окон. Иконка, а не текст: подпись
   занимала полстроки в каждом окне. Размер держим 44×44 под палец, имя действия остаётся
   в aria-label — экранный диктор и подсказка читают его как раньше. */
.xbtn{width:44px;height:44px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  border-radius:12px;color:var(--accent);display:inline-flex;align-items:center;
  justify-content:center;flex:none;transition:background .16s cubic-bezier(.23,1,.32,1)}
.xbtn svg{width:18px;height:18px}
.xbtn:hover{background:var(--accent-soft)}
.xbtn:active{transform:scale(.94)}
/* заявка 515: плюс в пустой строке состава — открывает окно справочника */
.xbtn.plus{width:30px;height:30px;min-height:30px;border-radius:8px}
/* Заявка 519: формы состава плотнее — ряды ниже, поля компактнее (это десктопные
   формы управления; кассовые экраны кипера этот блок не трогает) */
#lines td,#edlines td,#invlines td,#plGrid td{padding:3px 6px;vertical-align:middle}
/* заявка 552: плюс пустой строки стоял выше соседних полей */
#lines .xbtn.plus,#edlines .xbtn.plus,#invlines .xbtn.plus,#plGrid .xbtn.plus{vertical-align:middle}
/* Заявка 565: колонка № — по центру. Правое выравнивание «гуляло»: центр цифры
   зависел от её ширины, и плюс пустой строки стоял мимо цифр */
#lines td.rownum,#edlines td.rownum,#invlines td.rownum,#plGrid td.rownum{text-align:center}
#lines tr:first-child th:first-child,#edlines tr:first-child th:first-child,#plGrid tr:first-child th:first-child{text-align:center}
/* заявка 574: пустая строка живёт всегда — крестик удаления у неё спрятан
   (появится, как только строку займут и плюс сменится номером) */
#lines tr:has(.plus) .xbtn.del,#edlines tr:has(.plus) .xbtn.del,#invlines tr:has(.plus) .xbtn.del,#plGrid tr:has(.plus) .xbtn.del{display:none}
/* пустая строка дышит — не липнет к разделительной линии */
#lines tr:has(.plus) td,#edlines tr:has(.plus) td,#invlines tr:has(.plus) td,#plGrid tr:has(.plus) td{
  padding-top:9px;padding-bottom:8px}
/* заявка 1130: поля в строке были 13.5px, а текст соседних колонок 13px (font-size
   таблицы) — колонки выглядели набранными разным шрифтом. Один размер на всю строку */
#lines input,#edlines input,#invlines input,#plGrid input,
/* заявка 1095: селект ставки НДС был на 20px выше соседних полей строки */
#lines td select,#edlines td select,#invlines td select,#plGrid td select{
  min-height:32px;height:32px;padding:4px 8px;font-size:13px}
#lines .xbtn.del,#edlines .xbtn.del,#invlines .xbtn.del,#plGrid .xbtn.del{width:30px;height:30px;min-height:30px}
.rownum{cursor:pointer;user-select:none;white-space:nowrap}
tr.rowsel td{background:var(--accent-soft, #FCE5D4)}
td.rownum:hover{color:var(--accent)}
/* заявка 588: стрелки количества гостей видны всегда, а не по наведению;
   прокрутка колесиком отключена (onwheel=blur) — случайный скролл цифру не крутит */
.covers-inp::-webkit-inner-spin-button{opacity:1}
/* заявка 520: меню строки на номере */
.rowmenu-box{position:absolute;z-index:230;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px -8px rgba(0,0,0,.25);padding:4px;min-width:160px;
  display:flex;flex-direction:column}
.rowmenu-box button{border:0;background:none;font:inherit;font-size:13.5px;text-align:left;
  padding:8px 12px;border-radius:7px;cursor:pointer}
.rowmenu-box button:hover{background:var(--bg)}
.rowmenu-box button.danger{color:var(--red)}
/* Заявка 405: удаление в строке списка — тот же крестик, только красный. Слово «Удалить»
   в каждой строке съедало ширину и кричало громче самой строки; иконка занимает место
   одного значка, а имя действия остаётся в aria-label и подсказке. В панели массовых
   действий слово остаётся: там это единственное действие, и оно должно называться. */
.xbtn.del{color:var(--red)}
.xbtn.del:hover{background:var(--red-soft)}
/* индикатор обновления протяжкой (заявка 379): виден только в приложении с домашнего
   экрана — в браузере жест системный */
/* подсказка с итогом выражения в поле суммы (заявка 380) */
/* заявка 714: кружок «i» перед подписью поля — пояснение живёт в title, всплывает при наведении */
.ihelp{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-right:5px;
  border:1px solid var(--muted);border-radius:50%;font:italic 700 10px/1 Georgia,serif;color:var(--muted);
  cursor:help;vertical-align:-1px}
.ihelp:hover{border-color:var(--accent);color:var(--accent)}
.calcsum-hint{margin-top:4px;font-weight:700;color:var(--accent-dark)}
/* ряд знаков под полем суммы: на телефоне числовая клавиатура их не даёт (заявка 382) */
.calcsum-keys{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.calcsum-keys .cat-chip{min-width:44px;min-height:44px;font-size:17px;padding:0 10px}
@media(min-width:701px){.calcsum-keys{display:none}}
.pullbar{position:fixed;left:0;right:0;top:0;z-index:400;height:0;display:flex;
  justify-content:center;pointer-events:none;opacity:0;transition:opacity .15s}
.pullbar.on{opacity:1}
.pullbar__i{width:30px;height:30px;margin-top:8px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-lg);position:relative}
.pullbar__i::before{content:'';position:absolute;inset:8px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent)}
.pullbar.ready .pullbar__i::before{border-color:var(--accent)}
.pullbar.go .pullbar__i::before{animation:pullspin .7s linear infinite}
@keyframes pullspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pullbar.go .pullbar__i::before{animation-duration:2s}}
@media(prefers-reduced-motion:reduce){.xbtn{transition-duration:.01ms}}
/* Заявка 390: тихая кнопка, которую всё же надо найти глазами («Сохранить шапку»
   в документе). Не заливаем — главное действие на экране одно, — а обводим тем же
   цветом, что у главной кнопки: видно сразу, но иерархия не ломается. */
.btn.ghost.mark{border-color:var(--accent);color:var(--accent-dark);font-weight:700}
.btn.ghost.ink{border-color:var(--ink)}  /* заявка 974: тёмная рамка — второе по весу действие */
/* заявка 694: при наведении заливка должна читаться, а не угадываться —
   тон гуще бледной плашки, обводка темнее */
.btn.ghost.mark:hover{background:#F9D3B8;border-color:var(--accent-dark)}
/* заявка 693: выбранный фильтр номенклатуры («выбрано: 3 ×») — залитая плашка, а не
   кнопка-действие: с обводкой он сливался с «Найти» */
.btn.ghost.sel{background:var(--accent-soft);border-color:transparent;color:var(--accent-dark);font-weight:700}
.btn.ghost.sel:hover{border-color:var(--accent)}
.btn.danger.sm{background:#fff;color:var(--red);border:1px solid #EDBFBC}
.btn.danger.sm:hover{background:var(--red-soft);border-color:var(--red)}
/* заявка 351: «Удалить» в панели выделения выглядит так же, как везде — тонкий красный
   контур и красные буквы (эталон: карточка гостя). Сплошная заливка была здесь
   единственным исключением на всю систему, и оно читалось как чужая кнопка */
.btn.sm{min-height:44px;padding:8px 14px;font-size:13.5px;border-radius:9px}
/* Заявка 488: возврат «К списку заказов» и «К сменам» — заметной обведённой кнопкой,
   как вкладка «Написать» в форме «Баг»: та же высота, скругление и акцентная рамка */
.backbig{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:8px 18px;border:1px solid var(--accent);border-radius:12px;background:var(--bg);
  color:var(--accent);font-size:14px;font-weight:700}
.backbig:hover{background:var(--accent-soft, #FFF3EA)}
.btn.big{min-height:54px;font-size:16px;width:100%}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600}
.badge.gray{background:#ECEDEF;color:var(--muted)}
.badge.orange{background:var(--accent-soft);color:var(--accent-dark)}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.red{background:var(--red-soft);color:var(--red)}
/* заявка 1042: статус документа занимает одно и то же место при любой подписи —
   ширина по самой длинной («Проведено»/«Отправлен»), чтобы галочки не прыгали */
.badge.opst{min-width:88px;text-align:center}
/* заявка 1186: «Черновик» — подпись под названием документа, а не плашка в строке.
   Живёт внутри заголовка и абсолютом висит под ним: строка шапки от неё не растёт */
h1 .draftmark{position:absolute;left:0;top:100%;margin-top:1px;font-size:11px;font-weight:700;
  color:var(--muted);letter-spacing:.02em;line-height:1}
.pagehead > h1{position:relative}
/* заявка 1123: свой статус документа — плашкой своего цвета, ростом с кнопки шапки.
   Заявка 1175: по нажатию раскрывается белое меню со списком статусов (у каждого своя
   цветная метка), последней строкой — «Настроить…» */
.opst-f{display:inline-flex;margin:0}
.stmenu > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:6px 10px;font-size:13.5px;font-weight:600}
/* заявка 1197: статусов этого вида ещё нет — кнопка белая, в меню одна строка
   «Настроить статусы». Место под статус занято, и видно, что его можно завести */
.badge.opst.none{background:#fff;border:1px solid var(--line);color:var(--muted)}
.stmenu > summary::-webkit-details-marker{display:none}
.stmenu > summary svg{width:13px;height:13px;opacity:.65}
.stopts{min-width:190px;padding:6px}
.stopt{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer;
  text-align:left;text-decoration:none;min-height:0}
.stopt:hover{background:var(--panel)}
.stopt.stcfg{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:6px;
  padding-top:10px;color:var(--muted)}
.stdot{width:14px;height:14px;border-radius:4px;flex:none}
.stdot.gray{background:#E6E7EA}.stdot.orange{background:#F9A870}
.stdot.green{background:var(--green)}.stdot.lime{background:#A8D66A}
.stdot.red{background:#F08A8A}.stdot.blue{background:#7FA6F2}
.stdot.violet{background:#B79BEC}.stdot.yellow{background:#F2D177}
.stdot.teal{background:#7FCFCF}
/* заявка 1050: на телефоне галочки стоят своей строкой, держать ширину статуса
   незачем — а лишние 25px не давали ему встать в строку с датой */
@media(max-width:700px){.badge.opst{min-width:0}}

/* формы в строку */
.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.frow .field{margin-bottom:0;flex:1;min-width:130px}
.frow .field:has(> input[type=datetime-local]){min-width:215px}  /* поле даты не сжимается уже своего input — на iPad 768 в ДДС-корректировках оно вылезало за экран на 34px */
.frow .field.wide{flex:2;min-width:200px}
/* Заявка 471: строка фильтров одинаковая на всех листах. Ширины держит класс `filters`
   на форме, а не инлайн-стиль в каждом шаблоне: Закупки и Продажи разъехались именно
   так — структура одна, цифры разные. Новому листу хватает слова `filters` */
/* Заявка 1208: карточки «Деньги» — новый платёж, перевод, корректировка. «Отмена»
   висела в заголовке через float:right и подпирала поля справа: «Сумма» и «Комментарий»
   вставали на 8px ниже соседей, кнопка налезала на их строку. Кнопка переехала в конец
   формы, рядом с кнопкой действия, а поля выбора больше не растягиваются во всю ширину —
   перевод это два счёта и сумма, столько места им не нужно. На телефоне поля во всю
   ширину, как были: там ужимать нечего. */
/* Селект в WebKit выше поля ввода на 8px (своя внутренняя высота под стрелку), а строка
   выровнена по низу — из-за этого подписи «Сумма» и «Комментарий» стояли ступенькой ниже
   «Откуда» и «Куда». Ровняем высоту прямо здесь, в этих трёх формах. */
.opform .field select,.opform .field input{height:44px}
/* заявка 1229: системный селект WebKit рисует себя сам — серая заливка, свой отступ,
   своя высота строки: рядом с белыми полями он читался выше, а текст в нём стоял ниже
   соседей. Рисуем селект сами, как в шапке документа (заявка 927): та же рамка, тот же
   отступ, стрелка справа — строка встаёт в линию */
/* заявка 1229: под полем суммы на телефоне стоит ряд знаков калькулятора (заявка 386).
   В строке из двух полей он разваливал пару: сумма уезжала вверх, дата вниз. Поле
   с калькулятором занимает всю строку — знаки встают под ним, а не между полями */
@media(max-width:700px){.opform .field:has(> input.calcsum){flex:1 0 100%;max-width:none}}
.opform .field select{-webkit-appearance:none;appearance:none;padding-right:30px;
  background:#fff no-repeat right 10px center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236D717F' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E")}
/* кнопка действия и «Отмена» — одной парой: на телефоне «Отмена» иначе срывается
   на свою строку, а просили их рядом */
/* заявка 1344: комментарий в окне платежа занимает всю ширину и живёт в поле на две
   строки — высота полей формы (44/38px) для него не правило, это не однострочник */
.opform .field.cmtwide{flex:1 0 100%;max-width:none}
.opform .field.cmtwide textarea{width:100%;box-sizing:border-box;min-height:62px;
  font:inherit;font-size:14px;padding:8px 10px;resize:vertical}
.opbtns{display:flex;gap:10px;flex:none}
@media(min-width:701px){
  .opform .field{max-width:230px}
  .opform .field.wide{max-width:none}
  .opform .field.amt{max-width:140px}
  /* заявка 1229: мышью хватает 38px, форма перестаёт быть выше таблицы под ней.
     На телефоне высота остаётся 44px — это палец, ужимать нельзя */
  .opform .field select,.opform .field input{height:38px;min-height:38px}
  .opform .opbtns .btn{height:38px;min-height:38px}
}
.frow.filters .field{max-width:200px}
.frow.filters .field.cp{max-width:230px}        /* контрагент: имена длиннее селекта */
.frow.filters .field.wide{max-width:none}       /* поиск тянется на весь остаток */
.frow .btn{flex-shrink:0}

/* кипер: зал */
.hall{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tablecard{border-radius:16px;padding:18px 16px;min-height:118px;display:flex;flex-direction:column;
  justify-content:space-between;border:2px solid transparent;transition:transform .12s}
.tablecard:active{transform:scale(.97)}
.tablecard.free{background:var(--green-soft);border-color:#CDE8D8;color:var(--green)}
.tablecard.busy{background:#fff;border-color:var(--accent);box-shadow:var(--shadow)}
.tablecard .tname{font-weight:800;font-size:17px;color:var(--ink)}
.tablecard .tinfo{font-size:13px;font-weight:600}
.tablecard.busy .tinfo{color:var(--accent-dark)}
.tablecard.free .tinfo{color:var(--green)}

/* кипер: зал в две колонки на широких */
.hallgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){.hallgrid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}}
.leg{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--muted)}
.leg .d{width:10px;height:10px;border-radius:99px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* кипер: чипы категорий меню (Coca) */
/* одной строкой с прокруткой: десять групп в две строки съедали экран планшета,
   а карточки товара уезжали под сгиб */
/* заявка 1321: поиск по меню и рейка разделов стояли вплотную */
.pos-menu > .mb{margin-bottom:12px}
.cat-chips{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips>*{flex:none}
.cat-chip{border:1px solid var(--line);background:#fff;border-radius:40px;padding:10px 20px;
  font-weight:600;font-size:14px;min-height:44px;color:var(--muted)}
.cat-chip:active{transform:scale(.97)}
.cat-chip.on{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;
  box-shadow:0 0 0 4px rgba(245,111,16,.18)}

/* кипер: заказ */
.pos-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
/* именно minmax(0,…): при 1fr колонка растягивается под самый широкий неразрывный
   элемент — строка чипов в одну линию утаскивала всю страницу вбок */
@media(max-width:700px){.pos-grid{grid-template-columns:minmax(0,1fr)}}
/* ТЕЛЕФОН: меню и чек — два экрана с переключателем, а не одна простыня.
   Кассир видел меню, а итог и «Наличные» лежали под сорока кнопками — до оплаты
   приходилось прокручивать весь ассортимент. */
.pos-mtabs{display:none}
@media(max-width:700px){
  /* полосу тянем во всю ширину рабочей области и красим фоном страницы: иначе из-под
     липкого переключателя выглядывали строки чека, уезжающие вверх */
  .pos-mtabs{display:flex;gap:6px;position:sticky;top:0;z-index:40;
    margin:0 -12px 12px;padding:12px 12px 12px;background:#F4F5F7}
  .pos-mtabs button{flex:1;min-height:44px;border:0;background:var(--panel);border-radius:11px;
    font:inherit;font-weight:700;font-size:14px;color:var(--muted)}
  .pos-mtabs button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
  .pos-grid.m-menu .pos-check,
  .pos-grid.m-check .pos-menu{display:none}
  .pos-grid #posResizer{display:none}
  /* место под полосу итога и нижнее меню, иначе последняя кнопка меню под ними */
  .pos-grid.m-menu{padding-bottom:64px}
  /* итог и оплата — липкой подошвой над нижним меню: до правки «Наличные» лежали
     под всеми позициями чека, и на длинном чеке до них надо было доскроллить */
  /* подошва не должна съедать экран: на 402×714 она занимала треть, и от списка
     позиций оставалась полоска. Кнопки оплаты — в ряд, итог компактнее */
  .pos-grid.m-check .pos-check__foot .paybtns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos-grid.m-check .pos-check__foot .total-row{padding:8px 0 2px;font-size:18px}
  .pos-grid.m-check .pos-check__foot .btn{min-height:46px}
  /* Заявка 346: sticky-подошва прилипала к низу и накрывала начало списка — при заходе
     в чек не было видно ни одной позиции, хотя они там были. Теперь подошва висит
     отдельной полосой над нижним меню (как полоса итога в меню), а список получает
     под неё запас снизу и больше ни подо что не заезжает. */
  .pos-grid.m-check .pos-check__foot{position:fixed;left:8px;right:8px;
    bottom:calc(72px + env(safe-area-inset-bottom));z-index:70;margin:0;
    background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;
    padding:10px 16px;box-shadow:0 8px 26px -10px rgba(0,0,0,.35)}
  .pos-grid.m-check .pos-check__body{padding-bottom:8px}
  /* запас = высота полосы (итог + ряд кнопок) плюс само нижнее меню */
  .pos-grid.m-check{padding-bottom:200px}
}
/* полоса итога над нижним меню: одно нажатие — и кассир в чеке */
/* заявка 1024: на телефоне «Сохранить» и «Отменить» — закреплённой полосой у низа,
   как «Итого» в кипере: команда к документу всегда под большим пальцем, а не в шапке,
   до которой из середины длинного состава надо листать. Дубли этих кнопок в шапке и
   под составом на телефоне прячем — иначе их три штуки на экран */
.docbar{display:none}
@media(max-width:700px){
  .docbar{display:flex;gap:8px;position:fixed;left:8px;right:8px;
    bottom:calc(64px + max(8px, env(safe-area-inset-bottom)));z-index:70;
    padding:8px;border-radius:16px;background:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.35)}
  .docbar .btn{flex:1;min-height:46px}
  .docbar .btn.ghost{flex:0 0 40%}
  /* дубли: «Сохранить»/«Закрыть» в шапке и «Сохранить состав» под таблицей */
  .pagehead.docph .headbtns>.btn:not(.ghost),
  .opedt:checked~.pagehead.docph .headbtns>a.btn.ghost{display:none}
  .opedt:checked~* .opsave{display:none}
  /* форма нового документа: её «Сохранить» тоже переехал в полосу (1024) */
  /* заявка 1051: прятать надо дубли «Сохранить», а не выход — из карточки документа
     на телефоне было не выйти. «Закрыть» (ghost) остаётся в шапке */
  body:has(.docbar) .pagehead>.headbtns>.btn:not(.ghost){display:none}
  /* «Отмена» сверху — тот же выход, что «Отменить» в полосе; на телефоне оставляем один */
  body:has(.docbar) .pagehead>.backslot{display:none}
  /* место под полосу, чтобы она не накрывала последнюю строку состава */
  body:has(.docbar:not([hidden])) .wrap{padding-bottom:96px}
  .pagehead.docph>.headbtns>.hbgap{display:none}
}
/* заявка 1031: подпись раскрывающей кнопки меняется на «Отмена», пока строки открыты */
.tsum>span+span{display:none}
details[open]>.tsum>span:first-child{display:none}
details[open]>.tsum>span+span{display:inline}
/* заявка 1030: список групп меню с перетаскиванием — в «Справочник → Меню» */
.mgcard .mgrow{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.mgcard .mgrow:last-of-type{border-bottom:0}
.mgcard .mgh{cursor:grab;color:var(--muted);font-size:15px;letter-spacing:-3px;user-select:none}
.mgcard .mgn{flex:0 0 240px;font-weight:600;font-size:13.5px}
.mgcard .mgrow input{flex:1;max-width:280px;min-height:34px;padding:5px 9px;font-size:13.5px}
/* шапка двух подписей: сами колонки задаёт .mgrow, ручка держит отступ слева */
.mgcard .mghead{border-bottom:0;padding-bottom:0}
.mgcard .mghead .sub{flex:1;max-width:280px}
/* заявка 1034: заметка к чеку — почему он такой. Поле неширокое, но на всю карточку:
   пишут туда фразу, а не абзац */
.ordmemo textarea{width:100%;min-height:44px;font-size:13px;padding:7px 9px;resize:vertical}
/* заявка 1401: кнопка и подсказка сразу под полем — воздуха между ними было больше,
   чем самой заметки */
.ordmemo{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ordmemo > label,.ordmemo > textarea{flex:1 0 100%}
.ordmemo > .btn{margin:0}
.memohint{font-size:12px}
/* заявка 1035: вкусовой профиль гостя — под узкой полосой во всю ширину. Пока её не
   нажали, полоска чека не растёт: на экране продаж каждая сотня пикселей сверху
   отнимается у меню */
.gtaste{margin-top:6px}
.gtaste>summary{display:flex;align-items:center;gap:6px;min-height:26px;padding:3px 9px;
  font-size:12px;font-weight:600;color:var(--muted);background:#F7F8FA;border-radius:8px;
  cursor:pointer;list-style:none}
.gtaste>summary::-webkit-details-marker{display:none}
.gtaste>summary:hover{color:var(--ink)}
.gtaste .gt-arr{margin-left:auto;font-size:10px;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.gtaste[open] .gt-arr{transform:rotate(180deg)}
.gtaste .note,.gtaste .favs{margin-top:6px}
/* заявки 1037/1039: на телефоне экран чека дышал слишком широко — воздух между
   шапкой, карточкой гостя, переключателем и списком съедал строки меню. Поля ужаты,
   «чел» встало в строку с балансом компактным полем */
.covers-f{display:inline-flex;align-items:center;gap:3px;margin:0}
.covers-f span{font-size:12.5px;color:var(--muted)}
.covers-inp{width:36px;min-height:28px;padding:2px 3px;text-align:center;
  border:1px solid var(--accent);font-size:13px}
/* заявка 1114: стрелки у числа гостей — те же qtybtn, что у позиций чека, только мелкие.
   Слово «чел» на телефоне снято (.nomob): между «−» и «+» число и так читается, а строка
   с именем и «Сменить» иначе не помещается и ломается пополам */
.qtybtn.cov{width:24px;height:24px;min-height:24px;border-radius:7px;font-size:15px}
/* «Сменить гостя» — два слова двумя элементами (второе прячется на телефоне), и
   межэлементный зазор кнопки должен читаться обычным пробелом, а не двойным */
.gbar .btn{gap:4px}
.covers-inp::-webkit-outer-spin-button,.covers-inp::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
@media(max-width:700px){
  .pos-wrap{padding-top:10px;padding-bottom:10px}
  .pos-wrap>.pagehead{margin-bottom:10px}
  .gbar{padding:8px 12px;margin-bottom:8px}
  .gbar__row{gap:6px 10px}
  /* «чел» — сразу за именем, «Сменить гостя» остаётся крайним справа: у кнопки
     order:-1 из правила ниже, поэтому и полю нужен тот же order (DOM решает) */
  .gbar__row>.covers-f{order:-1}
  .pos-mtabs{margin-bottom:8px;padding:8px 12px}
  .pos-check{padding:12px}
}
.cartbar{display:none}
@media(max-width:700px){
  .cartbar{display:flex;align-items:center;gap:10px;position:fixed;left:8px;right:8px;
    bottom:calc(72px + env(safe-area-inset-bottom));z-index:70;min-height:44px;padding:6px 14px;
    border:0;border-radius:14px;background:var(--accent-btn);color:#fff;font:inherit;
    box-shadow:0 10px 26px -8px rgba(0,0,0,.45);text-align:left}
  .cartbar[hidden]{display:none}
  .cartbar .cb-n{font-size:12.5px;opacity:.85}
  .cartbar .cb-sum{margin-left:auto;font-weight:800;font-size:16px}
  .cartbar .cb-go{font-weight:700;font-size:13px;opacity:.9}
  .cartbar:active{transform:scale(.99)}
}
.menu-grp{margin-bottom:14px}
.menu-grp h3{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.menu-btns{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
.menu-btns form{display:flex}
.menu-btn{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:8px;text-align:left;
  min-height:64px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s ease,border-color .15s ease}
.menu-btn:hover{border-color:var(--accent);box-shadow:var(--shadow-lg)}
/* фото товара — как на кассовом референсе: раньше картинка лежала фоном под белой
   заливкой 82% и её попросту не было видно, а кассир ищет позицию глазами по картинке */
.menu-btn .mimg{display:block;height:92px;border-radius:11px;background:#F2F3F6 center/cover no-repeat}
.menu-btn .mname{font-weight:700;font-size:13.5px;line-height:1.25;padding:0 4px}
.menu-btn .mprice{color:var(--accent-dark);font-weight:800;font-size:15px;margin-top:auto;padding:0 4px 4px}
/* заявка 589: строки чека ниже — меньше прокрутки; согласовано «попробуем — откатим» */
/* перенос строки нужен широкой панели (заявка 844): в узкой колонке сумма уезжает
   на второй этаж. Раньше он стоял инлайном в шаблоне и перебивал телефонные правила */
.chk-line{display:flex;align-items:center;gap:8px;padding:5px 0;flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
/* название занимает свою строку: статус кальяна и «+ замена чаши» раньше втискивались
   рядом с именем и рвали строку чека на четыре этажа */
/* заявка 1145: общий перенос по любому месту (.chk-line{overflow-wrap:anywhere}) отрывал
   от названия одну «)» и уносил её на свою строку. Название переносим по словам —
   «(gongfu pot)» уезжает целиком, со своей скобкой */
.chk-line .n{flex:1;display:block;font-weight:600;font-size:13.5px;margin-bottom:1px;
  overflow-wrap:break-word}
.chk-th{flex:none;width:34px;height:34px;border-radius:9px;background:#F2F3F6 center/cover no-repeat}
/* Состав предзаказа (зал и чек — одна разметка, см. _preorder_body.html).
   Крепость и добавки были обычным текстом внутри общего предложения: «двойное яблоко,
   крепость 7/10, с холодком, без мяты» — на глаз не отличить атрибуты от состава.
   Теперь атрибуты значками (заливка крепости та же, что у вкусового профиля гостя),
   состав — своей строкой под ними. */
/* заявка 1202: плашка предзаказа над чеком — одной строкой, а не карточкой с
   заголовком и подсказкой: на ноутбуке она съедала список позиций */
.prz-card{border-color:var(--accent);padding:8px 12px;margin-bottom:10px}
.prz-card .prz-hk:first-child{margin-top:0}
/* заявка 1210: свёрнутая строка — метка, короткий состав, стрелка */
.prz-sum{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;min-height:28px}
.prz-sum::-webkit-details-marker{display:none}
.prz-short{flex:1;min-width:0;font-size:13.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prz-card[open] .prz-short{display:none}
.prz-sum .dd-arr{flex:none;font-size:12px;color:var(--muted)}
.prz-card[open] .dd-arr{transform:rotate(180deg)}
.prz-tag{flex:none;align-self:flex-start;padding-top:2px;font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent-dark)}
.prz-hk{margin-top:5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.prz-hk>b{font-size:13.5px}
.prz-hk .badge{font-size:11px;padding:2px 8px}
.prz-mix{flex:1 1 100%;font-size:12.5px;color:var(--muted);white-space:pre-line;
  overflow-wrap:break-word}
.prz-ex{margin:5px 0 0;padding:0 0 0 14px;list-style:disc;font-size:12.5px}
.prz-ex li{margin:2px 0}
.prz-ex li::marker{color:var(--accent)}
.prz-ex b{font-weight:600}
/* Заявка 591 (отменяет старое правило «имя своей строкой»): название, правка, ± и
   сумма — в ОДНУ строку; после уплотнения 589 они помещаются. В узкой панели
   flex-wrap сам уводит кнопки на вторую строку, ничего не ломая */
.chk-nm{flex:1 1 auto;min-width:140px}
.chk-line .sum{margin-left:auto;min-width:76px;text-align:right;font-weight:700}
/* время добавления позиции: подсказка, а не колонка — мелко и приглушённо (заявка 275) */
.chk-line .addedat{flex:none;font-size:11.5px;font-variant-numeric:tabular-nums;opacity:.7}
.qtybtn{width:38px;height:38px;min-height:38px;border-radius:9px;border:1px solid var(--line);
  background:#fff;font-weight:800;font-size:17px}
/* в узкой панели чека (планшет в портрете) три кнопки в ряд не помещаются —
   раскладка сама переносит третью на вторую строку вместо переноса букв */
.paybtns{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));margin-top:12px}
@media(max-width:520px){.paybtns{grid-template-columns:minmax(0,1fr)}}
.total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0 4px;
  margin-top:6px;border-top:2px dashed var(--line);font-size:20px;font-weight:800}

/* полоска гостя над меню: занимает одну строку вместо карточки в сто пикселей */
.gbar{padding:10px 14px;margin-bottom:12px}
.gbar__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gbar__row b{font-size:15px}

/* живой таймер: кальян горит / гость едет (timer.js) */
.tmr{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:12.5px;padding:4px 9px;border-radius:99px;
  background:#EAF7EE;color:#1F7A5C}
.tmr--warn{background:#FFF3E9;color:#B45309}
.tmr--bad{background:#FDECEC;color:#C0392B}

/* экран чека во весь экран: прокручивается только меню и список позиций */
.pos-grid.grow{flex:1;min-height:0}
/* низкий экран (планшет 768, ноут в 800): отступы съедали половину списка позиций —
   на 1024×768 в чеке было видно полторы строки. Ужимаем только поверхность продаж. */
@media(max-height:820px){
  .pos-wrap.pos-fit{padding-top:10px;padding-bottom:10px}
  .pos-fit .card{padding:11px 12px}
  .pos-fit .gbar{padding:6px 12px;margin-bottom:8px}
  .pos-fit .prz-card{padding:6px 12px;margin-bottom:8px}
  .pos-fit .pagehead{margin-bottom:8px}
  .pos-fit .chk-line{padding:4px 0}
  .pos-fit .total-row{padding:8px 0 2px;font-size:18px}
  .pos-fit .cat-chips{margin-bottom:10px}
  /* Заявка 1204: кнопки кассы рассчитаны на палец (40px) — на ноутбуке этот запас
     отнимается у списка позиций, там помещалось полторы строки. Мышью хватает 32px;
     кнопки оплаты не трогаем, по ним бьют быстро и на них завязаны деньги. */
  .pos-fit .pagehead .btn{min-height:32px}
  .pos-fit .chk-cmds .btn{min-height:32px}
  .pos-fit .chk-cmds{margin-bottom:4px}
  .pos-fit .ordmemo > summary{min-height:30px}
  .pos-fit .pos-check__foot .mt{margin-top:8px}
}
/* Заявка 1211: на кассе плашка позиции была шириной с ладонь, а картинка растянута
   во всю её ширину — на экран влезало три штуки в ряд. Плашка ужата, картинка стала
   небольшим квадратом по центру, подписи мельче: в ряд помещается пять, по высоте
   вдвое больше рядов. Кнопка при этом остаётся крупной под палец (118×~120).
   Правило стоит ПОСЛЕ блока низкого экрана: там своя высота картинки, и она перебила
   бы квадрат. На телефоне действуют свои правила ниже. */
@media(min-width:701px){
  .pos-menu .menu-btns{gap:8px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .pos-menu .menu-btn{padding:8px 6px;gap:6px;border-radius:12px;align-items:center;text-align:center}
  .pos-menu .menu-btn .mimg{width:62px;height:62px;border-radius:12px}
  .pos-menu .menu-btn .mname{font-size:12px;line-height:1.2;padding:0}
  .pos-menu .menu-btn .mprice{font-size:13px;padding:0}
}
@media(min-width:701px){
  /* заявка 82: на разделённом экране группы меню в одну строку не влезают, а мышью
     горизонтальную ленту не прокрутить — с планшета и выше переносим их по строкам */
  .cat-chips{flex-wrap:wrap;overflow-x:visible}
}
/* Заявка 1155: чек держит высоту окна и прокручивается внутри себя — это хорошо на
   широком экране. В узком окне (мак «в половину экрана») кнопки чека переносятся в
   четыре строки и съедают её: списку позиций оставалось 100 пикселей, и гость видел
   половину одной строки. До 1000px прокручивается вся поверхность, как на телефоне */
@media(min-width:1001px){
  .pos-grid.grow>*{min-height:0;height:100%}
  .pos-menu{overflow-y:auto;padding-right:4px}
  .pos-check{display:flex;flex-direction:column;overflow:hidden}
  .pos-check__body{flex:1;min-height:0;overflow-y:auto;padding-right:4px}
  .pos-check__foot{flex:none;border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
}

/* прочее */
.alert{background:var(--red-soft);color:var(--red);border-radius:10px;padding:12px 16px;
  font-weight:600;margin-bottom:14px}
.note{background:var(--accent-soft);color:var(--accent-dark);border-radius:10px;padding:12px 16px;
  font-size:13.5px;margin-bottom:14px}
/* Заявка 366: отчёт больше не стена pre-wrap — у него есть заголовок смены, абзацы
   и перечисления, и выглядеть он должен как разбор, а не как лог */
.ai-report{font-size:14px;line-height:1.6}
.ai-report p{margin:0 0 10px}
.ai-report p:last-child{margin-bottom:0}
.ai-report .ai-h{font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--muted);
  text-transform:uppercase;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.ai-report .ai-sub{font-weight:700;margin:14px 0 6px}
.ai-report .ai-ul{margin:0 0 10px;padding:0;list-style:none}
.ai-report .ai-ul li{position:relative;padding:5px 0 5px 18px}
.ai-report .ai-ul li::before{content:'';position:absolute;left:2px;top:13px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
/* прежний вид оставляем там, где текст короткий и без структуры (совет по цене) */
.note.ai-report{white-space:pre-wrap}
.empty{color:var(--muted);text-align:center;padding:36px 16px;font-size:14px}
.mt{margin-top:16px}.mb0{margin-bottom:0}
.login-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--dark)}
.login-card{background:#fff;border-radius:16px;padding:32px 28px;width:100%;max-width:400px}
.login-card h1{margin-bottom:4px}
.login-card .sub{margin-bottom:20px}
.week-bars{display:flex;gap:8px;align-items:flex-end;height:120px;padding-top:8px}
.week-bars .b{flex:1;background:var(--accent-soft);border-radius:8px;min-height:6px;position:relative;transition:background .15s}
.week-bars .b:hover,.week-bars .b.hot{background:var(--accent)}
.week-bars .b span{position:absolute;top:-20px;left:0;right:0;text-align:center;font-size:10.5px;
  font-weight:700;color:var(--muted);white-space:nowrap}
.week-bars .b em{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10.5px;
  font-style:normal;color:var(--muted);white-space:nowrap}
@media(max-width:640px){.week-bars .b em{font-size:9.5px}}

/* заявка 451: адрес страницы и юзер-агент в заявке — сплошная строка без пробелов.
   Она не переносилась и растягивала страницу вширь на телефоне */
.meta,.meta span{overflow-wrap:anywhere;word-break:break-word}

/* мобильный нижний таб-бар (Restaurant POS) */
.tabbar{display:none}
@media(max-width:640px){
  .tabbar{position:fixed;bottom:0;left:0;right:0;z-index:120;display:flex;justify-content:space-around;
    background:#fff;border-top:1px solid var(--line);padding:5px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 20px rgba(0,0,0,.06)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:55px;
    font-size:10px;font-weight:600;color:var(--muted);padding:2px 6px;min-height:44px}
  .tabbar a svg{width:26px;height:26px}
  .tabbar a.on{color:var(--accent)}
  /* заявка 1430: под панель оставляем ровно её высоту — она стала ниже на 10px */
  .wrap{padding-bottom:86px}
}
@media(max-width:640px){
  .topbar-in .topnav{display:none}
  .topbar-in{flex-wrap:nowrap;padding-bottom:0}
  /* заявки 605/606: разделы спрятались — лого превращается в кнопку со списком.
     Селектор с запасом: базовое pointer-events:none дописано НИЖЕ по файлу и при
     равной специфичности перебивало бы это правило */
  .topbar .logomenu summary{cursor:pointer;pointer-events:auto}
  .topbar .logomenu .logocaret{display:inline}
}
@media print{
  .topbar,.noprint{display:none!important}
  body{background:#fff}
  .wrap{padding:0;max-width:none}
}


/* Вкладки цехов и ленты кальянов — один раздел на двух экранах: «Цеха» убраны из
   нижней панели кипера (было шесть пунктов при норме пять), экраны переключаются здесь. */
.st-tabs{display:flex;gap:6px;flex-wrap:wrap}
.st-tabs a{padding:8px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;
  text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600;min-height:44px;
  display:inline-flex;align-items:center}
.st-tabs a.on{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff}

/* Блок-схема связанных документов: заказ → приёмки → оплаты (заявки 93, 145).
   Жила внутри money.html, из-за чего на карточке документа схему было нечем рисовать. */
.chainflow{display:flex;flex-direction:column;gap:16px}
/* Заявка 1187: связи рисуем линиями-ветками, как в образце: от документа идёт линия,
   от неё отводы к каждому дочернему. Стрелка «→» между плашками не показывала, что
   из одного документа вышло несколько, — ветка показывает */
/* Заявка 1421: линии шли на фиксированных 22px от верха плашки, а ствол тянулся
   вдоль всей колонки веток — при одной ветке из линии торчал вертикальный обрубок
   в пустоту. Теперь линии выходят из середины плашек, а ствол рисует каждая ветка
   от предыдущей: одна ветка — ствола нет вовсе */
.chain-row{display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.chain-branches{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0;
  position:relative;margin-left:26px}
.chain-branches > .chain-row{position:relative}
/* отвод к плашке; у первой ветки он длиннее — это же и выход из родителя */
.chain-branches > .chain-row::before{content:"";position:absolute;left:-13px;top:50%;
  width:13px;height:1px;background:#C9CCD4}
.chain-branches > .chain-row:first-child::before{left:-26px;width:26px}
/* ствол: от середины предыдущей ветки до середины этой */
.chain-branches > .chain-row + .chain-row::after{content:"";position:absolute;left:-13px;
  top:calc(-50% - 10px);height:calc(100% + 10px);width:1px;background:#C9CCD4}
/* оплата, вышедшая из приёмки, — тем же отводом вправо */
.chain-branches .chain-row > a.chain-box + a.chain-box{margin-left:26px;position:relative}
.chain-branches .chain-row > a.chain-box + a.chain-box::before{content:"";position:absolute;
  left:-26px;top:50%;width:26px;height:1px;background:#C9CCD4}
.chain-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 14px;min-width:170px}
.chain-box.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,111,16,.14)}
.chain-box a{color:inherit;text-decoration:none}
.chain-box a:hover{color:var(--accent)}
/* заявка 224: плашка цепочки — сама ссылка, попасть мышью в номер было неудобно */
a.chain-box{display:block;color:inherit;text-decoration:none}
a.chain-box:hover{border-color:var(--accent);background:#fff}
.chain-box .t{font-size:12px;font-weight:600;color:var(--muted)}
.chain-box .n{font-weight:700;margin-top:2px}
.chain-box .d{font-size:12px;color:var(--muted)}
.chain-box .s{font-weight:700;margin-top:4px}
.chainhint{margin-top:4px}

/* Переключатель колонок таблицы (colcfg.js): номенклатура, гости */
.colcfg{position:relative}
.colcfg summary{list-style:none;cursor:pointer}
.colcfg summary::-webkit-details-marker{display:none}
.colcfg-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:210px}
/* заявка 659: пункты без class попадали под «.wrap a:not([class])» и красились в
   оранжевый — селектор той же силы держит их чёрными */
.colcfg-menu label,.colcfg-menu a,.wrap .colcfg-menu a{display:flex;gap:10px;align-items:center;padding:8px 10px;
  border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;margin:0;
  text-decoration:none;white-space:nowrap}
.colcfg-menu label:hover,.colcfg-menu a:hover,.wrap .colcfg-menu a:hover{background:var(--bg);color:var(--ink)}
/* галочка у выбранного пункта — место под неё держим всегда, иначе строки прыгают */
.colcfg-menu a::before{content:'';width:14px;flex:none;color:var(--accent)}
.colcfg-menu a.on::before{content:'✓'}
/* Заявка 352: на телефоне меню ставилось по шестерёнке, а она живёт в шапке широкой
   таблицы — список улетал в верх экрана, поверх шапки страницы, и обрезался. На узких
   экранах показываем его листом снизу: он всегда на месте и прокручивается сам. */
/* заявка 756: на айфоне лист рисовался криво и не закрывался по затемнению — fixed внутри
   липкой th с overflow таблицы Safari считает от неё. colcfg.js на телефоне уносит меню
   в body (класс sheet) и кладёт под него подложку .colcfg-scrim; здесь только их вид */
.colcfg-scrim{position:fixed;inset:0;background:rgba(20,18,16,.38);z-index:199}
@media(max-width:700px){
  .colcfg-menu.sheet{position:fixed!important;left:8px!important;right:8px!important;
    top:auto!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-height:56vh;overflow-y:auto;z-index:200;display:block}
  /* Заявка 360: на айфоне список не пролистывался. Причин две. Во-первых, vh в Safari
     считается от экрана БЕЗ панелей браузера: лист «помещался» по своим меркам, а низом
     уходил под адресную строку, и прокручивать было нечего — dvh считает по-настоящему
     видимую высоту. Во-вторых, прокрутке внутри fixed-элемента нужен явный touch-action,
     иначе палец тянет страницу под листом, а не сам список. */
  .colcfg-menu.sheet{max-height:min(56dvh, 56vh);
    -webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
  /* пункты пальцем: 8 точек padding давали строку в 34px при норме 44 */
  .colcfg-menu.sheet label,.colcfg-menu.sheet a{min-height:44px;padding:10px 12px}
  /* заявка 746: лист без заголовка выглядел случайным списком посреди экрана */
  .colcfg-menu.sheet.cols::before{content:'Колонки';display:block;font-weight:700;
    font-size:15px;padding:6px 12px 10px;text-align:left;color:var(--ink)}
}

/* заявка 595: меню учётной записи в шапке */
.umenu{position:relative}
.umenu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  border-radius:10px;padding:3px 6px}
.umenu summary::-webkit-details-marker{display:none}
.umenu summary:hover{background:rgba(255,255,255,.08)}
/* заявка 706: «+ Добавить ▾» — это .btn; подсветка меню (для тёмной шапки) делала
   её прозрачной, белым по белому */
.umenu summary.btn:hover{background:#D45C06}
.umenu .uic{width:26px;height:26px;color:#fff;opacity:.85;flex:none}
.umenu-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:200px}
/* заявки 599/600: цвета прибиты жёстко и специфичность с запасом — стили ссылок шапки
   (.topuser a:hover красит в белый) перебивали пункты, и они пропадали на белом меню */
.umenu .umenu-menu a{display:block;padding:9px 12px;border:0;min-height:0;border-radius:8px;
  font-size:14px;font-weight:500;color:#23252B;text-decoration:none;white-space:nowrap}
.umenu .umenu-menu a:hover{background:#F2F3F5;color:#23252B}
.umenu .umenu-menu a:last-child{color:#7A7E89}
/* заявка 679: меню из кнопок формы (способ оплаты) — тот же вид, что у ссылок */
.umenu .umenu-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;min-height:0;
  border-radius:8px;background:none;font:inherit;font-size:14px;font-weight:500;color:#23252B;cursor:pointer}
.umenu .umenu-menu button:hover{background:#F2F3F5}
.umenu .umenu-menu button:disabled{color:#7A7E89;cursor:default}
/* Заявка 1209: переключатель компании в заголовке дашборда. Кнопки внутри .umenu-menu
   уже одеты правилом выше — здесь только своё: размер строки заголовка и пометка
   текущей компании. Галочка, а не один цвет: цвет сам по себе смысла не несёт. */
.orgdd summary{padding:5px 10px;margin-left:-10px;min-height:36px;border-radius:10px}
.orgdd summary:hover{background:#F1F2F5}
.orgdd .dd-arr{font-size:13px;color:var(--muted);font-weight:600}
.orgdd .umenu-menu{min-width:220px}
.orgdd .umenu-menu button{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:40px}
.orgdd .umenu-menu button.on{color:var(--accent);font-weight:700}
.orgdd .umenu-menu button.on::after{content:"✓"}

/* заявки 605/606: на широком экране лого — не кнопка; серый last-child тут ни к чему */
.logomenu summary{cursor:default;pointer-events:none}
.logomenu .logocaret{display:none;color:#fff}
.logomenu .umenu-menu a:last-child{color:#23252B}

/* заявка 611: navfold = разделы спрятаны в лого (hdrbreak снят в 902) */
.topbar.navfold .topbar-in .topnav{display:none}
.topbar.navfold .logomenu summary{cursor:pointer;pointer-events:auto}
.topbar.navfold .logocaret{display:inline}

/* заявка 619: крепость гостя — градиент голубой→фиолетовый; читаемо и не системный цвет */
/* заявки 627/635: пять ступеней крепости — ровная градация голубой → фиолетовый */
.badge.st-l{background:linear-gradient(135deg,#A9CCEE,#8CB5E4);color:#fff;border:0}
.badge.st-lm{background:linear-gradient(135deg,#9BBCEC,#80A2DE);color:#fff;border:0}
.badge.st-m{background:linear-gradient(135deg,#8B9FE9,#7284D6);color:#fff;border:0}
.badge.st-ms{background:linear-gradient(135deg,#9289E4,#7970CE);color:#fff;border:0}
.badge.st-s{background:linear-gradient(135deg,#9A73DE,#7E56C6);color:#fff;border:0}

/* заявка 613: юрлицо под лого; статус смены — точкой в кнопке «Кипер» */
.orgline{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:2px;
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* заявка 639 */

/* заявка 626: строки контрагентов ниже — их дул крестик архива (44px) */
.crm-tbl td{padding:3px 10px}
.crm-tbl .xbtn{width:32px;height:32px;min-height:32px}

/* заявка 630: строки внутри объединённой плитки — кликабельны каждая по своему списку */
.stat .statrow{border:0;background:none;padding:4px 6px;margin:0 -6px;text-align:left;
  cursor:pointer;font:inherit;display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;width:calc(100% + 12px);border-radius:8px;text-decoration:none;color:inherit}
.stat .statrow:hover{background:var(--bg)}

/* заявка 636: шестерёнка выбора колонок — не колонка, а кнопка у правого края шапки:
   липнет к правому краю прокрутки (top уже липкий у всех th), ширина фиксирована,
   ручки растягивания у неё нет (wh_resize.js её пропускает) */
th.gearth{position:sticky;right:0;width:40px;min-width:40px;max-width:40px;padding:4px 6px;
  text-align:right;z-index:6}
table[data-resizable] th.gearth{width:40px!important}
/* заявка 637: длинный текст в ячейке режет сама колонка, а не сервер — одной строкой,
   с многоточием; целиком — в подсказке title */
.clip1{display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* заявка 696: колонку растянули мышью, а профиль всё равно резался на 300px —
   в растянутой таблице кромсает сама ячейка по своей ширине */
table[data-cw-fixed] .clip1{display:inline;max-width:none;overflow:visible}
/* заявка 701: и без растяжки колонка гостей широкая, а профиль всё равно резался
   на 300px — в листе гостей потолок по ширине экрана */
td[data-c="flav"] .clip1{max-width:min(760px,38vw)}
/* заявки 643/644: закреплённая позиция в составе документа — ссылкой, как в номенклатуре */
.edname{font-weight:600}

/* Схема листа (правило Арса, заявка 1237). Новый лист собирают в этом порядке:
   1. плашки-итоги сверху (.cards .stat) — цифры, ради которых лист открыли;
   2. строка добавления: кнопка «+ …» (.btn.ghost.sm.ink), форма под ней свёрнута
      (toggleCard) — не форма на пол-экрана, а список первым делом;
   3. матрица: на компьютере таблица (.tscroll.hide-mob), на телефоне те же строки
      карточками (.doccards) — горизонтальной прокрутке на 393px делать нечего.
   Образец — списки склада (/wh/ops) и «На оплату» (/money/upcoming). */
/* заявка 752: на телефоне матрица документов заменяется списком карточек — строка
   таблицы в 10 колонок на 393px читается через горизонтальную прокрутку, а искать
   в ней глазами нечего. На широком экране карточек нет вовсе, таблица не меняется. */
.doccards{display:none}
@media(max-width:700px){
  .doccards{display:block;margin:0 -16px -16px}   /* в край карточки, как в списке телефона */
  .tscroll.hide-mob{display:none}                 /* прячем только помеченные таблицы */
  .dc-day{padding:9px 16px;background:var(--panel);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600}
  .dc-day:first-child{border-top:0}
  .dc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    padding:11px 16px;min-height:56px;border-bottom:1px solid var(--line);
    color:var(--ink);text-decoration:none}
  .dc-row:last-child{border-bottom:0}
  .dc-row:active{background:var(--panel)}
  .dc-l{min-width:0}
  .dc-l b{display:block;font-size:15px;font-weight:700;line-height:1.25}
  /* заявка 1220: комментарий документа — нижней строкой карточки, мелко и в одну
     строку: по нему видно, что за документ, не открывая его */
  .dc-cmt{margin-top:2px;font-size:11.5px;line-height:1.3;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dc-sub{margin-top:3px;font-size:13px;color:var(--muted)}
  .dc-a{flex:none;font-size:15px;font-weight:600;white-space:nowrap;padding-top:1px}
  .doccards .empty{padding:22px 16px}
}

/* заявка 750: экран «Документы» — группы разделов списком строк со стрелкой */
.docgrp{margin:18px 4px 8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.docgrp:first-of-type{margin-top:0}
.doclist{padding:0 16px}
/* как в заявке 659: пункты без class ловит «.wrap a:not([class])» и красит оранжевым —
   селектор той же силы держит названия разделов чёрными */
.doclist a,.wrap .doclist a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:54px;padding:12px 0;border-bottom:1px solid var(--line);
  color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}
.doclist a:last-child{border-bottom:0}
.doclist a:active{color:var(--accent)}
.doclist a svg{width:17px;height:17px;flex:none;color:var(--muted)}

/* ── мобильная версия CRM: заявки 758, 760, 764, 765 ─────────────────────────── */
/* 758: полоса разделов на телефоне дублирует «Документы» в нижней панели и просто
   съедает верх экрана — прячем её на листах, куда приходят из «Документов». */
/* 765: вместо неё на платежах и депозитах остаётся переключатель из двух вкладок */
.tabs.tabs-mob{display:none}
/* 764: ДДС и «Прибыль и убытки» — ссылками во вкладках показателей, только на телефоне */
.tabs .tab-mob{display:none}
/* 765: строка фильтров на широком экране — как была: обёртка не создаёт своей коробки,
   поиск через order возвращается в конец строки, кнопка-ползунки не нужна */
.mfilt-fields{display:contents}
.mfilt-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  flex:none;border:0;background:none;color:var(--accent);padding:0;align-self:flex-end}
.mfilt-btn svg{width:22px;height:22px}
@media(min-width:701px){
  .mfilt .msearch{order:9}
  /* заявка 1121: «Сброс» — самым последним в строке, после поиска: поиск шире и
     переносить его на свою строку из-за кнопки незачем */
  .mfilt .fres{order:10}
  .mfilt .fsave{order:11}   /* закладка — за «Сбросом» (заявка 1366) */
}
/* заявка 1122: в строке фильтров поля выше кнопок — над полем стоит подпись. Кнопка
   равняется по низу, как и другие кнопки строки, а не по верху колонки */
/* заявка 1156: подсказки позиций под полем ввода. fixed — строки документа лежат
   в прокручиваемой .tscroll, absolute там обрезается по краю таблицы */
.sugbox{position:fixed;z-index:330;   /* заявка 1263: выше карточки правки */background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);max-height:280px;overflow-y:auto;padding:4px}
.sugbox .sug{padding:7px 10px;border-radius:8px;cursor:pointer;font-size:14px;white-space:nowrap}
.sugbox .sug:hover,.sugbox .sug.on{background:var(--panel)}
.sugbox .sub{font-size:12px}
/* заявка 1160: «Изменения» — имя правившего и время под ним, как в образце.
   Заявка 1172: начало строки то же, что у соседних ячеек шапки, дата мельче имени */
.whobox{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3;width:100%}
.whobox .sub{font-size:11.5px}
/* заявка 1159: список статусов — по образцу: стрелки порядка, название, палитра цветов.
   Заголовков у таблицы нет: три колонки и так читаются */
/* заявка 1272: таблица-форма (причины, статусы документов) — на всю ширину плашки:
   общее правило «по содержимому» ужимало её до ширины поля ввода */
.stlist{width:100%}
.stlist td{padding:4px 6px;vertical-align:middle}
.stlist td:first-child{width:60px}
/* заявка 1275: в «Причинах» первой стоит сама строка ввода, а не колонка стрелок —
   правило выше ужимало её до 60px */
.stlist td.stname{width:auto}
.stlist .stmove{white-space:nowrap;color:var(--muted)}
.stlist .stmove .xbtn{width:24px;height:24px;min-height:0;padding:0}
.stlist .stmove svg{width:16px;height:16px}
.stlist input[name=name]{width:100%}
.stcolor{width:190px}
.stpick summary{list-style:none;cursor:pointer;display:inline-flex}
.stpick summary::-webkit-details-marker{display:none}
.stswatch{min-width:104px;text-align:center}
.stpal{display:grid;grid-template-columns:repeat(4,26px);gap:6px;padding:8px}
.stcell{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:pointer;
  min-height:0;padding:0}
/* заявка 1192: под подписью группы — её рабочий ключ, когда он отличается: по ключу
   ищут в отчётах, а в кипере видна подпись */
/* Заявка 1195: галочки в карточках — компактным списком: 44px на строку и поле снизу
   у каждой съедали пол-экрана, а читается это как один перечень настроек */
.chkfield{margin-bottom:2px}
label.chkline{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink);
  min-height:0;padding:4px 0;margin:0;line-height:1.35}
label.chkline input[type=checkbox]{width:16px;height:16px;min-height:0;flex:none;margin:0}
label.chkline .sub{font-size:12px}
/* Заявка 1194: рабочий ключ стоит своей колонкой у правого края — начинается у всех
   строк с одной вертикали, поэтому список читается сверху вниз, а плашка групп от
   этого не шире: колонка фиксированная, подпись отдаёт ей место */
.reftree .gkey{flex:none;width:72px;margin-left:auto;font-style:normal;font-size:11px;
  color:var(--muted);line-height:1.2;text-align:left;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.reftree a.on .gkey{color:var(--accent)}
/* заявка 1190: кнопка WhatsApp рядом с телефоном — мелкая, чтобы строка списка
   не росла из-за неё */
.btn.wabtn{min-height:0;height:auto;padding:2px 8px;font-size:11px;line-height:1.6;
  margin-left:6px;vertical-align:middle;border-radius:7px}
/* заявка 1189: имя гостя правится прямо в заголовке карточки */
/* заявка 1312: на узком экране длинное имя распирало строку и «Закрыть» уходила
   на вторую строку. Поле имени ужимается до остатка строки — кнопка остаётся рядом */
h1.gname{margin:0;min-width:0}
h1.gname input{font:inherit;color:inherit;border-color:transparent;background:none;
  padding:2px 6px;margin-left:-6px;min-height:0;width:100%;min-width:110px;max-width:min(560px,60vw)}
h1.gname input:hover{border-color:var(--line)}
h1.gname input:focus{border-color:var(--accent);background:#fff}
/* заявка 1180: состояние документа читается оформлением строки (блёклый курсив у
   черновика — правило tr.isdraft ниже), а не словом в колонке. Плашку своего статуса
   курсив не трогает — это не состояние, а метка из справочника */
tr.isdraft td .badge{font-style:normal}
/* заявка 1178: в остатках числа стояли у правого края, а «Наименование» тянулось на
   пол-экрана — глаз терял строку по дороге. Колонка названия ограничена, таблица не
   растягивается на всю ширину: свободное место остаётся справа, читать легче */
.stocktbl{width:auto;min-width:0}
.stocktbl th.namecol{width:340px;max-width:340px}
.stocktbl td:first-child{max-width:340px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.stocktbl th.namecol{width:260px;max-width:260px}
  .stocktbl td:first-child{max-width:260px}}
/* заявка 1176: вкладки внутри документа — «Позиции» и «Связанные документы».
   Выглядят как вкладки разделов, только подчёркиванием, а не плашкой: это переключение
   внутри одной карточки, а не переход в другой раздел */
.doctabs{display:flex;gap:18px;align-items:center;margin:0 0 12px;padding:0 2px;
  border-bottom:1px solid var(--line);background:none}
.doctabs button{background:none;border:0;padding:10px 2px 10px;font-size:14.5px;font-weight:600;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;border-radius:0;
  min-height:0;display:inline-flex;align-items:center;gap:7px}
.doctabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.doctabs .n{font-size:12px;font-weight:700;color:var(--muted);background:var(--panel);
  border-radius:6px;padding:1px 6px}
/* заявка 1173: тона светлее — плашка статуса не должна кричать громче самих данных.
   Зелёный остался прежним (им помечают «готово»), рядом добавлен светло-зелёный */
.stcell.gray{background:#E6E7EA}.stcell.orange{background:#F9A870}
.stcell.green{background:var(--green)}.stcell.lime{background:#A8D66A}
.stcell.red{background:#F08A8A}.stcell.blue{background:#7FA6F2}
.stcell.violet{background:#B79BEC}.stcell.yellow{background:#F2D177}
.stcell.teal{background:#7FCFCF}
/* новые цвета плашек — те же, что в палитре, только мягкой заливкой */
.badge.lime{background:#EAF6D8;color:#4E7A16}
.badge.blue{background:#EAF0FF;color:#3B72D9}
.badge.violet{background:#F3ECFF;color:#7A4CD8}
.badge.yellow{background:#FFF6DC;color:#8A6A00}
.badge.teal{background:#E5F6F6;color:#0B7A7A}
/* заявка 1152: справочник статусов на телефоне — на 390px в строке помещаются только
   название и цвет: стрелки порядка прячем, они там ничего не решают */
@media(max-width:700px){
  .stlist td:first-child{display:none}
  .stcolor{width:120px}
  .stswatch{min-width:0}
}
/* заявка 1135: «Выбрать…» в фильтре — во всю ширину поля, то есть ростом с подпись
   «Товар или группа», а не вдвое уже неё */
.field.fpick{min-width:132px}
.field.fpick > .btn{width:100%}
/* вкладки вида листа стоят в шапке рядом с названием раздела */
.pagehead .tabs.viewtabs{margin:0}
/* заявка 1122: в строке фильтров над полем стоит подпись — кнопка равняется по низу,
   на одну линию с полями. В строке поиска (шапка раздела) подписей нет, всё стоит
   по центру: там и кнопка по центру, и выпадашка ростом с поле — иначе она на
   четыре пикселя ниже соседей, что Арс и увидел в «Гостях» и «Контрагентах» */
.frow.mfilt .fres,.frow.mfilt .fsave{align-self:flex-end}
.pagehead-search.mfilt .fres,.pagehead-search.mfilt .fsave{align-self:center}
.pagehead-search.mfilt select{min-height:44px;height:44px;padding-top:0;padding-bottom:0}
@media(max-width:700px){
  .tabs.hide-mob{display:none}
  .tabs.tabs-mob{display:flex}
  .tabs .tab-mob{display:flex;align-items:center;padding:8px 16px;border-radius:9px;
    font-weight:600;font-size:13.5px;color:var(--muted);min-height:38px}
  /* поиск первой строкой, фильтры — под кнопкой рядом с ним */
  .mfilt-btn{display:flex}
  .mfilt .mfilt-fields{display:none}
  .mfilt.fon .mfilt-fields{display:contents}
  .mfilt .msearch{flex:1 1 auto;min-width:0!important}
  .mfilt .msearch label{display:none}
  .mfilt .msearch input{border-color:transparent;background:var(--panel)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E")
    10px center/19px no-repeat;padding-left:36px;border-radius:12px}
}

/* заявка 759: лист контрагентов на телефоне — карточки на общей разметке .doccards:
   название, под ним сальдо, справа сиреневая пометка «кто это» */
.crmcards .dc-sub{display:block;font-size:14px}
.crmcards .dc-sub.neg{font-weight:600}
.cc-tags{flex:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
/* заявка 1075: пометка поставщика — бледно-сиреневая всюду, покупателя — светло-зелёная.
   В карточках CRM она была густо-фиолетовой заливкой белым, в таблицах — серой */
.crmcards .badge.vio{border:0;text-transform:uppercase;font-size:11px;letter-spacing:.03em}
/* поиск и кнопка фильтров держатся первой строкой: у блока периода order:-1,
   без своего порядка поиск уезжал под раскрытые фильтры (заявка 765) */
@media(max-width:700px){
  .mfilt .msearch{order:-3}
  .mfilt .mfilt-btn{order:-2}
}
/* заявка 757: кнопки «Назад» на листах больше нет, и слот в 156px, который держал
   вкладки на одной вертикали, стал резать сам заголовок («Инвентаризаци…»).
   Держим ширину снизу: вкладки начинаются с прежнего места, а длинное название
   отодвигает их, а не обрезается */
@media(min-width:641px){
  /* заявка 1375: запас держим только под НАСТОЯЩИЕ вкладки. `.tabs-mob` на компьютере
     спрятан, а правило всё равно срабатывало — и между названием листа и кнопками
     висела дыра в 80px неизвестно от чего */
  .pagehead:has(> .tabs:not(.tabs-mob)):not(:has(> .backslot)) > h1{flex:0 0 auto;min-width:156px;
    max-width:none;overflow:visible}
}
/* заявка 766: на телефоне «Кипер» и «Управление» из шапок убраны — обе оболочки
   переключаются нижними панелями. Остаётся индикатор смены: слева, рядом с лого,
   отдельной колонкой — строку компании и стрелку списка разделов он не трогает */
/* заявка 898: строка смены видна и на десктопе — там же, где в кипере (gap 12 + margin 6
   у .pos-top .topshift; в шапке управления gap 6, добираем отступом) */
.topbar .topshift{flex:none;margin:0 4px}
@media(max-width:600px){
  .topbar .shell-switch{display:none}
  .topbar .mobshift{font-size:9.5px}
}

/* ── заявки 768/769/771: шапка и нижняя панель на телефоне — одной формы с кипером ── */
@media(max-width:600px){
  /* 768: правый блок прижат к краю — правило «после .shell-switch без отступа»
     срабатывало и на спрятанной кнопке, и блок вставал на 70px левее, чем в кипере */
  .topbar .topuser,.topbar .shell-switch+.topuser{margin-left:auto}
  /* та же высота, что у шапки кипера (64px): колонка лого со строкой компании
     с полями по 6px давала 68, и при переходе шапка прыгала на 4px */
  .brandcol{padding:4px 8px 4px 0}
}
@media(max-width:640px){
  /* 769: нижняя панель — те же поля, тень, размеры значка и подписи, что у .pos-tabs
     кипера; пункты делят ширину поровну, подпись не вылезает за экран */
  /* заявка 1033: поля по краям — как у .pos-tabs кипера на телефоне (4px): крайние
     кнопки в обеих оболочках стоят на одном отступе от края */
  /* Заявка 1430: панель была высокой, а значки в ней мелкими — почти треть высоты
     уходила на пустые поля. Поля ужаты, значок вырос до 26px; кнопка остаётся
     53px — выше порога 44px, промахнуться по ней нельзя */
  .tabbar{justify-content:stretch;padding:5px 4px calc(6px + env(safe-area-inset-bottom));
    border-top:0;box-shadow:0 -2px 10px rgba(0,0,0,.09)}
  .tabbar a{flex:1;min-width:0;gap:3px;padding:5px 2px;font-size:11px;letter-spacing:-.2px;
    white-space:nowrap;overflow:hidden;border-radius:12px;color:#6D717F;min-height:0}
  .tabbar a svg{width:26px;height:26px}
  .tabbar a.on{color:#C05207;background:#FFF3EA}
  /* 771: поле даты в строке «Сумма · Дата» не влезало — datetime-local держит
     min-width 215px; на телефоне дата идёт своей строкой во всю ширину */
  .frow .field:has(> input[type=datetime-local]){flex:1 0 100%}
  input[type=datetime-local]{min-width:0;width:100%;-webkit-appearance:none;appearance:none}
}
/* 770: список разделов «Показателей» на телефоне — строка со стрелкой под названием компании */
.tabsdd{display:none}
@media(max-width:700px){
  .tabsdd{display:block;width:100%}
  .tabsdd summary{padding:2px 0;font-size:17px;font-weight:700;color:var(--ink);width:max-content}
  .tabsdd summary:hover{background:none}
  .tabsdd .dd-arr{font-size:12px;color:var(--muted)}
  .tabsdd .umenu-menu{left:0;right:auto}
  .tabsdd .umenu-menu a,.tabsdd .umenu-menu a:last-child{color:#23252B;font-size:15px;padding:11px 14px}
  .tabsdd .umenu-menu a.on{color:var(--accent);font-weight:700}
}
/* заявка 775: общие помощники — .nomob прячется на телефоне, .mobonly виден только там */
.mobonly{display:none}
@media(max-width:700px){
  .nomob{display:none}
  .mobonly{display:inline}
}

/* ── заявка 774: тело документа на телефоне — по образцу приложения ───────────── */
/* Заказ поставщику и приёмка на 393px: шапка занимала экран стопкой полей во всю
   ширину, а состав ехал вбок — цену и сумму было видно только прокруткой. Ниже —
   только для ≤700px: шапка становится списком строк «подпись — значение», состав —
   карточками-рядами (название, под ним «кол-во × цена», справа сумма). Разметка и
   формы те же: правится и сохраняется всё, что правилось. */
.optot .v{white-space:nowrap}
/* заявки 963/1163: итог по количеству — «Кол-во · Объём · Вес» слева от сумм, одной
   строкой и чёрным: это такой же итог документа, как деньги, а не сноска под таблицей */
.qtysum{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  font-size:13px;font-weight:600;color:var(--muted)}
.qtysum b{font-size:15px;font-weight:800;color:var(--ink)}
.qtysum:empty{display:none}
/* заявка 1162: количество слева, промежуточный итог и НДС справа — в одной строке.
   Раньше суммы стояли столбиком над итогом, а слева зияла пустота во всю ширину */
.totrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:6px}
.totrow .vatside{margin-left:auto;text-align:right}
.totrow .qtysum{text-align:left;padding-top:2px}
/* заявка 1161: единица рядом с количеством — своей колонки не заводим */
.qtyc{display:flex;align-items:center;gap:4px}
.qtyc input{flex:1;min-width:0}
.qtyc .u{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
@media(max-width:700px){
  .op-cnt{display:block;margin:-4px 0 8px;color:var(--muted);font-size:13px}
  /* заявка 1054: состояние НДС в просмотре — по нажатию открывает правку, где галка */
  /* label в этой вёрстке блочный — «без НДС» уезжало на свою строку (заявка 1071) */
  .op-cnt .vatro{display:inline;color:var(--accent);font-weight:600;cursor:pointer;
    text-decoration:underline dotted;text-underline-offset:3px}

  /* шапка документа: подпись слева, поле справа. Ширины из inline-стилей рассчитаны
     на широкий экран — здесь их снимаем, иначе строка обрезается по 190px */
  .ophead .frow{display:block}
  .ophead .field{display:flex;align-items:center;justify-content:space-between;gap:10px;
    max-width:none!important;min-width:0!important;min-height:48px;margin:0;
    padding:2px 0;border-bottom:1px solid var(--line)}
  .ophead .field:last-child{border-bottom:0}
  .ophead .field>label{margin:0;flex:none;font-size:13.5px;font-weight:600;color:var(--muted)}
  .ophead .field>input,.ophead .field>select,.ophead .field>div{width:auto;min-width:0;
    max-width:64%;flex:0 1 auto;text-align:right;border-color:transparent;background:none;
    padding:6px 0;min-height:0}
  .ophead .field>select{padding-right:18px}
  /* контрагент — не select, а поиск с подсказками (pick.js): та же строка, крестик у края */
  .ophead .field>.pick{flex:0 1 64%;max-width:64%}
  .ophead .pick input.pick-in{text-align:right;border-color:transparent;background:none;
    padding:6px 22px 6px 0;min-height:0}
  .ophead .pick .pick-clear{right:0}

  /* состав — карточки-ряды. Колонки: номер · кол-во · цена · сумма · крестик;
     название лежит первой строкой во всю ширину */
  .linecards,.linecards tbody{display:block}
  .linecards tr{display:grid;grid-template-columns:32px 68px 74px minmax(0,1fr) 36px;
    gap:2px 5px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
  .linecards tr:last-child{border-bottom:0}
  .linecards td{border:0;padding:0}
  .linecards td.rownum{grid-area:1/1;display:flex;align-items:center;justify-content:center;
    min-height:38px;color:var(--muted)}
  .linecards td:has(.edname),.linecards td:has(input[list=items_dl]){grid-area:1/2/auto/5;
    font-size:14.5px;line-height:1.25}
  .linecards td:has(.xbtn.del){grid-area:1/5}
  .linecards td:has([name=qty]){grid-area:2/2;display:flex;align-items:center;gap:3px}
  .linecards td:has([name=qty])::after{content:'×';color:var(--muted);font-size:13px}
  .linecards td:has([name=price]){grid-area:2/3}
  .linecards td:has(.rowsum){grid-area:2/4}
  .linecards td.vatcol{grid-area:3/2/auto/4}
  /* подпись «НДС» в шапке таблицы не нужна — тумблер с тем же словом стоит выше */
  #edlines.linecards th.vatcol{display:none}
  /* поля состава заточены под мышь (32px, 13.5px): пальцу нужен рост и шрифт от 16px,
     иначе Safari зумит страницу при фокусе. Селектор с id — правило #edlines сильнее класса */
  #edlines.linecards td input{width:100%;min-height:40px;padding:6px 8px;font-size:16px}
  #edlines.linecards td select{min-height:40px;padding:6px 8px;font-size:15px}
  #edlines.linecards .xbtn.del,#edlines.linecards .xbtn.plus{width:36px;height:36px;min-height:36px}
  /* заявка 955: у формы нового документа (op_form, тот же #edlines) свои ячейки —
     единица под количеством, остаток под ценой; фасовка и Код/Артикул/Группа пальцу
     ни к чему, их правят в карточке документа */
  #edlines.linecards td.unit{grid-area:3/2/auto/4}
  #edlines.linecards td.rowstock{grid-area:3/4/auto/7;text-align:left;font-size:11px;color:var(--muted)}
  #edlines.linecards td.rowstock::before{content:'остаток '}
  #edlines.linecards td:has([name=pack_g]),#edlines.linecards td[data-c]{display:none!important}
  #edlines.linecards tr:has(.plus) td.unit,#edlines.linecards tr:has(.plus) td.rowstock{display:none}
  /* «Принято» и «Остаток» есть только у заказа поставщику — они 4-я и 5-я ячейки строки;
     без подписи «6» и «24» под ценой ничего не значат */
  .linecards[data-po] td:nth-child(4){grid-area:4/2/auto/4}
  .linecards[data-po] td:nth-child(5){grid-area:4/4/auto/6;text-align:left}
  .linecards[data-po] td:nth-child(4)::before{content:'принято '}
  .linecards[data-po] td:nth-child(5)::before{content:'остаток '}
  /* шапка таблицы не нужна — кроме двух меню в ней: порядок строк и «Расценить» */
  .linecards tr:first-child{display:flex;gap:16px;padding:0 0 8px}
  .linecards th{display:none;position:static;padding:0;border:0;box-shadow:none;background:none}
  .linecards th:has(details){display:block}
  /* стрелка сортировки и ручка ширины колонки — приёмы мыши, пальцу они не нужны */
  .linecards th .s-a,.linecards th .c-grip{display:none}
  /* у пустой строки набора (её узнаёт плюс) «принято» и «остаток» пустые — не место им */
  .linecards[data-po] tr:has(.plus) td:nth-child(4),
  .linecards[data-po] tr:has(.plus) td:nth-child(5){display:none}

  /* итоги — строкой: подпись слева, сумма справа. Скрытые строки НДС остаются скрытыми */
  .optot{text-align:left!important}
  .optot>div{justify-content:space-between;align-items:baseline;gap:12px;
    padding:9px 0;border-top:1px solid var(--line)}
  .optot .qtysum{margin-left:auto}
  .optot>div:not(.vatcol),.vat-on .optot>div.vatcol{display:flex}
  .opsave{display:block}
  .opsave .btn{width:100%}
}
/* заявка 785: плашки счетов в «Деньгах» на телефоне — в ряд, мелко, без «AED» на всю ширину */
@media(max-width:700px){
  .acccards{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-bottom:12px}
  .acccards .stat{padding:10px 12px}
  .acccards .stat .l{font-size:11.5px}
  .acccards .stat .v{font-size:15px;margin-top:2px;padding-bottom:0;white-space:nowrap}
}
/* заявка 780: в шапке офиса на телефоне — только точка смены, без подписи */
@media(max-width:600px){
  .topbar .mobshift{font-size:0;gap:0}
  .topbar .mobshift i{width:11px;height:11px}
}

/* заявки 783/784: на телефоне фильтры листа открываются отдельным полноэкранным
   листом — так их видно целиком, а не полосой поверх содержимого. Шапку
   («Отменить / ФИЛЬТР / Готово») и строку «Сбросить фильтр» вставляет mfilt.js,
   здесь только вид. Правило одно на все формы .mfilt: разделов много, вид один.
   Десктоп и свёрнутая строка на телефоне не меняются. */
.mfsheet-head,.mfsheet-reset{display:none}
@media(max-width:700px){
  /* лист прокручивается сам — страница под ним стоит на месте */
  body.mfilt-open{overflow:hidden}
  /* выше и шапки (100), и нижней панели (120) */
  .mfilt.fon{position:fixed;inset:0;z-index:150;display:block;overflow-y:auto;
    margin:0!important;padding:0 0 32px;gap:0;background:var(--bg);
    animation:mfsheet .22s cubic-bezier(.23,1,.32,1)}
  /* поиск и сама кнопка-ползунки в лист не идут: они остались строкой на странице */
  .mfilt.fon>.msearch,.mfilt.fon>.mfilt-btn{display:none}
  .mfilt.fon .mfsheet-head{display:flex;align-items:center;justify-content:space-between;
    gap:12px;position:sticky;top:0;z-index:2;background:var(--card);padding:11px 16px;
    border-bottom:1px solid var(--line)}
  .mfsheet-head button{border:0;background:none;font:inherit;font-size:16px;
    color:var(--accent);padding:4px 0;cursor:pointer}
  .mfsheet-head .mfs-done{font-weight:700}
  .mfsheet-head .mfs-title{font-size:13px;font-weight:800;letter-spacing:.06em}
  .mfilt.fon .mfsheet-reset{display:block;width:100%;border:0;
    border-bottom:1px solid var(--line);background:var(--card);color:#DC2626;
    font:inherit;font-size:16px;padding:14px 16px;margin:10px 0;cursor:pointer}
  /* поля — строками во всю ширину: max-width и min-width из строки фильтров здесь
     только режут списки (у части полей они заданы стилем в шаблоне — отсюда important) */
  .mfilt.fon .mfilt-fields{display:block}
  .mfilt.fon .mfilt-fields .field{display:block;margin:0;background:var(--card);
    padding:11px 16px;border-bottom:1px solid var(--line);
    max-width:none!important;min-width:0!important;flex:none}
  .mfilt.fon .mfilt-fields .field>label{display:block;font-size:12px;color:var(--muted);
    margin-bottom:5px}
  .mfilt.fon .mfilt-fields .field>input,.mfilt.fon .mfilt-fields select,
  .mfilt.fon .mfilt-fields .pick{width:100%}
  /* период — тот же чип со стрелками, только растянут на строку */
  .mfilt.fon .mfilt-fields .field.per .persel{flex:1 1 auto;min-width:0}
  .mfilt.fon .mfilt-fields .field.per .persel>summary{width:100%;justify-content:center}
  .mfilt.fon .mfilt-fields .btn{display:block;margin:12px 16px}
}
@keyframes mfsheet{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .mfilt.fon{animation-duration:.01ms}
}
/* заявка 776: список разделов на телефоне — ненавязчивой кнопкой, чтобы было видно, что он раскрывается */
@media(max-width:700px){
  .tabsdd summary{padding:7px 12px;border-radius:10px;background:#F1F2F5;font-size:16px}
  .tabsdd .dd-arr{margin-left:2px}
}

/* ── заявки 786/789: контрагенты, гости и гости в кассе — по образцу Номенклатуры ── */
/* 786: на телефоне лист начинается поиском, остальные фильтры уходят за кнопку-ползунки,
   кнопка добавления встаёт справа от заголовка. На широком экране строка та же, что
   была: поиск остаётся первым (в «Деньгах» он уезжает в конец через .mfilt .msearch),
   а кнопка добавления живёт своим порядком. */
/* строка поиска в шапке — та же, что была инлайном; :not(.fon) нужен, чтобы
   полноэкранный лист фильтров (783/784) мог разложить форму в столбец */
.pagehead-search.mfilt:not(.fon){display:flex;gap:8px;align-items:center;margin:0}
@media(min-width:701px){
  .pagehead-search.mfilt .msearch{order:0}
  .gseg{display:none}                 /* сегменты гостей на широком экране — вкладками */
}
@media(max-width:700px){
  /* кнопка добавления поднимается в строку с разделами и прижимается вправо (у заголовка
     «Управление клиентами» на 393px своей строки хватает впритык), поиск — следующей
     строкой, всё остальное из шапки — под ним. Порядок задан явно: без него правило
     .pagehead > button.btn (order:10) уносит кнопку в самый конец */
  .pagehead > button.btn.phadd,.pagehead > a.btn.phadd{order:1;margin:0 0 0 auto;flex:none}
  .pagehead > .pagehead-search.mfilt{order:2}
  .pagehead > .phtail{order:3}
}
/* 786: карточки гостей — имя, под ним контакты и визиты, справа траты; баланс мелкой
   строкой под суммой и только когда он не ноль, иначе весь лист в нулях */
.gcards .dc-l{flex:1;min-width:0}
.gcards .dc-sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcards .dc-a{text-align:right}
.gcards .dc-a .sub{display:block;font-size:12px}

/* 789: карточка гостя в кассе. На широком экране — как была: имя, контакты, строка
   цифр. На телефоне те же данные складываются в две строки, чтобы в экран влезал
   не один гость с половиной, а список, по которому можно работать. */
.gc-nm{font-weight:700;font-size:15px}
.gc-n{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.gedit-ic{display:none}
@media(max-width:700px){
  .pos-fit .cards{gap:8px}
  /* карточка складывается в одну строку: имя с контактами, цифры и карандаш правки.
     display:contents убирает коробку .gc-top, и её содержимое встаёт в тот же ряд —
     иначе кнопка правки занимала отдельную строку в каждой карточке */
  .gcard{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 8px;padding:9px 12px}
  .gcard .gc-top{display:contents}
  .gcard .gc-l{flex:1;min-width:0}
  .gcard .gc-nm{font-size:14.5px;line-height:1.25}
  .gcard .gc-ph{font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  /* цифры прижаты вправо и переносятся в две строки — ровно на ту же высоту, что имя
     с телефоном слева, зато имени остаётся ширина, чтобы влезть в одну строку */
  .gcard .gc-n{margin:0;flex:none;max-width:46%;justify-content:flex-end;white-space:nowrap;
    gap:0 7px;font-size:11px;line-height:1.45}
  /* заметка и «открытый чек» — своими строками под первой */
  .gcard > .sub.mt,.gcard > .btn.mt{flex:0 0 100%;margin-top:6px;min-height:0}
  .gcard > .btn.mt{min-height:34px}
  .gcard .gedit{flex:none;margin:0}
  .gcard .gedit[open]{flex:1 0 100%;margin-top:6px}
  .gcard .gedit > summary{width:auto!important;min-height:32px;padding:0 8px;
    display:inline-flex;align-items:center;justify-content:center}
  .gedit-ic{display:flex;width:18px;height:18px}
  .gedit-ic svg{width:18px;height:18px}
}
/* 791: подписи столбиков на телефоне — вертикально, внутри столбика от его низа */
@media(max-width:700px){.week-bars .b .num{top:auto;bottom:4px;left:50%;right:auto;margin-left:-7px;writing-mode:vertical-rl;transform:rotate(180deg);line-height:14px;font-size:10px}
.week-bars .b.hot .num{color:#fff}}
/* 792/1062: на одной колонке «Дефицит склада» шёл после выручки, потом перед ней.
   Заявка 1080: дефицит стоит слева от графика и в разметке идёт первым — порядок
   задаёт сам поток, флексовые order больше не нужны */
@media(max-width:900px){.dashcol{display:contents}}

/* ── заявка 793: на телефоне лого в офисе стоит ровно там же, где в кипере ── */
/* Офис строил колонку лого столбиком: квадратик, под ним строка компании, — и лого
   садилось на 10px выше кипера, где эта строка спрятана (в 393px рядом с квадратиком
   ей нет места). При переходе кипер↔офис лого прыгало. Теперь колонка та же, что в
   кипере: лого, строка компании и индикатор смены одной строкой по центру шапки. */
@media(max-width:600px){
  .topbar .brandcol{flex-direction:row;align-items:center;gap:10px;padding:6px 8px 6px 0}
  .topbar .brandcol .orgline{margin-top:0;max-width:110px}
}

/* ── заявка 794: лист гостей на телефоне — как в кипере ── */
/* Под названием сразу поиск и «Найти» за ним; сегменты («Спящие», «Должники»…)
   остаются строкой вкладок и листаются вбок. Список «Кого показывать» из листа
   фильтров убран: он повторял те же сегменты вторым способом. */
@media(max-width:700px){
  .pagehead.gph>h1{order:-2}
  /* заявка 1067: поиск стоит ПОД вкладками «Контрагенты/Гости» — как в CRM. Пока он был
     над ними, переход между листами переставлял поля местами и сбивал руку */
  .pagehead.gph>.tabs{order:-1;flex:1 0 100%}
  .pagehead.gph>.pagehead-search{order:0;flex:1 1 auto;max-width:none}
  .pagehead.gph>.phtail{order:0}
  .tabs.gsegs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs.gsegs::-webkit-scrollbar{display:none}
  .tabs.gsegs a{white-space:nowrap;flex:none}
}
/* 796/800: «+» в шапке раздела на телефоне — просто оранжевый крестик, без рамки и заливки;
   .ricon — квадратная кнопка-значок у поиска (сканер). Общие для Справочника и складских листов */
.pagehead > .refadd{display:none}
.ricon{width:42px;height:42px;flex:none;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--accent);cursor:pointer}
.ricon svg{width:20px;height:20px}
@media(max-width:700px){
  .pagehead > .refadd.mobonly{display:block;width:auto;flex:none;margin:0 0 0 auto;order:0}
  .pagehead > .refadd .btn,.pagehead > a.refadd{padding:0;width:38px;height:38px;font-size:30px;font-weight:400;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;background:none;border:0;box-shadow:none;color:var(--accent)}
  .mfilt .ricon{display:inline-flex}
}
@media(max-width:700px){.mfilt .ricon{order:-4}}  /* 800: сканер слева от поиска, как в Номенклатуре */
/* 797: суммы в плашках счетов на телефоне не влезали («12 000.00 AED») */
@media(max-width:700px){.acccards .stat .v{font-size:13px}}
/* 798: две плашки подряд (депозиты у нас / должники) — в одну строку, суммы одной строкой */
@media(max-width:700px){
  .cards:has(> .stat:nth-child(2):last-child){grid-template-columns:1fr 1fr;gap:8px}
  .cards:has(> .stat:nth-child(2):last-child) .stat{padding:12px 14px}
  .cards:has(> .stat:nth-child(2):last-child) .stat .l{font-size:12px}
  .cards:has(> .stat:nth-child(2):last-child) .stat .v{font-size:17px;margin-top:2px;padding-bottom:6px;white-space:nowrap}
  .cards:has(> .stat:nth-child(2):last-child) .stat .sub{font-size:12px}
}

/* заявка 799: кнопка «Сброс» внутри полей .mfilt на телефоне дублировала «Сбросить
   фильтр» в шапке открытого листа — прячем её там классом .mfilt-reset. Просто
   .mfilt.fon .mfilt-reset слабее правила .mfilt.fon .mfilt-fields .btn{display:block}
   (строка ~1172): та же .mfilt-fields нужна в селекторе, чтобы победить по силе, а не
   по порядку в файле */
@media(max-width:700px){.mfilt.fon .mfilt-fields .mfilt-reset{display:none}}
@media(max-width:700px){.mfilt.fon>.ricon{display:none}}  /* 800: в открытом листе фильтра сканеру не место */

/* заявка 801: карточка позиции (аватар + название + подпись) переехала сюда из <style>
   в refs.html — теперь ровно те же карточки рисует раздел «Остатки», а не своя копия */
.rc-img{width:44px;height:44px;flex:none;border-radius:10px;background:var(--bg);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-weight:700;font-size:16px;color:var(--muted)}
.rc-img img{width:100%;height:100%;object-fit:cover}
.refcards .dc-l{flex:1;min-width:0}
.refcards .dc-sub{display:block}
.refcards .dc-a .sub{font-weight:400;font-size:12px}
@media(max-width:700px){.refcards .dc-row{align-items:center}}
/* остаток — значком корзинки и числом под названием, как на референсе Арса */
.rc-cart{width:15px;height:15px;vertical-align:-3px;margin-right:6px}

/* ── заявка 805: кипер — поиск и фильтры как в Номенклатуре ───────────────────── */
/* В кипере строка фильтров сама и есть карточка (в «Деньгах» и заказах поставщику
   карточка внешняя) — в полноэкранном листе её рамку и скругление снимаем, иначе
   лист во весь экран остаётся с белой рамкой и уголками */
@media(max-width:700px){.mfilt.fon.card{border:0;border-radius:0;box-shadow:none}}
/* на широком экране порядок строки прежний: поля, поиск, кнопки. Общее правило
   .mfilt .msearch{order:9} уносит поиск в самый конец — там, где кнопок нет */
@media(min-width:701px){
  .filters.mfilt.card .msearch{order:1}
  .filters.mfilt.card > .btn{order:2}
}
/* кнопка создания в шапке: на телефоне — оранжевый крестик в правом верхнем углу
   (как .refadd в Справочнике), на широком экране подпись остаётся целиком */
@media(max-width:700px){
  .pagehead > .btn.phplus{padding:0;width:38px;height:38px;min-height:0;font-size:30px;
    font-weight:400;line-height:1;background:none;border:0;box-shadow:none;color:var(--accent)}
}

/* заявка 805: поиск и фильтры одного образца во всех разделах, кнопки создания — «+» */
/* «+» рисуется правилом .pagehead > .refadd .btn (заявка 800), но оно ловит только
   кнопку ВНУТРИ .refadd (форма, details) и ссылку-.refadd. Там, где кнопка сама несёт
   класс (депозиты, гости — у них onclick, оборачивать не во что), она оставалась
   оранжевой плашкой с надписью «+». Дописываем ей тот же вид. */
@media(max-width:700px){
  .pagehead > button.refadd{padding:0;width:38px;height:38px;font-size:30px;font-weight:400;
    line-height:1;display:inline-flex;align-items:center;justify-content:center;
    background:none;border:0;box-shadow:none;color:var(--accent)}
  /* у гостей заголовок и поиск разведены по строкам (заявка 794) — «+» встаёт
     в строку с заголовком, а не в строку сегментов */
  .pagehead.gph > .refadd.mobonly{order:-2}
}
/* заявка 801: минус в остатке — красным. Иначе .dc-sub (серый, ниже по файлу) забивает .neg */
.refcards .dc-sub.neg{color:var(--red);font-weight:600}
@media(max-width:700px){.pagehead > a.refadd.mobonly,.pagehead > button.refadd.mobonly{width:38px}}  /* 805: у плюсика-ссылки ширина под палец, а не по крестику */
/* 806: вкусовой профиль последней строкой карточки гостя в кипере */
.gc-taste{margin-top:6px;line-height:1.35}
@media(max-width:700px){.gcard > .gc-taste{flex:0 0 100%;font-size:12px;order:9}}
/* 807: показатели в карточке гостя на телефоне — по три в строку, мельче */
@media(max-width:700px){.cards.gstats{grid-template-columns:repeat(3,1fr);gap:6px}
.gstats .stat{padding:8px 8px}.gstats .stat .l{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gstats .stat .v{font-size:13px;margin-top:2px;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* 808/809: вкусовой профиль — цветные плашки в одну-две строки, заметка под ним; карандаш строго за цифрами */
.gc-taste{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gc-taste .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-note{margin-top:6px}
@media(max-width:700px){.gcard > .gc-taste{flex:0 0 100%;margin-top:6px;order:9}.gcard > .gc-note{flex:0 0 100%;order:10;font-size:12px;line-height:1.35}
.gc-taste .badge{font-size:11px;padding:2px 7px;line-height:16px}
.gcard .gc-n{margin-right:0}.gcard .gedit{margin-left:auto}}

/* ── заявка 810: нижние панели Офиса и Кипера — одной высоты и на одной линии ── */
/* Сами размеры (поля, значок 23px, подпись 11px, safe-area) свели ещё в 769 — замер
   на 393x793 даёт обеим полосам y=718.1 h=74.9 и кнопку 77x58.9. Расходились они не
   размером, а точкой опоры: в Кипере полоса стоит в конце колонки высотой в окно
   (правка в pos_base.html), в Офисе приклеена fixed к низу. Здесь остаётся отступ
   содержимого: он не учитывал вырез iPhone, и последняя строка листа пряталась под
   панелью, а сама панель садилась на системную черту. */
@media(max-width:640px){
  /* заявка 1430: панель стала ниже на 9px — отступ содержимого следом */
  .wrap{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
}

/* ── заявка 812: точка смены стоит в одной точке обеих оболочек ── */
/* Она жила в потоке шапки, а слева от неё в Офисе строка компании и каретка ▾ списка
   разделов, в Кипере — только квадратик лого. Точка уезжала на 65px при переходе и
   ещё раз ездила при смене юрлица (строка «Общее» короче названия компании). Вынимаем
   её из потока и прибиваем к одной координате: слева от неё теперь ничего не считается.
   Размер точки — киперный, 6px. Десктоп не трогаем: правило только для телефона. */
/* Заявка 1006: координату 56px пришлось снять — после того как лого ужалось (998/1003),
   точка в Офисе села ровно на строку компании, и текст лез на индикатор. Держим их
   в потоке сразу за лого, одинаково в обеих оболочках: лого → точка → подпись,
   зазоры настоящие. Строка компании в Офисе уходит правее точки (order) */
@media(max-width:600px){
  .topbar-in,.pos-top{position:relative}
  .topbar-in>.brandcol{display:contents}
  .topbar-in>.brandcol>.logomenu{order:-3}
  .topbar .mobshift{position:static;order:-2;transform:none;margin:0 0 0 8px}
  .topbar-in>.brandcol>.orgline{order:-1;margin:0 0 0 8px}
  /* 11px, а не 8: в кипере точка лежит внутри строки со своим отступом — так её центр
     встаёт на ту же координату, что в Офисе. Подпись отбита от точки на 8px */
  /* заявка 1022: своих внутренних полей у строки смены больше нет (их снял телефонный
     блок в pos_base), поэтому отступ добираем маржой — точка встаёт на ту же
     координату, что в Офисе */
  .pos-top .topshift{position:static;transform:none;margin:0 0 0 20px;gap:8px}
  .topbar .mobshift i{width:6px;height:6px}
}
/* 815: техкарты на телефоне мельче — больше строк в экран; маржа перед ценой с зазором */
@media(max-width:700px){.tccards .dc-row{padding:6px 12px;gap:8px;min-height:0}.tccards .dc-l b{font-size:13.5px}.tccards .dc-sub{font-size:11.5px;margin-top:1px}
.tccards .dc-a{font-size:13.5px}.tccards .dc-a .tc-m{margin-right:12px}}
/* 814: таблицы в карточке гостя на телефоне — строки ниже, шрифт мельче */
@media(max-width:700px){.gview td{padding:3px 8px;font-size:12.5px}.gview th{padding:4px 8px;font-size:10.5px}.gview .badge{padding:1px 7px;font-size:11px}}

/* ── заявка 818: комментарий последней строкой в карточке платежа на телефоне ──
   Листая список, надо понимать контекст: за что платили. Строка мелкая и серая, чтобы
   не спорила с заголовком, и не длиннее двух строк — иначе одна запись на пол-экрана. */
@media(max-width:700px){
  .dc-cmt{margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--muted);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* ── заявка 819: плашки платёжного документа — как в карточке гостя (.gstats выше),
   но в две колонки: показателей четыре, и в трёх «03.09.2026 21:41» обрезалось бы. */
@media(max-width:700px){.cards.paystats{grid-template-columns:1fr 1fr}}

/* ── заявка 820: блок-схема связанных документов на телефоне ──────────────────
   Ветки цепочки стояли в ряд с плашкой заказа, а плашка не уже 170px — на 393px
   ряд не влезал и вбок ехала ВСЯ страница. Ниже только для ≤700px: каждый ряд —
   стопкой, стрелка поворачивается вниз, ветки отбиты линией слева. Если схема
   всё же не влезла (длинное название), крутится сама схема, а не страница. */
.chainflow>.chain-row{align-items:flex-start}          /* было inline в op_view.html */
.chainflow>.chain-row>.chain-arrow{margin-top:22px}
@media(max-width:700px){
  .chainflow{overflow-x:auto;padding:2px}
  .chainflow .chain-row,.chainflow>.chain-row{flex-direction:column;align-items:stretch;gap:6px}
  .chain-branches{gap:14px;padding-left:12px;border-left:2px solid var(--line)}
  /* ветки отбиты рамкой слева — настольные линии-отводы тут лишние (заявка 1421) */
  .chain-branches > .chain-row::before,.chain-branches > .chain-row::after,
  .chain-branches .chain-row > a.chain-box + a.chain-box::before{display:none}
  .chain-branches .chain-row > a.chain-box + a.chain-box{margin-left:0}
  .chain-box{min-width:0;padding:8px 10px}
  .chain-box .t,.chain-box .d{font-size:11.5px}
  .chain-box .n,.chain-box .s{font-size:13.5px}
  /* «→» между документами становится «↓» — связь идёт сверху вниз */
  .chain-arrow,.chainflow>.chain-row>.chain-arrow{font-size:15px;line-height:1;
    align-self:flex-start;margin:0 0 0 8px;transform:rotate(90deg)}
}

/* ── заявка 821: подписи столбцов в карточке позиции состава ──────────────────
   На телефоне строка выглядела как «6 × 2.42 14.52» — какое число что значит,
   было не угадать. Над каждым числом — мелкая серая подпись (как .l в .stat),
   разделитель «×» больше не нужен. Поля и отступы ужаты, чтобы подписи не
   удлинили строку. Правило одно на все документы с составом: приёмка, списание,
   перемещение, заказ поставщику, заказ покупателя, отгрузка (все — op_view.html);
   у инвентаризации колонки свои, она в .linecards не входит. */
@media(max-width:700px){
  .linecards tr{padding:6px 0}
  .linecards td.rownum{min-height:34px}
  .linecards td:has(.edname),.linecards td:has(input[list=items_dl]){font-size:14px}
  .linecards td:has([name=qty]),.linecards td:has([name=price]),
  .linecards td:has(.rowsum){display:block}
  /* колонка НДС по-прежнему появляется только при включённом НДС (.vat-on) */
  .vat-on .linecards td.vatcol{display:block}
  .linecards td:has([name=qty])::after{content:none}
  .linecards td:has([name=qty])::before{content:'кол-во'}
  .linecards td:has([name=price])::before{content:'цена'}
  .linecards td:has(.rowsum)::before{content:'сумма'}
  .linecards td.vatcol::before{content:'НДС'}
  .linecards td:has([name=qty])::before,.linecards td:has([name=price])::before,
  .linecards td:has(.rowsum)::before,.linecards td.vatcol::before{display:block;
    font-size:10.5px;line-height:1.35;font-weight:600;color:var(--muted)}
  /* поля ужаты с 40px, но не ниже 38: ниже палец начинает мазать по соседней колонке */
  #edlines.linecards td input{min-height:38px;padding:4px 7px}
  #edlines.linecards td select{min-height:38px;padding:4px 7px}
  .linecards td.vatcol select{min-width:0!important;width:100%}
  /* «принято/остаток» у заказа поставщику подписаны строчно — их держим мельче в тон */
  .linecards[data-po] td:nth-child(4),.linecards[data-po] td:nth-child(5){font-size:12.5px}
}

/* ── заявка 823: причина списания на телефоне ─────────────────────────────────── */
/* Селект стоял вторым в строке и получал половину ширины — в 116px не влезала ни
   подпись пустой ячейки, ни длинные причины из справочника («Угощение за счёт
   заведения»). Поле идёт своей строкой, как поле даты выше по файлу. */
@media(max-width:700px){
  .frow .field:has(> select[name=reason]){flex:1 0 100%}
}

/* ── заявка 824: комментарий документа читается целиком ───────────────────────── */
/* Однострочный input прятал хвост длинного комментария и на телефоне, и в вебе.
   Теперь это textarea, которую скрипт в base.html растит по тексту: полоса
   прокрутки не нужна, тянуть за угол тоже незачем. */
textarea.cmt{resize:none;overflow:hidden;line-height:1.35}
@media(max-width:700px){
  /* в шапке документа строки «подпись — значение»; комментарий длинный, ему нужна
     вся ширина, поэтому подпись встаёт над полем */
  .ophead .field:has(> textarea.cmt){display:block;padding:8px 0}
  .ophead .field:has(> textarea.cmt) > label{margin-bottom:4px}
  .ophead .field > textarea.cmt{width:100%;max-width:none;text-align:left;
    border-color:var(--line);background:#fff;padding:8px 10px}
}

/* ── заявка 826: «Сменить гостя» на телефоне — в строке с именем, справа ───────
   Кнопка занимала отдельную строку под заметками, и полоска гостя съедала треть
   экрана продаж. Порядком flex поднимаем её на первую строку: имя слева, кнопка
   в правом верхнем углу. Баланс с «открыл … до подарка» уходит своей строкой
   ниже — иначе он втискивается между именем и кнопкой. Размер как у мелких
   кнопок в списках: на телефоне это подпись к имени, а не главное действие.
   На планшете и шире строка прежняя. */
@media(max-width:700px){
  .gbar__row>b{order:-2}
  .gbar__row>span:last-child{order:-1;margin-left:auto}
  .gbar__row>.sub{flex-basis:100%}
  .gbar__row>span:last-child .btn.sm{min-height:32px;padding:5px 10px;font-size:12.5px}
}

/* ── заявка 827: под липкой полосой «Меню / Чек» просвечивал список ────────────
   Прокручивается .pos-wrap со своим padding:16px, и sticky-полоса прилипала на
   эти 16px ниже шапки — в щель было видно, как под ней едут кнопки и позиции.
   Отрицательный top поднимает полосу вплотную к шапке. На 601–700px у .pos-wrap
   и боковые отступы 16px, а полоса раздвинута на 12 — те же 4px просвета с краёв.
   Полосу итога и оплаты растягиваем во всю ширину: боковые просветы по 8px
   показывали ту же уезжающую строку чека. Запас снизу у списка прежний. */
@media(max-width:700px){
  .pos-mtabs{top:-16px}
  .pos-grid.m-check .pos-check__foot,.cartbar,.tblact{left:0;right:0;border-radius:0;
    border:0;border-top:1px solid var(--line);box-shadow:0 -8px 20px -14px rgba(0,0,0,.35)}
}
@media(min-width:601px) and (max-width:700px){
  .pos-mtabs{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}

/* ── заявка 831: плашки открытой смены на телефоне — три в ряд ────────────────
   «Нал на старте» и «внесения/изъятия» слиты в шаблоне в одну плашку: нетто
   движений — поправка к стартовому налу, а не отдельный показатель. Осталось три
   плашки; в две колонки они занимали пол-экрана, а «2 090.50» цифрой в 34px
   разрывалось на две строки. Сетка и размеры — как в карточке гостя (.gstats),
   мелкие подписи внутри тёмных плашек ужаты, чтобы каждая легла в одну строку. */
@media(max-width:700px){
  .shift-hero .cards{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
  .shift-hero .stat{padding:8px 8px}
  .shift-hero .stat .l{font-size:11px;line-height:1.25}
  .shift-hero .stat .v{font-size:13px;margin-top:2px;padding-bottom:0;white-space:nowrap}
  .shift-hero .stat .sub{font-size:10.5px;line-height:1.3;margin-top:2px}
}

/* ── заявка 829: закрытие смены на телефоне — строками, как шапка документа ───
   «Наличных по факту» и «Выплата в кассу» стояли парой в ряд: подписи ломались на
   разное число строк, поля разъезжались по вертикали, а «ожидается» висело только
   под левым. Вид берём готовый — .ophead (подпись слева, число справа), здесь лишь
   ставим поля друг под другом и возвращаем «ожидается» на свою строку под числом. */
@media(max-width:700px){
  .shclose{display:block}
  .shclose .field{flex-wrap:wrap}
  .shclose .field>.sub{flex:1 0 100%;max-width:none;text-align:right;margin-top:-2px}
  .shclose>.btn{margin-top:12px}
}

/* ── заявка 830: история смен на телефоне — карточками, как «Заказы» ──────────
   Колонки те же, что у .ordcards (заявка 803): номер слева отдельным столбцом,
   кассир жирным, время и расхождение подписью, справа выручка и нал мелким. */
.shcards .dc-no{flex:none;min-width:26px;padding-top:2px;font-weight:700;font-size:13px;
  color:var(--muted);font-variant-numeric:tabular-nums}
.shcards .dc-l{flex:1;min-width:0}
.shcards .dc-sub{display:block}
.shcards .dc-sub .badge{margin-left:2px}
.shcards .dc-a{text-align:right}
.shcards .dc-a .sub{display:block;font-weight:400;font-size:12px}

/* заявка 830: где таблицу на телефоне заменили карточками, поле «Поиск в таблице»
   (его вешает sort.js) фильтрует то, чего не видно. Прячем его вместе с таблицей. */
@media(max-width:700px){.s-bar:has(+ .tscroll.hide-mob){display:none}}

/* ── заявка 834: в шапке документа «Проведено» — строкой над кнопками ──────────
   На телефоне галочка стояла МЕЖДУ «Создать документ» и «Удалить» (у кнопок
   order:10, у галочки 9), и кнопки читались как два несвязанных куска. Кнопку
   «Создать документ» уводим в тот же конец — тогда сверху галочка на всю ширину,
   под ней одной строкой «Создать документ» и справа «Удалить». Правило только для
   шапки с галочкой: на листах колонки и сортировка — тоже .colcfg, их не трогаем. */
@media(max-width:700px){
  .pagehead:has(form label.chk) > details.colcfg{order:10;margin-right:0}
}

/* ── заявка 833: позиция состава — одной строкой, числа целиком ────────────────
   Было две-три строки на позицию (название · числа · «принято/остаток»), и при
   этом числа обрезались: колонки жёсткие (68 и 74px), внутри поле с обязательными
   16px (меньше — Safari зумит страницу при фокусе) и padding 7px, на знаки
   оставалось 54 и 60px — это 5–6 цифр, а input[type=number] хвост не прячет
   многоточием, а просто режет. Теперь строка одна: номер и название слева
   (длинное — с многоточием), три поля справа. «Принято/остаток» заказа
   поставщику — мелкой строчкой под ними, это пояснение, а не данные строки. */
@media(max-width:700px){
  /* колонки задаёт таблица, строка их наследует (subgrid) — иначе у каждой строки
     ширины свои, и поля соседних позиций стоят вразнобой */
  .linecards tbody{display:grid;column-gap:4px;
    grid-template-columns:28px minmax(0,1fr) 54px 60px 72px 30px}
  .linecards tr{grid-column:1/-1;grid-template-columns:subgrid;gap:2px 4px}
  /* крестик и плюс были 36px — в колонке 30px они вылезали за карточку и таблица
     начинала ездить вбок; ужимаем по ширине, высоту тач-цели оставляем */
  #edlines.linecards .xbtn.del{width:30px;height:40px;min-height:40px}
  #edlines.linecards .xbtn.plus{width:28px;height:40px;min-height:40px}
  .linecards td.rownum{grid-area:1/1}
  .linecards td:has(.edname),.linecards td:has(input[list=items_dl]){grid-area:1/2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
  .linecards td:has([name=qty]){grid-area:1/3}
  .linecards td:has([name=price]){grid-area:1/4}
  .linecards td:has(.rowsum){grid-area:1/5}
  .linecards td:has(.xbtn.del){grid-area:1/6}
  /* ставка НДС (когда налог включён) — отдельной строчкой под числами, не на всю
     ширину: иначе селект перевешивает саму позицию */
  .vat-on .linecards td.vatcol{grid-area:3/3/auto/7}
  .linecards[data-po] td:nth-child(4){grid-area:2/2/auto/4}
  .linecards[data-po] td:nth-child(5){grid-area:2/4/auto/7}
  .linecards[data-po] td:nth-child(4),.linecards[data-po] td:nth-child(5){
    font-size:11px;color:var(--muted);text-align:left}
  /* заявка 910: у заказа покупателя (data-wo) 4-я и 5-я ячейки — «Отгружено» и «Доступно»,
     той же строчкой, что «принято/остаток» у заказа поставщику; скидка — третьей
     строкой под ценой, ставка НДС (когда включён) справа от неё */
  .linecards[data-wo] td:nth-child(4){grid-area:2/2/auto/4}
  .linecards[data-wo] td:nth-child(5){grid-area:2/4/auto/7}
  .linecards[data-wo] td:nth-child(4)::before{content:'отгружено '}
  .linecards[data-wo] td:nth-child(5)::before{content:'доступно '}
  .linecards[data-wo] td:nth-child(4),.linecards[data-wo] td:nth-child(5){
    font-size:11px;color:var(--muted);text-align:left}
  .linecards[data-wo] td:has([name=disc]){grid-area:3/3/auto/5;display:flex;align-items:center;gap:4px}
  .linecards[data-wo] td:has([name=disc])::before{content:'скидка %';color:var(--muted);font-size:11px;white-space:nowrap}
  .vat-on .linecards[data-wo] td.vatcol{grid-area:3/5/auto/7}
  /* пустая строка набора: в 90px название не ввести — ей первая строка целиком,
     поля встают под своими колонками второй строкой */
  .linecards tr:has(.plus) td:has(input[list=items_dl]){grid-area:1/2/auto/6}
  .linecards tr:has(.plus) td:has([name=qty]),
  .linecards tr:has(.plus) td:has([name=price]),
  .linecards tr:has(.plus) td:has(.rowsum){grid-row:2}
  /* поля ужимаются по бокам, а не по шрифту: 16px обязательны */
  #edlines.linecards td input{padding:4px 4px}
  /* у ячеек состава своё правило `#edlines td{padding:3px 6px}` (заявка 519, для
     десктопной формы) — оно сильнее классового и съедало по 12px на колонку:
     крестик вылезал за карточку, а название оставалось без места. По бокам ноль,
     колонки разводит gap строки */
  #edlines.linecards td{padding-left:0;padding-right:0}
}
/* поля, которые меряются по содержимому (Chrome 123+/Safari 26+): короткое число
   отдаёт ширину названию, длинное берёт своё и не режется. Где не поддержано —
   остаются фиксированные колонки выше: в сумму влезает «1234.56», в цену «123.45». */
@media(max-width:700px){
  @supports (field-sizing:content){
    /* minmax(0,auto): длинное число забирает своё, но не выпихивает таблицу за
       экран — при нехватке колонки ужимаются, а не рвут карточку вбок */
    .linecards tbody{grid-template-columns:28px minmax(44px,1fr)
      minmax(0,auto) minmax(0,auto) minmax(0,auto) 30px}
    #edlines.linecards td input.num{field-sizing:content;width:auto;
      min-width:44px;max-width:92px}
  }
}

/* ── заявка 837: пояснение к «смену закрыть нельзя» — под кружком «i» ── */
/* Три строки текста в оранжевой плашке съедали пол-экрана телефона, а читают их один
   раз. Кружок «i» тот же, что у подписей полей (заявка 714), только тут он не на
   наведении: на телефоне hover нет, поэтому текст раскрывает <details> — тап по
   строке заголовка. Список столов остаётся на виду, он и есть работа. */
.ihelpd > summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  gap:6px;min-height:32px}
.ihelpd > summary::-webkit-details-marker{display:none}
.ihelpd .ihelp{flex:none;width:18px;height:18px;margin:2px 0 0;font-size:11px}
.ihelpd[open] .ihelp{border-color:var(--accent);color:var(--accent)}

/* ── заявки 839/840: карандаш правки гостя всегда в строке с цифрами ── */
/* Карточка на телефоне — flex с переносом, и <details> правки стоит в разметке ПОСЛЕ
   кнопки «Открытый чек». Кнопка занимает всю ширину (flex:0 0 100%), поэтому карандаш
   переносило строкой ниже — но только у гостей с открытым чеком (839). При раскрытии
   формы details сам становился во всю ширину, и карандаш уезжал ещё ниже (840).
   Лечим причину: summary больше не участвует в переносе — он в правом верхнем углу
   карточки, на своём месте в обоих случаях, а форма раскрывается во всю ширину под
   кнопкой. Место под карандаш отдаёт столбик цифр. */
@media(max-width:700px){
  .gcard{position:relative}
  .gcard .gedit,.gcard .gedit[open]{flex:0 0 100%;margin:0}
  .gcard .gedit > summary{position:absolute;top:8px;right:10px;margin:0}
  .gcard .gc-n{margin-right:36px}
}

/* ── заявка 842: карандаш правки гостя в углу карточки на всех ширинах ── */
/* На планшете и компьютере summary был кнопкой «Изменить тег» во всю ширину и занимал
   в каждой карточке отдельную строку. Подпись убрали из разметки, а решение 839/840 —
   карандаш абсолютом в правом верхнем углу, форма раскрывается ниже во всю ширину —
   перестало быть телефонным: те же правила теперь общие. */
.gedit-ic{display:flex;width:18px;height:18px}
.gedit-ic svg{width:18px;height:18px}
.gcard{position:relative}
.gcard .gedit,.gcard .gedit[open]{margin:0}
.gcard .gedit > summary{position:absolute;top:8px;right:10px;margin:0;width:auto;
  min-height:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center}
/* длинному имени нельзя заезжать под карандаш; на телефоне место отдаёт столбик цифр (839) */
@media(min-width:701px){.gcard .gc-nm{padding-right:34px}}

/* ── заявка 844: строка чека на маке уезжала за край панели ──
   Корень не в маке, а в арифметике строки. У .chk-line пять несжимаемых блоков:
   миниатюра 34 + время 32 + карандаш 38 + форма «− 1 +» 110 + сумма 76 = 290px,
   плюс пять зазоров по 8 = 330px. Сжиматься умеет только название, и ему стоял
   min-width:140px. На ноуте 1280 панель чека отдаёт списку 468px — имени остаётся
   138px, на два пикселя меньше минимума, и flex-wrap срывает последний блок (сумму)
   на вторую строку. Плюсик при этом упирается в самый край панели, строка вырастает
   с 47px до 76px, а суммы соседних строк стоят на разных местах — то справа, то слева.
   Слева они оттого, что margin-left:auto висел на <summary class="sum">, а флекс-
   элементом строки является <details class="pricepop">: правило било мимо и не
   работало никогда. Чиним обе вещи: прижимаем сумму за сам details и добираем
   имени 22px запаса (зазор 6 вместо 8, минимум 96 вместо 140). Телефон не трогаем —
   там строка в два этажа по своей ширине и Арса она устраивает. */
@media(min-width:701px){
  .chk-line{gap:6px}
  /* flex-wrap режет строки по БАЗОВОЙ ширине элементов, а не по сжатой: пока у
     названия flex-basis:auto (= ширина текста), длинное имя вроде
     water "Perrier" (carbonated) само по себе перевешивает строку, и сумма падает
     вниз ещё до того, как название успеет сжаться. Фиксированная база это снимает */
  .chk-nm{flex-basis:96px;min-width:96px}
  /* прижимает сумму вправо, когда строка всё-таки перенеслась (узкая панель после
     перетаскивания границы): в нормальной строке free space забирает .chk-nm,
     и auto-отступ ничего не меняет */
  .chk-line .pricepop{margin-left:auto}
}

/* ── заявка 1032: строка чека на телефоне в один этаж ─────────────────────────
   «− 1 +» и сумма стояли ВТОРОЙ строкой под названием, и одна позиция занимала
   93–111px: в экран влезало три-четыре. Ставим всё в одну строку, кнопки количества
   мельче (28px вместо 44 — палец попадает, ряд не растёт), название сжимается и
   переносится внутри себя. Время добавления на узком экране убираем: оно есть
   в истории чека, а места отнимает больше, чем даёт. */
@media(max-width:700px){
  .chk-line{flex-wrap:nowrap;gap:6px;padding:4px 0}
  .chk-line .chk-nm{flex:1 1 auto;min-width:0}
  .chk-line .n{font-size:13px}
  .chk-line .qtybtn{width:28px;height:28px;min-height:28px;font-size:15px;flex:none}
  .chk-line form[action$="/qty"]{gap:4px!important;flex:none}
  .chk-line form[action$="/qty"] b{min-width:16px!important;font-size:13px}
  .chk-line .pricepop{margin-left:0;flex:none}
  .chk-line .sum{min-width:58px;font-size:13.5px}
  .chk-line .notepop .qtybtn svg{width:13px;height:13px}
}
@media(max-width:430px){ .chk-line .addedat{display:none} }
/* заявки 1140/1141: время пробития на телефоне пропадало совсем (строка в один этаж).
   Возвращаем его мелким под суммой: колонка чисел у строки уже есть, вширь она
   не растёт, а «когда пробили» в зале спрашивают постоянно */
@media(max-width:700px){
  .chk-line .sum{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
  .chk-line .sum[data-at]:not([data-at=""])::after{content:attr(data-at);font-size:10.5px;
    font-weight:500;opacity:.62;font-variant-numeric:tabular-nums}
}

/* ── заявка 846: на телефоне «Итого» — кнопка, оплата выезжает снизу ──────────
   Подошва чека (итог + два ряда кнопок) занимала ~треть экрана 393×793, и на
   список позиций оставалась полоска. Теперь в закрытом виде подошва — одна
   кнопка «Итого N AED» (сумма на кнопке, как просил Арс), по нажатию снизу
   выезжают строки Сумма/Скидка и те же кнопки оплаты в две колонки.
   Механика — флажок .paytgl + <label class="total-row">: без скрипта, формы
   /close не тронуты. На планшете и шире (>700) флажок выключен, подошва
   рисуется как раньше — кнопки всегда видны, «Итого» обычной строкой. */
.paytgl{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
/* «Итого» стало <label>, и на него село общее правило label{color:muted;margin-bottom:4px}
   из шапки файла — на планшете строка итога посерела. Возвращаем ей прежний вид */
label.total-row{color:var(--ink);margin-bottom:0}
@media(min-width:701px){.paytgl{display:none}}  /* лишний таб-стоп на десктопе не нужен */
@media(max-width:700px){
  /* закрыто: в подошве видна только кнопка «Итого» */
  .pos-grid.m-check .pos-check__foot .paytgl:not(:checked)~*:not(.total-row){display:none}
  /* и списку позиций достаётся высота, которую раньше съедали кнопки */
  .pos-grid.m-check:has(.pos-check__foot .paytgl:not(:checked)){padding-bottom:140px}
  .pos-grid.m-check .pos-check__foot{padding:0 16px}
  .pos-grid.m-check .pos-check__foot:has(.paytgl:checked){padding-top:10px;padding-bottom:12px}
  /* кнопка во всю ширину полосы: боковые отступы подошвы отыгрываются отрицательным
     полем, иначе в закрытом виде кнопка висела бы с полями по 16px */
  .pos-grid.m-check .pos-check__foot .total-row{margin:0 -16px;padding:0 16px;border:0;
    border-radius:0;min-height:44px;justify-content:flex-start;gap:10px;font-size:16px;
    background:var(--accent-btn);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* заявка 949: полоса «Итого» была 56px — ниже, 44 хватает пальцу; заявка 948:
     «Обычно берёт» мельче, это подсказка, а не данные чека */
  .favs{font-size:11.5px}
  .pos-grid.m-check .pos-check__foot .total-row .num{margin-left:auto;color:#fff}
  .pos-grid.m-check .pos-check__foot .total-row:active{opacity:.92}
  .pos-grid.m-check .pos-check__foot .paytgl:focus-visible~.total-row{outline:2px solid #fff;outline-offset:-4px}
  /* галочка-стрелка: вверх, когда лист открыт */
  .pos-grid.m-check .pos-check__foot .total-row::after{content:'';width:9px;height:9px;
    border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(-135deg);
    transition:transform .18s cubic-bezier(.23,1,.32,1)}
  .pos-grid.m-check .pos-check__foot .paytgl:checked~.total-row::after{transform:translateY(2px) rotate(45deg)}
  /* одинокая кнопка «Депозит + нал» лежала в половину ширины — в листе оплаты
     она занимает всю строку */
  .pos-grid.m-check .pos-check__foot .paybtns>.btn:only-child{grid-column:1/-1}
  /* выезд листа: только opacity/transform, 200ms, ease-out */
  .pos-grid.m-check .pos-check__foot .paytgl:checked~*:not(.total-row){
    animation:paysheet .2s cubic-bezier(.23,1,.32,1)}
}
@keyframes paysheet{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pos-check__foot .total-row::after{transition-duration:.01ms}
  .pos-check__foot .paytgl:checked~*:not(.total-row){animation-duration:.01ms}
}

/* заявка 848: на телефоне таблица депозитов и должников шире экрана, и кнопка
   «Движения» уезжала за правый край — её колонка скрыта (.nomob), а вся строка
   ведёт туда же. Имя гостя внутри строки перестаёт быть отдельной ссылкой:
   иначе палец попадает по самой крупной цели и уходит в карточку, а не в движения */
@media(max-width:700px){
  .deprows tr.rowlink a{pointer-events:none}
}

/* заявка 850: «Чеки» в карточке гостя не влезали в 393px — виновата дата одной
   строкой («05.09.2026 23:46» = 122px из 350). Разрешаем ей перенос: у остальных
   ячеек .num пробелов нет, они не переносятся */
@media(max-width:700px){
  .tscroll table.gchecks td.num{white-space:normal}
}

/* ── заявка 853: документ на телефоне сначала читают, правят — по карандашу ────── */
/* «Тело документа заполнять по образцу, карандашик в правом верхнем углу переходит
   в форму редактирования» (Арс). До этого на 393px карточка ЛЮБОГО складского
   документа была сплошной формой: поля шапки, три инпута в каждой строке состава,
   пустая строка набора внизу — заказ из трёх позиций не помещался в экран.
   Ниже — только ≤700px. Просмотр: состав списком (кружок, «артикул · название»,
   «кол-во × цена» слева, сумма справа), шапка строками, итоги строкой. Правку
   включает флажок .opedt: разметка форм остаётся в DOM, её прячет CSS — приём тот
   же, что у листа оплаты (заявка 832). На широком экране не меняется ничего. */
.opedt{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.opro,.opro-t,.opro-h,.opedt-b,.opedt-c{display:none}
@media(min-width:701px){.opedt{display:none}}   /* лишний таб-стоп на десктопе не нужен */
@media(max-width:700px){
  .opro{display:block}
  .opro-t,.opro-h{display:block}
  .opedt-b{display:inline-flex}
  .opedt-c{display:inline-flex;margin:0 0 0 auto;order:0}
  /* два режима одной карточки: .roonly — просмотр, .edonly — правка. Правило ловит и
     сами карточки-соседи флажка, и всё, что лежит у них внутри */
  .opedt:not(:checked)~.edonly,.opedt:not(:checked)~* .edonly{display:none!important}
  .opedt:checked~.roonly,.opedt:checked~* .roonly{display:none!important}

  /* карандаш — там же, где «+» в справочнике (заявки 796/800): оранжевый значок
     в правом верхнем углу, без рамки и заливки */
  .pagehead>label.refadd.opedt-b{width:38px;height:38px;flex:none;margin:0 0 0 auto;order:0;
    align-items:center;justify-content:center;background:none;border:0;color:var(--accent);
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pagehead>label.refadd.opedt-b svg{width:21px;height:21px}
  .pagehead>label.opedt-c{min-height:38px}

  /* шапка для чтения: те же строки «подпись — значение», но плотнее формы —
     читать проще, чем попадать пальцем */
  .opro-h .field{min-height:0;padding:7px 0}

  /* строка состава: номер · кружок · название · «кол-во × цена» · сумма справа.
     Заявка 1091: номер, картинка и сумма выровнены по центру строки — иначе номер
     висел у верхнего края и было непонятно, к чему он относится */
  .opro-r{display:flex;align-items:center;gap:10px;padding:9px 0;color:inherit;
    text-decoration:none;border-bottom:1px solid var(--line)}
  .opro-r:last-child{border-bottom:0}
  /* заявка 1088: номер позиции — узкой колонкой слева, по ней строку и называют */
  .opro-n{flex:none;width:16px;text-align:right;color:var(--muted);font-size:12.5px;
    line-height:1.3;font-variant-numeric:tabular-nums}
  .opro-r{gap:8px}
  .opro .rc-img{width:34px;height:34px;border-radius:50%;font-size:12.5px;flex:none}
  .opro-l{flex:1;min-width:0;line-height:1.3}
  .opro-l b{display:block;font-weight:600;font-size:14.5px}
  .opro-q,.opro-x{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
  .opro-s{flex:none;font-weight:600;font-size:14.5px}
  /* итоги просмотра рисует .optot (заявка 774) — здесь только верхняя черта списка */
  .opro-t{margin-top:0}
}

/* заявка 848 (продолжение): без кнопки таблица всё ещё на 22px шире экрана из-за
   даты «04.09.2026 22:26» одной строкой — переносим её. Только эту колонку:
   в суммах пробел разделяет тысячи, и «1 500.00» разъехалось бы на две строки */
@media(max-width:700px){
  .tscroll table.deprows td[data-c=last]{white-space:normal}
}
/* заявка 853: у «+» в шапке своё правило .pagehead > .refadd{display:none} (заявка 800),
   и по силе оно бьёт одиночный класс — карандашу display задаём тем же селектором,
   что и вид, иначе кнопка не появляется вовсе */
@media(max-width:700px){.pagehead>label.refadd.opedt-b{display:inline-flex}}

/* заявка 848 (там же): ширину колонки держал не текст даты, а заголовок
   «Последнее движение» одной строкой — переносим и его, иначе правило выше не
   даёт ничего и таблица остаётся шире экрана */
@media(max-width:700px){
  .tscroll table.deprows th[data-c=last]{white-space:normal}
}

/* заявка 857: плашки нерассчитанных столов в блоке «Смену закрыть нельзя» шли
   по одной в строку — восемь столов занимали весь экран телефона, поля закрытия
   уезжали вниз. На телефоне два столбца и компактнее; на компьютере прежний ряд */
.otabs{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:700px){
  .otabs{display:grid;grid-template-columns:1fr 1fr}
  .otabs > .btn{min-height:36px;padding:6px 8px;font-size:12px;line-height:1.3;
    white-space:normal;overflow-wrap:anywhere;justify-content:flex-start;text-align:left}
}
/* заявка 1318: перенос «где угодно» разрывал пополам саму сумму — «6 » на одной
   строке, «433.24» на другой. Имя стола и гостя переносится, число остаётся целым */
.otabs .osum{white-space:nowrap}

/* заявка 858: любимые вкусы приходят одной строкой через запятую, а бейдж стоял
   в white-space:nowrap — авто-минимум флекс-элемента растягивал .gc-taste шире
   карточки, и список гостей приходилось листать вбок. На телефоне бейдж переносится
   по строкам, ширину задаёт карточка. Тот же класс лечит профиль в чеке (заявка 843) */
@media(max-width:700px){
  .gc-taste{min-width:0}
  .gc-taste .badge{white-space:normal;overflow:visible;text-overflow:clip;
    overflow-wrap:anywhere;max-width:100%;line-height:1.35}
}

/* ── заявка 855: под кнопкой «Итого» просвечивал едущий список ────────────────
   Полоса итога (и такая же полоса корзины в меню) висит fixed на
   bottom:calc(72px + env(safe-area-inset-bottom)), где 72 = высота таб-бара в
   браузере (8 + ряд 59 + 8). Но у самого таб-бара низ считается не суммой, а
   max(8px, env(...)) — заявка 836. В PWA с полосой «домой» 34px таб-бар вырастает
   до 8+59+34 = 101, а полоса поднимается на 72+34 = 106: между ними остаются те
   самые 5px, в которые видно прокрутку. Считаем по той же формуле, что и таб-бар:
   без safe-area выходит прежние 72px (браузер и планшет не меняются), в PWA — 98,
   и «Итого» садится вплотную к вкладкам. Правило ровно до 600px — там же, где
   живёт max() у таб-бара; на 601–700 у него низ считается суммой, и полоса уже
   стоит верно. */
@media(max-width:600px){
  .pos-grid.m-check .pos-check__foot,.cartbar{
    bottom:calc(64px + max(8px, env(safe-area-inset-bottom)))}
}

/* ── заявка 859: плашки меню на телефоне — четыре в ряд ───────────────────────
   Плитка в 152px давала на 393px две штуки в ряд: пять позиций на экран, и до
   пива приходилось листать. Плитка ~86px с картинкой 58px и названием в две
   строки даёт четыре в ряд и втрое больше позиций в кадре; высота ~120px, палец
   попадает. auto-fill, а не жёсткие 4 колонки: на узком 320px останется три
   плитки того же размера, а не четыре нечитаемых. Планшет и десктоп не трогаем. */
@media(max-width:600px){
  /* заявка 947: и группы меню на телефоне компактнее — чип 36px вместо 44,
     в ленту влезает на одну-две группы больше */
  .pos-menu .cat-chips{gap:6px;margin-bottom:10px}
  .pos-menu .cat-chip{min-height:36px;padding:7px 14px;font-size:13px}
  .pos-menu .menu-btns{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
  .pos-menu .menu-btn{padding:6px;min-height:0;gap:5px;border-radius:12px}
  /* заявки 1273/1274: 58px — это полоска шире, чем выше: у бутылки срезало горлышко
     и дно, «предмет взлетал». 76px — квадрат по ширине плитки, предмет виден целиком,
     как на снимке банки, который Арс назвал образцом */
  .pos-menu .menu-btn .mimg{height:76px;border-radius:8px}
  /* имя обрезаем двумя строками: у «Champagne "Moet & Chandon"» в 78px иначе
     шесть строк, и плитки в ряду разной высоты */
  .pos-menu .menu-btn .mname{font-size:11.5px;line-height:1.2;padding:0 2px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pos-menu .menu-btn .mprice{font-size:12.5px;padding:0 2px 2px}
  .pos-menu .menu-grp h3{font-size:12px;margin-bottom:6px}
}

/* заявка 860: сумма движения депозита — ссылка в его документ (чек или карточка
   платежа). Цвет держим свой, «+» зелёный и «−» красный: он и есть смысл цифры,
   синева ссылки его бы стёрла. Что это ссылка, показывает подчёркивание */
.deplink{color:inherit;text-decoration:underline dotted currentColor;
  text-underline-offset:3px;text-decoration-thickness:1px}
.deplink:hover{text-decoration-style:solid}

/* заявка 861: быстрая панель на «Документах». Свайп строки влево (только палец)
   выдвигает её и открывает справа жёлтую звезду — как в МоёмСкладе; звезда кладёт
   раздел плашкой над первой группой, повторный свайп убирает. На мыши свайпа нет,
   там звезда проступает по наведению. */
.docfavbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 2px}
.docfavbar:empty{display:none}
.docfavbar a,.wrap .docfavbar a{padding:9px 13px;border-radius:11px;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:13.5px;
  line-height:1.15;text-decoration:none}
.docfavbar a:active{color:var(--accent)}
/* строка едет по transform, звезда лежит под ней; overflow режет вылет за карточку */
.docrow{position:relative;overflow:hidden;touch-action:pan-y}
.docrow>a,.wrap .docrow>a{position:relative;z-index:1;background:var(--card);
  transition:transform .24s cubic-bezier(.23,1,.32,1)}
.docrow.sw>a{transform:translateX(-72px)}
/* разделители: раньше их держал «.doclist a:last-child», теперь строка обёрнута в .docrow */
.doclist .docrow a{border-bottom:1px solid var(--line)}
.doclist .docrow:last-child a{border-bottom:0}
.docstar{position:absolute;z-index:0;top:0;right:0;bottom:0;width:72px;display:flex;
  align-items:center;justify-content:center;padding:0;border:0;border-radius:0;
  background:#F5C542;color:#fff;cursor:pointer}
.docstar svg{width:23px;height:23px}
.docstar.on svg{fill:currentColor}
@media (min-width:701px){
  .docrow>a{transition:none}
  .docstar{z-index:2;right:26px;width:30px;background:none;color:var(--muted);
    opacity:0;transition:opacity .15s cubic-bezier(.23,1,.32,1)}
  .docrow:hover .docstar,.docstar:focus-visible,.docstar.on{opacity:1}
  .docstar.on{color:#E0A800}
}
@media (prefers-reduced-motion:reduce){.docrow>a{transition-duration:.12s}}

/* заявка 863: себестоимость в техкартах на телефоне — строкой под ценой продажи
   (была рядом с составом слева), тот же размер 11.5px, что и раньше */
@media(max-width:700px){
  .tccards .dc-a{display:flex;flex-direction:column;align-items:flex-end}
  .tccards .dc-a .tc-cost{font-size:11.5px;font-weight:400;color:var(--muted);margin-top:1px}
}

/* ── заявка 864: плашки карточки товара на телефоне — размером как в карточке гостя
   (.gstats, 1353), но в две колонки: подписи длиннее («Остаток в деньгах (закуп)»),
   в трёх колонках они бы обрезались. Подписи переносятся, число — одной строкой. */
@media(max-width:700px){
  .cards.istats{grid-template-columns:1fr 1fr;gap:6px}
  .istats .stat{padding:8px 8px}
  .istats .stat .l{font-size:11px;line-height:1.25}
  .istats .stat .v{font-size:13px;margin-top:2px;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .istats .stat .sub{font-size:10.5px;line-height:1.3;margin-top:2px}
}
/* Заявки 867–869: карточки гостя/номенклатуры/меню на телефоне.
   869: кнопка «Назад» в карточках спрятана — назад возвращаются смахиванием влево.
   868: строка состава техкарты влезает в экран без прокрутки, «Убрать» — крестик */
@media(max-width:700px){
  .pagehead.nobk>.backslot{display:none}
  .pagehead.nobk>.phbr{display:none}
  .comps table{table-layout:fixed;width:100%}
  .comps th,.comps td{padding:6px 4px;font-size:12.5px;overflow-wrap:anywhere;white-space:normal !important}
  .comps td:first-child,.comps th:first-child{width:36%}
  .comps td:nth-child(2),.comps th:nth-child(2){width:19%}
  .comps th .c-grip{display:none}
  .comps td:last-child,.comps th:last-child{width:34px;padding-left:0;padding-right:0}
  .comps .sub{font-size:10.5px;white-space:normal}
  .comps .xbtn{width:30px;height:30px;min-height:30px}
  .comps td form{margin:0}
}
.comps .xbtn.del{margin-left:auto}
/* Заявки 870/871: цвет раздела в «Документах» — кружок со значком у пункта и светлая
   заливка плашки быстрой панели. Закупки синий, продажи оранжевый, деньги зелёный, склад фиолетовый */
[data-s="purchase"]{--sc:#2F80ED}
[data-s="opt"]{--sc:var(--accent)}
[data-s="money"]{--sc:#27AE60}
[data-s="wh"]{--sc:#9B51E0}
.doclist .docrow a{gap:10px}
.doclist .dname{flex:1;min-width:0}
.dico{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--sc);color:#fff}
.doclist a .dico svg{width:16px;height:16px;color:#fff;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.docfavbar a[data-s],.wrap .docfavbar a[data-s]{background:color-mix(in srgb,var(--sc) 14%,var(--panel));
  border-color:color-mix(in srgb,var(--sc) 30%,var(--line));color:color-mix(in srgb,var(--sc) 70%,var(--ink))}
/* Заявка 873: в списке разделов на телефоне текущий отмечен галочкой */
@media(max-width:700px){
  .tabsdd .umenu-menu a.on{display:flex;justify-content:space-between;gap:12px}
  .tabsdd .umenu-menu a.on::after{content:"✓"}
}
/* заявка 874: кружки разделов в /docs — на пару тонов светлее, значок остаётся белым */
.dico{background:color-mix(in srgb,var(--sc) 72%,#fff)}
/* заявка 876: кнопка «Внести депозит» справа от имени в кассовом списке гостей — кружок
   в чёрной обводке с зелёной купюрой. Ровно в высоту строки имени (18px), чтобы карточка
   не подросла; зона нажатия шире кружка за счёт ::after */
.gc-nm{display:flex;align-items:flex-start;gap:5px}
.gc-nm>a:first-child,.gc-nm>span:first-child{min-width:0}
.gdep{flex:none;position:relative;width:18px;height:18px;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.12);
  display:inline-flex;align-items:center;justify-content:center;color:#27AE60;background:#fff;box-sizing:border-box}
.gdep svg{width:11px;height:11px}
.gdep::after{content:"";position:absolute;inset:-8px}
.gdep:active{background:#EAF7EF}
/* заявка 877: кружок депозита у имени гостя — без обводки, объём тенью (в .gdep выше) */
/* заявка 881: на iPhone поля «С даты/По дату» вылезали за окошко периода — Safari считает
   ширину окошка по чипам, а поле даты рисует своей шириной. Поля берут ширину окошка,
   а окошку задан минимум, чтобы дата с иконкой влезала */
.persel-box{min-width:240px}
.perown-box label{min-width:0;overflow:hidden}
.perown-box input{width:100%;min-width:0}
/* заявка 1058: на iPhone поле даты рисуется своей, «родной» шириной и вылезало за
   окошко даже при width:100% — нативный вид ширину не слушает. Снимаем его: поле
   становится обычной рамкой, значок календаря рисуем фоном (как в шапке документа) */
.perown-box input[type=date]{-webkit-appearance:none;appearance:none;max-width:100%;
  padding:8px 10px 8px 30px;text-align:left;
  background:#fff no-repeat 9px center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D717F' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.perown-box input[type=date]::-webkit-date-and-time-value{text-align:left}
/* заявка 880: плашки показателей на телефоне — везде размером как в карточке гостя
   (807/864): две колонки, подпись 11px, число 13px. Исключения: дашборд (.dashcards —
   свои крупные плитки с подвалом и иконкой), шапка смены (.herocards — три в ряд),
   и наборы со своими правилами (.gstats/.istats/.paystats/.acccards) */
@media(max-width:700px){
  .cards:not(.dashcards):not(.herocards):not(.gstats):not(.istats):not(.paystats):not(.acccards){grid-template-columns:1fr 1fr;gap:6px}
  .cards:not(.dashcards):not(.herocards):not(.gstats):not(.istats):not(.paystats):not(.acccards) .stat{padding:8px 8px}
  .cards:not(.dashcards):not(.herocards):not(.gstats):not(.istats):not(.paystats):not(.acccards) .stat .l{font-size:11px;line-height:1.25}
  .cards:not(.dashcards):not(.herocards):not(.gstats):not(.istats):not(.paystats):not(.acccards) .stat .v{font-size:13px;margin-top:2px;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cards:not(.dashcards):not(.herocards):not(.gstats):not(.istats):not(.paystats):not(.acccards) .stat .sub{font-size:10.5px;line-height:1.3;margin-top:2px}
}
/* карандаш в карточке гостя (1639) стоит на 2px левее края цифр — последняя цифра
   «кэшбек 71» уходила под его рамку; отступ цифр чуть больше зоны карандаша */
@media(max-width:700px){.gcard .gc-n{margin-right:40px}}
/* заявка 882: ДДС на телефоне — «Приход» и «Расход» в ряд (общее правило 880), «Сальдо» во всю строку */
/* Заявка 1215: период листа ДДС — одной строкой под заголовком, вплотную к нему.
   Заявка 1217: под ней свёрнутая сверка «приход против выручки»: пояснение слева,
   число справа. Правила общие, НЕ в мобильном медиазапросе: первый раз я вписал их
   внутрь соседнего @media(max-width:700px) и на компьютере они не работали вовсе. */
.cf-period{margin:-6px 0 12px}
.cfrec{margin:-6px 0 14px}
.cfrec>summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  min-height:26px;font-size:13px;color:var(--muted);width:max-content}
.cfrec>summary::-webkit-details-marker{display:none}
.cfrec>summary:hover{color:var(--ink)}
.cfrec .gt-arr{font-size:10px;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.cfrec[open] .gt-arr{transform:rotate(180deg)}
.cfrec-b{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--panel);font-size:13px}
.cfrec-b>div{display:flex;align-items:baseline;gap:12px;padding:3px 0}
.cfrec-b>div>span{flex:1;min-width:0;color:var(--muted)}
.cfrec-b .cfrec-t{margin-top:4px;padding-top:7px;border-top:1px solid var(--line);font-weight:700}
.cfrec-b .cfrec-t>span{color:var(--ink)}
@media(max-width:700px){.cfstats .stat:nth-child(3){grid-column:1/-1}}
/* заявка 883: подпись «N строк» у поиска по таблице на телефоне не нужна */
@media(max-width:700px){.s-cnt{display:none}}
/* заявка 883: строка Журнала на телефоне влезает в экран без прокрутки вбок —
   дата · кто · действие в одну строку, детали своей строкой под ними; шапка таблицы
   и шестерёнка колонок не нужны (порядок — по дате, колонки все) */
@media(max-width:700px){
  #audittbl,#audittbl tbody{display:block;width:100%}
  #audittbl tr:first-child{display:none}
  #audittbl tr{display:grid;grid-template-columns:auto minmax(0,1fr) fit-content(140px);gap:3px 8px;align-items:center;
    padding:9px 0;border-bottom:1px solid var(--line)}
  #audittbl td{display:block;padding:0;border:0;white-space:normal;background:none}
  #audittbl td:first-child{font-size:12px}
  #audittbl td[data-c=who]{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #audittbl td[data-c=action] .badge{white-space:normal;text-align:center;line-height:1.25}
  #audittbl td[data-c=details]{grid-column:1/-1;font-size:13px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
  #audittbl td[colspan]{grid-column:1/-1}
}
/* заявка 884: пометка «Поставщик/Покупатель» в CRM и взаиморасчётах — бледно-сиреневая
   заливка с тёмным текстом вместо густой фиолетовой с белым */
.badge.vio{background:#EDE9FE;color:#6D28D9}
/* заявка 885: «Поставщик»/«Покупатель» обычным регистром, как остальные пометки */
.badge.vio{text-transform:none;letter-spacing:0;font-size:12px}
/* заявка 886: панель разделов офиса и кипера одной высоты и в приложении на телефоне:
   отступ снизу у обеих — полоса «домой» плюс 4px (среднее между 8px+полоса в офисе
   и голой полосой в кипере, .pos-tabs), не меньше 8px. Переключение не прыгает */
/* заявка 1430: панель стала ниже — поле снизу тоже ужато, полоса «домой» учтена */
@media(max-width:640px){.tabbar{padding-bottom:max(6px, calc(2px + env(safe-area-inset-bottom)))}}
/* заявка 887: продажи по позициям за смену на телефоне — без прокрутки вбок: в строке
   наименование (группа под ним), продано, выручка и класс; «Накопительно» на телефоне
   не показываем — он нужен только для разметки A/B/C, а она уже стоит классом */
@media(max-width:700px){
  #abctbl,#abctbl tbody{display:block;width:100%}
  #abctbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto min-content;gap:1px 10px;
    align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
  #abctbl th,#abctbl td{display:block;position:static;padding:0;border:0;min-width:0;white-space:normal;background:none}
  #abctbl th:first-child,#abctbl td:first-child{grid-column:1;grid-row:1}
  #abctbl [data-c=grp]{grid-column:1;grid-row:2;font-size:12px}
  #abctbl th[data-c=grp],#abctbl [data-c=cum]{display:none!important}
  #abctbl [data-c=n]{grid-column:2;grid-row:1}
  #abctbl [data-c=s]{grid-column:3;grid-row:1}
  #abctbl [data-c=cls]{grid-column:4;grid-row:1}
  #abctbl th.gearth{grid-column:5;grid-row:1;width:auto;min-width:0;max-width:none}
  #abctbl th .c-grip{display:none}
}
@media(max-width:700px){#abctbl th{font-size:11px}#abctbl th .s-a{display:none}}  /* 887: шапка в одну строку — без стрелок, порядок по-прежнему нажатием */
/* заявка 889: матрица прайс-листа на телефоне влезает в экран: №, наименование (группа
   под ним), цена поставщика, крестик; код и артикул на телефоне не показываем —
   они в карточке товара. Число колонок цен приходит из шаблона в --n */
.plgrp{display:none}
@media(max-width:700px){
  #plGrid,#plGrid tbody{display:block;width:100%}
  #plGrid tr{display:grid;grid-template-columns:auto minmax(0,1fr) repeat(var(--n,1),88px) 30px;gap:0 8px;
    align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
  #plGrid th,#plGrid td{display:block;position:static;padding:0;border:0;min-width:0;white-space:normal;background:none}
  #plGrid tr>:nth-child(2),#plGrid tr>:nth-child(3),#plGrid tr>:nth-child(5){display:none}
  #plGrid td[colspan]:first-child{grid-column:1/-1}
  #plGrid th{font-size:11px;width:auto!important}
  #plGrid th .c-grip,#plGrid th .s-a{display:none}
  #plGrid .plgrp{display:block;font-size:12px}
  #plGrid td input{width:100%;min-width:0}
}
/* планшет 701–840: разделы второй строкой убраны в 902 — шапка одной строкой, разделы в списке под лого */

/* заявка 893: заголовок «Деньги» на ДДС и P&L телефон видит как «Показатели» — оттуда
   в них и приходят (764), и список разделов со стрелкой там показательный */
.mob-only{display:none}
@media(max-width:700px){.hide-mob{display:none}.mob-only{display:inline}}
/* заявки 895/896: прайс-лист компактный — таблица в ширину содержимого, а не экрана
   (ряды плотные — общими правилами состава документа выше, #plGrid добавлен к ним);
   шестерёнка колонок на телефоне не нужна: код/артикул/группу там прячет блок 889 */
@media(min-width:701px){#plGrid{width:auto}}
@media(max-width:700px){#plGrid th.gearth{display:none}}
/* заявка 901: прайс-лист — комментарий своей строкой и крупнее; поставщик в заголовке
   по центру, крупнее, с меню по нажатию */
/* заявка 905: это эталон комментария документа для всей системы — своей строкой на всю
   ширину, крупнее полей шапки, в две строки с запасом. Класс doccmt на поле; внутри
   .frow строка сама встаёт последней на всю ширину */
.field.doccmt textarea{width:100%;max-width:none;min-height:58px;font-size:14.5px;padding:9px 12px;text-align:left}
.frow .field.doccmt{flex:1 0 100%;min-width:0}
#plForm .doccmt{margin:10px 0 0}
#plGrid th.plsup{text-align:center;font-size:13px;color:var(--ink)}
#plGrid th.plsup .umenu{display:inline-block}
#plGrid th.plsup .umenu summary{justify-content:center;padding:4px 8px}
#plGrid th.plsup .umenu summary:hover{background:#F2F3F5}
#plGrid th.plsup .umenu-menu{min-width:170px;text-align:left}  /* положение ставит скрипт toggle в base.html (598) */
/* заявка 907: комментарий в списке документов — плашкой с лёгким объёмом (тень снизу,
   светлая кромка сверху). Не понравится — убрать .cmtchip здесь и в ops.html */
.cmtchip{display:inline-block;max-width:100%;padding:3px 9px;border-radius:7px;background:var(--panel);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.10),0 0 0 1px var(--line);color:var(--ink);font-size:12.5px;line-height:1.35}
/* заявка 921: архивные позиции в списке — блеклым текстом, как в образце */
tr.refrow.arch td{opacity:.55}

/* ── заявки 915/918: шапка документа по образцу МоегоСклада ────────────────────
   Строка заголовка: «Заказ поставщику № 10 от 07.09.2026 16:04» — номер правится
   (раньше его нельзя было изменить вообще), дата стоит сразу за ним, а не отдельным
   полем в карточке ниже. Правее — бейдж статуса и одна и та же полоса кнопок у всех
   типов документов. Поля самой шапки мельче и плотнее: подпись слева, значение
   справа, в две колонки. Класс .compact — только у шапки документа, .frow и .field
   на остальных листах не задеты. */
/* заявка 990: название документа правится в самой шапке — поле ростом с заголовок */
.docname{font-size:20px;font-weight:800;width:auto;max-width:min(100%,320px);
  min-height:36px;padding:4px 8px}
/* заявка 1045: имя позиции длиннее названия документа — поле растёт по содержимому
   (size в разметке) и шрифт мельче, чтобы целиком влезало в строку */
.docname.wide{font-size:16px;max-width:min(100%,560px)}
/* заявка 1009: названия юрлиц длинные («MOON MARS RESTAURANT MANAGEMENT L.L.C») и
   в ячейке обрезались. Шрифт в этом списке мельче — имя влезает целиком */
select[name="org_id"]{font-size:11.5px;padding-left:8px;padding-right:22px}
/* заявка 1072: в шапке документа на телефоне значения шли разным кеглем — юрлицо 11.5px
   (правило выше, оно для узкой ячейки на компьютере), склад и контрагент 16px. Ставим
   один шрифт всем значениям и одну правую линию */
@media(max-width:700px){
  .ophead .field>input,.ophead .field>select,.ophead .field>div,
  .ophead select[name="org_id"],.ophead .pick input.pick-in{font-size:14px}
  .ophead .pick input.pick-in{padding-right:20px}
  .opro-h .field>div,.opro-h .field>span{font-size:14px}
  /* в шапке чтения юрлицо осталось живым списком — но выглядеть должно как соседние
     значения: без рамки и заливки, по правому краю */
  .opro-h .field>select{font-size:14px;width:auto;max-width:64%;flex:0 1 auto;text-align:right;
    border-color:transparent;background:none;padding:6px 0;min-height:0;
    -webkit-appearance:none;appearance:none}
}
.opnum{display:flex;align-items:center;gap:8px;margin-left:-8px;
  font-size:16px;font-weight:800;line-height:1}
.opnum span:not(.opdt){font-size:14px;font-weight:500;color:var(--muted)}
.opdt{display:contents}   /* заявка 986: обёртка «от дата» нужна только телефону */
/* заявка 927: номер — в обрез четырёх знаков; дата уже, а перед цифрами значок
   календаря — подсказка, что поле кликается (свой календарь из dtpick.js) */
.opnum input[name=no]{width:60px;font:inherit;min-height:32px;padding:4px 6px;text-align:center}
.opnum input[type=datetime-local]{width:170px;min-width:0;font-size:14px;font-weight:500;
  min-height:32px;padding:4px 6px 4px 30px;
  background:#fff no-repeat 9px center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D717F' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
/* заявки 956/957: на телефоне строка «№ от дата» — своей строкой во всю ширину, дата
   тянется на остаток и не переносит время внутри поля; шрифт 16px — иначе Safari зумит */
/* заявка 986: номер — в строке с названием («Заказ поставщику № 12»), «от дата» — строкой
   ниже. Форма растворяется (display:contents), её поля становятся членами шапки */
@media(max-width:700px){
  .pagehead>.opnum{display:contents}
  .pagehead>.opnum>.opdt{display:flex;align-items:center;gap:8px;flex:1 0 100%;
    font-size:16px;font-weight:800;line-height:1}
  /* заявка 993: поле даты по содержимому, а не во всю строку; справа поле обрезано
     по последнему знаку — лишний воздух внутри ячейки убран */
  .opnum input[type=datetime-local]{flex:0 1 auto;width:auto;min-width:0;font-size:16px;
    padding-right:4px}
  .opnum input[name=no]{font-size:16px;width:60px}
  /* заявка 988: «Назад» из документа убрана — назад ведёт свайп; карандаш правки
     встаёт в строку названия справа, номер остаётся при названии, дата — строкой ниже */
  .pagehead.docph>.backslot{display:none}
  .pagehead.docph>h1{order:-5}
  .pagehead.docph>.opnum>input[name=no],.pagehead.docph>.opnum>b{order:-4}
  .pagehead.docph>label.refadd.opedt-b{order:-3}
  /* заявка 1050: статус стоит сразу за датой, а галочки «Проведено»/«Ожидание»
     начинают следующую строку от левого края — пальцу ближе */
  .pagehead.docph>.opnum>.opdt{order:-2;flex:0 1 auto}
  .pagehead.docph>.badge{order:-2}
  /* заявка 1221: сам статус тоже в строку с датой — своей строки он не стоит.
     Без order он оказывался ЗА переносом строки (.phbr) и уезжал вниз. Ширину ему
     задаёт исключение выше: в мобильной шапке любая форма иначе занимает всю строку */
  .pagehead.docph>.opst-f{order:-2}
  /* «от» перед датой на телефоне не нужно — календарь в поле и так говорит, что это
     дата, а 23 точки решают, встанет статус в строку или перенесётся. Так же сделано
     у карточки платежа (.payph) */
  .pagehead.docph>.opnum>.opdt>span{display:none}
  .pagehead.docph>.phbr.phbr-sm{display:block;order:-1}
  /* заявка 991: дашборд — дата в правом верхнем углу, полоса разделов строкой ниже */
  .pagehead.dashph>h1{order:-3}
  .pagehead.dashph>.phdate{order:-2;margin-left:auto;flex:none;align-self:center}
  .pagehead.dashph>.phbr{order:-1;display:block}
  .pagehead.dashph>.tabsdd{order:0}
  .docname{font-size:20px;flex:1 1 auto;min-width:0}
  /* заявка 1045: на телефоне строка узкая — имя позиции ещё мельче, но целиком */
  .docname.wide{font-size:14px}
}
/* заявка 1005: зазор внутри полосы кнопок — «Сохранить» и «Закрыть» отделены от
   «Изменить» и «Создать документ», чтобы глаз видел две группы, а не пять кнопок */
.pagehead>.headbtns{display:flex;align-items:center;gap:8px}
.headbtns .hbgap{width:18px;flex:none}
/* заявка 1288: у документа полоса кнопок всегда своей строкой под названием и от левого
   края. Раньше её отодвигал распорка-.spacer, и на широком мониторе кнопки уезжали
   в правый угол, за полтора метра от заголовка, к которому относятся. Свой разрыв, а не
   общий .phbr: тот в шапке без вкладок намеренно скрыт (заявка 983) */
.pagehead.docph>.hbbr,.pagehead.cardph>.hbbr{flex:1 0 100%;height:0;margin:0}
/* заявка 1291: 44px кнопки шапки держат ради пальца — с мышью они просто крупные.
   Уменьшаем их только на широком экране и заодно прижимаем полосу к строке названия:
   воздуха между ними было больше, чем между самими кнопками. Правило общее для системы */
@media(min-width:701px){
  .pagehead{row-gap:8px}
  /* заявка 1295: «Изменить» и «Создать документ» — summary внутри своих меню, прямыми
     детьми полосы они не были и остались вдвое выше соседей */
  .pagehead .headbtns .btn.sm{min-height:34px;padding:6px 13px;font-size:13px}
  /* «Статус» встаёт вровень с полем даты, рядом с которым стоит */
  .pagehead .stmenu>summary{min-height:32px;padding:4px 10px}
  /* Заявка 1390: в шапке карточки всё одной высоты — номер, дата, статус и кнопки.
     Было вразнобой: поля 32, статус 32, кнопки 34, «настроить статусы» 37 */
  .pagehead:not(.ph-list) .opnum input,
  .pagehead:not(.ph-list) .stmenu>summary,
  .pagehead:not(.ph-list) .badge.opst,
  .pagehead:not(.ph-list) .headbtns .btn.sm,
  .pagehead:not(.ph-list) .headbtns > .btn,
  .pagehead:not(.ph-list) .stopt{min-height:34px;height:34px;box-sizing:border-box}
  .pagehead:not(.ph-list) .stopt{display:inline-flex;align-items:center}
  /* заявка 1293: колонка итогов дышала от смены подписи и двигала состав на 24px.
     Заявка 1297: подпись теперь постоянная («Общая стоимость»), и держать под неё
     запас больше не нужно — оставляем выравнивание, ширину считает содержимое */
  .optot .opsum .vat-lbl{display:inline-block;text-align:right}
}
/* галочка «Проведено» — в строке со статусом, а не отдельной полосой под названием */
.pagehead>form.postchk{margin:0}
.pagehead>form.postchk .chk{white-space:nowrap}
/* на телефоне она встаёт сразу за бейджем статуса, в ту же строку (заявка 1005) */
@media(max-width:700px){
  /* правило «формы в шапке — во всю строку» (747) уводило галочку на свою строку */
  .pagehead>form.postchk{width:auto;flex:none;max-width:none}
  /* Заявка 1422: в строке названия за номером стоит «Проведено», а «от» с датой
     уходят следующей строкой — так галочку видно первой. Раньше (1005) галочка
     вставала сразу за бейджем статуса, теперь статус уступает ей место */
  /* у карточки документа своя нумерация строк (название −5, номер −4, карандаш и
     дата −3/−2, разрыв −1): ставим галочку сразу за номером. Где название длинное,
     она честно переносится вместе с датой — строка шириной в телефон не резиновая */
  .pagehead.docph>form.postchk{order:-3;margin-left:0}
  .pagehead.docph>.headbtns{order:11}
  /* заявка 1350: в бланке документа «Закрыть» оставалась в полосе одна («Сохранить»
     на телефоне живёт под составом) и съедала целую строку — ставим её в строку с датой.
     Заявка 1422: «Проведено» стоит в строке названия, сразу за номером, а «от» с датой
     уходят следующей строкой: галочку видно первой, а не под датой */
  .pagehead.cardph>.hbbr{display:none}
  .pagehead.cardph>.postchk{order:1}
  /* `.opnum` стоит display:contents, поэтому «от дата» — прямой элемент строки по
     раскладке, но не по разметке: селектор через `>` его не достаёт */
  .pagehead.cardph .opdt{order:2;flex:1 1 auto;display:flex;align-items:center;gap:6px}
  .pagehead.cardph>.headbtns{order:3}
}
/* заявка 918: баланс — мелкой строкой прямо под контрагентом, а не своим полем */
.cpbal{font-size:12px;color:var(--muted);padding-top:2px}
.cpbal .num{font-weight:700}
@media(min-width:701px){
  /* заявка 984: шапка прижата к левому краю, а не растянута на лист — колонка ровно
     под подпись 150 + 10 + значение 280, на узком экране ужимается */
  .ophead.compact .frow{display:grid;grid-template-columns:repeat(2,minmax(0,440px));
    gap:2px 40px;align-items:start}
  /* заявка 999: значение ближе к подписи — колонка подписи по самой длинной
     («Склад-получатель»), а не с запасом */
  .ophead.compact .field{display:grid;grid-template-columns:128px minmax(0,1fr);
    align-items:center;gap:0 10px;margin:0;min-width:0;max-width:none}
  .ophead.compact .field.wide{grid-column:1/-1}
  .ophead.compact .field>label{margin:0;font-size:13px;font-weight:500;color:var(--muted)}
  .ophead.compact .field>input,.ophead.compact .field>select,
  .ophead.compact .field>textarea{font-size:13px;min-height:28px;padding:4px 8px;margin:0}
  /* заявка 999: у поля текст отбит внутренним отступом (8px + рамка), у простого
     значения его не было — «Арс» стоял левее «Lounge MM». Ставим тот же отступ */
  .ophead.compact .field>div{font-size:13px;min-height:28px;display:flex;align-items:center;
    padding-left:9px}
  /* заявка 1004: отступ нужен только простому тексту. Обёртки с полем (поиск
     контрагента .pick, селект с кнопкой «＋») отодвигать нельзя — их поле само
     отбито изнутри, и строка съезжала вправо относительно «Организации» */
  .ophead.compact .field>div.pick,
  .ophead.compact .field>div:has(input),
  .ophead.compact .field>div:has(select){padding-left:0}
  /* заявка 1172: «Изменения» — две строки, и начинаются они там же, где значения
     соседних ячеек: имя сверху, время под ним, оба по левому краю колонки */
  .ophead.compact .field>div.whobox{display:flex;flex-direction:column;align-items:flex-start}
  /* заявка 999: баланс под именем контрагента — по тому же левому краю, и до строки
     комментария остаётся воздух */
  .ophead.compact .cpbal{grid-column:2;padding:1px 0 9px 9px}
  /* заявка 927: у системного селекта свой внутренний отступ — текст «Организации» и
     «Поставщика» (поле-поиск pick.js) стояли не в линию. Селект рисуем сами: тот же
     отступ 8px, стрелка справа */
  /* заявка 1086: у селекта ширина по содержимому — «Склад» кончался левее «Кто»
     и комментария, и правый край шапки шёл лесенкой. Тянем на всю колонку */
  .ophead.compact .field>select{width:100%;-webkit-appearance:none;appearance:none;padding-right:26px;
    background:#fff no-repeat right 9px center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236D717F' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E")}
}
@media(max-width:700px){
  /* строка баланса не третий столбец, а подстрочник: своей строкой под контрагентом */
  .ophead .field:has(.cpbal){flex-wrap:wrap}
  /* заявка 987: правило перебивает .ophead .field>div (оно делало строку баланса
     подстрочником подписи слева) — баланс встаёт под именем контрагента справа */
  .ophead .field>.cpbal,.ophead .field>div.cpbal{flex:1 0 100%;max-width:none;
    text-align:right;padding:0 0 5px}
}
/* Значение шапки держали в 280px («как в образце»), а простой текст и поиск
   контрагента занимали всю колонку — правый край шапки шёл лесенкой: «Склад» кончался
   на 22px левее «Кто» и комментария. Заявка 1086: все значения кончаются на одной
   линии — по краю своей колонки. Строка баланса под контрагентом остаётся строкой
   (родительское правило .field>div — flex) */
@media(min-width:701px){
  .ophead.compact .field>input,.ophead.compact .field>select,
  .ophead.compact .field>.pick{max-width:none}
  /* заявка 984: справа место под крестик очистки — иначе он ложился на текст */
  .ophead.compact .field>.pick input.pick-in{font-size:13px;min-height:28px;padding:4px 30px 4px 8px}
  .ophead.compact .cpbal{display:block;min-height:0}
  /* заявка 927: в форме нового документа поставщик лежит в обёртке с кнопкой «＋» —
     поле и кнопка того же роста, что остальные поля шапки */
  .ophead.compact .field>div>.pick{max-width:none}
  .ophead.compact .field>div>.pick input.pick-in{font-size:13px;min-height:28px;padding:4px 30px 4px 8px}
  .ophead.compact .field>div>.btn.sm{min-height:28px;padding:2px 8px}
}
@media(min-width:701px){.ophead.compact .field>div.cpbal{display:block;min-height:0;font-size:12px}}
/* заявка 914: включённые Код/Артикул/Группа на телефоне идут подстрочником под
   позицией — своей колонкой в карточке-ряду (заявка 833) места им нет. Строки 4–6:
   1 занята самой позицией, 2 — «принято/остаток», 3 — НДС и скидкой */
@media(max-width:700px){
  .linecards td[data-c]{grid-column:2/7;font-size:11px;color:var(--muted);text-align:left}
  .linecards td[data-c=code]{grid-row:4}
  .linecards td[data-c=art]{grid-row:5}
  .linecards td[data-c=grp]{grid-row:6}
  .linecards td[data-c=code]::before{content:'код '}
  .linecards td[data-c=art]::before{content:'артикул '}
  .linecards td[data-c=grp]::before{content:'группа '}
}
@media(max-width:700px){
  /* у пустой строки набора кода и группы ещё нет — подписи без значений не нужны */
  .linecards td[data-c]:empty::before{content:none}
}

/* заявка 929: черновики в листах документов — курсивом и блёкло, как в МоёмСкладе;
   заявка 962: и карточка на телефоне (.dc-row) тоже */
tr.isdraft td,.dc-row.isdraft{font-style:italic;color:var(--muted,#8A8A8F)}

/* заявка 930: у прайс-листов в строке нет плашек и бейджей — строка выходила вдвое ниже
   соседних вкладок и липла к шапке; высота как у заказов (45px) */
table[data-rtable=price_lists] td{padding-top:13px;padding-bottom:13px}
/* заявка 932: колонка цены поставщика — по ширине цены, а не по умолчанию браузера */
@media(min-width:701px){#plGrid td input.num{width:96px}}

/* ── заявки 1052/1053/1057: строка состава на телефоне — тремя этажами ───────────
   Заявка 833 свела позицию в одну строку, и в 54–72px колонки перестали влезать
   и название («Guin…»), и числа. Арс просит обратно этажи, но с подписями:
   первым — название целиком, вторым — «кол-во · цена · сумма», третьим мелким —
   «принято/остаток» (или «фасовка» у приёмки: без неё чужую банку не пересчитать). */
@media(max-width:700px){
  .linecards tbody{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 30px}
  .linecards td.rownum{grid-area:1/1;align-self:center}
  .linecards td:has(.edname),.linecards td:has(input[list=items_dl]){grid-area:1/2/auto/5;
    white-space:normal;overflow:visible;text-overflow:clip;font-size:14px;line-height:1.3}
  .linecards td:has(.xbtn.del){grid-area:1/5}
  .linecards td:has([name=qty]){grid-area:2/2}
  .linecards td:has([name=price]){grid-area:2/3}
  .linecards td:has(.rowsum){grid-area:2/4}
  .vat-on .linecards td.vatcol{grid-area:3/2/auto/5}
  /* заявка 1057: фасовка нужна и на телефоне — приёмку заводят с телефона, а без неё
     чужая банка не пересчитывается в заводскую (заявка 1014) */
  #edlines.linecards td:has([name=pack_g]){display:block!important;grid-area:3/2/auto/4}
  #edlines.linecards td:has([name=pack_g])::before{content:'фасовка, г';display:block;
    font-size:10.5px;line-height:1.35;font-weight:600;color:var(--muted)}
  #edlines.linecards td.unit{grid-area:3/4/auto/6;align-self:center;font-size:12px}
  #edlines.linecards td.rowstock{grid-area:4/2/auto/6;text-align:left;font-size:12.5px}
  .linecards[data-po] td:nth-child(4){grid-area:4/2/auto/4}
  .linecards[data-po] td:nth-child(5){grid-area:4/4/auto/6}
  .linecards[data-wo] td:nth-child(4){grid-area:4/2/auto/4}
  .linecards[data-wo] td:nth-child(5){grid-area:4/4/auto/6}
  .linecards[data-wo] td:has([name=disc]){grid-area:3/2/auto/4}
  .vat-on .linecards[data-wo] td.vatcol{grid-area:3/4/auto/6}
  /* пустая строка набора: название во всю ширину, поля — вторым этажом под своими */
  .linecards tr:has(.plus) td:has(input[list=items_dl]){grid-area:1/2/auto/5}
  .linecards tr:has(.plus) td:has([name=qty]){grid-area:2/2}
  .linecards tr:has(.plus) td:has([name=price]){grid-area:2/3}
  .linecards tr:has(.plus) td:has(.rowsum){grid-area:2/4}
  /* этаж числами разведён на три равные колонки — поле занимает свою целиком
     (в одну строку его меряли по содержимому, field-sizing, чтобы влезло название) */
  #edlines.linecards td input.num{width:100%;max-width:none;min-width:0}
}

/* заявка 1059: «По группам меню» и «По дням недели» на телефоне уезжали вправо.
   Полоска доли и колонка «Уровень» — украшение (число рядом то же самое), «Дней»
   переехало мелкой подписью к средней за день. Колонки остаются в шестерёнке. */
@media(max-width:700px){
  .sgrp .shbar{display:none}
  .swd td[data-c=d],.swd th[data-c=d],
  .swd td[data-c=level],.swd th[data-c=level]{display:none}
  .swd td[data-c=avg] .sub{display:block;font-size:10.5px;line-height:1.2}
}

/* заявка 1070: «Закрыть» на телефоне встаёт последней — после «Изменить» и «Создать
   документ». На компьютере порядок кнопок прежний (лестница заявки 1005). */
/* заявка 1071: строка «Позиций · сумма · НДС» — одна и та же и в просмотре, и в правке */
@media(max-width:700px){
  .pagehead.docph>.headbtns>a.btn.ghost{order:2}
  .vathead .op-cnt{margin:0;flex:0 1 auto;align-self:center}
  .vathead{justify-content:flex-start;gap:10px;flex-wrap:wrap;align-items:center}
}

/* заявка 1069: плашки дашборда на телефоне — в две колонки (до «Дефицита склада»:
   ниже идут карточки с таблицами и графиками, им нужна вся ширина). Плитка ужимается
   шрифтом и полями, «Подробнее» остаётся подвалом. */
@media(max-width:700px){
  .dashcards{grid-template-columns:1fr 1fr;gap:8px}
  .dashcards .stat{padding:10px 12px}
  .dashcards .stat .l{font-size:11.5px;line-height:1.25}
  .dashcards .stat .v{font-size:17px;line-height:1.2}
  .dashcards .stat .sub{font-size:10.5px;line-height:1.3}
  .dashcards .stat .ico{top:8px;right:8px;width:26px;height:26px;border-radius:8px}
  .dashcards .stat .ico svg{width:15px;height:15px}
  /* заявка 1074: подвал «Подробнее» рисовался с отрицательными полями под десктопную
     плитку (20/18px) и на телефоне вылезал за скруглённый угол — поля по месту */
  .dashcards .stat .foot{font-size:11px;padding:6px 12px;margin:10px -12px -10px}
  /* заявка 1074: порядок плиток — смена и выручка первой строкой, депозиты и опт
     второй, «Деньги — общее» большой плашкой под ними */
  .dashcards>.ds-shift{order:1}
  .dashcards>.ds-rev{order:2}
  .dashcards>.ds-dep{order:3}
  .dashcards>.ds-opt{order:4}
  .dashcards>.ds-money{order:5;grid-column:1/-1}
}

/* заявка 1078: «принято» в строке состава — только после первой приёмки по заказу */
@media(max-width:700px){
  .linecards[data-po][data-rec="0"] td:nth-child(4){display:none}
  .linecards[data-po][data-rec="0"] td:nth-child(5){grid-area:4/2/auto/6}
}

/* заявка 1081: ставка НДС у строки на телефоне добавляла ей целый этаж — от одной
   галочки состав прыгал. Строки ставку больше не показывают (поля остаются, их шлёт
   форма), одна ставка на документ стоит в строке с галочкой */
@media(max-width:700px){
  .vat-on .linecards td.vatcol,.linecards td.vatcol{display:none!important}
  .vathead .vatall{display:none;align-items:center;gap:6px;margin:0;font-size:13px}
  /* заявка 1095: «Ставка» одним словом, поле того же роста, что и галочки рядом */
  .vat-on .vathead .vatall{display:inline-flex;white-space:nowrap}
  .vathead .vatall select{width:auto;min-height:28px;height:28px;padding:2px 20px 2px 8px;
    font-size:13px}
}

/* заявка 1082: меню «Расценить» было в 280px с полями в полный рост — ужато */
.prcmenu{min-width:250px;padding:8px;text-align:left;font-weight:500;text-transform:none;
  letter-spacing:0;white-space:normal}
.prcmenu .prch{font-weight:700;font-size:12px;margin:0 0 4px;color:var(--muted)}
.prcmenu select{width:100%;margin-bottom:5px;min-height:32px;padding:4px 22px 4px 8px;font-size:13px}
.prcmenu select:disabled{color:var(--muted);background:var(--bg)}
.prcmenu .btn{width:100%;min-height:34px;padding:5px 10px;font-size:13px}

/* заявка 1080: неделя на графике листается стрелками по краям заголовка; дальше
   текущей недели ходить некуда — стрелка гаснет */
/* заявки 1148/1149: сумма за неделю стоит в заголовке за датами — мельче названия,
   чтобы не спорила с ним, и не переносится отдельной строкой на телефоне */
.wksum{margin-left:8px;font-weight:800;font-size:14px;color:var(--accent-dark);white-space:nowrap}
@media(max-width:700px){.wksum{display:block;margin:2px 0 0;font-size:13.5px}}
.wknav{display:flex;align-items:center;gap:10px}
.wknav>span:not(.wkarr){flex:1;min-width:0}
.wkarr{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;text-decoration:none}
.wkarr:hover{border-color:var(--accent);color:var(--accent)}
.wkarr.off{color:var(--line);border-color:var(--line);cursor:default}

/* заявка 1086: итог документа крупнее — его ищут глазами первым; под ним строка
   накладных расходов приёмки */
.optot .opsum{font-weight:800;font-size:18px;display:flex;justify-content:flex-end;
  align-items:baseline;gap:12px;padding-top:4px}
.optot .opsum .v{font-size:20px}
.optot .ovh{display:flex;justify-content:flex-end;align-items:center;gap:10px;
  margin-top:6px;font-size:13px;color:var(--muted)}
.optot .ovh input{width:110px;min-height:32px;padding:4px 8px;text-align:right;font-size:14px}
/* заявка 1103: в скидке четыре знака и процент — ячейкам хватает 76px */
.optot .ovh #discPct,.optot .ovh #discAmt{width:76px}
@media(max-width:700px){
  .optot .opsum{font-size:16px;justify-content:space-between}
  .optot .opsum .v{font-size:18px}
  .optot .ovh{justify-content:space-between}
}

/* заявка 1096: строку состава тянут за номер — курсор и подсветка говорят, что можно */
#edlines td.rownum,#lines td.rownum,#plGrid td.rownum{cursor:grab;touch-action:none}
tr.lndrag{opacity:.65;background:var(--accent-soft)}
tr.lndrag td.rownum{cursor:grabbing}

/* заявка 1099: выбор счёта под накладными — того же роста, что поле суммы */
.optot .ovh .ovhacc{width:auto;min-height:32px;height:32px;padding:4px 24px 4px 8px;font-size:13px}

/* заявка 1102: комментарий документа стоит слева от итогов — как в образце МоегоСклада.
   Поле принадлежит форме шапки (form=opHead) и сохраняется ею же.
   Заявка 1289: низ документа развёрнут по образцу — тело (состав и комментарий) слева,
   узкая колонка итогов справа. «Кол-во» встаёт в строку с набором новой позиции,
   «Итого» — вровень с комментарием: всё нужное умещается в две строки, а не в четыре. */
.docbody{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;
  align-items:end;margin-top:2px}
/* заявка 1290: «Общая стоимость: 1535.00 AED» ломалась пополам в колонке фиксированной
   ширины. Колонка считается по самой длинной строке итогов, а место у неё отбирает
   комментарий — он переживёт это легче, чем сумма документа */
.docbody>.optot{min-width:280px}
.optot .opsum,.optot .opsum>span{white-space:nowrap}
.docbody>.tscroll{min-width:0}
/* заявка 1324: «Поиск в таблице» sort.js вставляет ПЕРЕД составом — в сетке документа
   это лишняя клетка, и всё съезжало на одну: таблица уходила в колонку итогов, итоги
   вставали под поиск слева. Дети сетки расставлены по местам, а не по порядку разметки */
/* заявка 1332: поиск по таблице стоит НАД составом, сразу под заголовком карточки —
   искать начинают до того, как долистают до конца списка */
.docbody>.s-bar{grid-column:1;grid-row:1;margin:0 0 8px}
.docbody>.tscroll{grid-column:1;grid-row:2}
.docbody>.docqty{grid-column:2;grid-row:2}
.docbody>.opcmt{grid-column:1;grid-row:3}
.docbody>.optot{grid-column:2;grid-row:3}
/* «Кол-во» прижато к низу своей клетки — встаёт ровно в строку набора новой позиции,
   «Итого» так же прижато к низу своей и стоит вровень с комментарием */
.docqty{display:flex;justify-content:flex-end;padding-bottom:10px}
.docbody>.optot{margin-top:0;padding-bottom:4px}
.opcmt{margin-top:10px}
.opcmt label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.opcmt textarea{width:100%;min-height:64px;font-size:13.5px;padding:7px 9px;resize:vertical}
/* заявка 1345: комментарий пишут абзацами (номер чека с новой строки) — переносы
   в разметке схлопываются, поэтому показываем текст как есть */
.opcmt .cmtro{font-size:13.5px;line-height:1.35;white-space:pre-wrap}
.cmtread{white-space:pre-wrap}
.opcmt:empty{display:none}
@media(max-width:700px){
  /* на телефоне колонок нет: состав, комментарий и итоги идут друг за другом */
  .docbody{display:block}
  .docqty{padding:9px 0;border-top:1px solid var(--line)}
  .docqty:has(.qtysum:empty){display:none}
}

/* заявка 1106: строка состава на широком экране читается как таблица чисел, а не как
   полоса полей ввода: рамки и стрелки показываются у строки под курсором и у поля,
   в которое встали. Пустая строка набора остаётся с рамками — она приглашает вводить. */
@media(min-width:701px){
  #edlines td input,#edlines td select{border-color:transparent;background:none;
    transition:border-color .12s,background-color .12s}
  /* заявка 1109: стрелки «больше/меньше» в составе не нужны — число набирают руками */
  #edlines td input::-webkit-outer-spin-button,
  #edlines td input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;
    display:none;margin:0}
  #edlines tr:hover td input,#edlines tr:hover td select,
  #edlines td input:focus,#edlines td select:focus{border-color:var(--line);background:#fff}
  #edlines tr:has(.plus) td input{border-color:var(--line);background:#fff}
}

/* заявка 1109/1112: в составе документа стрелки счётчика не показываем нигде (и на
   телефоне тоже — там они съедали половину узкой ячейки), ширину колонок держит
   заголовок: таблица не растягивает числа на весь экран */
#edlines td input[type=number]{-moz-appearance:textfield}
#edlines td input[type=number]::-webkit-outer-spin-button,
#edlines td input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;
  display:none;margin:0}

/* заявка 1111: скидка строки — число и значок вида (процент или деньги). Значок
   переключает вид у своей строки, поэтому он кнопкой, а не подписью колонки */
.discwrap{display:flex;align-items:center;gap:2px;justify-content:flex-end}
.discwrap input[name=disc]{width:100%;min-width:0}
.discu{flex:none;min-width:30px;height:26px;padding:0 4px;border:1px solid transparent;
  border-radius:7px;background:none;color:var(--muted);font:inherit;font-size:11.5px;
  font-weight:700;cursor:pointer;line-height:1}
.discu:hover{border-color:var(--line);background:#fff;color:var(--accent)}
@media(max-width:700px){
  .linecards td.disctd{grid-area:3/2/auto/4}
  .linecards td.disctd::before{content:'скидка';display:block;font-size:10.5px;
    line-height:1.35;font-weight:600;color:var(--muted)}
  .discu{min-width:34px;height:30px;border-color:var(--line);background:#fff}
}

/* Заявка 1222: панель скидки на телефоне не помещалась — до полей приходилось
   прокручивать. Высоты полей переехали сюда из разметки (инлайн их было не перебить),
   на телефоне всё ужато: подписи мельче, три числовых поля в один ряд, «Применить»
   строкой под ними. Проценты-чипы остаются крупными — по ним и бьют пальцем. */
.discpop select,.discpop input[type=number]{min-height:44px}
/* заявка 1306: проценты стояли вплотную к полю причины и наезжали на его рамку */
.discpop .cat-chips{margin:10px 0 8px}
/* заявка 1317: «Списать кэшбек» — первой строкой в открытой «Скидке»: во всю ширину
   свёртки и невысокой, чтобы над причиной она читалась как подсказка, а не как ещё
   одна кнопка команд */
/* заявка 1342: пункт меню в шапке колонки — обычным начертанием: жирный читается
   как заголовок, а это действие */
.invrec > summary{font-weight:inherit}
.invrec-go{font-weight:500}
.discpop .cbrow{margin-top:8px}
.discpop .cbrow .btn{width:100%;justify-content:center;min-height:34px;padding:6px 10px;
  color:var(--accent-dark);border-color:var(--accent)}
@media(max-width:700px){
  .discpop > form{margin-top:8px}
  .discpop .field{margin-bottom:0}
  .discpop .field > label{font-size:11.5px;margin-bottom:1px}
  .discpop select,.discpop input[type=number]{min-height:38px;padding:5px 8px}
  .discpop .cat-chips{margin:8px 0 6px}
  .discpop .cat-chip{min-height:40px;padding:6px 10px;font-size:13px}
  .discpop .frow{gap:6px}
  .discpop .frow > .field{flex:1 1 28%;min-width:88px}
  .discpop .frow > .btn{flex:1 0 100%;min-height:42px;margin-top:2px}
}

/* Заявка 1225: лист «На оплату». Просроченное видно цветом строки, ближайшее — мягкой
   подсветкой: кассир читает список глазами сверху вниз, а не сверяет даты. */
/* заявка 1236: сумма правится в строке, действия стоят в ряд. Ширину задаёт общее
   правило: «На оплату» — плашка во всю страницу, значит таблица по содержимому (1309) */
/* заявка 1258: содержимое строки по середине — кнопки и текст стоят в одну линию */
.upc td,.upc th{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.upc th{vertical-align:bottom}
.upc th{font-weight:600;color:var(--muted);font-size:13px;text-align:left}
.upc th.r,.upc td.r{text-align:right}
.upc .upc-d{white-space:nowrap;font-weight:600}
.upc tr.late{background:#FDF3F2}
.upc tr.soon{background:#FFF8F0}
.upc .sub{font-size:12.5px;margin-top:2px}
/* Заявка 1238: поле правки прямо в строке таблицы — строка читается обычным текстом.
   Заявка 1240: рамка проявляется, когда курсор на СТРОКЕ, как в составе документа
   (#edlines, заявка 1106), а не когда попал точно в ячейку. */
/* Карточка правки поверх страницы. Заявка 1245: оболочка общая для всей системы —
   правку открывают карточкой, а не строкой в листе. Жила в шаблоне справочника,
   из-за чего на других листах приходилось выдумывать своё. */
.refback{position:fixed;inset:0;z-index:300;background:rgba(12,14,18,.5);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.refback.on{opacity:1;pointer-events:auto}
.refmodal{position:fixed;z-index:301;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
  width:min(720px, calc(100vw - 32px));max-height:calc(100vh - 80px);overflow-y:auto;
  background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28);
  padding:20px 22px 22px;opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .26s cubic-bezier(.22,1,.36,1)}
.refmodal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
/* Заявка 1255: список выбора (pick.js) — absolute внутри поля, и прокручиваемая
   карточка его обрезала: выпадашка уходила за её край. Пока список открыт, карточка
   не режет содержимое; формы в ней короткие, прокручивать нечего. */
.refmodal:has(.pick-list.on){overflow:visible}
.refmodal-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.refmodal-head h2{margin:0;flex:1;font-size:19px}
.refmodal-foot{display:flex;gap:10px;width:100%;margin-top:6px}
@media(max-width:640px){
  .refmodal{width:100vw;max-width:none;max-height:88vh;left:0;right:0;top:auto;bottom:0;
    transform:translateY(12px);border-radius:18px 18px 0 0}
  .refmodal.on{transform:none}
}
/* заявка 1279: поле «Кому бьём» открывается прямо на месте кнопки в строке стола —
   в колонке меню остаются только позиции для пробития */
/* заявка 1322: кнопка «Добавить гостя в стол» стоит своей строкой над номером чека */
.lgrow{display:flex;margin-bottom:10px}
.lgrow > .btn{flex:none}
/* заявка 1325: на широком экране кнопка поднята в строку «Стол N» — она живёт в колонке
   чека (третья клетка сетки) и приподнята над панелью. Внутри самой панели её держать
   нельзя: на широком экране чек прокручивается внутри себя и обрезает всё, что выше */
@media(min-width:701px){
  .pos-grid > .lgrow{grid-column:3;grid-row:1;justify-self:start;align-self:start;
    height:auto;margin:-54px 0 0;z-index:2}
  /* кнопка заняла клетку чека, поэтому саму панель тоже ставим в неё явно —
     иначе автораскладка уносила её на вторую строку сетки */
  .pos-grid > .pos-menu{grid-column:1;grid-row:1}
  .pos-grid > #posResizer{grid-column:2;grid-row:1}
  .pos-grid > .pos-check{grid-column:3;grid-row:1}
}
@media(max-width:700px){
  /* в режиме меню панели чека нет — кнопке там делать нечего */
  .pos-grid.m-menu > .lgrow{display:none}
}
.lgbox{min-width:220px;max-width:300px;display:flex}
.lgbox .pick{flex:1}
@media(max-width:700px){.lgbox{flex:1 0 100%;max-width:none}}
/* заявка 1241: строка-ссылка листа — правило общее (было в шаблоне справочника) */
tr.refrow{cursor:pointer}
tr.refrow:hover{background:#FFF8F2}
/* CRM не растягиваем на весь экран — ширина по содержимому, прижата влево */
.crm-tbl{width:auto;max-width:100%}
.cellinp{border-color:transparent;background:none;min-height:30px;padding:3px 6px;
  font-size:13.5px;color:var(--muted);transition:border-color .12s,background-color .12s}
tr:hover > td > form > .cellinp{border-color:var(--line);background:#fff}
.cellinp:focus{border-color:var(--accent);background:#fff;color:var(--ink)}
.upc .upc-amt{width:96px;min-height:32px;padding:4px 8px;text-align:right;font-size:14px}
.upc .upc-act{white-space:nowrap}
/* заявка 1257: в строке таблицы кнопки мельче — мышью хватает; на телефоне у карточек
   остаются полные 44px, там их жмут пальцем */
@media(min-width:701px){
  .upc .upc-act .btn{min-height:30px;padding:3px 10px;font-size:12.5px;border-radius:8px}
  .upc .upc-amt{min-height:30px;font-size:13px}   /* поле суммы — вровень с кнопками */
}
.upc .upc-act form{display:inline}
.upc .upc-act > *{margin-left:6px}
/* заявка 1237: карточки предстоящих платежей на телефоне — на общей разметке .doccards,
   но со своими действиями: кнопки и поле суммы стоят строкой под подписью */
.upccards .dc-l{flex:1;min-width:0}
.upccards .dc-row.late{background:#FDF3F2}
.upccards .dc-row.soon{background:#FFF8F0}
/* Заявка 1259: кнопки карточки — у правого края, ближе к большому пальцу.
   Заявка 1264: не отдельной строкой, а сразу под суммой: карточка ниже */
.upccards .dc-a{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.upccards .upc-cbtn{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.upccards .upc-cbtn form{margin:0}
.upccards .upc-amt{width:104px}
@media(max-width:700px){
  /* заявка 1260: на телефоне кнопки карточки — значками: строк на экране больше */
  .upccards .upc-cbtn .btn{padding:0;width:38px;min-height:38px;border-radius:10px}
  .upccards .upc-cbtn .btn .lb{display:none}
  .upccards .upc-cbtn .btn svg{width:19px;height:19px}
  .upccards .upc-cbtn{margin-top:6px;gap:10px}
  .upccards .dc-row{padding-top:10px;padding-bottom:10px}
  /* заявка 1261: слева «просрочено» и «всего», справа сроки — друг под другом */
  .upc-cards{grid-template-columns:1fr 1fr}
  .upc-cards .s-late{order:1}
  .upc-cards .s-d7{order:2}
  .upc-cards .s-all{order:3}
  .upc-cards .s-d30{order:4}
}

/* ── Уведомления (заявка 1327) ──────────────────────────────────────────────
   Колокольчик в шапке, панель выезжает справа, тосты — снизу справа.
   Движение только transform/opacity; вход 260 мс «ящиком» (.32,.72,0,1),
   выход быстрее входа; при prefers-reduced-motion остаётся одна прозрачность. */
.notifbtn{position:relative;border:1px solid rgba(255,255,255,.25);border-radius:10px;
  padding:8px 10px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:none;cursor:pointer;color:rgba(255,255,255,.85);
  transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s ease,border-color .16s ease}
.notifbtn svg{width:19px;height:19px}
.notifbtn:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45)}
.notifbtn:active{transform:scale(.97)}
.notifdot{display:none;position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 2px var(--dark)}
.notifdot.on{display:block}
@media(max-width:700px){.notifbtn{padding:7px 9px}}
/* заявка 1349: в кипере колокольчик — такая же кнопка шапки, как «Баг»; точка садится
   в её угол, поэтому кнопке нужна своя система координат */
.pos-top button.posnotif{position:relative;padding:8px 10px}
.pos-top button.posnotif svg{width:19px;height:19px}
.pos-top button.posnotif .notifdot{top:5px;right:6px;box-shadow:0 0 0 2px var(--pos-bar,#262626)}

.notifwrap{position:fixed;inset:0;z-index:140;visibility:hidden;transition:visibility 0s linear .19s}
.notifwrap.on{visibility:visible;transition-delay:0s}
.notifback{position:absolute;inset:0;background:rgba(16,22,32,.28);opacity:0;
  transition:opacity .14s cubic-bezier(.23,1,.32,1)}
.notifwrap.on .notifback{opacity:1;transition-duration:.2s}
.notifpanel{position:absolute;top:0;right:0;height:100%;width:min(392px,calc(100vw - 24px));
  box-sizing:border-box;background:#fff;box-shadow:-18px 0 44px -22px rgba(16,22,32,.45);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .18s cubic-bezier(.32,.72,0,1)}
.notifwrap.on .notifpanel{transform:translateX(0);transition-duration:.26s}
.notifhead{flex:none;display:flex;align-items:center;gap:10px;padding:14px 12px 12px 16px;
  border-bottom:1px solid var(--line)}
.notifhead b{font-size:15px;margin-right:auto}
.notiflist{flex:1;min-height:0;overflow-y:auto;padding:6px 0}
.notifempty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13.5px}
.nfi{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;transition:background-color .14s ease;
  /* заявка 1360: строку тянут вбок — она едет поверх подсказок, поэтому со своим фоном */
  position:relative;background:var(--card);touch-action:pan-y}
.nfi:last-child{border-bottom:0}
/* заявка 1360: дорожка строки. Подсказки лежат под ней и проступают по ходу протяжки.
   Заявка 1361: вправо — «Прочитано», влево — «Новое»: подсказка открывается с той
   стороны, куда уезжает строка. Двигаем только transform и opacity */
.nfrow{position:relative;overflow:hidden}
.nfhint{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 16px;
  font-size:12.5px;font-weight:700;letter-spacing:.2px;opacity:0;pointer-events:none;
  text-transform:uppercase}
.nfhint.read{left:0;color:#fff;background:var(--accent)}
.nfhint.new{right:0;color:#fff;background:#3B6FE0;justify-content:flex-end}
.nfi:hover{background:var(--panel)}
/* заявка 1362: точка — переключатель «прочитано/новое» и на компьютере, где протяжки
   нет. Тач-цель шире самой точки: ::before растягивает её до пальца, не сдвигая ряд */
.nfi .nfdot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;position:relative;
  cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.nfi .nfdot::before{content:"";position:absolute;inset:-11px -9px}
@media (hover:hover) and (pointer:fine){.nfi .nfdot:hover{transform:scale(1.5)}}
.nfi.read .nft{font-weight:600;color:var(--muted)}
.nfi .nfbody{min-width:0;flex:1}
.nft{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.nfs{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.nfd{display:block;font-size:11.5px;color:var(--muted);opacity:.8;margin-top:3px}
/* красным светится только точка: если краснеют и все заголовки, тревожное перестаёт
   читаться как тревожное — глазу не за что зацепиться */
.nfi .nfdot{background:var(--accent)}
.nfi.warn .nfdot{background:var(--red)}
/* заявка 1331: правило «прочитано» стоит ПОСЛЕ цветных — иначе тревожная точка
   переспоривала его по порядку и у прочитанного уведомления не гасла */
.nfi.read .nfdot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
/* тосты управления — снизу справа, а не по центру (в кабинете гостя телефонный центр) */
body[data-sec] .pk-toasts{left:auto;right:16px;bottom:16px;align-items:flex-end;padding:0}
@media(prefers-reduced-motion:reduce){
  .notifpanel{transform:translateX(0);opacity:0;transition:opacity .15s cubic-bezier(.23,1,.32,1)}
  .notifwrap.on .notifpanel{opacity:1}
  .notifbtn:active{transform:none}
}

/* заявка 1352: депозиты гостей и должники — рядом, а не друг под другом. Списки
   одного рода и обычно короткие; на узком экране остаются столбиком */
.depcols{display:grid;gap:14px}
.depcols>.card{margin-bottom:0}
@media(min-width:1100px){.depcols{grid-template-columns:1fr 1fr;align-items:start}}

/* Заявки 1363/1367: строка листа собрана как в МоёмСкладе — название, кнопка создания,
   «Фильтр», а поиск прижат вправо и стоит там всегда, открыт отбор или нет. Поля отбора
   живут под кнопкой «Фильтр»: на листе они нужны не каждый раз, а место занимают всегда.
   Узлы переносит mfilt.js — правило одно на все листы системы */
@media(min-width:701px){
  .pagehead.ph-list > .spacer{display:none}
  .pagehead.ph-list{gap:10px}
  /* Заявка 1373: всё в строке листа стоит по одной оси. Кнопки пришли из формы отбора
     и тащили её правила — «Фильтр» прижимался к низу строки (align-self:flex-end),
     а у поиска снизу оставался отступ поля, и серединки не совпадали */
  .pagehead.ph-list > *{align-self:center;margin-bottom:0}
  /* заявка 1369: кнопки первого порядка — той же высоты, что «Фильтр» и поиск:
     строка листа читается одной линией, а не лесенкой */
  .pagehead.ph-list > .btn,.pagehead.ph-list > a.btn,.pagehead.ph-list > .btn.sm,
  .pagehead.ph-list > details > summary.btn,
  .pagehead.ph-list > form > .btn{min-height:38px;height:38px;padding:7px 14px}
  /* заявка 1375: плюс на кнопке — системным оранжевым, чтобы «создать» читалось сразу.
     На самой оранжевой кнопке он остаётся белым: иначе тонет в фоне */
  .pagehead.ph-list .plus{font-weight:900;font-size:16px;line-height:1;margin-right:2px}  /* заявка 1389: плюс жирнее */
  .pagehead.ph-list .btn.ghost .plus,.pagehead.ph-list details .plus{color:var(--accent)}
  /* заявка 1371: поиск длиннее и с лупой слева — поле видно как поиск, а не как
     обычную строку ввода */
  /* заявка 1372: «Фильтр» держится кнопок листа, а то, что к отбору не относится
     (Excel и прочие хвосты), отбито общим разделительным отступом — одним на систему */
  /* Заявка 1396: порядок в строке листа один на систему — название, кнопки действий,
     «Фильтр», потом переключатели вида, потом хвосты (Excel, импорт) и поиск справа.
     В CRM вкладки стояли между названием и кнопками, и кнопки оказывались по центру */
  .pagehead.ph-list > .mfilt-btn{order:0}
  .pagehead.ph-list > .tabs{order:1}
  /* заявки 1411/1414: период стоит в строке названия — своей строки ему не нужно */
  .pagehead.ph-list > .ph-per{order:0;margin:0;flex:0 0 auto;display:flex;gap:8px;align-items:center}
  .pagehead.ph-list > .ph-per > .field{margin:0}
  .pagehead.ph-list > .ph-per label{display:none}
  /* заявка 1396: пустая форма отбора (в CRM она живёт прямо в шапке) не должна занимать
     место, пока фильтр закрыт; раскрытая — становится плашкой своей строкой */
  .pagehead.ph-list > form.mfilt,.pagehead.ph-list > form.pagehead-search.mfilt{
    flex:0 0 auto;min-width:0;max-width:none;margin:0}
  .pagehead.ph-list > form.mfilt.fopen,.pagehead.ph-list > form.pagehead-search.mfilt.fopen{
    flex:1 0 100%;order:4}
  .pagehead.ph-list > .ph-tail{order:2;margin-left:var(--gap-sep)}
  .pagehead.ph-list > .ph-tail2{order:2}   /* второй хвост — сразу за первым, без отбивки */
  .pagehead.ph-list > .favs{order:2;margin-left:var(--gap-sep)}  /* закладки отбора (заявка 1366) */
  /* заявки 1385/1386: поиск CRM и Справочника встаёт туда же, куда на листах */
  .pagehead.ph-list > .ph-search{order:3;margin-left:auto;flex:0 1 430px;min-width:240px}
  /* заявка 1395: поле поиска по таблице в шапке — как остальные поиски, с лупой */
  .pagehead.ph-list > .ph-tsearch{gap:8px;margin:0 0 0 auto}
  .pagehead.ph-list > .ph-tsearch input{flex:1;max-width:none;min-height:38px;height:38px;
    padding-left:34px;background-repeat:no-repeat;background-position:11px 50%;background-size:15px 15px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>")}
  .pagehead.ph-list > .ph-search input[name=q]{min-height:38px;height:38px;padding-left:34px;
    background-repeat:no-repeat;background-position:11px 50%;background-size:15px 15px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>")}
  .pagehead.ph-list > .msearch{order:3;margin-left:auto;flex:0 1 430px;min-width:240px}
  .pagehead.ph-list > .msearch label{display:none}
  .pagehead.ph-list > .msearch input{min-height:38px;height:38px;padding-left:34px;
    background-repeat:no-repeat;background-position:11px 50%;background-size:15px 15px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>")}
  .mfilt-btn.fbtn{display:inline-flex;width:auto;height:38px;gap:8px;padding:0 14px;
    border:1px solid var(--line);border-radius:10px;background:var(--card);
    font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;
    transition:border-color .16s cubic-bezier(.23,1,.32,1), color .16s cubic-bezier(.23,1,.32,1)}
  .mfilt-btn.fbtn svg{width:17px;height:17px}
  .mfilt-btn.fbtn:hover{border-color:var(--accent);color:var(--accent)}
  .mfilt-btn.fbtn:active{transform:scale(.97)}
  /* кнопка держит открытое состояние цветом — видно, что поля не спрятаны */
  form.mfilt.fopen ~ * .mfilt-btn.fbtn,
  .pagehead.ph-list:has(~ * form.mfilt.fopen) .mfilt-btn.fbtn,
  .pagehead.ph-list:has(+ form.mfilt.fopen) .mfilt-btn.fbtn{border-color:var(--accent);color:var(--accent)}
  /* Заявка 1384: раскрытый фильтр — своя плашка, а не строка враспор.
     Заявка 1388: плашка стоит НАД таблицей и раздвигает лист, а не висит поверх него:
     выставленный отбор должен быть на виду всё время, пока смотришь список */
  form.mfilt.fopen > .mfilt-fields{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow);padding:14px 16px;margin-bottom:2px}
  /* заявка 1391: поля из окна Справочника в плашке листа выглядят как обычные поля */
  .fsh-inline .fsh-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;
    border:0;padding:0;background:none;min-height:0;width:auto}
  .fsh-inline .fsh-row > span{font-size:12px;color:var(--muted)}
  /* заявка 1397: ячейки одной ширины — ряд выстраивается ровно; подписи-заголовки
     внутри плашки не нужны, «Фильтр» и так написан на кнопке */
  .fsh-inline .fsh-row{width:184px}
  /* заявка 1440: max-width 64% пришёл из мобильного листа (подпись слева, список справа)
     и резал слова в плашке: «Все скла», «Наимен». Ячейки одной ширины, текст обычный */
  .fsh-inline .fsh-row select{min-height:38px;width:100%;max-width:none;font-size:14px;font-weight:400}
  .fsh-inline .fsh-h{display:none}
  form.mfilt.fsh-inline > .mfilt-fields{padding:12px 16px;gap:10px 12px}
  .fsh-inline .fsh-seg{display:flex;gap:6px}
  .fsh-inline .fsh-reset{align-self:flex-end;order:99;font-size:13px;color:var(--red);
    text-decoration:none;border:0;padding:0 0 9px;background:none;width:auto;display:inline-block}
  form.mfilt:not(.fopen) > .mfilt-fields{display:none}
  /* «Сброс» относится к полям отбора и прячется вместе с ними: над списком он висел
     сам по себе и выглядел кнопкой неизвестно от чего */
  form.mfilt:not(.fopen) > .fres,form.mfilt:not(.fopen) > .fsave{display:none}
  form.mfilt:not(.fopen){margin-bottom:0!important}
  /* заявка 1434: форма заказов кипера — карточкой; на широком экране поля и так
     встают своей плашкой, а пустая карточка вокруг свёрнутого фильтра была полосой */
  form.mfilt.card{background:none;border:0;box-shadow:none;padding:0}
  /* заявка 1441: «ожидается» под полем факта делало его выше соседей — подписи и поля
     строки закрытия смены стояли лесенкой. Подсказка висит под полем, места не занимает */
  .shclose{padding-bottom:18px}
  .shclose .field{position:relative}
  .shclose .shexp{position:absolute;top:100%;left:0;margin-top:2px;white-space:nowrap}
  .shift-hero h2 .btn{font-size:13.5px;font-weight:600;min-height:38px;height:38px}
  /* заявки 1448/1450: панель выбранных строк документа — над заголовками столбцов,
     липнет при прокрутке (sticky из bulk.js); фон карточки, в которой стоит таблица */
  /* заявка 1451: без лишнего воздуха — строка кнопок вплотную к шапке таблицы */
  .bulkbar.rowbar{background:var(--card,#fff);padding:2px 0 6px;margin-top:-6px}
  /* заявка 1453: в кассе строка действий стоит не в карточке, а прямо на сером фоне:
     белая полоса шире таблицы, «Выбрано» упиралось в её край и в шапку таблицы.
     Фон — как у страницы, отступ до таблицы */
  .pos-wrap > .bulkbar{background:#F4F5F7;padding:6px 0 12px}
}

/* Заявка 1366: сохранённые отборы — ячейками в строке действий над списком, справа
   от кнопок. Ячейка — ссылка на тот же лист с запомненными параметрами; крестик
   убирает закладку. Отбор, который стоит сейчас, ячейка держит цветом. */
.favs{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.favchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color .16s cubic-bezier(.23,1,.32,1),color .16s cubic-bezier(.23,1,.32,1)}
.favchip:hover{border-color:var(--accent);color:var(--accent)}
.favchip:active{transform:scale(.97)}
.favchip.on{border-color:var(--accent);color:var(--accent)}
.favnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.favx{color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0 1px}
.favx:hover{color:var(--red)}
.mfilt .fsave{padding:4px 9px;min-height:38px;display:inline-flex;align-items:center}
/* заявки 1432/1433: на телефоне у листа фильтров свой «Сбросить фильтр» в шапке — второй
   «Сброс» в полях дублировал его. Закладка там тоже не нужна: её ячейки живут только
   на большом экране. nomob не спасал: поля листа выставляют кнопкам display сами */
@media(max-width:700px){.mfilt .fres,.mfilt .fsave{display:none!important}}
@media(prefers-reduced-motion:reduce){.favchip{transition:none}}

/* заявка 1364: шестерёнка полей внутри раскрытого фильтра — вид тот же, что у
   шестерёнки колонок; стоит последней в ряду полей и не тянется по высоте */
.mfilt-fields > .fltcfg{align-self:flex-end;margin-bottom:2px}
.mfilt-fields > .fltcfg > summary{min-height:38px;padding:4px 9px;display:flex;align-items:center}
@media(max-width:700px){
  .mfilt.fon .mfilt-fields > .fltcfg{display:none}   /* в листе фильтров на телефоне не нужна */
}

/* Заявки 1381/1382: две половины экрана — слева выбор/график, справа сводка строками.
   Три одинаковые плашки в ряд занимали высоту, а читались как один блок */
/* заявки 1392/1393: половинки одной высоты — разнобой режет глаз. Карточка тянется
   на всю высоту строки, а строки сводки делят её поровну */
/* minmax(0,…): без него колонка сетки растягивалась по самой широкой таблице внутри,
   и на телефоне весь лист уезжал вбок («Корректировки», «Кальяны») */
.halfrow{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:14px;
  align-items:stretch}
.halfrow > .card{display:flex;flex-direction:column;min-width:0}
.halfrow > .card.sumrows .srow{flex:1;align-items:center}
@media(min-width:1000px){.halfrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.halfrow > .card{margin-bottom:0}
.grid2{align-items:stretch}
.grid2 > .card{display:flex;flex-direction:column}
.sumrows .srow{display:flex;align-items:baseline;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.sumrows .srow:last-child{border-bottom:0}
.sumrows .srow:first-child{padding-top:0}
.sumrows .srow .l{flex:1;min-width:0;color:var(--muted);font-size:13.5px}
.sumrows .srow .v{font-size:18px;font-weight:700;white-space:nowrap}
.sumrows .srow .sub{color:var(--muted);font-size:12.5px;white-space:nowrap}

/* Заявка 1402: карточка контрагента — телефон, почта и статья не режут текст (поле
   тянется по содержимому), заметка идёт своей строкой, у галочек «Статус» нет лишнего
   воздуха сверху. Так первая строка ниже, а карточка в целом компактнее */
.crmcard .field{min-width:200px}
.crmcard .field > input,.crmcard .field > select{width:100%;text-overflow:ellipsis}
.crmcard .field.cpwho{flex:1 0 100%;margin-bottom:4px}
.crmcard .cpwho > label{margin-bottom:2px}
.crmcard .field.cpnote{flex:1 0 100%}

/* заявка 1403: необратимое действие в строке кнопок карточки стоит справа, отдельно
   от «Сохранить» и «Отмена» — чтобы не нажать по инерции */
.refmodal-foot .dropbtn{margin-left:auto}

/* заявка 1410: доли гостей в закрытом чеке — по строке на гостя */
.gshare{padding:2px 0}