/* ======================================== GLOBAL DARK MODE OVERRIDES Applies dark theme across ALL pages Uses [data-theme="dark"] attribute on This handles pages that still use hardcoded colors by overriding common patterns globally. ======================================== */ /* ---------------------------------------- PAGE BACKGROUNDS Override all page containers that use #F4F6FA ---------------------------------------- */ [data-theme="dark"] .profile-page, [data-theme="dark"] .activity-log-page, [data-theme="dark"] .verify-page, [data-theme="dark"] .legal-page, [data-theme="dark"] .admin-page { background: var(--gradient-mesh, var(--gradient-page)); } /* ---------------------------------------- CARD / SURFACE BACKGROUNDS Override white cards with dark glass ---------------------------------------- */ [data-theme="dark"] .filter-card, [data-theme="dark"] .state-card:not(.compact), [data-theme="dark"] .profile-card, [data-theme="dark"] .legal-content-card, [data-theme="dark"] .info-card, [data-theme="dark"] .detail-card, [data-theme="dark"] .data-card, [data-theme="dark"] .summary-card { background: var(--glass-bg, rgba(30, 41, 59, 0.72)); border-color: var(--glass-border-subtle, rgba(51, 65, 85, 0.6)); box-shadow: var(--glass-shadow); } /* ---------------------------------------- HEADER TITLES Common .header-title pattern across pages ---------------------------------------- */ [data-theme="dark"] .header-title, [data-theme="dark"] .hero-title, [data-theme="dark"] .page-title { color: var(--color-text-primary); } [data-theme="dark"] .header-subtitle, [data-theme="dark"] .hero-subtitle, [data-theme="dark"] .page-subtitle { color: var(--color-text-secondary); } /* ---------------------------------------- TABLE STYLES Override table backgrounds and borders ---------------------------------------- */ [data-theme="dark"] .table-header { background: var(--color-bg-secondary); border-color: var(--color-border-primary); } [data-theme="dark"] .table-row { border-color: var(--color-border-primary); } [data-theme="dark"] .table-row:hover { background: var(--color-bg-secondary); } [data-theme="dark"] .th-cell { color: var(--color-text-secondary); } [data-theme="dark"] .td-cell { color: var(--color-text-primary); } [data-theme="dark"] .time-value { color: var(--color-text-primary); } [data-theme="dark"] .balance-after { color: var(--color-text-primary); } /* ---------------------------------------- DROPDOWN / FORM CONTROLS ---------------------------------------- */ [data-theme="dark"] .dropdown-trigger, [data-theme="dark"] .modern-dropdown .dropdown-trigger { background: var(--color-bg-primary); border-color: var(--color-border-primary); color: var(--color-text-primary); } [data-theme="dark"] .dropdown-trigger:hover { border-color: var(--color-border-secondary); } [data-theme="dark"] .dropdown-menu { background: var(--color-bg-primary); border-color: var(--color-border-primary); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .dropdown-search { background: var(--color-bg-secondary); border-color: var(--color-border-primary); } [data-theme="dark"] .search-input { color: var(--color-text-primary); } [data-theme="dark"] .dropdown-option { color: var(--color-text-primary); } [data-theme="dark"] .dropdown-option:hover { background: var(--color-bg-secondary); } [data-theme="dark"] .dropdown-option.selected { background: rgba(26, 124, 202, 0.15); color: var(--color-primary); } [data-theme="dark"] .dropdown-value { color: var(--color-text-primary); } [data-theme="dark"] .dropdown-placeholder { color: var(--color-text-muted); } [data-theme="dark"] .dropdown-label { color: var(--color-text-secondary); } /* ---------------------------------------- FILTER TOGGLE BUTTON ---------------------------------------- */ [data-theme="dark"] .filter-toggle { background: var(--color-bg-primary); border-color: var(--color-border-primary); color: var(--color-text-secondary); } [data-theme="dark"] .filter-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } [data-theme="dark"] .filter-toggle::before { border-color: var(--color-border-secondary); } /* ---------------------------------------- CARD CONTENT TEXT ---------------------------------------- */ [data-theme="dark"] .card-title, [data-theme="dark"] .card-name, [data-theme="dark"] .card-heading { color: var(--color-text-primary); } [data-theme="dark"] .card-validity, [data-theme="dark"] .card-subtitle, [data-theme="dark"] .card-description { color: var(--color-text-muted); } [data-theme="dark"] .card-details { border-color: var(--color-border-primary); } [data-theme="dark"] .detail-item { color: var(--color-text-secondary); } /* ---------------------------------------- CARD HEADER BACKGROUNDS (Ticket card headers with status colors) ---------------------------------------- */ [data-theme="dark"] .card-header.header-active { background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%); border-color: rgba(16, 185, 129, 0.15); } [data-theme="dark"] .card-header.header-inactive { background: var(--color-bg-secondary); border-color: var(--color-border-primary); } /* ---------------------------------------- PAGINATION ---------------------------------------- */ [data-theme="dark"] .page-btn { background: var(--color-bg-primary); border-color: var(--color-border-primary); color: var(--color-text-primary); } [data-theme="dark"] .page-btn:hover:not(:disabled):not(.active) { background: var(--color-bg-secondary); border-color: var(--color-border-secondary); } [data-theme="dark"] .page-btn.nav-btn { background: transparent; border: none; color: var(--color-text-secondary); } [data-theme="dark"] .page-btn.nav-btn:hover:not(:disabled) { background: var(--color-bg-secondary); color: var(--color-primary); } [data-theme="dark"] .pagination-info { color: var(--color-text-secondary); } [data-theme="dark"] .page-ellipsis { color: var(--color-text-muted); } /* ---------------------------------------- PAGE SIZE DROPDOWN ---------------------------------------- */ [data-theme="dark"] .page-size-trigger { background: var(--color-bg-primary); border-color: var(--color-border-primary); color: var(--color-text-primary); } [data-theme="dark"] .page-size-menu { background: var(--color-bg-primary); border-color: var(--color-border-primary); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .page-size-option { color: var(--color-text-primary); } [data-theme="dark"] .page-size-option:hover { background: var(--color-bg-secondary); } [data-theme="dark"] .page-size-option.selected { background: rgba(26, 124, 202, 0.15); color: var(--color-primary); } /* ---------------------------------------- ALERTS ---------------------------------------- */ [data-theme="dark"] .alert-message.error { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.25); } [data-theme="dark"] .alert-message.success { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.25); } /* ---------------------------------------- WALLET BALANCE CARD SPECIFICS ---------------------------------------- */ [data-theme="dark"] .balance-amount { color: var(--color-text-primary); } [data-theme="dark"] .balance-label { color: var(--color-text-secondary); } [data-theme="dark"] .balance-currency { color: var(--color-text-secondary); } [data-theme="dark"] .user-id-tag { color: var(--color-text-muted); background: rgba(26, 124, 202, 0.12); } [data-theme="dark"] .transactions-title { color: var(--color-text-primary); } /* ---------------------------------------- SECONDARY ACTION BUTTONS ---------------------------------------- */ [data-theme="dark"] .action-btn.secondary { background: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-border-primary); } [data-theme="dark"] .action-btn.secondary:hover:not(:disabled) { background: var(--color-bg-secondary); border-color: var(--color-border-secondary); } /* ---------------------------------------- MODAL DARK MODE ---------------------------------------- */ [data-theme="dark"] .wallet-modal-input { background: var(--color-bg-secondary); border-color: var(--color-border-primary); color: var(--color-text-primary); } [data-theme="dark"] .wallet-modal-input:hover { border-color: var(--color-border-secondary); background: var(--color-bg-tertiary); } [data-theme="dark"] .wallet-modal-input:focus { background: var(--color-bg-primary); border-color: var(--color-primary); } [data-theme="dark"] .wallet-modal-label { color: var(--color-text-primary); } [data-theme="dark"] .wallet-modal-check-label { color: var(--color-text-primary); } [data-theme="dark"] .wallet-modal-footer { border-color: var(--color-border-primary); } [data-theme="dark"] .wallet-modal-button--secondary { background: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-border-primary); } [data-theme="dark"] .wallet-modal-button--secondary:hover:not(:disabled) { background: var(--color-bg-secondary); border-color: var(--color-border-secondary); } /* ---------------------------------------- FILTER COUNT BADGE ---------------------------------------- */ [data-theme="dark"] .filter-count-badge { background: rgba(26, 124, 202, 0.15); border-color: rgba(26, 124, 202, 0.3); } /* ---------------------------------------- FILTER CARD HEADER TEXT ---------------------------------------- */ [data-theme="dark"] .filter-title { color: var(--color-text-primary); } /* ---------------------------------------- MOBILE TABLE ROWS AS CARDS ---------------------------------------- */ @media (max-width: 767.98px) { [data-theme="dark"] .table-row { background: var(--color-bg-primary); box-shadow: var(--glass-shadow); } [data-theme="dark"] .table-row:hover { background: var(--color-bg-primary); } [data-theme="dark"] .cell-label { color: var(--color-text-secondary); } } /* ---------------------------------------- STATE CARDS ---------------------------------------- */ [data-theme="dark"] .state-card { background: var(--color-bg-primary); } [data-theme="dark"] .state-card.compact { background: transparent; } [data-theme="dark"] .state-title { color: var(--color-text-primary); } [data-theme="dark"] .state-desc, [data-theme="dark"] .state-text { color: var(--color-text-secondary); } [data-theme="dark"] .state-icon { color: var(--color-text-muted); } /* ---------------------------------------- TRANSACTION TYPE BADGES (dark adjustments) ---------------------------------------- */ [data-theme="dark"] .txn-type-badge.type-topup { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.25); } [data-theme="dark"] .txn-type-badge.type-voucher { background: rgba(26, 124, 202, 0.15); border-color: rgba(26, 124, 202, 0.25); } [data-theme="dark"] .txn-type-badge.type-purchase { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.25); } [data-theme="dark"] .txn-type-badge.type-adjustment { background: rgba(107, 114, 128, 0.15); border-color: rgba(107, 114, 128, 0.25); } /* ---------------------------------------- CARD BADGE (Active/Inactive) ---------------------------------------- */ [data-theme="dark"] .card-badge.badge-active { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.25); } [data-theme="dark"] .card-badge.badge-inactive { background: rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.25); } /* ---------------------------------------- PROMO BADGE ---------------------------------------- */ [data-theme="dark"] .promo-badge { background: rgba(180, 83, 9, 0.15); border-color: rgba(252, 211, 77, 0.3); } /* ---------------------------------------- WALLET PAGINATION BORDER ---------------------------------------- */ [data-theme="dark"] .wallet-pagination { border-color: var(--color-border-primary); } /* ---------------------------------------- SEARCH INPUTS GLOBALLY ---------------------------------------- */ [data-theme="dark"] .search-input::placeholder { color: var(--color-text-muted); } /* ---------------------------------------- ADMIN PAGES - Dark mode for admin surfaces Apple 2026 Liquid Glass dark treatment ---------------------------------------- */ [data-theme="dark"] .admin-dashboard, [data-theme="dark"] .admin-content { background: var(--gradient-mesh, var(--gradient-page)); } /* Admin cards & surfaces — dark flat */ [data-theme="dark"] .admin-card, [data-theme="dark"] .admin-stat-card, [data-theme="dark"] .admin-table-card, [data-theme="dark"] .admin-search-card, [data-theme="dark"] .admin-dashboard-card { background: var(--color-bg-primary); box-shadow: var(--shadow-sm); } /* Admin table rows — transparent in dark */ [data-theme="dark"] .admin-table-row { background: transparent; } [data-theme="dark"] .admin-table-row:hover { background: rgba(255, 255, 255, 0.03); box-shadow: none; } [data-theme="dark"] .admin-table-row:not(:last-child) { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); } /* Admin pagination — transparent in dark */ [data-theme="dark"] .admin-pagination { background: transparent; border-top-color: rgba(255, 255, 255, 0.06); } /* Admin inputs — dark surface */ [data-theme="dark"] .admin-form-input, [data-theme="dark"] .admin-input-simple, [data-theme="dark"] .admin-form-select, [data-theme="dark"] .admin-form-textarea { background: var(--color-bg-secondary); } [data-theme="dark"] .admin-form-input:focus, [data-theme="dark"] .admin-input-simple:focus, [data-theme="dark"] .admin-form-select:focus, [data-theme="dark"] .admin-form-textarea:focus { border-color: rgba(255, 255, 255, 0.15); background: var(--color-bg-primary); } /* Admin buttons — dark secondary */ [data-theme="dark"] .admin-btn-secondary { background: transparent; border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .admin-btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); } /* Admin action buttons — transparent in dark */ [data-theme="dark"] .admin-action-btn { background: transparent; } [data-theme="dark"] .admin-action-btn:hover { background: rgba(255, 255, 255, 0.06); } /* Admin modals — dark surface */ [data-theme="dark"] .admin-modal-content { background: var(--color-bg-primary); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06); } /* Admin loading state — transparent */ [data-theme="dark"] .admin-loading { background: transparent; } /* AdminPageHeader filters — dark surface */ [data-theme="dark"] .aph-filters-card { background: var(--color-bg-primary); box-shadow: var(--shadow-sm); } [data-theme="dark"] .aph-results-summary { background: var(--color-bg-secondary); } [data-theme="dark"] .aph-back-link { background: rgba(255, 255, 255, 0.04); } /* Admin page-size select — dark */ [data-theme="dark"] .admin-page-size-select { background: transparent; border-color: rgba(255, 255, 255, 0.08); } /* Admin dropdown menus — dark surface */ [data-theme="dark"] .admin-dropdown-menu { background: var(--color-bg-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06); } /* Mobile action dropdown — dark surface */ [data-theme="dark"] .mobile-action-dropdown { background: var(--color-bg-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06); } /* Dark mode dividers */ [data-theme="dark"] .admin-table-header { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .an-pagination { border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .an-modal-header { border-bottom-color: rgba(255, 255, 255, 0.06); } /* Dark mode focus states */ [data-theme="dark"] .filter-input:focus, [data-theme="dark"] .an-input:focus { border-color: rgba(255, 255, 255, 0.15); background: var(--color-bg-primary); } [data-theme="dark"] .filter-input:focus-visible, [data-theme="dark"] .an-modal-close:focus-visible { outline-color: rgba(255, 255, 255, 0.2); } /* Dark mode pagination active */ [data-theme="dark"] .an-page-num.active, [data-theme="dark"] .admin-pagination-btn.active { background: var(--color-text-primary); color: var(--color-text-inverse); } /* Dark mode hover states */ [data-theme="dark"] .an-page-nav:hover:not(:disabled), [data-theme="dark"] .an-page-num:hover:not(.active) { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .an-modal-close:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .an-recipient-row:hover { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .an-recipient-row:not(:last-child) { border-bottom-color: rgba(255, 255, 255, 0.06); }