/* ============================================================
   MISC — avatar, avatar-stack, tabs, alert, tooltip, divider, kbd
   ============================================================ */

/* ---------- Avatar ---------- */
.avatar{
  width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:var(--bg-active); color:var(--text-sub);
  font-size:var(--text-xs); font-weight:var(--fw-semibold);
  border:1.5px solid var(--bg-surface);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar--sm{ width:24px; height:24px; font-size:10px; }
.avatar--lg{ width:44px; height:44px; font-size:var(--text-base); }
.avatar--ring{ box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 3.5px var(--primary-200); }

.avatar-stack{ display:inline-flex; align-items:center; }
.avatar-stack .avatar{ margin-left:-8px; }
.avatar-stack .avatar:first-child{ margin-left:0; }
/* Аватарки як кнопка (відкривають список команди) */
.avatar-stack--btn{ cursor:pointer; padding:3px; border-radius:var(--radius-pill); background:transparent; border:none; transition:background var(--dur-fast) var(--ease); }
.avatar-stack--btn:hover{ background:var(--bg-hover); }
.avatar-stack--btn .avatar:first-child{ margin-left:0; }
/* У шапці — менші, у тон до кнопки сповіщень */
.topbar .avatar-stack--btn .avatar,
.topbar .avatar-stack--btn .more{ width:26px; height:26px; font-size:10px; }
.topbar .avatar-stack--btn .avatar{ margin-left:-7px; }
.topbar .avatar-stack--btn .avatar:first-child{ margin-left:0; }
.avatar-stack .more{
  margin-left:-8px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg-inverse); color:#fff;
  font-size:var(--text-xs); font-weight:var(--fw-semibold); border:1.5px solid var(--bg-surface);
}

/* ---------- Tabs ---------- */
.tabs{ display:flex; align-items:center; gap:var(--space-5); border-bottom:1px solid var(--stroke); }
.tab{
  position:relative; padding:var(--space-3) 0; font-size:var(--text-base);
  color:var(--text-sub); font-weight:var(--fw-medium); cursor:pointer;
  transition:color var(--dur-fast) var(--ease);
}
.tab:hover{ color:var(--text-main); }
.tab.is-active{ color:var(--text-strong); font-weight:var(--fw-semibold); }
.tab.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--primary); border-radius:99px;
}

/* ---------- Alert ---------- */
.alert{
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg);
  font-size:var(--text-sm); line-height:var(--leading-snug);
}
.alert .icon{ width:var(--icon-md); height:var(--icon-md); margin-top:1px; flex:0 0 auto; }
.alert--warning{ background:var(--warning-tint); color:var(--warning-text); }
.alert--info{ background:var(--info-tint); color:var(--info-text); }
.alert--error{ background:var(--error-tint); color:var(--error-text); }
.alert--success{ background:var(--success-tint); color:var(--success-text); }

/* ---------- Checklist (tasks) ---------- */
.checklist{ display:flex; flex-direction:column; gap:var(--space-1); }
.check-row{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; }
.check-row__mark{
  width:18px; height:18px; flex:0 0 auto; border-radius:50%;
  border:1.5px solid var(--stroke-strong); display:grid; place-items:center; color:transparent;
}
.check-row.is-done .check-row__mark{ background:var(--success-base); border-color:var(--success-base); color:#fff; }
.check-row.is-done .check-row__mark .icon{ width:12px; height:12px; }
.check-row.is-done .check-row__text{ color:var(--text-soft); text-decoration:line-through; }
.check-row__text{ flex:1; min-width:0; font-size:var(--text-sm); color:var(--text-main); }

/* ---------- Tooltip (JS-позиціювання) — Rule R18 ----------
   Позицію/перенос рахує js/tooltip.js. Стрілка наводиться на центр кнопки. */
.tooltip{
  position:fixed; left:0; top:0; z-index:var(--z-toast);
  max-width:min(240px, calc(100vw - 16px));
  background:var(--neutral-900); color:#fff; font-size:var(--text-xs); line-height:1.3;
  padding:5px 8px; border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transform:translateY(-2px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast);
}
.tooltip.is-visible{ opacity:1; transform:translateY(0); }
/* трикутник: половина визирає (зміщений на саму підказку), вказує на кнопку */
.tooltip__arrow{
  position:absolute; width:8px; height:8px; background:var(--neutral-900);
  border-radius:2px; top:-3px; transform:translateX(-50%) rotate(45deg);
}
.tooltip--up .tooltip__arrow{ top:auto; bottom:-3px; }

/* ---------- TOAST / сповіщення (успіх / помилка) ---------- */
.toast-wrap{
  position:fixed; bottom:var(--space-5); right:var(--space-5); z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--space-2);
  pointer-events:none; max-width:calc(100vw - var(--space-8));
}
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:var(--space-3);
  min-width:300px; max-width:380px;
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background:var(--bg-surface); border:1px solid var(--stroke); border-left-width:3px;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateX(12px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-visible{ opacity:1; transform:translateX(0); }
.toast__icon{ flex:0 0 auto; align-self:center; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--bg-subtle); }
.toast__icon .icon{ width:18px; height:18px; }
.toast__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.toast__title{ font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.toast__text{ font-size:var(--text-xs); color:var(--text-soft); line-height:1.4; }
.toast__close{ flex:0 0 auto; color:var(--text-soft); padding:2px; border-radius:var(--radius-sm); }
.toast__close:hover{ background:var(--bg-hover); color:var(--text-main); }
.toast__close .icon{ width:15px; height:15px; }
.toast--success{ border-left-color:var(--success-base); }
.toast--success .toast__icon{ background:var(--success-tint); color:var(--success-base); }
.toast--error{ border-left-color:var(--error-base); }
.toast--error .toast__icon{ background:var(--error-tint); color:var(--error-base); }
.toast--info{ border-left-color:var(--primary); }
.toast--info .toast__icon{ background:var(--primary-50); color:var(--primary); }
@media (max-width:640px){
  .toast-wrap{ top:auto; bottom:var(--space-4); left:var(--space-3); right:var(--space-3); }
  .toast{ max-width:none; min-width:0; }
}

/* ---------- Divider ---------- */
.divider{ height:1px; background:var(--stroke-soft); width:100%; }
.divider--dashed{ background:none; border-top:1px dashed var(--stroke); }

/* ---------- Empty / file row ---------- */
.file-row{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3); border:1px solid var(--stroke); border-radius:var(--radius-lg);
}
.file-row__icon{
  width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--radius-md);
  background:var(--error-tint); color:var(--error-text); font-size:10px; font-weight:var(--fw-bold);
}
.file-row__meta{ min-width:0; line-height:1.3; display:flex; flex-direction:column; }
.file-row__name{ font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-main); }
.file-row__sub{ font-size:var(--text-xs); color:var(--text-soft); }

/* ---- Жовтий блок-підказка (.hint) — для пояснень/нотаток у модалках і на сторінках. Rule R31 ---- */
.hint{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); margin:0;
  background:var(--warning-tint); border:1px solid color-mix(in srgb, var(--warning-base) 30%, transparent);
  border-radius:var(--radius-lg);
}
/* Іконку в підказці не показуємо: блок і так пофарбований, а значок лише забирає місце
   в рядку. Ховаємо саме пряму дитину — іконки в кнопках усередині підказки лишаються.
   display:none прибирає і проміжок flex-gap, тож текст починається від краю. */
.hint > i[data-lucide], .hint > svg, .hint > .icon{ display:none; }
.hint p{ margin:0; font-size:var(--text-sm); color:var(--text-sub); line-height:1.5; }
/* Дії просто в підказці («дозаповнити» те, чого бракує) — на телефоні переносяться в стовпчик */
.hint p + p{ margin-top:var(--space-2); opacity:.85; }
.hint__acts{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.hint__acts .btn{ flex:0 0 auto; }

/* Позначка «лише для нас» під внутрішньою заміткою: тим самим жовтим, що й підказки,
   іконка дрібніша й сидить у рядку з текстом (не збиває базову лінію). */
.note-private{ margin-top:var(--space-2); align-items:center; gap:var(--space-2); }
.note-private__t{
  display:inline-flex; align-items:center; gap:var(--space-1);
  font-size:var(--text-xs); line-height:1.4; color:var(--warning-text);
}
.note-private__t > svg, .note-private__t > i[data-lucide]{ width:14px; height:14px; flex:0 0 auto; }

/* ---- Picker (бічний вибір) — сірий фон body + білий список-картка з роздільниками (як нативні списки) ---- */
#picker .modal__header{ align-items:center; padding:var(--space-3) var(--space-4); }   /* компактна шапка; стрілка/X по центру з текстом */
#picker .modal__body{ padding:var(--space-4); background:var(--bg-page); }   /* padding-top ≠ 0 → focus-ring пошуку не обрізається */
#picker .picker-back .icon{ width:20px; height:20px; }
#picker .search{ height:46px; flex:0 0 auto; }                       /* НЕ стискати пошук, коли список довгий */
#picker .picker-list{ flex:0 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; }  /* висота по контенту; скрол лише коли список довгий (не розтягувати на всю висоту) */
#picker .picker-list::-webkit-scrollbar{ width:0; height:0; }

/* ---- Picker: режим впорядкування (плавний drag + ★закріплення) ---- */
[data-picker-arrange]{ flex:0 0 auto; }
[data-picker-arrange].is-active{ color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); }
.picker-hint{ display:flex; align-items:flex-start; gap:var(--space-2); padding:var(--space-2) var(--space-3); margin-bottom:var(--space-2);
  background:var(--warning-tint); border-radius:var(--radius-md); font-size:var(--text-sm); color:var(--text-sub); }
.picker-hint > .icon{ flex:0 0 auto; width:16px; height:16px; color:var(--warning-text); margin-top:2px; }
/* у режимі впорядкування .picker-list — НЕ картка і НЕ flex (інакше блоки зжимаються), а звичайний скрол-контейнер */
.picker-list.picker-list--arrange{ display:block; background:transparent; box-shadow:none; border-radius:0; overflow-y:auto; }
.picker-arr__title{ display:flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-soft); padding:0 var(--space-1) var(--space-2); }
.picker-arr__title:not(:first-child){ padding-top:var(--space-2); }
.picker-arr__title--pin{ color:var(--warning-text); }
.picker-arr__title .icon{ width:14px; height:14px; }
.picker-arr__block{ background:var(--bg-surface); border:1px solid var(--stroke-soft); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-4); }
.picker-arr__block--pin{ border-color:color-mix(in srgb, var(--warning-base) 45%, transparent); }
.picker-arr{ display:flex; flex-direction:column; align-items:stretch; gap:var(--space-2); width:100%; padding:var(--space-2) var(--space-3);
  background:transparent; border-bottom:1px solid var(--stroke-soft); will-change:transform; }
.picker-arr:last-child{ border-bottom:0; }
.picker-arr__main{ display:flex; align-items:center; gap:var(--space-2); width:100%; min-width:0; }
.picker-arr--pin{ background:var(--warning-tint); border-bottom-color:color-mix(in srgb, var(--warning-base) 22%, transparent); }
.picker-arr--ghost{ border:0; border-radius:var(--radius-md); background:var(--bg-surface); box-shadow:var(--shadow-lg, 0 12px 32px rgba(0,0,0,.22)); transform:scale(1.02); opacity:.98; cursor:grabbing; }
.picker-arr--ghost.picker-arr--pin{ background:var(--warning-tint); }
.picker-arr--placeholder{ opacity:0; }   /* лишається в потоці як проміжок, але невидимий — сусіди плавно розсуваються */
.picker-arr__handle{ cursor:grab; touch-action:none; color:var(--text-soft); background:none; border:0; padding:4px; flex:0 0 auto; display:grid; place-items:center; }
.picker-arr__handle:active{ cursor:grabbing; }
.picker-arr .picker-item__meta{ flex:1; min-width:0; }
/* поле номера у порядку (замість тягання) */
.picker-arr__num{ width:46px; height:34px; flex:0 0 auto; text-align:center; border:1px solid var(--stroke-soft); border-radius:var(--radius-md); background:var(--bg-base); color:var(--text-strong); font-size:14px; font-weight:var(--fw-semibold); padding:0 2px; }
.picker-arr__num:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 20%,transparent); }
/* три дії на нижній лінії під товаром */
.picker-arr__acts{ display:flex; gap:6px; padding-left:30px; }
.picker-arr__act{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:0;
  height:var(--control-h-sm,32px); padding:0 8px; border:1px solid var(--stroke-soft); border-radius:var(--radius-md);
  background:var(--bg-base); color:var(--text-soft); font-size:var(--text-xs); font-weight:var(--fw-medium); cursor:pointer; white-space:nowrap; }
.picker-arr__act span{ overflow:hidden; text-overflow:ellipsis; }
.picker-arr__act .icon{ width:15px; height:15px; flex:0 0 auto; }
.picker-arr__act:hover{ background:var(--bg-hover,var(--bg-surface)); color:var(--text-base); }
.picker-arr__act.is-pin{ border-color:color-mix(in srgb,var(--warning-base) 50%,transparent); background:var(--warning-tint); color:var(--warning-text); }
.picker-arr__act.is-pin .icon{ fill:currentColor; }
.picker-arr__act.is-as{ border-color:color-mix(in srgb,var(--success-base) 50%,transparent); background:var(--success-tint); color:var(--success-text); }
/* діалог підтвердження всередині пікера (поверх картки впорядкування) */
.picker-confirm{ position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:var(--space-4); }
.picker-confirm__ov{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.picker-confirm__box{ position:relative; width:100%; max-width:420px; background:var(--bg-surface); border-radius:var(--radius-xl); padding:var(--space-5) var(--space-4) var(--space-4);
  box-shadow:var(--shadow-lg, 0 12px 32px rgba(0,0,0,.24)); animation:pc-up .18s var(--ease, ease); }
@keyframes pc-up{ from{ transform:scale(.96); opacity:.6; } to{ transform:scale(1); opacity:1; } }
.picker-confirm__t{ font-size:var(--text-lg); font-weight:var(--fw-bold); color:var(--text-strong); }
.picker-confirm__x{ margin-top:6px; font-size:var(--text-sm); color:var(--text-sub); line-height:1.4; }
.picker-confirm__a{ display:flex; gap:var(--space-2); margin-top:var(--space-4); }
.picker-confirm__a .btn{ flex:1; justify-content:center; }
@media (max-width:640px){ .picker-arr__act span{ font-size:11px; } .picker-arr__acts{ padding-left:0; } }
.picker-list{ background:var(--bg-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; }
/* «Показати ще N» — довантажка списку порціями (і автоматично при доскролюванні) */
.picker-more{
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; padding:12px var(--space-3); border:0; border-top:1px solid var(--stroke-soft);
  background:var(--bg-subtle); color:var(--text-sub); font-size:var(--text-sm); font-weight:var(--fw-medium);
  cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.picker-more:hover{ background:var(--bg-active); color:var(--text-main); }
.picker-more .icon{ width:15px; height:15px; }
.picker-more__left{ color:var(--text-soft); font-weight:var(--fw-regular); }
.picker-item{ display:flex; align-items:center; gap:var(--space-3); width:100%; padding:13px var(--space-4); border-bottom:1px solid var(--stroke-soft); cursor:pointer; text-align:left; transition:background var(--dur-fast) var(--ease); }
.picker-item:last-child{ border-bottom:0; }
.picker-item:hover{ background:var(--bg-hover); }
.picker-item__ic,.picker-item__thumb{ width:36px; height:36px; flex:0 0 auto; border-radius:var(--radius-md); }
.picker-item__ic{ display:grid; place-items:center; background:var(--bg-subtle); color:var(--text-soft); }
.picker-item__ic .icon{ width:18px; height:18px; }
.picker-item__thumb{ overflow:hidden; background:var(--bg-subtle); }
.picker-item__thumb img{ width:100%; height:100%; object-fit:cover; }
.picker-item__meta{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.picker-item__label{ font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-strong); }
.picker-item__sub{ font-size:var(--text-xs); color:var(--text-soft); }
.picker-item__right{ flex:0 0 auto; font-size:var(--text-sm); color:var(--text-sub); font-variant-numeric:tabular-nums; }
.picker-empty{ padding:var(--space-6); text-align:center; color:var(--text-soft); font-size:var(--text-sm); }
/* вибраний пункт — зелений фон + галочка */
.picker-item--sel{ background:var(--success-tint); }
.picker-item--sel:hover{ background:var(--success-tint); }
.picker-item--pin{ background:var(--warning-tint); }
.picker-item--pin:hover{ background:color-mix(in srgb, var(--warning-base) 16%, var(--bg-surface)); }
.picker-item--pin .picker-item__right .icon{ color:var(--warning-base); width:16px; height:16px; }
.picker-item--work .picker-item__right .icon{ color:var(--warning-base); width:15px; height:15px; }
/* Немає на складах підбору: обрати можна (передзамовлення), але видно, що товару зараз нема.
   Такі позиції сервер віддає в КІНЦІ списку — рішення замовника. */
.picker-item--dim{ opacity:.62; }
.picker-item--dim:hover{ opacity:1; }
.picker-item--dim .picker-item__thumb img{ filter:grayscale(1); }
.picker-showall{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:var(--space-3); cursor:pointer;
  background:transparent; border:0; color:var(--primary); font-weight:var(--fw-medium); font-size:var(--text-sm); }
.picker-showall--top{ border-bottom:1px solid var(--stroke-soft); position:sticky; top:0; background:var(--bg-surface); z-index:1; }
.picker-showall:hover{ background:var(--bg-hover); }
.picker-showall .icon{ width:16px; height:16px; }
.picker-item--sel .picker-item__label{ color:var(--success-text); }
.picker-item__check{ flex:0 0 auto; display:grid; place-items:center; color:var(--success-base); }
.picker-item__check .icon{ width:18px; height:18px; }
/* кнопки шапки пікера (назад / X) — сірий круглий фон */
#picker .modal__header .icon-btn{ background:var(--bg-subtle); border-radius:var(--radius-circle); }
#picker .modal__header .icon-btn:hover{ background:var(--bg-hover); }
/* безшовна заміна контенту (R33): пікер завжди миттєвий + під час свопу
   глушимо анімацію батьківської модалки (body.modal-noanim) — і відкриття, і повернення */
#picker .modal__dialog, #picker .modal__overlay{ transition:none; }
.modal-noanim .modal__dialog, .modal-noanim .modal__overlay{ transition:none; }

/* ---------- Copy-on-hover (app.js: COPY_SEL) ---------- */
/* ⚠ hover НЕ змінює розмірів елемента (жодних padding/align на .cp-able) — інакше текст стрибає.
   Кнопка абсолютна, стоїть ОДРАЗУ ЗА текстом (right:-24px); у .prod-cell / td — всередині, бо там є статичний відступ. */
.cp-able{ position:relative; user-select:text; }
.cp-btn{ position:absolute; right:-24px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--text-soft, #8a8f98);
  cursor:pointer; opacity:0; transition:opacity .12s, color .12s, background .12s; z-index:1; }
.prod-cell > .cp-btn{ right:0; }
td.cp-able > .cp-btn{ right:6px; }
.cp-able:hover > .cp-btn, .cp-btn:hover{ opacity:1; }
.cp-btn:hover{ color:var(--text-main, #111); background:var(--surface-2, #eceef1); }
.cp-btn svg{ width:13px; height:13px; }
@media (hover:none){ .cp-btn{ opacity:.55; } }