/* Gap parts for the web-desk screens (prefix jp-wd-). Tokens only; each part is logged in docs/GAPS.md.
   Web 5.1 Today, 2.1 Rent out (+2.1a), 2.2 Rented out, 3.1 Return and settle. Lines, not cards. */

:where(.jp-wd-chip, .jp-wd-sum-item, .jp-wd-link, .jp-wd-who input, .jp-wd-check input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Text bits ---------- */
.jp-wd-meta { margin: 0; font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-wd-meta { font: var(--type-km-meta); }
.jp-wd-ref { font: var(--type-ref); letter-spacing: var(--track-ref); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jp-wd-nowrap { white-space: nowrap; }
.jp-wd-usd { font-variant-numeric: tabular-nums; }
.jp-wd-link { display: inline-flex; align-items: center; min-height: 24px; color: var(--action-ink); font: var(--type-body-strong); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; }
.jp-wd-link:hover { text-decoration: underline; }
.jp-wd-empty { margin: 0; padding: var(--space-3) 0; font: var(--type-body); color: var(--ink-secondary); border-top: 1px solid var(--line-subtle); }
:lang(km) .jp-wd-empty { font: var(--type-km-body); }
.jp-wd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.jp-wd-stack { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

/* ---------- Two-column pages: they wrap to one column when the page is narrower than both minimums ---------- */
.jp-wd-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8) var(--space-12); }
.jp-wd-cols > * { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.jp-wd-band { display: flex; flex-direction: column; gap: var(--space-2); }
.jp-wd-band .jx-table-wrap { margin-top: var(--space-1); }
/* Rent out (2.1): vehicle · slip · other vehicles. Wide: the slip runs down the right. Narrow: a compact vehicle
   block, then the slip, then the other vehicles, so the slip is never pushed below a long list. */
.jp-wd-rentwrap { container-type: inline-size; }
.jp-wd-rent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "veh slip" "others slip"; gap: var(--space-8) var(--space-12); align-items: start; }
.jp-wd-veh { grid-area: veh; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.jp-wd-rent > .jp-wd-slip { grid-area: slip; }
.jp-wd-rent > .jp-wd-others { grid-area: others; }
.jp-wd-veh-body, .jp-wd-veh-info { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@container (max-width: 920px) {
  .jp-wd-rent { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "veh" "slip" "others"; gap: var(--space-6); }
  .jp-wd-veh-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: var(--space-6); }
  .jp-wd-rent > .jp-wd-others { padding-top: 0; border-top: 0; }
}
@container (max-width: 520px) {
  .jp-wd-veh-body { grid-template-columns: minmax(0, 1fr); }
}
.jp-wd-cols-return > .jp-wd-col-main { flex: 3 1 480px; }
.jp-wd-cols-return > .jp-wd-col-side { flex: 2 1 380px; max-width: var(--width-form); }

/* ---------- SectionHead ---------- */
.jp-wd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.jp-wd-head h2 { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); font: var(--type-title); letter-spacing: var(--track-title); color: var(--ink-heading); }
:lang(km) .jp-wd-head h2 { font: var(--type-km-body); font-weight: 700; letter-spacing: 0; }
.jp-wd-count { font: var(--type-meta); font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
.jp-wd-count.is-danger { color: var(--danger); font-weight: 700; }
.jp-wd-head-meta { font: var(--type-meta); color: var(--ink-muted); }
:lang(km) .jp-wd-head-meta { font: var(--type-km-meta); }

/* ---------- DaySummary: one ruled line, four figures ---------- */
.jp-wd-sum ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.jp-wd-sum li { display: flex; border-left: 1px solid var(--line-subtle); }
.jp-wd-sum li:first-child { border-left: 0; }
.jp-wd-sum-item { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.jp-wd-sum li:first-child .jp-wd-sum-item { padding-left: 0; }
.jp-wd-sum-item:hover { background: var(--hover); }
.jp-wd-sum li:first-child .jp-wd-sum-item:hover { padding-left: var(--space-4); margin-left: calc(var(--space-4) * -1); }
.jp-wd-sum-k { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
:lang(km) .jp-wd-sum-k { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; color: var(--ink-secondary); }
.jp-wd-sum-v { font: var(--type-title); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; color: var(--ink-heading); }
.jp-wd-sum-item.is-warning .jp-wd-sum-v { color: var(--warning); }
.jp-wd-sum-item.is-danger .jp-wd-sum-v { color: var(--danger); }
.jp-wd-sum-meta { font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-wd-sum-meta { font: var(--type-km-meta); }
/* On a narrow page the four figures go two by two; a rule still divides them. */
@media (max-width: 1099px) {
  .jp-wd-sum li:nth-child(odd) { border-left: 0; }
  .jp-wd-sum li:nth-child(odd) .jp-wd-sum-item { padding-left: 0; }
  .jp-wd-sum li:nth-child(n + 3) { border-top: 1px solid var(--line-subtle); }
  .jp-wd-sum ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Today: the check-in queue and the owner's lines ---------- */
.jp-wd-queue, .jp-wd-owner { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.jp-wd-queue-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); min-height: var(--row-web); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-subtle); }
.jp-wd-queue-no { font: var(--type-ref); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.jp-wd-queue-main, .jp-wd-owner-main { min-width: 0; display: flex; flex-direction: column; }
.jp-wd-queue-main b, .jp-wd-owner-main b { font: var(--type-body-strong); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-wd-queue-main > span, .jp-wd-owner-main > span { font: var(--type-meta); color: var(--ink-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
:lang(km) :is(.jp-wd-queue-main > span, .jp-wd-owner-main > span) { font: var(--type-km-meta); }
.jp-wd-queue-wait { font: var(--type-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jp-wd-owner-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--row-web); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-subtle); }
.jp-wd-owner-row > .jx-money { align-items: flex-end; flex: none; }

/* ---------- Rental slip (2.1, 2.2) ---------- */
.jp-wd-slip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6) var(--space-6); box-sizing: border-box; }
.jp-wd-cols > .jp-wd-slip { gap: 0; }
.jp-wd-slip > .jp-wd-head { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.jp-wd-slip-done { padding-bottom: var(--space-2); }
.jp-wd-line { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-subtle); }
.jp-wd-slip-done .jp-wd-line:last-child { border-bottom: 0; }
.jp-wd-k { padding-top: var(--space-1); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
:lang(km) .jp-wd-k { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; color: var(--ink-secondary); }
.jp-wd-v { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); font: var(--type-body); color: var(--ink); }
:lang(km) .jp-wd-v { font: var(--type-km-body); }
.jp-wd-v b { font-weight: 700; color: var(--ink-heading); }
.jp-wd-v > .jx-field, .jp-wd-inline .jx-field { width: min(100%, 280px); }
.jp-wd-slip-sum { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding-top: var(--space-4); }
.jp-wd-slip-sum p { margin: 0; font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-wd-slip-sum p { font: var(--type-km-body); }
.jp-wd-slip-sum p b { color: var(--ink); }
.jp-wd-slip-sum .jx-btn, .jp-wd-slip-sum .jx-blocked { align-self: flex-start; max-width: 100%; }
.jp-wd-slip-sum .jx-btn { white-space: normal; text-align: left; line-height: 1.25; }
@media (max-width: 1099px) {
  .jp-wd-line { grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); }
}

/* Customer rows on the slip: a real radio, the queue number or phone, name over meta */
.jp-wd-whos, .jp-wd-matches { display: flex; flex-direction: column; align-self: stretch; border-top: 1px solid var(--line-subtle); }
.jp-wd-who { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: var(--row-web); padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--line-subtle); cursor: pointer; border-radius: var(--radius-sm); }
.jp-wd-who:hover { background: var(--hover); }
.jp-wd-who.is-on { background: var(--action-tint); }
.jp-wd-who input { width: 18px; height: 18px; margin: 0; accent-color: var(--action); }
.jp-wd-who-main { min-width: 0; display: flex; flex-direction: column; }
.jp-wd-who-main b { font: var(--type-body-strong); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-wd-who-main > span { font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-wd-who-main > span { font: var(--type-km-meta); }
.jp-wd-find { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); align-self: stretch; }
.jp-wd-find .jx-field { flex: 1 1 200px; max-width: 280px; }

/* ---------- ChoiceChips ---------- */
.jp-wd-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jp-wd-chip { min-height: var(--control-web); padding: 0 var(--space-3); border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: var(--type-body-strong); font-variant-numeric: tabular-nums; cursor: pointer; }
.jp-wd-chip:hover { background: var(--hover); }
.jp-wd-chip[aria-pressed="true"] { background: var(--action-tint); border-color: var(--action-ink); color: var(--action-ink); }
:lang(km) .jp-wd-chip { font: var(--type-km-meta); font-weight: 600; }

/* ---------- MarkedPhoto, DamageMark, MarkRow ---------- */
.jp-wd-photo { position: relative; width: fit-content; max-width: 100%; }
.jp-wd-photos { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.jp-wd-mark { position: absolute; transform: translate(-50%, -50%); width: var(--control-web-sm); height: var(--control-web-sm); display: grid; place-items: center; border-radius: var(--radius-md); background: var(--warning); color: var(--on-status); font: var(--type-meta); font-weight: 700; font-variant-numeric: tabular-nums; }
.jp-wd-mark.is-new { background: var(--danger); }
.jp-wd-mark.is-static { position: static; transform: none; flex: none; }
.jp-wd-marks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line-subtle); }
.jp-wd-markrow { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-web); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-subtle); }
.jp-wd-markrow-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); }
.jp-wd-markrow-main b { font: var(--type-body-strong); color: var(--ink); }
.jp-wd-markrow-meta { font: var(--type-meta); color: var(--ink-secondary); }
.jp-wd-markrow-meta.is-new { color: var(--danger); font-weight: 600; }
:lang(km) .jp-wd-markrow-meta { font: var(--type-km-meta); }
.jp-wd-others { padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* ---------- Return (3.1) ---------- */
.jp-wd-crumb { display: flex; align-items: center; gap: var(--space-2); font: var(--type-meta); color: var(--ink-secondary); margin-bottom: calc(var(--space-6) * -1 + var(--space-1)); }
:lang(km) .jp-wd-crumb { font: var(--type-km-meta); }
.jp-wd-crumb .jp-wd-link { font: inherit; font-weight: 600; }
.jp-wd-compare { max-width: 640px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.jp-wd-compare .jp-wd-photo { width: auto; }
:lang(km) .jp-wd-compare .jx-cap { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-wd-cols > .jp-wd-settle { gap: var(--space-4); }
.jp-wd-fields { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.jp-wd-fields .jx-field { flex: 1 1 180px; max-width: 320px; }
.jp-wd-fields .jx-field-input { text-align: right; }
.jp-wd-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-web); font: var(--type-body-strong); color: var(--ink); cursor: pointer; }
:lang(km) .jp-wd-check { font: var(--type-km-body); font-weight: 600; }
.jp-wd-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--action); }
.jp-wd-settle .jx-decision { max-width: none; }
.jp-wd-settle .jx-effects li > span:last-child { text-align: right; }
.jp-wd-settle .jx-decision-actions { flex-wrap: wrap; }
.jp-wd-settle .jx-decision-actions .jx-blocked { align-items: flex-end; text-align: right; }
.jp-wd-settle .jx-proof { align-items: flex-end; }
.jp-wd-settle .jx-proof .jx-slot { flex: none; }
@media (max-width: 1099px) {
  .jp-wd-settle .jx-decision > section { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- Rented out (2.2) ---------- */
.jp-wd-after { padding-top: var(--space-2); }

/* Override (logged in GAPS): app.css caps every direct child of the page at width-table, which included the dialog
   scrim, so the ConfirmDialog's scrim stopped short of the right edge on a wide screen. */
#app .app-main > .jx-dialog-scrim { max-width: none; border-radius: 0; z-index: 40; }