/* МЕБЕЛЬНЫЙ ЦЕНТР: ПОРТФЕЛЬ КАК ТАБЛИЦА, ШАПКА КАК ПОЛОСА.
 *
 * Замер до правки (#/furniture-projects, роль vision, выдача из
 * /api/furniture-projects?limit=500 от 15.09.2026 — 54 проекта):
 *   — таблицы на экране НЕ БЫЛО ни одной: портфель рисовался сеткой карточек
 *     (.furniture-projects-grid), таблица жила только на соседнем «Реестре»;
 *   — до тела экрана шли: герой с заголовком и трёхстрочным пояснением,
 *     пять KPI-карточек, абзац справки об источнике, свёрнутый «контур факта»,
 *     вкладки и свёрнутый блок «Как устроен Центр» — семь блоков.
 *
 * Здесь: разрезы портфеля над таблицей, полосы долей, компактный ряд
 * показателей и свёрнутые пояснения. Ни одного !important — всё правила
 * держатся на собственных классах и на вложенности в .furniture-projects-view,
 * поэтому войны каскада с views.css и redesign.css не возникает.
 *
 * Цвет — холодный зелёный #0e8067.
 */

.furniture-projects-view {
  --fp-zeljonyj: #0e8067;
  --fp-zeljonyj-tihij: rgba(14, 128, 103, 0.12);
  --fp-zeljonyj-kraj: rgba(14, 128, 103, 0.28);
  --fp-krasnyj: #b3261e;
  --fp-krasnyj-tihij: rgba(179, 38, 30, 0.12);
  --fp-linija: var(--line, #d8e2de);
  --fp-plastina: var(--surface, #fff);
  --fp-tusklyj: var(--muted, #5d6b66);
}

/* ── ШАПКА ЭКРАНА СЖАТА ─────────────────────────────────────────────
   Пояснение и справка об источнике стали свёрнутыми: текст цел, места
   занимает строку. Ряд показателей — одна полоса вместо пяти карточек. */

.furniture-projects-view .furniture-projects-hero-note {
  align-self: start;
  max-width: 340px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fp-tusklyj);
}
.furniture-projects-view .furniture-projects-hero-note > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--fp-linija);
  border-radius: 999px;
  background: var(--fp-plastina);
  font-weight: 600;
  color: var(--fp-zeljonyj);
  white-space: nowrap;
}
.furniture-projects-view .furniture-projects-hero-note > summary::-webkit-details-marker { display: none }
.furniture-projects-view .furniture-projects-hero-note > summary::after {
  content: "?";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--fp-zeljonyj-kraj);
  font-size: 10px;
  line-height: 13px;
  text-align: center;
}
.furniture-projects-view .furniture-projects-hero-note[open] > summary { margin-bottom: 6px }
.furniture-projects-view .furniture-projects-hero-note > span,
.furniture-projects-view .furniture-projects-hero-note > small { display: block }

.furniture-projects-view .furniture-source-explanation > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.furniture-projects-view .furniture-source-explanation > summary::-webkit-details-marker { display: none }
.furniture-projects-view .furniture-source-explanation > p { margin: 6px 0 0; font-size: 12px }

/* Ряд показателей: пять карточек в одну полосу. Значения и подписи целы —
   уменьшены только отступы и кегль заголовка карточки. */
.furniture-projects-view .furniture-projects-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}
.furniture-projects-view .furniture-projects-kpis .kpi-card {
  padding: 8px 12px;
  border-radius: 10px;
  min-height: 0;
}
.furniture-projects-view .furniture-projects-kpis .kpi-card .lbl {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fp-tusklyj);
}
.furniture-projects-view .furniture-projects-kpis .kpi-card .big {
  font-size: 22px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.furniture-projects-view .furniture-projects-kpis .kpi-card .sub { font-size: 11px; line-height: 1.35 }

/* Полоса отборов — в одну строку, а не сеткой на треть экрана. */
.furniture-projects-view .furniture-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 10px;
  padding: 8px 10px;
}
.furniture-projects-view .furniture-filter-bar > label { margin: 0 }
.furniture-projects-view .furniture-filter-bar > label > span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fp-tusklyj);
}
.furniture-projects-view .furniture-filter-shortcuts { flex-basis: 100%; margin: 0; font-size: 11px }

/* ── РАЗРЕЗЫ ПОРТФЕЛЯ ───────────────────────────────────────────────
   Три распределения рядом. Нажатие на строку разреза отбирает таблицу —
   это и есть дрилдаун по числу, которого на экране не было. */

.fp-cuts {
  margin: 0 0 10px;
  border: 1px solid var(--fp-linija);
  border-radius: 12px;
  background: var(--fp-plastina);
  overflow: hidden;
}
.fp-cuts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--fp-linija);
  background: var(--fp-zeljonyj-tihij);
  font-size: 12px;
}
.fp-cuts-head > b { color: var(--fp-zeljonyj); font-size: 12.5px }
.fp-cuts-head > span { color: var(--fp-tusklyj) }

.fp-money-risk {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.fp-money-risk b { color: inherit }
.fp-money-risk > .fp-cut-bar { width: 96px }
.fp-money-risk > em { font-style: normal; font-weight: 600; color: var(--fp-krasnyj) }
.fp-money-risk > small { color: var(--fp-tusklyj) }

.fp-cuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
}
.fp-cut { border-right: 1px solid var(--fp-linija); min-width: 0 }
.fp-cut:last-child { border-right: 0 }
.fp-cut > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px 4px;
  font-size: 11px;
}
.fp-cut > header > b { font-size: 11.5px }
.fp-cut > header > span { color: var(--fp-tusklyj) }
.fp-cut > ul {
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
  max-height: 156px;
  overflow: auto;
}
.fp-cut-row.is-on {
  border-color: var(--fp-zeljonyj-kraj);
  background: var(--fp-zeljonyj-tihij);
  font-weight: 600;
}
.fp-cut-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fp-cut-num, .fp-cut-share, .fp-cut-money { font-variant-numeric: tabular-nums; text-align: right }
.fp-cut-share, .fp-cut-money { color: var(--fp-tusklyj) }
.fp-cut-money { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fp-cut-unknown { display: block; font-style: normal; font-size: 10px; color: var(--fp-krasnyj) }

/* Полоса доли. Одна разметка на все места, где показывается доля. */
.fp-cut-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--fp-zeljonyj-tihij);
  overflow: hidden;
}
.fp-cut-bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--fp-zeljonyj);
}

/* ── ТАБЛИЦА ПОРТФЕЛЯ ───────────────────────────────────────────────
   Колонки акцентнее: шапка держится при прокрутке, числа — моноширинные,
   строка подсвечивается под курсором. */

.furniture-portfolio-table table { width: 100%; border-collapse: collapse }
.furniture-portfolio-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 10px;
  border-bottom: 2px solid var(--fp-zeljonyj-kraj);
  background: var(--fp-plastina);
  font-size: 10.5px;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--fp-zeljonyj);
  text-align: left;
  white-space: nowrap;
}
.furniture-portfolio-table tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--fp-linija);
  font-size: 12.5px;
  vertical-align: middle;
}
.furniture-portfolio-table tbody td.kp-n { font-variant-numeric: tabular-nums }
.furniture-portfolio-table tbody tr:hover td { background: var(--fp-zeljonyj-tihij) }

.furniture-portfolio-table tbody td > button[data-project-handle] {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.furniture-portfolio-table tbody td > button[data-project-handle] > b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fp-zeljonyj);
}
.furniture-portfolio-table tbody td > button[data-project-handle] > span {
  display: block;
  font-size: 10.5px;
  color: var(--fp-tusklyj);
}

.fp-stage {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border: 1px solid var(--fp-zeljonyj-kraj);
  border-radius: 999px;
  background: var(--fp-zeljonyj-tihij);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Просрочка: длина полосы — доля от самой большой просрочки на странице,
   число рядом. Полоса без числа врала бы масштабом, число без полосы не
   сравнивалось бы глазом. */
.fp-late {
  display: inline-grid;
  grid-template-columns: 56px auto;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.fp-late > i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--fp-krasnyj);
  min-width: 2px;
}
.fp-late > b { font-weight: 600; color: var(--fp-krasnyj); white-space: nowrap }

.fp-progress {
  display: inline-grid;
  grid-template-columns: 48px auto;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
.fp-progress > i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--fp-zeljonyj);
  min-width: 0;
  box-shadow: inset 0 0 0 1px var(--fp-zeljonyj-kraj);
}
.fp-progress > b { font-variant-numeric: tabular-nums; font-weight: 500 }
.fp-progress:hover > b { color: var(--fp-zeljonyj); text-decoration: underline }

.fp-await {
  display: inline-block;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--fp-zeljonyj);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.fp-await:hover { background: #0b6b56 }

.furniture-portfolio-table button.furniture-risk-count {
  min-width: 24px;
  padding: 0 7px;
  border: 1px solid var(--fp-linija);
  border-radius: 999px;
  background: var(--fp-plastina);
  font: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  color: var(--fp-tusklyj);
}
.furniture-portfolio-table button.furniture-risk-count.has-risk {
  border-color: rgba(179, 38, 30, .35);
  background: var(--fp-krasnyj-tihij);
  color: var(--fp-krasnyj);
  font-weight: 600;
}

/* Реестр получил две новые колонки — сумма тоже табличными цифрами. */
.furniture-registry tbody td.kp-n { font-variant-numeric: tabular-nums; text-align: right }

@media (max-width: 900px) {
  .fp-cuts-grid { grid-template-columns: minmax(0, 1fr) }
  .fp-cut { border-right: 0; border-bottom: 1px solid var(--fp-linija) }
  .fp-money-risk { margin-left: 0; flex-basis: 100% }
  .fp-cut-money { display: none }
}

/* ── ДОСКА: ЗАГОЛОВОК КОЛОНКИ ОТВЕЧАЕТ НА ВОПРОС ────────────────────
   Было «имя фазы и число карточек». Стало: число, полоса доли, доля
   портфеля, деньги колонки, сколько за сроком и сколько ждут решения.
   Плюс строка о том, по какому полю разложены колонки, — раньше доска
   складывалась в одну колонку и не говорила почему. */

.fp-kanban-basis {
  margin: 0 0 8px;
  padding: 6px 10px;
  border: 1px solid var(--fp-linija, #d8e2de);
  border-left: 3px solid var(--fp-zeljonyj, #0e8067);
  border-radius: 8px;
  background: var(--fp-zeljonyj-tihij, rgba(14, 128, 103, .12));
  font-size: 12px;
  line-height: 1.45;
}
.fp-kanban-basis b { color: var(--fp-zeljonyj, #0e8067) }

.furniture-kanban-column > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
}
.furniture-kanban-column > header > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-kanban-count {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fp-zeljonyj, #0e8067);
}
.furniture-kanban-column > header > .fp-cut-bar { grid-column: 1 / -1 }
.fp-kanban-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--fp-tusklyj, #5d6b66);
}
.fp-kanban-late { color: var(--fp-krasnyj, #b3261e); font-weight: 600 }
.fp-kanban-await { color: var(--fp-zeljonyj, #0e8067); font-weight: 600 }

/* ── КАЛЕНДАРНЫЙ ПЛАН: НАГРУЗКА ПО МЕСЯЦАМ ────────────────────────── */

.fp-schedule {
  margin-top: 12px;
  border: 1px solid var(--fp-linija, #d8e2de);
  border-radius: 12px;
  background: var(--fp-plastina, #fff);
  overflow: hidden;
}
.fp-schedule-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--fp-linija, #d8e2de);
  background: var(--fp-zeljonyj-tihij, rgba(14, 128, 103, .12));
  font-size: 12px;
}
.fp-schedule-head > b { color: var(--fp-zeljonyj, #0e8067) }
.fp-schedule-head > span { color: var(--fp-tusklyj, #5d6b66) }
.fp-schedule .furniture-registry table { width: 100%; border-collapse: collapse }
.fp-schedule thead th {
  padding: 5px 10px;
  border-bottom: 2px solid var(--fp-zeljonyj-kraj, rgba(14, 128, 103, .28));
  font-size: 10.5px;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--fp-zeljonyj, #0e8067);
  text-align: left;
  white-space: nowrap;
}
.fp-schedule tbody td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--fp-linija, #d8e2de);
  font-size: 12.5px;
}
.fp-schedule tbody tr.fp-month-late td { background: var(--fp-krasnyj-tihij, rgba(179, 38, 30, .12)) }
.fp-month-late-num { color: var(--fp-krasnyj, #b3261e) }
.fp-schedule-note { margin: 0; padding: 6px 12px; font-size: 11.5px; line-height: 1.45 }