/* Накладні: спільний вигляд приходу аптеки й продажу худоби.
   Було локальним <style> у pryhid.html — винесено, щоб сторінка продажу
   виглядала ТОЧНО так само (Роман 2026-09-21: «подивися на аптеку і зроби
   як у аптеці»). Правити вигляд накладних — тут, в одному місці. */
/* Дизайн — 1-в-1 «нова видача» (vydacha.html); свій лише акцент вкладок */
.vyd{--v-field:#e8f1fc; --v-field-b:#cfe0f5; --v-bad:#b4232a; --v-cat:#0f9d8f}
.vyd .cat-tabs{display:flex; gap:22px; border-bottom:2px solid var(--border); margin-bottom:14px}
.vyd .cat-tab{border:0; background:none; font:inherit; font-size:15px; font-weight:600;
  color:var(--text-soft); padding:8px 2px 10px; cursor:pointer; position:relative}
.vyd .cat-tab:hover,.vyd .cat-tab.is-active{color:var(--v-cat)}
.vyd .cat-tab.is-active::after{content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:3px; background:var(--v-cat); border-radius:2px}
.vyd-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.vyd .db-btn{height:34px; padding:0 10px; background:var(--surface,#fff);
  border:1px solid var(--border); border-radius:8px; cursor:pointer; font:inherit;
  font-size:14px; color:var(--text)}
.vyd .db-btn:hover{border-color:var(--primary); color:var(--primary)}
.vyd .add-inv{color:var(--primary); border-color:var(--v-field-b); font-weight:600}
.vyd .icon-btn{display:inline-flex; align-items:center; justify-content:center;
  width:36px; padding:0; color:var(--text-soft)}
.vyd .icon-btn:hover{color:var(--primary)}
.vyd .scanbox{position:relative; margin-bottom:12px}
.vyd .scan{width:100%; padding:14px 52px 14px 46px; font-size:17px; border-radius:12px;
  border:2px solid var(--v-field-b); background:var(--v-field); outline:none; box-sizing:border-box}
.vyd .scan:focus{border-color:var(--primary); background:var(--surface,#fff);
  box-shadow:0 0 0 4px rgba(29,78,216,.12)}
.vyd .scan-ico{position:absolute; left:15px; top:24px; transform:translateY(-50%);
  font-size:18px; opacity:.55; pointer-events:none}
.vyd .cam-btn{position:absolute; right:8px; top:24px; transform:translateY(-50%);
  border:0; background:none; font-size:20px; cursor:pointer; opacity:.6; padding:6px}
.vyd .cam-btn:hover{opacity:1}
.vyd .hintline{font-size:12px; color:var(--text-mute); margin:6px 4px 0}
.vyd .hintline kbd{background:var(--surface-2); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:4px; padding:0 5px; font-size:11px; font-family:inherit}
.vyd .aclist{position:absolute; top:52px; left:0; right:0; z-index:30;
  background:var(--surface,#fff); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 10px 30px rgba(20,30,50,.16); overflow:hidden}
.vyd .aclist[hidden]{display:none}
.vyd .ac-row{display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer}
.vyd .ac-row:hover,.vyd .ac-row.hot{background:#eef3fe}
.vyd .ac-name{flex:1; font-weight:600}
.vyd .ac-stock{font-size:12.5px; color:var(--text-soft); white-space:nowrap}
.vyd .ac-price{font-size:12.5px; color:var(--text-mute); white-space:nowrap;
  min-width:80px; text-align:right}
.vyd .ac-new{color:var(--primary); font-weight:600}
/* накладні */
.vyd .inv{background:var(--surface,#fff); border:1px solid var(--border); border-radius:10px;
  margin-bottom:10px; overflow:hidden}
.vyd .inv.is-active{border-color:var(--primary); box-shadow:0 0 0 2px rgba(29,78,216,.10)}
.vyd .inv-head{display:flex; align-items:center; gap:10px; padding:8px 12px;
  cursor:pointer; background:var(--surface-2); flex-wrap:wrap}
.vyd .inv.is-active .inv-head{background:#eef3fe}
.vyd .inv-caret{font-size:11px; color:var(--text-mute); transition:transform .15s}
.vyd .inv.is-collapsed .inv-caret{transform:rotate(-90deg)}
.vyd .inv.is-collapsed .inv-body{display:none}
.vyd .inv-sum{margin-left:auto; font-size:12.5px; color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.pry .h-op tfoot td{padding:6px 10px; border-top:2px solid var(--border);
  font-weight:700; font-variant-numeric:tabular-nums}
.vyd .inv-del{border:0; background:none; color:#c3ccd8; cursor:pointer; padding:3px 6px;
  border-radius:6px; display:inline-flex; align-items:center}
.vyd .inv-del:hover{color:var(--v-bad); background:#fdf0f0}
.vyd .inv-foot{display:flex; align-items:center; gap:14px; padding:8px 12px;
  border-top:1px solid var(--border); flex-wrap:wrap}
.vyd .inv-foot .t{font-size:13.5px}
.vyd .inv-foot .t b{font-size:15px}
.vyd .inv-foot .spacer{flex:1}
.vyd .inv-go{border:0; border-radius:8px; background:var(--primary); color:#fff;
  font-size:13.5px; font-weight:700; padding:8px 20px; cursor:pointer}
.vyd .inv-go:hover{filter:brightness(1.07)}
.vyd .inv-go:disabled{background:#b9c3cf; cursor:default}
.vyd .inv-empty{color:var(--text-mute); text-align:center; padding:16px; font-size:12.5px}
/* шапка накладної приходу — поля постачальника і дат у верхньому рядку картки */
.pry .inv-hd{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  flex:1 1 auto; min-width:0; padding:2px 0; cursor:default}
.pry .inv-hd label{display:flex; flex-direction:column; gap:3px; font-size:11px;
  color:var(--text-mute)}
.pry .inv-hd input{height:32px; padding:0 10px; border:1px solid var(--v-field-b);
  background:var(--v-field); border-radius:8px; font:inherit; font-size:13.5px}
.pry .inv-hd input:focus{border-color:var(--primary); background:var(--surface,#fff); outline:none}
.pry .inv-hd .f-sup{flex:0 1 276px}
.pry .inv-hd .f-sup input{width:100%; box-sizing:border-box}
.pry .inv-hd .f-no input{width:130px}
.pry .inv-hd .f-dt input{width:140px}
.pry .inv-hd input.badf{border-color:var(--v-bad); background:#fdf0f0}
/* таблиця позицій */
/* вузьке вікно: таблиця їде всередині картки, сторінка вбік не скролиться */
.vyd .inv-scroll{overflow-x:auto}
/* 960 = фіксовані колонки к-сті/цін/сум (770) + місце під назву:
   менше — і колонка назви в table-layout:fixed отримує нуль */
.vyd .inv table{width:100%; min-width:960px; border-collapse:collapse; font-size:12.5px;
  table-layout:fixed}
.pry .inv col.c-name{width:auto}
.pry .inv col.c-qty{width:118px}
.pry .inv col.c-pnv{width:110px}
.pry .inv col.c-vat{width:80px}
.pry .inv col.c-pv{width:110px}
.pry .inv col.c-sum{width:156px}
.pry .inv col.c-rm{width:40px}
.vyd .inv th{color:var(--text-mute); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:6px 10px;
  border-bottom:1px solid var(--border); background:var(--surface,#fff)}
.vyd .inv td{padding:4px 10px; border-top:1px solid var(--surface-2); vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis}
.vyd .inv td b{font-weight:600}
.vyd .inv .num{text-align:right; font-variant-numeric:tabular-nums}
.vyd .qty{width:70px; padding:4px 8px; font-size:13.5px; text-align:right; border-radius:6px;
  border:1px solid transparent; background:var(--surface-2); outline:none;
  font-variant-numeric:tabular-nums}
.vyd .qty:hover{border-color:var(--v-field-b)}
.vyd .qty:focus{border-color:var(--primary); background:var(--surface,#fff);
  box-shadow:0 0 0 2px rgba(29,78,216,.10)}
.pry .qty.w-p{width:88px}
.pry .qty.w-v{width:46px}
.pry .qty.w-s{width:132px}   /* суми: вміщається 1 000 000 000,00 */
.pry .qty.b{font-weight:700}
.vyd .rm{border:0; background:none; color:#c3ccd8; font-size:13px; cursor:pointer;
  padding:2px 6px; border-radius:5px}
.vyd .rm:hover{color:var(--v-bad); background:#fdf0f0}
.vyd .unit{color:var(--text-mute); font-size:11px}
.vyd .leftline{color:var(--text-mute); font-size:10.5px; display:block}
/* історія */
.vyd .hist-tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.vyd .hist-q{width:260px; padding:8px 12px; font-size:13.5px; border-radius:8px;
  border:1px solid var(--v-field-b); background:var(--v-field); outline:none}
.vyd .hist-q:focus{border-color:var(--primary); background:var(--surface,#fff)}
.vyd .hist-range{display:inline-flex; align-items:center; gap:6px; color:var(--text-mute)}
.vyd .hist-range[hidden]{display:none}
.vyd .hist-range input[type=date]{height:34px; width:140px; padding:0 8px;
  background:var(--v-field); border:1px solid var(--v-field-b); border-radius:8px; font:inherit}
.vyd .h-who{font-size:14px; font-weight:700; color:var(--text); white-space:nowrap}
.vyd .h-meta{font-size:12.5px; color:var(--text-soft); white-space:nowrap}
.vyd .h-dot{color:var(--text-mute)}
.vyd .h-hd{display:inline-flex; align-items:baseline; gap:8px; min-width:0; white-space:nowrap}
/* ✎ у шапці проведеної накладної — правка на тому самому місці */
.vyd .h-ed{border:0; background:none; color:#c3ccd8; cursor:pointer; padding:3px 6px;
  border-radius:6px; display:inline-flex; align-items:center}
.vyd .h-ed:hover{color:var(--primary); background:#eef3fe}
/* картка в режимі правки */
.pry .inv.is-edit .inv-head{cursor:default; align-items:flex-end}
.pry .inv.is-edit .inv-head .tag{margin-bottom:7px}
.vyd .tag.ed{background:#eef3fe; color:var(--primary)}
.pry .ed-addbox{padding:6px 12px 2px}
.pry .ed-addq{width:100%; max-width:520px; height:34px; padding:0 12px; border:1px dashed var(--primary);
  border-radius:8px; background:var(--v-field,#e8f1fc); box-sizing:border-box; font-size:14px; outline:none}
.pry .ed-addq:focus{border-style:solid; background:var(--surface,#fff)}
.pry .ed-aclist{max-width:520px; margin-top:4px; background:var(--surface,#fff); border:1px solid var(--border);
  border-radius:10px; overflow:hidden}
.pry .ed-aclist[hidden]{display:none}
.pry .ed-aclist .ac-none{color:var(--text-mute); cursor:default; font-size:13px}
.pry .ed-newtag{background:#e6f6ee; color:#1aa86b; font-size:10.5px; padding:1px 7px}
.pry .ed-gone td{opacity:.45}
.pry .ed-gone td b{text-decoration:line-through}
.vyd .ed-rm:disabled{opacity:.3; cursor:default}
.vyd .ed-rm:disabled:hover{color:#c3ccd8; background:none}
.vyd .ed-kill{border:1px solid #f1cfd1; background:none; color:var(--v-bad);
  border-radius:8px; height:32px; padding:0 12px; font:inherit; font-size:13px; cursor:pointer}
.vyd .ed-kill:hover{background:#fdf0f0}
.vyd .tag{display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600}
.vyd .tag.in{background:#f0f8f1; color:#2e7d32}
/* темна тема: блакитні поля мають свою пару, інакше світлий текст лягає
   на світлий фон і введеного не видно (скан, шапка накладної, фільтри) */
html[data-theme="dark"] .vyd{--v-field:#16223c; --v-field-b:#2b3b5c}
html[data-theme="dark"] .vyd .inv.is-active .inv-head{background:#16223c}
html[data-theme="dark"] .vyd .ac-row:hover,html[data-theme="dark"] .vyd .ac-row.hot{background:#16223c}
html[data-theme="dark"] .vyd .h-ed:hover{background:#16223c}
html[data-theme="dark"] .vyd .inv-del:hover,
html[data-theme="dark"] .vyd .rm:hover,
html[data-theme="dark"] .vyd .ed-kill:hover{background:#2a1618}
html[data-theme="dark"] .vyd .ed-kill{border-color:#4a2a2d}

/* телефон: фіксовані колонки накладної не влазять — таблиця гортається вбік,
   а не стискає «Препарат» до нуля (заголовки налазили один на одного, 2026-10-05) */
.vyd .inv-body{overflow-x:auto}
@media (max-width:720px){ .vyd .inv table{min-width:620px} }
html[data-theme="dark"] .vyd .scan, html[data-theme="dark"] .vyd input[type=date]{color:var(--text)}

/* Історія: суми рівними колонками — числа однієї накладної під числами іншої (2026-10-05) */
.vyd .h-sums{display:inline-grid; grid-template-columns:62px 168px 158px 128px; column-gap:6px;
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.vyd .h-sums.h-sums2{grid-template-columns:62px 168px}
.vyd .h-sums .hs-n{color:var(--text-mute)}
@media (max-width:900px){ .vyd .h-sums{display:inline-flex; gap:8px} }
.vyd .scan-ico, .vyd .cam-btn{display:inline-flex; align-items:center; color:var(--text-soft); line-height:0}