/* Scalpia POS — payment, receipt and refund screens: owned by the "checkout" screen agent of the native redesign; builds on web/ui/native.css (read its guide). */
/* Screens (rules: docs/audits/scalpia-pos-mobile-native-benchmark.md § 3 and § 10):
   • Payment page (.payment-modal, cta page): app bar ← Pembayaran · BAGI; hero total (tabular) with the rounding / "to collect"
     lines; method tiles 2 per row (icon + label, 64 px); cash = "Uang pas" + "Lainnya" (focuses the amount field) then up to
     3 notes; payment rows as a list (split); print / one-tap switches; sticky footer = Kembalian / Sisa line + full-width confirm.
   • QRIS (#qris-screen): own app bar (← method · store), amount, the QR centred on white, check switch, reference, one CTA.
   • Post-sale (.receipt-modal + .receipt-footer.is-done): ✓, "Kembalian" in 48 px (success colour), total / received, the
     receipt below; footer = icon actions (Cetak, WhatsApp, Bagikan, E-mail) above a full-width "Penjualan baru". No toast.
   • Receipt page (history): the receipt as paper on the grey page; footer = the same icon actions + red text Refund / Batalkan.
   • Refund page: one row per line (name, sold quantity and amount, refund quantity field right, "back to stock" switch under),
     then "refunded via" (never QRIS), the refund total and the reasons.
   • Kitchen display (.kitchen-page): station tabs, counters + history chip, one card per order (tablet grid, phone column).
   Local sizes (kit gap): --pay-change 48 px for the change due; falls back to --text-display. Print output is never styled here. */

/* ── Payment page ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.payment-modal{--pay-tile-h:64px}
.payment-modal .modal-head .pay-split{order:3;flex:none;min-height:var(--touch);padding:0 var(--space-3);border:0;border-radius:var(--radius-full);background:transparent;color:var(--primary);font-size:var(--text-md);font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase}
.payment-modal .modal-body{display:flex;flex-direction:column;padding-top:0}
.pay-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-6) 0 var(--space-5);text-align:center}
.payment-modal .payment-total{margin:0;font-size:var(--text-amount);line-height:var(--leading-amount);font-weight:var(--weight-bold);letter-spacing:0;color:var(--text);font-variant-numeric:tabular-nums}
.payment-modal .payment-caption{margin:0;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.pay-summary{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1) var(--space-4);font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.pay-summary>div:not([hidden]){display:flex;align-items:baseline;gap:var(--space-1)}
.pay-summary strong{font-weight:var(--weight-semibold);color:var(--text);font-variant-numeric:tabular-nums}
.pay-summary>div.pay-sum-due{display:none}
.pay-section-title{margin:0 0 var(--space-2);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--primary)}
/* Method tiles: icon in a tonal circle + label, two per row on a phone; the selected one is filled tonal with a primary edge. */
.payment-modal .method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:0 0 var(--space-4)}
.payment-modal .method-button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--space-3);min-height:var(--pay-tile-h);padding:var(--space-2) var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);box-shadow:none;color:var(--text);font-size:var(--text-lg);line-height:var(--leading-md);font-weight:var(--weight-medium);text-align:left;overflow-wrap:anywhere}
.payment-modal .method-button .method-icon{flex:none;display:grid;place-items:center;width:var(--avatar);height:var(--avatar);border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-lg)}
.payment-modal .method-button .method-name{flex:1 1 auto;min-width:0}
.payment-modal .method-button small{flex:none;font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted);font-weight:var(--weight-regular)}
.payment-modal .method-button.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--primary);color:var(--tonal-fg)}
.payment-modal .method-button.active .method-icon{background:var(--primary);color:var(--on-primary)}
/* Cash: Uang pas (2 columns) + Lainnya, then the notes; a card row only gets Uang pas, full width. */
.payment-modal .quick-amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:0 0 var(--space-3)}
.payment-modal .quick-amounts button{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--field-h);padding:0 var(--space-2);border:0;border-radius:var(--radius-md);background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.payment-modal .quick-amounts .exact{grid-column:span 2;flex-direction:row;justify-content:space-between;padding:0 var(--space-4);background:var(--primary);color:var(--on-primary)}
.payment-modal .quick-amounts .exact:only-child{grid-column:1/-1}
.payment-modal .quick-amounts .exact span{font-size:var(--text-md);font-weight:var(--weight-medium)}
.payment-modal .quick-amounts .exact strong{font-size:var(--text-lg);font-weight:var(--weight-bold)}
.payment-modal .quick-amounts .other{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text)}
/* Payment rows: one filled amount field when alone; a list (method · amount · remove) once split, the active row marked. */
.payment-modal #payment-rows{display:flex;flex-direction:column;margin:0 0 var(--space-2)}
.payment-modal .payment-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) var(--touch);gap:var(--space-2);align-items:center;margin:0;padding:var(--space-2) 0 var(--space-2) var(--space-3);border:0;border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 var(--border)}
.payment-modal .payment-row.active{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary),inset 0 -1px 0 var(--border)}
.payment-modal #payment-rows .payment-row:only-child{grid-template-columns:minmax(0,1fr);padding:0;background:transparent;box-shadow:none}
.payment-modal .payment-chip{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-1);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);font-size:var(--text-md);font-weight:var(--weight-semibold);text-align:left}
.payment-modal .payment-chip-icon{display:grid;place-items:center;color:var(--tonal-fg)}
.payment-modal .pay-amount-field{position:relative;gap:0}
.payment-modal .pay-amount-field>label{position:absolute;z-index:2;top:var(--space-2);line-height:var(--leading-xs);left:var(--space-4);right:var(--space-4);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
.payment-modal .pay-amount-field:focus-within>label{color:var(--primary)}
.payment-modal .payment-row .amount-box{position:relative}
.payment-modal #payment-rows .payment-row [name=amount]{display:block;width:100%;min-height:calc(var(--field-h) + var(--space-2));margin:0;padding:calc(var(--space-3) + var(--leading-xs)) var(--space-4) var(--space-2);border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--field-bg);box-shadow:inset 0 -1px 0 var(--field-line);color:var(--text);font-size:var(--text-xl);line-height:var(--leading-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.payment-modal #payment-rows .payment-row [name=amount]:focus{outline:0;box-shadow:inset 0 -2px 0 var(--primary)}
.payment-modal .payment-row .amount-shown{inset:0;align-items:flex-end;padding:calc(var(--space-3) + var(--leading-xs)) var(--space-4) var(--space-2);border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--field-bg);box-shadow:inset 0 -1px 0 var(--field-line);font-size:var(--text-xl);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.payment-modal .pay-remove{color:var(--text-muted)}
.payment-modal .payment-note{padding:0 var(--space-1);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}
.payment-modal .pay-loyalty{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:var(--space-2) 0}
.payment-modal .pay-options{display:flex;flex-direction:column;margin-top:var(--space-4);border-top:1px solid var(--border)}
.payment-modal .pay-options .check{border-bottom:1px solid var(--border)}
.payment-modal .pay-options>.field:last-child .check{border-bottom:0}
.payment-modal .fast-pay .field-help{padding:0}
/* Footer: what is left (red) or the change, then the confirm button, full width. */
.payment-modal .modal-footer .pay-due{display:flex;grid-column:1/-1;justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:var(--text-lg);line-height:var(--leading-lg);color:var(--text);font-variant-numeric:tabular-nums}
.payment-modal .pay-due strong{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-bold)}
.payment-modal .pay-due.owed strong{color:var(--danger-fg)}
.payment-modal .modal-footer button[type=submit]{min-height:var(--field-h);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
/* Split bill (F-2): the "Bagi tagihan" chip under the rows; a row from a part names its payer and items, a card row its EDC slip. */
.payment-modal .pay-share{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-2)}
.payment-modal .pay-share-chip{min-height:var(--touch);color:var(--primary)}
.payment-modal .payment-row .pay-part{grid-column:1/-1;padding:0 var(--space-1);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-medium);color:var(--text)}
.payment-modal .payment-row .pay-ref-box{grid-column:1/-1;padding-right:var(--space-3)}
.payment-modal #payment-rows .payment-row:only-child .pay-ref-box{padding-right:0}
.payment-modal .payment-row .pay-ref-box .tf{margin:0}
@media(min-width:700px){
 .payment-modal .method-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
 .payment-modal .modal-head .pay-split{order:1}
}

/* ── QRIS: full screen, high contrast, the QR centred on white ──────────────────────────────────────────────────────── */
.qris-screen{position:fixed;inset:0;z-index:var(--z-fullscreen);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0;overflow:hidden;background:var(--surface);color:var(--text);text-align:center}
.qris-bar{flex:none;display:flex;align-items:center;gap:var(--space-1);min-height:var(--app-bar-h);padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--border);text-align:left}
.qris-bar .qris-back{display:grid;color:var(--text)}
.qris-screen .qris-head{order:0;display:flex;flex-direction:column;gap:0;min-width:0;padding-left:var(--space-1)}
.qris-screen .qris-head strong{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-semibold);letter-spacing:0}
.qris-screen .qris-head span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.qris-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-4)}
.qris-due{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}
.qris-screen .qris-amount{order:0;font-size:var(--text-amount);line-height:var(--leading-amount);font-weight:var(--weight-bold);letter-spacing:0;font-variant-numeric:tabular-nums}
.qris-screen .qris-fee{order:0;font-size:var(--text-md);color:var(--text-muted)}
.qris-screen .qris-code{order:0;display:flex;justify-content:center;max-width:100%}
.qris-screen .qris-code .notice{margin:0;font-size:var(--text-md)}
.qris-screen .qris-image{display:block;width:min(78vw,46vh);max-width:100%;height:auto;max-height:none;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);object-fit:contain}
.qris-screen .qris-controls{order:0;display:flex;flex-direction:column;gap:var(--space-3);width:min(520px,100%);text-align:left}
.qris-screen .qris-hint{margin:0;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.qris-screen .qris-check{padding:var(--space-2) var(--space-4);border:2px solid var(--text);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.qris-screen .qris-check input{width:52px;height:32px}
.qris-screen .error{margin:0}
.qris-actions{flex:none;display:flex;padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
.qris-screen .qris-actions button{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--field-h);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
@media(orientation:landscape) and (min-width:700px){
 .qris-screen{display:flex;padding:0}
 .qris-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"code ." "code due" "code controls" "code .";align-content:stretch;justify-items:stretch;column-gap:var(--space-10);row-gap:var(--space-4);padding:var(--space-6) var(--space-10)}
 .qris-screen .qris-code{grid-area:code;align-self:center;justify-self:center}
 .qris-due{grid-area:due;align-items:flex-start}
 .qris-screen .qris-controls{grid-area:controls;width:100%}
 .qris-screen .qris-image{width:auto;height:min(68vh,640px);max-width:100%}
 .qris-actions{justify-content:flex-end;padding:var(--space-3) var(--space-10)}
 .qris-screen .qris-actions button{flex:0 1 420px}
}

/* ── Split bill sheet (#split-sheet): full screen over the payment page, own app bar, chips Rata / Per item, list rows ── */
.split-sheet{position:fixed;inset:0;z-index:var(--z-fullscreen);display:flex;flex-direction:column;background:var(--bg);color:var(--text)}
.split-bar{flex:none;display:flex;align-items:center;gap:var(--space-1);min-height:var(--app-bar-h);padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--border);background:var(--surface)}
.split-bar .split-back{display:grid;color:var(--text)}
.split-head{display:flex;flex-direction:column;min-width:0;padding-left:var(--space-1)}
.split-head strong{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-semibold)}
.split-head>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted);font-variant-numeric:tabular-nums}
.split-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4) max(var(--space-4),calc((100% - 640px) / 2))}
.split-modes{display:flex;gap:var(--space-2)}
.split-modes .chip{flex:1 1 0;justify-content:center;min-height:var(--touch)}
.split-sheet .list-group{border-radius:var(--radius-lg);overflow:hidden}
.split-sheet .split-count .list-row{border-radius:var(--radius-lg);background:var(--surface)}
.split-stepper{display:inline-flex;align-items:center;gap:var(--space-2)}
.split-stepper output{min-width:var(--space-8);text-align:center;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.split-stepper .qty-step:disabled{opacity:.4}
.split-sheet .split-amount{font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.split-sheet .list-row.is-done .list-title{color:var(--text-muted)}
.split-sheet .tf{margin:0}
.split-sheet .split-all{align-self:flex-start;min-height:var(--touch)}
.split-hint{margin:0;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.split-sheet .error,.split-sheet .notice{margin:0}
.split-actions{flex:none;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) max(var(--space-4),calc((100% - 640px) / 2)) calc(var(--space-3) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
.split-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:var(--text-lg);line-height:var(--leading-lg);font-variant-numeric:tabular-nums}
.split-total strong{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-bold)}
.split-actions button{min-height:var(--field-h);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--weight-semibold)}

/* ── Post-sale result and receipt page ────────────────────────────────────────────────────────────────────────────── */
.receipt-modal{--pay-change:48px}
.receipt-modal .modal-body{background:var(--bg)}
.sale-done{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4) 0 var(--space-6);text-align:center}
.sale-done-icon{display:grid;place-items:center;width:var(--fab-size);height:var(--fab-size);margin-bottom:var(--space-2);border-radius:50%;background:var(--success-fg);color:var(--on-primary)}
.sale-done-icon .ui-icon{width:32px;height:32px;stroke-width:2.4}
.receipt-modal .change-banner{max-width:none;margin:0;padding:0;border-radius:0;background:transparent;color:var(--success-fg);text-align:center}
.receipt-modal .change-banner span{font-size:var(--text-lg);line-height:var(--leading-lg);letter-spacing:0;text-transform:none;color:var(--text-muted)}
.receipt-modal .change-banner strong{display:block;font-size:var(--pay-change,var(--text-display));line-height:1.15;font-weight:var(--weight-bold);letter-spacing:0;color:var(--success-fg);font-variant-numeric:tabular-nums}
.sale-done-title{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-semibold);color:var(--text)}
.sale-done-meta{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted);font-variant-numeric:tabular-nums}
@media screen{
 .receipt-paper{display:flex;justify-content:center}
 .receipt-paper .receipt{width:100%;max-width:380px;margin:0;border:0;border-radius:var(--radius-sm);box-shadow:var(--shadow-1)}
 .receipt-paper .receipt .muted{font-size:var(--text-xs)!important}
 .receipt-modal .receipt-emails{max-width:380px;margin:var(--space-4) auto 0;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--surface)}
 .receipt-modal .receipt-emails h3{margin:var(--space-2) 0;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--primary)}
 .receipt-modal .receipt-emails .list-row{padding:var(--space-2) 0;justify-content:space-between;font-size:var(--text-md)}
}
/* Footer: icon actions (caption under a 40 px circle; Cetak filled), the red text actions of the history, "Penjualan baru". */
.receipt-modal .receipt-footer{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);padding:var(--space-2) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
.receipt-modal .receipt-footer>.new-sale{flex:none;order:2;width:100%;min-height:var(--field-h);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.receipt-modal .receipt-footer .receipt-actions{order:0;display:flex;gap:var(--space-1);margin:0}
.receipt-modal .receipt-footer .receipt-action{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--pay-tile-h,64px);padding:var(--space-1);border:0;border-radius:var(--radius-md);background:transparent;color:var(--text);font-size:var(--text-xs);line-height:var(--leading-xs);font-weight:var(--weight-medium);white-space:nowrap}
.receipt-modal .receipt-action-label{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.receipt-modal .receipt-action-icon{display:grid;place-items:center;width:var(--avatar);height:var(--avatar);border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg)}
.receipt-modal .receipt-action.primary .receipt-action-icon{background:var(--primary);color:var(--on-primary)}
.receipt-modal .receipt-action:active{background:var(--state-press)}
.receipt-modal .receipt-danger-row{order:1;display:flex;margin:0 calc(-1 * var(--space-4));border-top:1px solid var(--border)}
.receipt-modal .receipt-danger{flex:1 1 0;min-height:var(--touch);padding:0 var(--space-2);border:0;border-radius:0;background:transparent;color:var(--danger-fg);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.receipt-modal .receipt-danger+.receipt-danger{box-shadow:inset 1px 0 0 var(--border)}
@media(min-width:700px){
 .receipt-modal .receipt-footer{padding:var(--space-3) var(--space-6)}
 .receipt-modal .receipt-danger-row{margin:0 calc(-1 * var(--space-6))}
}

/* ── Refund page ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.refund-lines{display:flex;flex-direction:column;margin:0 0 var(--space-4)}
.refund-line{display:flex;flex-direction:column;padding:var(--space-2) 0;border-bottom:1px solid var(--border)}
.refund-line-main{display:flex;align-items:center;gap:var(--space-4);min-height:var(--row-h-2)}
.refund-line-text{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.refund-line-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-lg);line-height:var(--leading-lg);color:var(--text)}
.refund-line-meta{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted);font-variant-numeric:tabular-nums}
/* Quantity: a filled kit field (label inside), narrow and centred; the "back to stock" switch row sits under it, full width. */
.refund-line .refund-qty-field{flex:none;width:112px;margin:0}
.refund-line .refund-qty{text-align:center;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.refund-line .switch-row{min-height:var(--touch);padding:0}
.refund-method{margin:0 0 var(--space-3)}
.refund-total{margin:0 0 var(--space-4)}
.refund-total [data-refund-total]{font-size:var(--text-lg);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}

/* ── Small sheets of the flow (kitchen send, WhatsApp, points) ───────────────────────────────────────────────────── */
.kitchen-send-ticket{display:flex;flex-direction:column;gap:2px;padding:0 0 var(--space-4)}
.kitchen-send-ticket strong{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.kitchen-send-ticket span{font-size:var(--text-md);color:var(--text-muted)}
.kitchen-send-notice,.points-notice{margin:var(--space-4) 0 0}
.whatsapp-preview-label{margin-top:var(--space-4)}

/* ── Kitchen display ──────────────────────────────────────────────────────────────────────────────────────────────── */
.kitchen-bar{margin:0 0 var(--space-3)}
.kitchen-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 var(--space-4);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
.kitchen-counter{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--space-3) var(--space-4);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}
.kitchen-counter+.kitchen-counter{box-shadow:inset 1px 0 0 var(--border)}
.kitchen-counter strong{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-bold);color:var(--text);font-variant-numeric:tabular-nums}
.kitchen-counter.is-new strong{color:var(--warning-fg)}
.kitchen-counter.is-ready strong{color:var(--success-fg)}
.kitchen-page .page-heading .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}
.kitchen-board{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-items:start}
.kitchen-page .kitchen-order{display:flex;flex-direction:column;padding:0;border:0;border-top:4px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
.kitchen-page .kitchen-order.is-new{border-top-color:var(--warning-fg)}
.kitchen-page .kitchen-order.is-preparing{border-top-color:var(--accent)}
.kitchen-page .kitchen-order.is-ready{border-top-color:var(--success-fg)}
.kitchen-order-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
.kitchen-order-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.kitchen-page .kitchen-title{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-bold)}
.kitchen-meta{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.kitchen-order-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}
.kitchen-status{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-xs);line-height:var(--leading-xs);font-weight:var(--weight-semibold)}
.kitchen-order.is-new .kitchen-status{background:var(--warning-bg);color:var(--warning-fg)}
.kitchen-order.is-ready .kitchen-status{background:var(--success-fg);color:var(--on-primary)}
.kitchen-order.is-cancelled .kitchen-status{background:var(--danger-bg);color:var(--danger-fg)}
.kitchen-time{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text);font-variant-numeric:tabular-nums}
.kitchen-time .ui-icon{width:18px;height:18px;color:var(--text-muted)}
.kitchen-page .kitchen-revision,.kitchen-page .kitchen-order-note{margin:var(--space-3) var(--space-4) 0;font-size:var(--text-md)}
.kitchen-lines{display:flex;flex-direction:column;padding:0 var(--space-4)}
.kitchen-page .kitchen-line{padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.kitchen-page .kitchen-line:last-child{border-bottom:0}
.kitchen-page .kitchen-qty{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.kitchen-page .kitchen-sub{margin-top:2px;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.kitchen-page .kitchen-note{margin-top:var(--space-1);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--warning-fg)}
.kitchen-order-actions{display:flex;flex-direction:column;gap:var(--space-2);margin-top:auto;padding:var(--space-3) var(--space-4) var(--space-2)}
.kitchen-next{display:flex;gap:var(--space-2)}
.kitchen-next button{flex:1 1 0;min-height:var(--field-h);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.kitchen-more{display:flex;justify-content:space-between;margin:0 calc(-1 * var(--space-2))}
.kitchen-more button{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-3);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.kitchen-more .kitchen-cancel{color:var(--danger-fg)}
@media(min-width:700px){
 .kitchen-board{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-4)}
 .kitchen-page .kitchen-qty{font-size:var(--text-xl);line-height:var(--leading-xl)}
}
@media(hover:hover){
 .payment-modal .method-button:hover{background:var(--state-hover)}
 .payment-modal .method-button.active:hover{background:var(--primary-soft)}
 .payment-modal .quick-amounts .exact:hover{background:var(--primary-hover)}
 .receipt-modal .receipt-action:hover{background:var(--state-hover)}
}

/* F12-1 (fiche 12) — « Tagihan diberikan »: the chip of a ticket whose bill was given, and its table on the floor (plugin
   restaurant), until the bill is released (ticket.unbill). */
.tag.bill-given{background:var(--primary-soft);color:var(--primary)}
.ticket-name.occupied[data-table-state="billed"]{background:var(--primary-soft)}
.ticket-name.occupied[data-table-state="billed"] small{color:var(--primary)}
/* F12-1 — the bill on the customer display: « not a receipt » and « ÷ 2 · ÷ 3 » under the total, on the dark summary. */
.cd-summary .cd-bill{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cd-summary .cd-bill-note{margin:0;color:var(--text-inverse);font-size:var(--text-lg);line-height:var(--leading-lg)}

/* F04-2 (fiche 04): « Prix TTC » under the total of the basket when the shop prices with tax included. */
.summary-tag{margin:calc(-1 * var(--space-2)) 0 var(--space-3);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-muted)}

/* F27-3 (fiche 27): « + Tip » of the payment sheet — chips (no tip, suggestions, other amount, change as tip), members, status. */
.payment-modal .pay-tip{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-3)}
.payment-modal .pay-tip-chips,.payment-modal .pay-tip-staff{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.payment-modal .pay-tip-chip{min-height:var(--touch)}
.payment-modal .pay-tip-label{font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-muted)}
.payment-modal .pay-tip-status{display:flex;flex-direction:column;gap:var(--space-1)}
.payment-modal .pay-tip-status:empty{display:none}

/* ── PAY-2 (P-PAY): proof of payment — block of a payment row, section of the receipt sheet, photo viewer ── */
.payment-modal .pay-proof{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}
.payment-modal .pay-proof[hidden],.proof-section [hidden]{display:none}
.proof-sheet[hidden]{display:none}
.pay-proof-bar,.proof-actions,.proof-pills,.pay-proof-tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.pay-proof-add,.proof-chip{min-height:var(--touch)}
.pay-proof-add[data-has-photo]{background:var(--tonal-bg);color:var(--tonal-fg)}
.pay-proof-thumbs,.proof-thumbs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pay-proof-thumbs:empty,.proof-thumbs:empty,.proof-pills:empty{display:none}
.proof-thumb{position:relative;width:calc(var(--touch) * 1.5);height:calc(var(--touch) * 1.5);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken)}
.proof-thumb-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.proof-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.proof-thumb-remove{position:absolute;top:0;right:0;width:var(--touch);height:var(--touch);display:grid;place-items:center;background:var(--scrim);color:var(--surface)}
.pay-proof-block{flex:1 1 100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-md);line-height:var(--leading-md)}
.pay-proof-block[hidden]{display:none}
.proof-section{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-4) 0}
.proof-row,.proof-customer{display:flex;flex-direction:column;gap:var(--space-2)}
.proof-customer .proof-chip{align-self:flex-start}
.proof-sheet .list-row[role=button]{cursor:pointer;min-height:var(--touch)}
.proof-sheet .list-row.is-current .list-title{font-weight:var(--weight-semibold)}
.proof-viewer{position:fixed;inset:0;z-index:var(--z-fullscreen);display:flex;align-items:center;justify-content:center;background:var(--scrim)}
.proof-viewer img{max-width:100%;max-height:100%;object-fit:contain}
.proof-viewer-close{position:absolute;top:var(--space-2);right:var(--space-2);width:var(--touch);height:var(--touch);display:grid;place-items:center;background:var(--surface);color:var(--text)}