/* ── Page header + breadcrumb ─────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-block: 1rem 1.5rem;
}
.page-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text);
  margin: 0 0 0.4rem;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0; margin: 0;
  gap: 0;
  font-size: var(--fs-sm);
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
  content: "/";
  margin-inline: 0.5rem;
  color: var(--text-subtle);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb [aria-current="page"] { color: var(--primary); font-weight: var(--fw-medium); }

.payments-subtitle {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ── Tabs ─────────────────────────────────────────────────────
   Classic folder tabs fused to the panel below: each tab is a bordered box with
   rounded top corners, pulled down 1px so it sits ON the card's top border. The
   inactive tabs keep that border (the line runs through them); the selected tab
   paints its bottom edge in the card's own surface colour, which erases the line
   under it so tab and panel read as one surface.

   Deliberately no `overflow`: with overflow-x the box also manages vertical
   overflow and the tabs' 1px overhang produced a stray vertical scrollbar. Two
   tabs never need scrolling, so they simply wrap on a narrow viewport. */
.payments-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-1, 0.25rem);
  margin-block-end: 0;
  position: relative;
  z-index: 1;                       /* above the card's border */
}
.payments-tab {
  appearance: none;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  border-start-start-radius: var(--radius-md);
  border-start-end-radius: var(--radius-md);
  margin-block-end: -1px;           /* overlap the panel's top border */
  padding: 0.7rem 1.15rem;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.payments-tab:hover { background: var(--surface-hover); color: var(--text); }
.payments-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--primary);
  font-weight: var(--fw-semibold);
  border-block-end-color: var(--surface);   /* erase the line under the active tab */
}
.payments-tab[aria-selected="true"]:hover { background: var(--surface); }
.payments-tab:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Square the panel card's top corners so the active tab joins it seamlessly. */
[role="tabpanel"] app-card {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
[role="tabpanel"]:focus-visible { outline: 0; }

/* ── Tables ───────────────────────────────────────────────── */
.payments-table-wrap { overflow-x: auto; }
.payments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.payments-table thead th {
  background: var(--primary);
  color: var(--primary-contrast);
  font-weight: var(--fw-semibold);
}
.payments-table tbody .data-table-row:last-of-type th,
.payments-table tbody .data-table-row:last-of-type td { border-block-end: none; }
.payments-table .data-table-row:hover { background: var(--surface-hover); }
.payments-table .data-table-row:nth-child(even) { background: var(--surface-2); }
.payments-table .data-table-row:nth-child(even):hover { background: var(--surface-hover); }

/* Amount columns read better right-aligned (legacy aligns them right too). */
.payments-table .is-numeric { text-align: right; }
/* Action cell (Payer) — hugs its button, right-aligned like legacy. */
.payments-table .is-action { text-align: right; width: 1%; white-space: nowrap; }

/* ── Overdue rows ─────────────────────────────────────────── */
/* Legacy paints past-due instalments red (customRedRow). Tinted background +
   a left marker, so the cue survives the zebra striping and stays legible in
   both themes — and the row still carries a "Payer" button as its real signal. */
.payments-table .data-table-row.is-overdue,
.payments-table .data-table-row.is-overdue:nth-child(even) {
  background: rgba(var(--danger-rgb), 0.08);
}
.payments-table .data-table-row.is-overdue:hover,
.payments-table .data-table-row.is-overdue:nth-child(even):hover {
  background: rgba(var(--danger-rgb), 0.14);
}
/* Also painted on the CELLS, not just the <tr>: a cell background always paints
   above its row's, so any cell that gets one of its own would punch a
   neutral-coloured hole in the red row. The action cell holding "Payer" must be
   red like the rest of it — only the button inside is a different colour. */
.payments-table .data-table-row.is-overdue > th,
.payments-table .data-table-row.is-overdue > td {
  background: rgba(var(--danger-rgb), 0.08);
}
.payments-table .data-table-row.is-overdue:hover > th,
.payments-table .data-table-row.is-overdue:hover > td {
  background: rgba(var(--danger-rgb), 0.14);
}
.payments-table .data-table-row.is-overdue > :first-child {
  box-shadow: inset 3px 0 0 0 var(--danger);
  font-weight: var(--fw-medium);
}

/* ── Pay modal ────────────────────────────────────────────── */
.pay-summary {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--border);
}
.pay-summary-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pay-summary-amount {
  font-size: var(--fs-lg, 1.25rem);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.pay-summary-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
/* The gateway widget mounts here; give it room without forcing a fixed height. */
.pay-host { min-width: min(28rem, 78vw); }

/* ── Shared payment-dispatcher classes ────────────────────── */
/* core/payment-dispatch.js renders these; they're defined in pages/checkout.css
   for the purchase flows. Lifted here rather than pulling in all of checkout.css,
   which is wizard-specific. Keep in sync if the dispatcher's markup changes. */
.payment-actions-row {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-3); flex-wrap: wrap;
  margin-block-start: var(--space-4);
}
.payment-actions-row app-button { min-width: 12rem; }
.payment-notice {
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
}
.payment-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--text-muted);
  text-align: center;
}
.payment-processing p { margin: 0; }
.payment-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: payment-spin 0.8s linear infinite;
}
@keyframes payment-spin { to { transform: rotate(360deg); } }
/* A progress spinner conveys ongoing status — keep it turning under
   reduced-motion (the global reset would otherwise freeze it). */
@media (prefers-reduced-motion: reduce) {
  .payment-spinner {
    animation-duration: 0.8s !important;
    animation-iteration-count: infinite !important;
  }
}