/*
 * Дизайн-система рабочего места продавца.
 *
 * Каркас построен как у настольной программы, а не как у сайта:
 * окно не прокручивается целиком — прокручиваются только боковое меню
 * и рабочая область. Шапка и строка подсказок всегда на своих местах,
 * поэтому «верх не уезжает», а итоговые суммы не приходится искать.
 *
 * Плотность выше, чем у обычной веб-админки: у продавца на экране
 * должно помещаться больше строк без прокрутки.
 */

/* ---------- Светлая тема ---------- */

:root {
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #e9edf3;
  --border: #dbe1ea;
  --border-strong: #c2cbd9;

  --nav-bg: #101725;
  --nav-bg-2: #1a2334;
  --nav-border: rgba(255, 255, 255, .07);
  --nav-text: #9dabc4;
  --nav-text-strong: #ffffff;

  --text: #121a28;
  --text-muted: #57667f;
  --text-faint: #8593a9;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #e6edfe;
  --accent-text: #1d4ed8;

  --success: #0f7a41;
  --success-soft: #e4f6ec;
  --success-line: #16a34a;

  --warning: #8a5a00;
  --warning-soft: #fdf3dd;
  --warning-line: #d97706;

  --danger: #b42318;
  --danger-soft: #fdecea;
  --danger-line: #dc2626;

  --info: #0e6e8c;
  --info-soft: #e3f4f9;
  --info-line: #0891b2;

  --nav-width: 226px;
  --page-max: 1680px;
  --radius: 8px;
  --radius-sm: 6px;

  --shadow-sm: 0 1px 2px rgba(15, 22, 38, .05);
  --shadow: 0 1px 3px rgba(15, 22, 38, .08), 0 6px 16px -8px rgba(15, 22, 38, .12);
  --shadow-lg: 0 20px 50px -12px rgba(15, 22, 38, .35);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;

  color-scheme: light;
}

/* ---------- Тёмная тема ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1018;
    --surface: #141b28;
    --surface-2: #19212f;
    --surface-3: #202a3b;
    --border: #262f40;
    --border-strong: #364257;

    --nav-bg: #070b12;
    --nav-bg-2: #131b28;
    --nav-border: rgba(255, 255, 255, .06);
    --nav-text: #8895ad;

    --text: #e9eef7;
    --text-muted: #94a3bb;
    --text-faint: #68768d;

    --accent: #3b82f6;
    --accent-hover: #2f6fdd;
    --accent-soft: #162b52;
    --accent-text: #8fb2fb;

    --success: #4ade80;
    --success-soft: #0f2d1c;
    --warning: #fbbf24;
    --warning-soft: #30250a;
    --danger: #f87171;
    --danger-soft: #371818;
    --info: #38bdf8;
    --info-soft: #0b2833;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 20px -10px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0b1018;
  --surface: #141b28;
  --surface-2: #19212f;
  --surface-3: #202a3b;
  --border: #262f40;
  --border-strong: #364257;
  --nav-bg: #070b12;
  --nav-bg-2: #131b28;
  --nav-border: rgba(255, 255, 255, .06);
  --nav-text: #8895ad;
  --text: #e9eef7;
  --text-muted: #94a3bb;
  --text-faint: #68768d;
  --accent: #3b82f6;
  --accent-hover: #2f6fdd;
  --accent-soft: #162b52;
  --accent-text: #8fb2fb;
  --success: #4ade80;
  --success-soft: #0f2d1c;
  --warning: #fbbf24;
  --warning-soft: #30250a;
  --danger: #f87171;
  --danger-soft: #371818;
  --info: #38bdf8;
  --info-soft: #0b2833;
  color-scheme: dark;
}

/* ---------- Базовое ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /*
   * Прокручивается страница целиком — как везде.
   * Раньше здесь была прокрутка внутри рабочей области: колесо работало
   * только над ней, полосу было почти не видно, а до низа длинных списков
   * пользователь не добирался. Обычная прокрутка страницы предсказуема.
   */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  /*
   * Нулевая высота строки у самого body — чтобы пробелы и переносы между
   * тегами в разметке не создавали пустую полосу над приложением.
   * Внутри приложения высота строки нормальная.
   */
  line-height: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app { line-height: 1.45; }

.num, .metric-value, .money, .table td.num, .table th.num, .kv-val, .receipt-sum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.012em; }
h1 { font-size: 18px; }
h2 { font-size: 14px; }
h3 { font-size: 13.5px; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 4px;
}

svg.icon {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
svg.icon-sm { width: 14px; height: 14px; }

/* ---------- Каркас ---------- */

/* Затемнение под выдвижным меню — только на узком экране. */
.nav-backdrop { display: none; }

/* Рабочая часть отодвинута вправо на ширину закреплённого меню */
.main {
  margin-left: var(--nav-width);
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 1 auto;
  padding: 14px 20px 28px;
}

.content-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  width: 100%;
}

/* ---------- Боковое меню ---------- */

/* Меню закреплено у левого края и не уезжает при прокрутке страницы */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--nav-width);
  z-index: 30;
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--nav-border);
}

.nav-brand {
  padding: 13px;
  border-bottom: 1px solid var(--nav-border);
  flex: none;
}

.nav-brand-text { min-width: 0; }
.nav-brand-title {
  color: var(--nav-text-strong);
  font-size: 13.5px;
  font-weight: 620;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-brand-sub { font-size: 11px; color: var(--text-faint); }

.nav-user {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px;
  padding: 7px 9px;
  background: var(--nav-bg-2);
  border-radius: var(--radius-sm);
  flex: none;
}

.nav-avatar {
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 640;
  font-size: 11px;
}

.nav-user-name { color: var(--nav-text-strong); font-weight: 580; font-size: 13px; line-height: 1.2; }
.nav-user-role { font-size: 11px; color: var(--text-faint); }

/* Прокручивается только список разделов */
.nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--nav-bg-2) transparent;
  padding-bottom: 6px;
}
.nav-scroll::-webkit-scrollbar { width: 8px; }
.nav-scroll::-webkit-scrollbar-thumb { background: var(--nav-bg-2); border-radius: 4px; }

.nav-section {
  padding: 11px 14px 4px;
  font-size: 10px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
}

.nav-list { list-style: none; margin: 0; padding: 0 7px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  color: var(--nav-text);
  font-size: 13px;
  text-decoration: none;
  transition: background .1s ease, color .1s ease;
}

.nav-link:hover { background: var(--nav-bg-2); color: var(--nav-text-strong); text-decoration: none; }
.nav-link .icon { opacity: .7; width: 16px; height: 16px; }

.nav-link[aria-current="page"] {
  background: var(--accent);
  color: #fff;
  font-weight: 560;
}
.nav-link[aria-current="page"] .icon { opacity: 1; }

.nav-key {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  background: rgba(255, 255, 255, .07);
  border-radius: 3px;
  padding: 0 4px;
}
.nav-link[aria-current="page"] .nav-key { background: rgba(255, 255, 255, .22); color: #fff; }

/* Кнопка выхода всегда видна — не уезжает вниз вместе со списком */
.nav-foot {
  flex: none;
  padding: 8px;
  border-top: 1px solid var(--nav-border);
}

.nav-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--nav-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.nav-logout:hover { background: var(--nav-bg-2); color: var(--nav-text-strong); }

/* ---------- Шапка ---------- */

/* Шапка остаётся на виду при прокрутке страницы */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
}

.topbar-title { flex: 1; min-width: 0; }
.topbar-title p { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 7px; flex: none; }

/* Специфичность выше, чем у .btn: иначе кнопка меню видна на десктопе. */
.btn.nav-toggle { display: none; }

/* Показатель живого соединения */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success-line, var(--success));
  flex: none;
}
.live-dot.is-off { background: var(--text-faint); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.dot-live { animation: pulse 2.4s ease-in-out infinite; }

/* Полоса загрузки при переходах без перезагрузки страницы */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 100;
  opacity: 0;
  transition: width .2s ease, opacity .2s ease;
  pointer-events: none;
}
.progress.is-active { opacity: 1; }

/* ---------- Карточки ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  min-height: 40px;
}

.card-head h2 { flex: 1; min-width: 0; }
.card-head .icon { color: var(--text-muted); }
.card-body { padding: 13px; }
.card-body.tight { padding: 0; }

/* ---------- Плитки показателей ---------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
}

.metric {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 13px 11px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--border-strong);
}
.metric.is-accent::before  { background: var(--accent); }
.metric.is-success::before { background: var(--success-line, var(--success)); }
.metric.is-warning::before { background: var(--warning-line, var(--warning)); }
.metric.is-danger::before  { background: var(--danger-line, var(--danger)); }

.metric-top { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.metric-top .icon { width: 14px; height: 14px; }

.metric-label {
  font-size: 10.5px;
  font-weight: 660;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.metric-value {
  font-size: 22px;
  font-weight: 660;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 4px;
  white-space: nowrap;
}
.metric.is-danger .metric-value { color: var(--danger); }
.metric.is-success .metric-value { color: var(--success); }

.metric-note { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s, border-color .1s;
}

.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-success { background: var(--success-line, var(--success)); border-color: var(--success-line, var(--success)); color: #fff; }
.btn-danger  { background: var(--danger-line, var(--danger)); border-color: var(--danger-line, var(--danger)); color: #fff; }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-lg { padding: 11px 18px; font-size: 15px; }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-block { width: 100%; }

.btn-key {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .12);
}
.btn-primary .btn-key, .btn-success .btn-key, .btn-danger .btn-key { background: rgba(255, 255, 255, .24); }

/* ---------- Поля ---------- */

.field { display: block; margin-bottom: 11px; }
.field-label { display: block; font-size: 12px; font-weight: 580; margin-bottom: 4px; }
.field-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

.input, .select, .textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  transition: border-color .1s, box-shadow .1s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input.is-invalid, .select.is-invalid { border-color: var(--danger); }
.input-lg { padding: 10px 13px; font-size: 15px; }

/* Поле сканера. min-width:0 обязателен: без него поле с width:100%
   внутри флекс-строки сжимается до нечитаемой полоски. */
.scanner-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 10px 13px;
  font-size: 16px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.scanner-input:focus { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------- Таблицы ---------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }

.table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: 7px 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.table td {
  padding: 6px 11px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }

.table th.num, .table td.num { text-align: right; }
.table td.num.strong { font-weight: 640; }
.table-empty { padding: 30px 14px; text-align: center; color: var(--text-muted); }

/* ---------- Метки ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 620;
  white-space: nowrap;
  line-height: 1.55;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-muted   { background: var(--surface-3);    color: var(--text-muted); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- Сообщения ---------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--surface-2);
  border-left: 3px solid var(--border-strong);
  color: var(--text);
}
.alert + .alert { margin-top: 8px; }
.alert .icon { margin-top: 1px; }
.alert-title { font-weight: 620; }
.alert-note { color: var(--text-muted); font-size: 12px; }

.alert-success { background: var(--success-soft); border-left-color: var(--success-line, var(--success)); }
.alert-warning { background: var(--warning-soft); border-left-color: var(--warning-line, var(--warning)); }
.alert-danger  { background: var(--danger-soft);  border-left-color: var(--danger-line, var(--danger)); }
.alert-info    { background: var(--info-soft);    border-left-color: var(--info-line, var(--info)); }

.alert-success .icon { color: var(--success); }
.alert-warning .icon { color: var(--warning); }
.alert-danger .icon  { color: var(--danger); }
.alert-info .icon    { color: var(--info); }

.flash { margin-bottom: 12px; }

/* Всплывающие уведомления о событиях от других касс */
.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  animation: toast-in .2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Сетки ---------- */

.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid-side { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.grid-sale { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.stack { display: grid; gap: 12px; }

/* ---------- Пары «название — значение» ---------- */

.kv { display: grid; }
.kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.kv-row:last-child { border-bottom: none; }
.kv-key { color: var(--text-muted); font-size: 12.5px; }
.kv-val { font-weight: 580; text-align: right; }

/* ---------- Быстрые команды ---------- */

.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 8px; }

.quick-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  transition: border-color .1s, background .1s;
}
.quick-item:hover { border-color: var(--accent); background: var(--surface-2); text-decoration: none; }

.quick-icon {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid;
  place-items: center;
}

.quick-text { min-width: 0; flex: 1; }
.quick-title { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.quick-note { font-size: 11px; color: var(--text-muted); line-height: 1.3; margin-top: 1px; }

/* ---------- Форма документа (по образцу 1С) ---------- */

/*
 * Документ в 1С устроен всегда одинаково, и продавцы к этому привыкли:
 *   1) командная панель с главными действиями,
 *   2) шапка — поля документа в две колонки,
 *   3) табличная часть с нумерацией строк и своей панелью команд,
 *   4) итоги справа под таблицей.
 * Повторяем эту схему, чтобы переучиваться не пришлось.
 */

.doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Командная панель документа */
.doc-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}

.doc-toolbar .spacer { flex: 1 1 auto; }

.doc-toolbar-title {
  font-weight: 650;
  font-size: 14px;
  margin-right: 6px;
  white-space: nowrap;
}

/* Шапка документа: подпись слева, значение справа, две колонки */
.doc-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4px 22px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.doc-field {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

/*
 * Подпись переносится, если не влезла в свою колонку. С `nowrap`
 * длинная подпись вылезала за колонку и уезжала под поле ввода.
 */
.doc-field > label,
.doc-field > .doc-field-label {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-muted);
  text-align: right;
  overflow-wrap: anywhere;
}

.doc-field .input,
.doc-field .select { padding: 4px 8px; }

.doc-field-value { font-weight: 580; font-variant-numeric: tabular-nums; }

/* Панель команд над табличной частью */
.doc-tablebar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.doc-tablebar-title {
  font-weight: 640;
  margin-right: 4px;
}

/* Табличная часть: видимая сетка, как в 1С */
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.doc-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 660;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-top: 0;
  white-space: nowrap;
}

.doc-table td {
  padding: 3px 8px;
  border: 1px solid var(--border);
  vertical-align: middle;
  height: 30px;
}

.doc-table tbody tr:hover td { background: var(--surface-2); }
.doc-table tbody tr[aria-selected="true"] td { background: var(--accent-soft); }

.doc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-table .row-no {
  width: 38px;
  text-align: right;
  color: var(--text-faint);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.doc-table .row-actions { width: 34px; text-align: center; }

/* Поле прямо в ячейке таблицы — правка без модальных окон */
.cell-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 2px 4px;
  border-radius: 3px;
  text-align: right;
}
.cell-input:hover { border-color: var(--border-strong); background: var(--surface); }
.cell-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.doc-empty { padding: 28px 14px; text-align: center; color: var(--text-muted); }

/* Итоги: справа под таблицей */
.doc-totals {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.doc-totals-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 18px;
  align-items: baseline;
}

.doc-totals-grid dt { color: var(--text-muted); font-size: 12.5px; text-align: right; }
.doc-totals-grid dd {
  margin: 0;
  text-align: right;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.doc-totals-grid dt.grand { font-size: 14px; font-weight: 650; color: var(--text); }
.doc-totals-grid dd.grand {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-top: 2px;
}

/* Подбор товара — выдвижная панель под поиском, как форма подбора в 1С */
.picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 8px;
}
.picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 620;
}
/* Подбор ограничен по высоте, иначе каталог оттесняет чек за пределы экрана.
   Это единственное место с собственной прокруткой — список подбора длинный
   по своей природе, а чек должен оставаться на виду. */
.picker-body { max-height: 300px; overflow-y: auto; }

@media (max-width: 720px) {
  .doc-field { grid-template-columns: 1fr; gap: 2px; }
  .doc-field > label,
  .doc-field > .doc-field-label { text-align: left; }
  .doc-table th { position: static; }
}

/* ---------- Строки чека ---------- */

.receipt-line { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.receipt-line:last-child { border-bottom: none; }
.receipt-line:hover { background: var(--surface-2); }

.receipt-name { font-size: 13px; font-weight: 570; line-height: 1.3; }
.receipt-meta { font-size: 11px; color: var(--text-muted); margin: 1px 0 6px; }
.receipt-controls { display: flex; align-items: flex-end; gap: 6px; }
.receipt-controls .input { padding: 3px 6px; font-size: 12.5px; text-align: right; }
.receipt-qty { width: 54px; }
.receipt-discount { width: 72px; }
.receipt-sum { margin-left: auto; font-weight: 650; font-size: 14.5px; white-space: nowrap; }

.receipt-field-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  display: block;
}

/* ---------- Итоги ---------- */

.total-line { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 13px; }
.total-line dt { color: var(--text-muted); }
.total-line dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 580; }

.total-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0 2px;
  margin-top: 5px;
  border-top: 2px solid var(--border-strong);
}
.total-grand dt { font-size: 13px; font-weight: 620; }
.total-grand dd {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ---------- Вход ---------- */

.login-page {
  /*
   * Высота строки. У `body` она нулевая, чтобы переносы в разметке
   * не давали полосу над приложением, и возвращается на `.app` —
   * а страница входа в него не завёрнута, и весь текст на ней
   * наезжал сам на себя.
   */
  line-height: 1.45;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 24px;
  overflow: hidden auto;
  position: relative;
  background: var(--nav-bg);
}

/* Подсветка за карточкой: два медленно дышащих пятна. */
.login-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 420px at 22% 12%, rgba(37, 99, 235, .30), transparent 68%),
    radial-gradient(520px 380px at 82% 88%, rgba(124, 58, 237, .22), transparent 66%);
  animation: login-breathe 14s ease-in-out infinite alternate;
}

@keyframes login-breathe {
  from { transform: scale(1); opacity: .85; }
  to { transform: scale(1.12); opacity: 1; }
}

.login-shell {
  position: relative;
  width: 100%;
  max-width: 392px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: login-rise .42s cubic-bezier(.22, .9, .3, 1) both;
}

@keyframes login-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/*
 * Шапка карточки тёмная в обеих темах: логотип белый, и на светлом
 * поле карточки его бы просто не было видно.
 */
.login-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 24px 22px;
  background: linear-gradient(160deg, #101a2e, #070b12 70%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.login-logo { width: 168px; height: auto; display: block; }
.login-brand-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8895ad;
}

.login-card { padding: 24px; }

/* Страница ошибки пользуется той же карточкой, но без тёмной шапки. */
.login-shell > .login-card:first-child { padding-top: 26px; }

.login-title { font-size: 18px; margin: 0; }
.login-sub { color: var(--text-muted); font-size: 13px; margin: 4px 0 18px; }
.login-foot { color: var(--text-faint); font-size: 12px; margin: 14px 0 0; text-align: center; }

/* ---------- Подсказки клавиш ---------- */

/* Подсказки клавиш всегда у нижнего края окна */
.keyhints {
  position: sticky;
  bottom: 0;
  flex: none;
  padding: 6px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 11.5px;
  color: var(--text-muted);
}
.keyhints-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text);
}

/* ---------- Мелочи ---------- */

.row { display: flex; gap: 8px; align-items: center; }
.row-between { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 11.5px; }
.strong { font-weight: 640; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mt-1 { margin-top: 7px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }
.mb-1 { margin-bottom: 7px; }
.mb-2 { margin-bottom: 12px; }

/* ---------- Планшет ---------- */

@media (max-width: 1240px) {
  .grid-side, .grid-sale { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Телефон и узкий планшет ---------- */

@media (max-width: 1024px) {
  /* Меню уезжает за край и выдвигается по кнопке */
  .main { margin-left: 0; }

  .nav {
    width: 264px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open { transform: none; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 20, .55);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .btn.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    flex: none;
  }

  .topbar-inner { padding: 8px 14px; }
  .content { padding: 12px 14px 24px; }
  .keyhints { display: none; }
  .hide-narrow { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 14px; }

  .metrics { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  .topbar-title h1 {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-title p { display: none; }

  /* На телефоне горячих клавиш нет, а подписи должны помещаться целиком */
  .quick-title { white-space: normal; }
  .quick-title .nav-key, .btn-key { display: none; }

  /* На узком экране показываем не таблицу, а карточки строк:
     горизонтальная прокрутка таблицы на телефоне неудобна */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--surface);
  }
  .table-cards td { border: none; padding: 2px 0; text-align: left !important; }
  .table-cards td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 108px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 650;
  }
  .table-cards td:empty { display: none; }

  /* Ограничения ширины из десктопной вёрстки в карточках только мешают */
  .table-cards .truncate {
    max-width: none !important;
    white-space: normal;
    overflow: visible;
    display: inline;
  }

  .quick-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .toasts { left: 12px; right: 12px; max-width: none; }

  /* Крупнее поля — на телефоне работают пальцем */
  .input, .select { padding: 9px 11px; font-size: 15px; }
  .btn { padding: 9px 14px; font-size: 14px; }
  .btn-sm { padding: 5px 9px; font-size: 13px; }
}

@media print {
  body { overflow: visible; height: auto; }
  .nav, .topbar-actions, .keyhints, .btn, .toasts, .progress { display: none !important; }
  .app { display: block; height: auto; }
  .main, .content { overflow: visible; height: auto; }
  .card { box-shadow: none; border-color: #999; }
}

/* =====================================================================
   Подсказки к полям поиска
   ===================================================================== */

/*
 * Список выпадает прямо под полем. Он перекрывает содержимое, поэтому
 * лежит выше всего остального на странице, но ниже выдвижного меню.
 */
.suggest {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.3;
}
.suggest-item + .suggest-item { margin-top: 1px; }
.suggest-item.is-active { background: var(--accent-soft); }
.suggest-item.is-disabled { opacity: .45; cursor: not-allowed; }

.suggest-main { min-width: 0; flex: 1 1 auto; }
.suggest-label {
  font-size: 13.5px;
  font-weight: 560;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest-note { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.suggest-meta {
  flex: none;
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.suggest-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* =====================================================================
   Экран продажи
   ===================================================================== */

/*
 * Чек занимает всю доступную высоту: раньше под коротким списком
 * оставалось пустое поле в пол-экрана.
 */
.sale-screen { align-items: stretch; }

/*
 * Высоту больше не растягиваем: под чеком идёт каталог, и от растяжки
 * он уезжал за нижний край экрана — приходилось прокручивать, чтобы
 * вообще увидеть список товаров.
 */
.doc-tall { display: flex; flex-direction: column; }
.doc-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.doc-body > .table-wrap { flex: 1 1 auto; }

.scan-bar { padding: 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }

.scan-form { display: flex; gap: 10px; align-items: flex-end; position: relative; }

.scan-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.scan-field .scanner-input { padding-left: 38px; }
.scan-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

.scan-qty { flex: none; display: flex; flex-direction: column; gap: 3px; }
.scan-qty span { font-size: 11px; color: var(--text-muted); font-weight: 560; }
.scan-qty .input { width: 84px; text-align: right; padding: 10px 11px; font-size: 15px; }

.scan-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.scan-hint .spacer { flex: 1 1 auto; }
.scan-hint kbd {
  font: inherit;
  font-size: 10.5px;
  padding: 1px 5px;
  margin-right: 2px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}

/* ---------- Пустые состояния ---------- */

.empty-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
}
.empty-icon { width: 34px; height: 34px; color: var(--text-faint); opacity: .5; margin-bottom: 4px; }
.empty-title { font-size: 15px; font-weight: 620; color: var(--text); }
.empty-note { font-size: 12.5px; color: var(--text-muted); max-width: 380px; line-height: 1.5; }

/* ---------- Панель оплаты ---------- */

.pay-panel { position: sticky; top: 64px; }

/* Сумма к оплате — самое крупное на экране: продавец читает её через стол. */
.pay-total {
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pay-total-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  color: var(--text-muted);
}
.pay-total-value {
  font-size: 32px;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pay-body { padding: 12px 14px 14px; display: grid; gap: 12px; }
.pay-body .field { margin: 0; }

.pay-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.btn-quick {
  flex-direction: column;
  gap: 3px;
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.btn-quick .btn-key { margin: 0; }

.pay-rows { display: grid; gap: 6px; }
.pay-row { display: flex; align-items: center; gap: 10px; }
.pay-row > span {
  flex: none;
  width: 78px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 560;
}
.pay-input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 15px;
  font-weight: 620;
  padding: 8px 11px;
}

.pay-summary {
  border-top: 1px dashed var(--border-strong);
  border-bottom: 1px dashed var(--border-strong);
  padding: 9px 0;
  display: grid;
  gap: 5px;
}
.pay-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.pay-summary-row strong {
  font-size: 15px;
  font-weight: 680;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Сдача — зелёная, нехватка — красная; класс ставит app.js. */
.pay-summary-rest.is-change strong { color: var(--success); }
.pay-summary-rest.is-short strong { color: var(--danger); }

.pay-debt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  cursor: pointer;
}
.pay-debt input { margin-top: 2px; flex: none; }

.btn-danger-ghost:hover { color: var(--danger); border-color: var(--danger); }

/* ---------- Формы карточек ---------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 14px;
  padding: 14px;
}
.form-grid .field { margin: 0; }
.form-grid .field-wide { grid-column: 1 / -1; }

.input-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.hint-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.hint-list li { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

/* Карточка, на которую надо обратить внимание — например, приём долга. */
.card-accent { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* =====================================================================
   Визуальный проход
   ---------------------------------------------------------------------
   Разделы ниже переопределяют базовые правила выше. Причина у всех одна:
   в тёмной теме поверхности были почти неразличимы — поля ввода, карточки
   и фон сливались в одно пятно, и экран читался как сплошная серость.
   ===================================================================== */

:root {
  /* Поле ввода должно быть заметно темнее (в тёмной теме) или светлее
     (в светлой) той поверхности, на которой лежит. */
  --field-bg: #ffffff;
  --field-border: #c8d1de;
  --card-radius: 11px;
  --lift: 0 2px 4px rgba(15, 22, 38, .06), 0 10px 24px -14px rgba(15, 22, 38, .3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field-bg: #0c121c;
    --field-border: #313c51;
    --lift: 0 2px 6px rgba(0, 0, 0, .5), 0 14px 32px -16px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  --field-bg: #0c121c;
  --field-border: #313c51;
  --lift: 0 2px 6px rgba(0, 0, 0, .5), 0 14px 32px -16px rgba(0, 0, 0, .8);
}

/* ---------- Поля ввода ---------- */

.input, .select, .textarea, .scanner-input, .cell-input {
  background: var(--field-bg);
  border-color: var(--field-border);
}
.input, .select, .textarea { padding: 7px 11px; border-radius: 7px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }

.input::placeholder, .textarea::placeholder { color: var(--text-faint); }

.scanner-input { background: var(--field-bg); }

/* Ячейка таблицы, которую можно править: рамка появляется при наведении,
   чтобы сетка не рябила, но было видно, где можно печатать. */
.cell-input { background: transparent; border: 1px solid transparent; }
.cell-input:hover { background: var(--field-bg); border-color: var(--field-border); }
.cell-input:focus { background: var(--field-bg); border-color: var(--accent); }

/* ---------- Карточки и документы ---------- */

.card, .doc, .metric {
  border-radius: var(--card-radius);
  box-shadow: var(--lift);
}

.card-head {
  padding: 11px 14px;
  gap: 9px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.card-head h2 { font-size: 14.5px; font-weight: 640; }
.card-head .icon { color: var(--accent); }

.doc-toolbar { padding: 9px 12px; }
.doc-toolbar-title { font-size: 14px; }

/* ---------- Показатели ---------- */

.metrics { gap: 12px; }

.metric { padding: 13px 15px 14px; transition: transform .12s ease, box-shadow .12s ease; }
.metric:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* Полоску слева заменили на цветную подложку под значком: полоска
   терялась, а значок читается сразу. */
.metric::before { width: 0; }

.metric-top { gap: 8px; }
.metric-top .icon {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text-muted);
  box-sizing: content-box;
}
.metric.is-accent  .metric-top .icon { background: var(--accent-soft);  color: var(--accent-text); }
.metric.is-success .metric-top .icon { background: var(--success-soft); color: var(--success); }
.metric.is-warning .metric-top .icon { background: var(--warning-soft); color: var(--warning); }
.metric.is-danger  .metric-top .icon { background: var(--danger-soft);  color: var(--danger); }

.metric-label { font-size: 11px; letter-spacing: .04em; }
.metric-value { font-size: 27px; font-weight: 700; margin-top: 7px; }
.metric-note { font-size: 12px; margin-top: 3px; }

/* ---------- Таблицы ---------- */

.table th, .doc-table th {
  padding: 9px 12px;
  font-size: 11px;
  letter-spacing: .04em;
  background: var(--surface-2);
  /* Шапка не уезжает при прокрутке длинного списка. */
  position: sticky;
  top: 0;
  z-index: 2;
}
.table td, .doc-table td { padding: 8px 12px; }

.table tbody tr, .doc-table tbody tr { transition: background .1s; }
.table tbody tr:hover, .doc-table tbody tr:hover { background: var(--surface-2); }

/* Нумерация строк — приглушённая, она служебная. */
.doc-table .row-no { color: var(--text-faint); font-size: 11.5px; }

.table td a, .doc-table td a { font-weight: 560; }

/* ---------- Быстрые команды ---------- */

.quick-grid { gap: 10px; }

.quick-item {
  padding: 12px;
  border-radius: 10px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.quick-item:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--lift);
  text-decoration: none;
}
.quick-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.quick-title { font-size: 13.5px; }

/* ---------- Метки и кнопки ---------- */

.badge { padding: 2px 9px; font-size: 11.5px; }

.btn {
  border-radius: 8px;
  transition: background .1s, border-color .1s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 1px 2px rgba(37, 99, 235, .3); }

/* ---------- Боковое меню ---------- */

.nav-link { border-radius: 8px; transition: background .1s, color .1s; }
.nav-link[aria-current="page"] { font-weight: 620; }

/* ---------- Списки ключ-значение ---------- */

.kv-row { padding: 7px 0; }
.kv-key { font-size: 13px; }
.kv-val { font-size: 13.5px; }

/* ---------- Сообщения ---------- */

.alert { border-radius: 10px; padding: 11px 13px; }

/* ---------- Итоги документа ---------- */

.doc-totals { padding: 11px 14px; }
.doc-totals-grid dd.grand { font-size: 24px; }

/* =====================================================================
   Подбор товара: категории слева, список справа
   ---------------------------------------------------------------------
   Один и тот же блок на продаже, приёме и опте — как было в старой
   системе: слева категории, справа список с кнопкой «плюс».
   ===================================================================== */

.picker-shell {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  border-top: 1px solid var(--border);
  min-height: 0;
  /* Высоту списка можно потянуть мышкой — см. `.resize-grip`. */
  --panel-h: 420px;
}

.picker-cats {
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  padding: 8px;
  max-height: var(--panel-h);
  overflow-y: auto;
  display: grid;
  gap: 2px;
  align-content: start;
}

.picker-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--text-muted);
}
.picker-cat:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.picker-cat.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 640; }
.picker-cat-count {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.picker-cat.is-active .picker-cat-count { color: var(--accent-text); }

.picker-main { display: flex; flex-direction: column; min-width: 0; }

.picker-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: relative;
}
.picker-search .scan-field { flex: 1 1 320px; }
.picker-search .scan-field .input { padding-left: 36px; }

.picker-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.picker-list { max-height: var(--panel-h); overflow-y: auto; }
.picker-table .picker-name { font-size: 13.5px; font-weight: 560; max-width: 420px; }
.picker-add { width: 30px; padding: 3px 0; font-size: 15px; line-height: 1; }

.picker-form { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.picker-qty { width: 62px; text-align: right; padding: 5px 8px; }
.picker-price { width: 92px; text-align: right; padding: 5px 8px; font-variant-numeric: tabular-nums; }

.picker-chips { display: flex; flex-direction: column; gap: 2px; }
.chip {
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  padding: 3px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

@media (max-width: 1100px) {
  .picker-shell { grid-template-columns: 1fr; }
  .picker-cats {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }
}

/* ---------- Полоса отложенных чеков ---------- */

.drafts-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--lift);
}
.drafts-label {
  font-size: 11px;
  font-weight: 660;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-right: 2px;
}

.draft-chip {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.draft-chip.is-active { border-color: var(--accent); background: var(--accent-soft); }
/* Кнопки внутри фишки живут в своих формах: без этого они не растянутся
   на высоту фишки и крестик встанет выше подписи. */
.draft-chip > form { display: flex; }

.draft-chip-main {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.draft-chip.is-active .draft-chip-main { cursor: default; color: var(--accent-text); }
.draft-chip-main strong { font-weight: 680; }
.draft-chip-sum { font-variant-numeric: tabular-nums; font-weight: 620; }
.draft-chip-who { font-size: 11px; color: var(--text-faint); }

.draft-chip-x {
  font: inherit;
  padding: 0 9px;
  border: none;
  border-left: 1px solid var(--border-strong);
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}
/* Крестик закрывает вкладку, а не удаляет чек — и подсвечивается
   нейтрально, чтобы не читаться как опасное действие. */
.draft-chip-x:hover { color: var(--text); background: var(--surface-3); }

.draft-name { display: flex; gap: 5px; align-items: center; }
.draft-name .input { width: 190px; padding: 4px 9px; font-size: 12.5px; }

.mt-2 { margin-top: 12px; }

/* Правка прямо из строки списка: значок появляется при наведении. */
.row-edit {
  margin-left: 6px;
  opacity: 0;
  font-size: 12px;
  color: var(--text-muted);
  transition: opacity .1s;
}
tr:hover .row-edit { opacity: 1; }
.row-edit:hover { color: var(--accent-text); text-decoration: none; }

/* Исправление назначения операции по кассе. */
.cash-rename { display: flex; gap: 5px; margin-top: 5px; }
.cash-rename .input { width: 220px; padding: 4px 8px; font-size: 12px; }

/* =====================================================================
   Панели дел на рабочем столе
   ---------------------------------------------------------------------
   Раньше главный экран показывал только итоги, и за каждым числом
   приходилось идти в свой раздел. Здесь сами дела: долги, отложенные
   чеки, что кончается, ремонт и закупка.
   ===================================================================== */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 12px;
  align-items: start;
}

.panel-list { display: grid; }

.panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.panel-row:last-child { border-bottom: none; }
a.panel-row:hover { background: var(--surface-2); text-decoration: none; }

.panel-main { flex: 1 1 auto; min-width: 0; }
.panel-title { font-size: 13.5px; font-weight: 580; color: var(--text); }
.panel-note { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.panel-value {
  flex: none;
  font-size: 14px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.panel-value-danger { color: var(--danger); }
.panel-value-warning { color: var(--warning); }

/* Плотные карточки: список идёт вплотную к краям. */
.card-body.tight { padding: 0; }
.card-body.tight .table-empty { padding: 20px 14px; }

/* ---------- Прайс монтажных работ ---------- */

.worklist { border-bottom: 1px solid var(--border); background: var(--surface-2); --panel-h: 260px; }

.worklist-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.worklist-head .icon { color: var(--text-faint); flex: none; }
.worklist-head .input { flex: 1 1 auto; }

.worklist-body { max-height: var(--panel-h); overflow-y: auto; padding: 6px; }

.worklist-group + .worklist-group { margin-top: 6px; }
.worklist-group-name {
  font-size: 10.5px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  padding: 5px 7px 3px;
}

.worklist-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.worklist-item:hover { background: var(--surface); border-color: var(--accent); }
.worklist-name { flex: 1 1 auto; min-width: 0; }
.worklist-note { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.worklist-price {
  flex: none;
  font-size: 12px;
  font-weight: 640;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Журнал парсера: моноширинный, со своей прокруткой. */
.log-view { --panel-h: 420px; max-height: var(--panel-h); overflow: auto; background: var(--field-bg); }
.log-view pre {
  margin: 0;
  padding: 12px 14px;
  font: 12px/1.5 var(--font-mono);
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/* =====================================================================
   Выдвижные списки
   ---------------------------------------------------------------------
   Нажатие на карточку показателя открывает список сбоку. Раньше эти
   списки висели на главной постоянно и загромождали экран.
   ===================================================================== */

.metric-button {
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: inherit;
}
.metric-button:hover { border-color: var(--accent); }
.metric-more { margin-left: auto; color: var(--text-faint); }
.metric-button:hover .metric-more { color: var(--accent-text); }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 12, 20, .5);
  backdrop-filter: blur(1px);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  animation: drawer-in .16s ease-out;
}

@keyframes drawer-in {
  from { transform: translateX(16px); opacity: .6; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.drawer-title { font-size: 16px; font-weight: 680; }
.drawer-note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.drawer-x {
  flex: none;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.drawer-x:hover { background: var(--surface-2); color: var(--text); }

.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
.drawer-empty { padding: 36px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

.drawer-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.drawer-card-danger { border-color: var(--danger-line, var(--danger)); background: var(--danger-soft); }
.drawer-card-warning { border-color: var(--warning-line, var(--warning)); background: var(--warning-soft); }

.drawer-card-main { flex: 1 1 auto; min-width: 0; }
.drawer-card-title { font-size: 13.5px; font-weight: 640; color: var(--text); }
.drawer-card-note { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.drawer-card-side { flex: none; display: grid; gap: 6px; justify-items: end; }
.drawer-card-sum { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drawer-card-sum-danger { color: var(--danger); }
.drawer-card-sum-warning { color: var(--warning); }

@media (max-width: 520px) {
  .drawer { width: 100vw; border-left: none; }
}

/*
 * Атрибут hidden должен пересиливать раскладку.
 * Правила .drawer { display: flex } и .drawer-backdrop { position: fixed }
 * специфичнее браузерного [hidden], и панель показывалась сразу.
 */
.drawer[hidden], .drawer-backdrop[hidden] { display: none; }

/*
 * Ровно четыре карточки в ряд.
 *
 * С auto-fit их набивалось до семи в строку, и восьмая оставалась
 * одна во втором ряду. Жёсткие четыре колонки даютдве ровные строки.
 *
 * Правила ниже повторяют точки перелома из «Планшета» и «Телефона»:
 * этот блок идёт в файле позже и иначе перебил бы их.
 */
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1240px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .metrics { grid-template-columns: 1fr; }
}

/* ---------- Подбор ценников ---------- */

/*
 * Экран собран как продажа: слева выдача поиска, справа накопительный
 * лист. Строка выдачи — сама по себе форма, поэтому у неё своя вёрстка,
 * а не таблица: в таблице кнопка «в лист» оказывалась в отдельной ячейке
 * и по ней было неудобно попадать.
 */
.pick-list {
  display: flex;
  flex-direction: column;
  /* Каталог показан целиком, поэтому у списка своя прокрутка;
     высоту можно потянуть за полоску снизу. */
  --panel-h: 460px;
  max-height: var(--panel-h);
  overflow-y: auto;
}

.pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-top: 1px solid var(--border);
}
.pick-row:first-child { border-top: none; }
.pick-row:hover { background: var(--surface-2); }
.pick-row.is-added { background: var(--accent-soft); }

.pick-main { min-width: 0; flex: 1 1 auto; }
.pick-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick-note { font-size: 11.5px; color: var(--text-faint); }
.pick-out { color: var(--danger); }

.pick-price {
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  font-size: 13px;
  white-space: nowrap;
}

/* Лист ценников липнет к экрану: он нужен всё время, пока идёт подбор. */
.tag-sheet { position: sticky; top: 12px; }

.tag-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.tag-size {
  font: inherit;
  font-size: 12px;
  padding: 7px 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.tag-size:hover { border-color: var(--accent); color: var(--text); }
.tag-size.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 620;
}

.tag-lines { --panel-h: 360px; max-height: var(--panel-h); overflow: auto; }

.tag-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
}
.tag-line.is-missing { background: var(--danger-soft); }
.tag-line-main { min-width: 0; flex: 1 1 auto; }
.tag-line-name {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-line-note { font-size: 11px; color: var(--text-faint); }

/* Счётчик: «−», поле, «+» — три отдельные формы, сведённые в одну рамку. */
.tag-count {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--field-bg);
  flex: none;
}
.tag-count form { display: flex; }
.tag-step {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  width: 26px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.tag-step:hover { background: var(--surface-3); color: var(--text); }
.tag-copies {
  width: 38px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
}
.tag-copies:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.tag-remove {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  width: 24px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  flex: none;
}
.tag-remove:hover { color: var(--danger); }

.tag-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}
.tag-total-sum { font-size: 15px; font-weight: 680; }
.tag-total-note { font-size: 11.5px; color: var(--text-muted); }

.tag-sheet .btn-block { margin: 0 12px 12px; width: calc(100% - 24px); }

@media (max-width: 1080px) {
  .tag-sheet { position: static; }
  .tag-lines { max-height: none; }
}

/* =====================================================================
   Движение
   ---------------------------------------------------------------------
   Анимации здесь служебные, а не декоративные: показать, что страница
   сменилась, что кнопка нажалась, что список приехал. Всё короткое —
   продавец работает быстро, и ждать конца анимации он не должен.

   Кто просил систему не двигаться (настройка ОС), тот её и не увидит:
   в самом низу блока всё отключается разом.
   ===================================================================== */

/* Смена страницы. Узел рабочей области подменяется целиком, поэтому
   анимация запускается сама — ни классов, ни таймеров не нужно. */
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.content-inner { animation: page-in .22s ease-out both; }

/* Карточки показателей выезжают лесенкой — взгляд успевает за порядком. */
@keyframes tile-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.metrics > * { animation: tile-in .3s ease-out both; }
.metrics > *:nth-child(2) { animation-delay: .03s; }
.metrics > *:nth-child(3) { animation-delay: .06s; }
.metrics > *:nth-child(4) { animation-delay: .09s; }
.metrics > *:nth-child(5) { animation-delay: .12s; }
.metrics > *:nth-child(6) { animation-delay: .15s; }
.metrics > *:nth-child(7) { animation-delay: .18s; }
.metrics > *:nth-child(8) { animation-delay: .21s; }

/* Строки выдвижного списка приезжают следом за самой панелью. */
.drawer-card { animation: tile-in .24s ease-out both; }
.drawer-card:nth-child(2) { animation-delay: .02s; }
.drawer-card:nth-child(3) { animation-delay: .04s; }
.drawer-card:nth-child(4) { animation-delay: .06s; }
.drawer-card:nth-child(5) { animation-delay: .08s; }
.drawer-card:nth-child(n + 6) { animation-delay: .1s; }

.drawer-backdrop { animation: fade-in .16s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Нажатие кнопки должно чувствоваться пальцем, а не только глазом. */
.btn { transition: background .12s ease, border-color .12s ease, color .12s ease, transform .06s ease, box-shadow .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary:hover { box-shadow: 0 4px 14px -6px var(--accent); }

.nav-link, .picker-cat, .draft-chip, .tag-size, .pick-row, .quick-action {
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease;
}
.draft-chip:hover { transform: translateY(-1px); }

/* Активный пункт меню помечен полоской слева: видно боковым зрением. */
.nav-link { position: relative; }
.nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  /* Ровно по краю панели: у списка отступ 7px. */
  left: -7px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

/* Сообщение о результате действия приезжает сверху — его трудно не заметить. */
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.flash { animation: flash-in .24s ease-out both; }

/* Строка таблицы под курсором подсвечивается не только фоном. */
.table tbody tr, .doc-table tbody tr { transition: background .12s ease, box-shadow .12s ease; }

.suggest { animation: tile-in .14s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Полоска под списком: за неё тянут, чтобы список стал выше или ниже. */
.resize-grip {
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  touch-action: none;
}
.resize-grip::before {
  content: "";
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background .12s ease, width .12s ease;
}
.resize-grip:hover::before { background: var(--accent); width: 58px; }
.resize-grip.is-dragging { background: var(--accent-soft); }
.resize-grip.is-dragging::before { background: var(--accent); width: 58px; }