/* ============================================================================
   Schedule v3 — «План на сьогодні»: рядки-принтери (js/schedule_v2.js).
   Світла/темна тема через CSS-токени з themes.css.
   ========================================================================== */

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.sv3-toolbar {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sv3-tb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv3-tb-stats { margin-left: auto; display: flex; gap: 10px; font-size: 13px; color: var(--text-muted); }
.sv3-stat-warn { color: var(--warning); font-weight: 600; }
.sv3-stat-ok { color: var(--success); font-weight: 600; }

.sv3-search {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; min-width: 220px; flex: 0 1 280px;
  background: var(--bg-surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text-muted);
}
.sv3-search input {
  border: 0; background: transparent; outline: none; flex: 1;
  font-size: 13px; color: var(--text); min-width: 0;
}
.sv3-search button { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); display: flex; }

.sv3-fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.sv3-fchip {
  border: 1px solid var(--border); background: var(--bg-surface);
  border-radius: var(--radius-pill); padding: 4px 10px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.sv3-fchip b { font-weight: 700; }
.sv3-fchip:hover { background: var(--bg-surface-2); }
.sv3-fchip.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.sv3-fchip-warn { color: var(--danger); border-color: var(--danger); }
.sv3-fchip-warn.active { background: var(--danger-soft); }

/* Тумблер авто-черги (загальний) */
.sv3-aq-master {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-surface);
}
.sv3-aq-master input { display: none; }
.sv3-aq-track {
  width: 30px; height: 16px; border-radius: 999px;
  background: var(--bg-surface-2); border: 1px solid var(--border);
  position: relative; transition: background .15s ease;
}
.sv3-aq-knob {
  position: absolute; top: 1px; left: 1px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s ease;
}
.sv3-aq-master input:checked + .sv3-aq-track { background: var(--brand); border-color: var(--brand); }
.sv3-aq-master input:checked + .sv3-aq-track .sv3-aq-knob { left: 15px; }

/* ── Inbox (не призначені) ─────────────────────────────────────────────── */
.sv3-inbox {
  background: var(--info-soft); border: 1px dashed var(--info);
  border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 12px;
  transition: background .15s ease, border-color .15s ease;
}
.sv3-inbox.sv3-drop-target { background: var(--brand-soft); border-color: var(--brand); border-style: solid; }
.sv3-inbox-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text); margin-bottom: 8px;
}
.sv3-inbox-count {
  padding: 1px 8px; border-radius: 999px; background: var(--info);
  color: #fff; font-size: 11px; font-weight: 700;
}
.sv3-inbox-hint { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.sv3-inbox-body { display: flex; gap: 8px; flex-wrap: wrap; }
.sv3-inbox-empty { font-size: 12px; color: var(--text-muted); }
.sv3-inbox-more { font-size: 11px; color: var(--text-muted); align-self: center; }

.sv3-icard {
  display: flex; align-items: center; gap: 8px; position: relative;
  padding: 6px 26px 6px 18px; max-width: 280px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  transition: box-shadow .12s ease, transform .12s ease;
}
.sv3-icard:hover { box-shadow: 0 3px 10px rgba(15,23,42,.12); transform: translateY(-1px); }
/* Явна ручка перетягування зліва — раніше ціла картка була одночасно
   drag-source і click-target без жодної візуальної різниці. */
.sv3-icard-drag {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  color: var(--text-disabled); font-size: 14px; cursor: grab; line-height: 0;
}
.sv3-icard-drag .ms { font-size: 14px; }
.sv3-icard:active .sv3-icard-drag { cursor: grabbing; }
/* Явна кнопка меню справа — той самий onclick що й уся картка, лише
   візуальна підказка «тут відкривається меню дій». */
.sv3-icard-menu-btn {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: none; background: transparent;
  color: var(--text-muted); border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sv3-icard-menu-btn .ms { font-size: 15px; }
.sv3-icard-menu-btn:hover { background: var(--bg-surface-2); color: var(--text); }
/* Бейдж пріоритету — видно одразу на картці і в блоці «Далі», без відкриття меню. */
.sv3-icard-prio {
  display: inline-flex; font-size: 11px; margin-right: 3px; vertical-align: middle;
}
/* Фаза 3.3: плита чекає першого сумісного принтера — синій-пунктирний бордер. */
.sv3-icard-waiting {
  border-color: #3b82f6; border-style: dashed;
  background: rgba(59,130,246,0.06);
}
.sv3-icard-thumb {
  width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm);
  background: var(--bg-surface-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--text-disabled);
}
.sv3-icard-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sv3-icard-body { min-width: 0; }
.sv3-icard-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-icard-sub {
  font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden;
}
.sv3-icard-warn {
  font-size: 10.5px; color: var(--warning); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-icard-lowstock { border-color: var(--warning); }

/* ── Рядки принтерів ───────────────────────────────────────────────────── */
.sv3-rows { display: flex; flex-direction: column; gap: 8px; }
.sv3-empty-rows {
  text-align: center; padding: 28px; font-size: 13px; color: var(--text-muted);
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
}

.sv3-row {
  display: grid;
  grid-template-columns: 268px 230px 1fr 150px;
  gap: 12px; align-items: center;
  padding: 10px 12px 10px 14px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* Кольорова смуга статусу зліва */
.sv3-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--border);
}
.sv3-st-printing::before { background: var(--success); }
.sv3-st-finished::before { background: var(--warning); }
.sv3-st-error::before    { background: var(--danger); }
.sv3-st-paused::before   { background: var(--info); }
.sv3-st-cancelled::before { background: var(--text-disabled); }
.sv3-st-offline::before  { background: var(--text-disabled); }
.sv3-st-finished { background: color-mix(in srgb, var(--warning-soft) 35%, var(--bg-surface)); }
.sv3-st-error    { background: color-mix(in srgb, var(--danger-soft) 30%, var(--bg-surface)); }
.sv3-row.sv3-drop-target { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-soft); }

/* 1. Інфо */
.sv3-cell-info { min-width: 0; }
.sv3-pr-line1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sv3-pr-name {
  font-weight: 700; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-pr-model {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px; flex: none;
  background: var(--bg-surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}
.sv3-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-disabled); }
.sv3-dot-printing { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); animation: sv3pulse 1.6s ease infinite; }
.sv3-dot-finished { background: var(--warning); }
.sv3-dot-error    { background: var(--danger); }
.sv3-dot-paused   { background: var(--info); }
.sv3-dot-idle     { background: var(--text-disabled); }
.sv3-dot-cancelled { background: var(--text-disabled); }
.sv3-dot-offline  { background: var(--text-disabled); opacity: .5; }
@keyframes sv3pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 30%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 10%, transparent); }
}

.sv3-pr-line2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.sv3-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
}
.sv3-badge-printing { background: var(--success-soft); color: var(--success); }
.sv3-badge-finished { background: var(--warning-soft); color: var(--warning); }
.sv3-badge-error    { background: var(--danger-soft); color: var(--danger); }
.sv3-badge-paused   { background: var(--info-soft); color: var(--info); }
.sv3-badge-idle     { background: var(--bg-surface-2); color: var(--text-muted); }
.sv3-badge-cancelled { background: var(--bg-surface-2); color: var(--text-muted); }
.sv3-badge-offline  { background: var(--bg-surface-2); color: var(--text-disabled); }
.sv3-reserve { font-size: 10.5px; color: var(--warning); }

.sv3-pr-line3 { display: flex; align-items: center; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
/* Підписана пелюстка «що зараз у принтері» — кружечок кольору + назва + %.
   Раніше — крихітний кружечок лише з tooltip, невидимий на дотик. */
.sv3-loaded-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-surface-2); border-radius: 999px; padding: 2px 7px 2px 4px;
  max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-loaded-chip-ext { border: 1px dashed var(--border); background: transparent; }
.sv3-loaded-chip-clickable { cursor: pointer; }
.sv3-loaded-chip-clickable:hover { background: var(--brand-soft); color: var(--text); }
.sv3-loaded-chip-sw {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

/* Камера принтера — живий кадр зліва від тексту в інфо-комірці. */
.sv3-info-flex { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.sv3-pr-textcol { min-width: 0; flex: 1; }
.sv3-cam-thumb {
  width: 56px; height: 56px; flex: none; border-radius: var(--radius-md);
  background: #0a0a0a; overflow: hidden; position: relative; cursor: pointer;
  border: 1px solid var(--border); transition: border-color .15s ease;
}
.sv3-cam-thumb:hover { border-color: var(--brand); }
.sv3-cam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv3-cam-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface-2); cursor: default;
}
.sv3-cam-thumb-empty:hover { border-color: var(--border); }
.sv3-cam-thumb-empty .ms { font-size: 22px; color: var(--text-disabled); }
.sv3-cam-thumb-empty img { display: none; }
/* Маленька зелена цятка — принтер зараз друкує (кадр живий, не архівний). */
.sv3-cam-live {
  position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 2px rgba(0,0,0,.45);
  animation: sv3pulse 1.6s ease infinite;
}
.sv3-aq-mini {
  display: inline-flex; align-items: center; gap: 2px; margin-left: auto;
  font-size: 10.5px; font-weight: 700; color: var(--text-disabled);
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border);
  cursor: pointer; user-select: none;
  background: var(--bg-surface); transition: border-color .15s ease, background .15s ease;
}
/* Шеврон після лейблу — сигналізує «клік відкриває меню», не просто статус. */
.sv3-aq-mini::after {
  content: 'expand_more'; font-family: 'Material Symbols Rounded'; font-size: 12px;
  margin-left: 1px; opacity: .7;
}
.sv3-aq-mini:hover { border-color: var(--border-strong); background: var(--bg-soft); }
.sv3-aq-mini input { display: none; }
.sv3-aq-mini.on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.sv3-aq-mini.sv3-aq-mini-off { opacity: .55; }

/* 2. Now-зона */
.sv3-cell-now { min-width: 0; font-size: 12px; }
.sv3-now-flex { display: flex; align-items: center; gap: 8px; }
.sv3-now-main { flex: 1; min-width: 0; }
.sv3-now-thumb {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-surface-2); border: 1px solid var(--border);
}
.sv3-now-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sv3-now-title {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-now-bar {
  height: 6px; border-radius: 3px; background: var(--bg-surface-2);
  overflow: hidden; margin: 4px 0;
}
.sv3-now-bar > div {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--info), var(--success));
  transition: width .4s ease;
}
.sv3-now-sub { display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 11.5px; }
.sv3-now-btns { margin-left: auto; display: flex; gap: 4px; }
.sv3-mini-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  width: auto; height: 20px; padding: 0 7px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 600;
}
.sv3-mini-btn:hover { background: var(--bg-surface-2); }
.sv3-mini-done { color: var(--success); border-color: var(--success); }
.sv3-mini-attach {
  width: auto; padding: 0 8px; gap: 3px;
  color: var(--warning); border-color: var(--warning);
  font-size: 11px; font-weight: 700; animation: sv3pulse 2s ease infinite;
}
.sv3-nojob { font-size: 10px; color: var(--text-disabled); flex: none; }

.sv3-now-finished {
  display: flex; gap: 8px; align-items: flex-start;
  color: var(--warning); font-size: 12px; line-height: 1.35;
}
.sv3-now-finished b { font-size: 13px; }
.sv3-now-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sv3-now-error {
  display: flex; gap: 6px; align-items: center;
  color: var(--danger); font-size: 12px;
  overflow: hidden;
}
.sv3-now-cancelled {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  color: var(--text-muted); font-size: 12px;
}
.sv3-now-offline, .sv3-now-idle {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  color: var(--text-muted); font-size: 12px;
}
.sv3-launch-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  border: 0; cursor: pointer; font-size: 12px; font-weight: 600;
  background: var(--brand); color: #fff;
}
.sv3-launch-btn:hover { background: var(--brand-hover); }

/* AMS preview: під idle/finished — рядок «потрібно: [pill] [pill]». Показує
   потрібні кольори з підказкою в якому слоті AMS вони зараз (або що треба
   замінити) — оператор бачить одразу чи готовий принтер. */
.sv3-ams-preview {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  margin-top: 4px; font-size: 11px; color: var(--text-muted);
}
.sv3-ams-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500;
  background: var(--bg-subtle); border: 1px solid var(--border);
}
.sv3-ams-pill.sv3-ams-ok    { color: var(--success); border-color: var(--success); }
.sv3-ams-pill.sv3-ams-need  { color: var(--danger);  border-color: var(--danger);  }
.sv3-ams-sw {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* 3. «Далі» — під принтером показуємо ТІЛЬКИ одну наступну плиту (з backlog),
   не чіпи-чергу. Плити не розкидуються по принтерах — приналежність лише в
   момент друку. Стрілка справа + мініатюра + назва + ▶. */
.sv3-cell-next { min-width: 0; }
.sv3-next {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-md);
  background: var(--bg-surface-2); border: 1px solid var(--border);
  transition: border-color .12s ease, background .12s ease;
}
.sv3-next.sv3-next-nocolor { border-color: var(--warning); background: color-mix(in oklab, var(--warning) 10%, transparent); }
/* Рекомендація «заміни котушку і запусти» — для вільного принтера у якого
   AMS не має потрібного кольору, але на складі є вільна котушка. Синій
   акцент замість оранжевого щоб відрізняти від помилок. */
.sv3-next.sv3-next-recommend {
  border-color: var(--brand); border-style: dashed;
  background: var(--brand-soft);
}
.sv3-next-recommend-hint {
  font-size: 10.5px; color: var(--brand); display: flex; align-items: center; gap: 3px;
  margin-top: 2px;
}
/* Кольорова пляма замість → стрілки — щоб одразу видно який колір треба заряджати */
.sv3-next-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--border); vertical-align: middle;
}
.sv3-next-arrow { color: var(--text-muted); font-size: 16px; font-weight: 700; flex: none; }
.sv3-next-main { flex: 1; min-width: 0; }
.sv3-next-title {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-next-sub { font-size: 11px; color: var(--text-muted); display: flex; gap: 4px; align-items: center; }
.sv3-next-warn { font-size: 11px; color: var(--warning); display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.sv3-next-launch {
  border: 0; border-radius: 999px; width: auto; height: 32px; padding: 0 12px;
  background: var(--brand); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  flex: none; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.sv3-next-launch:hover { background: var(--brand-hover); }
.sv3-next-launch.sv3-next-block { background: var(--warning); cursor: not-allowed; }
.sv3-next-launch.sv3-next-block:hover { background: var(--warning); }
.sv3-next-empty {
  font-size: 11.5px; color: var(--text-disabled); font-style: italic;
  display: flex; gap: 4px; align-items: center;
}

/* 3. Черга (чіпи) — LEGACY, не рендериться в новій моделі, але лишається для
   інших місць що ще використовують sv3-chip (наприклад inbox). */
.sv3-cell-queue { min-width: 0; }
.sv3-queue {
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; padding: 2px 0;
  scrollbar-width: thin;
}
.sv3-queue-empty { font-size: 11.5px; color: var(--text-disabled); font-style: italic; }
.sv3-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  max-width: 230px; padding: 4px 9px;
  background: var(--bg-surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer;
  font-size: 11.5px; color: var(--text-secondary);
  transition: border-color .12s ease, background .12s ease;
}
.sv3-chip:hover { border-color: var(--brand); background: var(--brand-soft); }
.sv3-chip b { font-weight: 700; color: var(--text); }
.sv3-chip-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 120px; font-weight: 600; color: var(--text);
}
.sv3-chip-time { color: var(--text-muted); flex: none; }
.sv3-chip-thumb {
  width: 24px; height: 24px; flex: none; margin: -2px 0 -2px -4px;
  border-radius: 50%; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border);
}
.sv3-chip-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sv3-chip-ok   { border-color: var(--success); }
.sv3-chip-swap { border-color: var(--warning); border-style: dashed; }
/* Пріоритет (Фаза 1 Smart Scheduling): жовтий/червоний бордер зі свіченням. */
.sv3-chip-prio1 { border-color: #f59e0b; border-width: 2px; box-shadow: 0 0 0 1px rgba(245,158,11,0.25); }
.sv3-chip-prio2 { border-color: #ef4444; border-width: 2px; box-shadow: 0 0 0 1px rgba(239,68,68,0.30); background: rgba(239,68,68,0.05); }
.sv3-chip-more { font-size: 11px; color: var(--text-muted); flex: none; }
.sv3-chip-active {
  border-color: var(--success); background: var(--success-soft); cursor: pointer;
}
.sv3-chip-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  animation: sv3pulse 1.6s ease infinite; flex: none;
}
.sv3-chip-pct { font-weight: 700; color: var(--success); flex: none; }
.sv3-fil-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0,0,0,.18); display: inline-block; vertical-align: middle;
}
.sv3-dragging { opacity: .45; }

/* 4. Підсумок */
.sv3-cell-meta { font-size: 11px; color: var(--text-muted); min-width: 0; }
.sv3-meta-load b { color: var(--text); }
.sv3-meta-bar {
  height: 4px; border-radius: 2px; background: var(--bg-surface-2);
  overflow: hidden; margin: 4px 0;
}
.sv3-meta-bar > div { height: 100%; border-radius: 2px; }
.sv3-load-ok   > div { background: var(--success); }
.sv3-load-warn > div { background: var(--warning); }
.sv3-load-over > div { background: var(--danger); }
.sv3-meta-eta b { color: var(--text); }
.sv3-meta-eta.over, .sv3-meta-eta.over b { color: var(--danger); }

/* ── Прогноз на сьогодні ──────────────────────────────────────────────── */
.sv3-forecast {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 10px 12px;
  border-radius: var(--radius-lg); font-size: 13.5px; font-weight: 600;
}
.sv3-forecast-ok {
  background: var(--success-soft); color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}
.sv3-forecast-warn {
  flex-direction: column; align-items: stretch; gap: 6px;
  background: var(--warning-soft); color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
.sv3-forecast-head { display: flex; align-items: center; gap: 8px; }
.sv3-forecast-section { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.sv3-forecast-section-head {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border);
}
.sv3-forecast-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 400; color: var(--text);
  padding: 3px 0;
}
.sv3-forecast-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv3-forecast-item-qty { font-size: 11.5px; color: var(--text-muted); flex: none; }
.sv3-forecast-item-actions { display: flex; gap: 2px; flex: none; }
.sv3-forecast-mini {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-muted); cursor: pointer;
}
.sv3-forecast-mini:hover { background: var(--bg-surface-2); color: var(--text); }

/* ── Hover-превью плити ────────────────────────────────────────────────── */
.sv3-preview {
  position: fixed; z-index: 9998; width: 190px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 10px 34px rgba(15,23,42,.22);
  pointer-events: none;
  animation: sv3fadein .12s ease;
}
.sv3-preview img {
  width: 100%; height: 178px; object-fit: contain;
  background: var(--bg-surface-2); display: block;
}
.sv3-preview-cap {
  padding: 6px 9px; font-size: 11.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-preview-cap span { display: block; font-weight: 400; font-size: 10.5px; color: var(--text-muted); }
@keyframes sv3fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }

/* ── Попап-меню ────────────────────────────────────────────────────────── */
.sv3-menu {
  position: fixed; z-index: 9999; min-width: 230px; max-width: 300px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 6px;
  box-shadow: 0 8px 30px rgba(15,23,42,.18);
  max-height: 70vh; overflow-y: auto;
}
.sv3-menu-head {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  padding: 6px 8px 4px;
}
.sv3-menu-sub { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.sv3-menu-note { font-size: 11px; color: var(--text-muted); padding: 6px 8px; }
.sv3-mi {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 8px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text); text-align: left;
}
.sv3-mi .ms { font-size: 16px; color: var(--text-muted); }
.sv3-mi:hover { background: var(--bg-surface-2); }
.sv3-mi-ok { color: var(--success); font-weight: 600; }
.sv3-mi-ok .ms { color: var(--success); }
.sv3-mi-danger { color: var(--danger); }
.sv3-mi-danger .ms { color: var(--danger); }
.sv3-mi-warn { color: #f59e0b; font-weight: 600; }
.sv3-mi-warn .ms { color: #f59e0b; }
.sv3-mi-crit { color: #ef4444; font-weight: 600; }
.sv3-mi-crit .ms { color: #ef4444; }
.sv3-mi-selected { background: var(--bg-surface-2); font-weight: 600; }
/* Швидкий керування qty в меню inbox: −/×N/+ */
.sv3-mi-qty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.sv3-mi-qty-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-surface-2);
  cursor: pointer; font-size: 15px; font-weight: 700; color: var(--text);
}
.sv3-mi-qty-btn:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
.sv3-mi-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.sv3-mi-qty-val {
  font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer;
  min-width: 42px; text-align: center; padding: 4px 8px; border-radius: 6px;
}
.sv3-mi-qty-val:hover { background: var(--brand-soft); }
.sv3-mi-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 999px; flex: none;
  background: var(--bg-surface-2); color: var(--text-muted);
}
.sv3-mi-tag.ok { background: var(--success-soft); color: var(--success); }
.sv3-color-row { padding: 6px 8px; }
.sv3-color-label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.sv3-color-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.sv3-color-swatch {
  width: 22px; height: 22px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
  position: relative; display: flex; align-items: center; justify-content: center; padding: 0;
}
.sv3-color-swatch:hover { transform: scale(1.12); }
.sv3-color-swatch.sel { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--brand); }
.sv3-color-swatch-num {
  font-size: 10px; font-weight: 700; line-height: 1; color: #fff;
  text-shadow: 0 0 2px #000, 0 0 3px #000;
  pointer-events: none;
}
/* Назва кольору під слотом — раніше видна лише в title/tooltip, номер слоту
   сам по собі неоднозначний («який саме білий?»). */
.sv3-color-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 44px;
}
.sv3-color-opt-label {
  font-size: 9px; color: var(--text-muted); text-align: center; line-height: 1.15;
  max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv3-mi-until {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-top: 1px solid var(--border); margin-top: 4px;
}
.sv3-mi-until input {
  flex: 1; padding: 3px 6px; font-size: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text);
}
.sv3-mi-until button {
  padding: 3px 10px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--brand); color: var(--brand);
  background: var(--brand-soft); border-radius: var(--radius-sm); cursor: pointer;
}
.sv3-mi-qty {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 4px 8px;
}
.sv3-mi-qty button {
  width: 34px; height: 26px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-surface);
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text);
}
.sv3-mi-qty button:hover { background: var(--bg-surface-2); }
.sv3-mi-qty span { font-size: 13px; font-weight: 700; color: var(--text); min-width: 34px; text-align: center; }

/* ── Адаптив ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .sv3-row { grid-template-columns: 250px 1fr 130px; }
  .sv3-cell-now { grid-column: 1 / -1; order: 4; }
}
@media (max-width: 680px) {
  .sv3-row { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
  .sv3-cell-now { grid-column: auto; order: 0; }
  .sv3-cell-meta { display: flex; align-items: center; gap: 8px; }
  .sv3-meta-bar { flex: 1; margin: 0; }
  .sv3-inbox-hint { display: none; }
  .sv3-search { flex: 1 1 100%; }

  /* Тач-цілі: HTML5 drag&drop не працює на дотик (мобільний браузер/Telegram
     WebView не генерують touch-еквівалент dragstart/dragover) — ручка
     перетягування на картці лише зайва й оманлива, ховаємо. Призначення
     принтера й так працює через тап → меню → вибір зі списку. */
  .sv3-icard-drag { display: none; }
  .sv3-icard { padding-left: 8px; }
  /* Кнопка меню картки, mini-кнопки в now-зоні, старт-кнопка, авто-черга,
     кнопки в drawer'і черги — усі збільшуємо до тач-придатного розміру
     (орієнтир ~40px), бо на десктопі вони підібрані під точний курсор миші. */
  .sv3-icard-menu-btn { width: 32px; height: 32px; }
  .sv3-icard-menu-btn .ms { font-size: 20px; }
  .sv3-mini-btn { height: 32px; padding: 0 10px; font-size: 12px; }
  .sv3-next-launch { height: 40px; padding: 0 16px; font-size: 13px; }
  .sv3-aq-mini { padding: 5px 10px; font-size: 12px; }
  .sv3-qd-icon { height: 34px; padding: 0 12px; font-size: 12px; }
  /* Меню дій (_sv3OpenMenu) — рядки менш щільні, легше влучити пальцем. */
  .sv3-mi { padding: 12px 10px; font-size: 13.5px; }
  .sv3-mi-qty-btn { width: 34px; height: 34px; }
  .sv3-color-swatch { width: 30px; height: 30px; }
  .sv3-color-opt { width: 52px; }
  .sv3-color-opt-label { max-width: 52px; }
}

/* ── Phase C: блок «Наступні дні» ─────────────────────────────────────── */
.sv3-future {
  margin-top: 12px; border: 1px dashed var(--border);
  border-radius: var(--radius-lg); background: var(--bg-surface);
}
.sv3-future-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer; user-select: none;
  font-size: 13px; color: var(--text);
}
.sv3-future-head:hover { background: var(--bg-surface-2); border-radius: var(--radius-lg); }
.sv3-future-meta { font-size: 11.5px; color: var(--text-muted); }
.sv3-future-chev { margin-left: auto; color: var(--text-muted); }
.sv3-future-body { padding: 0 14px 12px; }
.sv3-future-day { margin-top: 8px; }
.sv3-future-daylbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px; letter-spacing: .3px;
}
.sv3-fcard {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-surface-2);
}
.sv3-fcard-main { flex: 1; min-width: 0; }
.sv3-fcard-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-fcard-sub { font-size: 11px; color: var(--text-muted); display: flex; gap: 4px; align-items: center; }
.sv3-fcard-btn {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-surface);
  font-size: 11.5px; font-weight: 600; color: var(--text); cursor: pointer;
}
.sv3-fcard-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.sv3-fcard-del { padding: 4px 7px; color: var(--danger); }
.sv3-fcard-del:hover { border-color: var(--danger); background: transparent; }

/* ── Phase C: бокова панель черги (drawer справа) ─────────────────────── */
.sv3-qdrawer {
  position: fixed; top: 90px; right: 0; bottom: 20px; z-index: 60;
  width: 320px; max-width: 86vw;
  transform: translateX(100%);
  transition: transform .25s ease;
  pointer-events: none; /* закритий — не перехоплює кліки, крім ручки */
}
.sv3-qdrawer.open { transform: translateX(0); }
.sv3-qdrawer-handle {
  position: absolute; left: -34px; top: 40px;
  writing-mode: vertical-rl; text-orientation: mixed;
  display: flex; align-items: center; gap: 6px;
  padding: 12px 7px; border: 1px solid var(--border); border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--bg-surface); color: var(--text);
  font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0,0,0,.06);
  pointer-events: auto;
}
.sv3-qdrawer-handle:hover { background: var(--brand-soft); border-color: var(--brand); }
.sv3-qdrawer-handle .ms { writing-mode: horizontal-tb; }
.sv3-qdrawer-body {
  height: 100%; display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border); border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: -6px 0 24px rgba(0,0,0,.10);
  pointer-events: auto;
}
.sv3-qdrawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text);
}
.sv3-qdrawer-close {
  border: 0; background: transparent; cursor: pointer; color: var(--text-muted);
  display: inline-flex; padding: 2px;
}
.sv3-qdrawer-close:hover { color: var(--text); }
/* «+ Додати в чергу» — кнопка в шапці панелі, поруч із закрити. */
.sv3-qdrawer-add {
  border: 1px solid var(--border); background: var(--bg-surface-2); cursor: pointer;
  color: var(--text); display: inline-flex; padding: 3px; border-radius: 6px;
  margin-left: auto; margin-right: 6px;
}
.sv3-qdrawer-add:hover { border-color: var(--brand); color: var(--brand); }
#sv3-qdrawer-list { flex: 1; overflow-y: auto; padding: 8px; }
.sv3-qdrawer-empty { text-align: center; padding: 24px 12px; font-size: 12.5px; color: var(--text-disabled); }
.sv3-qd-item {
  padding: 8px; border-radius: var(--radius-md); margin-bottom: 4px;
}
.sv3-qd-item:hover { background: var(--bg-surface-2); }
.sv3-qd-row { display: flex; align-items: center; gap: 8px; }
.sv3-qd-thumb {
  width: 36px; height: 36px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--bg-surface-2); display: flex; align-items: center; justify-content: center;
}
.sv3-qd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sv3-qd-main { flex: 1; min-width: 0; }
.sv3-qd-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv3-qd-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
/* Рядок дій — під thumb+назвою: «у план» ліворуч, ✓/✕ праворуч. */
.sv3-qd-actions { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.sv3-qd-pull {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  padding: 4px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--brand); background: var(--brand-soft);
  font-size: 11px; font-weight: 700; color: var(--brand); cursor: pointer;
}
.sv3-qd-pull:hover { background: var(--brand); color: #fff; }
.sv3-qd-inplan { flex: none; font-size: 11px; color: var(--success); font-weight: 600; }
.sv3-qd-icon {
  flex: none; width: auto; height: 26px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-muted); cursor: pointer; gap: 3px; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.sv3-qd-icon:hover { border-color: var(--brand); color: var(--brand); }
.sv3-qd-icon-danger:hover { border-color: var(--danger); color: var(--danger); }
.sv3-qd-icon-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

@media (max-width: 680px) {
  .sv3-qdrawer { top: 70px; width: 88vw; }
}