/* ЗАКУПКИ: ТАБЛИЦА НАЧИНАЕТСЯ ВЫСОКО.
 *
 * Замер до правки (разбор разметки purchase_view_presenter.js, 15.09.2026) —
 * сколько блоков стоит ДО первой строки таблицы:
 *   Обзор        6 — шапка, вкладки, 4 плитки, 4 шага цикла, полоса «Фокус
 *                    закупщика», заголовок карточки «Главные дефициты»;
 *   Потребность  6 — шапка, вкладки, строка статуса источников, сетка из
 *                    6 полей отбора, свёрнутая сводка, легенда из 3 значков;
 *   Заказы       5 — шапка, вкладки, вводный блок, отборы, 3 плитки;
 *   Поступления  5 — то же;
 *   Поставщики   5 — то же.
 *
 * Здесь ничего не выброшено: вводные блоки, цикл и полоса фокуса сведены в
 * одну строку каждый, отборы — в один ряд, плитки — в компактную полосу.
 * Текст цел, читается целиком, просто не занимает пол-экрана.
 *
 * Ни одного !important: все правила опираются на собственные классы блока
 * (.purchase-*) и на цепочку из двух-трёх селекторов, поэтому с views.css и
 * redesign.css не воюют, а идут после них по порядку подключения.
 *
 * Цвет — холодный зелёный #0e8067.
 */

.purchase-new-tabs,
.purchase-screen-intro,
.purchase-flow,
.purchase-decision-strip,
.purchase-demand-filters,
.purchase-command-kpis,
.purchase-table-legend {
  --zk-zeljonyj: #0e8067;
  --zk-zeljonyj-tihij: rgba(14, 128, 103, 0.10);
  --zk-zeljonyj-kraj: rgba(14, 128, 103, 0.26);
  --zk-linija: var(--line, #d8e2de);
  --zk-plastina: var(--surface, #fff);
  --zk-tusklyj: var(--muted, #5d6b66);
}

/* ── ВКЛАДКИ: полоса, а не ряд кнопок в две строки ────────────────── */
.purchase-new-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 8px;
  padding: 2px;
  border: 1px solid var(--zk-linija);
  border-radius: 10px;
  background: var(--zk-plastina);
}
.purchase-new-tabs > a {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  text-decoration: none;
  color: var(--zk-tusklyj);
  white-space: nowrap;
}
.purchase-new-tabs > a:hover { background: var(--zk-zeljonyj-tihij) }
.purchase-new-tabs > a.active {
  background: var(--zk-zeljonyj);
  color: #fff;
  font-weight: 600;
}

/* ── ВВОДНЫЙ БЛОК ЭКРАНА: заголовок и пояснение в одну строку ─────── */
.purchase-screen-intro {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 5px 10px;
  border: 1px solid var(--zk-linija);
  border-left: 3px solid var(--zk-zeljonyj);
  border-radius: 9px;
  background: var(--zk-plastina);
  font-size: 12px;
}
.purchase-screen-intro > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}
.purchase-screen-intro > div > b { color: var(--zk-zeljonyj); white-space: nowrap }
.purchase-screen-intro > div > span { color: var(--zk-tusklyj); line-height: 1.4 }
.purchase-screen-intro > .chip { margin-left: auto; white-space: nowrap }

/* ── ЦИКЛ ЗАКУПКИ: четыре шага одной тонкой строкой ──────────────── */
.purchase-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.purchase-flow-step {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 190px;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--zk-linija);
  border-radius: 9px;
  background: var(--zk-plastina);
  text-decoration: none;
  color: inherit;
}
.purchase-flow-step:hover { border-color: var(--zk-zeljonyj-kraj); background: var(--zk-zeljonyj-tihij) }
.purchase-flow-step > span {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--zk-zeljonyj);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.purchase-flow-step > div { min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap }
.purchase-flow-step > div > b { font-size: 12.5px; white-space: nowrap }
.purchase-flow-step > div > small {
  font-size: 10.5px;
  color: var(--zk-tusklyj);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── ПОЛОСА ФОКУСА: одна строка ──────────────────────────────────── */
.purchase-decision-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 5px 10px;
  border: 1px solid var(--zk-zeljonyj-kraj);
  border-radius: 9px;
  background: var(--zk-zeljonyj-tihij);
  font-size: 12px;
  line-height: 1.4;
}
.purchase-decision-strip > b { color: var(--zk-zeljonyj); white-space: nowrap }
.purchase-decision-strip > span { min-width: 0 }
.purchase-decision-strip > a { margin-left: auto; white-space: nowrap }

/* ── ОТБОРЫ: один ряд вместо сетки на треть экрана ───────────────── */
.purchase-filterbar { margin: 0 0 8px; padding: 6px 8px }
.purchase-filterbar .deals-filters-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px 8px;
}
.purchase-filterbar .deals-filters-grid > .fl { margin: 0; min-width: 0 }
.purchase-filterbar .deals-filters-grid > .fl > span {
  display: block;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--zk-tusklyj);
  line-height: 1.5;
}
.purchase-filterbar .deals-filters-grid > .fl > input,
.purchase-filterbar .deals-filters-grid > .fl > select {
  height: 28px;
  padding: 2px 8px;
  font-size: 12.5px;
}
.purchase-filterbar .deals-filters-grid > .fl.ui-justify-end { margin-left: auto }

/* ── ПЛИТКИ: компактная полоса ───────────────────────────────────── */
.purchase-command-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}
.purchase-command-kpis .kpi-tile,
.purchase-command-kpis > a,
.purchase-command-kpis > div {
  padding: 6px 10px;
  border-radius: 9px;
  min-height: 0;
}
.purchase-command-kpis .kpi-tile b,
.purchase-command-kpis > a b { font-variant-numeric: tabular-nums }

/* ── ЛЕГЕНДА: тонкая строка над таблицей ─────────────────────────── */
.purchase-table-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--zk-tusklyj);
}

/* ── ТАБЛИЦЫ БЛОКА: колонки акцентнее ───────────────────────────── */
.purchase-compact-table thead th {
  padding: 5px 9px;
  border-bottom: 2px solid var(--zk-zeljonyj-kraj);
  font-size: 10.5px;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--zk-zeljonyj);
  white-space: nowrap;
}
.purchase-compact-table tbody td {
  padding: 4px 9px;
  font-size: 12.5px;
}
.purchase-compact-table tbody td.n { font-variant-numeric: tabular-nums; text-align: right }
.purchase-compact-table tbody tr:hover > td { background: var(--zk-zeljonyj-tihij) }

/* Строка обзора несла data-route без класса, за который цепляется
   обработчик: она выглядела кликабельной и не кликалась. Класс добавлен в
   presenter'е; здесь курсор, чтобы обещание и поведение совпали. */
.purchase-compact-table tbody tr.click-row { cursor: pointer }

@media (max-width: 900px) {
  .purchase-flow-step { flex-basis: 100% }
  .purchase-screen-intro > .chip,
  .purchase-decision-strip > a { margin-left: 0 }
}