:root {
  --paper: #f1f3f6;
  --surface: #ffffff;
  --panel: #e6e9ee;
  --ink: #1b2130;
  --ink-2: #444b5c;
  --muted: #646a79;
  --line: #d4d9e1;
  --line-soft: #e4e7ed;
  --accent: #193b8f;
  --accent-hover: #12306f;
  --accent-soft: #e4eaf7;
  --ok: #1d6f47;
  --ok-bg: #dff0e6;
  --warn: #7c5200;
  --warn-bg: #fbeecb;
  --bad: #9c2626;
  --bad-bg: #f8dedb;
  --grey: #5f6470;
  --grey-bg: #e4e7ec;
  --doubt: #6b5400;
  --doubt-bg: #fff3bd;
  --doubt-line: #e3c34a;
  /* плитки готовності й перемикачі (спрощення А1, Olena 30.09): фарбується вся плитка, не текст */
  --tile-ok: #1f7a4d;      --tile-ok-ink: #fff;        /* є / приїхало / зварено */
  --tile-wait: #f0b429;    --tile-wait-ink: #1b2130;   /* чекаємо */
  --tile-na: #c9ced6;      --tile-na-ink: #1b2130;     /* не треба / ще не час */
  --radius: 8px;
  --shadow: 0 1px 2px rgba(27, 33, 48, .06), 0 4px 14px rgba(27, 33, 48, .06);
  --shadow-lift: 0 2px 4px rgba(27, 33, 48, .08), 0 10px 28px rgba(27, 33, 48, .14);
  --font: "Golos Text", system-ui, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.45 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #c9d5f2; color: var(--ink); }
:focus-visible { outline: 3px solid #7d98dc; outline-offset: 2px; border-radius: 4px; }
* { scrollbar-color: #b7bfcb transparent; scrollbar-width: thin; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.hidden { display: none !important; }
svg.i { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }

/* ---------- верхня панель ---------- */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px;
  padding: 0 28px; height: 60px; background: var(--ink); color: #eef0f5;
}
.brand { font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.brand span { color: #9fb3e8; font-weight: 500; }
.tabs { display: flex; gap: 4px; height: 100%; }
.tabs a { white-space: nowrap;
  display: flex; align-items: center; padding: 0 16px; color: #c8ccd8; text-decoration: none;
  font-weight: 500; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s;
}
.tabs a:hover { color: #fff; }
.tabs a.on { color: #fff; border-bottom-color: #8fa8ec; }
.me { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #c8ccd8; font-size: .9rem; }
.me .btn.quiet { color: #eef0f5; border: 1px solid #454e63; background: transparent; }
.login { max-width: 380px; margin: 60px auto; display: grid; gap: 14px; }
.login .msg { color: var(--bad); min-height: 1.2em; margin: 0; }

main { padding: 28px; max-width: 1560px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .grow { flex: 1; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); }

/* ---------- кнопки й поля ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font: 500 .95rem var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: #f7f8fa; border-color: #bcc3cf; }
.btn:active { background: var(--panel); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--accent); padding: 0 10px; }
.btn.quiet:hover { background: var(--accent-soft); }
.btn.small { min-height: 32px; padding: 0 12px; font-size: .85rem; }
.btn.danger { color: var(--bad); }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: #9aa6c7 transparent #9aa6c7 transparent; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

label.f { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--ink-2); font-weight: 500; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 9px 11px; min-height: 42px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #b9c0cc; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #d3ddf4; }
input::placeholder, textarea::placeholder { color: #767b88; }
textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
input.num { text-align: right; }
.doubt-field { background: var(--doubt-bg); border-color: var(--doubt-line); }

/* сегменти прапорців: один дотик */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.seg button {
  border: 0; background: transparent; font: 500 .85rem var(--font); color: var(--ink-2); padding: 0 12px;
  min-height: 36px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.seg button + button { border-left: 1px solid var(--line-soft); }
.seg button:hover { background: #f2f4f7; }
.seg button.on.wait { background: var(--tile-wait); color: var(--tile-wait-ink); font-weight: 600; }
.seg button.on.ok { background: var(--tile-ok); color: var(--tile-ok-ink); font-weight: 600; }
.seg button.on.na { background: var(--tile-na); color: var(--tile-na-ink); font-weight: 600; }
/* вибір, а не статус: фільтри, «варимо / з ангро» */
.seg button.on.sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.tile.qtag { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 5px; font-size: .76rem; white-space: normal; text-align: left; }
.col-note { margin: 0 0 8px; }
.aro-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.aro-hint:empty { display: none; }
.tile { display: inline-block; text-align: center; padding: 8px 4px; border-radius: 6px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.tile.ok { background: var(--tile-ok); color: var(--tile-ok-ink); }
.tile.wait { background: var(--tile-wait); color: var(--tile-wait-ink); }
.tile.na { background: var(--tile-na); color: var(--tile-na-ink); font-weight: 600; }
.flag { display: flex; flex-direction: column; gap: 6px; }
.flag > span { font-size: .8rem; color: var(--muted); font-weight: 500; }

/* ---------- мітки ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: .85rem; font-weight: 500; white-space: nowrap; background: var(--grey-bg); color: var(--ink);
}
.pill.s-new { background: #ece7f7; color: #4b3a86; }
.pill.s-wait { background: var(--warn-bg); color: var(--warn); }
.pill.s-ready { background: var(--accent-soft); color: var(--accent); }
.pill.s-work { background: #dcecf5; color: #1d5775; }
.pill.s-issue { background: var(--ok-bg); color: var(--ok); }
.pill.s-done { background: var(--grey-bg); color: var(--grey); }
.pill.s-pause { background: var(--bad-bg); color: var(--bad); }
.chip { display: inline-block; padding: 1px 8px; border-radius: 5px; background: var(--warn-bg); color: var(--warn); font-size: .82rem; font-weight: 500; margin: 1px 4px 1px 0; }
.chip.grey { background: var(--grey-bg); color: var(--grey); }
/* «Чого чекає» — кожен прапорець своїм кольором (палітра таблиці [Т]) */
.chip.w-pay { background: #f4cccc; color: #7d1a1a; }
.chip.w-tara { background: #fce5cd; color: #733d00; }
.chip.w-label { background: #d9d2e9; color: #45357d; }
.chip.w-fragrance { background: #cfe2f3; color: #1a4a73; }
.chip.w-docs { background: #d0e0e3; color: #24505a; }
/* вікно прапорців */
.flagdlg { border: 0; border-radius: 12px; padding: 20px 22px; width: min(1010px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  box-shadow: var(--shadow-lift); color: var(--ink); }
.flagdlg::backdrop { background: rgba(27, 33, 48, .35); }
.fd-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.fd-state { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fd-order { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.fd-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.fd-all { background: #f7f8fa; margin: 0 -10px; padding: 12px 10px; border-radius: 8px; }
.fd-name { flex: 1 1 100%; }
.flag.focus > span { color: var(--accent); font-weight: 650; }
.flag.focus .seg { box-shadow: 0 0 0 2px #7d98dc; }
.fd-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 760px) { .flagdlg .seg { flex-wrap: wrap; } }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.green { background: #2f9a64; } .dot.yellow { background: #d9a21b; } .dot.red { background: #cf3c3c; } .dot.none { background: transparent; border: 2px solid #aab1bd; }
.badge-doubt { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 5px; background: var(--doubt-bg); color: var(--doubt); font-size: .8rem; font-weight: 500; }

/* ---------- список ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.toolbar input[type=search] { width: 280px; }
.toolbar .seg button { min-height: 40px; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
/* екран «Безпека» */
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tbl th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; white-space: nowrap; }
table.tbl td:last-child { white-space: normal; min-width: 11rem; }
.sheet:has(table.tbl) { overflow-x: auto; }
/* «Загальний список 4» (спрощення А3): № · клієнт · до · 5 плиток · дошка */
.olist { --ol-cols: 96px minmax(0, 1fr) 60px repeat(5, 96px) 164px; }
.ol-row { display: grid; grid-template-columns: var(--ol-cols); align-items: center; column-gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
.ol-head { font-size: .8rem; font-weight: 600; color: var(--muted); background: #f7f8fa; border-bottom-color: var(--line); padding-top: 11px; padding-bottom: 11px; }
.ol-head span:nth-child(n+4):nth-child(-n+8) { text-align: center; }
.ol-group { background: var(--panel); font-weight: 600; font-size: .9rem; padding: 9px 14px; color: var(--ink-2); }
.ol-order { cursor: pointer; transition: background .12s; min-height: 64px; }
.ol-order:hover { background: #f7f8fb; }
.ol-num { font-weight: 650; white-space: nowrap; }
.ol-who { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.ol-whotext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ol-client { font-weight: 650; }
.ol-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--grey-bg); color: var(--ink-2); font-size: .75rem; font-weight: 700; vertical-align: 1px; }
.ol-sum { font-size: .875rem; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ol-label { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; }
.ol-meta { font-size: .8rem; color: var(--muted); }
.ol-tog { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -4px 0 0 -6px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; }
.ol-tog:hover { background: var(--accent-soft); color: var(--accent); }
.ol-due { font-weight: 500; white-space: nowrap; }
.ol-due.late { color: var(--bad); font-weight: 700; }
.ol-row .tile { white-space: normal; line-height: 1.15; min-height: 36px; display: flex; align-items: center; justify-content: center; }
button.tile { border: 0; font-family: inherit; cursor: pointer; width: 100%; }
button.tile:hover { box-shadow: 0 0 0 2px #7d98dc; }
.ol-prod { background: #fafbfc; }
.ol-pname { padding-left: 32px; font-size: .9rem; }
.ol-why { font-size: .875rem; color: var(--ink-2); }
.ol-board .btn { width: 100%; justify-content: center; }
.ol-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 14px; font-size: .875rem; color: var(--ink-2); }
.ol-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ol-legend i.tile { width: 20px; height: 20px; padding: 0; }
@media (max-width: 1100px) {
  /* планшет і телефон: плитки під клієнтом, одним рядком */
  .ol-head { display: none; }
  .ol-row { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 4px; row-gap: 8px; padding: 12px 14px; }
  .ol-order .ol-num { grid-column: 1 / 3; }
  .ol-order .ol-due { grid-column: 3 / 6; text-align: right; }
  .ol-order .ol-who { grid-column: 1 / -1; }
  .ol-order .ol-due::before { content: "до "; font-weight: 400; color: var(--muted); }
  .ol-board { grid-column: 1 / -1; }
  .ol-prod > span:empty { display: none; }
  .ol-pname { grid-column: 1 / -1; padding-left: 0; font-weight: 600; }
  .ol-prod .ol-board .tile { display: inline-flex; min-height: 32px; padding: 4px 14px; }
  .ol-row .tile { flex-direction: column; min-height: 44px; padding: 5px 2px; font-size: .75rem; overflow-wrap: anywhere; }
  .ol-row .tile::before { content: attr(data-k); font-size: .7rem; font-weight: 500; opacity: .85; }
}
.empty { padding: 48px 24px; text-align: center; color: var(--ink-2); }
.empty h3 { margin-bottom: 8px; }

/* ---------- картка замовлення ---------- */
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; box-shadow: var(--shadow); margin-bottom: 20px; }
.sheet > h2 { margin-bottom: 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid .wide { grid-column: span 2; }
.from-mail { border: 1px dashed #b9c6ea; background: #f6f8fd; border-radius: 10px; padding: 18px; margin-bottom: 20px; }

.pos { border-top: 1px solid var(--line-soft); padding: 18px 0 20px; }
.pos:first-of-type { border-top: 0; padding-top: 4px; }
.pos-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pos-n { width: 30px; height: 30px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-weight: 600; font-size: .9rem; }
.pos-head .spacer { flex: 1; }
.checkline { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); min-height: 36px; cursor: pointer; }
.checkline input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: var(--bad-bg); color: var(--bad); font-size: .9rem; }
.ref { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.doubts { margin-top: 10px; padding: 10px 14px; border-radius: 6px; background: var(--doubt-bg); color: var(--doubt); font-size: .88rem; }
.doubts ul { margin: 4px 0 0; padding-left: 18px; }
/* фото тари й етикетки (етап В1) */
.photos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.photos:empty { display: none; }
.ph { position: relative; margin: 0; width: 96px; }
.ph img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); }
.ph figcaption { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.ph-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(27, 33, 48, .72); color: #fff; cursor: pointer; }
.ph-del .i { width: 14px; height: 14px; }
.ph-add { cursor: pointer; }
.ph-add.is-busy { opacity: .6; pointer-events: none; }
.facts { margin-top: 12px; font-size: .9rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.facts b { color: var(--ink); font-weight: 600; }
.issue-box { display: inline-flex; gap: 8px; align-items: center; }
.issue-box input { width: 150px; min-height: 36px; padding: 5px 8px; }
.savebar {
  position: sticky; bottom: 0; z-index: 10; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 0 -28px; padding: 14px 28px; background: rgba(241, 243, 246, .94); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.savebar .msg { color: var(--ink-2); font-size: .9rem; }
.savebar .msg.err { color: var(--bad); font-weight: 500; }
.events { list-style: none; margin: 0; padding: 0; }
.events li { display: grid; grid-template-columns: 140px 130px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.events li:last-child { border-bottom: 0; }
.note-src { white-space: pre-wrap; font-size: .88rem; color: var(--ink-2); background: #f7f8fa; border-radius: 6px; padding: 10px 12px; margin-top: 10px; }

/* ---------- дошка ---------- */
.board-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.board { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.bgrid { display: grid; grid-template-columns: 128px repeat(5, minmax(172px, 1fr)); min-width: 1000px; }
.bgrid > div { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.bgrid > div:nth-child(6n), .bgrid > .folded-row { border-right: 0; }
.dayhead { padding: 12px; background: #f7f8fa; font-weight: 600; font-size: .9rem; }
.dayhead.today { color: var(--accent); background: var(--accent-soft); }
.dayhead .muted { font-weight: 400; }
.stname { padding: 12px; background: #f7f8fa; font-weight: 600; font-size: .9rem; }
.stname .muted { display: block; font-weight: 400; font-size: .78rem; margin-top: 2px; }
.cell { padding: 8px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; transition: background .15s, box-shadow .15s; }
.cell.c-green { background: #f1f8f3; } .cell.c-yellow { background: #fdf7e6; } .cell.c-red { background: #fbeceb; }
.cell.drop-ok { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.cell.fit { box-shadow: inset 0 0 0 3px #2f9a64; }
.cellhead { display: flex; justify-content: space-between; gap: 6px; font-size: .78rem; color: var(--ink-2); font-weight: 500; }
.cellhead .free { color: var(--muted); font-weight: 400; }
.cell.c-red .cellhead { color: var(--bad); }
.reason { font-size: .78rem; color: var(--bad); font-weight: 600; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px;
  box-shadow: 0 1px 2px rgba(27, 33, 48, .07); cursor: grab; font-size: .84rem; line-height: 1.35;
  transition: box-shadow .15s, transform .15s, opacity .15s;
}
.card:hover { box-shadow: var(--shadow-lift); }
.card.dragging { opacity: .45; }
.card .t { font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.card .sub { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.card .tag { font-size: .72rem; padding: 0 6px; border-radius: 4px; background: var(--panel); color: var(--ink-2); }
.card .tag.big { background: #e9e2f7; color: #4b3a86; }
.card.bad { border-color: #e4a39c; background: #fff8f7; }
.card.bad .prob { color: var(--bad); font-size: .76rem; font-weight: 600; margin-top: 3px; }
.card.grey { background: #eef0f3; color: var(--grey); border-style: dashed; }
.card.done { border-color: #a9d4ba; }
.card .hint { font-size: .74rem; color: var(--accent); margin-top: 3px; }
.card .wait:not(.tile) { font-size: .76rem; color: var(--warn); margin-top: 3px; font-weight: 500; }   /* не перебиває плитку «чекає: …» (контраст 3,7:1, огляд 01.10) */
.card .acts { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.card .acts button { border: 0; background: transparent; color: var(--accent); font: 500 .74rem var(--font); padding: 3px 5px; border-radius: 4px; cursor: pointer; }
.card .acts button:hover { background: var(--accent-soft); }
.card .num { color: var(--muted); font-weight: 500; font-size: .75rem; white-space: nowrap; }
@media (hover: hover) {
  .card .acts { display: none; }
  .card:hover .acts, .card:focus-within .acts { display: flex; }
}

.side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
.col { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.col h3 { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; }
.col .items { padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.col.drop-ok { box-shadow: 0 0 0 2px var(--accent); }
.kgroup summary { cursor: pointer; font-weight: 600; font-size: .88rem; padding: 6px 4px; color: var(--ink-2); list-style-position: inside; }
.kgroup[open] summary { margin-bottom: 4px; }
.kgroup > .card { margin-bottom: 6px; }
.col .empty-small { color: var(--muted); font-size: .85rem; padding: 6px 4px; }
.weeknav { display: flex; gap: 8px; align-items: center; }
.outside { margin-top: 16px; font-size: .9rem; color: var(--ink-2); }
.outside summary { cursor: pointer; font-weight: 500; }
.outside ul { margin: 8px 0 0; padding-left: 18px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); margin: 12px 0 0; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); }

.inline-form { background: #f7f8fa; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.inline-form label.f { min-width: 140px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 50;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: var(--shadow-lift);
  transition: opacity .2s ease-out, transform .25s cubic-bezier(.16, 1, .3, 1); max-width: 90vw;
  pointer-events: none;   /* лише повідомляє: не перекриває кнопку друку внизу екрана цеху */
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--bad); }

.skeleton { height: 48px; border-radius: 6px; background: linear-gradient(90deg, #e6e9ee 25%, #f2f4f7 50%, #e6e9ee 75%); background-size: 200% 100%; animation: sk 1.2s ease-in-out infinite; margin: 10px 14px; }
@keyframes sk { to { background-position: -200% 0; } }

@media (max-width: 1200px) {
  .board-wrap { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 720px) {
  main { padding: 16px; }
  .top { padding: 0 16px; gap: 14px; height: auto; min-height: 56px; flex-wrap: wrap; }
  .tabs a { padding: 0 10px; min-height: 48px; }
  /* вкладки прокручуються в своїй смузі, сторінка — ні (огляд 30.09: горизонтальна прокрутка на телефоні) */
  .tabs { order: 3; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .me { margin-left: 0; padding-bottom: 8px; }
  .savebar { margin: 0 -16px; padding: 12px 16px; }
  .toolbar input[type=search] { width: 100%; }
  .toolbar .seg { max-width: 100%; overflow-x: auto; }
  .grid .wide { grid-column: auto; }
  .events li { grid-template-columns: 1fr; gap: 2px; }
  .sheet { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- назва RP (журнал) ---------- */
.rp-title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.card .rpn { font-size: .78rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- довідник клієнтів ---------- */
.client { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; box-shadow: var(--shadow); }
.client-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.client-head h3 { font-size: 1.08rem; margin-right: 4px; }
.client-note { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; background: var(--doubt-bg); color: var(--doubt); font-size: .88rem; }
.evidence { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 3px; }
.evidence li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 12px; font-size: .9rem; align-items: baseline; }
.evidence .src { color: var(--muted); font-size: .82rem; }
.evidence .txt { overflow-wrap: anywhere; }
.client-edit { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.client-edit label.f { min-width: 200px; flex: 1 1 200px; }
.client-edit .spacer { flex: 1 0 0; }
@media (max-width: 640px) {
  .evidence li { grid-template-columns: 1fr; gap: 0; margin-bottom: 4px; }
}

/* ---------- прив'язка журналу (план v2 п.8) ---------- */
/* скринька «Звірити журнал» (етап В6): на картці лише значок, питання — у вікні по одному */
.card .jbadge { margin-top: 4px; border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent);
  font: 600 .74rem var(--font); padding: 2px 8px; border-radius: 4px; cursor: pointer; }
.jb-q { margin: 6px 0 10px; }
.jb-list { display: flex; flex-direction: column; gap: 6px; }
.jb-row { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.jb-row .grow { flex: 1; min-width: 0; }
.fd-foot .spacer { flex: 1; }
.tray .tray-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.tray .tray-pick { text-align: left; border: 1px solid var(--line); background: #f7f8fa; border-radius: 6px; padding: 6px 8px; font: 400 .82rem var(--font); cursor: pointer; }
.tray .tray-pick:hover { background: var(--accent-soft); border-color: #b9c7ea; }

/* ---------- перемикач дільниць (план v2 п.4) ---------- */
.stname, .dayhead.corner { padding: 6px; }
.st-toggle { display: block; width: 100%; height: 100%; text-align: left; border: 1px solid transparent; border-radius: 8px;
  background: transparent; padding: 6px 8px; font: 600 .9rem var(--font); color: var(--ink); cursor: pointer; }
.st-toggle:hover { background: var(--accent-soft); }
.st-toggle.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.st-toggle.on .muted, .st-toggle.on .st-sum { color: #dfe6fb; }
.st-toggle .muted { display: block; font-weight: 400; font-size: .78rem; margin-top: 2px; }
.st-toggle .st-sum { display: block; font-weight: 500; font-size: .76rem; margin-top: 6px; color: var(--accent); }
.st-toggle.all { text-align: center; font-size: .85rem; }
.bgrid > .folded-row { grid-column: span 5; background: #f7f8fa; }
.stname.folded .st-toggle { font-weight: 500; color: var(--ink-2); }

/* ---------- тип bulk (план v2 п.1): смуга на картці варки й у довіднику RP ---------- */
:root { --bt-emulsion: #2f6fce; --bt-par: #1f8a70; --bt-scrub: #b7791f; --bt-liquid: #0f8aa8; --bt-none: #a3a9b5; }
.card.bt-liquid, .rp-item.bt-liquid { border-left: 4px solid var(--bt-liquid); }
.card.bt-emulsion, .rp-item.bt-emulsion { border-left: 4px solid var(--bt-emulsion); }
.card.bt-par, .rp-item.bt-par { border-left: 4px solid var(--bt-par); }
.card.bt-scrub, .rp-item.bt-scrub { border-left: 4px solid var(--bt-scrub); }
.card.bt-none, .rp-item.bt-none { border-left: 4px dashed var(--bt-none); }
.rp-list { display: grid; gap: 6px; }
.rp-item { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto 8.5rem; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.rp-code { font-weight: 650; }
.rp-name { overflow-wrap: anywhere; }
.rp-name-in { width: 100%; font: inherit; font-weight: 600; border: 1px solid transparent; background: transparent; padding: 2px 4px; border-radius: 4px; }
.rp-name-in:hover, .rp-name-in:focus { border-color: var(--line, #ccc); background: #fff; }   /* назва RP у програмі (Olena 02.10) */
.rp-item .seg button { min-height: 36px; }
.rp-item .seg button.on.bt { background: var(--accent); color: #fff; }
@media (max-width: 760px) {
  .rp-item { grid-template-columns: 4rem minmax(0, 1fr); }
  .rp-item .seg, .rp-item > .btn, .rp-item .rp-spacer { grid-column: 1 / -1; }
}

/* ---------- картка фасування: можна фасувати (план v2 п.3, п.7) ---------- */
.card .ready { font-size: .76rem; font-weight: 600; margin-top: 3px; }
.card .ready.ok { color: var(--ok); }
.card .ready.no { color: var(--warn); }
.row-ready { font-size: .85rem; margin-top: 4px; }
.row-ready.ok { color: var(--ok); }
.row-ready.no { color: var(--warn); }

/* ---------- друк (план v3): завдання цеху й PDF замовлення ---------- */
.print-bar { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.print-bar .spacer { flex: 1; }
.print-bar .f.inline { flex-direction: row; align-items: center; gap: 8px; }
.print-page { background: #fff; padding: 28px 32px; border: 1px solid var(--line); border-radius: 10px; }
.print-page h1 { font-size: 1.35rem; margin-bottom: 12px; }
.print-page h2 { font-size: 1.05rem; margin: 20px 0 8px; }
.ptable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ptable th, .ptable td { border: 1px solid #b9c0cc; padding: 5px 7px; text-align: left; vertical-align: top; }
.ptable th { background: #eef1f5; font-weight: 600; }
.ptable td.warn { color: var(--warn); font-weight: 600; }
.ptable td.tick { width: 70px; }
@media print {
  .top, .no-print, #toast { display: none !important; }
  body { background: #fff; }
  main { padding: 0 !important; }
  .print-page { border: 0; padding: 0; }
  .ptable { font-size: 10pt; }
  .ptable tr { break-inside: avoid; }
  @page { size: A4 landscape; margin: 12mm; }
}
/* дошка: завантаження від зеленого (вільно) до червоного */
.cell[style*="--load-h"]:not(.drop-ok) { background: hsl(var(--load-h) 62% 93%); }
.loadbar { height: 5px; border-radius: 3px; background: hsl(var(--load-h) 30% 86%); overflow: hidden; }
.loadbar i { display: block; height: 100%; background: hsl(var(--load-h) 58% 44%); }
.flagdlg .seg button { padding: 0 9px; }
/* перемикач цехів: один цех — на всю ширину, черга й лоток під дошкою (Olena 29.09) */
.shopbar { margin-bottom: 14px; }
.shopbar button { min-height: 40px; padding: 0 16px; font-size: .92rem; }
/* один цех: черга лишається праворуч від дошки — тягнути поруч, а не через увесь екран (Olena 30.09) */
.board-wrap.focus .bgrid { grid-template-columns: 140px repeat(5, minmax(160px, 1fr)); }
.board-wrap.focus .cell { min-height: 150px; }
.board-wrap.focus .card { font-size: .9rem; }
.board-wrap.focus .card .sub { white-space: normal; }
/* інструкція */
.help-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.help-toc { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.help-toc a { padding: 6px 8px; border-radius: 6px; text-decoration: none; font-size: .92rem; }
.help-toc a:hover { background: var(--accent-soft); }
.help { max-width: 980px; line-height: 1.55; }
.help h2 { margin: 28px 0 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); scroll-margin-top: 80px; }
.help section:first-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.help h3 { margin: 18px 0 6px; }
.help img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; margin: 12px 0; box-shadow: var(--shadow); }
.help table { border-collapse: collapse; margin: 10px 0; } .help td, .help th { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.help dt { font-weight: 600; margin-top: 10px; } .help dd { margin: 2px 0 0; color: var(--ink-2); }
@media (max-width: 900px) { .help-wrap { grid-template-columns: 1fr; } .help-toc { position: static; } }
/* агент-оркестратор: пропозиції «з Так» */
.agentbox { margin-bottom: 16px; border-left: 4px solid var(--accent); }
.agentbox h2 { margin-bottom: 8px; }
.prop { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.prop .grow { flex: 1; min-width: 240px; }
.pwbox { background: var(--ok-bg); color: var(--ok); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.pwbox code { font-size: 1.1rem; font-weight: 700; color: var(--ink); background: #fff; padding: 2px 8px; border-radius: 5px; user-select: all; }

/* ручка перетягування і вікно «Куди поставити» (Olena 30.09) */
.card .grip { color: var(--muted); margin-right: 5px; font-weight: 400; letter-spacing: -1px; }
.card:hover .grip { color: var(--accent); }
.movedlg { width: min(720px, calc(100vw - 24px)); }
.movedlg h3 { margin: 16px 0 8px; font-size: .95rem; }
.md-days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.md-days .btn { min-width: 108px; justify-content: center; }
.md-spread { border-top: 1px solid var(--line-soft); margin-top: 14px; }
.md-spread.focus h3 { color: var(--accent); }
.md-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 8px; }
.md-row .f input.num { width: 90px; }
.md-row .ok { color: var(--ok); } .md-row .bad { color: var(--bad); }

/* лист замовлення (цех) — як друкує Марина (Olena 30.09) */
.sheet-page + .sheet-page { margin-top: 28px; }
.sheet-t th { width: 44%; background: #f6f7f9; font-weight: 500; }
.sheet-t .sheet-sub th { background: #e3e8f0; font-weight: 650; width: auto; }
.sheet-t .sheet-big td { font-weight: 650; font-size: 1.02rem; }
.sheet-blank { display: inline-block; min-width: 180px; min-height: 1.3em; }
@media print { .sheet-page + .sheet-page { break-before: page; margin-top: 0; } .sheet-t { font-size: 11pt; } }
.plan-t td:last-child { width: 150px; }
.plan-t .reason { color: var(--bad); }

/* продукт → аромат → тара (Olena 30.09) */
/* картка замовлення «Варіант Olena 3» (спрощення А5) */
.oc-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; margin-bottom: 16px; }
.oc-head .sheet { margin: 0; }
.oc-box { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.hd { font-size: .8rem; font-weight: 600; color: var(--muted); }
.fw4 { font-weight: 400; }
.oc-num { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-num .num { font-size: 1.6rem; font-weight: 650; }
.oc-menus { display: flex; gap: 8px; flex-wrap: wrap; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 260px; display: grid; gap: 10px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift); }
.menu-list a { display: block; padding: 8px 6px; border-radius: 6px; text-decoration: none; }
.menu-list a:hover { background: var(--accent-soft); }
.oc-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px 22px; }
.oc-line .spacer, .prod-head .spacer, .aro-head .spacer, .tara-line .spacer { flex: 1; }
.oc-line .f { width: 190px; }
.oc-strip { padding: 16px 22px; }
.strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.strip-title { margin-right: 8px; }
.strip-row .tile { min-width: 104px; padding: 10px 14px; }
.strip-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 16px; border-radius: 8px;
  background: var(--tile-ok); color: var(--tile-ok-ink); }
.strip-go .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.strip-go .btn { border-color: #fff; }
.strip-hint { margin: 10px 0 0; }
.btn.add { border-style: dashed; border-color: #b7bfcb; color: var(--accent); background: transparent; }
.oc-add { margin: -4px 0 20px; }
.prod { padding: 20px 22px; }
.prod-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.prod-sum { color: var(--ink-2); }
.prod-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.bulk-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.aro { background: #f6f7fa; border-radius: 10px; padding: 16px 18px; margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.aro-head { display: flex; align-items: center; gap: 8px; }
.aro-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) 80px 110px 110px auto; gap: 12px; align-items: end; }
input.ro { background: var(--panel); border-color: var(--line-soft); font-weight: 600; }
.more > summary { cursor: pointer; color: var(--accent); font-size: .9rem; font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.lab-line { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.taras { display: flex; flex-direction: column; gap: 10px; }
.taras .pos { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; }
.taras .pos-head { margin-bottom: 8px; }
.tara-title { font-weight: 600; }
.tara-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) 90px 90px minmax(0, 1.2fr); gap: 12px; align-items: end; }
.tara-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.tara-line .seg button { min-height: 38px; padding: 0 12px; }
.line-name { font-size: .875rem; color: var(--ink-2); }
.line-name b { color: var(--accent); }
.flag-row { flex-direction: row; align-items: center; gap: 10px; }
.doubts.focus { box-shadow: 0 0 0 3px var(--doubt-line); }
.tbl-wrap { overflow-x: auto; }
.sum-t td.n, .sum-t th.n { text-align: right; }
.sum-t tr.total td { font-weight: 700; }
.mail-go { margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.bad { color: var(--bad); }
@media (max-width: 1000px) {
  .oc-head { grid-template-columns: 1fr; }
  .prod-grid, .aro-grid, .tara-grid { grid-template-columns: 1fr 1fr; }
  .prod-grid > .flag, .aro-grid > .flag, .aro-grid > label:first-child, .tara-grid > label:first-child, .tara-grid > label:last-child { grid-column: 1 / -1; }
  .oc-line .f { width: 100%; }
  .tara-line .seg, .lab-line .seg, .flag .seg { flex-wrap: wrap; }
  .flag-row { flex-direction: column; align-items: flex-start; }
  .menu-list { max-width: calc(100vw - 48px); }
}
@media (max-width: 720px) {
  /* нижня панель — один-два рядки: «Історія змін» є в меню «Ще» */
  .savebar [data-history] { display: none; }
  .savebar .issue-box input { width: 138px; }
}

.prod-foot { margin-top: 12px; }
.spec-t .spec-prod td { background: #eef1f5; }
.spec-t td.num, .spec-t th.num { text-align: right; white-space: nowrap; }
.spec-t tfoot th { background: #eef1f5; }

/* звірка з [Т] */
.ts-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ts-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 12px; }
.ts-cols h3 { font-size: .9rem; margin-bottom: 6px; color: var(--ink-2); }
.ts-prod { margin-bottom: 8px; }
.ts-aro { padding-left: 14px; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 760px) { .ts-cols { grid-template-columns: 1fr; } }
.chip.warn { background: #fdecc8; color: #7a4a00; }
.btn.sky-err { border-color: var(--bad); color: var(--bad); }   /* Skynum не відповів (агент С4) */

/* наряди на день (етап В, Olena 01.10): окремо по цехах, A4 книжкою, принтер ч/б — стани словами, фото в сірому */
.nr-choose { max-width: 860px; }
.nr-choose h2 { font-size: 1rem; margin: 18px 0 6px; }
.nr-pick { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.nr-pick .grow { flex: 1; min-width: 0; }
.nr-wrap { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.nr-page { page: naryad; width: 100%; max-width: 794px; box-sizing: border-box; background: #fff; color: #1b2130;
  padding: 30px 34px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 10px; }
.nr-head { display: flex; align-items: flex-end; gap: 16px; border-bottom: 2px solid #1b2130; padding-bottom: 8px; }
.nr-head h1 { font-size: 1.4rem; margin: 2px 0 0; }
.nr-kicker { font-size: .78rem; color: #444b5c; }
.nr-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .8rem; text-align: right; }
.nr-meta b { font-size: 1rem; }
.nr-top { display: flex; gap: 14px; align-items: flex-start; }
.nr-top > .nr-t { flex: 1; }
.nr-phs { display: flex; flex-direction: column; gap: 8px; flex: none; }
.nr-ph { margin: 0; width: 200px; }
.nr-ph img { display: block; width: 200px; height: 200px; object-fit: cover; border: 1px solid #9aa3b2; border-radius: 6px; }
.nr-ph figcaption { font-size: .72rem; color: #444b5c; }
.nr-noph { height: 120px; border: 1px dashed #9aa3b2; border-radius: 6px; display: grid; place-items: center; padding: 10px;
  font-size: .75rem; color: #444b5c; text-align: center; box-sizing: border-box; }
.nr-t { width: 100%; border-collapse: collapse; font-size: .8rem; }
.nr-t th, .nr-t td { border: 1px solid #9aa3b2; padding: 5px 8px; text-align: left; vertical-align: top; }
.nr-t th { background: #eef1f5; font-weight: 600; width: 34%; }
.nr-grid th { width: auto; }
.nr-big td, td.nr-big, .nr-big { font-size: .95rem; font-weight: 700; }
.nr-sub { font-weight: 400; font-size: .78rem; }
.nr-wait { font-weight: 600; font-size: .8rem; text-decoration: underline; }
.nr-hand td, td.nr-hand { height: 26px; }
.nr-note { border: 2px solid #1b2130; border-radius: 6px; padding: 7px 10px; font-size: .84rem; }
.nr-aro { font-size: .86rem; font-weight: 700; background: #1b2130; color: #fff; padding: 5px 8px; margin-top: 6px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.nr-foot { display: flex; gap: 36px; font-size: .8rem; border-top: 1px solid #9aa3b2; padding-top: 10px; margin-top: auto; }
.nr-small { font-size: .7rem; color: #444b5c; margin: 0; }
@media (max-width: 720px) { .nr-top { flex-direction: column; } .nr-ph, .nr-ph img { width: 100%; height: auto; }
  .nr-page { padding: 16px; overflow-x: auto; } .print-bar { flex-wrap: wrap; } }
@page naryad { size: A4 portrait; margin: 10mm; }
@media print {
  .nr-wrap { display: block; }
  .nr-page { border: 0; border-radius: 0; padding: 0; max-width: none; min-height: 0; break-after: page; }
  .nr-page:last-child { break-after: auto; }
  .nr-ph img { filter: grayscale(1); }
  .nr-t tr, .nr-note { break-inside: avoid; }
}

/* Цех · Сьогодні (етап В5): телефон 390 px без прокрутки вбік; великі картки, одна дія — друк наряду */
.sh { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 84px; }
.sh-day { display: flex; align-items: center; gap: 10px; }
.sh-arrow { min-width: 48px; min-height: 48px; display: inline-grid; place-items: center; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--ink); }
.sh-arrow .i { width: 22px; height: 22px; }
.sh-daytitle { flex: 1; display: flex; flex-direction: column; align-items: center; }
.sh-daytitle b { font-size: 1.35rem; }
.sh-daytitle span { color: var(--muted); font-size: .9rem; }
.sh-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sh-chip { flex: none; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: .95rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sh-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sh-chip .n { font-size: .78rem; font-weight: 700; opacity: .85; }
.sh-head { display: flex; align-items: baseline; gap: 8px; }
.sh-head b { font-size: 1.1rem; flex: 1; }
.sh-head span { color: var(--muted); font-size: .9rem; }
.sh-list { display: flex; flex-direction: column; gap: 12px; }
.sh-task { background: var(--surface); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.sh-empty { align-items: center; text-align: center; padding: 28px 16px; }
.sh-top { display: flex; gap: 12px; min-width: 0; }
.sh-ph { flex: none; }
.sh-ph img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.sh-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-qty { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-prod { font-size: 1.02rem; font-weight: 600; overflow-wrap: anywhere; }
.sh-k { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.sh-st { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.sh-st.ok { background: var(--tile-ok); color: var(--tile-ok-ink); }
.sh-st.wait { background: var(--tile-wait); color: var(--tile-wait-ink); }
.sh-facts { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.sh-facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px; }
.sh-facts dt { font-size: .82rem; color: var(--muted); }
.sh-facts dd { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.sh-print { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px 16px; background: var(--paper); border-top: 1px solid var(--line);
  display: flex; justify-content: center; z-index: 5; }
.sh-print .btn { width: 100%; max-width: 560px; min-height: 52px; justify-content: center; font-size: 1.02rem;
  white-space: normal; text-align: center; }

/* нафасоване видно одразу (Olena 02.10) */
.badge-packed { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 10px;
  background: #dff3e6; color: #1d6b3a; font-weight: 600; font-size: .85em; }
.badge-packed svg { width: 13px; height: 13px; }
.ol-row.ol-packed { background: #f1faf4; }
.pos.pos-packed { border-left: 4px solid #3a9b5c; background: #f6fbf8; }
.packed-head { display: flex; align-items: center; gap: 6px; margin: -2px 0 8px; padding: 6px 10px; border-radius: 6px;
  background: #dff3e6; color: #1d6b3a; font-weight: 600; }
.packed-head svg { width: 16px; height: 16px; }

/* «Загальна» на дошці: колонки-етапи (Olena 02.10, скрін BoardList) */
.stages { display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.st-col { background: #eceef2; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 420px; }
.st-col h3 { margin: 0; padding: 2px 2px 0; display: flex; align-items: baseline; gap: 6px; font-size: .95rem; }
.st-col h3 .n { margin-left: auto; font-size: .85rem; color: var(--ink-2); }
.st-sub { margin: 0; padding: 0 2px 4px; font-size: .78rem; color: var(--ink-2); line-height: 1.35; }
.st-empty { margin: 0; padding: 6px 2px; font-size: .8rem; color: var(--muted); }
.st-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .05); color: var(--ink); text-decoration: none; }
a.st-card:hover { box-shadow: var(--shadow-lift); }
.st-packed .st-card, .st-ready .st-card { background: #e3f4ea; border-color: #1f7a4d; }
.st-col.st-ready { background: #d7efe0; }
.st-t { font-size: .85rem; font-weight: 700; }
.st-m { font-size: .78rem; color: var(--ink-2); }
.st-chip { align-self: flex-start; font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.st-chip.ok { background: var(--tile-ok); color: var(--tile-ok-ink); }
.st-chip.wait { background: var(--tile-wait); color: var(--tile-wait-ink); }
.st-chip.sky { background: var(--accent-soft); color: var(--accent); }
.st-chip.na { background: #e5e7eb; color: #374151; }

/* «Дошка | Список»: маленький перемикач праворуч від заголовка; «Список» — картки тижня рядками (Olena 02.10) */
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-row h1 { margin: 0; }
.viewswitch { margin-left: auto; }
.viewswitch a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; font-size: .88rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.viewswitch a + a { border-left: 1px solid var(--line-soft); }
.viewswitch a.on { background: #111827; color: #fff; }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.list-tools .chk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.blist-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.blist { width: 100%; min-width: 1050px; border-collapse: collapse; font-size: .9rem; }
.blist th { text-align: left; padding: 10px 12px; background: #f7f8fa; font-size: .78rem; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.blist td { padding: 8px 12px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.blist tr.newday td { border-top: 2px solid var(--line); }
.blist td.d { font-weight: 600; white-space: nowrap; }
.blist td.d.today { color: var(--accent); }
.blist .rpn { color: var(--ink-2); }
.blist tr.done td { background: #e3f4ea; }
.blist tr.done td.fact { color: #14532d; font-weight: 600; }
.blist tr.grey td { background: #f3f4f6; }
.st-chip .i { width: 12px; height: 12px; vertical-align: -1px; }
.st-chip.ok-line { background: #fff; color: var(--ok); border: 1px solid var(--tile-ok); }
/* шапка дошки: заголовок і маленький перемикач — рядок, підказка — рядок, кнопки — під ними (Olena 02.10) */
.board-head { align-items: center; }
.board-head .grow { flex: 1 1 100%; }
.board-head .grow p { max-width: 980px; }
.board-head > .btn, .board-head .weeknav .btn, .board-head label.btn { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.list-tools .chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--tile-ok); }
.blist td:nth-child(5) { white-space: nowrap; }