/* MyPrint WMS — шар 2: компоненти.
   База, оболонка застосунку, типографіка й атоми (картка, поле, кнопка, бейдж, метрика,
   перемикач, таблиця, банер, timeline). Значення — тільки через var(--token) з tokens.css. */

/* Reset/base */
* { box-sizing: border-box; min-width: 0; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: var(--text-body); font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
.hidden { display: none !important; }

/* Shell/sidebar/topbar */
.wms-app-shell, .app { min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.wms-sidebar, .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-5) var(--space-3) var(--space-4); border-right: 1px solid var(--line); background: var(--surface); }
.brand { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-0-5) var(--space-3) var(--space-3); }
.brand-mark { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: var(--radius-small); background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 700; }
.brand-title { font-size: var(--font-size-lg); font-weight: 700; line-height: 1.1; }
#updated, .brand-version, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.brand-version { margin-top: var(--space-1); color: var(--ink-4); font-size: var(--font-size-xs); line-height: 1.2; }
.app-nav-wrap { display: block; }
.app-nav { display: grid; gap: var(--space-5); }
.nav-section { display: grid; gap: var(--space-1); }
.nav-section-title, .label-tiny, .packer-step-label { color: var(--ink-3); font: var(--text-section-label); letter-spacing: .06em; text-transform: uppercase; }
.nav-section-title { padding: 0 var(--space-3) var(--space-1-5); }
.nav-item { min-height: var(--control-lg); display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-tight); color: var(--ink-2); text-decoration: none; font-weight: 650; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }
.nav-item.active .nav-icon { color: var(--accent-ink); }
.nav-icon { color: var(--ink-2); font-size: var(--font-size-lg); line-height: 1; }
.sidebar-spacer { flex: 1; }
.worker-card { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-3) 0; border-top: 1px solid var(--line); }
.header-operator { display: grid; gap: var(--space-1); color: var(--ink-3); font: var(--text-section-label); letter-spacing: .06em; text-transform: uppercase; }
.header-operator input { text-transform: none; letter-spacing: 0; }
.worker-card .header-operator input { min-height: var(--control-2xs); padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: 650; }
.worker-card .header-operator input::placeholder { color: var(--ink); opacity: .72; }
.worker-meta { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-2); align-items: center; color: var(--ink-3); font-size: var(--font-size-xs); }
.worker-meta .header-operator { min-width: 0; }
.worker-avatar { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 700; }
.wms-main, .main-shell { min-width: 0; }
.wms-topbar, .topbar { position: sticky; top: 0; z-index: 20; height: var(--control-2xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 0 var(--space-8) 0 var(--space-6); border-bottom: 1px solid var(--line); background: rgba(238,240,244,.85); backdrop-filter: blur(8px); }
.route-breadcrumb { min-width: 0; overflow: hidden; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.route-breadcrumb .muted-part { color: var(--ink-4); }
.station-context { position: sticky; top: 56px; z-index: 19; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--font-size-md); }
.station-context strong { min-width: 0; overflow-wrap: anywhere; }
.station-context button { flex: 0 0 auto; min-height: var(--control-sm); }
@media (max-width: 880px) { .station-context { top: 0; padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); } }
.topbar-right { min-width: 0; display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--font-size-xs); white-space: nowrap; }
.topbar-right .header-copy { display: none; }
.runtime-banner { max-width: 100%; }
.topbar-updated { display: none; }
.topbar-updated:has(.bad) { display: inline-block; max-width: 480px; white-space: normal; }
.topbar-right:has(.topbar-updated .bad) .runtime-banner { display: none; }
.topbar-right { max-width: 65%; white-space: normal; }
.runtime-banner { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
.header-copy { color: var(--ink-3); }
.wms-pagebody, .pagebody { width: 100%; max-width: 1500px; padding: var(--space-page-y) var(--space-page-x) var(--space-16); }
.app-page { display: none; gap: var(--space-5); }
.app-page.active { display: grid; }
#pageWaves, #pageWaveDetail { width: 100%; max-width: 1100px; }

/* Typography */
.page-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-0-5); }
.page-title { display: grid; gap: var(--space-1); }
h1, h2, h3, h4, p { margin: 0; }
h1, .page-title h2 { color: var(--ink); font: var(--text-h1); letter-spacing: -0.015em; }
h2 { font: var(--text-h2); }
h3 { font: var(--text-card-title); }
.page-sub, .muted { color: var(--ink-3); }
.page-sub { font-size: var(--font-size-md); }
.small { font-size: var(--font-size-xs); }
.nowrap { white-space: nowrap; }
.ok { color: var(--st-done); } .warn { color: var(--st-pack); } .bad { color: var(--st-prob); }

/* Atoms: card/surface */
.card, .lead-section, .status-group, .checking-card, .lead-metric, .wms-primary-action-well, .lead-compact-empty { border: none; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
/* controls keep a border (interactivity marker); intervention lane keeps its
   intentional non-token tint border; slot rows keep state-colored borders */
.card { padding: var(--space-4); }

/* Atoms: form/input */
input, select, textarea { width: 100%; min-height: var(--control-md); padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-tight); background: var(--surface-2); color: var(--ink); font: inherit; }
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--state-focus-ring); outline-offset: 2px; }
.input-error { border-color: var(--st-prob); box-shadow: 0 0 0 2px var(--input-error-glow); }

/* Atoms: button */
button, .wms-button, .route-link { min-height: var(--control-lg); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: 1px solid var(--accent); border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent); font: var(--text-control); text-decoration: none; cursor: pointer; }
/* hover = surface change via overlay (works atop any contextual bg), not a brightness filter */
button:hover:not(:disabled), .route-link:hover { background-image: var(--state-hover-overlay); box-shadow: var(--shadow-1); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button.secondary, .btn-quiet, .route-link { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink-2); }
/* toned action: accent-soft fill + accent-ink — row-level / secondary "act" buttons */
.btn-toned { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.btn-toned:hover:not(:disabled) { background-color: var(--state-selected-bg); border-color: var(--accent); }
button.danger { border-color: var(--st-prob); background: var(--surface); color: var(--st-prob); }
button.danger.confirm-pending { border-color: var(--st-prob); background: var(--st-prob); color: var(--on-accent); }
button:disabled, .disabled { opacity: .48; cursor: not-allowed; }
button:disabled { border-color: var(--state-disabled-bg); background: var(--state-disabled-bg); color: var(--state-disabled-ink); opacity: 1; }
button.danger:disabled, [data-check-action="problem"]:disabled {
  background: var(--state-disabled-bg);
  border-color: var(--line-strong);
  color: var(--state-disabled-ink);
  opacity: 1;
}
.actions, .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Atom: flat key-value поле (label-tiny зверху, значення під ним) — спільний рецепт
   для карток черги, модалки замовлення і ризик-рядків lead; компоненти додають лише відхилення */
.kv-field { min-width: 0; display: grid; align-content: start; gap: var(--space-0-5); padding: 0; border: none; background: transparent; }
.kv-field > span { color: var(--ink-3); font: var(--text-section-label); letter-spacing: .06em; text-transform: uppercase; }
.kv-field > b { color: var(--ink); font-size: var(--font-size-md); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

/* Atoms: chip/status */
.wms-status-chip { min-height: var(--control-2xs); width: fit-content; display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wms-status-chip::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.runtime-banner { min-height: var(--control-2xs); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 650; }
.runtime-banner.ready, .runtime-banner.test { border: 1px solid var(--st-done-line); background: var(--st-done-bg); color: var(--st-done); }
.runtime-banner.warn { border: 1px solid var(--st-pack-line); background: var(--st-pack-bg); color: var(--st-pack); }
.runtime-banner.stale { border: 1px solid var(--st-prob-line); background: var(--st-prob-bg); color: var(--st-prob); }
/* UX-06: дія «Оновити зараз» у червоному стані індикатора Dilovod */
.runtime-banner .runtime-banner-action { color: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.runtime-banner .runtime-banner-note { font-weight: 650; }
.wms-status-chip--queued { color: var(--st-new); background: var(--st-new-bg); border-color: var(--st-new-line); }
.wms-status-chip--picking { color: var(--st-pick); background: var(--st-pick-bg); border-color: var(--accent-line); }
.wms-status-chip--picked { color: var(--st-picked); background: var(--st-picked-bg); border-color: var(--st-picked-line); }
.wms-status-chip--packing { color: var(--st-pack); background: var(--st-pack-bg); border-color: var(--st-pack-line); }
.wms-status-chip--done { color: var(--st-done); background: var(--st-done-bg); border-color: var(--st-done-line); }
.wms-status-chip--blocked { color: var(--st-prob); background: var(--st-prob-bg); border-color: var(--st-blocked-line); }
.wms-status-chip--cancelled { color: var(--st-new); background: var(--st-new-bg); border-color: var(--st-new-line); }
/* Єдиний бейдж (задача 3970): warn — попередження, яке не блокує; neutral — факт або лічильник. */
.wms-status-chip--warn { color: var(--st-pack); background: var(--st-pack-bg); border-color: var(--st-pack-line); }
.wms-status-chip--neutral { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.wms-status-chip--neutral::before { display: none; }
/* Єдина мета-пігулка «значення + підпис» (замість packer-stat-pill / packing-meta-pill). */
.meta-pill { min-height: var(--control-2xs); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--bg); color: var(--ink-3); font: var(--text-meta); }
.meta-pill b { color: var(--ink); font-weight: 700; }
/* ТТН із підібраним НП-ключем: зелений + галочка (зчитувано і для дальтоніків). */
.ttn-verified { color: var(--st-done); }
.ttn-verified::after { content: "✓"; margin-left: var(--space-1); font-weight: 700; }
/* Кнопка «Друк ЕН (N)»: button.secondary специфічніший за .ttn-verified, тож колір/рамку задаємо окремо */
button.ttn-verified { border-color: var(--st-done-line); color: var(--st-done); }
button.ttn-verified::after { margin-left: var(--space-0-5); }

/* Atoms: metric */
.lead-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.lead-metric { min-height: 92px; padding: var(--space-4) var(--space-4); }
.lead-metric span { color: var(--ink-3); font: var(--text-section-label); letter-spacing: .06em; text-transform: uppercase; }
.lead-metric b { display: inline-block; margin-top: var(--space-2); color: var(--ink); font-size: var(--font-size-5xl); font-weight: 720; line-height: .95; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lead-metric.control-health-tile--blocked, .lead-metric.problem { box-shadow: inset 0 0 0 1px var(--st-prob-line), var(--shadow-1); background: var(--st-prob-bg); }
.lead-metric { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label label" "value unit" "hint hint"; align-content: start; gap: var(--space-1-5) var(--space-2); min-width: 0; }
.lead-metric > span:first-child { grid-area: label; margin: 0; align-self: start; }
.lead-metric > b { grid-area: value; margin: 0; align-self: end; }
.lead-metric .metric-hint { grid-area: hint; margin: 0; }
.metric-hint { margin-top: var(--space-2); color: var(--ink-3); font: var(--text-meta); min-width: 0; overflow-wrap: anywhere; }

/* Atoms: segmented control */
.date-presets { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); }

/* Atoms: table */
table, .tbl { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th, td { padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { background: var(--surface-2); color: var(--ink-3); font: 650 var(--font-size-xs)/1.2 var(--font-primary); letter-spacing: .05em; text-transform: uppercase; }
/* Atom: таблиця → картки на телефоні (N6, U-08): рядок — картка, клітинка — «підпис значення» з data-label;
   перша клітинка — заголовок картки. Без горизонтальної прокрутки всередині таблиці.
   Клітинка — двоколонкова таблиця: підпис — перша колонка, а весь вміст клітинки (текст, <br>, кілька елементів) браузер
   сам збирає в одну другу: значення завжди поруч зі своїм підписом, споживачам нічого обгортати не треба (рецензія R2).
   Обгортка карток займає їхню фактичну висоту: без стелі висоти й без прокрутки всередині сторінки — картки не залазять на
   наступний блок. */
html.phone-mode .tbl--cards thead { display: none; }
html.phone-mode .tbl--cards, html.phone-mode .tbl--cards tbody, html.phone-mode .tbl--cards tr { display: block; width: auto; min-width: 0; }
html.phone-mode .tbl--cards tr { margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
html.phone-mode .tbl--cards tr.is-problem { border-color: var(--st-prob-line); }
html.phone-mode .tbl--cards td { display: table; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; padding: var(--space-1) 0; border: 0; font-size: var(--font-size-lg); text-align: left; overflow-wrap: anywhere; }
html.phone-mode .tbl--cards td::before { content: attr(data-label); display: table-cell; width: 8.5em; padding-right: var(--space-2); color: var(--ink-3); font-size: var(--font-size-md); }
html.phone-mode .tbl--cards td:first-child { display: block; font-size: var(--font-size-2xl); font-weight: 700; }
html.phone-mode .tbl--cards td:first-child::before { content: none; }
html.phone-mode .tbl--cards .small { font-size: var(--font-size-md); }
html.phone-mode .table-scroll:has(> .tbl--cards) { max-height: none; overflow: visible; }
tr:last-child td { border-bottom: 0; }
tr.queue-row:hover td { background: var(--state-hover-surface); }
tr.selected td { background: var(--state-selected-bg); }
/* Atoms: banner */
.problem-banner, .warning-banner { padding: var(--space-4) var(--space-4); border: 1px solid var(--st-prob-line); border-radius: var(--radius); background: var(--st-prob-bg); color: var(--st-prob); font-weight: 650; }
.warning-banner { border-color: var(--st-pack-line); background: var(--st-pack-bg); color: var(--st-pack); }

/* Atoms: timeline */
.timeline-wrap { overflow-x: auto; }
details.secondary { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-3); }
details.secondary > summary { cursor: pointer; color: var(--ink-3); font: var(--text-section-label); letter-spacing: .06em; text-transform: uppercase; }