/*
  UI-кит AdDrive (С-57) — брендбук «Сводка» v1.0, раздел 08 и следующий
  этап по ТЗ на брендбук: кнопки, поля, карточки, раскрываемые блоки,
  таблицы, бейджи, чипы, пустые состояния и ошибки.

  Правила файла:
  - цвета и гарнитуры — только var(--…) из tokens.css (тест
    TestТолькоТокены смотрит и этот файл);
  - в брендбуке нет отступов, радиусов и размеров компонентов — они
    заданы здесь переменными: шкала 4/8, радиусы 4/6, управление 32/40;
  - тени как средство иерархии не применяются ни в одной теме — ступени
    поверхности --bg → --surface → --surface-raised (раздел 03.1);
  - нейтральная шкала sand и stone в tokens.css для тёмной темы не
    переопределена, поэтому здесь её нет: зебра таблицы — --surface-raised;
  - подключается ПОСЛЕ app.css и переопределяет вид общих классов
    (.empty, .num, .flag…) без правки их разметки: разметку читают тесты
    соседних задач.

  Образец всех компонентов — страница /ui-kit.
*/

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --radius-s: 4px;
  --radius-m: 6px;
  --control-s: 32px;
  --control-m: 40px;
  --content-max: 1280px;
}

/* --- База набора ------------------------------------------------------ */

.telegram-card form {
  margin-block: var(--space-3);
}

body {
  font: var(--type-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  color: var(--text);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

code {
  font: 400 13px/20px var(--font-mono);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* Токены задают .num шрифтом метрики 26 px — это верно для числа-героя
   (.metric), но не для числа в строке текста, ячейке или сноске: там
   цифры остаются табличными Mono в размер окружающего текста. */
.num:not(.metric) {
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon,
.status-mark,
.mark {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

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

/* --- Сетка 12 колонок ------------------------------------------------- */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
  margin: var(--space-5) 0;
}

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

.stack {
  display: grid;
  align-items: start;
  gap: var(--space-5);
  align-content: start;
}

.stack-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .span-8,
  .span-6,
  .span-4 {
    grid-column: span 12;
  }
}

@media (max-width: 720px) {
  .grid-12 {
    gap: var(--space-4);
  }

  .stack-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-m);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font: 500 15px/20px var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-s {
  min-height: var(--control-s);
  padding: 0 var(--space-3);
  font: 500 13px/18px var(--font-ui);
  gap: 6px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Основная — залитая петроль: одна на экран, главное действие. */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
}

/* Вторичная — контур. */
.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--accent);
}

.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Текстовая — без рамки, для второстепенного в меню и карточках. */
.btn-text {
  background: transparent;
  color: var(--accent);
  padding: 0 var(--space-2);
}

.btn-text:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.btn:disabled,
.btn[disabled] {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}

.field .label {
  margin: 0;
}

.input {
  min-height: var(--control-m);
  width: 100%;
  padding: 0 var(--space-3);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font: var(--type-body);
}

textarea.input {
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

.input::placeholder {
  color: var(--text-muted);
}

.input:hover {
  border-color: var(--text-secondary);
}

.input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

.select-wrap {
  position: relative;
  display: block;
}

.select-wrap select {
  appearance: none;
  padding-right: var(--space-7);
}

.select-wrap .icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.field-hint,
.field-error {
  margin: 0;
  font: var(--type-small);
}

.field-hint {
  color: var(--text-muted);
}

.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--danger-text);
}

.field-invalid .input {
  border-color: var(--danger);
}

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-5);
  min-width: 0;
}

.card-quiet {
  padding: var(--space-4) var(--space-5);
}

.card-head {
  margin: 0 0 var(--space-4);
}

.card-head .label {
  margin: 0 0 var(--space-1);
}

.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font: var(--type-h3);
  color: var(--text);
}

.card-title .icon {
  color: var(--accent);
}

.card > p:last-child,
.card > ul:last-child {
  margin-bottom: 0;
}

.card .label {
  margin-bottom: var(--space-2);
}

/* --- Раскрываемый блок ------------------------------------------------ */

.disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--space-1);
  margin-left: calc(var(--space-1) * -1);
  border-radius: var(--radius-s);
  color: var(--accent);
  font: 500 13px/20px var(--font-ui);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary:hover {
  background: var(--accent-soft);
}

.disclosure > summary .icon {
  transform: rotate(-90deg);
}

.disclosure[open] > summary .icon {
  transform: none;
}

.disclosure-body {
  padding: var(--space-2) 0 0;
  min-width: 240px;
}

/* Факты «что — значение» в подробностях: Mono-метка над значением. */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
}

.facts dt {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.facts dt:first-child {
  margin-top: 0;
}

.facts dd {
  margin: 0;
  font: var(--type-small);
  color: var(--text-secondary);
  max-width: 48ch;
  white-space: normal;
}

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

.table-scroll {
  /* Опора для абсолютных потомков (скрытые подписи): иначе они считаются
     от окна и растягивают страницу вбок на узком экране. */
  position: relative;
  overflow-x: auto;
  max-width: 100%;
  margin: 0 calc(var(--space-5) * -1);
  padding: 0 var(--space-5);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-small);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.table th {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  vertical-align: bottom;
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

.table th:first-child,
.table td:first-child {
  padding-left: var(--space-2);
}

.table tbody tr:nth-child(even) td {
  background: var(--surface-raised);
}

.table th.num,
.table td.num {
  text-align: right;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Итоговая строка — охряная черта (раздел 05, «строки сводки»). */
.table tr.total td {
  border-top: 2px solid var(--ochre);
  border-bottom: 0;
  font-weight: 600;
  background: var(--surface);
}

.cell-title {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.cell-note {
  display: block;
  margin-top: var(--space-1);
  color: var(--danger-text);
  max-width: 36ch;
}

/* --- Бейдж статуса и чип --------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px var(--space-2) 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font: 500 13px/20px var(--font-ui);
  white-space: nowrap;
  background: var(--surface-raised);
  color: var(--text-secondary);
}

.badge-ok {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-text);
}

.badge-warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.badge-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.badge-neutral {
  padding-left: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  vertical-align: middle;
}

/* --- Выноска ---------------------------------------------------------- */

.callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-m);
  background: var(--warn-bg);
  color: var(--warn-text);
  font: var(--type-small);
}

.callout .status-mark {
  margin-top: 2px;
}

.callout p {
  margin: 0;
  color: var(--warn-text);
}

.callout-ok {
  border-color: var(--ok-border);
  background: var(--ok-bg);
}

.callout-ok,
.callout-ok p {
  color: var(--ok-text);
}

.callout-danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

.callout-danger,
.callout-danger p {
  color: var(--danger-text);
}

/* --- Пустое состояние (кит и общий макрос empty_state) ---------------- */

.empty-state,
.empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-6) var(--space-5);
  margin: var(--space-5) 0;
}

.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-m);
  background: var(--accent-soft);
  color: var(--accent);
}

.empty-state-title,
.empty .empty-title {
  font: var(--type-h3);
  color: var(--text);
  margin: 0 0 var(--space-2);
}

.empty-state-step,
.empty .empty-step {
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

.empty-state-action,
.empty p:last-child {
  margin: 0;
}

/* Ссылка «куда идти» из общего макроса — в виде вторичной кнопки. */
.empty a.action {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-m);
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--accent);
  font: 500 15px/20px var(--font-ui);
  text-decoration: none;
}

.empty a.action:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* --- Ошибка ----------------------------------------------------------- */

.failure-state {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-m);
  background: var(--danger-bg);
}

.failure-state-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font: 600 15px/22px var(--font-ui);
  color: var(--danger-text);
}

.failure-state-title .status-mark {
  margin-top: 2px;
}

.failure-state-reason,
.failure-state-step {
  margin: var(--space-2) 0 0;
  padding-left: 26px;
  color: var(--text-secondary);
}

.failure-state-title + .failure-state-step {
  margin-top: var(--space-2);
}

/* --- Выбор клиента одним нажатием ------------------------------------- */

.client-list ul {
  display: grid;
  gap: 0;
}

.client-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-m);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text);
  font: 500 15px/20px var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.client-option .icon {
  color: var(--text-muted);
}

.client-option:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.client-option:hover .icon,
.client-option[aria-current="true"] .icon {
  color: var(--accent);
}

.client-option[aria-current="true"] {
  color: var(--accent);
  font-weight: 600;
}

.client-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* В пустом состоянии экрана список — рамкой, строками через черту. */
.picker .client-list {
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-1);
}

.picker .client-list li + li {
  border-top: 1px solid var(--border);
}

/* --- Компоненты качества (разметка — macros.html, вид — здесь) -------- */

.value {
  border-radius: var(--radius-m);
  padding: var(--space-5);
}

.value .metric {
  margin: var(--space-1) 0 var(--space-1);
}

.flag {
  font: var(--type-small);
  border-radius: var(--radius-s);
  padding: 1px var(--space-2);
}

.traffic-light {
  border-radius: var(--radius-m);
  padding: var(--space-4) var(--space-5);
}

.traffic-body dd.num {
  font: var(--type-small);
  font-family: var(--font-mono);
}

.provenance > summary {
  color: var(--accent);
  font: 500 15px/24px var(--font-ui);
  cursor: pointer;
}

/* --- Страница-образец /ui-kit ----------------------------------------- */

.kit-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
}

.kit-head h1 {
  margin: 0;
  font: var(--type-display);
  letter-spacing: var(--tracking-display);
}

.kit-head .lead {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--text-secondary);
}

.kit-head .login-logo {
  margin-bottom: var(--space-5);
}

.segmented.kit-themes {
  display: inline-flex;
}

.kit-themes .btn-segment {
  flex: none;
  text-decoration: none;
}

.kit-themes .btn-segment[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.kit-section {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.kit-section > h2 {
  margin: 0 0 var(--space-5);
  font: var(--type-h2);
  letter-spacing: -0.018em;
}

.kit-num {
  color: var(--accent);
  margin: 0 0 var(--space-2);
}

.kit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.kit-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.kit-swatches li {
  display: grid;
  gap: 2px;
}

.kit-swatch {
  display: block;
  height: 56px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

.kit-swatch-bg { background: var(--bg); }
.kit-swatch-surface { background: var(--surface); }
.kit-swatch-surface-raised { background: var(--surface-raised); }
.kit-swatch-border { background: var(--border); }
.kit-swatch-text { background: var(--text); }
.kit-swatch-text-secondary { background: var(--text-secondary); }
.kit-swatch-text-muted { background: var(--text-muted); }
.kit-swatch-accent { background: var(--accent); }
.kit-swatch-accent-soft { background: var(--accent-soft); }
.kit-swatch-ochre { background: var(--ochre); }
.kit-swatch-ok { background: var(--ok); }
.kit-swatch-warn { background: var(--warn); }
.kit-swatch-danger { background: var(--danger); }

.kit-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
}

.kit-type > p {
  margin: 0;
}

.kit-type > p:nth-child(even) {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.kit-type-display {
  font: var(--type-display);
  letter-spacing: var(--tracking-display);
}

.kit-type-h2 {
  font: var(--type-h2);
}

.kit-type-h3 {
  font: var(--type-h3);
}

.kit-menu-sample {
  margin-top: var(--space-4);
  max-width: 320px;
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

.kit-banner {
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-m);
}

.kit-nav {
  max-width: 280px;
  padding: var(--space-3);
}

.kit-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.kit-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  color: var(--accent);
}

.kit-icons span {
  font: 400 11px/14px var(--font-mono);
  color: var(--text-muted);
}

.kit-status-ok { color: var(--ok); }
.kit-status-warn { color: var(--warn); }
.kit-status-danger { color: var(--danger); }

@media (max-width: 720px) {
  .kit-page {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }

  .kit-type {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .kit-type > p:nth-child(even) {
    margin-bottom: var(--space-3);
  }

  .kit-head h1 {
    font: var(--type-h2);
  }

  .kit-type-display {
    font-size: 32px;
    line-height: 36px;
  }
}