/* ═══════════════════════════════════════════════════════════════════
   Admin payments page (AdminPayments.vue) - embedded Telepay forms.
   Hebrew RTL island: same scoped pattern as .ct-page (admin-contracts.css) -
   the page root re-establishes RTL inside the LTR-pinned .admin-main.
   ═══════════════════════════════════════════════════════════════════ */

.pay-page {
  direction: rtl;
  text-align: right;
}

/* Four Hebrew labels now. `.course-filter-tabs` is inline-flex with no wrap and
   no responsive rules of its own, so without this the strip forces a horizontal
   scrollbar on the whole page at phone widths. */
.pay-tabs {
  margin-bottom: 16px;
  flex-wrap: wrap;
  max-width: 100%;
}

/* The credit-card transactions tab hosts a whole screen: a date-range picker
   with a desktop popover and a phone bottom sheet, and a fixed-position toast.
   This panel must therefore NEVER gain `overflow`, `transform`, `filter`,
   `backdrop-filter`, `perspective`, `contain` or `will-change` - each one makes
   it the containing block for fixed descendants, which clips the popover and
   unanchors the sheet. The table does its own scrolling inside .cpay-table-wrap;
   a second scroller here would fight it. */
.pay-panel--cards {
  min-width: 0;
}

.pay-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

/* Warning banner on the standing-order tab */
.pay-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #FDF6E7;
  border: 1px solid #EDD9A3;
  border-radius: var(--radius-sm);
  color: #7A5C10;
  font-size: 0.95rem;
  line-height: 1.6;
}

.pay-warning i {
  margin-top: 4px;
  color: #C99700;
}

.pay-warning p {
  margin: 0;
}

/* Embedded Telepay form */
.pay-frame-box {
  background: #fff;
  border: 1px solid #e8e8ed;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pay-frame {
  display: block;
  width: 100%;
  height: clamp(640px, calc(100vh - 300px), 1100px);
  border: 0;
}

/* Backoffice launcher (Telepay blocks iframing with X-Frame-Options) */
.pay-launcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  background: #fff;
  border: 1px solid #e8e8ed;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.pay-launcher-icon {
  font-size: 2rem;
  color: var(--primary-color);
}

.pay-launcher-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.pay-launcher-text {
  margin: 0;
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.pay-launcher-btn {
  margin-top: 8px;
  text-decoration: none;
}

@media (max-width: 767px) {
  .pay-frame {
    height: clamp(560px, calc(100vh - 240px), 900px);
  }

  .pay-launcher {
    padding: 44px 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Payment-links tab (AdminPaymentLinks.vue) - `apl-`.

   Inherits RTL from .pay-page above; the table scrolls inside its own
   wrapper so the page itself never gains a horizontal scrollbar. Like
   .pay-panel--cards, this panel must never gain overflow / transform /
   filter / contain - the toast inside it is position: fixed, and any
   one of those would make the panel its containing block.

   Shared chrome (.admin-table, .btn, .btn-icon, .empty-state, .toast,
   .admin-toolbar) comes from admin.css; only what is specific to this
   screen lives here. Shadows use the cool-blue rgba(0, 60, 130, *)
   family, never raw black.
   ═══════════════════════════════════════════════════════════════════ */

.pay-panel--links {
  min-width: 0;
}

.apl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.apl-subtitle {
  flex: 1 1 28rem;
  margin: 0;
  max-width: 78ch;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.apl-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 56ch;
  margin-inline: auto;
  line-height: 1.6;
}

.apl-error p {
  margin: 0;
}

/* ── Table ── */

.apl-table-wrap {
  overflow-x: auto;
}

.apl-table {
  min-width: 1080px;
}

.apl-table th,
.apl-table td {
  white-space: nowrap;
  vertical-align: top;
}

/* The three stacked cells lead with their main value and hang their
   sub-lines underneath, so a row stays one visual block. */
.apl-td-money,
.apl-td-created {
  font-variant-numeric: tabular-nums;
}

.apl-td-money {
  font-weight: 600;
  color: #191A23;
}

.apl-sub {
  display: block;
  margin-block-start: 0.15rem;
  font-weight: 400;
  font-size: 0.76rem;
  color: #8E8F9E;
}

.apl-terms {
  color: #5A5B6A;
}

/* What the link charges - darker than the two sub-lines above it, because it is
   the row's answer to "how much will this take" while they answer "how much has
   it taken" and "how much is owed". */
.apl-amount-mode {
  font-weight: 600;
  color: #5A5B6A;
}

.apl-td-expires {
  font-variant-numeric: tabular-nums;
  color: #47505c;
}

/* The date itself carries the warning, not just the chip two columns
   over - this is the column a reader scans when asking "which of these
   died". */
.apl-expired {
  color: #C4551A;
  font-weight: 600;
}

.apl-td-person {
  font-weight: 600;
  color: #191A23;
}

.apl-person-link {
  color: var(--primary-color);
  text-decoration: none;
}

.apl-person-link:hover {
  text-decoration: underline;
}

.apl-td-course {
  color: #5A5B6A;
}

/* One line on the desktop table: a note is free text and an unbounded
   one would set the height of every row around it. The full string
   stays on the title attribute, and the phone card below releases the
   cap entirely. */
.apl-col-note {
  max-width: 18rem;
}

.apl-td-note {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5A5B6A;
  font-size: 0.82rem;
}

.apl-col-actions {
  width: 1%;
}

.apl-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

/* ── State chip ──
   Painted from derivedState only. Active and paid are both "nothing is
   wrong", so they share the calm end of the palette; expired borrows
   the warm accent the money screens already use for "needs attention". */

.apl-chip {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.apl-chip--active {
  background: #E7F6ED;
  color: #1B7F4C;
}

.apl-chip--paid {
  background: #EAF2FD;
  color: #0B5CC4;
}

.apl-chip--expired {
  background: #FDF3E3;
  color: #8A5A12;
}

.apl-chip--disabled,
.apl-chip--sale_cancelled {
  background: #EEF0F4;
  color: #6E7180;
}

/* ── Pagination ── */

.apl-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 0.9rem;
}

.apl-pagination-info {
  font-size: 0.84rem;
  color: #5A5B6A;
}

/* ═══════════════════════════════════════════════════════════════════
   Tablet / phone: rows become cards.

   Eight columns do not fit below 1024px, and the generic .admin-table
   rules crush them into an overlap. Each cell carries a data-label,
   printed as its own caption - the same treatment .cpay-table gets.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .apl-table-wrap {
    overflow-x: visible;
  }

  .apl-table {
    display: block;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .apl-table thead {
    display: none;
  }

  .apl-table tbody {
    display: block;
    width: 100%;
  }

  .apl-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.7rem;
    width: 100%;
    margin-block-end: 0.85rem;
    padding: 0.8rem 1rem 0.65rem;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 60, 130, 0.05);
  }

  .apl-table tbody tr:hover td {
    background: transparent;
  }

  .apl-table td {
    white-space: normal;
    border: none;
    padding: 0;
  }

  /* Name and state lead the card unlabelled, with the actions pinned to
     the far edge of the same line. */
  .apl-table td.apl-td-person {
    order: 0;
    flex: 1 1 auto;
    font-size: 1rem;
  }

  .apl-table td.apl-col-actions {
    order: 1;
    width: auto;
    margin-inline-start: auto;
  }

  .apl-table td.apl-td-course {
    order: 2;
    flex: 1 1 100%;
    font-size: 0.82rem;
  }

  /* Everything else stacks as labelled rows. */
  .apl-table td[data-label] {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    padding-block: 0.34rem;
    border-block-start: 1px solid #f1f4f8;
  }

  .apl-table td[data-label]:empty {
    display: none;
  }

  .apl-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 7.5rem;
    color: #8a93a3;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    line-height: 1.7;
  }

  /* A card has the width the desktop row did not, so the note wraps in
     full instead of being silently truncated. */
  .apl-table td.apl-td-note {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  .apl-col-note {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .apl-pagination {
    gap: 0.5rem;
  }

  .apl-pagination-info {
    order: 3;
    flex: 1 1 100%;
    text-align: center;
  }
}