/* Status-dashboard skin over Tabler (#554).
 *
 * Only three things are styled here that Tabler does not already own: the data
 * marks (funnel bars, allowance meters), the status badges, and the sticky
 * header. Everything else — grid, cards, tables, spacing — is Tabler's, so the
 * page keeps working when the vendored version is bumped.
 *
 * Colours follow the data-viz palette, not Tabler's brand ramp:
 *   - one single hue for every coverage bar (bar length carries magnitude, so
 *     colour must not double-encode it);
 *   - four fixed status steps that are never reused as a series colour.
 * Both light and dark steps were chosen for their own surface and validated
 * against it; the dark column is not an automatic flip of the light one.
 */

:root {
  --viz-series: #2a78d6;
  --viz-track: #e5e7eb;
  --viz-surface: #ffffff;
  --status-ok: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --status-unknown: #898781;
}

[data-bs-theme="dark"] {
  --viz-series: #3987e5;
  --viz-track: #374151;
  --viz-surface: #1f2937;
}

.status-header {
  background: var(--tblr-bg-surface);
  border-bottom: 1px solid var(--tblr-border-color);
}

/* Status badge: an icon in the status colour plus the word, always both. Colour
 * alone is never the carrier — red/green are 4.1 ΔE apart under deuteranopia. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--tblr-body-color);
}

.status-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: var(--status-unknown);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-ok .status-icon {
  stroke: var(--status-ok);
}

.status-warning .status-icon {
  stroke: var(--status-warning);
}

.status-critical .status-icon {
  stroke: var(--status-critical);
}

/* The header theme switch (#2032) draws its moon or sun in the button's own
 * text colour: `.status-icon` alone would paint it the grey of an unknown status. */
#theme-toggle .status-icon {
  stroke: currentColor;
}

.state-tag {
  max-width: 100%;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--status-unknown);
  border-radius: var(--tblr-border-radius);
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: normal;
}

.state-tag.status-ok {
  border-color: var(--status-ok);
}

.state-tag.status-warning {
  border-color: var(--status-warning);
}

.state-tag.status-critical {
  border-color: var(--status-critical);
}

.registry-state {
  font-weight: 400;
}

/* Account metadata shares a narrow two-column card. Every item may move to the
 * next line, and every text-bearing item can shrink, so one long diagnostic
 * cannot push its neighbours outside the card. */
.account-card-header {
  flex-wrap: wrap;
}

.account-card-header > * {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-card-header .status-badge {
  white-space: normal;
}

/* Funnel: horizontal bars, one hue, value at the tip, 4px rounded data-end and
 * a square baseline. The track is a recessive one-step-off-surface gray. */
.funnel-row + .funnel-row {
  margin-top: 0.75rem;
}

.funnel-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.funnel-track {
  position: relative;
  height: 12px;
  margin-top: 0.25rem;
  background: var(--viz-track);
  border-radius: 0 4px 4px 0;
}

.funnel-fill {
  height: 100%;
  background: var(--viz-series);
  border-radius: 0 4px 4px 0;
  transition: width 0.2s ease-out;
}

/* Trade blocks on «Ретро» stack full width, auction first (#1891). The rule
 * keeps the second block's tiles, which carry the same labels, from reading
 * as a continuation of the first. */
.retro-trade-block + .retro-trade-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tblr-border-color);
}

.retro-dist td {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  vertical-align: middle;
}

.retro-dist td:nth-child(-n + 3) {
  white-space: nowrap;
}

.retro-dist td:last-child {
  width: 100%;
  min-width: 4rem;
}

.retro-dist-bar {
  height: 4px;
  background: var(--viz-track);
  border-radius: 0 4px 4px 0;
}

.retro-dist-fill {
  height: 100%;
  background: var(--viz-series);
  border-radius: 0 4px 4px 0;
  transition: width 0.2s ease-out;
}

.meter-track {
  height: 10px;
  background: var(--viz-track);
  border-radius: 0 4px 4px 0;
}

.meter-fill {
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--viz-series);
}

.meter-fill.is-warning {
  background: var(--status-warning);
}

.meter-fill.is-critical {
  background: var(--status-critical);
}

/* Label-left / value-right lines. Tabler's own datagrid stacks label above value
 * and turns a seven-item queue into a screenful on a 375px phone; this keeps the
 * same pairs readable in a third of the height. */
.kv {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.kv-label {
  color: var(--tblr-secondary);
}

.kv-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.35rem;
  overflow-wrap: anywhere;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Numbers line up vertically only where they sit in a column. */
.tabular {
  font-variant-numeric: tabular-nums;
}

.table-scroll {
  overflow-x: auto;
}

/* Metric keys are long enough to push the value column off a 375px screen, and a
 * table whose numbers are off-screen is not a table. Fixed layout plus wrapping
 * keys keeps the value beside its metric at every width. */
#pipeline-table {
  table-layout: fixed;
  width: 100%;
}

#pipeline-table td:first-child,
#pipeline-table th:first-child {
  overflow-wrap: anywhere;
  white-space: normal;
}

#pipeline-table td:last-child,
#pipeline-table th:last-child {
  width: 30%;
  white-space: nowrap;
}

/* Таблица прогона: длинный адрес и четыре даты в строке раздували её до десятка
 * уровней, а вертикально отцентрованные числа уезжали от своей шапки и читались
 * как съехавшая колонка (#1294). Ячейки прижаты к верху, адрес обрезан двумя
 * строками, числа и даты не переносятся. */
.valuation-run-passes th,
.valuation-run-passes td {
  vertical-align: top;
}

.valuation-run-passes tr.risk-hard > td {
  background-color: #fde8e8;
}

[data-bs-theme="dark"] .valuation-run-passes tr.risk-hard > td {
  background-color: #4a1f1f;
}

/* Тридцать девять колонок стояли вплотную, и соседние числа («Этажей» и «Год»)
   читались как одно (замечание владельца 04.09.2026). Разделяет их не пустота,
   которой в такой таблице не хватит места, а бледная линия плюс увеличенный
   боковой отступ; цвет — штатная граница Tabler, поэтому тема не ломается. */
.valuation-run-passes th + th,
.valuation-run-passes td + td {
  border-left: 1px solid var(--tblr-border-color);
}

.valuation-run-passes th,
.valuation-run-passes td {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Полоса «Аналог» — один заголовок над двенадцатью колонками, вертикаль внутри
   неё разрезала бы надпись пополам. */
.valuation-run-passes .comp-band + .comp-band,
.valuation-run-passes .comp-band-empty + .comp-band,
.valuation-run-passes .comp-band + .comp-band-empty {
  border-left: 0;
}

/* Длинные заголовки («Максимальная ставка, ₽/м²») в одну строку растягивали
   колонку под себя, хотя числа под ней короткие. Заголовок переносится, ширину
   задаёт потолок в символах, ячейки с данными по-прежнему в одну строку.
   Перенос — только по пробелу: «ДОХОДНОСТ / Ь» (06.09.2026) читалось хуже, чем
   колонка на пару символов шире, поэтому слово целиком держит колонку.
   Потолок 17ch: «МАКСИМАЛЬНАЯ» в капителях шапки Tabler занимает ~15,6ch, и при
   15ch слово вылезало на соседнюю колонку (владелец, 06.09.2026); таблица и так
   едет вбок внутри `.table-scroll`, лишние два символа ей не мешают. */
.valuation-run-passes thead th {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: manual;
  max-width: 17ch;
}

.valuation-run-passes .cell-nowrap {
  white-space: nowrap;
}

.valuation-run-passes .cell-address, .valuation-run-passes .cell-reason {
  /* Без нижней границы браузер ужимает адрес до пары букв ради узких соседних
     колонок; широкая таблица уходит в горизонтальный скролл контейнера. */
  min-width: 30ch;
  max-width: 44ch;
}

/* Сортировка кликом по шапке: заголовок остаётся заголовком, поэтому вместо
   кнопки — курсор и стрелка направления (#1299). */
.valuation-run-passes th.sortable {
  cursor: pointer;
  user-select: none;
}

.valuation-run-passes th.sortable .sort-arrow {
  margin-left: 0.25em;
}

.valuation-run-passes .cell-address-text, .valuation-run-passes .cell-reason-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Тридцать девять колонок прогона (#1483). Таблица шире экрана всегда, и весь
 * горизонтальный ход живёт внутри `.table-scroll` — страница целиком вбок не
 * едет. Колонки не прибиваются — владелец решил 02.09.2026, что «Лот» и «Адрес»
 * едут вместе с таблицей. */

/* Полоса над блоком «Аналог»: двенадцать колонок описывают одно объявление, и
   шапка обязана это сказать до того, как владелец начнёт их читать. */
.valuation-run-passes .comp-band-empty {
  border-bottom: 0;
}

.valuation-run-passes .comp-band {
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  font-weight: 600;
  background: var(--tblr-bg-surface-secondary, #f6f7f9);
}

.valuation-run-passes .comp-band-toggle {
  padding: 0.1rem 0.35rem;
  font-weight: 600;
}

.valuation-run-passes .comp-band-caret {
  margin-right: 0.25em;
}

/* Свёрнутый блок — одна ячейка-заглушка вместо двенадцати колонок. Прятать их,
   не подставив заглушку, нельзя: полоса сверху осталась бы висеть над пустотой. */
.valuation-run-passes .comp-placeholder {
  display: none;
}

.valuation-run-passes.comp-collapsed .comp-col {
  display: none;
}

.valuation-run-passes.comp-collapsed .comp-placeholder {
  display: table-cell;
  color: var(--tblr-secondary, #6c757d);
  text-align: center;
}

.metric-definition {
  display: none;
}

body.show-definitions .metric-definition {
  display: block;
}

.section-row td {
  background: var(--tblr-bg-surface-secondary);
  font-weight: 600;
}

/* Подсказки на панели содержат несколько строк, поэтому им нужна общая ширина
   и чтение от левого края. */
.tooltip {
  --tblr-tooltip-max-width: 22rem;
}

.tooltip .tooltip-inner {
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .funnel-fill,
  .retro-dist-fill {
    transition: none;
  }
}

/* Вкладка «Алгоритм»: длинный текст читают глазами, поэтому мера строки
   ограничена, а широкие таблицы прокручиваются внутри себя, а не растягивают
   страницу по горизонтали. */
.markdown-doc {
  max-width: 62rem;
}

.markdown-doc h1 {
  font-size: 1.5rem;
}

.markdown-doc h2 {
  font-size: 1.25rem;
  margin-top: 1.75rem;
}

.markdown-doc h3 {
  font-size: 1.05rem;
  margin-top: 1.25rem;
}

.markdown-doc p,
.markdown-doc ul,
.markdown-doc ol {
  margin-bottom: 0.75rem;
}

.markdown-doc code {
  overflow-wrap: anywhere;
}

.markdown-doc pre {
  background: var(--tblr-bg-surface-secondary);
  border-radius: var(--tblr-border-radius);
  padding: 0.75rem;
  overflow-x: auto;
}

.markdown-doc blockquote {
  border-left: 3px solid var(--tblr-border-color);
  padding-left: 0.75rem;
  color: var(--tblr-secondary);
}

.md-table-scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
}

/* Lot photographs on the flat page (#1395). A fixed frame, because these arrive
 * from the publisher at whatever size a trustee's phone produced and one
 * portrait shot would otherwise push the valuation below the fold.
 *
 * `contain`, not `cover`: a bankruptcy photograph is evidence, and cropping it
 * to fill the tile is exactly how the corner of a room an operator is looking
 * for disappears. The letterboxing that leaves is painted with the surface
 * colour so it reads as a frame rather than as a hole in the card. */
.lot-photo {
  height: 12rem;
  object-fit: contain;
  background: var(--tblr-bg-surface-secondary);
}

/* «Риски по документам» on the flat page (#1953, #1956). Ten columns share one
 * card, and the browser's automatic layout squeezed them: «+6–12 мес» broke over
 * three lines while the documents' own words wrapped to seven. Headers, category
 * and the short labels (status, confidence, severity, delay, cost) stay on one
 * line; parameter, the documents' words and the sources keep a floor width.
 * Cells facing another column get 0.5rem of side padding instead of the 0.25rem
 * of `table-sm`; the outer edges keep the padding of `card-table`. The table is
 * wider than the card and scrolls sideways inside `.table-responsive`, like the
 * run tables. The rules address columns by position: the column list in
 * `riskFacts` is pinned by a test. */
.risk-facts-table th,
.risk-facts-table td:nth-child(1),
.risk-facts-table td:nth-child(3),
.risk-facts-table td:nth-child(5),
.risk-facts-table td:nth-child(7),
.risk-facts-table td:nth-child(8),
.risk-facts-table td:nth-child(9) {
  white-space: nowrap;
}

.risk-facts-table td:nth-child(2) {
  min-width: 14ch;
}

.risk-facts-table td:nth-child(4) {
  min-width: 33ch;
}

.risk-facts-table td:nth-child(10) {
  min-width: 12ch;
  overflow-wrap: anywhere;
}

.risk-facts-table th:not(:first-child),
.risk-facts-table td:not(:first-child) {
  padding-left: 0.5rem;
}

.risk-facts-table th:not(:last-child),
.risk-facts-table td:not(:last-child) {
  padding-right: 0.5rem;
}

/* Причины рядом с уровнем (#1503). Фраза идёт отдельной строкой под словом в
 * заголовке блока, поэтому заголовку карточки разрешён перенос: иначе длинная
 * фраза выдавила бы плашку из строки. В шапке этого списка больше нет — сводка
 * по всей странице стоит таблицей в блоке «Аккаунты» (#1630). */
.status-causes {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--tblr-secondary, #626976);
}

.card-header {
  flex-wrap: wrap;
}

/* Иконка подсказки в заголовке плитки сводки прогона (#1643). */
.tile-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.tile-info {
  display: inline-flex;
  cursor: help;
  color: var(--tblr-secondary);
}
.tile-info .status-icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* Значение плитки не переносится (#1813): .tabular общая для ячеек таблиц,
   где перенос нужен. */
.tile-value {
  white-space: nowrap;
}

/* Та же иконка стоит подсказкой у фильтров прогона (07.09.2026): в плитке её
   центрует флексовый ``.tile-label``, а в ``<label>`` строка своего флекса нет,
   поэтому inline-flex роняет её ниже базовой линии текста — поднимаем сами. */
label .tile-info {
  vertical-align: -0.125em;
}