/* ═══════════════════════════════════════════════════════════
   materials-v2.css — сторінка «Матеріали»

   Шапка, KPI-картки, чипи, пошук і кнопка «новий» уже описані в
   orders-v2.css — це той самий набір елементів, тому тут їх немає.
   Тут лише те, що належить складу: сітка карток, модалка матеріалу,
   кошик заявки, дропдауни й колірний пікер.

   Джерело — design_handoff_materials: розміри, кольори й криві взяті
   звідти дослівно.
   ═══════════════════════════════════════════════════════════ */

/* Модалка не має ганяти сторінку вбік: замість overflow:hidden на body
   тримаємо місце під скролбар і гасимо прокрутку всередині шарів. */
html { scrollbar-gutter: stable; }

/* ─────────── Каркас ─────────── */
.mat-page .kpi-grid { grid-template-columns: repeat(4, 1fr); }
.type-row {
  margin-top: 26px; display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.type-row::-webkit-scrollbar { display: none; height: 0; }
.type-sep { width: 1px; height: 20px; background: var(--line); flex: 0 0 auto; margin: 0 4px; }

/* Попереджувальний чип «потрібно докупити» — єдиний кольоровий у ряду. */
.chip.warn { border-color: #E3CFA4; background: #FDF9F1; color: #8A6428; }
.chip.warn:hover { background: #FAF2E3; border-color: #DCC49B; }
.chip.warn.active { background: #8A6428; border-color: #8A6428; color: #FBF7F4; }

/* ─────────── Картка матеріалу ─────────── */
/* П'ять карток у ряд: усе всередині зменшено пропорційно, щоб картка
   лишилась такою самою, тільки компактнішою. */
/* minmax(0,1fr), а не 1fr: інакше довгий текст (постачальник) розсуває
   свою колонку, і картки стають РІЗНОЇ ширини. Нуль дозволяє колонці
   стискатись, а вміст обрізається всередині картки. */
.mat-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mat-grid-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1500px) {
  .mat-grid, .mat-grid-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .mat-grid, .mat-grid-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mat-grid, .mat-grid-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Групи за типом — та сама механіка, що й дати в таблиці замовлень:
   підпис, лінія, число праворуч. */
.mat-group { grid-column: 1 / -1; }
.mat-group + .mat-group { margin-top: 26px; }
.mat-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mat-group-dot { width: 7px; height: 7px; border-radius: var(--r-round); flex: 0 0 auto; }
.mat-group-t {
  font: 400 10.5px var(--font-sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.mat-group-line { flex: 1; height: 1px; background: var(--line-soft); }
.mat-group-n { font: 400 11.5px var(--font-sans); color: var(--ink-faint); }
@media (max-width: 1080px) { .mat-page .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* Тіней у картках немає — тільки межа, як у рядках замовлень. */
.card {
  background: var(--surface); border: 1px solid var(--row-border);
  border-radius: var(--r-kpi); padding: 15px 16px 13px; cursor: pointer;
  display: flex; flex-direction: column; gap: 13px;
  min-width: 0;   /* довгий вміст не має права розсувати картку */
  transition: border-color var(--t-base) ease, background var(--t-base) ease;
}
.card:hover { border-color: var(--row-border-hover); }
/* Поповер поповнення живе всередині картки, тому їй потрібна опора. */
.card { position: relative; }

/* ─────────── Поповнення залишку ───────────
   Той самий поповер, що й підтвердження видалення: та сама тінь, той самий
   радіус і та сама поява — масштаб із зсувом. */
.toppop {
  position: absolute; top: 42px; right: 10px; z-index: 30; width: 196px;
  padding: 12px 13px 12px; border-radius: 16px;
  background: var(--surface-raised); border: 1px solid var(--line-card);
  box-shadow: 0 3px 8px rgba(58, 44, 32, .06), 0 24px 48px -24px rgba(58, 44, 32, .5);
  transform-origin: top right; transform: scale(.94) translateY(-6px); opacity: 0;
  pointer-events: none; cursor: default;
  transition: transform .26s cubic-bezier(.16, 1, .3, 1), opacity .18s ease;
}
.toppop.on { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.toppop-h { display: flex; flex-direction: column; gap: 3px; margin-bottom: 11px; }
.toppop-t { font: 500 13px var(--font-sans); color: var(--ink); }
.toppop-s {
  font: 400 11.5px var(--font-sans); color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Поле з одиницею — один блок на всю ширину: число ліворуч, одиниця
   праворуч, лінія та сама, що й у кнопок під ним. */
.toppop-field {
  display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box;
  padding: 0 12px; border: 1px solid var(--line-input); border-radius: var(--r-input);
  background: var(--surface-input);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.toppop-field:focus-within { border-color: var(--line-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.toppop-field input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font: 400 14px var(--font-sans); color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.toppop-field input::placeholder { color: var(--ink-placeholder); }
.toppop-u { font: 400 12px var(--font-sans); color: var(--ink-faint); flex: 0 0 auto; }
.toppop-was {
  font: 400 11px var(--font-sans); color: var(--ink-faint); margin-top: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toppop-was b { font-weight: 500; color: var(--ink-soft); }
.toppop-f { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.toppop-f .btn-light { flex: 1; height: 32px; padding: 0; justify-content: center; font-size: 12.5px; }
.toppop-f .btn-dark { flex: 1; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; }

.card-head { display: flex; align-items: flex-start; gap: 10px; }
.mat-ico {
  width: 32px; height: 32px; border-radius: 10px; background: var(--ivory-200);
  color: var(--ink-soft); display: grid; place-items: center; flex: 0 0 auto; margin-top: 2px;
}
/* Фарба ніколи не позначається іконкою, матеріал — ніколи кольоровим кругом. */
.mat-hex {
  width: 32px; height: 32px; border-radius: var(--r-round);
  box-shadow: inset 0 0 0 1px rgba(43, 35, 29, .14); flex: 0 0 auto; margin-top: 2px;
}
.mat-name {
  /* Насиченіше накреслення: на 19px тонкі штрихи Cormorant майже зникали. */
  font: 600 16.5px/1.1 var(--font-display); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.mat-spec {
  /* Тип стоїть щільно під назвою: між ними був завеликий проміжок. */
  font: 400 10.5px var(--font-sans); color: var(--ink-faint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mat-warn {
  width: 26px; height: 26px; box-sizing: border-box; border-radius: var(--r-round);
  display: grid; place-items: center; flex: 0 0 auto;
}
.refresh {
  width: 26px; height: 26px; border-radius: var(--r-round); border: 1px solid var(--line-soft);
  background: var(--surface); color: var(--ink-faint); cursor: pointer;
  display: grid; place-items: center; flex: 0 0 auto;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease, transform .12s ease;
}
.refresh:hover { background: var(--ivory-200); border-color: var(--line-hover); color: var(--ink-soft); }
.refresh:active { transform: scale(.94); }

/* Число й одиниця — одна пара, тож проміжок між ними менший. */
.stock-line { display: flex; align-items: baseline; gap: 4px; margin-bottom: 7px; }
/* Залишок — головне число картки, тож помітно більше за решту. */
.stock-n { font: 600 20px/1 var(--font-display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.stock-max { font: 400 12px var(--font-sans); color: var(--ink-faint); }
.stock-st { font: 400 10.5px var(--font-sans); }
.bar { height: 6px; border-radius: var(--r-pill); background: var(--ivory-300); overflow: hidden; }
.bar span {
  display: block; height: 100%; border-radius: var(--r-pill);
  transition: width .42s var(--ease-out-soft), background var(--t-base) ease;
}
/* Імʼя постачальника стоїть по центру відносно ціни з одиницею, а не
   по нижній лінії: інакше воно «висіло» на рівні дрібного підпису. */
.card-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--line-soft);
}
.foot-k {
  font: 400 9.5px var(--font-sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.foot-v {
  /* Імʼя стоїть саме по собі, тож трохи більше й без верхнього відступу.
     Довгий текст НЕ тягне картку і НЕ обрубується трикрапкою — він плавно
     розчиняється прозорістю праворуч, а розмір картки лишається той самий. */
  font: 400 14.5px var(--font-sans); color: var(--ink-soft);
  overflow: hidden; white-space: nowrap; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 98%);
  mask-image: linear-gradient(90deg, #000 72%, transparent 98%);
}
/* Ціна — головне число підвалу, тож більша за решту; одиниця стоїть
   щільно під нею. */
/* Ціна — друге за вагою число картки: більша й на одній лінії з іменем
   постачальника (обидва центруються підвалом). */
/* Ціна — довідка, а не заголовок: звичайне накреслення й спокійніший
   розмір. Жирним і на 21px вона перетягувала увагу з назви й залишку. */
.foot-price {
  font: 400 15px/1 var(--font-display); color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums; flex: 0 0 auto;
}
.foot-unit { font: 400 9.5px var(--font-sans); color: var(--ink-faint); margin-top: 1px; }

.buy {
  width: 32px; height: 32px; padding: 0; border-radius: var(--r-pill);
  border: 1px solid var(--line-soft); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; position: relative;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease, transform .12s ease;
}
/* Наведення тихе: кнопка лише трохи темнішає підкладкою. Раніше вона
   заливалась чорним — на світлій картці це било по очах. */
.buy:hover { background: var(--ivory-200); border-color: var(--line-hover); color: var(--ink-soft); }
.buy:active { transform: scale(.97); }
.buy.hot { border-color: #E3CFA4; background: #FDF9F1; color: #8A6428; }
.buy.hot:hover { background: #F8EFDC; border-color: #DCC49B; color: #8A6428; }
.buy.added { background: #EAF1E9 !important; border-color: #CFDECD !important; color: #3E5545 !important; }
.cartdot {
  position: absolute; top: -4px; right: -4px; width: 15px; height: 15px;
  border-radius: var(--r-round); background: #566A5B; color: #F3F7F2;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
  animation: pop .42s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* Порожній стан і скелет — на місці сітки, щоб нічого не стрибало. */
.mat-empty {
  grid-column: 1 / -1; padding: 60px 0; text-align: center;
  font: 400 13px var(--font-sans); color: var(--ink-faint);
}
.mat-skel { height: 196px; border-radius: var(--r-kpi); }

/* ─────────── Модалка матеріалу ─────────── */
.scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(43, 35, 29, .34);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
  overscroll-behavior: none; touch-action: none;
  transition: opacity var(--t-move) ease;
}
.scrim.on { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; left: 50%; top: 50%; z-index: 81;
  width: 880px; max-width: 94vw; height: 640px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translate(-50%, -50%) scale(.94) translateY(10px); opacity: 0; pointer-events: none;
  border-radius: var(--r-modal); background: var(--surface-raised);
  border: 1px solid var(--line-card); box-shadow: var(--sh-modal);
  transition: transform .3s var(--ease-out-soft), opacity .22s ease;
}
.modal.on { transform: translate(-50%, -50%) scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.modal, .modal .sy { overscroll-behavior: contain; }
.sy { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sy::-webkit-scrollbar { display: none; width: 0; }
/* Вкладки рельса міняються підміною, а не ривком: старий вміст гасне,
   новий проступає — той самий рух, що й скрізь у застосунку. */
.modal .sy { transition: opacity .16s ease; }
.modal .sy.swap-out { opacity: 0; }
.modal .sy { animation: mat-pane-in .24s var(--ease-out-soft) both; }
@keyframes mat-pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.modal .btn-x { width: 34px; height: 34px; border-color: var(--line-card); }
.mhead {
  display: flex; align-items: center; gap: 15px; padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.mhead-ico {
  width: 46px; height: 46px; border-radius: 14px; background: var(--ivory-200);
  color: var(--ink-soft); display: grid; place-items: center; flex: 0 0 auto;
}
.mhead-hex {
  width: 46px; height: 46px; border-radius: var(--r-round);
  box-shadow: inset 0 0 0 1px rgba(43, 35, 29, .14); flex: 0 0 auto;
}
.mhead-name {
  font: 600 24px/1.15 var(--font-display); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rail {
  flex: 0 0 236px; border-right: 1px solid var(--line-soft); background: var(--kpi-bg);
  padding: 12px; display: flex; flex-direction: column; gap: 3px;
}
.rtab {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: none; border-radius: 12px; background: transparent;
  cursor: pointer; text-align: left; transition: background var(--t-fast) ease;
}
.rtab:hover { background: var(--ivory-200); }
.rtab.on { background: var(--surface); box-shadow: 0 1px 3px rgba(58, 44, 32, .1); }
.rtab-ic {
  width: 28px; height: 28px; border-radius: 9px; background: var(--ivory-200);
  color: var(--ink-soft); display: grid; place-items: center; flex: 0 0 auto;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.rtab.on .rtab-ic { background: var(--ink); color: #F7F1EA; }
.rtab-t { display: block; font: 400 13px var(--font-sans); color: var(--ink); }
.rtab.on .rtab-t { font-weight: 500; }
.rtab-h {
  display: block; font: 400 11px var(--font-sans); color: var(--ink-faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fl { display: block; font: 400 11.5px var(--font-sans); color: var(--ink-faint); margin-bottom: 6px; }
.fh { display: block; font: 400 11px var(--font-sans); color: var(--ink-placeholder); margin-top: 5px; }
.sec-t { font: 500 15px var(--font-sans); color: var(--ink); }
.sec-h { font: 400 12px var(--font-sans); color: var(--ink-faint); margin-top: 5px; margin-bottom: 18px; }
.stat { padding: 14px 16px 15px; border-radius: var(--r-input); background: var(--kpi-bg); }

/* ─────────── Дропдауни ─────────── */
/* Не .dd: у orders-v2.css так називається сама панель списку — абсолютна
   й з opacity:0. Обгортка з таким класом ставала невидимою разом із
   кнопкою всередині. */
.mdd { position: relative; }
.ddbtn {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px;
  border: 1px solid var(--line-input); border-radius: var(--r-input);
  background: var(--surface-input); cursor: pointer;
  display: flex; align-items: center; gap: 10px; text-align: left;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease;
}
.ddbtn:hover { border-color: var(--line-hover); background: #fff; }
.ddbtn.on { border-color: var(--line-focus); background: #fff; box-shadow: 0 0 0 3px var(--focus-ring); }
.ddlist {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  border-radius: 14px; background: var(--surface-raised); border: 1px solid var(--line-card);
  box-shadow: 0 3px 8px rgba(58, 44, 32, .06), 0 22px 44px -22px rgba(58, 44, 32, .5);
  transform-origin: top center; transform: scale(.96) translateY(-6px); opacity: 0; pointer-events: none;
  max-height: 230px; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 2px; padding: 7px;
  transition: transform .24s var(--ease-out-soft), opacity .16s ease;
}
.ddlist::-webkit-scrollbar { display: none; }
.ddlist.on { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.ddopt {
  width: 100%; box-sizing: border-box; min-height: 38px; padding: 0 11px; border: none;
  border-radius: 10px; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 10px; text-align: left;
  transition: background var(--t-fast) ease;
}
.ddopt:hover { background: var(--ivory-100) !important; }
.ddopt-t { flex: 1; font: 400 13px var(--font-sans); color: var(--ink); }
.ddopt.on .ddopt-t { font-weight: 500; }
.icobtn {
  width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line-input);
  background: var(--surface-input); color: var(--ink-soft); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.icobtn:hover { border-color: var(--line-hover); background: #fff; color: var(--ink); }
.icobtn.on { border-color: var(--ink); background: var(--ink); color: #F7F1EA; }
.icobtn.sm { width: 38px; height: 38px; border-radius: var(--r-input); }

/* ─────────── Свій колірний пікер ─────────── */
.swatch {
  width: 26px; height: 26px; border-radius: var(--r-round); border: none; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(43, 35, 29, .14); transition: transform .14s var(--ease-pill);
}
.swatch:hover { transform: scale(1.12); }
.swatch.on { box-shadow: inset 0 0 0 1px rgba(43, 35, 29, .14), 0 0 0 3px var(--focus-ring); }
.pick-area {
  position: relative; height: 96px; border-radius: var(--r-input); cursor: crosshair;
  touch-action: none; box-shadow: inset 0 0 0 1px rgba(43, 35, 29, .12);
}
.pick-hue {
  position: relative; height: 12px; border-radius: var(--r-round); cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  box-shadow: inset 0 0 0 1px rgba(43, 35, 29, .12);
}
.pick-dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--r-round);
  border: 2px solid #FFFDFB; box-shadow: 0 1px 4px rgba(43, 35, 29, .45); pointer-events: none;
}
.pick-hue .pick-dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; top: 50%; }
.pick-hex {
  flex: 1; min-width: 0; font: 400 12.5px var(--font-sans); color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums; text-transform: uppercase;
}

/* ─────────── Рух ─────────── */
.mvrow {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line-soft);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.mvrow:hover { border-color: var(--line-hover); background: var(--surface-raised); }
.mv-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.mv-what {
  display: block; font: 400 13.5px var(--font-sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv-who { display: block; font: 400 11.5px var(--font-sans); color: var(--ink-faint); margin-top: 3px; }
.mv-qty { font: 500 17px var(--font-display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
/* Одиниця виміру поруч із числом: тихіша й менша, щоб не сперечалась із
   самою цифрою, але й не змушувала гадати, у чому вимір. */
.mv-u {
  font: 400 11px var(--font-sans);
  color: var(--ink-faint);
  margin-left: 3px;
  letter-spacing: .01em;
}
/* Список руху й поява нових рядків.

   Нова транзакція не «вискакує», а проступає зверху: трохи вище й
   прозора — і на місце. Сусіди в цей час з'їжджають донизу власним
   переїздом (див. patchMoves), тож стрибків немає. */
.mv-list { display: flex; flex-direction: column; gap: 16px; }
.mv-new { animation: mv-in .38s cubic-bezier(.2,.7,.2,1) both; }
/* Знята транзакція: вгору й у нуль. Висоту теж стягуємо, щоб сусіди
   рушили слідом, а не чекали, поки місце звільниться стрибком. */
.mv-out {
  animation: mv-out .26s cubic-bezier(.4,0,.7,.2) both;
  pointer-events: none;
}
@keyframes mv-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-12px); }
}
@keyframes mv-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.mv-date {
  font: 400 10.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}

/* Реквізити міняються рядком, а не стрибком: рух і прозорість. */
@keyframes fadeSwap { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.reqrow { display: flex; align-items: center; gap: 8px; animation: fadeSwap .26s var(--ease-out-soft) both; }
.reqrow .in { flex: 1; min-width: 0; }

/* Рядок із номером — кнопка на всю ширину: іконка, номер, стан. */
.req-copy {
  flex: 1; min-width: 0; height: 38px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border: 1px solid var(--line-input); border-radius: var(--r-input);
  background: var(--surface-input); color: var(--ink); cursor: pointer; text-align: left;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.req-copy:hover { background: #fff; border-color: var(--line-hover); }
.req-ic { display: grid; place-items: center; flex: 0 0 auto; color: var(--ink-faint); }
.req-num {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 13px var(--font-sans); color: var(--ink);
}
.req-state {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font: 400 11.5px var(--font-sans); color: var(--ink-faint);
}
.req-state.ok { color: #566A5B; }

/* Квадратні кнопки поруч: галочка й олівець стоять рівно посередині. */
.req-btn {
  width: 38px; height: 38px; flex: 0 0 auto; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-input); border-radius: var(--r-input);
  background: var(--surface-input); color: var(--ink-soft); cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.req-btn:hover { background: var(--ivory-100); border-color: var(--line-hover); color: var(--ink); }
.req-btn.ok { color: #566A5B; }
.req-btn.ok:hover { background: #EAF1E9; border-color: #CFDECD; color: #3E5545; }

/* ─────────── Видалення ─────────── */
.btn-danger {
  height: 38px; padding: 0 16px; border: none; border-radius: var(--r-input);
  background: var(--danger); color: #FFF9F8; font: 500 13px var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter .16s ease, transform .12s ease;
}
.btn-danger:hover { filter: brightness(.94); }
.btn-danger:active { transform: scale(.98); }
.delpop {
  position: absolute; left: 16px; bottom: calc(100% - 6px); z-index: 20; width: 322px;
  padding: 16px 17px 15px; border-radius: 18px; background: var(--surface-raised);
  border: 1px solid var(--line-card);
  box-shadow: 0 3px 8px rgba(58, 44, 32, .06), 0 28px 56px -28px rgba(58, 44, 32, .55);
  transform-origin: bottom left; transform: scale(.94) translateY(8px); opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .18s ease;
}
.delpop.on { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.mfoot {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px 16px;
  border-top: 1px solid var(--line-soft); background: var(--surface); flex: 0 0 auto; position: relative;
}

/* ─────────── Кошик заявки ─────────── */
.cartbar {
  position: fixed; left: 50%; bottom: 26px; z-index: 60; display: flex; flex-direction: column;
  padding: 10px 12px 10px 20px; border-radius: 24px; background: var(--ink); color: #F7F1EA;
  box-shadow: 0 18px 44px -18px rgba(43, 35, 29, .85);
  transform: translateX(-50%) translateY(16px) scale(.96); opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
}
.cartbar.on { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.cartlist {
  display: grid; grid-template-rows: 0fr; opacity: 0; width: 520px;
  transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1), opacity .24s ease;
}
.cartlist.on { grid-template-rows: 1fr; opacity: 1; }
.cartlist > div { overflow: hidden; min-height: 0; }
.cart-k {
  font: 400 10px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: #B9A78F;
}
.cart-line { flex: 1; height: 1px; background: rgba(247, 241, 234, .14); }
.cart-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid rgba(247, 241, 234, .09);
}
.cin {
  height: 30px; box-sizing: border-box; padding: 0 9px; border: 1px solid rgba(247, 241, 234, .16);
  border-radius: 9px; background: rgba(247, 241, 234, .06); color: #F7F1EA;
  font: 400 12.5px var(--font-sans); outline: none;
  font-variant-numeric: lining-nums tabular-nums; text-align: right; flex: 0 0 auto;
  transition: border-color .16s ease, background .16s ease;
}
.cin:focus { border-color: rgba(247, 241, 234, .4); background: rgba(247, 241, 234, .1); }
.cx {
  width: 26px; height: 26px; border: none; border-radius: var(--r-round);
  background: rgba(247, 241, 234, .08); color: #B9A78F; display: grid; place-items: center;
  cursor: pointer; flex: 0 0 auto; transition: background .16s ease, color .16s ease;
}
.cx:hover { background: rgba(247, 241, 234, .16); color: #F7F1EA; }
.cartbar .x {
  width: 34px; height: 34px; border: none; border-radius: var(--r-round);
  background: rgba(247, 241, 234, .14); color: #E8DCCB; display: grid; place-items: center;
  cursor: pointer; flex: 0 0 auto; transition: background .16s ease;
}
.cartbar .x:hover { background: rgba(247, 241, 234, .22); }
.cartbar .go {
  height: 34px; padding: 0 16px; border: none; border-radius: var(--r-round);
  background: #F7F1EA; color: var(--ink); font: 500 12.5px var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: filter .16s ease, transform .12s ease;
}
.cartbar .go:hover { filter: brightness(.95); }
.cartbar .go:active { transform: scale(.98); }
.cart-title { font: 500 13px var(--font-sans); color: #F7F1EA; white-space: nowrap; }
.cart-sub {
  font: 400 11.5px var(--font-sans); color: #B9A78F; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.cart-arrow { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.cart-arrow.up { transform: rotate(180deg); }

@keyframes mat-spin { to { transform: rotate(360deg); } }
.spin { animation: mat-spin .85s linear infinite; }

/* ─────────── Числа акцентним шрифтом ───────────
   Скорочений запис font: … скидає font-variant-numeric, а інлайновий стиль
   переважає будь-який клас. Тому великі числа мають власні класи, де
   властивість стоїть ПІСЛЯ шрифту — інакше Cormorant малює старостильні
   цифри з хвостами, і одиниця виглядає як римська. */
.m-big {
  font: 400 26px/1 var(--font-display); letter-spacing: -.015em; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
}
.m-total {
  font: 500 19px/1 var(--font-display); color: #F7F1EA;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
}
.mat-name, .stock-n, .foot-price, .mv-qty, .kpi-n {
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Позначка вибраного стоїть у розмітці завжди — показуємо її класом.
   Так вибір у списку не потребує перезбирання вікна. */
.ddopt-check { display: inline-flex; align-items: center; color: #6E5343; opacity: 0; transition: opacity .16s ease; }
.ddopt.on .ddopt-check { opacity: 1; }

/* Поповер заливки історії — той самий вигляд, що й поповнення залишку,
   тільки ширший: тут є що пояснити. */
#btnBackfill { position: relative; }
.bfpop {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 60; width: 300px;
  padding: 14px 15px 13px; border-radius: 18px;
  background: var(--surface-raised); border: 1px solid var(--line-card);
  box-shadow: 0 3px 8px rgba(58, 44, 32, .06), 0 28px 56px -28px rgba(58, 44, 32, .55);
  transform-origin: bottom right; transform: scale(.94) translateY(8px); opacity: 0;
  pointer-events: none; text-align: left;
  transition: transform .26s cubic-bezier(.16, 1, .3, 1), opacity .18s ease;
}
.bfpop.on { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.bfpop-note {
  font: 400 12px/1.55 var(--font-sans); color: var(--ink-soft); margin: 10px 0 0;
}
.bfpop-note b { font-weight: 500; color: var(--ink); }

/* ─────────── Історія: цикли ───────────
   Стрічка «від закупки до закупки». Заголовок каже, про що цикл і чим він
   скінчився; деталі — усередині. Кольори тут не прикраса: прихід зелений
   (товар з'явився), витрата вохряна (пішов у роботу), звірка глиняна й
   окрема — вона не рух, а вимір. */
.cyc {
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: var(--surface); margin-bottom: 10px; overflow: hidden;
}
.cyc-h {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; user-select: none;
}
.cyc-h:hover { background: var(--surface-raised); }
.cyc-chev, .cp-chev {
  flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-faint);
  transition: transform .3s var(--ease-out-soft);
}
.cyc.open > .cyc-h .cyc-chev, .cp.open > .cp-h .cp-chev { transform: rotate(180deg); }
.cyc-t { font: 500 13.5px var(--font-sans); color: var(--ink); }
.cyc-buy { font: 400 13px var(--font-display); color: #566A5B; }
.cyc-plan { font: 400 12.5px var(--font-sans); color: var(--ink-soft); }
.cyc-diff { font: 400 12.5px var(--font-sans); color: var(--ink-soft); }
.cyc-diff.minus { color: #8A6252; }
.cyc-diff.plus { color: #566A5B; }
.cyc-blind { font: 400 12px var(--font-sans); color: #9A7B4F; }

.cyc-wrap, .cp-wrap {
  height: 0; overflow: hidden; opacity: 0;
  transition: height .34s var(--ease-out-soft), opacity .24s ease;
}
.cyc.open > .cyc-wrap, .cp.open > .cp-wrap { opacity: 1; }
.cyc-in { padding: 0 14px 12px 32px; }
.cp-in { padding: 2px 0 8px 22px; }

.cp { border-top: 1px solid var(--line-soft); }
.cp:first-child { border-top: 0; }
.cp-h { display: flex; align-items: center; gap: 9px; padding: 9px 0; cursor: pointer; user-select: none; }
.cp-n { font: 400 13px var(--font-sans); color: var(--ink); }
.cp-c {
  font: 400 11px var(--font-sans); color: var(--ink-faint);
  background: var(--ivory-300); padding: 1px 7px; border-radius: var(--r-pill);
}
.cp-q { font: 400 13px var(--font-display); color: #8A6252; }
.cp-row {
  display: flex; align-items: center; gap: 12px; padding: 5px 0;
  font: 400 12.5px var(--font-sans); color: var(--ink-soft);
}
.cp-row > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-row i { font-style: normal; color: var(--ink-faint); }
.cp-who { font: 400 11.5px var(--font-sans); color: var(--ink-faint); }
.cp-v { font: 400 12.5px var(--font-display); color: var(--ink-soft); }

.cyc-check { display: flex; align-items: center; gap: 10px; padding: 9px 0 11px; }
.cyc-cl { flex: 0 0 16px; height: 1px; background: var(--line-soft); }
.cyc-cn {
  font: 400 11.5px var(--font-sans); color: #9A7B4F;
  background: rgba(154, 123, 79, .09); padding: 3px 9px; border-radius: var(--r-pill);
}
.cyc-cw { flex: 1; text-align: right; font: 400 11px var(--font-sans); color: var(--ink-faint); }
.cyc-empty { font: 400 12.5px var(--font-sans); color: var(--ink-faint); padding: 4px 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .cyc-wrap, .cp-wrap, .cyc-chev, .cp-chev { transition: none; }
}

/* Ціна, що випливає із закупу. Показуємо лише тоді, коли вона інша, ніж
   на складі: підказка, яку видно завжди, за тиждень перестає читатись. */
.cart-fix {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 9px 20px; margin-top: -3px;
}
.cfix-t {
  flex: 1; min-width: 0; font: 400 11.5px var(--font-sans); color: #C9A227;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── Матеріал у дорозі (заявка оплачена, ще не прийнята) ───
   Чип на картці + кнопка приймання на місці плюсика. */
/* Висота — рівно як у круглої кнопки поруч (26px): плашка й галочка
   стоять по одній лінії. */
.mat-deliv {
  flex: 0 0 auto; height: 26px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center;
  background: #F5E4DA; color: #9C6A47;
  font: 500 10.5px var(--font-sans); white-space: nowrap;
}
/* «Заявку подано» — тихий чип: заявка є, чекає оплати. */
.mat-deliv.mat-sub { background: var(--ivory-100); color: var(--ink-faint); }
/* Кнопка «Прийняти» на картці — зелена капсула тієї ж висоти (26px). */
.mat-accept {
  flex: 0 0 auto; height: 26px; padding: 0 12px; border-radius: 999px;
  /* Флекс із центруванням: текст стоїть рівно по центру капсули,
     а не з'їжджає від кнопкових типографських відступів. */
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #CFE2CC; background: #E4EFE2; color: #47694E;
  font: 500 11px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.mat-accept:hover { background: #D8E8D5; border-color: #BCD6B8; color: #3A5C41; }

/* Листи фанери в коригуванні: рядок на кожен розмір, підпис ліворуч. */
.toppop-sheet { margin-top: 6px; }
.toppop-sheet:first-of-type { margin-top: 0; }
.toppop-sz { font: 400 12px var(--font-sans); color: var(--ink-soft); flex: 0 0 92px; white-space: nowrap; }
.toppop-sheet input { text-align: right; }

/* ─── Листовий облік (фанера 6мм): сегментована смуга і межі по розмірах ─── */
.bar-seg { display: flex; gap: 2px; }
.bar-seg span { position: static; display: block; height: 100%; border-radius: 99px; min-width: 4px; }
.seg-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; }
.seg-legend span { display: inline-flex; align-items: center; gap: 5px; font: 400 10.5px var(--font-sans); color: var(--ink-faint); white-space: nowrap; }
.seg-legend i { width: 7px; height: 7px; border-radius: 99px; flex: 0 0 auto; }
.seg-legend b { font-weight: 500; color: var(--ink-soft); }

.shl { margin-top: 4px; border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px 16px; background: var(--ivory-50, #FDFAF5); }
.shl-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.shl-head > span:first-child { font: 500 12.5px var(--font-sans); color: var(--ink); }
.shl-hint { font: 400 11px var(--font-sans); color: var(--ink-faint); }
.shl-grid { display: grid; grid-template-columns: 96px 1fr 1fr 1fr 1fr; gap: 8px; align-items: center; margin-top: 8px; }
.shl-cols { margin-top: 0; }
.shl-cols span { font: 400 10.5px var(--font-sans); color: var(--ink-faint); }
.shl-sz { font: 500 12px var(--font-sans); color: var(--ink-soft); white-space: nowrap; }
.shl-grid .in { height: 34px; padding: 0 10px; text-align: right; }

/* Листовий матеріал на картці: рядок на кожен розмір листа. */
.shr-list { display: flex; gap: 10px; }
.shr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.shr-l { font: 400 10px var(--font-sans); color: var(--ink-faint); white-space: nowrap; }
.shr-bar { flex: 1; min-width: 0; height: 4px; }
.shr-n { font: 500 10.5px var(--font-sans); white-space: nowrap; }