/* ПЛОТНЫЕ ЭКРАНЫ: СВЁРНУТЫЕ ПАНЕЛИ И ДЫШАЩИЕ ТАБЛИЦЫ.
 *
 * Замер до правки (закупки, рассылки, клиенты), пикселей до первой строки:
 *   Классификация клиентов 1825 · Клиенты и выборки 982 · Поставщики 529 ·
 *   Заказы поставщикам 521 · Поступления 502 · Потребность 464.
 * Высота строки таблицы: 124 у выборок рассылок, 77 у потребности, 55 у
 * заказов и поставщиков — при читаемой норме 34–38.
 */

/* --- Переключатель свёрнутой панели --- */
.plotno-panel > .cz-ph,
.plotno-panel > header,
.plotno-panel > h2,
.plotno-panel > h3,
.plotno-panel > h4{
  display:flex;
  align-items:center;
  gap:10px;
}
.plotno-perekljuchatel{
  margin-left:auto;
  width:26px;
  height:22px;
  flex:0 0 auto;
  border:1px solid var(--line,#d8e2de);
  border-radius:7px;
  background:var(--surface,#fff);
  cursor:pointer;
  position:relative;
}
.plotno-perekljuchatel::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:6px; height:6px;
  margin:-4px 0 0 -3px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
  opacity:.65;
  transition:transform .14s ease;
}
.plotno-panel.plotno-otkryto .plotno-perekljuchatel::after{
  transform:rotate(-135deg);
  margin-top:-1px;
}
.plotno-perekljuchatel:hover{ border-color:var(--accent,#0e8067); }
.plotno-perekljuchatel:focus-visible{ outline:3px solid rgba(14,128,103,.18); }

/* Свёрнутая панель — одна строка, а не блок */
.plotno-panel:not(.plotno-otkryto){
  padding-top:6px;
  padding-bottom:6px;
}
.plotno-telo[hidden]{ display:none !important; }

/* --- Таблицы: строка не выше, чем нужно строке --- */
table.dt tbody td,
table.grid-table tbody td,
.dt-wrap table tbody td{
  padding-top:6px;
  padding-bottom:6px;
  line-height:1.35;
}
table.dt thead th,
table.grid-table thead th,
.dt-wrap table thead th{
  padding-top:7px;
  padding-bottom:7px;
  line-height:1.25;
  font-size:11.5px;
  letter-spacing:.02em;
}

/* --- Плитки показателей: 108 → около 64 ---
 * Замер: на «Поставщиках» три плитки по 108 пикселей стоят между отбором и
 * таблицей и отодвигают данные до 529-го. Плитка несёт число и подпись —
 * этого хватает строки в 64 пикселя. Крупная цифра остаётся крупной: режется
 * воздух вокруг, а не смысл.
 */
.kpi-tile,
.purchase-command-kpi,
[class*="command-kpi"],
[class*="kpi-tile"]{
  padding:9px 12px;
  border-radius:11px;
  gap:2px;
  min-height:0;
}
.kpi-tile > *,
.purchase-command-kpi > *{
  margin-top:0;
  margin-bottom:0;
}
.kpi-tile [class*="value"],
.kpi-tile strong,
.kpi-tile b,
.purchase-command-kpi [class*="value"],
.purchase-command-kpi strong,
[class*="command-kpi"] strong{
  font-size:22px;
  line-height:1.1;
}
.kpi-tile [class*="label"],
.kpi-tile small,
.purchase-command-kpi small,
[class*="command-kpi"] small,
[class*="command-kpi"] [class*="label"]{
  font-size:11px;
  line-height:1.3;
}
.kpi-tile [class*="hint"],
.kpi-tile [class*="note"],
.purchase-command-kpi [class*="hint"],
[class*="command-kpi"] [class*="hint"]{
  font-size:10.5px;
  line-height:1.3;
  opacity:.8;
}

/* --- Карточки-обёртки вокруг таблиц --- */
.card.card-pad-lg{ padding:12px; }
.card.card-pad-lg > :first-child{ margin-top:0; }

/* --- Стрелка тренда встаёт РЯДОМ с числом, а не под ним ---
 * Разбор плитки «Поставщиков»: подпись 14, число 29, пояснение 18 и стрелка
 * ОТДЕЛЬНОЙ строкой 26 — то есть четверть высоты плитки уходила на значок,
 * который логически принадлежит числу. Плитка становится сеткой в две
 * колонки: слева подпись, число и пояснение, справа — стрелка по центру.
 */
.purchase-command-kpi,
[class*="command-kpi"]{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.purchase-command-kpi > small,
.purchase-command-kpi > span,
[class*="command-kpi"] > small,
[class*="command-kpi"] > span{
  grid-column:1;
}
.purchase-command-kpi > b,
[class*="command-kpi"] > b{
  grid-column:1;
  font-size:26px;
}
.purchase-command-kpi > i,
[class*="command-kpi"] > i{
  grid-column:2;
  grid-row:1 / -1;
  align-self:center;
  font-size:15px;
  opacity:.7;
}

/* --- РЯД ПОКАЗАТЕЛЕЙ: СТРОКА ВМЕСТО ТРЁХ КОРОБОК ---
 * На «Поставщиках» три плитки занимают всю ширину и 89 пикселей высоты, а
 * несут по одному числу каждая: «Поставщиков 6», «В дефиците 6»,
 * «Заблокировано 864». Коробка вокруг одного числа — это рамка ради рамки.
 * Ряд становится одной полосой: число крупное, подпись рядом, разделители
 * между показателями. Высота 89 → около 44, ширина используется вся.
 * Пояснение под числом остаётся, но уходит во вторую строку той же ячейки.
 */
.purchase-command-kpis,
.kpi-grid,
.purchase-app-kpis{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0;
  padding:8px 14px;
  border:1px solid var(--line,#d8e2de);
  border-radius:12px;
  background:var(--surface,#fff);
}
.purchase-command-kpis > *,
.kpi-grid > *,
.purchase-app-kpis > *{
  flex:1 1 180px;
  min-width:0;
  border:0 !important;
  border-radius:0;
  background:none;
  box-shadow:none;
  padding:2px 16px;
  position:relative;
}
.purchase-command-kpis > * + *::before,
.kpi-grid > * + *::before,
.purchase-app-kpis > * + *::before{
  content:"";
  position:absolute;
  left:0; top:10%;
  height:80%;
  border-left:1px solid var(--line,#e2eae7);
}
.purchase-command-kpis > * > b,
.kpi-grid > * > b{ font-size:24px; line-height:1.05; }
.purchase-command-kpis > * > small,
.kpi-grid > * > small{ font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; opacity:.75; }
.purchase-command-kpis > * > span,
.kpi-grid > * > span{ font-size:11px; opacity:.75; }