/* =============================================================================
   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);
  flex-wrap: wrap;
}
.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 }
.v-bills .filterbar .fld-search input{ width: 220px }
.v-bills .filterbar .fld-date input{ width: 128px }
.v-bills .filterbar .fld-status select{ width: 116px }
.v-bills .filterbar .fld-cust select{ width: 210px }
.v-bills .filterbar .clearbtn{ font-size: var(--cb-fs-13); padding: 7px 12px }
.v-bills .filterbar .count{ margin-left: auto; color: var(--cb-ink2); font-size: var(--cb-fs-13); white-space: nowrap }
.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: 1339px){ .v-bills .bills-table .c-terms{ display: none } }
@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 }
.v-bills .bills-table{ table-layout: fixed; width: 100%; min-width: 540px }
.v-bills .bills-table th, .v-bills .bills-table td{ padding-left: 8px; padding-right: 8px; white-space: nowrap }
.v-bills .bills-table .c-no{ width: 84px }
.v-bills .bills-table .c-date{ width: 88px }
.v-bills .bills-table .c-terms{ width: 60px }
.v-bills .bills-table .c-total{ width: 84px }
.v-bills .bills-table .c-bal{ width: 84px }
.v-bills .bills-table .c-status{ width: 88px }
.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) }
.v-bills .detail-empty{ margin: auto; color: var(--cb-ink2); font-size: var(--cb-fs-14); text-align: center }

/* four actions (the mockup had three) do not fit next to the title in a
   466px detail pane at 1366: wrap the action row under the titles instead of
   breaking the bill number across two lines on top of the buttons. */
.v-bills .dt-head{ display: flex; align-items: flex-start; gap: var(--cb-sp-12); border-bottom: 1px solid var(--cb-divider); padding-bottom: var(--cb-sp-12); flex-wrap: wrap }
.v-bills .dt-head .dt-titles{ flex: 1 1 240px; min-width: 0 }
.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-sub{ margin-top: 4px; color: var(--cb-ink2); font-size: var(--cb-fs-13); display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.v-bills .dt-custname{ display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 590; color: var(--cb-ink) }
.v-bills .dt-sub-meta{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.v-bills .dt-void-reason{ margin-top: 6px; color: var(--cb-void-fg); font-size: var(--cb-fs-12) }

.v-bills .dt-totals{ display: flex; gap: var(--cb-sp-24) }
.v-bills .dt-total-block{ display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.v-bills .dt-total-label{ font-size: var(--cb-fs-12); font-weight: 640; letter-spacing: .02em; color: var(--cb-ink2); white-space: nowrap }
.v-bills .dt-total-value{ font-size: var(--cb-fs-20); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap }
.v-bills .dt-total-value.bal-due{ color: var(--cb-bad-fg) }
.v-bills .dt-total-value.bal-clear{ color: var(--cb-ok-fg) }

.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) }

.v-bills .pay-table{ table-layout: fixed; width: 100% }
.v-bills .pay-table .c-date{ width: 108px }
.v-bills .pay-table .c-method{ width: 64px }
.v-bills .pay-table .c-amt{ width: 96px }
.v-bills .pay-table .c-staff{ width: 150px }
.v-bills .pay-table tbody td{ height: auto; padding: 6px 8px; vertical-align: top }
.v-bills .pay-note{ margin-top: 2px; font-size: 11px; color: var(--cb-ink2) }
.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-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-actions{ display: flex; gap: var(--cb-sp-8); flex: 0 0 auto; align-items: center; flex-wrap: wrap }
.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;
}

.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 }

.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 }
.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: 56px }
.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 }
.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 }
}

/* ----------------------------------------------------------- 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-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 .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) }