/* =============================================================================
   Cash Bill POS -- web/css/views.css (WP7)
   Page rules for the sidenav-layout query views: Bills, Unpaid, Customer, Day
   close, Audit. Ported from the approved Phase 0 page-only style rules for
   those three screens; Day close and Audit have no approved screen and are
   built here from the shared components in pos.css (frontend.md 3.10). Every
   selector below is scoped under its view root class (R16) so class names
   reused across screens (.lines-table, .cust-row, .empty-row, ...) never
   collide once every view lives in one SPA document.
   ============================================================================= */

/* ------------------------------------------------- view roots (all five) --
   In the mockups the *-body grid was the .app-body itself, so its `1fr` row
   had a height to fill. Inside the SPA that body div sits in #cb-view and is
   only as tall as its content, so the panels stopped mid-screen and the Bills
   .shortcut-bar was pushed out of the viewport (measured at 1366x768, lead B
   E2E). Give every view root the fixed height of its #cb-body cell. */
.view.v-bills{ display: grid; grid-template-rows: 1fr auto; min-height: 0 }
.view.v-unpaid, .view.v-customer, .view.v-dayclose, .view.v-audit{
  display: grid; grid-template-rows: 1fr; min-height: 0;
}

.v-bills .bills-body{
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  padding: var(--cb-sp-16) var(--cb-sp-20);
  gap: var(--cb-sp-12);
  min-height: 0;
}

.v-bills .filterbar{
  padding: var(--cb-sp-12) var(--cb-sp-16);
  display: flex;
  align-items: flex-end;
  gap: var(--cb-sp-12) var(--cb-sp-8);
  flex-wrap: wrap;
}
/* X1 fix round: the Xilnex bar has two more buttons (Clear filter, Refresh)
   than the round-3 bar, which pushed Export CSV and the count to a second row
   at 1366 px (the bar grew from 83 to 133 px and the list lost two rows).
   Measured in Chrome at 1366: one row again (83 px) with Search 173 px (its
   placeholder fits) and the Client select 147 px, still one row with a
   three-digit count; 8 px between the fields (12 between rows), Today /
   Yesterday inside the Period field, 108 px date pickers with 6 px side
   padding (dd/mm/yyyy and the calendar icon still fit), a 100 px Status
   select (longest option 63 px) and the same compact style on Clear filter,
   Refresh and Export CSV. 1280 px and below wrap as before X1. */
.v-bills .filterbar .field{ display: flex; flex-direction: column; gap: 4px }
.v-bills .filterbar label{ font-size: var(--cb-fs-12); font-weight: 640; letter-spacing: .02em; color: var(--cb-ink2) }
.v-bills .filterbar input, .v-bills .filterbar select{ font-size: var(--cb-fs-13); padding: 7px 9px }
/* Search and Customer give way first (from 220 / 210 px down to their
   bases) before anything wraps, so the Today / Yesterday chips (round 2)
   still leave Export and the count on the first row at 1366 px; on a wide
   screen they grow back to their full width. UX round 3: the bases are
   153 / 127 px (sum 280 as before, so nothing wraps differently) so that
   at 1366 px Search is 166 px and shows its whole placeholder 'No, name,
   RM or dd/mm' (~144 px at 13 px) while Customer keeps 140 px. */
.v-bills .filterbar .fld-search{ flex: 1 1 153px; max-width: 220px; min-width: 0 }
.v-bills .filterbar .fld-search input{ width: 100% }
/* UX round 3 fix: should a shop PC font ever be wider, the placeholder ends
   in an ellipsis instead of a cut letter (the title carries the full text) */
.v-bills .filterbar #fSearch{ text-overflow: ellipsis }
.v-bills .filterbar .fld-date input{ width: 128px }
/* X1: Xilnex "Period" -- one label over the From and To pickers */
.v-bills .filterbar .period-inputs{ display: flex; gap: 6px }
.v-bills .filterbar .period-inputs input{ width: 108px; padding-left: 6px; padding-right: 6px }
.v-bills .filterbar .fld-status select{ width: 100px }
.v-bills .filterbar .fld-cust{ flex: 1 1 127px; max-width: 210px; min-width: 0 }
.v-bills .filterbar .fld-cust select{ width: 100% }
.v-bills .filterbar .clearbtn{ font-size: var(--cb-fs-13); padding: 7px 8px }
/* UX round 2: Today / Yesterday beside the date pickers */
.v-bills .filterbar .daychips{ display: flex; gap: 6px }
.v-bills .filterbar .daychip{ font-size: var(--cb-fs-13); padding: 7px 10px }
.v-bills .filterbar .daychip.active{ background: var(--cb-brand); color: #fff; border-color: transparent }
.v-bills .filterbar .count{ margin-left: auto; color: var(--cb-ink2); font-size: var(--cb-fs-13); white-space: nowrap }
.v-bills .filterbar .count .count-note{ white-space: normal }
.v-bills .filterbar .count b{ color: var(--cb-ink); font-weight: 640 }

.v-bills .bills-split{
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(460px, 1fr);
  gap: var(--cb-sp-16);
}
@media (min-width: 1600px){ .v-bills .bills-split{ grid-template-columns: 1fr 1fr } }
@media (max-width: 1260px){ .v-bills .bills-split{ grid-template-columns: 1fr; grid-template-rows: 320px 1fr } }

.v-bills .list-pane{ min-height: 0; border-radius: var(--cb-r-lg); display: flex; flex-direction: column; padding: 0 }
.v-bills .list-scroll{ flex: 1; min-height: 0; overflow: auto }
/* X1: the 7 Xilnex columns, 6 px cell padding: they fit the 660 px pane
   (and the ~676 px stacked pane at 900 px) with Client name taking the rest;
   the two-word headers wrap instead of widening a column */
.v-bills .bills-table{ table-layout: fixed; width: 100%; min-width: 540px }
.v-bills .bills-table th, .v-bills .bills-table td{ padding-left: 6px; padding-right: 6px; white-space: nowrap }
.v-bills .bills-table thead th{ white-space: normal; line-height: 1.2 }
.v-bills .bills-table .c-status{ width: 84px }
.v-bills .bills-table .c-date{ width: 88px }
.v-bills .bills-table .c-no{ width: 76px }
.v-bills .bills-table .c-total{ width: 80px }
.v-bills .bills-table .c-payst{ width: 68px }
.v-bills .bills-table .c-bal{ width: 80px }
.v-bills .bills-table td.c-status{ white-space: normal }
.v-bills .bills-table td.c-status .pill{ padding-left: 7px; padding-right: 7px }
.v-bills .ac-pill{ font-size: 10px; margin-top: 2px; white-space: normal; line-height: 1.25; border-radius: 8px; max-width: 100% }
.v-bills .bills-table tbody tr{ cursor: pointer }
.v-bills .glass .bills-table tbody tr.row-active{ background: var(--cb-glass-row-selected); box-shadow: inset 3px 0 0 0 var(--cb-brand) }
.v-bills .bills-table tbody tr.row-void td{ color: var(--cb-void-fg) }
.v-bills .bills-table tbody tr.row-void td.no-strike{ text-decoration: none }
.v-bills .bills-table tbody tr.row-void td:not(.no-strike){ text-decoration: line-through }
.v-bills .empty-row td{ color: var(--cb-ink2); text-align: center; padding: 28px 10px }

.v-bills .detail-pane{ min-height: 0; border-radius: var(--cb-r-lg); overflow: auto; padding: var(--cb-sp-20); display: flex; flex-direction: column; gap: var(--cb-sp-16) }
/* X1: stacked (list above the Invoice window, <= 1260 px) the window keeps
   its whole height and the Bills body scrolls, instead of a window squeezed
   to a few rows under the 320 px list (measured: 72 px tall at 900x700) */
@media (max-width: 1260px){
  .v-bills .bills-body{ grid-template-rows: auto auto; overflow: auto }
  .v-bills .bills-split{ grid-template-rows: 320px auto; min-height: auto }
  .v-bills .bills-split .detail-pane{ min-height: 240px; overflow: visible }
}
.v-bills .detail-empty{ margin: auto; color: var(--cb-ink2); font-size: var(--cb-fs-14); text-align: center }

/* the Invoice window title (X1: "Invoice ID - WB-..."; the old header,
   totals block and action row are gone, see the Invoice window rules) */
.v-bills .dt-billno{ font-size: var(--cb-fs-20); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-right: 8px; white-space: nowrap }

.v-bills .dt-section h3{ font-size: var(--cb-fs-12); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cb-ink2); margin-bottom: 6px }

.v-bills .lines-table{ table-layout: fixed; width: 100% }
.v-bills .lines-table .c-no{ width: 30px }
.v-bills .lines-table .c-qty{ width: 64px }
.v-bills .lines-table .c-price{ width: 76px }
.v-bills .lines-table .c-amt{ width: 84px }
.v-bills .lines-table th, .v-bills .lines-table tbody td{ padding-left: 8px; padding-right: 8px; white-space: nowrap }
.v-bills .lines-table tbody td{ height: auto; padding-top: 6px; padding-bottom: 6px; vertical-align: top }
.v-bills .line-sub{ margin-top: 2px; font-size: 11px; color: var(--cb-ink2); display: flex; align-items: center; gap: 6px; min-width: 0 }
.v-bills .line-sub .lsub-text{ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.v-bills .row-below-cost td{ background: var(--cb-glass-below-cost) }

/* X1 Payment info: No | Payment type | Payment date and time | Received by |
   Reference | Amount; Reference takes the rest. Fix round: the fixed columns
   summed to 374 px, so in the 414-424 px content of the window at 1280-1500
   Reference got 40-50 px and its header read "Referen". Every column is now
   as wide as its longest WORD needs (measured in Chrome: No 31, Payment 61,
   07/10/2026 77, Received / TESTADMIN 80, Reference 68, amount + the compact
   Reverse button 84), fixed sum 340 px, and the menu is a strip wherever the
   window would be narrower (see .iw-menu), so Reference gets >= 78 px at every
   width from 900 px up; long references and names wrap, nothing is cut. */
.v-bills .pay-table{ table-layout: fixed; width: 100% }
.v-bills .pay-table .c-pno{ width: 32px }
.v-bills .pay-table .c-ptype{ width: 62px }
.v-bills .pay-table .c-pdate{ width: 78px }
.v-bills .pay-table .c-pby{ width: 84px }
.v-bills .pay-table .c-amt{ width: 84px }
.v-bills .pay-table td .btn{ font-size: var(--cb-fs-12); padding: 3px 8px; margin-top: 4px }
.v-bills .pay-table thead th{ padding: 6px; white-space: normal; line-height: 1.2 }
.v-bills .pay-table tbody td{ height: auto; padding: 6px; vertical-align: top; overflow-wrap: anywhere }
.v-bills .pay-amt.neg{ color: var(--cb-bad-fg) }
.v-bills .pay-reversal-tag{ margin-left: 6px }

.v-bills .timeline{ display: flex; flex-direction: column }
.v-bills .tl-item{ display: flex; gap: 10px }
.v-bills .tl-gutter{ display: flex; flex-direction: column; align-items: center; width: 12px; flex: 0 0 auto }
.v-bills .tl-dot{ width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto }
.v-bills .tl-dot.ev-create{ background: var(--cb-info-fg) }
.v-bills .tl-dot.ev-print{ background: var(--cb-ink3) }
.v-bills .tl-dot.ev-pay{ background: var(--cb-ok-fg) }
.v-bills .tl-dot.ev-payreverse{ background: var(--cb-warn-fg) }
.v-bills .tl-dot.ev-void{ background: var(--cb-bad-fg) }
.v-bills .tl-dot.ev-edit{ background: var(--cb-warn-fg) }
.v-bills .tl-line{ flex: 1; width: 1px; background: var(--cb-divider); margin-top: 3px; min-height: 10px }
.v-bills .tl-item:last-child .tl-line{ display: none }
.v-bills .tl-body{ flex: 1; min-width: 0; padding-bottom: 14px }
.v-bills .tl-head{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.v-bills .tl-event{ font-weight: 640; font-size: var(--cb-fs-13) }
.v-bills .tl-date{ color: var(--cb-ink2); font-size: var(--cb-fs-12); font-variant-numeric: tabular-nums }
.v-bills .tl-detail{ color: var(--cb-ink2); font-size: var(--cb-fs-12); margin-top: 2px; line-height: 1.4 }

.v-bills .dt-void-notice{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--cb-r-md);
  background: var(--cb-void-bg); color: var(--cb-void-fg);
  font-size: var(--cb-fs-13); font-weight: 590;
}

/* ------------------------------------------- X1: the Xilnex Invoice window --
   The bill detail, docked in the right pane: title bar, left menu (Invoice
   summary / Item details / Payment info), content, DISMISS footer. Where the
   pane is narrower than 680 px (1261-1599 px viewports, as spec_v4 2b lists,
   and below 900 px) the menu becomes a strip of the same three words above
   the content: a 128 px menu beside a 460-679 px pane left 376-515 px for the
   Payment info table (fix round; it was a strip only up to 1459 px). */
.v-bills .iw{ display: flex; flex-direction: column; gap: var(--cb-sp-12); min-width: 0 }
.v-bills .iw:focus{ outline: none }
.v-bills .iw-titlebar{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--cb-divider); padding-bottom: var(--cb-sp-12) }
.v-bills .iw-title{ font-size: var(--cb-fs-16); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 4px }
.v-bills .iw-body{ display: flex; gap: var(--cb-sp-16); min-width: 0 }
.v-bills .iw-menu{ display: flex; flex-direction: column; gap: 2px; flex: 0 0 128px; align-self: flex-start; background: var(--cb-fill); border-radius: var(--cb-r-md); padding: 3px }
.v-bills .iw-mi{ font: inherit; font-size: var(--cb-fs-13); font-weight: 590; text-align: left; white-space: nowrap; padding: 7px 10px; border: none; border-radius: 8px; background: transparent; color: var(--cb-ink2); cursor: pointer }
.v-bills .iw-mi:hover{ color: var(--cb-ink) }
.v-bills .iw-mi.active{ background: var(--cb-panel); color: var(--cb-ink); box-shadow: var(--cb-shadow-sm); font-weight: 640 }
.v-bills .iw-mi:focus-visible{ outline: 2px solid var(--cb-brand); outline-offset: -2px }
.v-bills .iw-content{ flex: 1; min-width: 0 }
.v-bills .iw-pane{ display: flex; flex-direction: column; gap: var(--cb-sp-16); min-width: 0 }
@media (min-width: 1261px) and (max-width: 1599px), (max-width: 899px){
  .v-bills .iw-body{ flex-direction: column; gap: var(--cb-sp-12) }
  .v-bills .iw-menu{ flex-direction: row; flex: 0 0 auto }
}
.v-bills .iw-status{ display: flex; flex-direction: column; gap: 10px; padding: var(--cb-sp-12); border: 1px solid var(--cb-divider); border-radius: var(--cb-r-md) }
.v-bills .iw-status-head{ display: flex; align-items: center; gap: 10px }
.v-bills .iw-status-label{ font-size: var(--cb-fs-13); font-weight: 640; color: var(--cb-ink2) }
.v-bills .iw-btns{ display: flex; flex-wrap: wrap; gap: 8px }
.v-bills .iw-confirmed-by{ font-size: var(--cb-fs-12); color: var(--cb-ink2) }
/* Xilnex shows its window buttons in capitals (RESEND RECEIPT, CANCEL SALES,
   DISMISS): the source words stay sentence case, CSS upper-cases them */
.v-bills .xl-btn{ text-transform: uppercase; font-size: var(--cb-fs-12); letter-spacing: .03em; padding: 7px 12px }
.v-bills .iw-fields{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: var(--cb-sp-16) }
.v-bills .iw-row{ display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--cb-divider-soft); font-size: var(--cb-fs-13) }
.v-bills .iw-l{ color: var(--cb-ink2) }
.v-bills .iw-v{ min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
.v-bills .iw-totals{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: var(--cb-fs-13); font-variant-numeric: tabular-nums }
.v-bills .iw-bal{ background: var(--cb-fill); border-radius: var(--cb-r-sm); padding: 6px 10px; color: var(--cb-ink2); font-weight: 590 }
.v-bills .iw-sums{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 14px }
.v-bills .iw-sums b{ font-size: var(--cb-fs-14); font-weight: 700 }
.v-bills .iw-foot{ display: flex; justify-content: flex-end; border-top: 1px solid var(--cb-divider); padding-top: var(--cb-sp-12) }

.v-bills .shortcut-bar{
  background: var(--cb-panel); border-top: 1px solid var(--cb-divider);
  display: flex; align-items: center; padding: 6px var(--cb-sp-20);
  font-size: 12.5px; color: var(--cb-ink2); flex-wrap: wrap;
}
.v-bills .shortcut-bar span{ display: flex; align-items: center; gap: 6px; padding: 0 14px; border-left: 1px solid var(--cb-divider); white-space: nowrap }
.v-bills .shortcut-bar span:first-child{ border-left: none; padding-left: 0 }

/* Pay / Void / Reverse modals (bills.js) render inside #cb-modal-root using
   the generic .modal-field / .modal-hint / .modal-error / .modal-balance
   classes -- those belong to WP6's pos.css ("modal form and flash styles",
   frontend.md section 1 file ownership table), not to this file. */

/* --------------------------------------------------------------- Unpaid -- */
.v-unpaid .unpaid-body{
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  padding: var(--cb-sp-16) var(--cb-sp-20);
  gap: var(--cb-sp-16);
  min-height: 0;
  overflow: hidden;
}
.v-unpaid .asof-row{ display: flex; align-items: baseline; gap: 8px; color: var(--cb-ink2); font-size: var(--cb-fs-13) }
.v-unpaid .asof-row b{ color: var(--cb-ink); font-weight: 640 }
/* X2: the Open sales line (outside the aging), under the as-of line */
.v-unpaid .open-sales-note{ margin-top: 4px; padding: 6px 10px; border-radius: var(--cb-r-md); background: var(--cb-warn-bg); color: var(--cb-warn-fg); font-size: var(--cb-fs-13); font-weight: 590 }
.v-unpaid .open-sales-note[hidden]{ display: none }

.v-unpaid .cards{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cb-sp-12) }
@media (max-width: 1000px){ .v-unpaid .cards{ grid-template-columns: repeat(2, 1fr) } }
.v-unpaid .agecard{
  padding: var(--cb-sp-16); cursor: pointer;
  border-radius: var(--cb-r-lg);
  border-width: 1.5px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.v-unpaid .agecard:active{ transform: scale(.98) }
.v-unpaid .agecard .ac-label{ font-size: var(--cb-fs-12); font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.v-unpaid .agecard .ac-amount{ margin-top: 6px; font-size: var(--cb-fs-28); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.v-unpaid .agecard .ac-count{ margin-top: 2px; font-size: var(--cb-fs-13); color: var(--cb-ink2) }
.v-unpaid .agecard.ac-ok{   border-color: var(--cb-divider) } .v-unpaid .agecard.ac-ok .ac-label{   color: var(--cb-ok-fg) }
.v-unpaid .agecard.ac-info{ border-color: var(--cb-divider) } .v-unpaid .agecard.ac-info .ac-label{ color: var(--cb-info-fg) }
.v-unpaid .agecard.ac-warn{ border-color: var(--cb-divider) } .v-unpaid .agecard.ac-warn .ac-label{ color: var(--cb-warn-fg) }
.v-unpaid .agecard.ac-bad{  border-color: var(--cb-divider) } .v-unpaid .agecard.ac-bad .ac-label{  color: var(--cb-bad-fg) }
.v-unpaid .agecard.active.ac-ok{   border-color: var(--cb-ok-fg);   box-shadow: 0 0 0 3px var(--cb-ok-bg),   inset 0 1px 0 var(--cb-hi), 0 10px 28px -6px var(--cb-edge) }
.v-unpaid .agecard.active.ac-info{ border-color: var(--cb-info-fg); box-shadow: 0 0 0 3px var(--cb-info-bg), inset 0 1px 0 var(--cb-hi), 0 10px 28px -6px var(--cb-edge) }
.v-unpaid .agecard.active.ac-warn{ border-color: var(--cb-warn-fg); box-shadow: 0 0 0 3px var(--cb-warn-bg), inset 0 1px 0 var(--cb-hi), 0 10px 28px -6px var(--cb-edge) }
.v-unpaid .agecard.active.ac-bad{  border-color: var(--cb-bad-fg);  box-shadow: 0 0 0 3px var(--cb-bad-bg),  inset 0 1px 0 var(--cb-hi), 0 10px 28px -6px var(--cb-edge) }

.v-unpaid .cust-panel{ min-height: 0; border-radius: var(--cb-r-lg); display: flex; flex-direction: column }
.v-unpaid .cust-panel-head{ display: flex; align-items: baseline; gap: 10px; padding: var(--cb-sp-12) var(--cb-sp-16); border-bottom: 1px solid var(--cb-divider) }
.v-unpaid .cust-panel-head h2{ font-size: var(--cb-fs-16); font-weight: 640 }
.v-unpaid .cust-panel-head .filter-note{ color: var(--cb-ink2); font-size: var(--cb-fs-13) }
.v-unpaid .cust-panel-head .filter-note a{ color: var(--cb-brand); text-decoration: none; font-weight: 600; margin-left: 6px }
/* UX round 2: grand total, per-customer links, keyboard focus ring */
.v-unpaid .cust-panel-head .unpaid-filter{ width: 220px; max-width: 32%; min-width: 120px; font-size: var(--cb-fs-13); padding: 6px 9px; margin-left: 6px }
.v-unpaid .cust-panel-head .grand-total{ margin-left: auto; font-size: 14px; font-weight: 640; white-space: nowrap; font-variant-numeric: tabular-nums }
.v-unpaid .cust-detail-actions{ display: flex; gap: 8px; margin: 2px 0 8px }
.v-unpaid .cust-detail-actions .dact{ font-size: var(--cb-fs-12); padding: 5px 10px; text-decoration: none }
.v-unpaid .cust-table tbody tr.cust-row:focus-visible{ outline: 2px solid var(--cb-brand); outline-offset: -2px }
.v-unpaid .cust-scroll{ flex: 1; min-height: 0; overflow: auto }

.v-unpaid .cust-table{ table-layout: fixed; width: 100% }
.v-unpaid .cust-table .c-exp{  width: 26px }
.v-unpaid .cust-table .c-cust{ width: auto }
.v-unpaid .cust-table .c-nbil{ width: 56px }
.v-unpaid .cust-table .c-bkt{  width: 92px }
.v-unpaid .cust-table .c-tot{  width: 108px }
.v-unpaid .cust-table tbody tr.cust-row{ cursor: pointer }
.v-unpaid .cust-table tbody tr.cust-row.expanded{ background: var(--cb-glass-brand-tint) }
.v-unpaid .exp-chevron{ display: inline-block; color: var(--cb-ink2); font-size: 11px; transition: transform .12s ease }
.v-unpaid .cust-row.expanded .exp-chevron{ transform: rotate(90deg) }
.v-unpaid .bkt-cell.has-amt{ font-weight: 640 }
.v-unpaid .bkt-cell.zero{ color: var(--cb-ink3) }
.v-unpaid .cust-table .c-tot .num{ font-weight: 650 }

.v-unpaid .cust-detail-row td{ padding: 0; border-bottom: 1px solid var(--cb-divider) }
.v-unpaid .cust-detail-wrap{ padding: var(--cb-sp-8) var(--cb-sp-16) var(--cb-sp-16) 46px; background: var(--cb-panel-2) }
.v-unpaid .cust-bills-table{ table-layout: fixed; width: 100%; background: var(--cb-panel); border-radius: var(--cb-r-md); overflow: hidden; border: 1px solid var(--cb-divider) }
.v-unpaid .cust-bills-table .c-no{ width: 96px }
.v-unpaid .cust-bills-table .c-date{ width: 78px }
.v-unpaid .cust-bills-table .c-terms{ width: 56px }
.v-unpaid .cust-bills-table .c-total{ width: 84px }
.v-unpaid .cust-bills-table .c-paid{ width: 84px }
.v-unpaid .cust-bills-table .c-bal{ width: 90px }
.v-unpaid .cust-bills-table .c-bkt{ width: 84px }
.v-unpaid .cust-bills-table .c-link{ width: 84px }
.v-unpaid .cust-bills-table .pay-link{ margin-left: 8px }
/* Words round 10 (W1): the per-bill link reads Collection (was Pay). At 1000 px and narrower the link cell is
   too narrow for View + Collection on one line, so Collection sits under View (shrink-wrapped, no indent) */
@media (max-width: 1000px){ .v-unpaid .cust-bills-table td.c-link .pay-link{ display: table; margin-left: 0 } }
.v-unpaid .cust-bills-table a{ color: var(--cb-brand); font-size: var(--cb-fs-12); font-weight: 640; text-decoration: none }
.v-unpaid .empty-row td{ color: var(--cb-ink2); text-align: center; padding: 28px 10px }
/* UX round 3 fix: a long unbroken filter text in "No customer name contains ..."
   wraps inside the row instead of widening the table */
.v-unpaid .empty-row td{ overflow-wrap: anywhere }
.v-unpaid .empty-note{ color: var(--cb-ink2); font-size: var(--cb-fs-13); padding: 12px 2px }

/* ------------------------------------------------------------- Customer -- */
.v-customer .cust-body{
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  padding: var(--cb-sp-16) var(--cb-sp-20);
  gap: var(--cb-sp-12);
  min-height: 0;
  overflow: hidden;
}

.v-customer .cust-header{
  display: flex; align-items: flex-start; gap: var(--cb-sp-20);
  border-radius: var(--cb-r-lg);
  padding: var(--cb-sp-16) var(--cb-sp-20);
}
.v-customer .ch-main{ flex: 1; min-width: 0 }
.v-customer .ch-name{ font-size: var(--cb-fs-20); font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.v-customer .ch-sub{ margin-top: 6px; color: var(--cb-ink2); font-size: var(--cb-fs-13) }
.v-customer .ch-picker{ display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto }
.v-customer .ch-picker label{ font-size: var(--cb-fs-12); font-weight: 640; color: var(--cb-ink2); letter-spacing: .02em }
.v-customer .ch-picker select{ width: 260px; font-size: var(--cb-fs-13) }
.v-customer .ch-owing{ text-align: right; flex: 0 0 auto }
.v-customer .ch-owing-label{ font-size: var(--cb-fs-12); font-weight: 640; letter-spacing: .02em; color: var(--cb-ink2) }
.v-customer .ch-owing-value{ font-size: var(--cb-fs-28); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.v-customer .ch-owing-value.zero{ color: var(--cb-ok-fg) }
.v-customer .ch-owing-value.due{ color: var(--cb-bad-fg) }

.v-customer .tabs{ display: inline-flex; background: var(--cb-fill); border-radius: var(--cb-r-md); padding: 3px; gap: 2px; width: fit-content }
.v-customer .tabs a{
  padding: 7px 18px; border-radius: 8px; font-size: var(--cb-fs-13); font-weight: 590;
  color: var(--cb-ink2); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.v-customer .tabs a.active{ background: var(--cb-panel); color: var(--cb-ink); box-shadow: var(--cb-shadow-sm); font-weight: 640 }

.v-customer .tab-body{ min-height: 0; border-radius: var(--cb-r-lg); overflow: auto; padding: var(--cb-sp-20) }

.v-customer .bought-item{ margin-bottom: var(--cb-sp-16) }
.v-customer .bought-item:last-child{ margin-bottom: 0 }
.v-customer .bi-head{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px }
.v-customer .bi-code{ font-family: var(--cb-font-mono); font-size: var(--cb-fs-12); color: var(--cb-ink2) }
.v-customer .bi-name{ font-size: var(--cb-fs-14); font-weight: 620 }
.v-customer .bought-table{ table-layout: fixed; width: 100%; max-width: 620px }
.v-customer .bought-table .c-date{ width: 90px }
.v-customer .bought-table .c-qty{ width: 90px }
.v-customer .bought-table .c-price{ width: 110px }
.v-customer .bought-table .c-src{ width: 90px }
.v-customer .empty-note{ color: var(--cb-ink2); font-size: var(--cb-fs-13); padding: 12px 2px }

.v-customer .cbills-table{ table-layout: fixed; width: 100%; max-width: 820px }
.v-customer .cbills-table .c-no{ width: 100px }
.v-customer .cbills-table .c-date{ width: 84px }
.v-customer .cbills-table .c-terms{ width: 64px }
.v-customer .cbills-table .c-total{ width: 90px }
.v-customer .cbills-table .c-paid{ width: 90px }
.v-customer .cbills-table .c-bal{ width: 96px }
.v-customer .cbills-table .c-status{ width: 80px }
.v-customer .cbills-table tbody tr.row-void td{ color: var(--cb-void-fg) }
.v-customer .cbills-table tbody tr.row-void td:not(.no-strike){ text-decoration: line-through }
.v-customer .cbills-table a{ text-decoration: none; color: var(--cb-ink); display: block }
.v-customer .cbills-table a:hover{ color: var(--cb-brand) }

.v-customer .stmt-toolbar{ display: flex; align-items: center; gap: 10px; margin-bottom: var(--cb-sp-12) }
.v-customer .stmt-toolbar .spacer{ flex: 1 }
.v-customer .stmt-table{ table-layout: fixed; width: 100%; max-width: 820px }
.v-customer .stmt-table .c-date{ width: 88px }
.v-customer .stmt-table .c-desc{ width: auto }
.v-customer .stmt-table .c-debit{ width: 100px }
.v-customer .stmt-table .c-credit{ width: 100px }
.v-customer .stmt-table .c-bal{ width: 110px }
.v-customer .stmt-table tbody tr.row-invoice .c-desc-text{ font-weight: 590 }
.v-customer .stmt-table tbody tr.row-payment .c-desc-text{ color: var(--cb-ink2) }
.v-customer .stmt-table tbody tr.row-reversal .c-desc-text{ color: var(--cb-warn-fg) }
.v-customer .stmt-final-row td{ border-top: 2px solid var(--cb-divider); font-weight: 700 }

.v-customer .print-only{ display: none }
.v-customer .stmt-print-title{ font-size: var(--cb-fs-12); font-weight: 700; letter-spacing: .06em; color: var(--cb-ink2); margin-bottom: 4px }

/* Print statement: window.print() prints the whole shell document, so the
   rule hides everything outside .v-customer's tab body and flattens the
   .glass card to plain paper (frontend.md 3.10). */
@media print{
  .topbar, .sidenav, .banner-slot, .shortcut-bar, #cb-modal-root, #cb-print-root{ display: none !important }
  .app-shell{ height: auto; overflow: visible; display: block }
  .app-body{ overflow: visible; display: block; padding: 0 }
  .v-customer .cust-body{ display: block; padding: 0 }
  .v-customer .tabs, .v-customer .ch-picker, .v-customer .stmt-toolbar, .v-customer .no-print{ display: none !important }
  .v-customer .tab-body{ overflow: visible; padding: 0 }
  .v-customer .glass{
    background: #fff !important; border: none !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .v-customer .glass::after{ display: none !important }
  .bg-arcs{ display: none !important }
  html, body{ background: #fff !important }
  .v-customer #chName .pill, .v-customer #chSub{ display: none !important }
  .v-customer .print-only{ display: block !important }
  .v-customer .stmt-table .c-desc-text{ white-space: normal !important; overflow: visible !important; text-overflow: clip !important }
  /* Ctrl+P / browser print of any app screen: cost never prints (owner 2026-09-30) */
  .cost-only{ display: none !important }
  .row-below-cost td{ background: transparent !important }
}

/* ----------------------------------------------------------- Day close -- */
.v-dayclose .dayclose-body{
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  grid-template-columns: 1fr;
  padding: var(--cb-sp-16) var(--cb-sp-20);
  gap: var(--cb-sp-16);
  min-height: 0;
  overflow: auto;
}
.v-dayclose .dc-head{ display: flex; align-items: center; gap: var(--cb-sp-20) }
.v-dayclose .dc-head h1{ font-size: var(--cb-fs-16); font-weight: 640 }
.v-dayclose .dc-day-field{ display: flex; align-items: baseline; gap: 8px; margin-left: auto }
.v-dayclose .dc-day-field label{ font-size: var(--cb-fs-13); font-weight: 600; color: var(--cb-ink2) }

.v-dayclose .dc-summary{ border-radius: var(--cb-r-lg); padding: var(--cb-sp-16) var(--cb-sp-20) }
.v-dayclose .dc-metrics{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cb-sp-16) }
@media (max-width: 900px){ .v-dayclose .dc-metrics{ grid-template-columns: repeat(2, 1fr) } }
.v-dayclose .dc-metric{ display: flex; flex-direction: column; gap: 4px }
.v-dayclose .dc-metric-label{ font-size: var(--cb-fs-12); font-weight: 640; letter-spacing: .02em; color: var(--cb-ink2) }
.v-dayclose .dc-metric-value{ font-size: var(--cb-fs-20); font-weight: 650; font-variant-numeric: tabular-nums }
.v-dayclose .dc-warning{ margin-top: var(--cb-sp-12); padding: 8px 12px; border-radius: var(--cb-r-md); background: var(--cb-warn-bg); color: var(--cb-warn-fg); font-size: var(--cb-fs-13); font-weight: 590 }
.v-dayclose .dc-close-row{ margin-top: 8px; font-size: var(--cb-fs-13); color: var(--cb-ink2) }
.v-dayclose .dc-close-row .ok{ color: var(--cb-ok-fg) }
.v-dayclose .dc-close-row .warn{ color: var(--cb-warn-fg) }
.v-dayclose .dc-close-row .bad{ color: var(--cb-bad-fg) }

.v-dayclose .dc-last-close{ margin-top: var(--cb-sp-12); font-size: var(--cb-fs-13); font-weight: 590; color: var(--cb-ink2) }
.v-dayclose .dc-voids, .v-dayclose .dc-revs{ margin-top: var(--cb-sp-12) }
.v-dayclose .dc-voids h3, .v-dayclose .dc-revs h3{ font-size: var(--cb-fs-13); font-weight: 640; margin-bottom: 4px }
.v-dayclose .dc-voids-table{ table-layout: fixed; width: 100% }
.v-dayclose .dc-voids-table th, .v-dayclose .dc-voids-table td{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.v-dayclose .dc-voids-table .num{ font-variant-numeric: tabular-nums; text-align: right }
.v-dayclose .dc-rev-line{ font-size: var(--cb-fs-13); color: var(--cb-warn-fg); font-variant-numeric: tabular-nums }
.v-dayclose .dc-rev-total{ margin-top: 4px; font-size: var(--cb-fs-13); font-weight: 640 }

.v-dayclose .dc-form{ border-radius: var(--cb-r-lg); padding: var(--cb-sp-16) var(--cb-sp-20); max-width: 420px }
.v-dayclose .dc-actions{ display: flex; align-items: center; gap: var(--cb-sp-12); margin-top: var(--cb-sp-16) }
.v-dayclose .dc-result{ font-size: var(--cb-fs-14); font-weight: 640 }
.v-dayclose .dc-result .ok{ color: var(--cb-ok-fg) }
.v-dayclose .dc-result .warn{ color: var(--cb-warn-fg) }
.v-dayclose .dc-result .bad{ color: var(--cb-bad-fg) }
.v-dayclose .dc-error:empty{ display: none }

.v-dayclose .dc-history{ border-radius: var(--cb-r-lg); padding: var(--cb-sp-16) var(--cb-sp-20); min-height: 0 }
.v-dayclose .dc-history h2{ font-size: var(--cb-fs-16); font-weight: 640; margin-bottom: var(--cb-sp-8) }
.v-dayclose .dc-hist-table{ table-layout: fixed; width: 100% }
.v-dayclose .dc-hist-table .num{ font-variant-numeric: tabular-nums }

/* --------------------------------------------------------------- Audit -- */
.v-audit .audit-body{
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  padding: var(--cb-sp-16) var(--cb-sp-20);
  gap: var(--cb-sp-12);
  min-height: 0;
}
.v-audit .filterbar{
  padding: var(--cb-sp-12) var(--cb-sp-16);
  display: flex; align-items: flex-end; gap: var(--cb-sp-12); flex-wrap: wrap;
}
.v-audit .filterbar .field{ display: flex; flex-direction: column; gap: 4px }
.v-audit .filterbar label{ font-size: var(--cb-fs-12); font-weight: 640; letter-spacing: .02em; color: var(--cb-ink2) }
.v-audit .filterbar input, .v-audit .filterbar select{ font-size: var(--cb-fs-13); padding: 7px 9px }
.v-audit .filterbar .fld-date input{ width: 128px }
.v-audit .filterbar .fld-status select{ width: 140px }
.v-audit .filterbar .fld-search input{ width: 140px }
.v-audit .filterbar .count{ margin-left: auto; color: var(--cb-ink2); font-size: var(--cb-fs-13) }
.v-audit .list-pane{ min-height: 0; border-radius: var(--cb-r-lg); display: flex; flex-direction: column; padding: 0 }
.v-audit .list-scroll{ flex: 1; min-height: 0; overflow: auto }
.v-audit .audit-table{ table-layout: fixed; width: 100% }
.v-audit .audit-table .audit-detail{ font-family: var(--cb-font-mono); font-size: 11px; color: var(--cb-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.v-audit .audit-table .audit-detail.audit-readable{ white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.35 }
.v-audit .empty-row td{ color: var(--cb-ink2); text-align: center; padding: 28px 10px }

.v-audit .admin-tools{ border-radius: var(--cb-r-lg); padding: var(--cb-sp-16) var(--cb-sp-20) }
.v-audit .admin-tools h2{ font-size: var(--cb-fs-14); font-weight: 640; margin-bottom: var(--cb-sp-12) }
.v-audit .admin-row{ display: flex; align-items: center; gap: var(--cb-sp-12); margin-bottom: var(--cb-sp-12) }
.v-audit .admin-merge h3{ font-size: var(--cb-fs-13); font-weight: 640; color: var(--cb-ink2); margin-bottom: 6px }
.v-audit .merge-detected{ font-size: var(--cb-fs-12); color: var(--cb-ink2); margin-bottom: 6px }
.v-audit .merge-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--cb-divider-soft) }
.v-audit .merge-row:last-child{ border-bottom: none }
.v-audit .empty-note{ color: var(--cb-ink2); font-size: var(--cb-fs-13) }

/* UX round 3 fix: the in-screen Retry links (Bills and Unpaid from round 2,
   Day close, Customers and Audit from round 3) in the app link colour */
#billsRetry, #unpaidRetry, #dcRetry, #dcHistRetry, #custRetry, #custHdrRetry, #auditRetry{ color: var(--cb-brand); font-weight: 600; text-decoration: none }
#billsRetry:hover, #unpaidRetry:hover, #dcRetry:hover, #dcHistRetry:hover, #custRetry:hover, #custHdrRetry:hover, #auditRetry:hover{ text-decoration: underline }