body { min-height: 100vh; }

/* Таблицы отчётов: заголовки в одну строку, числа не переносятся.
   Широкая таблица прокручивается внутри своей карточки, а не растягивает страницу. */
.datatable-container { overflow-x: auto; }
.report-table th { white-space: nowrap; font-size: .8125rem; font-weight: 600; }
.report-table td.text-end { white-space: nowrap; }
.report-table .product-cell { min-width: 12rem; max-width: 18rem; }
.report-table .product-cell .text-secondary {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.datatable-top, .datatable-bottom { padding: .5rem .25rem; }

/* Отчёты широкие: на обычном мониторе не зажимаем их в 1140 px бутстраповского
   .container, но и на огромном не растягиваем строки на весь экран. */
.page-width { max-width: 1600px; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Место под стрелки сортировки simple-datatables, чтобы они не наезжали на подпись. */
.report-table .datatable-sorter { padding-right: 1.1rem; }
.report-table .datatable-sorter::before,
.report-table .datatable-sorter::after { right: .2rem; }
.nowrap { white-space: nowrap; }

/* --- Плитки показателей на сводке ---------------------------------------------------
   Фон плитки — итог сравнения с прошлым периодом: зелёный — улучшилось,
   красный — ухудшилось, серый — не с чем сравнить. Направление дополнительно
   показывает стрелка, так что цвет не единственный носитель смысла. */
:root {
  --metric-good-bg: #dcecd9;
  --metric-bad-bg: #f5d6d9;
  --metric-neutral-bg: #e8ecf1;
  --metric-missing-bg: #f1f3f5;
  --metric-good-ink: #1d7a33;
  --metric-bad-ink: #c42f3c;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: .75rem;
}
.metric-card {
  border-radius: .75rem;
  padding: .85rem 1rem .8rem;
  background: var(--metric-neutral-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  min-height: 7.2rem;
}
.metric-card.tone-good { background: var(--metric-good-bg); }
.metric-card.tone-bad { background: var(--metric-bad-bg); }
.metric-card.tone-missing { background: var(--metric-missing-bg); box-shadow: none; }
.metric-title { display: flex; align-items: center; gap: .35rem; font-size: .9rem; color: #212529; }
.metric-info { color: #212529; font-size: .8rem; cursor: help; }
.metric-warn { color: #8a6d00; font-size: .85rem; cursor: help; }
.metric-value { font-size: 1.55rem; font-weight: 600; line-height: 1.25; margin-top: .3rem; }
.metric-second { font-size: 1.05rem; font-weight: 600; }
.metric-prev { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; font-size: .88rem; color: #495057; flex-wrap: wrap; }
.metric-delta { background: #fff; border-radius: .4rem; padding: .05rem .45rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta-good { color: var(--metric-good-ink); }
.delta-bad { color: var(--metric-bad-ink); }
.delta-neutral { color: #495057; }
.metric-missing { font-size: .8rem; color: #6c757d; margin-top: .3rem; }
.metric-tooltip .tooltip-inner { white-space: pre-line; text-align: left; max-width: 380px; }

.struct-bar { height: .55rem; border-radius: 0 4px 4px 0; background: #8fa3b8; }
.struct-bar-total { background: #2a78d6; }

/* --- График по дням ------------------------------------------------------------------ */
.chart-box { position: relative; }
.chart-box-main { height: 320px; }
.chart-box-pct { height: 150px; }
.chart-swatch { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.chart-toggle { cursor: pointer; user-select: none; }
.metric-footnote { text-decoration: none; font-weight: 600; margin-left: .1rem; color: #8a6d00; }