/**
 * App Pages Unified — dark dashboard theme for all listed user/agent/admin dash pages.
 * Requires dashboard-ui.css loaded first.
 */

/* ── Page shells: consistent dark background ── */
body.page-orders,
body.page-notifications,
body.page-payments,
body.page-wallet,
body.page-vip,
body.page-profile {
    background: var(--dash-bg, #0f172a) !important;
}

body.page-orders main.page,
body.page-notifications main.page,
body.page-payments main.page,
body.page-wallet main.page {
    background: var(--dash-bg, #0f172a);
}

/* ── Orders + notifications use dash-page spacing ── */
.orders-page-v2.dash-page,
.notifications-page-v2.dash-page {
    max-width: 720px;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ── Payments v2 — dark (replaces light pay-* block) ── */
body.page-payments:not(.admin) {
    background: var(--dash-bg, #0f172a) !important;
}

body.page-payments:not(.admin) .page {
    background: var(--dash-bg, #0f172a);
}

body.page-payments:not(.admin) .payments-page-v2 {
    --pay-bg: var(--dash-bg, #0f172a);
    --pay-card: var(--dash-card, #1e293b);
    --pay-border: var(--dash-card-border, rgba(148, 163, 184, 0.14));
    --pay-shadow: var(--dash-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.28));
    --pay-text: var(--dash-text, #f1f5f9);
    --pay-muted: var(--dash-text-muted, #64748b);
    --pay-heading: var(--dash-heading, #f8fafc);
    --pay-green: var(--dash-green, #22c55e);
    --pay-green-bg: var(--dash-green-bg, rgba(34, 197, 94, 0.14));
    --pay-amber: var(--dash-amber, #f59e0b);
    --pay-amber-bg: var(--dash-amber-bg, rgba(245, 158, 11, 0.14));
    --pay-red: var(--dash-red, #ef4444);
    --pay-red-bg: var(--dash-red-bg, rgba(239, 68, 68, 0.14));
    --pay-blue: var(--dash-blue, #3b82f6);
    --pay-radius: var(--dash-radius-lg, 16px);
    color: var(--pay-text);
    max-width: 640px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

body.page-payments .payments-page-v2 .dash-title {
    color: var(--pay-heading);
}

body.page-payments .payments-page-v2 .dash-subtitle {
    color: var(--pay-muted);
}

body.page-payments .pay-card {
    background: var(--pay-card);
    border-color: var(--pay-border);
    box-shadow: var(--pay-shadow);
}

body.page-payments .pay-card[open] {
    border-color: rgba(59, 130, 246, 0.35);
}

body.page-payments .pay-detail {
    background: var(--dash-card-alt, #1f2937);
    border-color: var(--pay-border);
}

body.page-payments .pay-detail--reject {
    background: var(--pay-red-bg);
    border-color: rgba(239, 68, 68, 0.3);
}

body.page-payments .pay-detail__label {
    color: var(--pay-muted);
}

body.page-payments .pay-detail__value {
    color: var(--pay-heading);
}

body.page-payments .pay-receipt {
    background: var(--dash-card-alt, #1f2937);
    border-color: var(--pay-border);
}

body.page-payments .pay-receipt__title {
    color: var(--pay-heading);
}

body.page-payments .pay-btn--ghost {
    background: transparent;
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

body.page-payments .pay-empty {
    background: var(--pay-card);
    border-color: var(--pay-border);
}

body.page-payments .pay-empty__icon {
    background: var(--dash-info-bg);
    color: #93c5fd;
}

body.page-payments .pay-empty__title {
    color: var(--pay-heading);
}

body.page-payments .pay-empty__hint {
    color: var(--pay-muted);
}

body.page-payments .pay-bottom-nav {
    background: rgba(15, 23, 42, 0.96);
    border-top-color: var(--pay-border);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.page-payments .pay-bottom-nav__item {
    color: var(--pay-muted) !important;
}

body.page-payments .pay-bottom-nav__item.is-active,
body.page-payments .pay-bottom-nav__item--active {
    color: var(--pay-blue) !important;
    background: rgba(59, 130, 246, 0.12);
}

/* ── Agent pages: neutralize legacy light inline themes ── */
.dash-page .topup-table-wrap,
.dash-page .dash-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--dash-radius-lg);
    border: 1px solid var(--dash-card-border);
    background: var(--dash-card);
}

.dash-page .topup-table,
.dash-page .log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 520px;
}

.dash-page .topup-table th,
.dash-page .topup-table td,
.dash-page .log-table th,
.dash-page .log-table td {
    padding: 0.65rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: var(--dash-text);
    vertical-align: middle;
}

.dash-page .topup-table th,
.dash-page .log-table th {
    background: rgba(15, 23, 42, 0.5);
    color: var(--dash-text-secondary);
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
}

.dash-page .topup-table tbody tr:hover,
.dash-page .log-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.06);
}

.dash-page .topup-table .amount-cell {
    font-weight: 800;
    color: var(--dash-green);
}

.dash-page .topup-table .receipt-link,
.dash-page .topup-table .btn-process {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--dash-radius-md);
    background: var(--dash-gradient-blue);
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    border: none;
}

.dash-page .topup-table .btn-view {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: var(--dash-radius-md);
    background: var(--dash-card-alt);
    border: 1px solid var(--dash-card-border);
    color: var(--dash-text) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
}

.dash-page .topup-status--pending {
    background: var(--dash-amber-bg);
    color: #fcd34d;
}

.dash-page .topup-status--approved {
    background: var(--dash-green-bg);
    color: #86efac;
}

.dash-page .topup-status--rejected {
    background: var(--dash-red-bg);
    color: #fca5a5;
}

/* Agent clients — override gray legacy topbar */
.dash-page.agent-clients-page .agent-clients-topbar {
    background: var(--dash-card);
    border: 1px solid var(--dash-card-border);
    border-radius: var(--dash-radius-lg);
    margin-bottom: 1rem;
}

.dash-page.agent-clients-page .referral-link-box,
.dash-page.agent-clients-page .client-card,
.dash-page.agent-clients-page .agent-stats-box {
    background: var(--dash-card) !important;
    border: 1px solid var(--dash-card-border) !important;
    color: var(--dash-text) !important;
    box-shadow: var(--dash-card-shadow) !important;
}

.dash-page.agent-clients-page .client-card__name,
.dash-page.agent-clients-page .referral-link-box__title {
    color: var(--dash-heading) !important;
}

.dash-page.agent-clients-page .client-card__meta,
.dash-page.agent-clients-page .referral-link-box__hint {
    color: var(--dash-text-secondary) !important;
}

.dash-page.ship-report-page .ship-report-title {
    color: var(--dash-heading) !important;
}

.dash-page.ship-report-page .ship-report-intro {
    color: var(--dash-text-secondary) !important;
}

.dash-page.ship-report-page .ship-report-card,
.dash-page.ship-orders-page .ship-order-card {
    background: var(--dash-card) !important;
    border: 1px solid var(--dash-card-border) !important;
    box-shadow: var(--dash-card-shadow) !important;
}

/* ── Admin dash pages ── */
.dash-page .log-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--dash-radius-lg);
    border: 1px solid var(--dash-card-border);
    background: var(--dash-card);
    padding: 0;
}

body.admin.theme-dark .dash-page .admin-permissions__table-wrap,
body.admin.theme-dark .dash-page .admin-table-wrapper,
body.admin.theme-dark .dash-page .dash-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--dash-radius-lg);
    border: 1px solid var(--dash-card-border);
}

body.admin.theme-dark .dash-page .admin-permissions__table,
body.admin.theme-dark .dash-page .admin-table,
body.admin.theme-dark .dash-page .log-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

body.admin.theme-dark .dash-page .admin-permissions__th,
body.admin.theme-dark .dash-page .admin-permissions__table td,
body.admin.theme-dark .dash-page .admin-table th,
body.admin.theme-dark .dash-page .admin-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--dash-text);
}

body.admin.theme-dark .dash-page .admin-permissions__th,
body.admin.theme-dark .dash-page .admin-table th {
    background: rgba(15, 23, 42, 0.55);
    color: var(--dash-text-secondary);
    font-weight: 700;
}

body.admin.theme-dark .dash-page .runtime-error-row,
body.admin.theme-dark .dash-page .runtime-error-card {
    background: var(--dash-card);
    border: 1px solid var(--dash-card-border);
    border-radius: var(--dash-radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.65rem;
}

body.admin.theme-dark .dash-page .runtime-error-row code,
body.admin.theme-dark .dash-page code {
    background: rgba(15, 23, 42, 0.6);
    color: #93c5fd;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.85em;
}

body.admin.theme-dark .admin-dashboard-page .admin-stat {
    background: var(--dash-card) !important;
    border: 1px solid var(--dash-card-border) !important;
    color: var(--dash-text) !important;
    box-shadow: var(--dash-card-shadow) !important;
}

body.admin.theme-dark .admin-dashboard-page .admin-stat__label {
    color: var(--dash-text-muted) !important;
}

body.admin.theme-dark .admin-dashboard-page .admin-stat__value {
    color: var(--dash-heading) !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

body.admin.theme-dark .admin-dashboard-page .page-box {
    background: transparent !important;
}

@media (max-width: 768px) {
    .dash-page .topup-table,
    .dash-page .log-table,
    body.admin.theme-dark .dash-page .admin-permissions__table {
        min-width: 480px;
        font-size: 0.82rem;
    }

    .dash-page .topup-table th,
    .dash-page .topup-table td {
        padding: 0.5rem 0.55rem;
    }
}

body.admin.theme-dark .dash-page .table-container,
.dash-page .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--dash-radius-lg);
    border: 1px solid var(--dash-card-border);
    background: var(--dash-card);
}

body.admin.theme-dark .dash-page .table,
.dash-page .table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

body.admin.theme-dark .dash-page .table th,
body.admin.theme-dark .dash-page .table td,
.dash-page .table th,
.dash-page .table td {
    padding: 0.65rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: var(--dash-text);
}

body.admin.theme-dark .dash-page .table th,
.dash-page .table th {
    background: rgba(15, 23, 42, 0.5);
    color: var(--dash-text-secondary);
    font-weight: 700;
}

body.admin.theme-dark .dash-page h4,
body.admin.theme-dark .dash-page .section h4 {
    color: var(--dash-heading);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.orders-page-v2 .dash-header {
    margin-bottom: 1rem;
}

.orders-page-v2 .orders-page-v2__title,
.orders-page-v2 .orders-page-v2__subtitle {
    display: none;
}

.notifications-page-v2 .notifications-page-v2__title,
.notifications-page-v2 .notifications-page-v2__subtitle {
    display: none;
}