/* ============================================================
   payments.css — Payments admin page
   Depends on: main.css + dashboard.css
   ============================================================ */

.pay-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pay-header__title { font-family: var(--gx-font-heading); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--gx-dark); }
.pay-header__sub { font-size: 0.875rem; color: var(--gx-gray-mid); }
.pay-header__actions { display: flex; align-items: center; gap: 0.5rem; }

.pay-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: var(--gx-r-full); font-size: 0.85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all var(--gx-t); white-space: nowrap; }
.pay-btn--outline { background: transparent; border-color: var(--gx-gray-light); color: var(--gx-g300); }
.pay-btn--outline:hover { background: var(--gx-off-white); border-color: var(--gx-gray); }

/* Revenue KPI strip */
.pay-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Filter bar */
.pay-filter-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pay-search { display: flex; align-items: center; gap: 0.5rem; background: var(--gx-off-white); border: 1px solid var(--gx-gray-light); border-radius: var(--gx-r-full); padding: 0.5rem 1rem; flex: 1; min-width: 200px; max-width: 300px; transition: border-color var(--gx-t); }
.pay-search:focus-within { border-color: var(--gx-lime-dark); }
.pay-search__input { background: none; border: none; outline: none; font-size: 0.85rem; color: var(--gx-dark); flex: 1; min-width: 0; }
.pay-search__input::placeholder { color: var(--gx-gray-mid); }
.pay-filter-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: var(--gx-r-full); font-size: 0.8rem; font-weight: 500; color: var(--gx-g300); background: var(--gx-white); border: 1px solid var(--gx-gray-light); cursor: pointer; transition: all var(--gx-t); white-space: nowrap; }
.pay-filter-btn:hover { border-color: var(--gx-gray); background: var(--gx-off-white); }
.pay-sort-wrap { margin-left: auto; }

/* Transaction ID */
.pay-txn-id { font-family: var(--gx-font-mono); font-size: 0.72rem; color: var(--gx-gray-mid); white-space: nowrap; }

/* Customer cell */
.pay-customer { display: flex; align-items: center; gap: 0.55rem; }
.pay-customer__avatar { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--gx-dark); color: var(--gx-lime); font-size: 0.6rem; font-weight: 700; font-family: var(--gx-font-heading); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pay-customer__name { font-size: 0.85rem; font-weight: 600; color: var(--gx-dark); }
.pay-customer__ref { font-size: 0.7rem; color: var(--gx-gray-mid); }

/* Amount */
.pay-amount { font-family: var(--gx-font-heading); font-weight: 800; font-size: 0.95rem; color: var(--gx-dark); }
.pay-amount--refund { color: #dc2626; }

/* Payment method */
.pay-method { display: flex; align-items: center; gap: 0.5rem; }
.pay-method__icon { width: 2.25rem; height: 1.5rem; border-radius: 4px; background: var(--gx-off-white); border: 1px solid var(--gx-gray-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pay-method__name { font-size: 0.8rem; color: var(--gx-g300); }
.pay-method__last4 { font-family: var(--gx-font-mono); font-size: 0.7rem; color: var(--gx-gray-mid); }

/* Date */
.pay-date { font-size: 0.82rem; color: var(--gx-g300); white-space: nowrap; }
.pay-date__time { font-size: 0.7rem; color: var(--gx-gray-mid); }

/* Row actions */
.pay-row-actions { display: flex; gap: 0.3rem; opacity: 0; transition: opacity var(--gx-t); }
.pay-table .db-table tbody tr:hover .pay-row-actions { opacity: 1; }
.pay-row-btn { width: 1.75rem; height: 1.75rem; border-radius: var(--gx-r-sm); background: var(--gx-off-white); border: 1px solid var(--gx-gray-light); color: var(--gx-g300); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--gx-t); }
.pay-row-btn:hover { background: var(--gx-dark); color: var(--gx-lime); border-color: var(--gx-dark); }

/* Status overrides */
.db-status--paid { background: rgba(34,197,94,0.1); color: #15803d; }
.db-status--paid::before { background: #22c55e; }
.db-status--refunded { background: rgba(239,68,68,0.1); color: #b91c1c; }
.db-status--refunded::before { background: #ef4444; }
.db-status--failed { background: rgba(100,116,139,0.1); color: #475569; }
.db-status--failed::before { background: #94a3b8; }

/* Pagination */
.pay-pagination { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--gx-gray-light); gap: 1rem; flex-wrap: wrap; }
.pay-pagination__info { font-family: var(--gx-font-mono); font-size: 0.68rem; color: var(--gx-gray-mid); letter-spacing: 0.04em; }
.pay-pages { display: flex; align-items: center; gap: 0.25rem; }
.pay-page { width: 2rem; height: 2rem; border-radius: var(--gx-r-sm); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; color: var(--gx-g300); background: transparent; transition: all var(--gx-t); }
.pay-page:hover { background: var(--gx-off-white); border-color: var(--gx-gray-light); }
.pay-page.is-active { background: var(--gx-dark); color: var(--gx-lime); border-color: var(--gx-dark); }
.pay-page--arrow { color: var(--gx-gray-mid); }
.pay-page--arrow:disabled { opacity: 0.35; cursor: default; }

/* ============================================================
   Dark theme
   ============================================================ */
[data-theme="dark"] .pay-header__title { color: #dde4f2; }
[data-theme="dark"] .pay-header__sub { color: #5c6880; }
[data-theme="dark"] .pay-btn--outline { background: transparent; border-color: rgba(255,255,255,0.1); color: #8090b0; }
[data-theme="dark"] .pay-btn--outline:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .pay-search { background: #080c14; border-color: rgba(255,255,255,0.09); }
[data-theme="dark"] .pay-search__input { color: #dde4f2; }
[data-theme="dark"] .pay-search__input::placeholder { color: #4a5568; }
[data-theme="dark"] .pay-filter-btn { background: #0f1420; border-color: rgba(255,255,255,0.09); color: #8090b0; }
[data-theme="dark"] .pay-filter-btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
[data-theme="dark"] .pay-txn-id { color: #4a5568; }
[data-theme="dark"] .pay-customer__name { color: #dde4f2; }
[data-theme="dark"] .pay-customer__ref { color: #5c6880; }
[data-theme="dark"] .pay-amount { color: #dde4f2; }
[data-theme="dark"] .pay-method__icon { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .pay-method__name { color: #b0bed4; }
[data-theme="dark"] .pay-method__last4 { color: #5c6880; }
[data-theme="dark"] .pay-date { color: #b0bed4; }
[data-theme="dark"] .pay-date__time { color: #5c6880; }
[data-theme="dark"] .pay-row-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #7080a0; }
[data-theme="dark"] .pay-row-btn:hover { background: var(--gx-lime); color: var(--gx-dark); border-color: var(--gx-lime); }
[data-theme="dark"] .pay-pagination { border-top-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .pay-pagination__info { color: #4a5568; }
[data-theme="dark"] .pay-page { color: #7080a0; }
[data-theme="dark"] .pay-page:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

@media (max-width: 1200px) { .pay-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .pay-filter-bar { flex-direction: column; align-items: stretch; } .pay-search { max-width: 100%; } .pay-sort-wrap { margin-left: 0; } }