/*
 * modern-payment.css — Payment + Split-payment screens (ModernPaymentPage,
 * ModernSplitPaymentPage): payment layout, dialog titlebar, payment-method grid,
 * split-payment shares. Clean `.scale-modern-payment-*` / `.scale-modern-split-*`
 * namespace (a future `.razor.css` isolation candidate, but kept global for now
 * to preserve the cascade).
 *
 * Phase 6 split: peeled verbatim off the (post-tranche-5) end of modern-base.css
 * (was lines 4628-EOF). Loaded via index.html AFTER modern-base.css and BEFORE
 * modern-builder.css — source order is load-bearing. Do not reorder the <link>
 * tags. Tokens resolve from modern-tokens.css imported by modern-base.css.
 */

.scale-modern-payment {
  height: 100vh;
  min-height: 0;
  background: var(--scale-bg);
  color: var(--scale-text);
  font-family: var(--scale-font-sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The canonical dialog titlebar vocabulary (.scale-modern-dialog-titlebar,
   .scale-modern-dialog-title, .scale-modern-dialog-title-action, …) now lives in
   modern-sdialog.css as the single shared header style for every dialog. */

/* ---------------------------------------------------------------------------
   Payment / split-payment topbar
   Both screens render the POS header verbatim (.scale-modern-pos-topbar and its
   whole vocabulary), so all this file adds is keeping the bar at its own height
   inside the flex-column .scale-modern-payment shell — .scale-modern-pos is a
   block, so the POS page never has to say this.

   The old .scale-modern-payment-topbar / -leading / -title / -ticket-* rules went
   with the markup they styled.
   --------------------------------------------------------------------------- */

.scale-modern-payment > .scale-modern-pos-topbar {
  flex: 0 0 auto;
}

/* Back to order — first child of the summary column, above the price-summary card.
   A plain text control on the page background (the header pill treatment does not
   apply off the navy bar). Scoped to the summary because `.scale-modern-shell
   button` (0-1-1) out-specifies a lone class selector and would strip the colour
   back to the shell reset. */
.scale-modern-payment-summary > .scale-modern-payment-back {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px 0 2px;
  border-radius: var(--scale-radius-round);
  background: transparent;
  color: var(--scale-primary);
  font-size: var(--scale-fs-15) !important;
  font-weight: 600 !important;
  line-height: 1.2;
}

.scale-modern-payment-summary > .scale-modern-payment-back:hover {
  background: var(--scale-primary-soft);
}

.scale-modern-payment-summary > .scale-modern-payment-back .material-icons {
  font-size: var(--scale-fs-20);
  font-weight: 400;
}

.scale-modern-payment-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54%;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.scale-modern-payment-summary {
  min-height: 0;
  padding: 14px 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.scale-modern-payment-composer {
    min-width: 0;
    min-height: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--scale-bg);
    border: 0.5px solid var(--scale-border);
    border-radius: 12px;
    box-shadow: var(--scale-shadow-tile, 0 1px 3px rgba(0, 0, 0, 0.05));
    overflow: hidden;
    margin: 16px 16px 16px 0;
}

.scale-modern-payment-order-head {
  min-height: 32px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scale-modern-payment-order-head div {
  display: flex;
  flex-direction: column;
}

.scale-modern-payment-order-head strong {
  font-size: var(--scale-fs-18) !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.scale-modern-payment-order-head span {
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-13) !important;
  font-weight: 500 !important;
  line-height: 1.35;
}

.scale-modern-payment-section,
.scale-modern-payment-total-card,
.scale-modern-payment-amount,
.scale-modern-payment-info-card {
  background: var(--scale-panel);
  border-radius: 12px;
  box-shadow: var(--scale-shadow-tile);
}

.scale-modern-payment-info-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* Deliberately NOT overflow:hidden — ModifyPaymentDialog renders a Bootstrap `dropup`
     .dropdown-menu inline inside the payments rows of this card, and it is absolutely
     positioned, so clipping the card would cut the menu off. Nested blocks must therefore
     size themselves to fit (no max-height without overflow-y). */
}

/* The summary tabs, the split share ("check") list and the payments list all render
   INSIDE .scale-modern-payment-info-card, so the whole left column is literally one
   panel. Each nested block drops its own panel chrome and is separated from the one
   above it by a hairline instead. */
.scale-modern-payment-info-card .scale-modern-payment-history,
.scale-modern-payment-info-card .scale-modern-split-share-list {
  margin-top: 14px;
  border-top: 1px solid var(--scale-separator);
}

.scale-modern-payment-info-card .scale-modern-split-share-list {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  /* NO max-height: the list shares the card's scroll space — .scale-modern-payment-summary
     (the left column) is the scroller. A cap here without overflow-y clipped the CARD at
     300px while the share rows kept rendering below it, so shares 6+ painted outside the
     white panel. Flowing at natural height keeps every row inside the card, exactly like
     the payments-history list in this same card. */
  max-height: none;
  /* The standalone list reserved a scrollbar gutter, which pushed share amounts ~15px
     inwards and out of line with the summary/payment figures. */
  scrollbar-gutter: auto;
  /* Breathing room off the hairline above — the rows themselves are borderless now, so
     the block needs its own top/bottom inset. The bottom one is the card's own bottom
     inset: on the split screen the check list is the LAST block in the card, so a row
     (and its full-bleed selected tint) would otherwise run into the rounded corner.
     No horizontal padding: the tint is deliberately full-bleed. */
  padding: 6px 0 12px;
}

/* Share rows use the card's 20px content inset on both sides, so the share amount's
   right edge lands on the same line as the totals and payment amounts. */
.scale-modern-payment-info-card .scale-modern-split-share-card {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Keeps the trailing action button off the panel edge. On the ROW, not the card, so the
   selected row's tint stays full-bleed while its content stays inset. */
.scale-modern-payment-info-card .scale-modern-split-share-row {
  padding-right: var(--scale-split-row-inset);
}

/* The names line hangs off the check row, so it starts under that row's TITLE rather than
   at the card's content inset: 20px card inset + the 28px status badge + the 10px grid gap.
   The right edge is the plain content inset — there is nothing to align to any more. */
.scale-modern-payment-info-card .scale-modern-split-share-items {
  padding-left: 58px;
  padding-right: 20px;
}

.scale-modern-payment-info-card .scale-modern-payment-history-list {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* "Payments" is a quiet section label with the count in its own badge — the heading
   itself is not the thing to read, the payment card under it is. */
.scale-modern-payment-info-card .scale-modern-payment-kicker {
  padding: 12px 20px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-15);
  font-weight: 500;
  letter-spacing: var(--scale-tracking-normal);
  text-transform: none;
}

/* Count badge — the same pill the topbar queue counters use (modern-orders.css). */
.scale-modern-payment-kicker .scale-modern-payment-count {
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--scale-radius-chip);
  background: rgba(120, 120, 128, 0.22);
  color: var(--scale-text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--scale-fs-11);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--scale-tracking-normal);
  font-variant-numeric: tabular-nums;
}

/* Each payment is its own soft card, on ONE line: method name (+ time · cashier) on the
   left, the amount on the right, then the modify menu. The card sits inside the 20px
   content inset so its amount lines up with the totals and the check rows. */
.scale-modern-payment-info-card .scale-modern-payment-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 14px, not 20px, at the bottom: on the split screen the check list follows this block
     and brings its own 14px margin above its hairline, so 20px double-spaced them. */
  padding: 0 20px 14px;
}

.scale-modern-payment-info-card .scale-modern-payment-history-row {
  padding: 10px 8px 10px 14px;
  /* Fill only — a border on top of the panel-alt fill double-drew the card edge. */
  border: 0;
  border-radius: var(--scale-radius-card);
  background: var(--scale-panel-alt);
}

/* Method name is plain text here — the tinted chip + colour dot competed with the
   figure beside it — but it IS the row's headline, so it takes the emphasis weight. */
.scale-modern-payment-info-card .scale-modern-payment-method span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--scale-text);
  font-size: var(--scale-fs-15);
  font-weight: 700;
}

.scale-modern-payment-info-card .scale-modern-payment-method span i {
  display: none;
}

.scale-modern-payment-info-card .scale-modern-payment-method small {
  font-size: var(--scale-fs-12);
}

/* Amount: plain right-aligned figure, same step and weight as the strong totals rows
   above it. It used to be a filled navy pill, which shouted over the check list. */
.scale-modern-payment-info-card .scale-modern-payment-paid {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  padding: 0;
  background: transparent;
  text-align: right;
}

.scale-modern-payment-info-card .scale-modern-payment-paid strong {
  display: inline;
  color: var(--scale-text);
  font-size: var(--scale-fs-15);
  font-weight: 700;
}

.scale-modern-payment-info-card .scale-modern-payment-paid small {
  color: var(--scale-text-mute);
}

.scale-modern-payment-info-card .scale-modern-payment-paid .scale-modern-payment-original-amount {
  color: var(--scale-text-soft);
}

/* Modify menu: a bare glyph, not a tinted round button — it is the least important
   control in the card. Needs 0-3-0 to beat `body:has(.scale-modern-payment)
   .scale-modern-modify-payment__trigger` (0-2-1) in modern-payment-keypad.css. */
.scale-modern-payment-info-card .scale-modern-payment-history-row .scale-modern-modify-payment__trigger {
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--scale-text-soft);
}

.scale-modern-payment-info-card .scale-modern-payment-history-row .scale-modern-modify-payment__trigger:hover {
  background: color-mix(in srgb, var(--scale-text-soft) 14%, transparent);
  color: var(--scale-text-mute);
}

/* Info-card chip tabs: Price summary / Order details — a segmented control matching
   the discount dialog's Presets/Manual tabs. */
.scale-modern-payment-summary-tabs {
  display: flex;
  gap: 2px;
  margin: 14px 16px 4px;
  padding: 3px;
  border-radius: var(--scale-radius-seg, 10px);
  background: var(--scale-chip-bg);
}

.scale-modern-payment-summary-tabs button {
  flex: 1 1 0;
  min-height: var(--scale-chip-height);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--scale-text-mute);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-14);
  font-weight: 600;
  cursor: pointer;
}

.scale-modern-payment-summary-tabs button.is-active {
  color: var(--scale-text);
  background: var(--scale-panel);
  box-shadow: var(--scale-shadow-tile);
}

.scale-modern-payment-totals {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scale-modern-payment-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  color: var(--scale-text);
  font-family: var(--scale-font-price);
  font-size: var(--scale-fs-15);
  font-weight: 500;
  line-height: 1.3;
}

.scale-modern-payment-total-row strong {
  color: var(--scale-text);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-15) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}

.scale-modern-payment-total-row.is-divider {
  border-bottom: 1px solid var(--scale-separator);
  padding-bottom: 10px;
}

.scale-modern-payment-total-row.is-strong strong {
  font-weight: 700 !important;
}

.scale-modern-payment-total-row strong.is-danger {
  color: var(--scale-danger);
}

.scale-modern-payment-totals .scale-modern-payment-total-editable {
  font-family: var(--scale-font-price);
  font-size: var(--scale-fs-15);
  padding: 7px 0;
}

.scale-modern-payment-totals .scale-modern-payment-total-editable strong {
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-15) !important;
  font-weight: 500 !important;
}

.scale-modern-payment-order-detail {
  padding: 22px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scale-modern-payment-order-detail__title {
  text-align: center;
  font-family: var(--scale-font-price);
  font-size: var(--scale-fs-16);
  color: var(--scale-text);
  margin-bottom: 4px;
}

.scale-modern-payment-order-detail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--scale-font-price);
  font-size: var(--scale-fs-13);
  color: var(--scale-text);
}

.scale-modern-payment-order-detail__list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.scale-modern-payment-order-detail__list > div > span:last-child {
  font-family: var(--scale-font-sans);
  color: var(--scale-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.scale-modern-payment-order-detail__methods-row .scale-modern-payment-order-detail__methods {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.scale-modern-payment-order-detail__methods i.material-icons {
  font-size: var(--scale-fs-16);
  color: var(--scale-text-mute);
}

.scale-modern-payment-status-icons {
  display: flex;
  justify-content: center;
  gap: 52px;
  padding: 11px 20px 10px;
  border-top: 1px solid var(--scale-separator);
}

.scale-modern-payment-status-icon,
.scale-modern-payment-status-icon.is-voided,
.scale-modern-payment-status-icon.is-refunded {
  background: transparent;
  border: 0;
  padding: 2px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  font-size: var(--scale-fs-10) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
}

.scale-modern-payment-status-icon i.material-icons,
.scale-modern-payment-status-icon.is-voided i.material-icons,
.scale-modern-payment-status-icon.is-refunded i.material-icons {
  font-size: var(--scale-fs-14) !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
}

.scale-modern-payment-status-icon span {
  font-size: var(--scale-fs-10) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.scale-modern-payment-status-icon.is-voided {
  color: var(--scale-danger);
}

.scale-modern-payment-status-icon.is-refunded {
  color: var(--scale-text-mute);
}

.scale-modern-payment-section {
  min-height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.scale-modern-payment-section label {
  width: 96px;
  color: var(--scale-text);
  font-size: var(--scale-fs-14) !important;
  font-weight: 400 !important;
}

.scale-modern-payment-section input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--scale-text);
  font-family: var(--scale-font-sans);
  height: 38px !important;
  font-size: var(--scale-fs-14) !important;
  font-weight: 400 !important;
  text-align: right;
}

.scale-modern-payment-total-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.5px auto;
  overflow: hidden;
}

.scale-modern-payment-total-separator {
  background: var(--scale-separator);
}

.scale-modern-payment-total-lines {
  padding: 8px 12px 8px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.scale-modern-payment-total-lines div,
.scale-modern-payment-total-lines .order-delivery-tip-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-12);
  font-weight: 500;
  line-height: 1.35;
}

.scale-modern-payment-total-lines strong {
  color: var(--scale-text);
  font-weight: 500 !important;
  font-size: var(--scale-fs-12) !important;
  font-variant-numeric: tabular-nums;
}

.scale-modern-payment-total-lines strong.is-danger {
  color: var(--scale-danger);
}

.scale-modern-payment-total-lines strong.is-success {
  color: var(--scale-success);
}

.scale-modern-payment-total-editable {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-12);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.scale-modern-payment-total-editable:hover:not(:disabled) span {
  color: var(--scale-text);
}

.scale-modern-payment-total-editable:hover:not(:disabled) span i.material-icons {
  color: var(--scale-text);
}

.scale-modern-payment-total-editable:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.scale-modern-payment-total-editable span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.scale-modern-payment-total-editable span i.material-icons {
  font-size: var(--scale-fs-12);
  color: var(--scale-text-soft);
}

.scale-modern-payment-total-editable strong {
  color: var(--scale-text);
  font-weight: 500 !important;
  font-size: var(--scale-fs-12) !important;
  font-variant-numeric: tabular-nums;
}

.scale-modern-payment-total-editable.is-placeholder span {
  color: var(--scale-accent, var(--scale-text));
  font-weight: 600;
}

.scale-modern-payment-total-editable.is-placeholder strong {
  color: var(--scale-text-soft);
}

.scale-modern-payment-balance {
  min-width: 134px;
  padding: 8px 14px;
  border-left: 0.5px solid var(--scale-separator);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.scale-modern-payment-balance span,
.scale-modern-payment-kicker {
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-10);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scale-modern-payment-kicker {
  font-size: var(--scale-fs-13);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: var(--scale-leading-footnote);
}

.scale-modern-payment-balance strong {
  margin-top: 1px;
  color: var(--scale-text);
  font-family: var(--scale-font-mono);
  font-size: var(--scale-fs-24) !important;
  font-weight: 700 !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.scale-modern-payment-balance small,
.scale-modern-payment-paid small {
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-11) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

.scale-modern-payment-status-actions {
  display: flex;
  gap: 8px;
}

.scale-modern-payment-status-actions button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: var(--scale-primary-soft);
  color: var(--scale-primary);
  font-size: var(--scale-type-footnote-size);
  font-weight: 400;
}

.scale-modern-payment-history {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.scale-modern-payment-kicker {
  padding: 0 20px 6px;
}

.scale-modern-payment-history-list {
    flex: 1;
}

.scale-modern-payment-empty {
  padding: 28px;
  text-align: center;
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-15);
  font-weight: 500;
  line-height: 1.35;
}

.scale-modern-payment-history-row {
  min-height: 56px;
  padding: 10px 12px 10px 14px;
  border-bottom: 0.5px solid var(--scale-separator);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.scale-modern-payment-history-row:last-child {
  border-bottom: 0;
}

.scale-modern-payment-history-row.is-modified {
  background: color-mix(in srgb, var(--scale-warning) 10%, var(--scale-panel));
}

.scale-modern-payment-method span.scale-modern-payment-original {
  opacity: 0.58;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.scale-modern-payment-method {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.scale-modern-payment-method span {
  width: fit-content;
  max-width: 100%;
  padding: 2px 7px 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--scale-text-soft) 10%, transparent);
  color: var(--scale-text);
  font-size: var(--scale-fs-11);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scale-modern-payment-method span i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--scale-primary);
  flex-shrink: 0;
}

.scale-modern-payment-method span.is-cash i {
  background: var(--scale-success);
}

.scale-modern-payment-method span.is-card i {
  background: var(--scale-info);
}

.scale-modern-payment-method span.is-visa i {
  background: var(--scale-primary);
}

.scale-modern-payment-method span.is-master i,
.scale-modern-payment-method span.is-custom i {
  background: var(--scale-accent);
}

.scale-modern-payment-method small {
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-11);
}

.scale-modern-payment-paid {
  text-align: right;
}

.scale-modern-payment-paid strong {
  display: block;
  color: var(--scale-text);
  font-size: var(--scale-fs-14);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.scale-modern-payment-paid .scale-modern-payment-original-amount {
  display: block;
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-11);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}

.scale-modern-payment-amount {
  min-height: 68px;
  padding: 16px 18px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.scale-modern-payment-amount strong {
  color: var(--scale-text);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-26) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.scale-modern-payment-amount small {
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-12) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

.scale-modern-payment-tools {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: hidden;
    background: transparent;
}

.scale-modern-payment-tools button {
  border: 0;
  background: transparent;
  color: var(--scale-text-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--scale-fs-11);
  font-weight: 500;
}

.scale-modern-payment-tools button:last-child {
    border-right: 0;
}

.scale-modern-payment-tools button:disabled {
  color: var(--scale-text-soft);
  opacity: 0.55;
}

.scale-modern-payment-tools i {
  font-size: var(--scale-fs-20);
  color: var(--scale-text-soft);
}

.scale-modern-payment-tools button:hover:not(:disabled) i,
.scale-modern-payment-tools button:hover:not(:disabled) {
  color: var(--scale-text);
}

.scale-modern-payment-spacer {
  flex: 1;
  min-height: 8px;
}

.scale-modern-payment-divider {
  height: 0;
  margin: 0 -16px;
  border-top: 0.5px solid var(--scale-separator);
  flex-shrink: 0;
}

.scale-modern-payment-inputs {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 31%;
  gap: 12px;
  align-items: start;
}

/* Row height scales with viewport but stays bounded; the SAME value drives the
   keypad and the payment-method column so their buttons always match height. */
.scale-modern-payment-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--scale-keypad-row);
  gap: var(--scale-keypad-gap);
}

.scale-modern-payment-methods {
  display: grid;
  grid-auto-rows: var(--scale-keypad-row);
  gap: var(--scale-keypad-gap);
}

.scale-modern-payment-keypad button {
  border: 1px solid var(--scale-border);
  border-radius: var(--scale-keypad-radius);
  background: var(--scale-panel);
  color: var(--scale-text);
  box-shadow: var(--scale-shadow-tile);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-26) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* Backspace is a normal key: white panel fill, border and tile shadow all inherited
   from the rule above, so it matches the digits. (It used to be fully transparent,
   which made it look like a missing key on the payment and split-payment pages —
   only the icon size below is specific to it.) */

.scale-modern-payment-keypad button.is-function i {
  font-size: var(--scale-fs-22);
}

.scale-modern-payment-keypad button.is-payment,
.scale-modern-payment-methods button.is-payment {
  border-color: var(--scale-primary);
  background: var(--scale-primary);
  color: var(--scale-text-on-primary);
  font-size: var(--scale-fs-16) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
}

.scale-modern-payment-methods button {
  border: 0;
  border-radius: 10px;
  background: var(--scale-primary);
  color: var(--scale-text-on-primary);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-16) !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scale-modern-payment-methods button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.scale-modern-payment-keypad button.is-placeholder,
.scale-modern-payment-methods button.is-placeholder {
  background: color-mix(in srgb, var(--scale-chip-bg) 70%, transparent);
  color: transparent;
  box-shadow: none;
}

/* Close Order / Close Paid Order — shown on a 100%-discounted or fully-paid-but-pending
   order so the cashier can finalise it without a further tender. */
.scale-modern-payment-close {
  margin-top: 12px;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 12px;
  background: var(--scale-success);
  color: #fff;
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-16);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: filter var(--scale-duration-press) var(--scale-ease-out-ios);
}

.scale-modern-payment-close:hover {
  filter: brightness(1.05);
}

.scale-modern-payment-close:active {
  filter: brightness(0.95);
}

.scale-modern-split-payment .scale-modern-payment-summary {
  min-height: 0;
}

.scale-modern-split-summary {
  gap: 10px;
}

/* The check list is a FLAT list of rows: no per-row hairlines, no per-row card chrome.
   What a row is doing is said by its leading status badge and — for the check being
   paid — by a soft tint behind the whole row. Spacing does the separating. */
.scale-modern-split-share-list {
  /* Keeps the trailing action button (print, or the accordion chevron before it) off the
     panel edge. Declared here so the row rule and any future sibling agree on one value. */
  --scale-split-row-inset: 8px;
  background: var(--scale-panel);
  box-shadow: var(--scale-shadow-tile);
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Each check is a GROUP: the tappable row, plus — for split-by-items checks — a collapsible
   panel listing that check's lines. Grouping them keeps an open panel attached to the row
   that opened it. */
.scale-modern-split-share-group {
  min-width: 0;
}

/* Each share is a row: the tappable card + optional items-accordion and print buttons.
   The row, not the card, carries the state classes so the selected tint runs the full
   width — behind the accordion and print buttons too. */
.scale-modern-split-share-row {
  display: flex;
  align-items: stretch;
}

.scale-modern-split-share-row.is-selected {
  background: var(--scale-panel-alt);
}

.scale-modern-split-share-card {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 60px;
  padding: 2% !important;
  border: 0 !important;
  background: transparent;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(74px, auto);
  align-items: center;
  gap: 10px;
  text-align: left;
}

/* Print is the quietest control on the row — a muted glyph that only warms up on hover,
   so it does not read as the row's primary action (selecting the check is).
   Shell-scoped for the same reason as the accordion toggle below: `.scale-modern-shell
   button { color: inherit }` (0-1-1) out-specifies a bare single-class rule, so the
   unscoped version of this rule never coloured the icon at all. */
.scale-modern-shell .scale-modern-split-share-print {
  flex: 0 0 auto;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--scale-text-soft);
  cursor: pointer;
}

.scale-modern-shell .scale-modern-split-share-print:hover:not(:disabled) {
  color: var(--scale-primary);
}

.scale-modern-shell .scale-modern-split-share-print:disabled {
  color: var(--scale-text-soft);
  opacity: 0.5;
  cursor: default;
}

.scale-modern-split-share-print i {
  font-size: var(--scale-fs-20);
}

/* Stand-in for the accordion toggle on a row that has no items to show, so every row in
   an item split keeps the same action gutter and the amounts stay in one column. */
.scale-modern-split-share-slot {
  flex: 0 0 40px;
}

/* ── Status badge ─────────────────────────────────────────────────────────
   Unpaid → the check number, grey. Being paid → the number, filled navy. Settled →
   a soft-success tick (same 12%-mix chip recipe as the POS discount badge). The paid
   rule comes LAST on purpose: a settled check that is also selected keeps the tick,
   because selection is already stated by the row tint. */
.scale-modern-split-share-index {
  width: 28px;
  height: 28px;
  border-radius: var(--scale-radius-round);
  background: color-mix(in srgb, var(--scale-text-soft) 16%, transparent);
  color: var(--scale-text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--scale-fs-13);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scale-modern-split-share-row.is-selected .scale-modern-split-share-index {
  background: var(--scale-primary);
  color: var(--scale-text-on-primary);
}

.scale-modern-split-share-row.is-paid .scale-modern-split-share-index {
  background: color-mix(in srgb, var(--scale-success) 12%, transparent);
  color: var(--scale-success);
}

.scale-modern-split-share-index i {
  font-size: var(--scale-fs-16);
}

/* Just the check number. Everything that used to share this line with it (split type, line
   count) has been taken off, so there is no second slot to style here any more. */
.scale-modern-split-share-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
}

.scale-modern-split-share-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--scale-text);
  font-size: var(--scale-fs-15);
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Amount: same step and weight as the strong totals rows in this card. No PAID/DUE
   caption — the badge says which one it is. */
.scale-modern-split-share-amount {
  display: grid;
  justify-items: end;
}

.scale-modern-split-share-amount strong {
  color: var(--scale-text);
  font-size: var(--scale-fs-15);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Settled checks step back: they are history, and the figure on them is what was
   already collected. The selected check keeps full-contrast text.
   --scale-text-mute, not --scale-text-soft: soft is ~2.9:1 on the panel, which fails
   AA for 14px text — these rows still have to be readable, only quieter. */
.scale-modern-split-share-row.is-paid .scale-modern-split-share-copy strong,
.scale-modern-split-share-row.is-paid .scale-modern-split-share-amount strong {
  color: var(--scale-text-mute);
}

.scale-modern-split-share-row.is-selected .scale-modern-split-share-copy strong {
  color: var(--scale-primary);
}

.scale-modern-split-share-row.is-selected .scale-modern-split-share-amount strong {
  color: var(--scale-text);
}

/* ── Split-by-items accordion ─────────────────────────────────────────────
   Scoped with `.scale-modern-shell` (0-2-0) on purpose: the shell's button reset
   `.scale-modern-shell button { color: inherit; background: none }` (modern-base.css,
   0-1-1) out-specifies a bare single-class rule and would strip the chevron's colour. */
.scale-modern-shell .scale-modern-split-share-toggle {
  flex: 0 0 auto;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--scale-text-soft);
  cursor: pointer;
}

.scale-modern-split-share-toggle i {
  font-size: var(--scale-fs-20);
  transition: transform 0.18s ease;
}

.scale-modern-split-share-group.is-expanded .scale-modern-split-share-toggle i {
  transform: rotate(180deg);
}

.scale-modern-shell .scale-modern-split-share-group.is-expanded .scale-modern-split-share-toggle {
  color: var(--scale-primary);
}

/* The open panel: one wrapped line of item names, tinted so it reads as belonging to the
   row above rather than as another check in the list. It used to be a qty/name/amount grid;
   the figures live on the check row, so the panel only answers "which items". */
.scale-modern-split-share-items {
  padding: 2px 2% 10px;
  background: color-mix(in srgb, var(--scale-text-soft) 6%, transparent);
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-14);
  font-weight: 500;
  line-height: var(--scale-leading-mid);
  text-align: left;
  overflow-wrap: anywhere;
}