/* ============================================================
   TABLE — таблиця даних (вибір рядків, статуси, hover)
   Обгортка .table-wrap дає горизонт. скрол без стрибків (Rule R7)
   ============================================================ */
.table-card{
  background:var(--bg-surface);
  border:1px solid var(--stroke);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;   /* для спінера завантаження */
}
/* Смужка прогресу по верхньому краю САМОЇ таблиці — основний індикатор.
   Нічого не притемнює й не рухає, тому не мерехтить навіть на миттєвих вкладках. */
.table-bar{ position:absolute; left:0; right:0; top:0; height:3px; z-index:3; pointer-events:none; display:none; }
.table-card.is-busy > .table-bar,
.o2-board.is-busy > .table-bar{ display:block; }   /* дошки (Посилки, Замовлення 2.0) — той самий індикатор */
.o2-board{ position:relative; }
.table-bar::after{
  content:""; position:absolute; top:0; height:100%; width:38%; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  animation:tbl-bar .9s linear infinite;
}
@keyframes tbl-bar{ from{ left:-38%; } to{ left:100%; } }

/* Притемнення й кружок — ЛИШЕ на довге очікування (понад 350 мс), тобто на справжнє
   завантаження з сервера. На перемальовування вкладки їх не буває. */
.table-card.is-loading{ pointer-events:none; }
.table-card.is-loading .table-wrap{ opacity:.5; transition:opacity 160ms var(--ease); }
/* Кружок ставить app.js у центр ВИДИМОЇ частини таблиці (left/top рахуються на льоту):
   список на 100 рядків вищий за екран, тож ані центр картки, ані центр вікна не годяться. */
.table-spin{
  position:fixed; width:34px; height:34px; transform:translate(-50%, -50%); z-index:60;
  border:3px solid var(--stroke); border-top-color:var(--primary); border-radius:50%;
  box-shadow:0 0 0 6px var(--bg), var(--shadow-sm);
  animation:tbl-spin .6s linear infinite;
  opacity:0; visibility:hidden; transition:opacity 160ms var(--ease); pointer-events:none;
}
.table-spin.is-on{ opacity:1; visibility:visible; transition:none; }
/* обертання МУСИТЬ нести й зсув: інакше анімація перебиває transform і кружок
   зʼїжджає на пів свого розміру повз точку, яку порахував app.js */
@keyframes tbl-spin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
/* Горизонтальний скрол лишаємо (вузькі екрани), вертикального НЕМАЄ —
   весь список показується повністю, сторінка скролиться сама (Rule fix №1) */
.table-wrap{ width:100%; overflow-x:auto; overflow-y:hidden; }
/* drag-to-scroll (dragscroll.js): grab-курсор коли таблиця ширша за екран */
.table-wrap.is-grabbable{ cursor:grab; }
.table-wrap.is-grabbing{ cursor:grabbing; user-select:none; }
.table-wrap.is-grabbing *{ cursor:grabbing !important; }

.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--text-base); }
.table th,.table td{ text-align:left; white-space:nowrap; }

.table thead th{
  background:var(--bg-subtle);
  color:var(--text-sub); font-weight:var(--fw-medium); font-size:var(--text-sm);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--stroke);
}
.table thead th .with-icon{ color:var(--text-soft); }

.table tbody td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--stroke-soft);
  color:var(--text-main); vertical-align:middle;
}
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr{ transition:background var(--dur-fast) var(--ease); }
.table tbody tr:hover{ background:var(--bg-subtle); }

/* Підсумковий рядок (tfoot) — раніше без стилів (padding/рамки), звідси «злиплі» Разом */
.table tfoot td{
  padding:var(--space-3) var(--space-4);
  background:var(--bg-subtle);
  border-top:2px solid var(--stroke);
  color:var(--text-strong); font-weight:var(--fw-semibold);
}
.table tfoot tr:not(:last-child) td{ border-bottom:1px solid var(--stroke-soft); }

/* Виділений рядок (вибраний) */
.table tbody tr.is-selected{ background:var(--primary-50); }
.table tbody tr.is-selected:hover{ background:var(--primary-100); }
.table tbody tr.is-selected td:first-child{ box-shadow:inset 3px 0 0 var(--primary); }

/* Колонки-хелпери */
.col-check{ width:44px; padding-left:var(--space-4) !important; }
.col-num{ text-align:right; }
.cell-strong{ color:var(--text-strong); font-weight:var(--fw-medium); }
.table-empty{ text-align:center; color:var(--text-soft); padding:var(--space-8) var(--space-4) !important; white-space:normal; }

/* Опційні колонки — приховані, показуються кнопкою «Додати колонку» */
.table .col-opt{ display:none; }
.table.show-sku .col-sku,
.table.show-res .col-res,
.table.show-free .col-free,
.table.show-sync .col-sync{ display:table-cell; }
.cell-muted{ color:var(--text-soft); }

.product-cell{ display:flex; align-items:center; gap:var(--space-3); }
.product-thumb{
  width:32px;height:32px;flex:0 0 auto;border-radius:var(--radius-md);
  background:#fff; border:1px solid var(--stroke-soft); overflow:hidden;
  display:grid; place-items:center; color:var(--text-soft);
}
.product-thumb .icon{ width:var(--icon-md); height:var(--icon-md); }
.product-thumb img{ width:100%; height:100%; object-fit:contain; }

/* Рейтинг */
.rating{ display:inline-flex; align-items:center; gap:var(--space-1); color:var(--warning-base); }
.rating .icon{ width:14px; height:14px; fill:currentColor; }
.rating span{ color:var(--text-main); font-weight:var(--fw-medium); }

/* Кнопка «+ Add Column» / службовий рядок */
.table-foot{
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--stroke-soft);
  color:var(--text-sub); font-size:var(--text-sm);
}
.table-foot .add-col{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--text-sub); padding:var(--space-1) var(--space-2); border-radius:var(--radius-md); }
.table-foot .add-col:hover{ background:var(--bg-hover); color:var(--text-main); }

/* ---------- Checkbox ---------- */
.checkbox{ position:relative; display:inline-flex; width:18px; height:18px; flex:0 0 auto; }
.checkbox input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.checkbox .box{
  width:18px; height:18px; border-radius:var(--radius-sm);
  border:1.5px solid var(--stroke-strong); background:var(--bg-surface);
  display:grid; place-items:center;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast);
}
.checkbox .box .icon{ width:13px; height:13px; color:#fff; opacity:0; transform:scale(.6); transition:opacity var(--dur-fast),transform var(--dur-fast); }
.checkbox input:checked + .box{ background:var(--primary); border-color:var(--primary); }
.checkbox input:checked + .box .icon{ opacity:1; transform:scale(1); }
.checkbox input:indeterminate + .box{ background:var(--primary); border-color:var(--primary); }
.checkbox input:focus-visible + .box{ box-shadow:var(--ring-focus); }

/* ---------- Bulk action bar (плаваюча) ----------
   position:fixed → НЕ резервує місце, коли прихована (Rule fix №5).
   Стоїть по центру над футером. */
.bulkbar{
  position:fixed; left:0; right:0; z-index:var(--z-sticky);
  bottom:var(--space-6);
  margin-inline:auto; width:max-content; max-width:calc(100% - var(--space-8));
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background:var(--bg-surface); border:1px solid var(--stroke);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-md);   /* мʼякша тінь (Rule fix №5) */
  transform:translateY(8px); opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bulkbar.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.bulkbar__count{ font-size:var(--text-sm); color:var(--text-sub); font-weight:var(--fw-medium); white-space:nowrap; }
.bulkbar__count b{ color:var(--text-strong); }
.bulkbar .toolbar__divider{ height:20px; }

/* На ТЕЛЕФОНІ менше пунктів: інлайн-дії ховаємо, лишаємо «…» з дропдауном (Rule fix №6) */
@media (max-width:640px){
  .bulkbar{ bottom:var(--space-4); }
  .bulkbar__action{ display:none; }            /* інлайн-кнопки → у меню «…» */
}
@media (min-width:641px){
  .bulkbar__more-item{ display:none; }          /* дублікати лишаються тільки для мобільного меню */
}

/* ---------- Pagination ---------- */
.pagination{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.pagination__pages{ display:flex; align-items:center; gap:var(--space-1); }
.page-btn{
  min-width:32px; height:32px; padding:0 var(--space-2);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); color:var(--text-sub); font-size:var(--text-sm); font-weight:var(--fw-medium);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast);
}
.page-btn:hover{ background:var(--bg-hover); color:var(--text-main); }
.page-btn.is-active{ background:var(--primary); color:#fff; }
.page-btn:disabled{ opacity:.4; pointer-events:none; }
.page-ellipsis{ color:var(--text-soft); padding-inline:var(--space-1); }

@media (max-width:640px){
  .pagination{ justify-content:center; }
  /* «Показувати по N» і сторінки — стовпчиком по центру */
  .pagebar{ flex-direction:column; align-items:center; gap:var(--space-3); }
}

/* Сортовані заголовки (глобально — Замовлення/Документи продажу/Звіти-Склад) */
.table th.ord-sort{ cursor:pointer; user-select:none; white-space:nowrap; }
.table th.ord-sort:hover{ color:var(--text-strong); }
.table th.ord-sort.is-sorted{ color:var(--primary); }
.osort-ic{ width:13px; height:13px; vertical-align:-2px; opacity:.55; }
.table th.ord-sort.is-sorted .osort-ic{ opacity:1; }
/* Підвал таблиці: к-сть на сторінку + пагінація */
.table-card .table-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); flex-wrap:wrap; }
.table-card .table-foot .pagesize{ display:flex; align-items:center; gap:var(--space-2); }
/* стат-блок у 3 колонки */
.stats.stats--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:720px){ .stats.stats--3{ grid-template-columns:1fr; } }

/* ============================================================
   TABLEFIT — таблиця по ширині екрана (без бокового скролу) + тягнучі колонки (tablefit.js)
   table-layout:fixed бере ширини з <colgroup>, тому сума колонок = ширині контейнера.
   ============================================================ */
.table.tw-fit{ table-layout:fixed; width:100%; }
.table.tw-fit th, .table.tw-fit td{
  box-sizing:border-box;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* дворядкові клітинки (значення + підпис) теж обрізаємо трикрапкою */
.table.tw-fit td > div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.table.tw-fit td > .product-cell{ overflow:hidden; }
.table.tw-fit td > .product-cell > span,
.table.tw-fit td > .product-cell > div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* порожній стан на всю ширину — без обрізання */
.table.tw-fit td.table-empty{ white-space:normal; overflow:visible; text-overflow:clip; }
/* СЛУЖБОВІ клітинки (галочки, кнопки дій, поля вводу) — БЕЗ трикрапки: там не текст,
   а «…» біля чекбокса чи кнопок виглядає як сміття. Обрізаємо мовчки. */
.table.tw-fit td.col-act, .table.tw-fit th.col-act,
.table.tw-fit td.col-check, .table.tw-fit th.col-check,
.table.tw-fit td:has(button), .table.tw-fit th:has(button),
.table.tw-fit td:has(a.btn), .table.tw-fit td:has(input), .table.tw-fit th:has(input),
.table.tw-fit td:has(select), .table.tw-fit td:has(.icon-btn){ text-overflow:clip; }
/* колонка галочок: приберемо зайвий правий відступ, щоб чекбокс не впирався в межу */
.table.tw-fit .col-check{ padding-right:var(--space-1) !important; }

/* Межі колонок у ШАПЦІ — щоб було видно, де саме тягнути (як у 1С / Провіднику Windows).
   inset-тінь, а не border — не змінює розрахунок ширин колонок. */
.table.tw-fit thead th{ position:relative; }
.table.tw-fit thead th:not(:last-child){ box-shadow:inset -1px 0 0 var(--stroke); }
.table.tw-fit thead th:has(> .tw-grip:hover){ box-shadow:inset -2px 0 0 var(--primary); }

/* Ручка зміни ширини — у правому краю заголовка (як у Провіднику Windows / 1С) */
.tw-grip{
  position:absolute; top:0; right:0; width:10px; height:100%;
  cursor:col-resize; touch-action:none; z-index:1;
  background:transparent;
}
.tw-grip::after{
  content:""; position:absolute; top:16%; bottom:16%; right:0; width:2px; border-radius:2px;
  background:transparent; transition:background var(--dur-fast) var(--ease);
}
.tw-grip:hover::after{ background:var(--primary); }
/* під час перетягування — курсор і без випадкового виділення тексту */
body.tw-resizing, body.tw-resizing *{ cursor:col-resize !important; user-select:none !important; }
body.tw-resizing .tw-grip::after{ background:var(--primary); }

/* Телефон/планшет: підгонку НЕ застосовуємо — лишається звичайний горизонтальний скрол,
   як було (запобіжник на випадок, якщо клас лишився після зміни розміру вікна). */
@media (max-width:1023px){
  .table.tw-fit{ table-layout:auto; }
  .table.tw-fit th, .table.tw-fit td{ overflow:visible; text-overflow:clip; }
  .table.tw-fit thead th:not(:last-child){ box-shadow:none; }
  .tw-grip{ display:none; }
}