/**
 * inzc-wallet.css
 *
 * Page-specific styles shared across the wallet section:
 *   - pages/wallet-overview.php  (balance overview + transaction history)
 *   - pages/wallet-add-funds.php     (brand: add funds)
 *   - pages/wallet-payouts.php (influencer: request payout)
 *
 * Sections:
 *  1. Balance overview grid
 *  2. Balance cards
 *  3. Subscription status banner (brand)
 *  4. Transaction filter tabs
 *  5. Transaction table
 *  6. Amount picker (top-up)
 *  7. Top-up page two-column layout
 *  8. Top-up summary panel
 *  9. Withdrawal form
 * 10. Withdrawal history
 * 11. Empty state
 * 12. Mobile responsive
 * 13. Dark mode
 */

/* =============================================================================
   1. BALANCE OVERVIEW GRID
   ============================================================================= */

.inzc-wallet-balance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inzc-spacing-6);
    margin-bottom: var(--inzc-spacing-8);
}

/* =============================================================================
   2. BALANCE CARDS
   ============================================================================= */

.inzc-wallet-balance-card {
    background: var(--inzc-bg-primary);
    border: 1px solid var(--inzc-border-light);
    border-radius: var(--inzc-card-border-radius);
    box-shadow: var(--inzc-card-shadow);
    padding: var(--inzc-card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-3);
    position: relative;
    overflow: hidden;
}

.inzc-wallet-balance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--inzc-card-top-accent, var(--inzc-primary));
}

/* Colour modifier classes (.inzc-card--primary, --success, --warning, --secondary)
   are defined in assets/css/components/inzc-stats.css (bundled). */

.inzc-wallet-balance-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inzc-wallet-balance-card-label {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inzc-wallet-balance-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--inzc-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inzc-card-top-accent, var(--inzc-primary));
    background: color-mix(in srgb, var(--inzc-card-top-accent, var(--inzc-primary)) 12%, transparent);
    flex-shrink: 0;
}

.inzc-wallet-balance-card-amount {
    font-size: var(--inzc-font-size-3xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    line-height: 1.2;
}

.inzc-wallet-balance-card-sub {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-1);
}

.inzc-wallet-balance-card-sub svg {
    flex-shrink: 0;
}

/* =============================================================================
   3. SUBSCRIPTION STATUS BANNER (BRAND)
   ============================================================================= */

.inzc-wallet-sub-banner {
    background: var(--inzc-bg-primary);
    border: 1px solid var(--inzc-border-light);
    border-radius: var(--inzc-card-border-radius);
    box-shadow: var(--inzc-card-shadow);
    padding: var(--inzc-spacing-4) var(--inzc-card-padding);
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-4);
    margin-bottom: var(--inzc-spacing-6);
    flex-wrap: wrap;
}

.inzc-wallet-sub-banner--upgrade {
    border-color: var(--inzc-warning);
    background: color-mix(in srgb, var(--inzc-warning) 4%, var(--inzc-bg-primary));
}

.inzc-wallet-sub-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--inzc-radius-lg);
    background: color-mix(in srgb, var(--inzc-primary) 12%, transparent);
    color: var(--inzc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inzc-wallet-sub-banner-info {
    flex: 1;
    min-width: 0;
}

.inzc-wallet-sub-banner-title {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-wallet-sub-banner-meta {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-4);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    flex-wrap: wrap;
}

.inzc-wallet-sub-banner-meta-item {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-1);
}

.inzc-wallet-sub-banner-limit {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
}

.inzc-wallet-sub-banner-limit-bar {
    width: 60px;
    height: 6px;
    background: var(--inzc-border-light);
    border-radius: var(--inzc-radius-full);
    overflow: hidden;
}

.inzc-wallet-sub-banner-limit-fill {
    height: 100%;
    border-radius: var(--inzc-radius-full);
    background: var(--inzc-warning);
    transition: width var(--inzc-transition-all);
}

.inzc-wallet-sub-banner-limit-fill--full {
    background: var(--inzc-danger);
}

.inzc-wallet-sub-banner-cta {
    flex-shrink: 0;
}

/* =============================================================================
   4. TRANSACTION FILTER TABS
   ============================================================================= */

.inzc-wallet-tx-nav {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-4) var(--inzc-card-padding);
    border-bottom: 1px solid var(--inzc-border-light);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.inzc-wallet-tx-nav::-webkit-scrollbar {
    display: none;
}

.inzc-wallet-tx-tab {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-2) var(--inzc-spacing-4);
    border-radius: var(--inzc-radius-lg);
    border: 1px solid var(--inzc-border-light);
    background: transparent;
    color: var(--inzc-text-secondary);
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--inzc-transition-all);
}

.inzc-wallet-tx-tab:hover {
    background: var(--inzc-gray-200);
    border-color: var(--inzc-gray-300);
    color: var(--inzc-text-primary);
}

.inzc-wallet-tx-tab.inzc-active {
    background: var(--inzc-primary);
    color: var(--inzc-white);
    border-color: var(--inzc-primary);
}

.inzc-wallet-tx-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--inzc-spacing-1);
    border-radius: var(--inzc-radius-full);
    background: var(--inzc-gray-200);
    color: var(--inzc-text-secondary);
    font-size: 11px;
    font-weight: var(--inzc-font-weight-bold);
    transition: var(--inzc-transition-all);
}

.inzc-wallet-tx-tab:hover .inzc-wallet-tx-count {
    background: var(--inzc-gray-300);
    color: var(--inzc-text-primary);
}

.inzc-wallet-tx-tab.inzc-active .inzc-wallet-tx-count {
    background: rgba(255, 255, 255, 0.3);
    color: var(--inzc-white);
}

.inzc-wallet-tx-panel {
    display: none;
}

.inzc-wallet-tx-panel.inzc-active {
    display: block;
}

/* =============================================================================
   5. TRANSACTION TABLE
   ============================================================================= */

.inzc-wallet-tx-table-wrap {
    padding: var(--inzc-spacing-5) var(--inzc-card-padding) var(--inzc-card-padding);
}

/* Match .inzc-table-header appearance for the wallet transaction table header */
#walletTxTable thead th {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--inzc-text-tertiary);
}

.inzc-wallet-tx-amount {
    font-weight: var(--inzc-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inzc-wallet-tx-amount--credit {
    color: var(--inzc-success);
}

.inzc-wallet-tx-amount--debit {
    color: var(--inzc-danger);
}

.inzc-wallet-tx-amount--neutral {
    color: var(--inzc-text-secondary);
}

.inzc-wallet-tx-desc {
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-primary);
    font-size: var(--inzc-font-size-base);
}

.inzc-wallet-tx-ref-link {
    display: inline-block;
    margin-top: var(--inzc-spacing-1);
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-primary);
    text-decoration: none;
}

.inzc-wallet-tx-ref-link:hover {
    text-decoration: underline;
}

.inzc-wallet-tx-sub {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-tertiary);
    margin-top: var(--inzc-spacing-1);
}

.inzc-wallet-running-balance {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   6. AMOUNT PICKER (TOP-UP)
   ============================================================================= */

.inzc-wallet-amount-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--inzc-spacing-3);
    margin-bottom: var(--inzc-spacing-5);
}

.inzc-wallet-amount-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--inzc-spacing-4) var(--inzc-spacing-3);
    border: 2px solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-lg);
    background: var(--inzc-bg-primary);
    color: var(--inzc-text-primary);
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    cursor: pointer;
    transition: var(--inzc-transition-colors);
    text-align: center;
}

.inzc-wallet-amount-btn:hover {
    border-color: var(--inzc-primary);
    color: var(--inzc-primary);
    background: var(--inzc-primary-lighter);
}

.inzc-wallet-amount-btn.inzc-active {
    border-color: var(--inzc-primary);
    background: var(--inzc-primary-lighter);
    color: var(--inzc-primary);
}

.inzc-wallet-amount-btn.inzc-active::after {
    display: none;
}

.inzc-wallet-custom-amount-wrap {
    position: relative;
    margin-bottom: var(--inzc-spacing-4);
}

.inzc-wallet-custom-amount-prefix {
    position: absolute;
    left: var(--inzc-spacing-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--inzc-text-secondary);
    font-weight: var(--inzc-font-weight-medium);
    pointer-events: none;
}

.inzc-wallet-custom-amount-input {
    padding-left: calc(var(--inzc-spacing-3) + 1ch + var(--inzc-spacing-2));
}

/* =============================================================================
   7. TOP-UP PAGE TWO-COLUMN LAYOUT
   ============================================================================= */

.inzc-wallet-topup-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--inzc-spacing-6);
    align-items: start;
}

.inzc-wallet-topup-section-label {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--inzc-spacing-3);
}

/* =============================================================================
   8. TOP-UP SUMMARY PANEL
   ============================================================================= */

.inzc-wallet-topup-summary {
    position: sticky;
    top: calc(var(--inzc-header-height) + var(--inzc-spacing-4));
}

.inzc-wallet-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--inzc-spacing-3) 0;
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
}

.inzc-wallet-summary-row+.inzc-wallet-summary-row {
    border-top: 1px solid var(--inzc-border-light);
}

.inzc-wallet-summary-row--total {
    padding-top: var(--inzc-spacing-4);
    margin-top: var(--inzc-spacing-1);
    border-top: 2px solid var(--inzc-border-medium) !important;
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
}

.inzc-wallet-summary-value {
    font-variant-numeric: tabular-nums;
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
}

.inzc-wallet-summary-value--free {
    color: var(--inzc-success);
}

/* =============================================================================
   9. WITHDRAWAL FORM
   ============================================================================= */

.inzc-wallet-withdrawal-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--inzc-spacing-6);
    align-items: start;
}

.inzc-wallet-available-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--inzc-spacing-5);
    background: color-mix(in srgb, var(--inzc-success) 8%, var(--inzc-bg-primary));
    border: 1px solid color-mix(in srgb, var(--inzc-success) 25%, transparent);
    border-radius: var(--inzc-radius-lg);
    margin-bottom: var(--inzc-spacing-5);
}

.inzc-wallet-available-highlight-label {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    font-weight: var(--inzc-font-weight-medium);
}

.inzc-wallet-available-highlight-amount {
    font-size: var(--inzc-font-size-2xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-success);
    font-variant-numeric: tabular-nums;
}

.inzc-wallet-withdrawal-method-tabs {
    display: flex;
    gap: var(--inzc-spacing-2);
    margin-bottom: var(--inzc-spacing-4);
}

.inzc-wallet-withdrawal-method-tab {
    flex: 1;
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    border: 2px solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-lg);
    background: var(--inzc-bg-primary);
    text-align: center;
    cursor: pointer;
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-secondary);
    transition: var(--inzc-transition-colors);
}

.inzc-wallet-withdrawal-method-tab:hover {
    border-color: var(--inzc-border-medium);
    color: var(--inzc-text-primary);
}

.inzc-wallet-withdrawal-method-tab.inzc-active {
    border-color: var(--inzc-primary);
    background: var(--inzc-primary-lighter);
    color: var(--inzc-primary);
}

.inzc-wallet-withdrawal-method-panel {
    display: none;
}

.inzc-wallet-withdrawal-method-panel.inzc-active {
    display: block;
}

/* Withdrawal processing notice */
.inzc-wallet-processing-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    background: color-mix(in srgb, var(--inzc-info) 8%, var(--inzc-bg-primary));
    border: 1px solid color-mix(in srgb, var(--inzc-info) 25%, transparent);
    border-radius: var(--inzc-radius-lg);
    margin-top: var(--inzc-spacing-4);
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
}

.inzc-wallet-processing-notice svg {
    color: var(--inzc-info);
    flex-shrink: 0;
    margin-top: 1px;
}

/* =============================================================================
   10. WITHDRAWAL / TOPUP HISTORY + PAYOUT INFO DISPLAY
   ============================================================================= */

.inzc-wallet-history-card {
    margin-top: var(--inzc-spacing-6);
}

/* Payout info display (replaces read-only inputs in withdrawals form) */
.inzc-wallet-payout-info {
    background: var(--inzc-bg-secondary);
    border: 1px solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-lg);
    padding: var(--inzc-spacing-4);
    margin-bottom: var(--inzc-spacing-4);
}

.inzc-wallet-payout-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inzc-spacing-4);
}

.inzc-wallet-payout-info-fields {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-2);
    flex: 1;
}

.inzc-wallet-payout-info-item {
    display: flex;
    align-items: baseline;
    gap: var(--inzc-spacing-2);
}

.inzc-wallet-payout-info-label {
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 110px;
    flex-shrink: 0;
}

.inzc-wallet-payout-info-value {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-primary);
    font-variant-numeric: tabular-nums;
}

[data-inzc-theme="dark"] .inzc-wallet-payout-info {
    background: var(--inzc-bg-tertiary);
    border-color: var(--inzc-border-medium);
}

/* =============================================================================
   11. EMPTY STATE
   ============================================================================= */

.inzc-wallet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--inzc-spacing-12) var(--inzc-spacing-6);
    text-align: center;
    color: var(--inzc-text-tertiary);
}

.inzc-wallet-empty svg {
    margin-bottom: var(--inzc-spacing-3);
    opacity: 0.4;
}

.inzc-wallet-empty-title {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-secondary);
    margin-bottom: var(--inzc-spacing-1);
}

.inzc-wallet-empty-sub {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
}

/* =============================================================================
   12. MOBILE RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {

    .inzc-wallet-topup-layout,
    .inzc-wallet-withdrawal-layout {
        grid-template-columns: 1fr;
    }

    .inzc-wallet-topup-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    .inzc-wallet-balance-grid {
        grid-template-columns: 1fr;
        gap: var(--inzc-spacing-4);
    }

    .inzc-wallet-amount-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .inzc-wallet-amount-btn {
        padding: var(--inzc-spacing-3) var(--inzc-spacing-2);
        font-size: var(--inzc-font-size-sm);
    }

    .inzc-wallet-sub-banner {
        flex-wrap: wrap;
        gap: var(--inzc-spacing-3);
    }

    .inzc-wallet-sub-banner-meta {
        gap: var(--inzc-spacing-3);
    }
}

@media (max-width: 480px) {
    .inzc-wallet-amount-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inzc-wallet-tx-nav {
        padding: var(--inzc-spacing-4) 0;
    }

    .inzc-wallet-tx-table-wrap {
        padding: var(--inzc-spacing-5) 0;
    }
}

/* =============================================================================
   13. PAGE UTILITY CLASSES
   (Classes for all structural / textual patterns in wallet-add-funds.php,
   wallet-payouts.php and wallet-overview.php previously written as
   inline styles)
   ============================================================================= */

/* Compact balance card (page-header actions area) */
.inzc-wallet-balance-card--compact {
    min-width: 200px;
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
}

.inzc-wallet-balance-card--compact .inzc-wallet-balance-card-amount {
    font-size: var(--inzc-font-size-xl);
}

/* Summary section: current balance → new balance */
.inzc-wallet-summary-balance-section {
    margin: var(--inzc-spacing-4) 0 var(--inzc-spacing-3);
}

.inzc-wallet-summary-row--compact {
    padding: 0;
}

.inzc-wallet-summary-row--compact+.inzc-wallet-summary-row--compact {
    margin-top: var(--inzc-spacing-2);
}

/* Success-coloured summary value (new / available balance) */
.inzc-wallet-summary-value--success {
    color: var(--inzc-success);
}

/* Secure payment note (below checkout button) */
.inzc-wallet-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-1);
    margin-top: var(--inzc-spacing-3);
}

.inzc-wallet-secure-note-icon {
    flex-shrink: 0;
}

/* Table cell helpers */
.inzc-wallet-txn-ref {
    font-size: var(--inzc-font-size-xs);
    font-family: monospace;
    color: var(--inzc-text-tertiary);
}

.inzc-wallet-txn-method {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
}

.inzc-wallet-txn-amount--credit {
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-success);
}

/* Pending clearance note */
.inzc-wallet-clearance-note {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-tertiary);
    margin-top: var(--inzc-spacing-1);
}

/* Method-tab inline SVG icon */
.inzc-wallet-method-tab-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* Sidebar submit button spacing */
.inzc-wallet-submit-btn--mt {
    margin-top: var(--inzc-spacing-4);
}

/* Payout info panel inside confirmation modal */
.inzc-wallet-payout-info--modal {
    margin-bottom: 0;
}

.inzc-wallet-payout-info-fields--full {
    flex: 1;
    width: 100%;
}

/* Withdrawal confirmation modal footer */
.inzc-modal-footer--col {
    flex-direction: column;
    align-items: stretch;
    gap: var(--inzc-spacing-3);
}

.inzc-wallet-processing-notice--no-mt {
    margin-top: 0;
}

.inzc-wallet-modal-actions {
    display: flex;
    gap: var(--inzc-spacing-3);
}

/* JS-controlled hidden element (initial display:none state) */
.inzc-js-hidden {
    display: none;
}

/* Spacing helpers for form-level blocks */
.inzc-wallet-form-block--mb {
    margin-bottom: var(--inzc-spacing-5);
}

.inzc-wallet-form-block--mt-sm {
    margin-top: var(--inzc-spacing-3);
}

.inzc-wallet-payout-info--mb {
    margin-bottom: var(--inzc-spacing-4);
}

/* =============================================================================
   14. DARK MODE
   ============================================================================= */

[data-inzc-theme="dark"] .inzc-wallet-balance-card {
    background: var(--inzc-bg-primary);
    border-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-wallet-sub-banner {
    background: var(--inzc-bg-primary);
    border-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-wallet-sub-banner--upgrade {
    background: color-mix(in srgb, var(--inzc-warning) 6%, var(--inzc-bg-primary));
    border-color: color-mix(in srgb, var(--inzc-warning) 40%, transparent);
}

[data-inzc-theme="dark"] .inzc-wallet-amount-btn {
    background: var(--inzc-bg-primary);
    border-color: var(--inzc-border-light);
}