/* Стили двух экранов спринта 2: «Диагноз рынка» и «Скорборд».
   Правило, которое здесь важнее остальных: цвет никогда не единственный
   носитель смысла. У каждого статуса есть знак, слово и форма рамки. */

/* ── Диагноз рынка ────────────────────────────────────────────────── */

.diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.diag-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 15px 13px;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--none);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.diag-card:hover { background: var(--bg-hover); }

.diag-card--bad { border-left-color: var(--bad); }
.diag-card--warn { border-left-color: var(--warn); }
.diag-card--good { border-left-color: var(--good); }

/* «Нет данных» — пунктир и приглушённый фон: состояние читается как
   отсутствие измерения, а не как плохой или хороший результат. */
.diag-card--no_data {
  border-style: dashed;
  border-left-style: dashed;
  border-left-color: var(--line-strong);
  background: var(--bg-sunken);
  box-shadow: none;
  cursor: default;
}

.diag-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.diag-card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.diag-card__metric { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; }
.diag-card__pos { font-size: var(--fs-sm); color: var(--fg-faint); white-space: nowrap; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.status__sign { font-size: var(--fs-xs); }

.status--bad { color: var(--bad); background: var(--bad-soft); }
.status--warn { color: var(--warn); background: var(--warn-soft); }
.status--good { color: var(--good); background: var(--good-soft); }
.status--no_data { color: var(--none); background: var(--none-soft); border-style: dashed; }

.gap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.gap__value {
  font-size: var(--fs-kpi);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.gap__value--bad { color: var(--bad); }
.gap__value--good { color: var(--good); }
.gap__value--warn { color: var(--warn); }
.gap__value--no_data { color: var(--fg-faint); font-size: var(--fs-xl); }

.gap__word { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--fg-muted); }

/* Полоса разрыва — вторая, независимая от цвета кодировка величины. */
.gapbar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  /* B6-04: нулевая линия выступает за дорожку — полоса не «висит» без нуля. */
  overflow: visible;
}

.gapbar__fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.gapbar__fill--bad { background: var(--bad); right: 50%; }
.gapbar__fill--warn { background: var(--warn); right: 50%; }
.gapbar__fill--good { background: var(--good); left: 50%; }
.gapbar__zero { position: absolute; top: -3px; bottom: -3px; left: calc(50% - 1px); width: 2px; border-radius: 1px; background: var(--fg-faint); z-index: 1; }

.diag-card__rows { display: grid; gap: 4px; font-size: var(--fs-md); }

.diag-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.diag-row__label { color: var(--fg-muted); white-space: nowrap; }
.diag-row__value { text-align: right; font-variant-numeric: tabular-nums; }

.diag-card__note {
  font-size: var(--fs-md);
  color: var(--fg-muted);
  background: var(--bg-sunken);
  border-radius: 7px;
  padding: 7px 9px;
}

.diag-card--no_data .diag-card__note { background: var(--bg-card); }

.diag-card__more {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: var(--fw-medium);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 18px 0 0;
  padding: 12px 14px;
  font-size: var(--fs-md);
  color: var(--fg-muted);
}

.legend__item { display: inline-flex; align-items: center; gap: 6px; }

/* ── Скорборд ─────────────────────────────────────────────────────── */

.tablewrap {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  -webkit-overflow-scrolling: touch;
}

table.sb {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  font-size: var(--fs-base);
}

table.sb th, table.sb td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}

table.sb thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-sunken);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  border-bottom: 1px solid var(--line-strong);
}

table.sb th.sb__namecell, table.sb td.sb__namecell {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  background: var(--bg-card);
  border-right: 1px solid var(--line-strong);
  min-width: 168px;
  max-width: 240px;
  white-space: normal;
}

table.sb thead th.sb__namecell { z-index: 4; background: var(--bg-sunken); }

tr.sb__brand--own td { background: var(--accent-soft); }
tr.sb__brand--own td.sb__namecell { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
tr.sb__brand--own { font-weight: var(--fw-medium); }

tr.sb__domain td { background: var(--bg-sunken); font-size: var(--fs-md); color: var(--fg-muted); }
tr.sb__domain td.sb__namecell { background: var(--bg-sunken); padding-left: 30px; }

.sb__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.sb__caret { display: inline-block; width: 12px; color: var(--fg-muted); }

.chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  white-space: nowrap;
}

.chip--own { border-color: var(--accent); color: var(--accent); background: var(--bg-card); }
.chip--off { border-style: dashed; }

.sb__value { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.sb__meta { display: block; font-size: var(--fs-sm); color: var(--fg-faint); margin-top: 2px; }

.delta--up { color: var(--good); }
.delta--down { color: var(--bad); }
.delta--flat { color: var(--fg-faint); }

/* Ячейка с неточным значением: цифра приглушена, рядом знак качества,
   вся ячейка — кнопка, открывающая пояснение сервера. */
.qmark {
  border: 0;
  background: none;
  padding: 0 0 0 3px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--warn);
  cursor: pointer;
  text-decoration: underline dotted;
}

.qmark--no_data { color: var(--none); }

td.sb__cell--inexact .sb__value {
  text-decoration: underline dotted var(--warn);
  text-underline-offset: 3px;
}

td.sb__cell--no_data { color: var(--fg-faint); font-style: italic; }

.qpop {
  position: absolute;
  z-index: 60;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: var(--fs-md);
  white-space: normal;
}

.qpop__title { font-weight: var(--fw-bold); margin-bottom: 4px; padding-right: 64px; }
.qpop__tag { display: inline-block; margin-bottom: 8px; }
.qpop__close { position: absolute; top: 6px; right: 8px; }

/* ── Диалог сбора ─────────────────────────────────────────────────── */

dialog.modal {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--fg);
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .25);
}

dialog.modal::backdrop { background: rgba(10, 12, 16, .55); }

.modal__head {
  padding: 16px 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.modal__body { padding: 12px 18px 4px; font-size: var(--fs-base); }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 16px;
}

.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 12px 0; }
.kv dt { color: var(--fg-muted); font-size: var(--fs-md); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }

.progress {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-sunken);
  overflow: hidden;
  margin: 10px 0 6px;
}

.progress__fill { height: 100%; background: var(--accent); border-radius: 5px; transition: width .3s; }
.progress__fill--quota { background: var(--warn); }
.progress__fill--fail { background: var(--bad); }
.progress__fill--ok { background: var(--good); }

.runlog {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-radius: 8px;
  font-size: var(--fs-md);
  color: var(--fg-muted);
  max-height: 160px;
  overflow-y: auto;
}

.runlog ul { margin: 4px 0 0; padding-left: 18px; }

/* ── Узкий экран ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .page { padding: 14px 12px 56px; }
  h1 { font-size: var(--fs-xl); }
  .diag-grid { grid-template-columns: 1fr; }
  .gap__value { font-size: var(--fs-kpi); }
  table.sb th.sb__namecell, table.sb td.sb__namecell { min-width: 148px; max-width: 160px; }
  table.sb th, table.sb td { padding: 7px 9px; }
  .topbar { padding: 9px 12px; }
  .topbar__brand { font-size: var(--fs-base); }
}

/* ══════════════════════════════════════════════════════════════════════
   Добавлено спринтом 3: выбор проекта и рынка, экран проектов, мастер,
   группировка колонок скорборда, сравнение периодов.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Выбор проекта и рынка в шапке ────────────────────────────────── */
.topbar__picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.topbar__pickerlabel { font-size: var(--fs-sm); }

select.control--small {
  font-size: var(--fs-md);
  padding: 4px 8px;
  max-width: 260px;
}

/* ── Экран проектов ───────────────────────────────────────────────── */
.projgrid { display: grid; gap: 14px; }

.projcard { padding: 18px; }

.projcard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.projcard__head h2 { margin: 0; font-size: var(--fs-xl); }

.projmarket {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.projmarket__name { font-weight: var(--fw-medium); text-decoration: none; color: var(--accent); }
.projmarket__meta { font-size: var(--fs-md); }
.projmarket__id { font-size: var(--fs-sm); margin-left: auto; }

/* ── Мастер заведения проекта ─────────────────────────────────────── */
.wmarket {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.wmarket__cc { width: 64px; text-transform: uppercase; }
.wmarket__lang { width: 90px; }

.wmarket input, .wdomain input[type="text"] {
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-md);
}

.wbrand { padding: 14px 16px; margin-bottom: 12px; }

.wbrand__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Мастер: поля не должны растягиваться во всю карточку. */
.wizform { max-width: 640px; }
.wizform .field input, .wizform .field select { max-width: 100%; }

.wbrand__head input[type="text"] {
  flex: 0 1 320px;
  min-width: 160px;
  max-width: 360px;
  /* B7-06 (регресс A3-11): поле внутри .field (колонка flex) — основа 320 px
     становилась ВЫСОТОЙ поля. Высоту задаёт контрол, ширину — width. */
  height: var(--ctl-h);
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--fg);
  font: inherit;
  font-weight: var(--fw-medium);
}

.wdomain {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
}

.wdomain__name { font-family: var(--mono); font-size: var(--fs-md); min-width: 190px; }
.wdomain__why { flex: 1 1 200px; font-size: var(--fs-sm); }
/* Волна 4 · финал: домен без рынков — флажок «на всех рынках» заметнее. */
.wdomain__all.is-unbound { font-weight: var(--fw-medium); }

.checkrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-md);
  cursor: pointer;
  margin: 6px 0;
}

.checkrow--tight { margin: 0; white-space: nowrap; }

/* ── Скорборд: управление колонками ───────────────────────────────── */
.sbcontrols { margin-bottom: 12px; }

.sbcontrols__row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.colpicker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.colpicker__group { padding: 8px 0; border-top: 1px solid var(--line); }
.colpicker__group:first-of-type { border-top: 0; }

.colpicker__block {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  cursor: pointer;
  margin-bottom: 6px;
}

.colpicker__metrics, .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.chip--toggle {
  cursor: pointer;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  border-style: dashed;
}

.chip--toggle.chip--on {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
  font-weight: var(--fw-medium);
}

/* Первая строка шапки — блоки метрик. Без неё одиннадцать колонок
   читаются как случайный набор. */
table.sb thead tr.sb__blockrow th {
  top: 0;
  z-index: 3;
  text-align: left;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--fg-faint);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line-strong);
}

table.sb thead tr.sb__blockrow th.sb__namecell { border-left: 0; z-index: 5; }

table.sb thead tr:nth-child(2) th { top: 30px; }

.sb__blockhead span { margin-right: 6px; }

/* ── Кнопка платного сбора ────────────────────────────────────────── */
.collectslot {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  /* Пояснение про платность длинное: без потолка оно растягивает кнопку
     на всю ширину карточки пустого состояния. */
  max-width: 420px;
}

.btn__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  background: var(--warn-soft);
  color: var(--warn);
}

/* Поля дат в сравнении периодов: без потолка ширины они растягиваются
   на всю карточку и выглядят как поля ввода текста, а не как две даты. */
.form-row--tight { max-width: 520px; }
.form-row--tight .field input { max-width: 220px; }

/* ── Выгрузки ─────────────────────────────────────────────────────── */
/* Кнопка выгрузки живёт рядом с подписью состояния («собираю файл…»,
   «готово: Скорборд · Чили.xlsx»): без неё человек, у которого файл
   собирается три секунды, нажимает второй и третий раз. */
.exportbtn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

/* Волна 5 · F4 (A4-01): без nowrap — длинная подпись «готово: <имя файла>»
   переносится (см. .exportbtn__state в ui.css). */
.exportbtn .faint { font-size: var(--fs-sm); }

/* Полоса действий. Была объявлена только в import.css, а используется и
   общим кодом (common.js), то есть на скорборде и в отчётах кнопки
   слипались. */
.rowbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }

/* Экран отчётов: список сохранённых конфигураций и выбор состава. */
.page__head .exportbtn .btn--primary { white-space: nowrap; }

/* A1-30 (для зоны G3, exports.js): сетка чекбоксов «Метрики сводного листа» —
   ровные колонки вместо flex-wrap на 28 разных x. Класс ставит экран. */
.ex-metricgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; }

/* B7-06: в колонке .field — без flex-основы (иначе 320 px по вертикали). */
.wbrand__head .field input[type="text"] { flex: none; width: min(360px, 100%); max-width: 100%; }

/* B8-08: длинное имя сохранённого отчёта без пробелов переносится, а не
   распирает страницу (прокрутка 813 px на 1440). */
.ex-area-saved { min-width: 0; }
.ex-area-saved .card > div:first-child > strong { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }