/* АНАЛИЗ КЛИЕНТОВ: ЧИСЛА СТАЛИ ВИДНЫ, ШАПКА СЖАЛАСЬ.
 *
 * Замер до правки (счёт блоков разметки до первой <table>, 15.09.2026):
 *   сегменты и классификаторы 7 — заголовок · конструктор выборки на 17
 *     полей · полоса источника · чипы состава · пояснение · сетка из четырёх
 *     карточек-классификаторов · свёрнутые «расширенные»;
 *   риски 7 · актуализация 6–8 · отчёты 5–7 (библиотека из 15 карточек) ·
 *   портфель 7–8 · касания 7 · обзор 5 · кросс-сейл 4 · журнал 4–6.
 *
 * Что здесь оформляется:
 *   · распределения классификаторов — полосами с долей вместо ряда меток
 *     «label: N» (восемь разрезов: класс 10 значений, RFM 12, CSI 9, цикл 6,
 *     риск 4, объём 5, маржинальность 1, стратегический уровень 0);
 *   · ABC концентрации выручки — доля и накопленная доля полосами;
 *   · старение дебиторки — одна полоса из четырёх корзин 0–30 / 31–60 /
 *     61–90 / 90+;
 *   · конструктор выборки и библиотека отчётов — компактнее.
 *
 * Ни одного !important. Правила висят на собственных классах (kl-*) и на
 * корне клиентского контура .customers-new-view — чужих экранов не касаются.
 *
 * Цвет — холодный зелёный #0e8067.
 */

.customers-new-view,
.classification-dimension,
.kl-aging,
.kl-bar {
  --kl-zeljonyj: #0e8067;
  --kl-zeljonyj-tihij: rgba(14, 128, 103, 0.12);
  --kl-zeljonyj-kraj: rgba(14, 128, 103, 0.28);
  --kl-krasnyj: #b3261e;
  --kl-ohra: #b7791f;
  --kl-linija: var(--line, #d8e2de);
  --kl-plastina: var(--surface, #fff);
  --kl-tusklyj: var(--muted, #5d6b66);
}

/* ── РАСПРЕДЕЛЕНИЯ КЛАССИФИКАТОРОВ ──────────────────────────────────
   Было: ряд меток «Prospect: 17 356». Доли в нём нет, сравнить глазом
   нечего, нажать некуда. Стало: строка = имя, полоса, число, доля; вся
   строка — ссылка на отбор по этому же признаку. */

.classification-dimension {
  border: 1px solid var(--kl-linija);
  border-radius: 12px;
  background: var(--kl-plastina);
  padding: 8px 10px;
  min-width: 0;
}
.classification-dimension-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.classification-dimension-head h3 {
  margin: 0;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--kl-zeljonyj);
}
.classification-dimension-head span {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--kl-tusklyj);
}

.kl-dim-constant {
  margin: 0 0 6px;
  padding: 4px 8px;
  border-left: 3px solid var(--kl-ohra);
  border-radius: 6px;
  background: rgba(183, 121, 31, .08);
  font-size: 11px;
  line-height: 1.45;
}

.kl-dim-rows { display: flex; flex-direction: column; gap: 1px; max-height: 200px; overflow: auto }

.kl-dim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 52px 44px;
  align-items: center;
  gap: 8px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11.5px;
  text-decoration: none;
  color: inherit;
}
a.kl-dim-row:hover { background: var(--kl-zeljonyj-tihij) }
a.kl-dim-row:focus-visible { outline: 2px solid var(--kl-zeljonyj); outline-offset: 1px }
.kl-dim-row.is-on {
  border-color: var(--kl-zeljonyj-kraj);
  background: var(--kl-zeljonyj-tihij);
  font-weight: 600;
}
.kl-dim-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kl-dim-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--kl-zeljonyj-tihij);
  overflow: hidden;
}
.kl-dim-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--kl-zeljonyj) }
.kl-dim-n, .kl-dim-share { font-variant-numeric: tabular-nums; text-align: right }
.kl-dim-share { color: var(--kl-tusklyj) }

.classification-core-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

/* ── ABC КОНЦЕНТРАЦИИ ВЫРУЧКИ ──────────────────────────────────────
   Колонка «Выручка» показывала 0 ₽ у 100 строк из 100: разметка читала
   `revenue_rub`, а ручка отдаёт `total_revenue_rub`. Починено; заодно доля
   и накопленная доля показаны полосами — по столбцу процентов не видно,
   где кончается верхушка, а в этом весь смысл ABC. */

.kl-bar {
  display: inline-grid;
  grid-template-columns: minmax(28px, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 96px;
}
.kl-bar > i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--kl-zeljonyj);
  min-width: 1px;
  box-shadow: inset 0 0 0 1px var(--kl-zeljonyj-kraj);
}
.kl-bar > b { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap }
.kl-bar-cum > i { background: var(--kl-zeljonyj-kraj); box-shadow: none }

.kl-abc {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

/* ── СТАРЕНИЕ ДЕБИТОРКИ ────────────────────────────────────────────
   Четыре корзины приходили в ответе, показывалась одна. Полоса складывает
   их в одну строку; точные суммы — в подсказке. */

.kl-aging {
  display: flex;
  width: 100%;
  min-width: 80px;
  height: 9px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--kl-zeljonyj-tihij);
}
.kl-aging > i { display: block; min-width: 2px }
.kl-aging-b0 { background: #4fa98f }
.kl-aging-b1 { background: #d9a441 }
.kl-aging-b2 { background: #d97742 }
.kl-aging-b3 { background: var(--kl-krasnyj) }
.kl-aging-none { background: var(--kl-linija) }

/* ── ШАПКА КЛИЕНТСКИХ ЭКРАНОВ СЖАТА ────────────────────────────────
   Конструктор выборки на 17 полей уводил первую строку данных вниз. Он и
   так свёрнут, когда отбор пуст; здесь — плотнее и шире, чтобы раскрытый
   занимал строку-две, а не треть экрана. */

.customers-new-view .page-header { padding-top: 4px; padding-bottom: 4px }
.customers-new-view .page-header h2 { margin: 0; font-size: 18px; line-height: 1.25 }
.customers-new-view .page-header p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--kl-tusklyj) }

.customers-new-view .customer-segment-builder-head { padding: 4px 0; cursor: pointer }
.customers-new-view .customer-segment-builder-head .eyebrow { font-size: 10px; letter-spacing: .05em }
.customers-new-view .tn-filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px 8px;
}
.customers-new-view .tn-filter-grid > .fl { margin: 0; min-width: 0 }
.customers-new-view .tn-filter-grid > .fl > span {
  display: block;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kl-tusklyj);
  line-height: 1.5;
}
.customers-new-view .tn-filter-grid > .fl > input,
.customers-new-view .tn-filter-grid > .fl > select { height: 28px; padding: 2px 8px; font-size: 12.5px }
.customers-new-view .tn-filter-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: end }

/* Библиотека из 15 отчётов: плитки мельче, полоса вместо ковра. */
.customers-new-view .customer-report-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 5px;
}
.customers-new-view .customer-report-card {
  padding: 5px 9px;
  border-radius: 9px;
  border: 1px solid var(--kl-linija);
  background: var(--kl-plastina);
  text-decoration: none;
  color: inherit;
  display: block;
  min-width: 0;
}
.customers-new-view .customer-report-card:hover { border-color: var(--kl-zeljonyj-kraj); background: var(--kl-zeljonyj-tihij) }
.customers-new-view .customer-report-card.on { border-color: var(--kl-zeljonyj); background: var(--kl-zeljonyj-tihij) }
.customers-new-view .customer-report-card > b { display: block; font-size: 12px; line-height: 1.3 }
.customers-new-view .customer-report-card > span {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--kl-tusklyj);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── ТАБЛИЦЫ КЛИЕНТСКОГО КОНТУРА ───────────────────────────────── */
.customers-new-view table.dt thead th {
  padding: 5px 9px;
  border-bottom: 2px solid var(--kl-zeljonyj-kraj);
  font-size: 10.5px;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--kl-zeljonyj);
  text-align: left;
  white-space: nowrap;
}
.customers-new-view table.dt tbody td { padding: 4px 9px; font-size: 12.5px }
.customers-new-view table.dt tbody td.n { font-variant-numeric: tabular-nums; text-align: right }
.customers-new-view table.dt tbody tr:hover > td { background: var(--kl-zeljonyj-tihij) }
.customers-new-view table.dt tbody tr.click-row { cursor: pointer }

@media (max-width: 900px) {
  .kl-dim-row { grid-template-columns: minmax(0, 1fr) 44px 40px }
  .kl-dim-row > .kl-dim-share { display: none }
  .customers-new-view .tn-filter-grid > .fl { flex-basis: 100% }
}

/* ── ТЕПЛОВАЯ КОГОРТНАЯ ЯЧЕЙКА ─────────────────────────────────────
   Когортную таблицу читают по цвету: строка светлеет книзу — удержание
   падает; столбец темнеет — новые когорты возвращаются чаще. Доля приходит
   из разметки числом 0..1 в --kl-heat, число и подпись доли остаются.
   Ячейка «не измерено» цвета не получает: это не значение, и красить её
   ни как ноль, ни как сто нельзя. */
.kl-heat {
  display: block;
  padding: 2px 6px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  background: rgba(14, 128, 103, calc(var(--kl-heat, 0) * 0.85));
  color: inherit;
}
.kl-heat > i { display: block; font-style: normal; font-size: 10px; opacity: .78 }
/* На тёмной заливке текст обязан остаться читаемым. */
.kl-heat[style*="--kl-heat:0.7"],
.kl-heat[style*="--kl-heat:0.8"],
.kl-heat[style*="--kl-heat:0.9"],
.kl-heat[style*="--kl-heat:1.000"] { color: #fff }