/* Orders & money: purchasing, supplier bills, the invoice loop, finance tables, stock counts & expiry.
   Builds on ops.css (documents, KPI strip, rows); light / dark through the app tokens; phone-first. */

.fin-page { min-width: 0; }
.fin-tbl tr.click, .tbl tr.click { cursor: pointer; }
.fin-tbl tbody tr.click:hover td { background: var(--panel2); }
.fin-tbl td, .fin-tbl th { white-space: nowrap; }
.fin-tbl td.strong { white-space: normal; min-width: 140px; }
.fin-tbl small { white-space: normal; }
.fin-tbl tfoot td { border-top: 2px solid var(--line2); background: var(--panel2); font-size: 13px; }
.exp-btns { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }
.toolbar .exp-btns { margin-inline-start: auto; }
.ok-txt { color: var(--ok) !important; } .warn-txt { color: var(--warn) !important; }
.pad-h { padding: 14px 16px 6px; margin: 0; }
.sub-h { font-size: 14px; letter-spacing: .06em; display: flex; gap: 6px; align-items: center; margin: 14px 0 6px; }
.small-b { font-size: 16px !important; }

/* KPI strips with five tiles, aging with five buckets */
.ops-kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.aging.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vat-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.vat-mini > div { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vat-mini small { font: 600 10px var(--f-mono); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.vat-mini b { font-size: 16px; } .vat-mini .t { border-color: var(--clay); }

/* purchase order / bill dialogs */
.po-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.po-acts.wrap { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; width: 100%; }
.po-build .form { margin-bottom: 12px; }
.po-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.po-tools select { width: auto; min-width: 240px; flex: 1 1 260px; }
.po-lines input, .recv-tbl input, .count-tbl input { padding: 6px 8px; font-size: 13.5px; min-width: 70px; }
.po-lines td:first-child input { min-width: 180px; }
.recv-tbl td input[type=date] { min-width: 140px; }
.mode-sel { width: auto; padding: 4px 6px; font-size: 12.5px; border-radius: 6px; }

/* invoice page: document + side panel */
.inv-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.inv-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 70px; }
.inv-side .card h3 { font-size: 14px; }
.btn-link { width: 100%; background: transparent; border: 0; cursor: pointer; color: var(--ink); font: inherit; }
.rem-step { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13px; color: var(--mute); }
.rem-step.due { color: var(--warn); } .rem-step.done { color: var(--ok); }
.rem-row { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rem-row p { margin: 4px 0 0; color: var(--ink2); } .rem-row .po-acts { flex: none; }

/* printed pieces */
.doc-logo { width: 56px; height: 56px; object-fit: contain; }
.receipt-amt { margin: 26px 0; padding: 18px 20px; border: 2px solid #12201A; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; }
.receipt-amt small { font: 600 11px var(--f-mono); letter-spacing: .12em; } .receipt-amt b { font-size: 26px; }
.sign-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 40px; font-size: 12px; color: #3E4A42; }
.sign-row i { display: block; border-bottom: 1px solid #12201A; height: 34px; }
.write-box { display: inline-block; width: 90px; height: 22px; border-bottom: 1px solid #12201A; }
.sheet-h { font-size: 20px; margin: 0 0 12px; }
.print-body { background: #F3EFE6; margin: 0; padding: 20px; }
.print-acts { max-width: 860px; margin: 0 auto 12px; display: flex; justify-content: flex-end; }
.print-body .doc { color: #12201A; }

/* phone & tablet */
@media (max-width: 1100px) { .ops-kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .inv-wrap { grid-template-columns: 1fr; } .inv-side { position: static; } }
@media (max-width: 760px) {
  .ops-kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aging.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vat-mini { grid-template-columns: 1fr; }
  .exp-btns { margin-inline-start: 0; width: 100%; } .exp-btns .btn { flex: 1; justify-content: center; }
  .rem-row { flex-direction: column; } .po-tools select { min-width: 0; }
  .sign-row { grid-template-columns: 1fr; }
  .receipt-amt { flex-direction: column; gap: 6px; align-items: flex-start; }
}
@media print {
  .inv-side, .print-acts, .exp-btns { display: none !important; }
  .inv-wrap { display: block; }
  .print-body { background: #fff; padding: 0; } .print-body .doc { box-shadow: none; border: 0; padding: 0; max-width: none; }
  .fin-tbl td, .fin-tbl th { white-space: normal; }
  thead { display: table-header-group; } tr { break-inside: avoid; }
}