/* ═══════════════════════════════════════════════════════════════════════════
   /uchet-materialov — страница функции «Учёт материалов»

   Строение блоков — feature-page.css. Токены — candidate.css. Остатки
   рисуются через .stock-list/.stock-item/.stock-bar и .kpis-mini/.mini-kpi
   из product-ui.css; здесь — только то, чего там нет: приход, списание и
   история движения. Своего :root у страницы нет.

   Лестница только 1180 / 900 / 640 / 480 — та же, что у candidate.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.p-whs .wh-panel{ padding:20px; display:grid; gap:16px }

/* «Списано в 26-031: 92 340 ₽» — самое длинное из трёх значений в этом
   .kpis-mini (product-ui.css: .mini-kpi b{font-size:20px}, white-space:nowrap
   и цифры через   — переносить нечем). При контейнере .fh-media 1181–
   1200px (ступень 1180 ещё не сработала, а колонка уже у́же, чем на 1280+)
   84px текста не помещаются в 79–81px ячейки — переполнение 3–5px, замерено
   scrollWidth/clientWidth, не по одной ширине, а по трём (1181/1200/1240).
   18px убирает его с запасом (84×18/20=75.6) и не трогает две другие ячейки. */
.p-whs .mini-kpi:nth-child(3) b{ font-size:18px }

/* ── Приход: плоские пары ключ-значение ───────────────────────────────────── */
.p-whs .mat-dv{ padding:18px; display:grid; gap:14px }
.p-whs .mat-kv{ display:flex; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--c-line-2) }
.p-whs .mat-kv:last-child{ border-bottom:0; padding-bottom:0 }
.p-whs .mat-kv span{ font-size:13px; color:var(--c-muted) }
.p-whs .mat-kv b{ font-size:14px; text-align:right }
.p-whs .mat-kv b.is-green{ color:var(--c-green) }

/* ── Списание: таблица материалов ─────────────────────────────────────────── */
.p-whs .mat-table{ padding:16px 18px }
.p-whs .mat-row{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr) auto; gap:12px;
  align-items:center; padding:11px 0; border-bottom:1px solid var(--c-line-2); font-size:13px;
}
.p-whs .mat-row:last-child{ border-bottom:0 }
.p-whs .mat-row span{ color:var(--c-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-whs .mat-row b{ font-size:14px; text-align:right; white-space:nowrap }
.p-whs .mat-row.total{ border-top:1px solid var(--c-line); border-bottom:0; margin-top:2px; padding-top:13px }
.p-whs .mat-row.total span, .p-whs .mat-row.total b{ color:var(--c-ink); font-weight:600 }

/* ── История движения ─────────────────────────────────────────────────────── */
.p-whs .hist-list{ padding:16px 18px 0; display:grid }
.p-whs .hist-row{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:12px 0; border-bottom:1px solid var(--c-line-2); font-size:13px;
}
.p-whs .hist-row:last-child{ border-bottom:0 }
.p-whs .hist-row > span:first-child{ color:var(--c-muted-2) }
.p-whs .hist-row b{ font-size:14px }
.p-whs .hist-row .is-green{ color:var(--c-green); font-weight:600; text-align:right }
.p-whs .hist-row .is-red{ color:var(--c-red-ink); font-weight:600; text-align:right }
.p-whs .mat-foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:14px 18px; border-top:1px solid var(--c-line); margin-top:2px;
}
.p-whs .mat-foot span{ font-size:13px; color:var(--c-muted) }
.p-whs .mat-foot b{ font-size:15px }

/* ── Сценарии применения ──────────────────────────────────────────────────── */
.p-whs .scn-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.p-whs .scn-card{ padding:24px; border:1px solid var(--c-line); border-radius:var(--c-r-card); background:var(--c-bg); min-width:0 }
.p-whs .scn-card h3{ font-size:var(--c-fs-card); line-height:var(--c-lh-card); letter-spacing:var(--c-ls-card); font-weight:var(--c-fw-head); margin:12px 0 8px }
.p-whs .scn-card p{ margin:0; font-size:16px; line-height:1.58; color:var(--c-muted) }
.p-whs .scn-card ul{ padding:0; margin:16px 0 0; list-style:none; display:grid; gap:8px }
.p-whs .scn-card li{ position:relative; padding-left:20px; font-size:14px; color:var(--c-muted) }
.p-whs .scn-card li:before{ content:"✓"; position:absolute; left:0; top:0; color:var(--c-green); font-weight:700 }

@media (max-width:900px){
  .p-whs .scn-grid{ grid-template-columns:1fr }
}
@media (max-width:640px){
  /* Тот же приём, что на /sebestoimost: количество уходит первым, название
     и сумма остаются — единственная пара, без которой строка не читается. */
  .p-whs .mat-row{ grid-template-columns:minmax(0,1fr) auto }
  .p-whs .mat-row > span:nth-child(2){ display:none }
}