/* ОБЩИЙ ВИД СКЛАДА И КАБИНЕТА КЛИЕНТА — «ОДНА СЕРИЯ» С MYSELLER (06.10.2026).

   Заказ владельца: склад palletto.ru и MySeller должны выглядеть как сайты
   одной серии — те же кнопки, карточки, таблицы, меню. Меры взяты из того же
   разбора образца, что и у MySeller (yoolip-ekrany.md, раздел 15), и из
   каркаса MySeller (ops/web/pribyl/templates/menyu.html, коммит f70cc1b):
   цвета и размеры совпадают дословно, акцент тот же фиолетово-синий.
   Файлы, тексты и картинки образца не берутся — всё написано здесь.

   ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ, а не внутри <style> базовых шаблонов.
   1. Один файл на оба базовых шаблона (склад и кабинет): два стиля молча
      расходятся, а это ровно то, против чего заказ.
   2. Комментарий внутри <style> уходит в тело каждой страницы, и проверки,
      ищущие слова на странице, находили пояснения вместо кнопок (CLAUDE.md,
      авария 07.09.2026). Здесь пояснения в отдельном файле и на страницу
      не попадают.

   Файл подключается ПОСЛЕ встроенного <style> базового шаблона и потому
   переопределяет прежний вид, не трогая прежние правила раскладки (перенос
   отборов, карточки на узком, крупные чекбоксы, прокрутка таблиц внутри
   себя) — они остаются в силе.

   Что НЕ меняется: палец. Все нажимаемые места не ниже 44 px (правило
   склада про промах пальцем), поле скана на телефоне 48 px. Печать
   этикеток не затрагивается: раскладка с меню действует только на экране. */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/onest-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/onest-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/onest-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/onest-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/onest-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/onest-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/onest-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/onest-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. ТОКЕНЫ: те же имена и значения, что у MySeller ---------- */
:root {
  --fon: #fff;               /* карточки, меню */
  --fon-str: #fff;           /* фон страницы */
  --tekst: #111827;
  --tekst-yacheyki: #374151;
  --slabo: #6b7280;
  --ramka: #e5e7eb;
  --shapka: #f9fafb;
  --seryy-trek: #f3f4f6;
  --akcent: #5b5bd6;
  --akcent-tyomnyy: #4338ca;
  --akcent-fon: #eef0fd;
  --zel: #047857;  --zel-fon: #ecfdf5;
  --yant: #b45309; --yant-fon: #fffbeb;
  --kras: #b91c1c; --kras-fon: #fef2f2;
  --sera: #4b5563; --sera-fon: #f3f4f6;
  --info: #1d4ed8; --info-fon: #eff6ff;
  --radius-kartochki: 16px;
  --radius-bloka: 12px;
  --radius-knopki: 8px;
  --shrift: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. ОСНОВА ---------- */
html { background: var(--fon-str); }
body {
  font-family: var(--shrift);
  font-size: 15px;
  line-height: 1.45;
  background: var(--fon-str);
  color: var(--tekst);
}
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h2 { font-size: 16px; font-weight: 600; }  /* как у MoiSeller (stil-moiseller.md, раздел 2) */
h3 { font-size: 16px; font-weight: 600; }
a { color: var(--akcent); }
a:hover { color: var(--akcent-tyomnyy); }
.meta, .help, .slabo { color: var(--slabo); }  /* .slabo — имя MoiSeller */

/* ---------- 3. КАРТОЧКИ: белые, рамка 1 px, скругление 16 px, без тени ---------- */
.card {
  background: var(--fon);
  border: 1px solid var(--ramka);
  border-radius: var(--radius-kartochki);
  box-shadow: none;
  padding: 20px;
}

/* KPI-карточка кабинета: серая подпись, крупное число. */
.summary-grid { gap: 16px; }
.summary-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--fon);
  border: 1px solid var(--ramka);
  border-radius: var(--radius-kartochki);
  color: var(--slabo);
  font-size: 14px;
  padding: 16px;
}
.summary-card strong { font-size: 28px; font-weight: 600; color: var(--tekst); line-height: 1.15; }
a.summary-card:hover { border-color: var(--akcent); }

/* ---------- 4. КНОПКИ ---------- */
/* основная — заливка акцентом; высота не ниже пальца */
button, .btn, a.knopka {
  font-family: var(--shrift);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border: 1px solid var(--akcent);
  border-radius: var(--radius-knopki);
  background: var(--akcent);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}
button:hover, .btn:hover, a.knopka:hover {
  background: var(--akcent-tyomnyy); border-color: var(--akcent-tyomnyy); color: #fff;
}
a.knopka { display: inline-flex; align-items: center; gap: 6px; }
/* нейтральная — белая с серой рамкой (была серая заливка) */
button.secondary, .btn.secondary, button.btn-secondary, .btn-secondary {
  background: var(--fon);
  color: var(--tekst-yacheyki);
  border: 1px solid var(--ramka);
}
button.secondary:hover, .btn.secondary:hover, .btn-secondary:hover {
  background: var(--seryy-trek); color: var(--tekst); border-color: var(--ramka);
}
/* опасная — красная заливка */
button.danger, .btn.danger, button.btn-danger, .btn-danger {
  background: #dc2626; border-color: #dc2626; color: #fff;
}
button.danger:hover, .btn.danger:hover, .btn-danger:hover { background: var(--kras); border-color: var(--kras); }
/* второстепенная — белая с рамкой акцента (на будущее, класс .vtor) */
.btn.vtor, button.vtor, a.knopka.vtor {
  background: var(--fon); color: var(--akcent); border: 1.5px solid var(--akcent);
}
button:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- 5. ПОЛЯ ВВОДА ---------- */
input:not([type]), input[type="text"], input[type="number"], input[type="password"], input[type="email"],
input[type="search"], input[type="date"], input[type="file"], select, textarea {
  font-family: var(--shrift);
  font-size: 16px;
  color: var(--tekst);
  background: var(--fon);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-knopki);
  padding: 10px 12px;
}
input:not([type]), input[type="text"], input[type="number"], input[type="password"], input[type="email"],
input[type="search"] { min-height: 48px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--akcent);
  outline: none;
  box-shadow: 0 0 0 3px var(--akcent-fon);
}
label:not(.pole):not(:has(input)) { color: var(--tekst-yacheyki); font-size: 14px; font-weight: 500; }
/* Чекбокс: место нажатия прежнее, 44×44 (правило склада про палец), а
   нарисован в нём аккуратный квадрат 22 px, как в серии. Рисунок —
   фоном, поэтому размер места нажатия не меняется ни на пиксель. */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 10px; cursor: pointer; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='5' fill='%23fff' stroke='%23d1d5db' stroke-width='1.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='5' fill='%235b5bd6' stroke='%235b5bd6' stroke-width='1.5'/%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--akcent); outline-offset: -8px; }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Панель отборов — одинаковая у склада и кабинета. */
form.otbory { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 16px; }
form.otbory button, form.otbory .btn { margin: 0; }
form.otbory label.pole { font-size: 11px; color: var(--slabo); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
form.otbory input[type="text"], form.otbory input[type="date"],
form.otbory input[type="search"], form.otbory select {
  font-size: 14px; border: 1px solid #d1d5db; border-radius: var(--radius-knopki); min-height: 40px; padding: 8px 10px;
}
form.otbory button, form.otbory .btn { font-size: 14px; min-height: 40px; padding: 8px 16px; }

/* ---------- 6. ТАБЛИЦЫ: без вертикальных линий, шапка серым капсом 11 px ---------- */
table { border-collapse: collapse; font-size: 14px; }
td, th { padding: 10px 12px; border-left: 0; border-right: 0; border-bottom: 1px solid var(--ramka); text-align: left; }
td { color: var(--tekst-yacheyki); }
th {
  font-size: 11px; font-weight: 500; color: var(--slabo);
  text-transform: uppercase; letter-spacing: .05em; background: var(--shapka);
}
/* Чередование оставлено (наряд 208: по полосе глаз идёт в длинном списке),
   но бледнее — серией служит то же светло-серое, что у шапки. */
tbody tr:nth-child(even), table tr:nth-child(even) { background: var(--shapka); }
table tr:first-child { background: transparent; }
tr[data-vybor]:hover { background: var(--akcent-fon); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- 7. ПЛАШКИ И ПИЛЮЛИ ---------- */
.error {
  background: var(--kras-fon); color: var(--kras);
  border: 1px solid #fecaca; border-radius: var(--radius-bloka);
  padding: 12px 16px; font-weight: 500; font-size: 15px;
}
.warning {
  background: var(--yant-fon); color: var(--yant);
  border: 1px solid #fde68a; border-radius: var(--radius-bloka); padding: 12px 16px;
}
.notice {
  background: var(--info-fon); color: var(--tekst);
  border: 1px solid #dbeafe; border-radius: var(--radius-bloka); padding: 12px 16px;
}
.pilyulya {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: var(--sera-fon); color: var(--sera);
}
.pilyulya.zel { background: var(--zel-fon); color: var(--zel); }
.pilyulya.yant { background: var(--yant-fon); color: var(--yant); }
.pilyulya.kras { background: var(--kras-fon); color: var(--kras); }
.pilyulya.akcent { background: var(--akcent-fon); color: var(--akcent-tyomnyy); }

/* ---------- 8. МЕНЮ: колонка 240 px слева на широком экране ---------- */
/* Значок пункта меню — тонкая обводка 2 px, 16 px, как у MySeller. */
.znachok {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Знак — логотип Palletto (static/warehouse/ikonki/, 08.10.2026, версия 2 — логотип владельца), картинка, а не буква. */
.menyu-znak { width: 30px; height: 30px; display: block; flex: none; }
.menyu-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--tekst); text-decoration: none; }

/* Пункты меню склада: не кнопки-кирпичи, а строки меню. */
.topbar .navigatsiya a.btn, .topbar .navigatsiya .tekushchiy,
.menu > a {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 0; border-radius: var(--radius-bloka);
  color: var(--tekst-yacheyki); font-size: 14px; font-weight: 500;
  padding: 8px 12px; min-height: 40px; text-decoration: none; white-space: nowrap;
}
.topbar .navigatsiya a.btn:hover, .menu > a:hover { background: var(--seryy-trek); color: var(--tekst); }
.topbar .navigatsiya .tekushchiy, .menu > a[aria-current="page"] {
  background: var(--akcent-fon); color: var(--akcent-tyomnyy); font-weight: 600;
}
.menu > a strong { font-weight: inherit; }
.topbar .navigatsiya .meta, .menu .kto { color: var(--slabo); font-size: 13px; }
.topbar .navigatsiya form button, .menu form button {
  background: var(--fon); color: var(--tekst); border: 1px solid var(--ramka);
  font-size: 14px; min-height: 36px; padding: 6px 12px;
}
.topbar .navigatsiya form button:hover, .menu form button:hover { background: var(--seryy-trek); }

@media screen and (min-width: 1024px) {
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) { padding: 24px 32px 40px 272px; }
  body:has(> .topbar .navigatsiya) .topbar, :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu {
    position: fixed; left: 0; top: 0; bottom: 0; width: 240px; z-index: 20;
    margin: 0; padding: 16px 12px; overflow-y: auto;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
    background: var(--fon); border-right: 1px solid var(--ramka);
  }
  body:has(> .topbar .navigatsiya) .topbar > .menyu-logo, :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu > .menyu-logo { padding: 4px 8px 14px; }
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .topbar .navigatsiya {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: 1;
  }
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .topbar .navigatsiya a.btn, :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .topbar .navigatsiya .tekushchiy,
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu > a { width: 100%; margin: 0; }
  /* кто вошёл и «Выйти» — внизу колонки, как у MySeller */
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .topbar .navigatsiya .meta, :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu .kto {
    margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--ramka);
  }
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .topbar .navigatsiya form, :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu form { padding: 0 8px; }
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu form {
    margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--ramka);
  }
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu .spacer { display: none; }
  /* «Выйти» не растягивается на всю ширину */
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .topbar .navigatsiya form button, :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu form button { width: auto; }
}

/* Узкий экран: строка меню сверху, прокручивается внутри себя (правило
   склада от 13.09.2026 — страница вбок не едет). */
@media screen and (max-width: 1023px) {
  body:has(> .topbar .navigatsiya) .topbar, :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .menu {
    background: var(--fon); border: 1px solid var(--ramka); border-radius: var(--radius-kartochki);
    padding: 8px 10px; margin-bottom: 16px; gap: 6px;
  }
  :is(body:has(> .topbar .navigatsiya), body:has(> .menu)) .topbar .navigatsiya { gap: 2px; }
}
@media screen and (max-width: 430px) {
  body { font-size: 15px; }
  body:has(> .topbar .navigatsiya) .topbar { flex-wrap: nowrap; }
  .topbar > .menyu-logo .menyu-nazvanie { display: none; }
  .topbar .navigatsiya a.btn, .topbar .navigatsiya .tekushchiy,
  .topbar .navigatsiya form button { font-size: 14px; min-height: 44px; }
  h1 { font-size: 20px; }
}

/* ---------- 9. КАРКАС СТРАНИЦЫ КАБИНЕТА (07.10.2026, аудит стиля, docs/stil.md) ----------
   Вошедший клиент (есть меню слева): карточки во всю ширину рабочей
   области, от левого края, друг под другом через 20 px — как у MoiSeller.
   Узкая карточка 420 px по центру — вид страницы ВХОДА; внутри кабинета
   она давала столбик посреди пустого экрана («Настройки», «Инструкции»). */
body:has(> .menu) .card { max-width: 1440px; margin: 0 0 20px; }
/* Вход по бейджу — узкая карточка по центру, как вход клиента. */
.card.vhod { max-width: 420px; margin: 48px auto; }
/* Обёртка базового шаблона, внутри которой страница положила свои
   карточки, — не рамка, а стопка: иначе рамка в рамке. */
.card.obolochka:has(> .card) { background: transparent; border: 0; padding: 0; }
/* «← Магазины» и подобные возвраты — строка над заголовком страницы.
   До 07.10 она вставала на место меню и закрывала его на 18 экранах. */
body:has(> .menu) .topbar {
  max-width: none; width: auto; margin: 0 0 12px; display: flex; flex-wrap: wrap;
  gap: 8px 16px; align-items: center; font-size: 14px;
}
body:has(> .menu) .topbar > a:not(.btn):not(.knopka) { color: var(--slabo); text-decoration: none; }
body:has(> .menu) .topbar > a:not(.btn):not(.knopka):hover { color: var(--akcent); }
/* Таблица в карточке — во всю ширину карточки. */
.card table { width: 100%; }
/* Поле формы в широкой карточке — не шире 560 px: строка ввода во всю
   ширину монитора читается плохо. На телефоне — во всю ширину, как было. */
@media screen and (min-width: 700px) {
  body:has(> .menu) .card :is(input[type="text"], input[type="number"], input[type="password"],
    input[type="email"], input[type="date"], input[type="file"], select, textarea):not(form.otbory *):not(td *) {
    max-width: 560px;
  }
}

/* Подпись, в которую вложено поле, — над полем, а не слева от него. */
body:has(> .menu) .card form > label:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), > select, > textarea) {
  display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 14px 0 0;
}

/* ---------- 10. ГОТОВЫЕ ДЕТАЛИ СТРАНИЦЫ (docs/stil.md) ---------- */
/* Шапка страницы: заголовок слева, действия справа в той же строке. */
.shapka-stranicy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.shapka-stranicy h1 { margin: 0; }
.shapka-stranicy .deystviya { display: flex; flex-wrap: wrap; gap: 8px; }
/* Заголовок карточки-раздела: название, под ним серое пояснение. */
.card > h2:first-child, .card > .zagolovok-razdela:first-child { margin-top: 0; }
.zagolovok-razdela { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.zagolovok-razdela h2 { margin: 0; }
:is(.shapka-stranicy, .zagolovok-razdela, .kopiruemoe, td) :is(form, button, .btn) { margin: 0; }
.poyasnenie { color: var(--slabo); font-size: 14px; margin: 4px 0 16px; max-width: 72ch; }
/* Выделенный блок внутри карточки: серый фон, без рамки-в-рамке. */
.vrezka { background: var(--shapka); border-radius: var(--radius-bloka); padding: 16px; margin: 0 0 16px; }
.vrezka > :first-child { margin-top: 0; } .vrezka > :last-child { margin-bottom: 0; }
.poyasnenie:last-child { margin-bottom: 0; }
.notice.soobshchenie { margin: 0 0 20px; }
td.sprava, th.sprava { text-align: right; }
.vrezka.akcent { background: var(--akcent-fon); }
.vrezka.zel { background: var(--zel-fon); }
/* Значение, которое копируют: моноширинное, переносится, рядом кнопка. */
.kopiruemoe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.kopiruemoe code {
  flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; font-size: 14px;
  background: var(--fon); border: 1px solid var(--ramka); border-radius: var(--radius-knopki);
  padding: 10px 12px; line-height: 1.4;
}
/* Пустое состояние: по центру, серая иконка, строка и пояснение. */
.pusto { text-align: center; color: var(--slabo); padding: 32px 16px; }
.pusto .znachok { width: 32px; height: 32px; stroke-width: 1.5; margin-bottom: 8px; }
.pusto strong { display: block; color: var(--tekst-yacheyki); font-weight: 500; margin-bottom: 4px; }
/* Строка «подпись — значение» в карточке. */
/* Форма из многих полей — сеткой в две колонки, подпись над полем. */
.setka-poley { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 20px; max-width: 900px; }
.setka-poley > label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.setka-poley > label :is(input, select, textarea) { width: 100%; max-width: none; margin: 0; }
.setka-poley > .vo-vsyu { grid-column: 1 / -1; }
.setka-poley button { margin: 0; }
/* Короткая форма в строку (в ячейке таблицы, над таблицей): поля по
   размеру содержимого, ниже ростом. Экран управления, работают с ПК. */
form.v-stroku { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font-size: 14px; }
td form.v-stroku { margin: 0; }
form.v-stroku :is(input:not([type="hidden"]):not([type="checkbox"]), select) {
  display: inline-block; width: auto; max-width: 100%; min-height: 36px; padding: 6px 10px; font-size: 14px; margin: 0;
}
form.v-stroku button, form.v-stroku .btn { min-height: 36px; padding: 6px 14px; font-size: 14px; margin: 0; }
form.v-stroku label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; }
td.tsena { white-space: nowrap; }
.svoystva { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; font-size: 14px; }
.svoystva dt { color: var(--slabo); }
.svoystva dd { margin: 0; color: var(--tekst); }

/* Задачи (07.10.2026): у каждого вида повтора свой цвет полосы слева и
   пилюли — разовую видно сразу, ежедневную не спутать с месячной.
   Цвета только из переменных серии. */
.zadacha-blok { border: 1px solid var(--ramka); border-left: 6px solid var(--slabo); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; display: flex; gap: 14px; align-items: flex-start; background: var(--fon); }
.zadacha-blok form { margin: 0; flex: 0 0 auto; }
.zadacha-blok .tekst { flex: 1 1 auto; }
.zadacha-blok .nazvanie { font-weight: 600; }
.zadacha-blok.razovaya { border-left-color: var(--yant); background: var(--yant-fon); }
.zadacha-blok.ezhednevnaya { border-left-color: var(--akcent); }
.zadacha-blok.nedelnaya { border-left-color: var(--info); }
.zadacha-blok.mesyachnaya { border-left-color: var(--zel); }
.zadacha-blok.prosrochena { border-left-color: var(--kras); background: var(--kras-fon); }
.zadacha-blok.sdelana { opacity: .6; background: var(--shapka); }
.zadacha-blok.sdelana .nazvanie { text-decoration: line-through; }
.pilyulya.info { background: var(--info-fon); color: var(--info); }
.pilyulya.razovaya { background: var(--yant-fon); color: var(--yant); }
.pilyulya.ezhednevnaya { background: var(--akcent-fon); color: var(--akcent-tyomnyy); }
.pilyulya.nedelnaya { background: var(--info-fon); color: var(--info); }
.pilyulya.mesyachnaya { background: var(--zel-fon); color: var(--zel); }
.knopka-sdelano { min-width: 150px; }
.card.zadachi-na-glavnoy { border-left: 6px solid var(--akcent); }

@media print {
  body { padding: 0; }
}

/* ---------- 10. ТАБЛИЦА КАРТОЧКАМИ НА ТЕЛЕФОНЕ (аудит 07.10.2026) ----------
   На 390 px таблица остатков была шириной около 2196 px: товар слева,
   количество и резерв далеко справа, вместе их не увидеть. Таблица с
   классом `kartochki-na-telefone` на узком экране становится стопкой
   карточек: строка — карточка, ячейка — строка «подпись — значение».
   Подпись берётся из `data-podpis` ячейки; ячейка `glavnaya` (товар) —
   заголовок карточки без подписи. Строка с заголовками столбцов скрыта. */
@media screen and (max-width: 640px) {
  table.kartochki-na-telefone, table.kartochki-na-telefone tbody,
  table.kartochki-na-telefone tr, table.kartochki-na-telefone td {
    display: block; width: auto; white-space: normal; overflow: visible;
  }
  table.kartochki-na-telefone tr:has(> th) { display: none; }
  table.kartochki-na-telefone tr {
    border: 1px solid var(--ramka); border-radius: var(--radius-bloka);
    padding: 8px 12px; margin-bottom: 10px; background: var(--fon);
  }
  table.kartochki-na-telefone td {
    border: 0; padding: 3px 0; display: flex; gap: 8px;
    justify-content: space-between; align-items: baseline;
  }
  table.kartochki-na-telefone td[data-podpis]::before {
    content: attr(data-podpis); color: var(--slabo); font-size: 13px; flex: none;
  }
  table.kartochki-na-telefone td.glavnaya { display: block; font-weight: 500; }
  table.kartochki-na-telefone td:empty { display: none; }
}

/* ---------- 11. МЕНЮ РАЗДЕЛОВ НА ТЕЛЕФОНЕ (аудит 07.10.2026) ----------
   Узкий экран: пункты меню свёрнуты, видны текущий пункт и
   кнопка «☰ Все разделы». Открытое меню — столбик во всю ширину, без
   прокрутки вбок. Класс `svyornuto` ставит скрипт базового шаблона; без
   скрипта меню остаётся строкой, как было. */
.menyu-knopka { font-size: 14px; min-height: 44px; padding: 8px 14px; }
.menyu-knopka[hidden] { display: none !important; }
@media screen and (max-width: 1023px) {
  .topbar.svyornuto .navigatsiya > :not(.tekushchiy) { display: none; }
  .menu.svyornuto > a:not([aria-current="page"]), .menu.svyornuto > form,
  .menu.svyornuto > .spacer { display: none; }
  .topbar:not(.svyornuto):has(> .menyu-knopka:not([hidden])) .navigatsiya {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow: visible;
    width: 100%;
  }
  .topbar:not(.svyornuto):has(> .menyu-knopka:not([hidden])) { flex-wrap: wrap; }
  .menu:not(.svyornuto):has(> .menyu-knopka:not([hidden])) { flex-direction: column; align-items: stretch; }
}
/* Окно выбора товара (списание, внесение, заявки) переносит строки и на
   телефоне: общее правило узкого экрана `table { white-space: nowrap }`
   уводило остаток и резерв за правый край окна. */
table.vybor-tovara, table.vybor-tovara td { white-space: normal; }

/* ---------- 12. АУДИТ ГЛАЗАМИ ПОЛЬЗОВАТЕЛЯ (08.10.2026) ----------
   Замер Playwright на 109 экранах в шести ширинах (1440, 1024, 768, 414,
   390, 360). Что найдено и чем снято — ниже, по правилу на находку. */

/* ПЛАНШЕТ (431–1279 px): таблица шире карточки тянула ВСЮ страницу вбок.
   Замер: «Товары» клиента на 1024 px — страница на 149 px шире окна,
   «Управление → Товары» — на 258, «Заявки на отгрузку» — на 406, всего
   22 экрана. На телефоне (до 430 px) таблица давно прокручивается
   внутри себя, на столе (от 1280 px) всё влезает, а между ними правила
   не было. Теперь карточка с таблицей прокручивается внутри себя,
   страница остаётся шириной в окно. */
@media screen and (min-width: 431px) and (max-width: 1279px) {
  .card:has(table):not(.obolochka) { overflow-x: auto; }
}

/* Карточка-ссылка (список заявок к приёмке): подчёркивался каждый
   абзац внутри, включая серые пояснения. Ссылка — вся карточка, и
   подчёркивание ей ни к чему. */
a.card, a.card:hover { text-decoration: none; }

/* Подпись, обнимающая чекбокс («суббота», «только с остатком»): на
   1024 px квадрат чекбокса оставался в конце строки, а слово уезжало
   на следующую — галочка и подпись расходились. Пара держится вместе,
   длинная подпись переносится внутри себя. */
label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 8px; }

/* Окно выбора товара (списание, поступление): строка товара и поле
   «штук» разъезжались по трём строкам с пустотами — название занимало
   строку целиком, остаток падал под картинку. Название растёт и
   сжимается, остаток уходит отдельной строкой под ним, поле — справа. */
.vybor-tovara td > div > .stroka-tovara { flex: 1 1 220px; min-width: 0; }
.vybor-tovara td > div > .ostatok-spisaniya { flex: 1 1 100%; order: 9; }

/* Там же, на планшете: название товара в таблице ломалось ПО БУКВЕ
   («Б / у / т / ы / л / к / а» столбиком) — перенос «где угодно»,
   нужный телефону для длинных штрихкодов, при сжатой таблице давал
   столбцу ширину в одну букву. Столбцу товара — не уже 14em, перенос
   по словам. `!important` — потому что перенос задан прямо в разметке
   куска `_stroka_tovara.html`, и иначе его не перекрыть.
   Аудит 11.10.2026 (WA-08, X-3): на 1440 px та же беда («Бутылк а»),
   правило стояло только до 1279 px — теперь на всех ширинах шире
   телефона; на телефоне таблица и так идёт карточками. */
@media screen and (min-width: 431px) {
  .card table .stroka-tovara { min-width: 14em; }
  .card table .stroka-tovara > span { overflow-wrap: normal !important; }
}

/* «Сбросить» в панели отборов на 12 экранах стояло голой ссылкой
   67×22 px рядом с кнопкой «Показать» — на телефоне в неё не попасть.
   Теперь это нейтральная кнопка той же высоты, что соседняя. Правило
   общее, а не правка двенадцати шаблонов. */
form.otbory > a:not(.btn):not(.knopka) {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--ramka); border-radius: var(--radius-knopki);
  background: var(--fon); color: var(--tekst-yacheyki); font-size: 14px; font-weight: 500;
  text-decoration: none;
}
form.otbory > a:not(.btn):not(.knopka):hover { background: var(--seryy-trek); color: var(--tekst); }

/* «Расхождение» в ячейке списка отгрузок: плашка `.error` в строке —
   без отступов плашки-абзаца (у склада это правило было в базовом
   шаблоне, у кабинета — нет). */
strong.error, span.error { display: inline; padding: 1px 6px; margin: 0; border-radius: 6px; font-size: inherit; }

/* Поиск по товару в панели отборов на телефоне: поле стояло в обёртке
   `.poisk-tovara`, которая не растягивалась, и подсказка обрезалась. */
@media screen and (max-width: 430px) {
  form.otbory .poisk-tovara { flex: 1 1 100%; width: 100%; }
  form.otbory .poisk-tovara input[type="search"] { width: 100%; min-width: 0; }
  /* «Как это работает» в сборке вставало между карточкой скана (она
     поднята наверх) и описанием заявки. Ссылка выше карточки скана. */
  .soderzhimoe > .instr-podskazka { order: -2; }
}

/* Телефон, экран без своего пункта меню (форма короба, разбор навала):
   в свёрнутом меню не оставалось ни одного пункта — только логотип и
   «☰ Все разделы». Тогда виден пункт «Главная», чтобы было куда выйти. */
@media screen and (max-width: 1023px) {
  .topbar.svyornuto .navigatsiya:not(:has(.tekushchiy)) > a.glavnaya { display: inline-flex; }
}

/* «Цены»: свёрнутый список коробок — строка раскрытия как подзаголовок. */
details.spisok-korobok > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
details.spisok-korobok[open] > summary { margin-bottom: 8px; }

/* Карточка-строка на телефоне: ячейка с пояснением (`.meta`) — значение
   в строке подписи, пояснение своей строкой ниже, а не столбиками. */
@media screen and (max-width: 640px) {
  table.kartochki-na-telefone td { flex-wrap: wrap; }
  table.kartochki-na-telefone td > .meta { flex: 1 1 100%; text-align: left; }
  table.kartochki-na-telefone td:has(> input[type="checkbox"]) { flex-wrap: nowrap; align-items: center; }
  table.kartochki-na-telefone td > input[type="checkbox"] { margin-left: auto; }
}

/* ---------- 13. АУДИТ 22.10.2026 (телефон и цели нажатия) ----------
   A11-9: действия в карточке списания — под заявкой, во всю ширину:
   поле «Вина», PIN и кнопка столбиком, как у `stroki-priyomki td button`.
   A7-13: таблица шире карточки прокручивается внутри обёртки
   `prokrutka-tablitsy`, а не вылезает за край (на телефоне — карточки,
   обёртке прокручивать нечего). A8-15: ссылка-действие не ниже 32 px
   (`tsel-nazhatiya`): «Как это работает», номер заявки в «Сборке». */
@media screen and (max-width: 640px) {
  table.kartochki-na-telefone td.deystviya { display: block; }
  table.kartochki-na-telefone td.deystviya form { display: grid; gap: 6px; margin: 8px 0 0; }
  table.kartochki-na-telefone td.deystviya form > * { width: 100%; box-sizing: border-box; min-height: 44px; }
}
.prokrutka-tablitsy { max-width: 100%; overflow-x: auto; }
.prokrutka-tablitsy > table { margin: 0; }
a.tsel-nazhatiya { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; }
/* Задачи: перенос и отчёт к отметке (08.10.2026). Формы внутри текста
   задачи — во всю ширину, а не узкой колонкой, как кнопка «Сделано». */
.zadacha-blok .tekst form { flex: none; margin-top: 8px; display: grid; gap: 8px; max-width: 520px; }
.zadacha-blok .tekst form label { display: grid; gap: 4px; font-size: 14px; color: var(--slabo); }
.zadacha-podrobno { margin-top: 6px; }
.zadacha-podrobno summary { cursor: pointer; color: var(--akcent); font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
.zadacha-perenos { margin-top: 6px; }
.zadacha-otchet { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--fon); border: 1px solid var(--ramka); color: var(--tekst); }
.zadacha-blok.sdelana .zadacha-otchet { text-decoration: none; }
.zadacha-podrobno form + form { border-top: 1px solid var(--ramka); padding-top: 12px; margin-top: 14px; }
.zadacha-blok .tekst { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .zadacha-blok { flex-wrap: wrap; }
  .zadacha-blok .tekst { flex-basis: 100%; }
}

/* ---------- СВОДКА СКЛАДА на главной (10.10.2026) ---------- */
.pokazateli { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.pokazatel {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--fon); border: 1px solid var(--ramka);
  border-radius: var(--radius-kartochki); color: var(--slabo);
  font-size: 14px; padding: 16px;
}
.pokazatel strong { font-size: 28px; font-weight: 600; color: var(--tekst); line-height: 1.15; }
.pokazatel small { font-size: 12px; color: var(--slabo); line-height: 1.35; }
a.pokazatel.ssylka:hover { border-color: var(--akcent); }
/* процент — под числом и мельче; цвет не оценивает: рост расходов не «хорошо» и не «плохо» */
.pokazatel small.sravnenie { font-size: 11px; }
.dve-kolonki { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; }
.tablitsa-pokrutka { max-height: 420px; overflow: auto; }
table.shapka-lipkaya thead th { position: sticky; top: 0; z-index: 1; background: var(--shapka); }
@media (max-width: 600px) { .pokazatel strong { font-size: 24px; } }