/* Gap parts for the web-admin screens (prefix jp-wa-). Tokens only; each part is proposed for docs/GAPS.md.
   Lines, not cards; radius 4/6/8; no shadow at rest; one action fill per screen. */

.jp-wa-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jp-wa-muted { color: var(--ink-secondary); }
.jp-wa-strong { font: var(--type-body-strong); color: var(--ink); }
.jp-wa-mono { font-family: var(--font-mono); letter-spacing: var(--track-ref); }
/* A count beside a label, not a metric tile: title size. The figure size is kept for the one cash amount (5.3). */
.jp-wa-count { font: var(--type-title); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; color: var(--ink-heading); }
.jp-wa-note { margin: 0; font: var(--type-body); color: var(--ink-secondary); }
.jp-wa-note a, .jp-wa-crumb a { color: var(--action-ink); }
:lang(km) .jp-wa-note { font: var(--type-km-body); }
.jp-wa-err { color: var(--danger); font: var(--type-body-strong); }
.jp-wa-status { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.jp-wa-acts, .jp-wa-btnrow { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
:where(.jp-wa-open, .jp-wa-namebtn, .jp-wa-backlink, .jp-wa-viewas-opt, .jp-wa-crumb a, .jp-wa-note a, .jp-wa-check input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- StackTable: jx-table on tablet and laptop, stacked rows on a phone ---------- */
.jp-wa-rowlink { cursor: pointer; }
.jp-wa-stack td.is-go, .jp-wa-stack td.is-act { text-align: right; white-space: nowrap; }
.jp-wa-stack tr.is-current td { background: var(--action-tint); }
.jp-wa-stack tr.is-off td { color: var(--ink-secondary); }
.jp-wa-stack .jp-cell .jx-tag { align-self: flex-start; margin-top: var(--space-1); }
.jp-wa-open { display: inline-grid; place-items: center; width: var(--control-web); height: var(--control-web); border-radius: var(--radius-md); color: var(--ink-secondary); }
.jp-wa-open:hover { background: var(--hover); color: var(--ink); }
/* A vehicle state in words (not a StatusTag), and a paper date close to its end: the warning colour with the word. */
.jp-wa-vstate { font: var(--type-body); color: var(--ink); white-space: nowrap; }
.jp-wa-warn { font: var(--type-body-strong); color: var(--warning); }
:lang(km) .jp-wa-vstate { font: var(--type-km-body); }
:lang(km) .jp-wa-warn { font: var(--type-km-body); font-weight: 600; }
.jp-wa-namebtn { min-height: 24px; padding: 0; border: 0; background: none; font: var(--type-body-strong); color: var(--ink); text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.jp-wa-namebtn:hover { color: var(--action-ink); text-decoration: underline; }

@media (max-width: 767px) {
  .jp-wa-stack, .jp-wa-stack tbody { display: block; }
  .jp-wa-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jp-wa-stack tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-subtle); }
  .jp-wa-stack tbody tr:last-child { border-bottom: 0; }
  .jp-wa-stack tr.is-state { display: block; padding: 0; }
  .jp-wa-stack td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); grid-column: 2 / -1; height: auto; padding: var(--space-1) 0 0; border: 0; text-align: right; min-width: 0; }
  .jp-wa-stack tr.is-state td { display: block; padding: 0; text-align: left; }
  .jp-wa-stack td[data-label]::before { content: attr(data-label); flex: none; max-width: 50%; font: var(--type-meta); color: var(--ink-secondary); text-align: left; }
  :lang(km) .jp-wa-stack td[data-label]::before { font: var(--type-km-meta); }
  .jp-wa-stack td.is-lead { grid-column: 1; grid-row: 1 / span 12; display: block; padding: 0; }
  .jp-wa-stack td.is-main { grid-column: 2; grid-row: 1; display: block; padding: 0; text-align: left; }
  .jp-wa-stack td.is-end { grid-column: 2 / -1; grid-row: 2; padding: var(--space-2) 0 0; justify-content: flex-start; }
  .jp-wa-stack tr:not(:has(.is-lead)) td.is-end { grid-column: 1 / -1; }
  .jp-wa-stack .jx-vehicle, .jp-wa-stack .jx-vehicle-name, .jp-wa-stack .jx-cust { min-width: 0; max-width: 100%; }
  .jp-wa-stack .jx-vehicle-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jp-wa-stack td.is-go { grid-column: 3; grid-row: 1; display: none; }
  .jp-wa-stack tr:has(td.is-end) td.is-go { display: none; }
  .jp-wa-stack td.is-act { justify-content: flex-start; padding-top: var(--space-2); }
  .jp-wa-stack td:empty { display: none; }
  .jp-wa-stack tr:not(:has(.is-lead)) td:not(.is-main):not(.is-end) { grid-column: 1 / -1; }
  .jp-wa-stack tr:not(:has(.is-lead)) td.is-main { grid-column: 1 / -1; }
  .jp-wa-stack td.is-end + td, .jp-wa-stack td.is-main + td:not(.is-end) { padding-top: var(--space-2); }
  .jp-wa-stack .jp-cell { align-items: flex-end; }
  .jp-wa-stack td.is-main .jp-cell { align-items: flex-start; }
  .jp-wa-stack .jx-money { align-items: flex-end; }
  .jp-wa-stack .jp-wa-usd { align-items: flex-end; }
}

/* ---------- LedgerLine: a register's totals as one ruled line ---------- */
.jp-wa-ledger { display: flex; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.jp-wa-ledger-item { flex: 1 1 0; min-width: 0; padding: var(--space-3) var(--space-6) var(--space-3) var(--space-6); border-left: 1px solid var(--line-subtle); display: flex; flex-direction: column; gap: var(--space-1); }
.jp-wa-ledger-item:first-child { border-left: 0; padding-left: 0; }
.jp-wa-ledger dt { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
:lang(km) .jp-wa-ledger dt { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-wa-ledger dd { margin: 0; display: flex; flex-direction: column; gap: 0; }
.jp-wa-ledger-sub { font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-wa-ledger-sub { font: var(--type-km-meta); }
@media (max-width: 767px) {
  .jp-wa-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-wa-ledger-item { padding: var(--space-3) 0 var(--space-3) var(--space-3); }
  .jp-wa-ledger-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .jp-wa-ledger-item:nth-child(n + 3) { border-top: 1px solid var(--line-subtle); }
}

/* ---------- Forms: FormSection, the field grid, FormBar ---------- */
.jp-wa-form { display: flex; flex-direction: column; gap: var(--space-8); }
.jp-wa-sec { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-4); min-width: 0; }
.jp-wa-sec-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.jp-wa-sec-head h2 { margin: 0; font: var(--type-title); letter-spacing: var(--track-title); color: var(--ink-heading); }
:lang(km) .jp-wa-sec-head h2 { font: var(--type-km-body); font-weight: 700; letter-spacing: 0; }
.jp-wa-sec-tag { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
:lang(km) .jp-wa-sec-tag { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-wa-sec-sub { margin: 0; font: var(--type-body); color: var(--ink-secondary); max-width: 60ch; }
:lang(km) .jp-wa-sec-sub { font: var(--type-km-body); }
.jp-wa-sec-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.jp-wa-sec-foot { display: flex; }
.jp-wa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); align-items: start; }
.jp-wa-span { grid-column: 1 / -1; }
.jp-wa-locked { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: var(--control-web); font: var(--type-body); color: var(--ink); }
.jp-wa-media { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.jp-wa-media-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.jp-wa-media-text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.jp-wa-checks { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; }
.jp-wa-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-web); padding: var(--space-1) 0; border-bottom: 1px solid var(--line-subtle); font: var(--type-body); color: var(--ink); cursor: pointer; }
.jp-wa-check input { width: var(--icon-md); height: var(--icon-md); margin: 0; flex: none; accent-color: var(--action); }
:lang(km) .jp-wa-check { font: var(--type-km-body); }

.jp-wa-formbar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) 0; background: var(--page); border-top: 1px solid var(--line); }
.jp-wa-formbar-note { margin: 0 auto 0 0; font: var(--type-body); }
.jp-wa-formbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.jp-wa-formbar .jx-blocked { align-items: flex-end; text-align: right; }

/* The sticky bar sits over the scroll area's bottom padding, so nothing shows between it and the edge. */
.app-main .jp-wa-form > .jp-wa-formbar, .app-phonepage-body .jp-wa-form > .jp-wa-formbar {
  --wa-pad: var(--space-8);
  bottom: calc(var(--wa-pad) * -1); margin-bottom: calc(var(--wa-pad) * -1); padding-bottom: calc(var(--wa-pad) + var(--space-3));
}
@media (max-width: 1099px) { .app-main .jp-wa-form > .jp-wa-formbar { --wa-pad: var(--space-6); } }
@media (max-width: 767px) {
  .jp-wa-form { gap: var(--space-6); }
  .jp-wa-grid { grid-template-columns: minmax(0, 1fr); }
  .jp-wa-formbar-actions { flex: 1 1 100%; }
  .jp-wa-formbar-actions > .jx-btn-primary, .jp-wa-formbar-actions > .jx-blocked { flex: 1; }
  .jp-wa-formbar-actions > .jx-btn-primary { justify-content: center; height: var(--control-native); }
  .jp-wa-formbar .jx-blocked { align-items: stretch; text-align: left; }
  .jp-wa-formbar .jx-blocked .jx-btn { justify-content: center; height: var(--control-native); }
}

/* ---------- Staff: the add row ---------- */
.jp-wa-addrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.7fr) auto; gap: var(--space-4); align-items: start; }
.jp-wa-addrow > .jx-btn { margin-top: calc(var(--space-6) - var(--space-1)); }
@media (max-width: 1099px) {
  .jp-wa-addrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-wa-addrow > .jx-btn { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
}
@media (max-width: 767px) {
  .jp-wa-addrow { grid-template-columns: minmax(0, 1fr); }
  .jp-wa-addrow > .jx-btn { justify-self: stretch; justify-content: center; height: var(--control-native); white-space: normal; }
}

/* ---------- ViewAs ---------- */
.jp-wa-viewas { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.jp-wa-viewas-k { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); margin-right: var(--space-1); }
:lang(km) .jp-wa-viewas-k { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-wa-viewas-opt { height: var(--control-web); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-secondary); font: var(--type-body-strong); cursor: pointer; white-space: nowrap; }
.jp-wa-viewas-opt:hover { background: var(--hover); color: var(--ink); }
.jp-wa-viewas-opt[aria-pressed="true"] { border-color: var(--action-ink); background: var(--action-tint); color: var(--action-ink); }
:lang(km) .jp-wa-viewas-opt { font: var(--type-km-meta); font-weight: 600; }

/* ---------- UsdInput ---------- */
.jp-wa-usd { display: inline-flex; flex-direction: column; gap: 0; }
.jp-wa-usd-box { position: relative; display: inline-flex; }
.jp-wa-usd-sign { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); font: var(--type-ref); color: var(--ink-secondary); pointer-events: none; }
.jp-wa-usd .jx-field-input { width: 120px; padding-left: var(--space-6); text-align: right; }
.jp-wa-usd .jx-field-input[readonly] { background: transparent; border-bottom-color: transparent; color: var(--ink); }
.jp-wa-usd-khr { min-height: 18px; font: var(--type-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: right; }
.jp-wa-usd-err { max-width: 200px; font: var(--type-meta); color: var(--danger); white-space: normal; text-align: left; }
.jp-wa-usd.is-error .jx-field-input { border-bottom: 2px solid var(--danger); }
.jp-wa-stack td .jx-field-input:not(.jx-mono) { min-width: 160px; }

/* ---------- Crumb ---------- */
.jp-wa-crumb { display: flex; align-items: center; gap: var(--space-2); font: var(--type-body-strong); color: var(--ink-secondary); margin-bottom: calc(var(--space-6) * -1 + var(--space-2)); }
.jp-wa-crumb a { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; border-radius: var(--radius-sm); min-height: 24px; }
.jp-wa-crumb a:hover { text-decoration: underline; }
.jp-wa-crumb [aria-current] { font-family: var(--font-mono); letter-spacing: var(--track-ref); }
.jp-wa-crumb [aria-current]::before { content: "›"; margin-right: var(--space-2); font-family: var(--font-sans); color: var(--ink-muted); }
.app-phonepage-body .jp-wa-crumb { margin-bottom: 0; }

/* ---------- Customers: list beside one customer's history ---------- */
.jp-wa-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.jp-wa-split-list { min-width: 0; }
.jp-wa-detail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.jp-wa-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.jp-wa-detail-head h2 { margin: 0; font: var(--type-title); letter-spacing: var(--track-title); color: var(--ink-heading); }
.jp-wa-detail-head p { margin: var(--space-1) 0 0; font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-wa-detail-head p { font: var(--type-km-body); }
.jp-wa-idphoto { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.jp-wa-idphoto figcaption { font: var(--type-meta); color: var(--ink-secondary); max-width: 132px; }
.jp-wa-detail .jp-wa-ledger { border-bottom: 0; }
.jp-wa-detail .jp-wa-ledger-item { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.jp-wa-detail .jx-table-wrap { border-radius: var(--radius-md); }
.jp-wa-backlink { display: none; align-self: flex-start; align-items: center; gap: var(--space-1); min-height: var(--control-web); padding: 0; border: 0; background: none; color: var(--action-ink); font: var(--type-body-strong); cursor: pointer; border-radius: var(--radius-sm); }
@media (max-width: 1099px) {
  .jp-wa-split { grid-template-columns: minmax(0, 1fr); }
  .jp-wa-split[data-open="list"] > .jp-wa-detail { display: none; }
  .jp-wa-split[data-open="detail"] > .jp-wa-split-list { display: none; }
  .jp-wa-backlink { display: inline-flex; }
}
@media (max-width: 767px) {
  .jp-wa-detail { padding: var(--space-4); }
  .jp-wa-detail-head { flex-direction: column; }
}
/* A screen-reader-only label is clipped by its table frame, not placed against the page (it pushed the page wider at 900). */
.jx-table-wrap { position: relative; }