/**
 * ===================================
 * CitadelVest Pro - ENHANCED Dark Mode
 * File: public/css/dark-mode.css
 * Description: Complete dark theme with ALL pages covered
 * ✅ FIXED: Charts, Verification, Dashboard charts, Modals
 * ===================================
 */

/* =================================
   DARK THEME COLOR VARIABLES
   ================================= */
:root {
    /* Background colors */
    --dark-bg-primary: #0f0f1e;
    --dark-bg-secondary: #1a1a2e;
    --dark-bg-tertiary: #252538;
    --dark-bg-card: #1e1e30;
    --dark-border: #2d2d44;
    
    /* Text colors */
    --dark-text-primary: #e8e8f0;
    --dark-text-secondary: #b8b8c8;
    --dark-text-muted: #8a8a9a;
    
    /* Accent colors */
    --dark-accent: #6366f1;
    --dark-accent-hover: #4f46e5;
    
    /* Status colors */
    --dark-success: #10b981;
    --dark-warning: #f59e0b;
    --dark-danger: #ef4444;
    --dark-info: #3b82f6;
}

/* =================================
   BODY & MAIN CONTAINERS
   ================================= */
body.dark-theme,
.dark-theme {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .dashboard {
    background: var(--dark-bg-primary) !important;
}

.dark-theme .container {
    background: transparent !important;
}

/* =================================
   TEXT ELEMENTS - UNIVERSAL
   ================================= */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme p,
.dark-theme span:not(.material-icons):not(.material-icons-sharp),
.dark-theme div:not(.material-icons):not(.material-icons-sharp),
.dark-theme label,
.dark-theme strong,
.dark-theme em,
.dark-theme li,
.dark-theme td,
.dark-theme th,
.dark-theme a {
    color: var(--dark-text-primary) !important;
}

.dark-theme small,
.dark-theme .text-muted,
.dark-theme .muted {
    color: var(--text-primary) !important;
}

/* Links */
.dark-theme a:hover {
    color: var(--dark-accent) !important;
}

/* Page Headers */
.dark-theme .page-header h1,
.dark-theme .page-header p {
    color: var(--dark-text-primary) !important;
}

/* =================================
   NAVIGATION
   ================================= */
.dark-theme .modern-nav {
    background: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

.dark-theme .nav-links a {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .nav-links a:hover {
    color: var(--dark-text-primary) !important;
    background: rgba(99, 102, 241, 0.1) !important;
}

.dark-theme .nav-links a.active {
    color: var(--dark-accent) !important;
    background: rgba(99, 102, 241, 0.15) !important;
}

.dark-theme .logo {
    color: var(--dark-text-primary) !important;
}

/* =================================
   PROFILE DROPDOWN
   ================================= */
.dark-theme .nav-profile-btn {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .nav-profile-btn:hover {
    background: var(--dark-bg-card) !important;
}

.dark-theme .nav-profile-photo {
    background: var(--dark-accent) !important;
    color: white !important;
}

.dark-theme .profile-dropdown-menu {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme .dropdown-item {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .dropdown-item:hover {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .dropdown-item.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--dark-accent) !important;
}

.dark-theme .profile-name {
    color: var(--dark-text-primary) !important;
}

/* =================================
   CARDS & CONTAINERS - COMPREHENSIVE
   ================================= */
.dark-theme .card,
.dark-theme .stats-card,
.dark-theme .investment-card,
.dark-theme .balance-card,
.dark-theme .info-card,
.dark-theme .wallet-card,
.dark-theme .crypto-card,
.dark-theme .settings-card,
.dark-theme .profile-card,
.dark-theme .verification-card,
.dark-theme .section-card,
.dark-theme .metric-card,
.dark-theme .quick-stat-card,
.dark-theme .feature-card,
.dark-theme .preference-item,
.dark-theme .session-card,
.dark-theme .asset-item,
.dark-theme .quick-link-card,
.dark-theme .stat-box,
.dark-theme .profile-container-simple,
.dark-theme .profile-header,
.dark-theme .profile-form,
.dark-theme .quick-links-section,
.dark-theme .settings-container,
.dark-theme .settings-sidebar,
.dark-theme .settings-content,
.dark-theme .settings-section,
.dark-theme .transactions-container,
.dark-theme .transactions-table,
.dark-theme .filters-section,
.dark-theme .earnings-card,
.dark-theme .security-card,
.dark-theme .step-card,
.dark-theme .tip-card,
.dark-theme .link-card,
.dark-theme .referral-header,
.dark-theme .referral-promo,
.dark-theme .earnings-overview,
.dark-theme .referral-link-section,
.dark-theme .how-it-works,
.dark-theme .referral-stats-section,
.dark-theme .referrals-list-section,
.dark-theme .earnings-history-section,
.dark-theme .referral-tips,
.dark-theme .security-overview,
.dark-theme .activity-timeline-container,
.dark-theme .active-sessions-section,
.dark-theme .security-tips {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .card:hover,
.dark-theme .stats-card:hover,
.dark-theme .metric-card:hover,
.dark-theme .quick-link-card:hover,
.dark-theme .tip-card:hover {
    border-color: var(--dark-accent) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.2) !important;
}

/* =================================
   VERIFICATION PAGE SPECIFIC
   ================================= */
.dark-theme .verification-progress-card,
.dark-theme .verification-overview {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(118, 75, 162, 0.2)) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .verification-step {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .verification-step.completed {
    border-color: var(--dark-success) !important;
    background: rgba(16, 185, 129, 0.05) !important;
}

.dark-theme .verification-step.active {
    border-color: var(--dark-accent) !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

.dark-theme .verification-step.pending {
    border-color: var(--dark-border) !important;
}

.dark-theme .level-card {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 2px solid var(--dark-border) !important;
}

.dark-theme .verification-step.completed .level-card {
    background: var(--dark-success) !important;
    color: white !important;
    border-color: var(--dark-success) !important;
}

.dark-theme .verification-step.active .level-card {
    background: var(--dark-accent) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

.dark-theme .level-title,
.dark-theme .level-description {
    color: var(--dark-text-primary) !important;
}

.dark-theme .limits-display {
    background: var(--dark-bg-tertiary) !important;
}

.dark-theme .limit-item {
    color: var(--dark-text-primary) !important;
}

.dark-theme .verification-benefits {
    background: var(--dark-bg-card) !important;
}

.dark-theme .benefit-card {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .faq-item {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .faq-question {
    color: var(--dark-text-primary) !important;
}

.dark-theme .faq-answer {
    color: var(--dark-text-secondary) !important;
}

/* Progress bar */
.dark-theme .progress-bar {
    background: var(--dark-bg-tertiary) !important;
}

.dark-theme .progress-fill {
    background: linear-gradient(90deg, var(--dark-accent), var(--dark-success)) !important;
}

/* =================================
   CHARTS PAGE SPECIFIC - CRITICAL FIX
   ================================= */
.dark-theme .crypto-tabs,
.dark-theme .chart-tabs {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .crypto-tab,
.dark-theme .chart-tab {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .crypto-tab:hover,
.dark-theme .chart-tab:hover {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .crypto-tab.active,
.dark-theme .chart-tab.active {
    background: var(--dark-accent) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

/* Chart container - THE MAIN FIX */
.dark-theme .chart-section,
.dark-theme .chart-wrapper,
.dark-theme #chartContainer,
.dark-theme .tradingview-widget-container {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Chart info cards */
.dark-theme .chart-info,
.dark-theme .price-stats {
    background: var(--dark-bg-card) !important;
}

.dark-theme .stat-card,
.dark-theme .price-card {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* =================================
   DASHBOARD CHARTS - CRITICAL FIX
   ================================= */
.dark-theme .portfolio-section,
.dark-theme .portfolio-chart,
.dark-theme .balance-overview,
.dark-theme .portfolio-value-card {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Portfolio header */
.dark-theme .portfolio-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(118, 75, 162, 0.2)) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .portfolio-value {
    color: var(--dark-text-primary) !important;
}

.dark-theme .portfolio-change {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .portfolio-change.positive {
    color: var(--dark-success) !important;
}

.dark-theme .portfolio-change.negative {
    color: var(--dark-danger) !important;
}

/* Crypto balance cards */
.dark-theme .balance-grid,
.dark-theme .crypto-balances {
    background: transparent !important;
}

.dark-theme .crypto-balance-card {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .crypto-icon {
    background: var(--dark-bg-tertiary) !important;
}

.dark-theme .crypto-name {
    color: var(--dark-text-primary) !important;
}

.dark-theme .crypto-symbol {
    color: var(--dark-text-muted) !important;
}

.dark-theme .crypto-balance {
    color: var(--dark-text-primary) !important;
}

.dark-theme .crypto-value {
    color: var(--dark-text-secondary) !important;
}

/* =================================
   MODALS - ENHANCED FIX
   ================================= */
.dark-theme .modal {
    background: rgba(0, 0, 0, 0.85) !important;
}

.dark-theme .modal-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
}

.dark-theme .modal-content,
.dark-theme .modal-dialog,
.dark-theme .modal-box {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme .modal-header {
    background: var(--dark-bg-tertiary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

.dark-theme .modal-header h2,
.dark-theme .modal-header h3,
.dark-theme .modal-header h4 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .modal-body {
    background: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .modal-footer {
    background: var(--dark-bg-tertiary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* Close button in modals */
.dark-theme .close,
.dark-theme .modal-close,
.dark-theme .close-modal,
.dark-theme .close-btn {
    color: var(--dark-text-secondary) !important;
    background: transparent !important;
}

.dark-theme .close:hover,
.dark-theme .modal-close:hover,
.dark-theme .close-btn:hover {
    color: var(--dark-text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Deposit/Withdrawal Modal specific */
.dark-theme .deposit-step,
.dark-theme .withdrawal-step {
    background: var(--dark-bg-tertiary) !important;
    border: 2px solid var(--dark-border) !important;
}

.dark-theme .network-badge,
.dark-theme .badge {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Network selector in modals */
.dark-theme .network-selector {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .network-option {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .network-option:hover {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-accent) !important;
}

.dark-theme .network-option.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: var(--dark-accent) !important;
}

/* Coming soon overlay in modals */
.dark-theme .coming-soon-overlay {
    background: rgba(15, 15, 30, 0.95) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .coming-soon-badge {
    background: var(--dark-warning) !important;
    color: white !important;
}

/* =================================
   FORMS & INPUTS
   ================================= */
.dark-theme input[type="text"],
.dark-theme input[type="email"],
.dark-theme input[type="password"],
.dark-theme input[type="number"],
.dark-theme input[type="tel"],
.dark-theme input[type="url"],
.dark-theme input[type="search"],
.dark-theme input[type="file"],
.dark-theme textarea,
.dark-theme select {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme input::placeholder,
.dark-theme textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

.dark-theme input:focus,
.dark-theme textarea:focus,
.dark-theme select:focus {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.dark-theme input:disabled,
.dark-theme textarea:disabled,
.dark-theme select:disabled {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-muted) !important;
    cursor: not-allowed !important;
}

.dark-theme input[readonly] {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    cursor: text !important;
}

/* Form groups */
.dark-theme .form-group,
.dark-theme .input-group,
.dark-theme .form-grid {
    background: transparent !important;
}

.dark-theme .form-label,
.dark-theme label {
    color: var(--dark-text-primary) !important;
}

/* Search box */
.dark-theme .search-box {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .search-box input {
    background: transparent !important;
    border: none !important;
    color: var(--dark-text-primary) !important;
}

/* =================================
   BUTTONS - ALL TYPES
   ================================= */
.dark-theme .btn {
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .btn-primary,
.dark-theme button[type="submit"] {
    background: linear-gradient(135deg, var(--dark-accent), var(--dark-accent-hover)) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

.dark-theme .btn-primary:hover,
.dark-theme button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--dark-accent-hover), var(--dark-accent)) !important;
    transform: translateY(-2px) !important;
}

.dark-theme .btn-secondary {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .btn-secondary:hover {
    background: var(--dark-bg-secondary) !important;
}

.dark-theme .btn-danger {
    background: linear-gradient(135deg, var(--dark-danger), #c62828) !important;
    color: white !important;
}

.dark-theme .btn-success {
    background: linear-gradient(135deg, var(--dark-success), #059669) !important;
    color: white !important;
}

.dark-theme .btn-warning {
    background: linear-gradient(135deg, var(--dark-warning), #d97706) !important;
    color: white !important;
}

.dark-theme .btn-info {
    background: linear-gradient(135deg, var(--dark-info), #2563eb) !important;
    color: white !important;
}

/* Action buttons in portfolio */
.dark-theme .action-btn {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .action-btn:hover {
    background: var(--dark-accent) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

/* Copy buttons */
.dark-theme .copy-btn,
.dark-theme .copy-link-btn,
.dark-theme .copy-address-btn {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .copy-btn:hover,
.dark-theme .copy-link-btn:hover,
.dark-theme .copy-address-btn:hover {
    background: var(--dark-accent) !important;
    color: white !important;
}

/* Share buttons */
.dark-theme .share-btn {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .share-btn:hover {
    background: var(--dark-accent) !important;
    color: white !important;
}

/* Filter buttons */
.dark-theme .filter-tab,
.dark-theme .filter-btn {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .filter-tab:hover,
.dark-theme .filter-btn:hover {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .filter-tab.active,
.dark-theme .filter-btn.active {
    background: var(--dark-accent) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

/* Activity tabs */
.dark-theme .activity-tab {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .activity-tab:hover {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .activity-tab.active {
    background: var(--dark-accent) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

/* Export button */
.dark-theme .btn-export {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .btn-export:hover {
    background: var(--dark-accent) !important;
    color: white !important;
}

/* =================================
   TABLES
   ================================= */
.dark-theme table {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme thead {
    background: var(--dark-bg-tertiary) !important;
    border-bottom: 2px solid var(--dark-border) !important;
}

.dark-theme thead th {
    color: var(--dark-text-primary) !important;
    border-bottom: 2px solid var(--dark-border) !important;
}

.dark-theme tbody tr {
    border-bottom: 1px solid var(--dark-border) !important;
}

.dark-theme tbody tr:hover {
    background: var(--dark-bg-tertiary) !important;
}

.dark-theme tbody td {
    color: var(--dark-text-primary) !important;
}

.dark-theme .loading-row {
    color: var(--dark-text-muted) !important;
}

.dark-theme .empty-state {
    background: var(--dark-bg-card) !important;
    color: var(--dark-text-muted) !important;
}

.dark-theme .referrals-table-container,
.dark-theme .transactions-table {
    background: var(--dark-bg-card) !important;
}

/* =================================
   BADGES & LABELS
   ================================= */
.dark-theme .badge {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .badge.badge-success,
.dark-theme .status-badge.approved,
.dark-theme .status-badge.completed,
.dark-theme .active-badge {
    background: rgba(16, 185, 129, 0.2) !important;
    color: var(--dark-success) !important;
    border-color: var(--dark-success) !important;
}

.dark-theme .badge.badge-warning,
.dark-theme .status-badge.pending {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--dark-warning) !important;
    border-color: var(--dark-warning) !important;
}

.dark-theme .badge.badge-danger,
.dark-theme .status-badge.rejected,
.dark-theme .status-badge.failed {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--dark-danger) !important;
    border-color: var(--dark-danger) !important;
}

.dark-theme .badge.badge-info {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--dark-info) !important;
    border-color: var(--dark-info) !important;
}

/* Promo badges */
.dark-theme .promo-badge {
    background: linear-gradient(135deg, var(--dark-accent), var(--dark-accent-hover)) !important;
    color: white !important;
}

/* Transaction type badges */
.dark-theme .transaction-type {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .transaction-type.deposit {
    background: rgba(16, 185, 129, 0.2) !important;
    color: var(--dark-success) !important;
}

.dark-theme .transaction-type.withdrawal {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--dark-danger) !important;
}

.dark-theme .transaction-type.investment {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--dark-info) !important;
}

/* =================================
   TOGGLE SWITCH
   ================================= */
.dark-theme .toggle-switch {
    background: transparent !important;
}

.dark-theme .toggle-slider {
    background-color: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .toggle-slider:before {
    background-color: var(--dark-text-muted) !important;
}

.dark-theme .toggle-switch input:checked + .toggle-slider {
    background: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
}

.dark-theme .toggle-switch input:checked + .toggle-slider:before {
    background-color: white !important;
}

/* =================================
   CHARTS & ANALYTICS
   ================================= */
.dark-theme .chart-container {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .chart-header {
    background: transparent !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

.dark-theme .chart-title {
    color: var(--dark-text-primary) !important;
}

.dark-theme .time-filter-btn {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .time-filter-btn:hover {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .time-filter-btn.active {
    background: var(--dark-accent) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

/* Chart.js specific */
.dark-theme canvas {
    background: transparent !important;
}

/* ROI Calculator */
.dark-theme .roi-calculator {
    background: linear-gradient(135deg, var(--dark-accent), var(--dark-accent-hover)) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .roi-results {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Metric cards */
.dark-theme .metric-icon,
.dark-theme .earnings-icon,
.dark-theme .security-icon {
    background: var(--dark-bg-tertiary) !important;
}

.dark-theme .metric-value,
.dark-theme .earnings-info h3,
.dark-theme .security-info h3 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .metric-label,
.dark-theme .earnings-info p,
.dark-theme .security-info p {
    color: var(--dark-text-muted) !important;
}

.dark-theme .metric-change {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .metric-change.positive {
    color: var(--dark-success) !important;
}

.dark-theme .metric-change.negative {
    color: var(--dark-danger) !important;
}

/* Stats chart */
.dark-theme .stats-chart {
    background: var(--dark-bg-card) !important;
}

/* =================================
   ACTIVITY & TIMELINE
   ================================= */
.dark-theme .activity-timeline {
    background: var(--dark-bg-card) !important;
}

.dark-theme .activity-item,
.dark-theme .timeline-item {
    background: var(--dark-bg-tertiary) !important;
    border-left: 3px solid var(--dark-border) !important;
}

.dark-theme .activity-item:hover,
.dark-theme .timeline-item:hover {
    background: var(--dark-bg-secondary) !important;
    border-left-color: var(--dark-accent) !important;
}

.dark-theme .activity-icon {
    background: var(--dark-bg-card) !important;
    border: 2px solid var(--dark-border) !important;
}

.dark-theme .activity-time {
    color: var(--dark-text-muted) !important;
}

.dark-theme .loading-state {
    color: var(--dark-text-muted) !important;
}

.dark-theme .timeline-empty {
    color: var(--dark-text-muted) !important;
}

/* Session items */
.dark-theme .session-item {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .session-item.current {
    border-color: var(--dark-accent) !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

.dark-theme .session-icon {
    background: var(--dark-accent) !important;
    color: white !important;
}

.dark-theme .session-details h4 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .session-browser,
.dark-theme .session-location,
.dark-theme .session-ip,
.dark-theme .session-time {
    color: var(--dark-text-secondary) !important;
}

/* =================================
   NOTIFICATIONS
   ================================= */
.dark-theme .notification-bell {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .notification-bell:hover {
    color: var(--dark-text-primary) !important;
}

.dark-theme .notification-badge {
    background: var(--dark-danger) !important;
    color: white !important;
}

.dark-theme .notification-dropdown {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme .notification-header {
    background: var(--dark-bg-tertiary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

.dark-theme .notification-header h3 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .mark-all-read {
    background: transparent !important;
    color: var(--dark-accent) !important;
}

.dark-theme .mark-all-read:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}

.dark-theme .notification-list {
    background: var(--dark-bg-card) !important;
}

.dark-theme .notification-item {
    background: var(--dark-bg-card) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

.dark-theme .notification-item:hover {
    background: var(--dark-bg-tertiary) !important;
}

.dark-theme .notification-item.unread {
    background: rgba(99, 102, 241, 0.05) !important;
}

.dark-theme .notification-empty {
    color: var(--dark-text-muted) !important;
}

.dark-theme .notification-footer {
    background: var(--dark-bg-tertiary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

.dark-theme .view-all-notifications {
    color: var(--dark-accent) !important;
}

.dark-theme .view-all-notifications:hover {
    color: var(--dark-accent-hover) !important;
}

/* =================================
   ALERTS
   ================================= */
.dark-theme .alert {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: var(--dark-success) !important;
    color: var(--dark-success) !important;
}

.dark-theme .alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: var(--dark-warning) !important;
    color: var(--dark-warning) !important;
}

.dark-theme .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--dark-danger) !important;
    color: var(--dark-danger) !important;
}

.dark-theme .alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--dark-info) !important;
    color: var(--dark-info) !important;
}

.dark-theme .info-message {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid var(--dark-info) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .coming-soon {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-muted) !important;
}

.dark-theme .warning-box {
    background: rgba(239, 68, 68, 0.05) !important;
    border: 2px solid rgba(239, 68, 68, 0.3) !important;
}

.dark-theme .warning-box h4 {
    color: var(--dark-danger) !important;
}

.dark-theme .alert-box {
    background: rgba(245, 158, 11, 0.05) !important;
    border: 2px solid rgba(245, 158, 11, 0.3) !important;
}

.dark-theme .alert-box h4 {
    color: var(--dark-warning) !important;
}

/* =================================
   PAGINATION
   ================================= */
.dark-theme .pagination {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .pagination button,
.dark-theme .page-btn {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .pagination button:hover,
.dark-theme .page-btn:hover {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .pagination button.active,
.dark-theme .page-btn.active {
    background: var(--dark-accent) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

.dark-theme .pagination button:disabled,
.dark-theme .page-btn:disabled {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-muted) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

.dark-theme .page-info {
    color: var(--dark-text-primary) !important;
}

/* =================================
   DANGER ZONE
   ================================= */
.dark-theme .danger-section {
    background: rgba(239, 68, 68, 0.05) !important;
    border: 2px solid rgba(239, 68, 68, 0.3) !important;
}

.dark-theme .danger-modal {
    border: 3px solid var(--dark-danger) !important;
}

/* =================================
   SCROLLBAR (Webkit)
   ================================= */
.dark-theme ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark-theme ::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
}

.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--dark-bg-tertiary);
    border-radius: 5px;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-border);
}

/* =================================
   SELECT DROPDOWNS
   ================================= */
.dark-theme select {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme select option {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

/* =================================
   HR / DIVIDERS
   ================================= */
.dark-theme hr {
    border-color: var(--dark-border) !important;
    background: var(--dark-border) !important;
}

/* =================================
   CODE BLOCKS
   ================================= */
.dark-theme code,
.dark-theme pre {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* =================================
   FLOATING HELP BUTTON
   ================================= */
.dark-theme .floating-help-btn {
    background: var(--dark-accent) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
    color: white !important;
}

.dark-theme .floating-help-btn:hover {
    background: var(--dark-accent-hover) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
}

/* =================================
   TOOLTIPS & POPOVERS
   ================================= */
.dark-theme .tooltip {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .popover {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
}

/* =================================
   PROGRESS BARS
   ================================= */
.dark-theme .progress {
    background: var(--dark-bg-tertiary) !important;
}

.dark-theme .progress-bar {
    background: var(--dark-accent) !important;
}

.dark-theme .password-strength {
    background: var(--dark-bg-tertiary) !important;
}

.dark-theme .strength-bar.weak {
    background: var(--dark-danger) !important;
}

.dark-theme .strength-bar.medium {
    background: var(--dark-warning) !important;
}

.dark-theme .strength-bar.strong {
    background: var(--dark-success) !important;
}

/* =================================
   REFERRALS PAGE SPECIFIC
   ================================= */
.dark-theme .referral-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(118, 75, 162, 0.2)) !important;
}

.dark-theme .earnings-timeline {
    background: var(--dark-bg-card) !important;
}

.dark-theme .steps-grid,
.dark-theme .tips-grid {
    background: transparent !important;
}

/* =================================
   RESPONSIVE ADJUSTMENTS
   ================================= */
@media (max-width: 768px) {
    .dark-theme .settings-sidebar {
        border-right: none !important;
        border-bottom: 1px solid var(--dark-border) !important;
    }
}

/* =================================
   PRINT STYLES (Keep light)
   ================================= */
@media print {
    body.dark-theme {
        background: white !important;
        color: black !important;
    }
    
    .dark-theme * {
        background: white !important;
        color: black !important;
        border-color: #ccc !important;
    }
}

/* =================================
   TRANSITIONS
   ================================= */
.dark-theme * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease !important;
}




/**
 * ===================================
 * DARK MODE PATCH - ADD TO EXISTING dark-mode.css
 * Paste this at the END of your dark-mode.css file
 * Fixes: Charts page, Verification page, Dashboard charts, Modals
 * ===================================
 */

/* =================================
   CHARTS PAGE FIXES
   ================================= */
.dark-theme .chart-section,
.dark-theme .chart-wrapper,
.dark-theme #chartContainer,
.dark-theme .tradingview-widget-container,
.dark-theme .tv-lightweight-charts {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .crypto-tabs {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .crypto-tab {
    background: #252538 !important;
    color: #b8b8c8 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .crypto-tab:hover {
    background: #1a1a2e !important;
    color: #e8e8f0 !important;
}

.dark-theme .crypto-tab.active {
    background: #6366f1 !important;
    color: white !important;
    border-color: #6366f1 !important;
}

.dark-theme .chart-info,
.dark-theme .price-stats {
    background: #1e1e30 !important;
}

.dark-theme .stat-card,
.dark-theme .price-card {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
}

/* =================================
   DASHBOARD PORTFOLIO CHART FIXES
   ================================= */
.dark-theme .portfolio-section,
.dark-theme .portfolio-chart,
.dark-theme .balance-overview,
.dark-theme .portfolio-value-card {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .portfolio-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(118, 75, 162, 0.2)) !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .crypto-balance-card {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .crypto-icon {
    background: #252538 !important;
}

/* =================================
   VERIFICATION PAGE FIXES
   ================================= */
.dark-theme .verification-progress-card,
.dark-theme .verification-overview {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(118, 75, 162, 0.2)) !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .verification-step {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .verification-step.completed {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.05) !important;
}

.dark-theme .verification-step.active {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

.dark-theme .level-number {
    background: #252538 !important;
    color: #e8e8f0 !important;
    border: 2px solid #2d2d44 !important;
}

.dark-theme .verification-step.completed .level-number {
    background: #10b981 !important;
    color: white !important;
    border-color: #10b981 !important;
}

.dark-theme .verification-step.active .level-number {
    background: #6366f1 !important;
    color: white !important;
    border-color: #6366f1 !important;
}

.dark-theme .limits-display {
    background: #252538 !important;
}

.dark-theme .verification-benefits,
.dark-theme .benefit-card {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .faq-item {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

/* =================================
   MODAL FIXES (DEPOSIT/WITHDRAWAL)
   ================================= */
.dark-theme .modal {
    background: rgba(0, 0, 0, 0.85) !important;
}

.dark-theme .modal-content {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme .modal-header {
    background: #252538 !important;
    border-bottom: 1px solid #2d2d44 !important;
}

.dark-theme .modal-header h2,
.dark-theme .modal-header h3 {
    color: #e8e8f0 !important;
}

.dark-theme .modal-body {
    background: #1e1e30 !important;
    color: #e8e8f0 !important;
}

.dark-theme .modal-footer {
    background: #252538 !important;
    border-top: 1px solid #2d2d44 !important;
}

.dark-theme .close-btn {
    color: #b8b8c8 !important;
    background: transparent !important;
}

.dark-theme .close-btn:hover {
    color: #e8e8f0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Deposit modal steps */
.dark-theme .deposit-step,
.dark-theme .withdrawal-step {
    background: #252538 !important;
    border: 2px solid #2d2d44 !important;
}

/* Network selector */
.dark-theme .network-selector {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .network-option {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
    color: #e8e8f0 !important;
}

.dark-theme .network-option:hover {
    background: #252538 !important;
    border-color: #6366f1 !important;
}

.dark-theme .network-option.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: #6366f1 !important;
}

/* Coming soon overlay */
.dark-theme .coming-soon-overlay {
    background: rgba(15, 15, 30, 0.95) !important;
    color: #e8e8f0 !important;
}

/* =================================
   ADDITIONAL ELEMENTS
   ================================= */
.dark-theme .earnings-card,
.dark-theme .security-card,
.dark-theme .activity-item,
.dark-theme .session-item {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .session-item.current {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

.dark-theme .activity-timeline,
.dark-theme .earnings-timeline,
.dark-theme .referrals-table-container {
    background: #1e1e30 !important;
}

/* Action buttons */
.dark-theme .action-btn {
    background: #252538 !important;
    color: #e8e8f0 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .action-btn:hover {
    background: #6366f1 !important;
    color: white !important;
    border-color: #6366f1 !important;
}

/* Copy buttons */
.dark-theme .copy-btn,
.dark-theme .copy-link-btn {
    background: #252538 !important;
    color: #e8e8f0 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .copy-btn:hover,
.dark-theme .copy-link-btn:hover {
    background: #6366f1 !important;
    color: white !important;
}

/* Share buttons */
.dark-theme .share-btn {
    background: #252538 !important;
    color: #e8e8f0 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .share-btn:hover {
    background: #6366f1 !important;
    color: white !important;
}

/* Link card */
.dark-theme .link-card {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .link-display {
    background: #252538 !important;
}

/* Timeline filters */
.dark-theme .timeline-filters {
    background: #1e1e30 !important;
}

.dark-theme .timeline-filters select {
    background: #252538 !important;
    color: #e8e8f0 !important;
    border: 1px solid #2d2d44 !important;
}

/* Stats header */
.dark-theme .stats-header {
    background: transparent !important;
}

.dark-theme .stats-chart {
    background: #1e1e30 !important;
}

/* Empty states */
.dark-theme .empty-state,
.dark-theme .loading-state,
.dark-theme .timeline-empty {
    color: #8a8a9a !important;
}

/* Tips grid */
.dark-theme .tips-grid,
.dark-theme .steps-grid {
    background: transparent !important;
}

.dark-theme .tip-card,
.dark-theme .step-card {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .step-number {
    background: #6366f1 !important;
    color: white !important;
}

/* Promo badge */
.dark-theme .promo-badge {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: white !important;
}

/* Activity tabs */
.dark-theme .activity-tabs {
    background: #1e1e30 !important;
}

.dark-theme .activity-tab {
    background: #252538 !important;
    color: #b8b8c8 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .activity-tab:hover {
    background: #1a1a2e !important;
    color: #e8e8f0 !important;
}

.dark-theme .activity-tab.active {
    background: #6366f1 !important;
    color: white !important;
    border-color: #6366f1 !important;
}

/* Referral header */
.dark-theme .referral-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(118, 75, 162, 0.2)) !important;
}

.dark-theme .referral-link-section,
.dark-theme .how-it-works,
.dark-theme .referral-stats-section,
.dark-theme .referrals-list-section,
.dark-theme .earnings-history-section,
.dark-theme .referral-tips,
.dark-theme .security-tips {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

/* Share buttons */
.dark-theme .share-buttons {
    background: transparent !important;
}

/* Security overview */
.dark-theme .security-overview {
    background: transparent !important;
}

.dark-theme .security-card {
    background: #1e1e30 !important;
}

.dark-theme .security-icon {
    background: #252538 !important;
}

/* Active sessions */
.dark-theme .active-sessions-section {
    background: #1e1e30 !important;
}

.dark-theme .sessions-list {
    background: transparent !important;
}

.dark-theme .session-icon {
    background: #6366f1 !important;
    color: white !important;
}


/**
 * ===================================
 * DARK MODE PATCH - FINAL VERSION
 * Paste this at the END of your dark-mode.css file
 * Fixes: address-value, earnings timeline inline styles, modals
 * No JavaScript needed
 * ===================================
 */

/* =================================
   CHARTS - Chart data visible
   ================================= */
.dark-theme .bitcoin-chart-section,
.dark-theme .chart-section {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .tv-lightweight-charts {
    background: transparent !important;
}

/* =================================
   DASHBOARD - Live Market Prices
   ================================= */
.dark-theme .market-section {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .market-section h2,
.dark-theme .market-section h3,
.dark-theme .market-section p {
    color: #e8e8f0 !important;
}

.dark-theme .market-section .price-widget,
.dark-theme .market-section .crypto-widget,
.dark-theme .market-section .market-card {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
}

/* =================================
   WALLET PAGE - All Sections
   ================================= */
.dark-theme .deposit-address-section,
.dark-theme .withdrawal-addresses-section,
.dark-theme .recent-transactions-section {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .address-card,
.dark-theme .address-info {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
}

/* NEW: Address value and memo */
.dark-theme .address-value,
.dark-theme .address-value-memo {
    background: #1e1e30 !important;
    color: #e8e8f0 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .address-value code,
.dark-theme .address-value-memo code {
    color: #e8e8f0 !important;
    background: #252538 !important;
}

.dark-theme .saved-address-item {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .saved-address-item:hover {
    background: #1a1a2e !important;
    border-color: #6366f1 !important;
}

.dark-theme .recent-transactions-section .transaction-item {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
}

/* =================================
   ACTIVITY PAGE - Timeline
   ================================= */
.dark-theme .timeline-content {
    background: #1e1e30 !important;
}

.dark-theme .timeline-content .timeline-item,
.dark-theme .timeline-content .activity-item {
    background: #252538 !important;
    border-left: 3px solid #2d2d44 !important;
}

.dark-theme .timeline-content .timeline-item:hover {
    background: #1a1a2e !important;
    border-left-color: #6366f1 !important;
}

/* =================================
   REFERRALS - Earnings Timeline
   Override inline styles from JavaScript
   ================================= */
.dark-theme .earnings-history-section {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .earnings-timeline {
    background: #1e1e30 !important;
    padding: 1.5rem;
}

/* Override inline styles for earnings items */
.dark-theme .earnings-timeline div[style*="background: #f8f9fa"],
.dark-theme .earnings-timeline div[style*="background:#f8f9fa"] {
    background: #252538 !important;
    border-left: 3px solid #6366f1 !important;
}

/* Target all divs with padding inside earnings timeline */
.dark-theme .earnings-timeline > div[style*="padding"] {
    background: #252538 !important;
    border-left-color: #6366f1 !important;
}

/* Text colors in earnings timeline */
.dark-theme .earnings-timeline strong {
    color: #10b981 !important;
}

.dark-theme .earnings-timeline small,
.dark-theme .earnings-timeline p {
    color: #b8b8c8 !important;
}

/* Empty state */
.dark-theme .earnings-timeline .timeline-empty {
    background: #252538 !important;
    color: #8a8a9a !important;
}

/* =================================
   VERIFICATION PAGE
   ================================= */
.dark-theme .level-limits {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme .level-limits .limit-item {
    background: #1e1e30 !important;
}

.dark-theme .faq-question {
    background: #252538 !important;
    color: #e8e8f0 !important;
}

.dark-theme .faq-question:hover {
    background: #1a1a2e !important;
    border-color: #6366f1 !important;
}

.dark-theme .faq-answer {
    background: #1e1e30 !important;
    color: #b8b8c8 !important;
}

/* =================================
   MODALS - Dark & Scrollable (CSS Only)
   Override inline styles with !important
   ================================= */

/* Investment Modal */
.dark-theme #investmentModal {
    background: rgba(0, 0, 0, 0.85) !important;
    overflow-y: auto !important;
}

.dark-theme #investmentModal > div[style*="background: white"] {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.dark-theme #investmentModal h2 {
    color: #e8e8f0 !important;
}

.dark-theme #investmentModal label {
    color: #e8e8f0 !important;
}

.dark-theme #investmentModal p {
    color: #b8b8c8 !important;
}

.dark-theme #investmentModal small {
    color: #8a8a9a !important;
}

.dark-theme #investmentModal input,
.dark-theme #investmentModal select {
    background: #252538 !important;
    border: 2px solid #2d2d44 !important;
    color: #e8e8f0 !important;
}

.dark-theme #investmentModal input::placeholder {
    color: #8a8a9a !important;
}

/* Summary box in investment modal */
.dark-theme #investmentModal div[style*="background: #f0f9ff"] {
    background: #252538 !important;
    border-left: 4px solid #6366f1 !important;
}

.dark-theme #investmentModal div[style*="background: #f0f9ff"] span {
    color: #b8b8c8 !important;
}

.dark-theme #investmentModal div[style*="background: #f0f9ff"] strong {
    color: #e8e8f0 !important;
}

/* Withdraw Modal */
.dark-theme #withdrawToWalletModal {
    background: rgba(0, 0, 0, 0.85) !important;
    overflow-y: auto !important;
}

.dark-theme #withdrawToWalletModal > div[style*="background: white"] {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.dark-theme #withdrawToWalletModal h2 {
    color: #e8e8f0 !important;
}

.dark-theme #withdrawToWalletModal label {
    color: #e8e8f0 !important;
}

.dark-theme #withdrawToWalletModal p {
    color: #b8b8c8 !important;
}

.dark-theme #withdrawToWalletModal small {
    color: #8a8a9a !important;
}

.dark-theme #withdrawToWalletModal input {
    background: #252538 !important;
    border: 2px solid #2d2d44 !important;
    color: #e8e8f0 !important;
}

.dark-theme #withdrawToWalletModal input::placeholder {
    color: #8a8a9a !important;
}

/* Quick amount buttons */
.dark-theme #withdrawToWalletModal button[style*="background: #f5f5f5"] {
    background: #252538 !important;
    border: 1px solid #2d2d44 !important;
    color: #e8e8f0 !important;
}

.dark-theme #withdrawToWalletModal button[style*="background: #f5f5f5"]:hover {
    background: #1a1a2e !important;
    border-color: #6366f1 !important;
}

/* Warning box */
.dark-theme #withdrawToWalletModal div[style*="background: #fff3cd"] {
    background: rgba(245, 158, 11, 0.1) !important;
    border-left: 4px solid #f59e0b !important;
}

.dark-theme #withdrawToWalletModal div[style*="background: #fff3cd"] p {
    color: #e8e8f0 !important;
}

/* Cancel button */
.dark-theme #withdrawToWalletModal button[style*="background: #e0e0e0"] {
    background: #252538 !important;
    color: #e8e8f0 !important;
}

.dark-theme #withdrawToWalletModal button[style*="background: #e0e0e0"]:hover {
    background: #1a1a2e !important;
}

/* Deposit Info Modal */
.dark-theme #depositInfoModal {
    background: rgba(0, 0, 0, 0.85) !important;
}

.dark-theme #depositInfoModal .modal-content {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.dark-theme #depositInfoModal .modal-header {
    background: #252538 !important;
    border-bottom: 1px solid #2d2d44 !important;
}

.dark-theme #depositInfoModal .modal-body {
    background: #1e1e30 !important;
    overflow-y: auto !important;
    max-height: 70vh !important;
}

.dark-theme #depositInfoModal .modal-footer {
    background: #252538 !important;
    border-top: 1px solid #2d2d44 !important;
}

.dark-theme #depositInfoModal h2,
.dark-theme #depositInfoModal h3 {
    color: #e8e8f0 !important;
}

.dark-theme #depositInfoModal p,
.dark-theme #depositInfoModal span {
    color: #e8e8f0 !important;
}

.dark-theme #depositInfoModal .close-btn {
    color: #b8b8c8 !important;
}

.dark-theme #depositInfoModal .close-btn:hover {
    color: #e8e8f0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Deposit steps */
.dark-theme #depositInfoModal .deposit-step {
    background: #252538 !important;
    border: 2px solid #2d2d44 !important;
}

/* Network selector */
.dark-theme #depositInfoModal .network-option {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
    color: #e8e8f0 !important;
}

.dark-theme #depositInfoModal .network-option:hover {
    background: #252538 !important;
    border-color: #6366f1 !important;
}

.dark-theme #depositInfoModal .network-option.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: #6366f1 !important;
}

/* =================================
   UNIVERSAL MODAL SCROLLING
   ================================= */

/* Make sure modals are scrollable */
.dark-theme .modal {
    overflow-y: auto !important;
}

.dark-theme .modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.dark-theme .modal-body {
    overflow-y: auto !important;
    max-height: 60vh !important;
}

/* For inline styled modals */
.dark-theme div[id$="Modal"] {
    overflow-y: auto !important;
}

.dark-theme div[id$="Modal"] > div {
    max-height: 90vh !important;
    overflow-y: auto !important;
}


/**
 * ===================================
 * DEPOSIT MODAL DARK MODE FIX
 * Add this to the bottom of your dark-mode.css file
 * ===================================
 */

/* Deposit Info Modal - Override inline styles */
.dark-theme #depositInfoModal > div[style*="background: white"] {
    background: #1e1e30 !important;
    border: 1px solid #2d2d44 !important;
}

.dark-theme #depositInfoModal h2 {
    color: #e8e8f0 !important;
}

.dark-theme #depositInfoModal p {
    color: #b8b8c8 !important;
}

.dark-theme #depositInfoModal small {
    color: #8a8a9a !important;
}

/* Close button */
.dark-theme #depositInfoModal button[style*="background: #e0e0e0"] {
    background: #252538 !important;
    color: #e8e8f0 !important;
}

.dark-theme #depositInfoModal button[style*="background: #e0e0e0"]:hover {
    background: #1a1a2e !important;
}

/* Claim deposit button - keep it visible */
.dark-theme #depositInfoModal #claimDepositBtn {
    background: rgba(99, 102, 241, 0.9) !important;
    color: white !important;
}

.dark-theme #depositInfoModal #claimDepositBtn:hover {
    background: #6366f1 !important;
}

/* ── Chat widget — dark mode message bubbles ─────────────────── */
body.dark-theme .chat-message.admin .message-bubble,
body.dark-mode  .chat-message.admin .message-bubble {
    background: #1a1e2d !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.07) !important;
}

body.dark-theme .chat-message.user .message-bubble,
body.dark-mode  .chat-message.user .message-bubble {
    background: rgba(var(--primary-rgb), 0.2) !important;
    color: #e2e8f0 !important;
}

/* Chat window background and input area */
body.dark-theme .chat-window,
body.dark-mode  .chat-window {
    background: #12151f !important;
    border-color: rgba(255,255,255,0.07) !important;
}

body.dark-theme .chat-widget-header,
body.dark-mode  .chat-widget-header {
    background: #1a1e2d !important;
    border-color: rgba(255,255,255,0.07) !important;
}

body.dark-theme .chat-input-row,
body.dark-mode  .chat-input-row {
    background: #1a1e2d !important;
    border-color: rgba(255,255,255,0.07) !important;
}

body.dark-theme .chat-textarea,
body.dark-mode  .chat-textarea {
    background: #12151f !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.07) !important;
}

/* =================================
   VERDANT THEME - Pagination dark fix
   Override .vd-pagination background in dark mode
   ================================= */
.dark-theme .vd-pagination {
    background: var(--dark-bg-card) !important;
    border-top: 1px solid var(--dark-border) !important;
}

.dark-theme .vd-pagination .page-btn {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-theme .vd-pagination .page-btn:hover:not(:disabled) {
    background: var(--dark-accent) !important;
    color: white !important;
    border-color: var(--dark-accent) !important;
}

.dark-theme .vd-pagination .vd-page-info {
    color: var(--dark-text-secondary) !important;
}