/* Invoices: shared look of the pharmacy receipt and the livestock sale.
   It was a local <style> in pryhid.html — moved out so the sale page looks
   EXACTLY the same (Roman 2026-09-21: "look at the pharmacy and do it like
   in the pharmacy"). Change the invoice look here, in one place. */
/* Design — 1-to-1 with the «нова видача» (new issue) page (vydacha.html); only the tab accent is its own */
.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}
/* invoices */
.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}
/* receipt invoice header — supplier and date fields in the card's top row */
.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{width:150px; flex:0 0 150px}
.pry .inv-hd .f-no > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pry .inv-hd .f-no input{width:150px; box-sizing:border-box}
.pry .inv-hd .no-hint{font-style:normal; color:var(--primary); opacity:.85; white-space:nowrap}
.pry .inv-hd .f-dt input{width:140px}
.pry .inv-hd input.badf{border-color:var(--v-bad); background:#fdf0f0}
/* items table */
/* narrow window: the table scrolls inside the card, the page doesn't scroll sideways */
.vyd .inv-scroll{overflow-x:auto}
/* 960 = fixed qty/price/amount columns (770) + room for the name:
   any less — and the name column in table-layout:fixed gets zero */
.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}   /* amounts: 1 000 000 000,00 fits */
.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}
/* history */
.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}
/* ✎ in the header of a posted invoice — editing in the same place */
.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}
/* card in edit mode */
.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}
/* dark theme: the light-blue fields have their own pair, otherwise light text lands
   on a light background and the input is invisible (scan, invoice header, filters) */
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}

/* phone: the invoice's fixed columns don't fit — the table scrolls sideways
   instead of squeezing «Препарат» (Drug) to zero (the headers overlapped each other, 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)}

/* History: amounts in even columns — the numbers of one invoice under the numbers of another (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}