/* Petron design system: tokens and the pt-* parts of the Petron EOD page (sales clearing).
   Generated from the Petron Design System artifact (tokens.json + components/bundle.css); global rather
   than a component's scoped file because the variance card, closure slots, flow and sales summary are
   separate components that all draw these parts. Light tokens on .pt-root, dark under data-bs-theme. */

.pt-root {
  --bg: #f4f6f9; --surface: #ffffff; --surface-sunken: #f7f9fc; --line: #e3e7ee;
  --line-strong: #cdd3de; --ink: #141a24; --ink-muted: #566074; --brand: #123c8c;
  --brand-soft: #e7eefb; --primary: #066fd1; --primary-soft: #e7f1fc; --kind-opt: #0b7285;
  --kind-opt-soft: #e3fafc; --col-meter: #f8eff9; --primary-strong: #0559a8; --on-primary: #ffffff;
  --focus: #066fd1; --good: #2fb344; --good-ink: #1b6b2b; --good-soft: #e8f5eb;
  --warn: #f76707; --warn-ink: #a84400; --warn-soft: #fff1e6; --on-warn: #1a0d03;
  --bad: #d63939; --bad-ink: #b02525; --bad-soft: #fcebeb; --fuel-blaze95: #f59f00;
  --fuel-blaze97: #0ca678; --fuel-blaze100: #ae3ec9; --fuel-dieselmax: #4299e1; --fuel-turbodiesel: #525d70;
  --shop: #2b8a99; --epay: #7048e8; --tng: #d6336c;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius-sm: 4px;
  --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --motion-scan: 1.6s;
  --motion-flow: 1.2s; --motion-settle: 600ms;
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Thai", Kanit, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
[data-bs-theme="dark"] .pt-root {
  --bg: #151820; --surface: #1f2430; --surface-sunken: #191d27; --line: #323a4a;
  --line-strong: #465068; --ink: #eef1f6; --ink-muted: #a6afc0; --brand: #7aa2ee;
  --brand-soft: #1c2a47; --primary: #4a9bea; --primary-soft: #12304f; --kind-opt: #3bc9db;
  --kind-opt-soft: #0c2f35; --col-meter: #2a2130; --primary-strong: #6aaef0; --on-primary: #0b1a2b;
  --focus: #6aaef0; --good: #2fb344; --good-ink: #6fd383; --good-soft: #183a20;
  --warn: #f76707; --warn-ink: #ffa261; --warn-soft: #3a2414; --on-warn: #1a0d03;
  --bad: #e05252; --bad-ink: #f58a8a; --bad-soft: #3d1b1b; --fuel-blaze95: #f5a623;
  --fuel-blaze97: #20c997; --fuel-blaze100: #cc5de8; --fuel-dieselmax: #5aa9eb; --fuel-turbodiesel: #a6afc0;
  --shop: #4fb3c2; --epay: #9775fa; --tng: #f06595;
}


.pt-root { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
.pt-num { font-variant-numeric: tabular-nums; }
.pt-mono { font-family: var(--font-mono); font-size: 13px; }
.pt-muted { color: var(--ink-muted); }
.pt-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.pt-section { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pt-hero { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-figure { font-size: 20px; line-height: 26px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Button and pill */
.pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 14px/20px var(--font-sans); cursor: pointer; white-space: nowrap; }
.pt-btn:hover { background: var(--surface-sunken); }
.pt-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pt-btn svg { width: 16px; height: 16px; flex: none; }
.pt-btn.is-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pt-btn.is-primary:hover { background: var(--primary-strong); }
.pt-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pt-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface-sunken); color: var(--ink-muted); }
.pt-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pt-pill.is-good { background: var(--good-soft); color: var(--good-ink); }
.pt-pill.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.pt-pill.is-bad { background: var(--bad-soft); color: var(--bad-ink); }

/* Fuel tag: colour square, name in ink */
.pt-fuel { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.pt-fuel::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--fuel, var(--ink-muted)); }
.fuel-blaze95 { --fuel: var(--fuel-blaze95); }
.fuel-blaze97 { --fuel: var(--fuel-blaze97); }
.fuel-blaze100 { --fuel: var(--fuel-blaze100); }
.fuel-dieselmax { --fuel: var(--fuel-dieselmax); }
.fuel-turbodiesel { --fuel: var(--fuel-turbodiesel); }
.seg-shop { --fuel: var(--shop); }
.seg-epay { --fuel: var(--epay); }
.seg-tng { --fuel: var(--tng); }
.pt-flow .f-cap { fill: var(--ink-muted); font: 600 10px var(--font-sans); letter-spacing: .08em; }

/* ── Receipt: a till closure as paper with printed lines and a torn edge ── */
.pt-receipt {
  position: relative; width: 64px; height: 84px; border-radius: 6px 6px 0 0;
  background: var(--surface-sunken); border: 1px solid var(--line-strong); border-bottom: 0;
  overflow: hidden;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
}
.pt-receipt::before {
  content: ""; position: absolute; inset: 10px 9px 14px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 3px, transparent 3px 9px);
  -webkit-mask: linear-gradient(90deg, #000 70%, #0000 70% 78%, #000 78%);
          mask: linear-gradient(90deg, #000 70%, #0000 70% 78%, #000 78%);
}
.pt-receipt.is-large { width: 120px; height: 168px; }
.pt-receipt.is-large::before { inset: 18px 16px 24px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 13px); }
.pt-receipt.is-sheet { border-radius: 6px; -webkit-mask: none; mask: none; border-bottom: 1px solid var(--line-strong); }
.pt-beam { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--primary) 35%, transparent) 70%, var(--primary) 96%, transparent); animation: pt-scan var(--motion-scan, 1.6s) ease-in-out infinite alternate; }
.pt-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--p, 0%); background: color-mix(in srgb, var(--primary) 18%, transparent); border-top: 2px solid var(--primary); transition: height var(--motion-settle, .6s) ease; }
@keyframes pt-scan { from { transform: translateY(-30%); } to { transform: translateY(380%); } }

/* ── Closure slot: one file of the day, its state shown by the receipt ── */
.pt-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); min-width: 0; text-align: center; }
.pt-slot-name { font-weight: 600; font-size: 13px; line-height: 18px; }
.pt-slot-meta { font-size: 12px; line-height: 16px; color: var(--ink-muted); max-width: 100%; overflow-wrap: anywhere; }
.pt-badge { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--good-soft); color: var(--good-ink); }
.pt-badge svg { width: 14px; height: 14px; }
.pt-slot.is-empty { border-style: dashed; border-color: var(--line-strong); background: var(--surface-sunken); }
.pt-slot.is-empty .pt-receipt { opacity: .45; }
.pt-slot.is-missing { border-style: dashed; border-color: var(--warn); background: var(--warn-soft); }
.pt-slot.is-missing .pt-badge { background: var(--warn); color: var(--on-warn); }
.pt-slot.is-reading { border-color: var(--primary); }
.pt-slot.is-failed { border-color: var(--bad); background: var(--bad-soft); }
.pt-slot.is-failed .pt-badge { background: var(--bad); color: #ffffff; }
.pt-slot.is-key { border: 2px solid var(--brand); background: var(--brand-soft); }

/* Slot kind: what the file is. Icon chip top-left and a coloured top edge on the receipt. */
.pt-kind { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--kind); background: var(--kind-soft); }
.pt-kind svg { width: 15px; height: 15px; }
.kind-dayend { --kind: var(--brand); --kind-soft: var(--brand-soft); }
.kind-opt { --kind: var(--kind-opt); --kind-soft: var(--kind-opt-soft); }
.kind-till { --kind: var(--ink-muted); --kind-soft: var(--surface-sunken); }
.pt-slot.kind-dayend .pt-receipt, .pt-slot.kind-opt .pt-receipt, .pt-slot.kind-till .pt-receipt { border-top: 3px solid var(--kind); }

/* Slot state: the badge top-right, one icon and colour per state. */
.pt-badge.is-empty { background: var(--surface-sunken); color: var(--ink-muted); border: 1px dashed var(--line-strong); }
.pt-badge.is-uploaded { background: var(--primary-soft); color: var(--primary); }
.pt-badge.is-reading { background: var(--primary-soft); color: var(--primary); }
.pt-badge.is-reading::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary-soft); border-top-color: var(--primary); animation: pt-spin .9s linear infinite; }
.pt-badge.is-missing { background: var(--warn); color: var(--on-warn); font-weight: 700; font-size: 13px; }
.pt-slot.is-uploaded { border-color: var(--primary); }
@keyframes pt-spin { to { transform: rotate(360deg); } }

/* Add a cashier till: a dashed tile in the closures row, before OPT. */
.pt-slot-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); min-height: 100%; box-sizing: border-box; border-radius: var(--radius-lg); border: 1.5px dashed var(--line-strong); background: transparent; color: var(--ink-muted); font: 600 13px/18px var(--font-sans); cursor: pointer; }
.pt-slot-add .plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed currentColor; }
.pt-slot-add .plus svg { width: 18px; height: 18px; }
.pt-slot-add:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.pt-slot-add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* State legend under the closures row. */
.pt-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 12px; color: var(--ink-muted); }
.pt-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pt-legend .pt-badge { position: static; width: 18px; height: 18px; }
.pt-legend .pt-badge svg { width: 11px; height: 11px; }
.pt-legend .pt-badge.is-reading::after { width: 9px; height: 9px; }

/* ── Variance gauge: how much of the day's sales is parked ── */
.pt-gauge { width: 132px; height: 132px; flex: none; }
.pt-gauge circle { fill: none; stroke-width: 14; }
.pt-gauge .g-track { stroke: var(--line); }
.pt-gauge .g-paid { stroke: var(--good); }
.pt-gauge .g-parked { stroke: var(--warn); animation: pt-arc var(--motion-settle, .6s) ease-out both; }
.pt-gauge .g-value { fill: var(--ink); font: 600 22px/1 var(--font-sans); }
.pt-gauge .g-label { fill: var(--ink-muted); font: 500 10px/1 var(--font-sans); letter-spacing: .06em; }
@keyframes pt-arc { from { stroke-dasharray: 0 999; } }

/* ── Sales flow: tills into sales clearing, out as paid and parked ── */
.pt-flow { width: 100%; height: auto; display: block; }
.pt-flow .f-node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.pt-flow .f-hub { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.6; }
.pt-flow .f-park { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1.6; }
.pt-flow .f-paid { fill: var(--good-soft); stroke: var(--good); stroke-width: 1.6; }
.pt-flow .f-text { fill: var(--ink); font: 600 13px var(--font-sans); }
.pt-flow .f-sub { fill: var(--ink-muted); font: 500 11px var(--font-sans); }
.pt-flow .f-amt { fill: var(--ink); font: 600 12px var(--font-sans); font-variant-numeric: tabular-nums; }
.pt-flow .f-line { fill: none; stroke-linecap: round; stroke-dasharray: 6 8; animation: pt-flow var(--motion-flow, 1.2s) linear infinite; }
.pt-flow .f-in { stroke: var(--brand); }
.pt-flow .f-out-paid { stroke: var(--good); }
.pt-flow .f-out-park { stroke: var(--warn); }
@keyframes pt-flow { to { stroke-dashoffset: -28; } }

/* ── Sales summary: products down, totalizer / sub total / one column per till / diff across ── */
.pt-summary-wrap { overflow-x: auto; }
.pt-summary { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pt-summary th, .pt-summary td { padding: 12px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.pt-summary thead th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); border-bottom-color: var(--line-strong); vertical-align: bottom; }
.pt-summary th:first-child, .pt-summary td:first-child { text-align: left; font-weight: 500; }
.pt-summary .c-meter { background: var(--col-meter); }
.pt-summary .c-sub { background: var(--brand-soft); font-weight: 600; }
.pt-summary .c-diff.is-good { background: var(--good-soft); color: var(--good-ink); font-weight: 600; }
.pt-summary .c-diff.is-bad { background: var(--bad-soft); color: var(--bad-ink); font-weight: 600; }
.pt-summary .c-na { color: var(--ink-muted); }
.pt-summary .is-est { font-style: italic; color: var(--ink-muted); }
.pt-summary .is-est::before { content: "≈ "; font-style: normal; }
.pt-summary tr.is-money td { color: var(--ink); }
.pt-summary tr.is-sub td { font-size: 13px; color: var(--ink-muted); }
.pt-summary tr.is-group td { padding-top: 18px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 0; }
.pt-provider { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 12px; white-space: nowrap; color: var(--ink); }
.pt-provider img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.pt-provider .pt-mono { font-size: 11px; font-weight: 500; color: var(--ink-muted); }
.pt-col { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); font: 600 12px var(--font-mono); letter-spacing: .02em; text-transform: none; }
.pt-col svg { width: 15px; height: 15px; }
.pt-col.kind-opt { background: var(--kind-opt-soft); color: var(--kind-opt); }
.pt-col.is-derived { background: var(--warn-soft); color: var(--warn-ink); }
.pt-col.is-active { background: var(--primary); color: var(--on-primary); }

/* ── Phase rail: sales clearing now, cash clearing next, card recon later ── */
.pt-rail { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; row-gap: var(--space-3); }
.pt-rail li { display: flex; align-items: center; gap: var(--space-2); }
.pt-rail li + li::before { content: ""; width: 48px; height: 2px; margin: 0 var(--space-3); background: var(--line-strong); border-radius: 2px; }
.pt-rail .r-node { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--font-sans); background: var(--surface-sunken); border: 1.5px solid var(--line-strong); color: var(--ink-muted); }
.pt-rail .r-name { font-weight: 500; color: var(--ink-muted); }
.pt-rail .is-now .r-node { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.pt-rail .is-now .r-node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand); opacity: .35; animation: pt-pulse 2s ease-out infinite; }
.pt-rail .is-now .r-name { color: var(--ink); font-weight: 600; }
@keyframes pt-pulse { from { transform: scale(.85); opacity: .5; } to { transform: scale(1.35); opacity: 0; } }

/* ── Skeleton for figures not worked out yet ── */
.pt-skel { display: inline-block; border-radius: 6px; vertical-align: middle; background: linear-gradient(90deg, var(--line) 0%, var(--surface-sunken) 50%, var(--line) 100%); background-size: 200% 100%; animation: pt-shimmer 1.4s ease-in-out infinite; }
@keyframes pt-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .pt-badge.is-reading::after { animation: none; border-color: var(--primary); }
  .pt-beam, .pt-gauge .g-parked, .pt-flow .f-line, .pt-rail .is-now .r-node::after, .pt-skel { animation: none; }
  .pt-beam { top: 40%; }
}

/* ── EOD page layout ── */
.pt-page { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-2) 0 var(--space-7); border-radius: var(--radius-lg); }
.pt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pt-head-day { display: flex; flex-direction: column; gap: 2px; }
.pt-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink); }
.pt-head-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pt-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.pt-row > .pt-card, .pt-row > .pt-drop { min-width: 0; }
.pt-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pt-card-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.pt-tag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); overflow-wrap: anywhere; }
.pt-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bad-soft); color: var(--bad-ink); }
.pt-alert.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.pt-alert ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* Empty: the closures row sits inside a dashed drop area */
.pt-drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: 36px var(--space-5); border: 2px dashed var(--brand); border-radius: 16px; background: var(--brand-soft); }
.pt-drop .pt-slots { width: 100%; }
.pt-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--space-3); }

/* A slot is its own file picker and drop target: the input covers it, invisible */
.pt-slot-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.pt-slot:has(.pt-slot-input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pt-slot:has(.pt-slot-input):hover { border-color: var(--primary); }
.pt-slot.is-uploading { border-color: var(--primary); }
.pt-slot.is-uploading .pt-fill { animation: pt-rise 3.2s ease-in-out infinite alternate; }
@keyframes pt-rise { from { height: 8%; } to { height: 92%; } }

/* Reading: one large receipt under the scan beam */
.pt-reading { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 28px; }
.pt-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary-soft); border-top-color: var(--primary); animation: pt-spin .9s linear infinite; flex: none; }

/* Empty flow: a ghost of the diagram to come */
.pt-flow.is-ghost .f-node, .pt-flow.is-ghost .f-hub { fill: var(--surface-sunken); stroke: var(--line-strong); stroke-dasharray: 5 5; }
.pt-flow.is-ghost path { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: 4 8; }
.pt-flow-wrap { overflow-x: auto; }
.pt-journal summary { cursor: pointer; color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pt-journal table { width: 100%; margin-top: var(--space-3); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pt-journal td, .pt-journal th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.pt-journal td:last-child, .pt-journal th:last-child { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .pt-slot.is-uploading .pt-fill, .pt-spin { animation: none; }
}

/* Card widths in the top row: variance, reading, closures */
.pt-var { flex: 1 1 340px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.pt-reading { flex: 1 1 320px; }
.pt-closures { flex: 2 1 560px; }

/* Narrow slots: keep the kind chip and state badge clear of the receipt, one line of file name */
.pt-closures .pt-slot { padding-top: 40px; }
.pt-slot .pt-kind, .pt-slot .pt-badge { z-index: 1; }
.pt-slot-name, .pt-slot-meta { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-var > div { flex: 1 1 150px; }