/* ══════════════════════════════════════════════════════════
   /admin/card-payments - credit-card transactions read live
   from Telepay.

   Hebrew RTL island: .admin-main is pinned direction: ltr for
   the English admin pages, so this page root re-establishes
   RTL for itself only, exactly like .enr-page and .ct-page.
   Shared chrome (.admin-table, .reg-date-pill, .reg-detail,
   .btn, .empty-state, .toast) 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. No brand gradient on any weight above 400.
   ══════════════════════════════════════════════════════════ */

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

/* ── Search field ──
   admin.css styles a 220px LTR box (.admin-search input, :439) and positions
   its icon and clear button physically. Three things went wrong here at once,
   all measured on screen: the input kept its 220px while .cpay-search grew to
   480px, so the clear X floated ~244px away from the field on bare page
   background; the input carried NO admin field styling at all (the markup was
   missing the .form-input class every other admin search box has), so it
   rendered as the browser's own 20px control with a 2px inset border and square
   corners beside a 39px rounded date-range trigger; and its 13.3px default font
   sits under iOS Safari's 16px focus-zoom floor.

   Scoped to .cpay-search rather than .admin-search so these win over the base
   width AND over both of admin.css's responsive variants (180px at <=1024px,
   100% at <=767px) without !important. There is exactly one search box on this
   screen; a second one would need to be added to this selector list. */
.cpay-page .cpay-search .fa-search {
    right: 0.75rem;
    left: auto;
    color: #8E8F9E;
}

.cpay-page .cpay-search input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 2.45rem;
    padding-right: 2.1rem;
    padding-left: 2.25rem;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    color: #191A23;
    direction: rtl;
    text-align: right;
    text-overflow: ellipsis;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.cpay-page .cpay-search input::placeholder {
    color: #8E8F9E;
    opacity: 1;
}

.cpay-page .cpay-search input:hover {
    border-color: rgba(0, 113, 227, 0.35);
}

/* The same ring the date-range trigger uses when open, so the two controls
   standing side by side focus identically. */
.cpay-page .cpay-search input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

/* type="search" ships a native clear button in WebKit that would sit beside
   ours and clear the field without telling Vue. */
.cpay-page .cpay-search input::-webkit-search-cancel-button,
.cpay-page .cpay-search input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.cpay-page .cpay-search .search-clear {
    left: 0.4rem;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    color: #8E8F9E;
}

.cpay-page .cpay-search .search-clear:hover {
    background: rgba(0, 113, 227, 0.08);
    color: #191A23;
}

/* Embedded as a tab of /admin/payments there is no <h1> here, so the header row
   is just the subtitle and the toolbar. It cannot reuse .admin-page-header:
   that class carries its own responsive rules in admin.css which do not reach a
   new class name, and the 1.5rem bottom margin is too much air under a tab
   strip. */
.cpay-head--embedded {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.cpay-head--embedded .cpay-subtitle {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .cpay-head--embedded {
        flex-direction: column;
        align-items: stretch;
    }
}

.cpay-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Header ── */

.cpay-heading {
    min-width: 0;
}

.cpay-subtitle {
    margin: 0.3rem 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #5A5B6A;
    max-width: 62ch;
}

.cpay-updated {
    font-size: 0.78rem;
    color: #8E8F9E;
    white-space: nowrap;
}

/* ── Filter bar ── */

.cpay-filters {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.cpay-search {
    flex: 1 1 22rem;
    min-width: 14rem;
    max-width: 30rem;
}

.cpay-clear {
    white-space: nowrap;
}

.cpay-pills {
    margin-bottom: 0.9rem;
}

/* ── KPI band ── */

.cpay-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.cpay-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.95rem;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 60, 130, 0.05);
    min-width: 8.5rem;
}

/* Every tile explains which rows it counts - the tooltips are what stop
   staff subtracting two tiles that count different things. */
.cpay-kpi[title] {
    cursor: help;
}

.cpay-kpi-value {
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.2;
    /* Solid brand ink, never the gradient: the gradient is forbidden above
       weight 400 and muddies on numerals. */
    color: #191A23;
    white-space: nowrap;
}

.cpay-kpi-label {
    font-size: 0.72rem;
    color: #8E8F9E;
    white-space: nowrap;
}

.cpay-kpi--money .cpay-kpi-value {
    color: #1B7F4C;
}

.cpay-kpi--warn .cpay-kpi-value {
    color: #C4551A;
}

.cpay-kpi--muted .cpay-kpi-value {
    color: #8E8F9E;
}

.cpay-kpi--refund .cpay-kpi-value {
    color: #8E8F9E;
}

/* The band's footnote (.exvat-legend, admin-money.css). It sits between the
   tiles and the caution paragraph rather than in the page header, because it
   explains the bare `(1,695 ₪)` printed under every figure on the screen and a
   legend that scrolls away from its numbers stops working. Only the margins
   are local - the type and colour are the shared class's. */
.cpay-exvat-legend {
    margin: 0 0 0.7rem;
    max-width: 84ch;
}

/* The dimming of a row that took no money reaches its ex-VAT figure too. The
   shared class sets its own colour, which would otherwise leave a crisp
   qualifier under a struck-through amount, reading as though the parenthetical
   somehow survived the cancellation. */
.cpay-row--void .cpay-td-amount .exvat {
    color: #8E8F9E;
}

.cpay-caution {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #6E7180;
    max-width: 84ch;
}

.cpay-caution i {
    margin-top: 0.2rem;
    color: #8E8F9E;
    flex: 0 0 auto;
}

/* ── Stale feed ── */

.cpay-stale-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.85rem;
    background: #FFF6E8;
    border: 1px solid #F2D9AE;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #8A5A12;
}

.cpay-stale-banner span {
    flex: 1 1 20rem;
    line-height: 1.5;
}

/* Deliberately outside the dimmed region - it is what explains the dimming. */
.cpay-stale-retry {
    flex: 0 0 auto;
}

/* Everything rendered from the last payload dims together - dimming a
   subset is worse than dimming nothing. */
.cpay-stale {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

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

/* Telepay's reporting call runs 3.5-30s, so this state is on screen long enough
   to need to look alive. The elapsed counter and the patience line appear at 3s
   and 6s, after the fast responses have already landed. */
.cpay-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.6;
}

.cpay-loading-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cpay-loading-hint {
    margin: 0;
    max-width: 48ch;
    font-size: 0.82rem;
    color: #8E8F9E;
}

/* The address to quote to Telepay. Monospaced because it gets copied out by
   hand into a support request, and a misread digit costs a round trip. */
.cpay-blocked-ip {
    margin: 0;
    font-size: 0.85rem;
    color: var(--admin-text-muted, #6b7280);
}

.cpay-blocked-ip bdi {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    user-select: all;
}

/* Inside the stale banner the address takes its own line: the banner is a flex
   row, and this is a value to be copied out, not part of the sentence. Beats
   `.cpay-stale-banner span` on specificity, which is what puts it there. */
.cpay-stale-banner .cpay-stale-banner-ip {
    flex: 1 1 100%;
    color: inherit;
}

/* Where to read the same numbers while this screen is blocked. */
.cpay-blocked-alt {
    margin: 0;
    font-size: 0.9rem;
}

.cpay-blocked-alt .fas {
    font-size: 0.75em;
    margin-inline-start: 0.25rem;
}

/* ── Table ── */

/* Horizontal scroll lives here, never on the page body. */
.cpay-table-wrap {
    overflow-x: auto;
}

.cpay-table {
    min-width: 1160px;
}

.cpay-table th,
.cpay-table td {
    white-space: nowrap;
}

.cpay-th-expand,
.cpay-td-expand {
    width: 2.4rem;
    padding-inline: 0.4rem;
}

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

.cpay-td-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #191A23;
}

.cpay-td-refund {
    font-variant-numeric: tabular-nums;
    color: #C4551A;
}

.cpay-td-reason {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #C4551A;
    font-size: 0.82rem;
}

.cpay-td-email {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The buyer's name doubles as the way into their person card. It has to LOOK
   like the plain name it wraps - the same call the all-sales table makes for
   its own first column - because a blue underlined name in every row would
   turn the column into a wall of links. The focus ring is the browser default,
   deliberately left alone: it is the only thing that shows a keyboard user
   where they are. */
.cpay-person-link {
    color: inherit;
    text-decoration: none;
}

.cpay-person-link:hover,
.cpay-person-link:focus-visible {
    text-decoration: underline;
}

/* Marks a name Telepay never received, filled in from the sale the charge paid
   for. Muted and small on purpose: it qualifies the value beside it, it is not
   a second value. The sentence itself is the title attribute, and the detail
   panel prints it in full. */
.cpay-ledger-hint {
    margin-inline-start: 0.32rem;
    color: #8E8F9E;
    font-size: 0.72rem;
    cursor: help;
}

/* The same annotation, at sentence length, inside the expanded row. */
.cpay-answer-note {
    color: #5A5B6A;
    font-size: 0.78rem;
    line-height: 1.45;
}

/* A row that took no money is dimmed so the eye can skip it, but never
   hidden - it is the record of an attempt. */
.cpay-row--void .cpay-td-amount {
    font-weight: 400;
    color: #8E8F9E;
    text-decoration: line-through;
    text-decoration-color: rgba(142, 143, 158, 0.6);
}

/* ── Status badge ── */

.cpay-badge {
    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;
}

.cpay-badge--deposited {
    background: #E7F6ED;
    color: #1B7F4C;
}

/* Cleared is money in, same as deposited, so it stays in the green family -
   lighter, because the bank transfer has not happened yet. */
.cpay-badge--cleared {
    background: #EAF7F0;
    color: #2F8C63;
}

.cpay-badge--failed {
    background: #FDECE4;
    color: #C4551A;
}

.cpay-badge--cancelled {
    background: #EEF0F4;
    color: #6E7180;
}

.cpay-badge--other {
    background: #EAF2FD;
    color: #0B5CC4;
}

/* ── Expanded detail ── */

.cpay-detail {
    gap: 1.4rem 2rem;
}

.cpay-detail .reg-answer-q {
    white-space: nowrap;
}

/* ── Pagination ── */

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

.cpay-pagination-mid {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

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

.cpay-page-size {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #8E8F9E;
}

.cpay-page-size-select {
    padding: 0.2rem 0.45rem;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    background: #fff;
    font-size: 0.8rem;
    color: #47505c;
}

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

   The 12-column desktop table cannot fit below 1024px, and the
   generic .admin-table fixed-layout rule in admin.css crushes
   every column into an unreadable overlap. Each cell carries a
   data-label, printed as its own caption.
   ══════════════════════════════════════════════════════════ */

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

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

    .cpay-table thead {
        display: none;
    }

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

    .cpay-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.2rem 0.7rem;
        width: 100%;
        margin-bottom: 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);
    }

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

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

    /* The four identity cells lead the card, unlabelled. */
    .cpay-table td.cpay-td-expand {
        order: 1;
        width: auto;
        margin-inline-start: auto;
    }

    .cpay-table td.cpay-td-date {
        order: 0;
        font-size: 0.8rem;
        color: #8E8F9E;
        flex: 1 1 auto;
    }

    .cpay-table td.cpay-td-amount {
        order: 2;
        flex: 0 0 100%;
        font-size: 1.05rem;
    }

    .cpay-table td.cpay-td-status {
        order: 3;
    }

    .cpay-table td.cpay-td-reason {
        order: 4;
        flex: 1 1 100%;
        max-width: none;
    }

    /* The desktop table clips long addresses to an ellipsis because the row
       must stay one line. A card has no such constraint, so the cap is
       released and the address wraps instead of being silently truncated. */
    .cpay-table td.cpay-td-email {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        word-break: break-all;
    }

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

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

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

    /* The detail row is a full-width block under its card. */
    .cpay-table tr.reg-row-detail {
        display: block;
        padding: 0.85rem 1rem;
        margin-top: -0.6rem;
    }

    .cpay-table tr.reg-row-detail > td {
        display: block;
        width: 100%;
    }

    .cpay-detail {
        gap: 1rem;
    }
}

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

    .cpay-search {
        flex: 1 1 100%;
        max-width: none;
    }

    /* 16px exactly: anything smaller makes iOS Safari zoom the whole page on
       focus, and the page never zooms back out. 44px is the tap target. */
    .cpay-page .cpay-search input {
        min-height: 2.75rem;
        padding-left: 2.7rem;
        font-size: 16px;
    }

    .cpay-page .cpay-search .search-clear {
        width: 2rem;
        height: 2rem;
        left: 0.45rem;
    }

    .cpay-kpi {
        flex: 1 1 8rem;
        min-width: 0;
        padding: 0.5rem 0.7rem;
    }

    .cpay-kpi-value {
        font-size: 1rem;
    }

    .cpay-pagination {
        gap: 0.5rem;
    }

    .cpay-pagination-mid {
        order: 3;
        flex: 1 1 100%;
        justify-content: space-between;
    }
}