/* ==========================================================
   CASHIPRO DESIGN SYSTEM  (v7)
   One clean, professional fintech theme for the whole site:
   user pages, admin panel, landing and auth pages.

   - Flat surfaces, 1px borders, soft shadows (no animated borders)
   - One primary blue, semantic green / red / amber
   - Light + dark, via [data-theme] or the OS preference
   - Legacy variable names (--cp-*, --neu-*) are kept so every
     page that still references them follows the new palette
   Loaded after each page's own <style>, so these rules win.
   ========================================================== */

:root {
    /* brand */
    --cp-primary: #2563eb;
    --cp-primary-hover: #1d4ed8;
    --cp-primary-soft: rgba(37, 99, 235, .10);
    --cp-primary-ring: rgba(37, 99, 235, .28);

    /* semantic */
    --cp-green: #15803d;
    --cp-green-soft: rgba(22, 163, 74, .12);
    --cp-red: #dc2626;
    --cp-red-soft: rgba(220, 38, 38, .10);
    --cp-amber: #b45309;
    --cp-amber-soft: rgba(217, 119, 6, .13);

    /* surfaces + text (light) */
    --cp-bg: #f3f5f9;
    --cp-surface: #ffffff;
    --cp-surface-2: #f8fafc;
    --cp-border: #e2e8f0;
    --cp-border-strong: #cbd5e1;
    --cp-ink: #0f172a;
    --cp-ink-soft: #475569;
    --cp-ink-faint: #64748b;
    --cp-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
    --cp-shadow-lg: 0 10px 30px rgba(15, 23, 42, .10);
    --cp-radius: 12px;
    --cp-radius-sm: 8px;

    /* sidebar */
    --cp-side-bg: #ffffff;
    --cp-side-ink: #334155;
    --cp-side-hover: #f1f5f9;

    /* legacy aliases */
    --cp-purple: var(--cp-primary);
    --cp-magenta: var(--cp-primary);
    --cp-gold: var(--cp-amber);
    --cp-blue: var(--cp-primary);
    --cp-cyan: var(--cp-primary);
    --neu-bg: var(--cp-bg);
    --neu-shadow-dark: transparent;
    --neu-shadow-light: transparent;
    --cp-glass-fill: transparent;
    --cp-glass-fill-hover: var(--cp-side-hover);
    --cp-glass-border: var(--cp-border);
}

:root[data-theme="dark"] {
    --cp-primary: #3b82f6;
    --cp-primary-hover: #60a5fa;
    --cp-primary-soft: rgba(59, 130, 246, .16);
    --cp-primary-ring: rgba(96, 165, 250, .35);
    --cp-green: #4ade80;
    --cp-green-soft: rgba(74, 222, 128, .13);
    --cp-red: #f87171;
    --cp-red-soft: rgba(248, 113, 113, .13);
    --cp-amber: #fbbf24;
    --cp-amber-soft: rgba(251, 191, 36, .13);
    --cp-bg: #0b1220;
    --cp-surface: #121a2b;
    --cp-surface-2: #172033;
    --cp-border: #243049;
    --cp-border-strong: #334155;
    --cp-ink: #e8eef8;
    --cp-ink-soft: #b4c0d4;
    --cp-ink-faint: #8392aa;
    --cp-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --cp-shadow-lg: 0 14px 34px rgba(0, 0, 0, .45);
    --cp-side-bg: #0e1626;
    --cp-side-ink: #c3cfe2;
    --cp-side-hover: #172033;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --cp-primary: #3b82f6;
        --cp-primary-hover: #60a5fa;
        --cp-primary-soft: rgba(59, 130, 246, .16);
        --cp-primary-ring: rgba(96, 165, 250, .35);
        --cp-green: #4ade80;
        --cp-green-soft: rgba(74, 222, 128, .13);
        --cp-red: #f87171;
        --cp-red-soft: rgba(248, 113, 113, .13);
        --cp-amber: #fbbf24;
        --cp-amber-soft: rgba(251, 191, 36, .13);
        --cp-bg: #0b1220;
        --cp-surface: #121a2b;
        --cp-surface-2: #172033;
        --cp-border: #243049;
        --cp-border-strong: #334155;
        --cp-ink: #e8eef8;
        --cp-ink-soft: #b4c0d4;
        --cp-ink-faint: #8392aa;
        --cp-shadow: 0 1px 2px rgba(0, 0, 0, .35);
        --cp-shadow-lg: 0 14px 34px rgba(0, 0, 0, .45);
        --cp-side-bg: #0e1626;
        --cp-side-ink: #c3cfe2;
        --cp-side-hover: #172033;
    }
}

/* ---------- base ---------- */
html, body {
    background: var(--cp-bg) !important;
    background-image: none !important;
    color: var(--cp-ink) !important;
    max-width: 100%;
    overflow-x: hidden;
    transition: background .2s ease, color .2s ease;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
body, p, span, div, label, td, th, li { color: inherit; }
h1, h2, h3, h4, h5, h6 { color: var(--cp-ink); letter-spacing: -.01em; }
a { color: var(--cp-primary); }
::selection { background: var(--cp-primary-soft); }
hr { border: 0; border-top: 1px solid var(--cp-border); }

/* ---------- surfaces ---------- */
.panel, .card, .req-card, .balance-box, .stat-box, .wallet-card, .doc-thumb,
.step-card, .feature-card, .method-chip, .info-row, .support-card,
.form-card, .auth-card, .modal-content, .modal-box, .order-card,
.ad-card, .trade-card, .summary-card, .detail-card, .stat-card, .kpi,
.list-card, .profile-card, .balance-card, .quick-card, .content-card,
.panel-box, .table-card, .chat-box, .chat-card, .ticket-card, .tx-card {
    background: var(--cp-surface) !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
    color: var(--cp-ink) !important;
    animation: none !important;
}
/* wrappers from the old animated-border design: make them invisible */
.card-wrapper, .submit-wrapper {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}
.card-wrapper .card { box-shadow: var(--cp-shadow-lg) !important; }

/* ---------- tables ---------- */
table {
    width: 100%;
    border-collapse: collapse !important;
    background: var(--cp-surface) !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius) !important;
    box-shadow: none !important;
    color: var(--cp-ink) !important;
    font-size: 13px;
}
thead th, th {
    background: var(--cp-surface-2) !important;
    color: var(--cp-ink-faint) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--cp-border) !important;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--cp-border) !important; background: transparent !important; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0 !important; }
tbody tr:hover td { background: var(--cp-surface-2) !important; }

/* ---------- buttons ---------- */
/* primary = default. :where() keeps specificity at zero so every
   variant below (secondary / danger / success) wins cleanly. */
:where(button, input[type="submit"], input[type="button"], a.btn, .btn,
       [class^="btn-"], [class*=" btn-"], [class$="-btn"], [class*="-btn "],
       a[class*="button"], button[class*="button"], a[class*="-cta"]) {
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    background: var(--cp-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: var(--cp-radius-sm) !important;
    box-shadow: none !important;
    animation: none !important;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease !important;
}
:where(button, input[type="submit"], input[type="button"], a.btn, .btn,
       [class^="btn-"], [class*=" btn-"], [class$="-btn"], [class*="-btn "],
       a[class*="button"], button[class*="button"], a[class*="-cta"]):hover {
    background: var(--cp-primary-hover) !important;
    transform: none !important;
}
button:active, .btn:active { transform: translateY(1px) !important; }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--cp-primary-ring) !important;
    outline-offset: 2px;
}
button[disabled], .btn[disabled], input[type="submit"][disabled] { opacity: .5; cursor: not-allowed; }

/* secondary / neutral */
:is(a, button).back-button, :is(a, button).secondary-button, :is(a, button).button-secondary,
:is(a, button).btn-secondary, :is(a, button).btn-outline, :is(a, button).btn-ghost, :is(a, button).btn-back,
:is(a, button).filter, :is(a, button).filter-btn, :is(a, button).filter-button, :is(a, button).tab,
:is(a, button).tab-btn, :is(a, button).view-button, :is(a, button).view-btn, :is(a, button).btn-view,
:is(a, button).cp-copy-button, :is(a, button).uid-copy-btn, :is(a, button).copy-btn, :is(a, button).btn-copy,
:is(a, button).cancel-button, :is(a, button).btn-keep, :is(a, button).btn-dismiss, :is(a, button).btn-close,
:is(a, button).doc-type-btn, :is(a, button).country-button, :is(a, button).attach-btn,
:is(a, button).mark-all-button, :is(a, button).btn-details, :is(a, button).cp-back-button,
:is(a, button).close-chat-btn {
    background: var(--cp-surface) !important;
    color: var(--cp-ink) !important;
    border: 1px solid var(--cp-border-strong) !important;
}
:is(a, button).back-button:hover, :is(a, button).secondary-button:hover, :is(a, button).button-secondary:hover,
:is(a, button).btn-secondary:hover, :is(a, button).btn-outline:hover, :is(a, button).btn-ghost:hover, :is(a, button).btn-back:hover,
:is(a, button).filter:hover, :is(a, button).filter-btn:hover, :is(a, button).filter-button:hover, :is(a, button).tab:hover,
:is(a, button).tab-btn:hover, :is(a, button).view-button:hover, :is(a, button).view-btn:hover, :is(a, button).btn-view:hover,
:is(a, button).cp-copy-button:hover, :is(a, button).uid-copy-btn:hover, :is(a, button).copy-btn:hover, :is(a, button).btn-copy:hover,
:is(a, button).cancel-button:hover, :is(a, button).btn-keep:hover, :is(a, button).btn-dismiss:hover, :is(a, button).btn-close:hover,
:is(a, button).doc-type-btn:hover, :is(a, button).country-button:hover, :is(a, button).attach-btn:hover,
:is(a, button).mark-all-button:hover, :is(a, button).btn-details:hover, :is(a, button).cp-back-button:hover,
:is(a, button).close-chat-btn:hover {
    background: var(--cp-surface-2) !important;
    border-color: var(--cp-primary) !important;
    color: var(--cp-primary) !important;
}
:is(a, button).filter.active, :is(a, button).filter-btn.active, :is(a, button).tab.active, :is(a, button).tab-btn.active,
:is(a, button).doc-type-btn.active, :is(a, button).filter-button.active {
    background: var(--cp-primary-soft) !important;
    border-color: var(--cp-primary) !important;
    color: var(--cp-primary) !important;
}

/* destructive */
:is(a, button, input).btn-reject, :is(a, button, input).btn-danger, :is(a, button, input).btn-delete,
:is(a, button, input).btn-remove, :is(a, button, input).btn-block, :is(a, button, input).btn-lock,
:is(a, button, input).btn-refund, :is(a, button, input).close-btn, :is(a, button, input).btn-freeze,
:is(a, button, input)[class*="reject"], :is(a, button, input)[class*="danger"], :is(a, button, input)[class*="delete"] {
    background: #dc2626 !important;
    color: #fff !important;
}
:is(a, button, input).btn-reject:hover, :is(a, button, input).btn-danger:hover, :is(a, button, input).btn-delete:hover,
:is(a, button, input).btn-remove:hover, :is(a, button, input).btn-block:hover, :is(a, button, input).btn-lock:hover,
:is(a, button, input).btn-refund:hover, :is(a, button, input).close-btn:hover, :is(a, button, input).btn-freeze:hover,
:is(a, button, input)[class*="reject"]:hover, :is(a, button, input)[class*="danger"]:hover, :is(a, button, input)[class*="delete"]:hover {
    background: #b91c1c !important;
}
/* positive */
:is(a, button, input).btn-approve, :is(a, button, input).btn-unlock, :is(a, button, input).btn-success,
:is(a, button, input).btn-release, :is(a, button, input).btn-confirm, :is(a, button, input).btn-complete,
:is(a, button, input).btn-unfreeze, :is(a, button, input)[class*="approve"] {
    background: #16a34a !important;
    color: #fff !important;
}
:is(a, button, input).btn-approve:hover, :is(a, button, input).btn-unlock:hover, :is(a, button, input).btn-success:hover,
:is(a, button, input).btn-release:hover, :is(a, button, input).btn-confirm:hover, :is(a, button, input).btn-complete:hover,
:is(a, button, input).btn-unfreeze:hover, :is(a, button, input)[class*="approve"]:hover {
    background: #15803d !important;
}

/* theme toggle */
#cpThemeToggle {
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    z-index: 9999 !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    line-height: 1 !important;
    background: var(--cp-surface) !important;
    color: var(--cp-ink) !important;
    border: 1px solid var(--cp-border-strong) !important;
    box-shadow: var(--cp-shadow-lg) !important;
}
#cpThemeToggle:hover { background: var(--cp-surface-2) !important; border-color: var(--cp-primary) !important; }

/* ---------- forms ---------- */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
select, textarea {
    background: var(--cp-surface) !important;
    color: var(--cp-ink) !important;
    border: 1px solid var(--cp-border-strong) !important;
    border-radius: var(--cp-radius-sm) !important;
    box-shadow: none !important;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--cp-primary) !important;
    box-shadow: 0 0 0 3px var(--cp-primary-ring) !important;
}
input::placeholder, textarea::placeholder { color: var(--cp-ink-faint) !important; opacity: .8; }
input[disabled], select[disabled], textarea[disabled] { background: var(--cp-surface-2) !important; opacity: .75; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cp-primary); }
label { color: var(--cp-ink-soft); }
option { background: var(--cp-surface); color: var(--cp-ink); }

/* ---------- alerts & badges ---------- */
.alert-error, .error, .msg-error, .notice-error { background: var(--cp-red-soft) !important; border: 1px solid rgba(220,38,38,.35) !important; color: var(--cp-red) !important; border-radius: var(--cp-radius-sm); }
.alert-success, .success, .msg-success, .notice-success { background: var(--cp-green-soft) !important; border: 1px solid rgba(22,163,74,.35) !important; color: var(--cp-green) !important; border-radius: var(--cp-radius-sm); }
.alert-warning, .warning, .notice-warning { background: var(--cp-amber-soft) !important; border: 1px solid rgba(217,119,6,.35) !important; color: var(--cp-amber) !important; border-radius: var(--cp-radius-sm); }

/* ==========================================================
   SIDEBARS (customer .cp-sidebar and admin .admin-sidebar)
   ========================================================== */
.cp-sidebar, .admin-sidebar {
    background: var(--cp-side-bg) !important;
    background-image: none !important;
    border-right: 1px solid var(--cp-border) !important;
    box-shadow: none !important;
}
.cp-sidebar-logo, .admin-brand {
    color: var(--cp-primary) !important;
    border-bottom: 1px solid var(--cp-border) !important;
}
.cp-sidebar-user, .admin-sidebar-footer, .cp-back-section { border-color: var(--cp-border) !important; }
.cp-user-avatar { background: var(--cp-primary-soft) !important; color: var(--cp-primary) !important; }
.cp-nav-section { color: var(--cp-ink-faint) !important; }

.cp-nav-link, .admin-nav-link {
    margin: 2px 10px !important;
    width: calc(100% - 20px) !important;
    border-radius: var(--cp-radius-sm) !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--cp-side-ink) !important;
    font-weight: 600;
    transition: background .15s ease, color .15s ease !important;
}
.admin-nav-link { padding: 10px 12px !important; }
.cp-nav-link:hover, .admin-nav-link:hover {
    background: var(--cp-side-hover) !important;
    color: var(--cp-ink) !important;
    transform: none !important;
}
.cp-nav-link.active, .admin-nav-link.active {
    background: var(--cp-primary-soft) !important;
    color: var(--cp-primary) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.cp-nav-link.active::before { background: var(--cp-primary) !important; }
.admin-nav-link.active { box-shadow: inset 3px 0 0 var(--cp-primary) !important; }
.cp-nav-badge, .admin-nav-badge, .cp-mobile-notif-badge { background: #dc2626 !important; color: #fff !important; }
.admin-user-name { color: var(--cp-ink); }
.admin-logout-link { color: var(--cp-ink-faint) !important; }
.admin-logout-link:hover { color: var(--cp-red) !important; }
.admin-mobile-topbar, .cp-mobile-topbar { background: var(--cp-surface) !important; border-bottom: 1px solid var(--cp-border) !important; }
.admin-mobile-title { color: var(--cp-primary) !important; }
.admin-hamburger-btn, .cp-mobile-menu, .cp-mobile-notif {
    background: transparent !important;
    color: var(--cp-ink) !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- flatten leftover gradient panels ---------- */
.welcome-card, .merchant-card, .wallet-hero, .merchant-hero, .hero-box, .kyc-top-banner {
    background: var(--cp-surface) !important;
    background-image: none !important;
    border: 1px solid var(--cp-border) !important;
    box-shadow: var(--cp-shadow) !important;
}

/* landing page uses its own variable names: point them at the shared palette */
:root { --ink: var(--cp-ink); --ink-soft: var(--cp-ink-soft); --white: var(--cp-surface); --bg-base: var(--cp-bg); }

/* inline text-style buttons */
button.show-password, .show-password, .toggle-password, .link-btn, button.link, .pm-delete, .copy-link {
    background: transparent !important;
    border: 0 !important;
    color: var(--cp-primary) !important;
    padding: 4px 8px;
}
.pm-delete { color: var(--cp-red) !important; }
a.brand { color: var(--cp-ink) !important; }

/* wide tables scroll inside themselves on phones instead of being cut off */
@media (max-width: 768px) {
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    th, td { white-space: nowrap; }
}

.action-arrow { color: var(--cp-ink-faint) !important; }
span.balance { color: var(--cp-ink-soft) !important; }
.status-badge.status-disputed { color: #7e22ce !important; background: rgba(168,85,247,.14) !important; }
:root[data-theme="dark"] .status-badge.status-disputed { color: #d8b4fe !important; }