/* «Показатели» (plans/money-loop/04-indicators.md, Р-251): кадр вкладки,
   строка фильтров с переключателями, плитки с явным периодом, график
   «поступления и списания рядом + линия разницы», таблицы месяц к месяцу,
   заглушки этапов, расшифровки. Без инлайн-стилей (CSP): ширины — <progress>,
   высоты колонок — классы шага charts.css. Цвет — только по смыслу и всегда
   со словом или знаком рядом. */

.ind-frame {
  display: block;
}

/* Пока кадр грузится — скелетон и подпись, а не нули (§5.1) */
.ind-loading {
  padding: var(--space-4) var(--space-5);
}

.ind-loading__text {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-secondary);
  color: var(--text-secondary);
}

.ind-frame[busy] > .ind-tab {
  opacity: 0.55;
  transition: opacity 0.15s ease-in;
}

/* Строка фильтров: переключатели и месяц ‹ › в одну строку с переносом */
.ind-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.ind-switch {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 2px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface);
}

.ind-switch__item {
  padding: var(--space-1) var(--space-3);
  border-radius: 6px;
  font-size: var(--font-size-secondary);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.ind-switch__item:hover {
  color: var(--text);
  text-decoration: none;
}

.ind-switch__item--active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}

.ind-month {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ind-month__label {
  min-width: 120px;
  font-weight: 600;
  text-align: center;
}

/* Общий выбор месяца (ФЛ-2): список между стрелками и быстрые месяцы */
.ind-month {
  flex-wrap: wrap;
}

.ind-month__form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ind-month__select {
  width: auto;
  min-width: 150px;
  font-weight: 600;
}

/* Пояснение среза на прошлую дату */
.ind-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
}

/* Срез «на дату» вкладок «Долги» и «Обязательства» (ФЛ-2) */
.ind-as-of {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Плитки: период — рядом с именем словаря, явно (§5.1 п. 2) */
.ind-metrics {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ind-metric__period {
  font-weight: 400;
  color: var(--text-muted);
}

.ind-metric--link {
  color: inherit;
  text-decoration: none;
}

.ind-metric--link:hover,
.ind-metric--link:focus-visible {
  border-color: var(--accent-border);
  text-decoration: none;
}

.ind-metric--link .metric__value {
  color: var(--accent);
}

.ind-metric--link .metric__value--danger {
  color: var(--danger);
}

/* График «поступления, списания и разница»: две колонки рядом, не стопкой */
.ind-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.ind-legend__item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-1);
  border-radius: 2px;
  vertical-align: -1px;
}

.ind-legend__item--in::before {
  background: var(--accent);
}

.ind-legend__item--out::before {
  background: var(--text-faint);
}

.ind-legend__item--net::before {
  height: 2px;
  vertical-align: 3px;
  background: var(--text);
}

.col-chart--flows .col-chart__bar--in {
  left: 12%;
  right: 52%;
  background: var(--accent);
}

.col-chart--flows .col-chart__bar--out {
  left: 52%;
  right: 12%;
  background: var(--text-faint);
}

/* Факт идущего месяца — сплошной (IBCS: факт сплошной, прогноз — штриховкой):
   общее правило charts.css штрихует колонки идущего месяца, здесь оно снято —
   штриховка остаётся только у «ожидается», как в легенде. Специфичность (0,4,0)
   выше общего правила (0,3,0) */
.col-chart--flows .col-chart__col--current .col-chart__bar.col-chart__bar--in {
  background: var(--accent);
}

.col-chart--flows .col-chart__col--current .col-chart__bar.col-chart__bar--out {
  background: var(--text-faint);
}

.col-chart__line--net {
  stroke: var(--text);
}

/* Бюджет денег контуром за колонкой факта (Д3а, IBCS: факт сплошной, план —
   контур) и «ожидается до конца месяца» светлой штриховкой за колонкой
   поступлений идущего месяца (прогноз — штриховка) */
.col-chart--flows .col-chart__plan--in {
  left: 8%;
  right: 48%;
}

.col-chart--flows .col-chart__plan--out {
  left: 48%;
  right: 8%;
}

.col-chart--flows .col-chart__bar--forecast {
  left: 12%;
  right: 52%;
}

/* Специфичность (0,4,0): общее правило идущего месяца в charts.css —
   (0,3,0) и иначе перекрасило бы прогноз штриховкой факта */
.col-chart--flows .col-chart__col--current .col-chart__bar.col-chart__bar--forecast,
.col-chart--flows .col-chart__bar.col-chart__bar--forecast {
  background: repeating-linear-gradient(135deg, var(--accent-border) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.ind-legend__item--plan::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text);
}

.ind-legend__item--line::before,
.ind-legend__item--dashed::before,
.ind-legend__item--today::before,
.ind-legend__item--zero::before {
  height: 0;
  vertical-align: 3px;
  border-radius: 0;
  background: transparent;
}

/* Легенда линии остатка: сплошная — факт, пунктир — ожидается, черта —
   сегодня, красная — ноль (как col-chart__line, __line--forecast, __today,
   __zero-line в charts.css) */
.ind-legend__item--line::before { border-top: 2px solid var(--text); }
.ind-legend__item--dashed::before { border-top: 2px dashed var(--text-muted); }

.ind-legend__item--today::before {
  width: 0;
  height: 10px;
  vertical-align: -1px;
  border-left: 1.5px dashed var(--accent);
}

.ind-legend__item--zero::before { border-top: 1px solid var(--danger); }

.ind-legend__item--forecast::before {
  background: repeating-linear-gradient(135deg, var(--accent-border) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

/* Тёплая тема дашбордов (warm.css, только под .crm-warm) красит все колонки
   одним цветом, а идущий месяц — одной штриховкой: поступления и списания
   там должны оставаться различимыми — почти чёрные и тауп, разница — синей
   линией */
.crm-warm .dash-warm .col-chart--flows .col-chart__bar.col-chart__bar--in,
.crm-warm .dash-warm .ind-legend__item--in::before {
  background: var(--warm-ink);
}

.crm-warm .dash-warm .col-chart--flows .col-chart__bar.col-chart__bar--out,
.crm-warm .dash-warm .ind-legend__item--out::before {
  background: var(--warm-taupe);
}

.crm-warm .dash-warm .col-chart--flows .col-chart__col--current .col-chart__bar.col-chart__bar--in {
  background: var(--warm-ink);
}

.crm-warm .dash-warm .col-chart--flows .col-chart__col--current .col-chart__bar.col-chart__bar--out {
  background: var(--warm-taupe);
}

/* «Ожидается» в тёплой теме — светлая штриховка: правило идущего месяца
   warm.css (0,5,0) иначе перекрасило бы прогноз */
.crm-warm .dash-warm .col-chart--flows .col-chart__col--current .col-chart__bar.col-chart__bar--forecast {
  background: repeating-linear-gradient(135deg, var(--warm-taupe) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--warm-taupe);
}

.crm-warm .dash-warm .col-chart__line--net,
.crm-warm .dash-warm .ind-legend__item--net::before {
  stroke: var(--warm-blue);
  background: var(--warm-blue);
}

/* Таблицы по месяцам: итоговые строки, отрицательные — словом и цветом,
   отклонение больше порога — подложкой и словом «отклонение» */
.ind-table-note {
  margin: 0;
  padding: var(--space-3) var(--space-5) 0;
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

.ind-row--total th,
.ind-row--total td {
  font-weight: 600;
  background: var(--surface-subtle);
}

.ind-row--stub td {
  font-size: var(--font-size-secondary);
}

.ind-cell--negative,
.ind-cell--negative a {
  color: var(--danger);
}

/* Сбор арендатора и статус словом рядом (ui_status, Metrics::Status) */
.ind-collection {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  white-space: nowrap;
}

.ind-cell--over {
  background: var(--warning-bg);
}

/* Выбранный месяц — чертой под заголовком колонки, ячейки не трогаются */
.ind-tab .table thead th.ind-col--selected {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Подпись строки — <th scope="row"> в теле таблицы: как ячейка, слева */
.ind-tab .table tbody th {
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: 1px solid var(--border-soft);
  font-weight: 500;
  text-align: left;
  vertical-align: middle;
}

.ind-tab .table tbody th:first-child {
  padding-left: var(--table-cell-pad-edge);
}

.ind-tab .table tbody tr:last-child th {
  border-bottom: 0;
}

.ind-tab .table tbody th .cell__sub {
  display: block;
  font-weight: 400;
}

.ind-change {
  white-space: nowrap;
}

.ind-cell--over .ind-change {
  color: var(--warning-title);
  font-weight: 600;
}

/* Заглушка этапа и пустые состояния */
.ind-stub__text,
.ind-empty {
  margin: 0;
  max-width: 760px;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

/* Определения чисел вкладки — из словаря */
.ind-definitions {
  padding: var(--space-3) var(--space-5);
}

.ind-definitions__summary {
  cursor: pointer;
  font-size: var(--font-size-secondary);
  color: var(--text-secondary);
}

.ind-definitions__list {
  display: grid;
  grid-template-columns: minmax(160px, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
}

.ind-definitions__list dt {
  font-weight: 600;
}

.ind-definitions__list dd {
  margin: 0;
  color: var(--text-secondary);
}

/* Две панели рядом; на телефоне — одна под другой */
.ind-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Список «подпись — сумма» */
.ind-list {
  margin: 0;
  padding: var(--space-1) var(--space-5) var(--space-3);
  list-style: none;
}

.ind-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
}

.ind-list__item:last-child {
  border-bottom: 0;
}

.ind-list__item .cell__sub {
  display: block;
}

/* Доля арендатора: полоса на <progress> и число рядом */
.ind-share {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ind-share__bar {
  width: 96px;
  height: 8px;
  appearance: none;
  border: none;
  border-radius: 4px;
  background: var(--neutral-bg);
  overflow: hidden;
}

.ind-share__bar::-webkit-progress-bar {
  background: var(--neutral-bg);
}

.ind-share__bar::-webkit-progress-value {
  background: var(--accent);
  border-radius: 4px;
}

.ind-share__bar::-moz-progress-bar {
  background: var(--accent);
  border-radius: 4px;
}

.ind-drill__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Сумма корзины «Долга по срокам» — ссылка в реестр «Должники» этой корзины (ФЛ-3) */
.ind-aging-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-control);
  text-underline-offset: 2px;
}

.ind-aging-link:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

@media (max-width: 767px) {
  .ind-pair {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .ind-table-note {
    padding: var(--space-3) var(--space-4) 0;
  }
}

/* ============================================================
 * Вкладки в графиках (Д3а; 06-improvement-plan §4 Д3, 02-roles §6): крупное
 * число — заголовок виджета, под ним график, под графиком — определение,
 * период, метод и НДС (Р-33). Статус — словом с иконкой (ui_status).
 * ============================================================ */
.ind-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-2);
}

/* Подпись, число со статусом, мелко — бюджет: столбиком, ширина — по
   содержимому (числа рядом в строку, на телефоне — друг под другом) */
.ind-figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.ind-figure__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.ind-figure__label {
  font-size: var(--font-size-hint);
  color: var(--text-muted);
}

/* У числа есть и класс .num (моноширинный шрифт, tabular-nums): его размер
   ячейки (ui.css грузится позже) перебивал бы 22 px — поэтому селектор с
   родителем, специфичнее одиночного .num (доводка Д3б) */
.ind-figure .ind-figure__value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.ind-figure a.ind-figure__value {
  color: var(--accent);
}

.ind-figure a.ind-figure__value:hover,
.ind-figure a.ind-figure__value:focus-visible {
  text-decoration: underline;
}

.ind-figure__sub {
  font-size: var(--font-size-hint);
  color: var(--text-secondary);
}

/* Сноска под графиком: определение, период, метод, НДС */
.ind-footnote {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-hint);
  line-height: 1.45;
  color: var(--text-muted);
}

.ind-footnote p {
  margin: 0 0 var(--space-1);
}

.ind-chart-block {
  margin-top: var(--space-3);
}

.ind-chart-block .chart-bullets,
.ind-chart-block .chart-bars {
  margin-top: var(--space-2);
}

/* Таблица «месяц × канал» под графиком — своя прокрутка с клавиатуры:
   tabindex, role="region" и подпись — у самой панели таблицы (shared/table
   region:), она и прокручивается (overflow: auto в ui.css); страница вбок не
   едет */
.table-panel[role="region"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
 * «Долги» (Д3б; 02-roles §6): малые колонки по корзинам просрочки — четыре
 * графика на одной шкале. Корзина больше 90 дней выделена рамкой и весом,
 * без цвета статуса: корзина — не оценка (С-5, кандидат Р-674 п. 12)
 * ============================================================ */
.ind-buckets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.ind-buckets__item {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.ind-buckets__item--oldest {
  border: 2px solid var(--text);
}

.ind-buckets__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

.ind-buckets__label {
  font-size: var(--font-size-hint);
  color: var(--text-secondary);
}

.ind-buckets__item--oldest .ind-buckets__label,
.ind-buckets__item--oldest .ind-buckets__sum {
  font-weight: 700;
  color: var(--text);
}

.ind-buckets__sum {
  font-weight: 600;
  white-space: nowrap;
}

.ind-buckets__count {
  font-size: var(--font-size-hint);
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .ind-buckets {
    grid-template-columns: minmax(0, 1fr);
  }
}