/* Пульс продаж — компоненты интерфейса. Только токены из tokens.css; новых цветов и шрифтов нет.
 * Источник: design/preview-home.html (эталон) + design/design.md.
 * Классы для вкладок перечислены в design/contract.md.
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-link); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 3px; } }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--color-ink-3); }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ── Верхняя панель ───────────────────────────── */
.bar { position: sticky; top: 0; z-index: 10; background: var(--color-bar); border-bottom: 1px solid var(--color-rule); }
.bar__in {
  max-width: var(--content-max); margin: 0 auto;
  height: var(--bar-h); padding: 0 var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
}
.logo { flex: none; display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink); font-weight: var(--weight-semibold); font-size: var(--text-md); white-space: nowrap; }
.logo__mark { width: 28px; height: 28px; border-radius: var(--radius-chip); background: var(--color-accent); color: var(--color-accent-ink); display: grid; place-items: center; }
.logo__mark svg { width: 18px; height: 18px; stroke-width: 2.25; }
@media (hover: hover) { .logo:hover { text-decoration: none; } }

.nav { display: flex; gap: var(--space-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-ink); font-weight: var(--weight-medium); white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .nav a:hover { background: var(--color-hover); text-decoration: none; } }
.nav a[aria-current="page"] { background: var(--color-sunken); font-weight: var(--weight-semibold); }
.nav__review { margin-left: var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--color-sunken); color: var(--color-ink-3); font-size: var(--text-xs); font-weight: var(--weight-medium); }
a:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .seg input:focus-visible + span, .legend button:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}
.bar__user { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-2); white-space: nowrap; }
.bar__user form { margin: 0; }

/* ── Кнопки ───────────────────────────────────── */
.btn, .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--color-ink-2); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.icon-btn { width: var(--control-h); padding: 0; }
@media (hover: hover) { .btn:hover, .icon-btn:hover { background: var(--color-hover); color: var(--color-ink); text-decoration: none; } }
.btn:active, .icon-btn:active { transform: scale(0.96); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); font-weight: var(--weight-medium); }
@media (hover: hover) { .btn--primary:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); } }
.btn--quiet { background: var(--color-sunken); color: var(--color-ink); }
.btn--block { width: 100%; }
.btn--sm { height: 30px; padding: 0 var(--space-2); font-size: var(--text-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Поля: без рамки, только заливка ──────────── */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.label {
  font-size: var(--label-size); font-weight: var(--weight-semibold);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--color-ink-3); white-space: nowrap;
}
.input, .select, .textarea {
  height: var(--control-h); padding: 0 var(--space-3);
  border: 0; outline: none; box-shadow: none; border-radius: var(--radius-control);
  background: var(--color-field);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.textarea { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); resize: vertical; }
.select { padding-right: var(--space-8); appearance: none; cursor: pointer; }
.select-wrap { position: relative; display: inline-flex; }
.select-wrap .select { width: 100%; }
.select-wrap .icon { position: absolute; right: 10px; top: 50%; translate: 0 -50%; color: var(--color-ink-3); pointer-events: none; }
@media (hover: hover) { .input:hover, .select:hover, .textarea:hover { background-color: var(--color-field-hover); } }
.input:focus, .input:focus-visible, .select:focus, .select:focus-visible, .textarea:focus { outline: none; background-color: var(--color-field-focus); }
.input::placeholder, .textarea::placeholder { color: var(--color-ink-3); }
.input[aria-invalid="true"] { background-color: var(--color-field-error); }
.input--date { width: 150px; font-variant-numeric: tabular-nums; }
.input[type="file"] { padding: 6px var(--space-3); height: auto; min-height: var(--control-h); }
.search { position: relative; }
.search .icon { position: absolute; left: 10px; top: 50%; translate: 0 -50%; color: var(--color-ink-3); pointer-events: none; }
.search .input { padding-left: 34px; width: 280px; max-width: 100%; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--color-accent); margin: 0; }
.hint { margin: 0; color: var(--color-ink-3); font-size: var(--text-sm); }
.form-error { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-critical-ink); font-size: var(--text-sm); }

/* Сегментированный переключатель = радиогруппа */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 2px; border-radius: var(--radius-control); background: var(--color-sunken); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-3);
  border-radius: 7px; color: var(--color-ink-2); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.seg input:checked + span { background: var(--color-card); color: var(--color-ink); font-weight: var(--weight-medium); box-shadow: var(--shadow-raised); }
@media (hover: hover) { .seg input:not(:checked):hover + span { color: var(--color-ink); } }

/* ── Панель фильтров ─────────────────────────── */
.filters {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-2);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4);
}
.date-range { display: inline-flex; align-items: center; gap: var(--space-1); }
.date-range__sep { color: var(--color-ink-3); }
.filters__apply { align-self: flex-end; }
.filters__reset { align-self: center; margin-top: 18px; font-size: var(--text-sm); }

/* ── Сетка страницы ──────────────────────────── */
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--space-3) var(--space-6) var(--space-10); }
.page__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 var(--space-4); }
h1, h2, h3 { overflow-wrap: anywhere; min-width: 0; }
.page__head h1 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.page__head p { margin: 0; color: var(--color-ink-3); font-size: var(--text-sm); }
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.stack { display: grid; gap: var(--space-4); }
.span-all { grid-column: 1 / -1; }

.card { background: var(--color-card); border-radius: var(--radius-card); padding: var(--space-5); min-width: 0; }
.card__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; row-gap: var(--space-3); }
.card__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.card__meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); color: var(--color-ink-3); font-size: var(--text-sm); white-space: nowrap; }
.card__body { margin-top: var(--space-4); }
.controls { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

/* Плитки-метрики */
.metric .label { display: block; }
.metric__head { display: flex; align-items: center; gap: var(--space-2); }
.metric__head .card__meta { font-size: var(--text-xs); }
.metric__value { margin-top: var(--space-2); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.metric--lead .metric__value { font-size: var(--text-2xl); }
.metric__sub { margin-top: var(--space-1); color: var(--color-ink-2); }
.deltas { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-ink-3); white-space: nowrap; }
.delta b { font-weight: var(--weight-medium); }
.delta--down b, .delta--down .icon { color: var(--color-critical-ink); }
.delta--up b, .delta--up .icon { color: var(--color-good-ink); }

/* ── График ───────────────────────────────────── */
.chart-card { grid-column: 1 / -1; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-4) 0 var(--space-2); }
.legend button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 28px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-chip);
  background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .legend button:hover { background: var(--color-hover); } }
.legend button[aria-pressed="false"] { color: var(--color-ink-muted); }
.legend button[aria-pressed="false"] .swatch { opacity: .3; }
.swatch { width: 16px; height: 0; border-top: 2px solid var(--sw); }
.swatch--dash { border-top-style: dashed; }
.swatch--1 { --sw: var(--series-1); }
.swatch--2 { --sw: var(--series-2); }
.swatch--3 { --sw: var(--series-3); }
.chart-wrap { position: relative; height: 320px; }
.chart-wrap--sm { height: 200px; }
.chart-note { margin: var(--space-2) 0 0; color: var(--color-ink-3); font-size: var(--text-sm); }
/* неполный сегодняшний день — отдельная полая точка у графика (home.js) */
.chart-today { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.chart-today__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--series-1); background: var(--color-card); }

/* ── Таблица ──────────────────────────────────── */
/* Влезает в карточку (1280) — static/app.js ставит --fits: прокрутка одна, у страницы; шапка закреплена под панелью.
 * Не влезает (планшет) — --wide: обёртка высотой в экран под панелью, прокрутка вбок и вниз внутри неё,
 * шапка закреплена к обёртке (иначе при прокрутке страницы шапка уезжает), первая колонка — тоже (.table--pin). */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin-top: var(--space-4); }
.table-wrap--fits { overflow: visible; }
.table-wrap--fits > table > thead th { top: var(--bar-h); }
/* сама обёртка «прилипает» под панелью: при прокрутке страницы до конца шапка не уходит под панель;
 * высота с запасом 80px — отступы карточки и страницы под таблицей, иначе обёртку выталкивает вверх */
.table-wrap--wide { position: sticky; top: var(--bar-h); max-height: calc(100dvh - var(--bar-h) - 2 * var(--space-10)); overflow: auto; }
.table-wrap--flat { max-height: none; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* у закреплённых ячеек линия border-collapse не рисуется — дублируем её тенью */
thead th { position: sticky; top: 0; z-index: 2; background: var(--color-card); box-shadow: inset 0 -1px 0 var(--color-rule); }
th { text-align: left; height: 36px; padding: 0 var(--space-3); font-size: var(--label-size); font-weight: var(--weight-semibold); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--color-ink-3); border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
th .th-sub { display: block; color: var(--color-ink-3); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; }
/* Заголовок с сортировкой: ссылка в цвет метки, стрелка видна у активной колонки и при наведении */
.th-sort a { position: relative; display: inline-block; color: inherit; }
/* стрелка — в поле ячейки (справа у текста, слева у чисел): ширину колонки не меняет */
.th-sort .icon { position: absolute; top: 50%; right: -14px; translate: 0 -50%; width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); }
.th-sort.num .icon { right: auto; left: -14px; }
.th-sort[aria-sort] { color: var(--color-ink); }
.th-sort[aria-sort] .icon { opacity: 1; }
@media (hover: hover) { .th-sort a:hover { color: var(--color-ink); text-decoration: none; } .th-sort a:hover .icon { opacity: .5; } }
.th-sort a:focus-visible .icon { opacity: .5; }
/* Первая колонка закреплена при прокрутке вбок */
/* только своя таблица (>), не вложенная в раскрытие строки */
.table--pin > thead > tr > th:first-child, .table--pin > tbody > tr > td:first-child:not([colspan]) { position: sticky; left: 0; z-index: 1; background: var(--color-card); box-shadow: inset 0 -1px 0 var(--color-rule); }
.table--pin > thead > tr > th:first-child { z-index: 3; }
@media (hover: hover) { .table--pin > tbody > tr:hover > td:first-child:not([colspan]) { background: var(--color-hover); } }
td { height: var(--row-h); padding: 0 var(--space-3); border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
th.num, td.num { text-align: right; }
td.wrap { white-space: normal; padding-top: var(--space-2); padding-bottom: var(--space-2); }
tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
@media (hover: hover) { tbody tr:hover { background: var(--color-hover); } }
td .cell-sub { display: block; color: var(--color-ink-3); font-size: var(--text-xs); }
.table-actions { display: flex; gap: var(--space-1); justify-content: flex-end; }
.table-actions form { margin: 0; }
.table-actions--wrap { flex-wrap: wrap; }
/* Настройки → Пользователи: менеджер — отдельной строкой во всю ширину ячейки; пароль — поле, под ним кнопки */
.user-login, .user-role { white-space: normal; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.user-role { min-width: 220px; }
.user-role .inline-form { width: 100%; }
.user-role .select-wrap { flex: 1; min-width: 0; }
.user-role .select { min-width: 0; text-overflow: ellipsis; }
.user-manager { margin-top: var(--space-1); }
.user-actions { display: grid; grid-template-columns: auto auto; justify-content: end; gap: var(--space-1); padding: var(--space-2) 0; }
.user-actions form { margin: 0; }
.user-actions__pwd { display: contents; }
.user-actions__pwd .input { grid-column: 1 / -1; width: 100%; }
.inline-form { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.inline-form .input { width: 136px; }
.inline-form .select { min-width: 156px; }
.pager { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); color: var(--color-ink-3); font-size: var(--text-sm); }

/* ── Статусы, бейджи, чипы ────────────────────── */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dot, var(--color-ink-muted)); }
.dot--good { --dot: var(--color-good); }
.dot--critical { --dot: var(--color-critical); }
.dot--warning { --dot: var(--color-warning); }
.dot--muted { --dot: var(--color-ink-muted); }
.status { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-sunken); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-2); border-radius: var(--radius-chip); background: var(--color-sunken); color: var(--color-ink); font-size: var(--text-sm); }

/* ── Состояния данных ─────────────────────────── */
.skeleton { border-radius: var(--radius-chip); background: var(--color-sunken); }
.skeleton--value { height: 36px; width: 60%; margin-top: var(--space-2); }
.skeleton--line { height: 14px; width: 80%; margin-top: var(--space-3); }
.skeleton--chart { height: 320px; margin-top: var(--space-4); }
.state-msg { display: grid; place-items: center; text-align: center; min-height: 320px; padding: var(--space-6); }
.state-msg--sm { min-height: 160px; }
.state-msg h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.state-msg p { margin: 0 auto var(--space-3); max-width: 52ch; color: var(--color-ink-2); }
.state-msg code { font-size: var(--text-xs); color: var(--color-ink-3); }
.inline-alert { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-chip); background: var(--color-sunken); color: var(--color-ink-2); font-size: var(--text-sm); }
.htmx-indicator { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Сообщение после действия (flash) */
.flash { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-card); color: var(--color-ink-2); }

/* ── Настройки: название + описание слева, поля справа ── */
.settings-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-4); }
.settings-nav a { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-chip); color: var(--color-ink-2); font-size: var(--text-sm); }
@media (hover: hover) { .settings-nav a:hover { background: var(--color-hover); color: var(--color-ink); text-decoration: none; } }
.section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); scroll-margin-top: calc(var(--bar-h) + var(--space-4)); }
.section__about h2 { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.section__about p { margin: 0 0 var(--space-2); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 46ch; }
.section__body { display: grid; gap: var(--space-4); min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3) var(--space-4); align-items: end; }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.form-row .field { flex: 1 1 200px; }
.subcard { padding: var(--space-4); border-radius: var(--radius-control); background: var(--color-sunken); display: grid; gap: var(--space-3); }
.subcard__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.subcard__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.subcard .input, .subcard .select, .subcard .textarea { background: var(--color-card); }
.subcard .input[aria-invalid="true"] { background-color: var(--color-field-error); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.check-list li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── Вход ─────────────────────────────────────── */
.login { min-height: 100dvh; display: grid; place-content: center; gap: var(--space-5); padding: var(--space-6) var(--space-4); }
.login__logo { justify-content: center; }
.login__card { width: min(380px, calc(100vw - 2 * var(--space-4))); display: grid; gap: var(--space-4); }
.login__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.login__hint { margin: 0; color: var(--color-ink-3); font-size: var(--text-sm); text-align: center; }

/* ── Адаптив ─────────────────────────────────── */
@media (max-width: 1024px) {
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .metric--lead { grid-column: 1 / -1; }
  .section { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
@media (max-width: 768px) {
  .bar__in, .filters, .page { padding-left: var(--space-4); padding-right: var(--space-4); }
  .bar__in { gap: var(--space-3); }
  .logo__name { display: none; }
  .bar__user span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; } /* видно, под кем вход */
  .chart-wrap { height: 260px; }
  .card__meta { margin-left: 0; }
  .input, .select, .textarea { font-size: var(--text-md); } /* 16px — iOS не увеличивает страницу при фокусе */
}
@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .search .input { width: 100%; }
  .field--grow { flex: 1 1 100%; }
  .metric--lead .metric__value { font-size: var(--text-xl); }
}