/* dark-mode.css - Dark Mode Styles cho toàn bộ website */


/* ===============================
   ANTI-FLICKER CSS - Ngăn chặn flash khi load trang
   =============================== */


/* Ẩn nội dung cho đến khi theme được áp dụng */

body:not(.theme-loaded) {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}


/* Hiển thị nội dung sau khi theme được áp dụng */

body.theme-loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.1s ease-in-out;
}


/* Ensure smooth theme transitions */

html,
body {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}


/* ===============================
   THEME DROPDOWN STYLES
   =============================== */

.theme-dropdown-menu {
    min-width: 200px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.theme-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

.theme-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.theme-option.active {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.theme-check {
    display: none;
    color: #3b82f6;
}

.theme-option.active .theme-check {
    display: inline !important;
}


/* ===============================
   SMOOTH TRANSITIONS
   =============================== */

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ===============================
   GLOBAL Z-INDEX & DROPDOWN FIX
   =============================== */


/* Header should not create stacking context that interferes with dropdowns */

.header-main {
    position: relative;
    z-index: 1000;
}


/* Navbar should not restrict dropdown overflow */

.navbar,
.header-menu {
    overflow: visible !important;
}


/* Dropdown positioning */

.dropdown {
    position: static !important;
}

.dropdown-menu {
    z-index: 9999 !important;
}

.language-switcher {
    position: static !important;
}

.language-switcher .dropdown-menu {
    z-index: 10000 !important;
    position: absolute !important;
}


/* Ensure banner doesn't overlap dropdowns */

.banner-container {
    position: relative;
    z-index: 1;
}


/* ===============================
   DARK MODE - GLOBAL STYLES
   =============================== */


/* Apply to both html and body for immediate effect */

html.dark-mode,
body.dark-mode {
    /* background-color: #1a202c !important;
    color: #e2e8f0 !important; */
}

html.light-mode,
body.light-mode {
    /* background-color: #ffffff !important;
    color: #1a1a1a !important; */
}


/* Body & Container */

body.dark-mode {
    background-color: #1a202c !important;
    /* color: #e2e8f0 !important; */
}

body.light-mode {
    /* background-color: #ffffff !important;
    color: #1a1a1a !important; */
}

body.dark-mode .container,
body.dark-mode .container-fluid {
    background-color: #1a202c;
}


/* ===============================
   CARDS & PANELS
   =============================== */


/* Note: VPS cards được style riêng trong vps-responsive.css */

body.dark-mode .card:not(.vps-card) {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .card-header {
    background-color: #4a5568;
    border-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .card-body {
    background-color: #2d3748;
    color: #e2e8f0;
}

body.dark-mode .card-footer {
    background-color: #4a5568;
    border-color: #4a5568;
    color: #e2e8f0;
}


/* ===============================
   HEADER & NAVIGATION - ENHANCED
   =============================== */

body.dark-mode .header-main {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 50%, #334155 100%) !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(102, 126, 234, 0.1);
    backdrop-filter: blur(10px);
}


/* Logo Enhancement */

body.dark-mode .header-main .navbar-brand,
body.dark-mode .header-main h5 {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
    font-weight: 600;
}


/* Avatar glow effect */

body.dark-mode .header-main img[style*="border-radius: 50%"] {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6), 0 0 40px rgba(102, 126, 234, 0.3);
    border: 2px solid rgba(102, 126, 234, 0.5);
}


/* Navigation Links */

body.dark-mode .nav-link {
    color: #cbd5e0 !important;
    position: relative;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
}

body.dark-mode .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

body.dark-mode .nav-link:hover {
    color: #fff !important;
    background: rgba(102, 126, 234, 0.1);
}

body.dark-mode .nav-link:hover::after {
    width: 80%;
}

body.dark-mode .nav-link.active {
    color: #8ba4ff !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}


/* Balance Display */

body.dark-mode .header-balance,
body.dark-mode [style*="background: #e8f5e9"],
body.dark-mode .badge.bg-light {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
}


/* Buttons Enhancement */

body.dark-mode .btn-success,
body.dark-mode button[style*="background: green"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
}

body.dark-mode .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5), 0 0 30px rgba(16, 185, 129, 0.3);
}

body.dark-mode .btn-danger,
body.dark-mode button[style*="background: red"] {
    background: linear-gradient(135deg, #612020 0%, #9f6161 100% 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.2);
    transition: all 0.3s ease;
}

body.dark-mode .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.3);
}


/* Language Dropdown Button */

body.dark-mode .language-switcher .btn,
body.dark-mode #languageDropdown {
    background: rgba(45, 55, 72, 0.8) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #cbd5e0 !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body.dark-mode .language-switcher .btn:hover,
body.dark-mode #languageDropdown:hover {
    background: rgba(45, 55, 72, 0.9) !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

body.dark-mode .language-switcher .btn.show,
body.dark-mode #languageDropdown.show,
body.dark-mode #languageDropdown[aria-expanded="true"] {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}


/* Language Dropdown Select */

body.dark-mode select[style*="border-radius"],
body.dark-mode .form-select {
    background: rgba(45, 55, 72, 0.8) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #cbd5e0 !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body.dark-mode select:hover,
body.dark-mode .form-select:hover {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}


/* User Section */

body.dark-mode .header-user {
    color: #e2e8f0;
}


/* Badge +30% */

body.dark-mode .badge.bg-warning,
body.dark-mode span[style*="background: orange"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
    font-weight: 700;
}


/* ===============================
   DROPDOWNS - ENHANCED
   =============================== */

body.dark-mode .dropdown-menu {
    background: linear-gradient(135deg, #2d3748 0%, #334155 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    z-index: 9999 !important;
    overflow: hidden;
}

body.dark-mode .dropdown-item {
    color: #e2e8f0;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 4px 8px;
    padding: 0.5rem 1rem;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    color: #fff;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

body.dark-mode .dropdown-item.active,
body.dark-mode .dropdown-item[data-theme].active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
    font-weight: 600;
}

body.dark-mode .dropdown-item i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}


/* ===============================
   FORMS & INPUTS
   =============================== */

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #4a5568;
    border-color: #667eea;
    color: #e2e8f0;
}

body.dark-mode .form-control::placeholder {
    color: #a0aec0;
}

body.dark-mode .form-label {
    color: #cbd5e0;
}

body.dark-mode .input-group-text {
    background-color: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
}


/* ===============================
   TABLES
   =============================== */

body.dark-mode .table {
    color: #e2e8f0;
}

body.dark-mode .table thead th {
    background-color: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}

body.dark-mode .table tbody tr {
    border-color: #4a5568;
}

body.dark-mode .table tbody tr:hover {
    background-color: #374151;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #2d3748;
}

body.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: #374151;
}


/* ===============================
   MODALS - SERVICE REGISTRATION POPUPS
   =============================== */

body.dark-mode .modal-content {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

body.dark-mode .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
    color: #fff !important;
}

body.dark-mode .modal-title {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .modal-body {
    background: #2d3748;
    color: #e2e8f0;
}

body.dark-mode .modal-footer {
    background: rgba(45, 55, 72, 0.8);
    border-top: 1px solid rgba(102, 126, 234, 0.3);
}

body.dark-mode .btn-close {
    filter: invert(1);
    opacity: 1;
}


/* OS & Billing Selection Cards */

body.dark-mode .os-card,
body.dark-mode .billing-card {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    color: #e2e8f0;
}

body.dark-mode .os-card:hover,
body.dark-mode .billing-card:hover {
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}

body.dark-mode .os-card.selected,
body.dark-mode .billing-card.selected {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 0 0 30px rgba(102, 126, 234, 0.3);
    color: #fff;
}

body.dark-mode .os-icon,
body.dark-mode .billing-icon {
    color: #9ca3af;
}

body.dark-mode .os-card.selected .os-icon,
body.dark-mode .billing-card.selected .billing-icon {
    color: #fbbf24;
}

body.dark-mode .os-name,
body.dark-mode .billing-name {
    color: #e2e8f0;
}

body.dark-mode .os-card.selected .os-name,
body.dark-mode .billing-card.selected .billing-name {
    color: #fff;
    font-weight: 700;
}

body.dark-mode .billing-price {
    color: #cbd5e0;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.6) 0%, rgba(75, 85, 99, 0.6) 100%);
}

body.dark-mode .billing-card:hover .billing-price {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
}

body.dark-mode .billing-card.selected .billing-price {
    color: #fbbf24;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}


/* Discount Badge */

body.dark-mode .discount-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

body.dark-mode .billing-card.selected .discount-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.5);
}


/* Summary Section in Modal */

body.dark-mode .summary-section,
body.dark-mode .price-summary {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.5) 0%, rgba(75, 85, 99, 0.5) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 15px;
    padding: 20px;
}

body.dark-mode .summary-item {
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

body.dark-mode .summary-item:last-child {
    border-bottom: none;
}

body.dark-mode .summary-label {
    color: #9ca3af;
}

body.dark-mode .summary-value {
    color: #e2e8f0;
    font-weight: 600;
}


/* Price Display in Summary */

body.dark-mode .price-display,
body.dark-mode .total-price {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: #6ee7b7;
}

body.dark-mode .old-price {
    color: #ef4444;
    text-decoration: line-through;
}

body.dark-mode .new-price {
    color: #10b981;
    text-shadow: 0 2px 10px rgba(16, 185, 129, 0.5);
}


/* ===============================
   ALERTS
   =============================== */

body.dark-mode .alert {
    border-color: #4a5568;
}

body.dark-mode .alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}


/* Success Message in Modal */

body.dark-mode .success-message,
body.dark-mode .alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

body.dark-mode .success-message i,
body.dark-mode .alert-success i {
    color: #10b981;
}


/* Error/Warning Messages */

body.dark-mode .error-message,
body.dark-mode .alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

body.dark-mode .alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}


/* ===============================
   BADGES
   =============================== */

body.dark-mode .badge {
    filter: brightness(0.8);
}


/* ===============================
   TOAST / TOASTS
   =============================== */

body.dark-mode .toast {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .toast-header {
    background-color: #4a5568;
    border-bottom-color: #718096;
    color: #e2e8f0;
}


/* ===============================
   SKELETON LOADING
   =============================== */

body.dark-mode .skeleton {
    background: linear-gradient(90deg, #4a5568 25%, #718096 50%, #4a5568 75%);
    background-size: 200% 100%;
}

body.dark-mode .skeleton-card {
    background: #2d3748;
    border-color: #4a5568;
}

body.dark-mode .skeleton-table {
    background: #2d3748;
    border-color: #4a5568;
}


/* ===============================
   FOOTER
   =============================== */

body.dark-mode .footer-modern {
    background-color: #2d3748;
    color: #e2e8f0;
}

body.dark-mode .footer-modern a {
    color: #cbd5e0;
}

body.dark-mode .footer-modern a:hover {
    color: #fff;
}


/* ===============================
   BUTTONS (preserve original colors)
   =============================== */


/* Giữ nguyên màu button primary, success, danger, etc */

body.dark-mode .btn-outline-secondary {
    color: #cbd5e0;
    border-color: #718096;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: #4a5568;
    color: #fff;
}


/* ===============================
   CUSTOM COMPONENTS
   =============================== */


/* Banner */

body.dark-mode .banner-container {
    background-color: #2d3748;
    border-color: #4a5568;
}


/* ===============================
   OVERVIEW PAGE - KEYS SECTION
   =============================== */

body.dark-mode .keys-container {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(102, 126, 234, 0.1);
}

body.dark-mode .keys-content {
    background: #2d3748;
}

body.dark-mode .key-card {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .key-card:hover {
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}

body.dark-mode .key-product {
    color: #e2e8f0;
}

body.dark-mode .key-value {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #cbd5e0;
}

body.dark-mode .key-value:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(102, 126, 234, 0.5);
}

body.dark-mode .key-date-item {
    color: #9ca3af;
}

body.dark-mode .key-date-value {
    color: #cbd5e0;
}

body.dark-mode .key-status.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

body.dark-mode .key-status.expired {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}


/* Empty State */

body.dark-mode .keys-empty,
body.dark-mode .empty-state {
    background: transparent;
}

body.dark-mode .empty-state i {
    color: #6b7280;
}

body.dark-mode .empty-state h5 {
    color: #9ca3af;
}

body.dark-mode .empty-state p {
    color: #6b7280;
}


/* Refund Stats Cards */

body.dark-mode .stats-card,
body.dark-mode .stat-card,
body.dark-mode .refund-stat-card {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stat-icon {
    background: rgba(102, 126, 234, 0.2);
    color: #8ba4ff;
}

body.dark-mode .stat-value {
    color: #e2e8f0;
}

body.dark-mode .stat-label {
    color: #9ca3af;
}


/* Transaction History */

body.dark-mode .transaction-card,
body.dark-mode .history-card,
body.dark-mode .refund-history,
body.dark-mode .transaction-history,
body.dark-mode [class*="history"],
body.dark-mode .history-section {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}


/* Ensure card bodies have dark background */

body.dark-mode .card-body {
    background: transparent !important;
}


/* Section backgrounds */

body.dark-mode section,
body.dark-mode .section {
    background: transparent;
}


/* Container backgrounds for history sections */

body.dark-mode .container-fluid,
body.dark-mode .container {
    background: transparent;
}


/* Type Badges */

body.dark-mode .badge.bg-success,
body.dark-mode .type-badge.deposit,
body.dark-mode td .badge-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

body.dark-mode .badge.bg-danger,
body.dark-mode .type-badge.withdraw,
body.dark-mode td .badge-danger {
    background: linear-gradient(135deg, #612020 0%, #9f6161 100% 100%) !important;
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

body.dark-mode .badge.bg-info,
body.dark-mode td .badge-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}


/* Summary/Info Boxes */

body.dark-mode .info-box,
body.dark-mode .summary-box,
body.dark-mode .stats-box,
body.dark-mode [class*="info-"] {
    /* background: linear-gradient(135deg, #374151 0%, #4b5563 100%); */
    /* border: 1px solid rgba(102, 126, 234, 0.3); */
    color: #e2e8f0;
}

body.dark-mode .stat-number,
body.dark-mode .summary-number,
body.dark-mode .info-value {
    color: #8ba4ff !important;
}


/* Card Sections */

body.dark-mode .card-section,
body.dark-mode .info-section {
    background: transparent;
    border-color: rgba(102, 126, 234, 0.3);
}


/* ===========================
   REFUND SECTION - OVERVIEW
   =========================== */


/* Refund Amount Cards with bg-light */

body.dark-mode .card.bg-light,
body.dark-mode .bg-light.card {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .card.bg-light:hover,
body.dark-mode .bg-light.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5) !important;
}

body.dark-mode .card.bg-light .card-body,
body.dark-mode .bg-light.card .card-body {
    background: transparent !important;
}

body.dark-mode .card.bg-light .card-title,
body.dark-mode .bg-light.card .card-title {
    color: #94a3b8 !important;
}

body.dark-mode .card.bg-light .text-muted,
body.dark-mode .bg-light.card .text-muted {
    color: #94a3b8 !important;
}

body.dark-mode .card.bg-light .text-primary,
body.dark-mode .bg-light.card .text-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.dark-mode .card.bg-light .text-success,
body.dark-mode .bg-light.card .text-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.dark-mode .card.bg-light .text-warning,
body.dark-mode .bg-light.card .text-warning {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.dark-mode .card.bg-light .text-info,
body.dark-mode .bg-light.card .text-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.dark-mode .card.bg-light .text-danger,
body.dark-mode .bg-light.card .text-danger {
    background: linear-gradient(135deg, #612020 0%, #9f6161 100% 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}


/* Refund Stats Icon Boxes */

body.dark-mode .bg-primary.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body.dark-mode .bg-warning.bg-gradient {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4) !important;
}

body.dark-mode .bg-success.bg-gradient {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4) !important;
}

body.dark-mode .bg-danger.bg-gradient {
    background: linear-gradient(135deg, #612020 0%, #9f6161 100% 100%) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
}

body.dark-mode .bg-info.bg-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}


/* Table Light thead */

body.dark-mode .table-light,
body.dark-mode thead.table-light,
body.dark-mode thead.table-light th {
    background: linear-gradient(135deg, #4a5568 0%, #3d4a5c 100%) !important;
    color: #e2e8f0 !important;
    border-color: #718096 !important;
}


/* Ensure all table rows have dark background - FORCE OVERRIDE */


/* Commented out to prevent white backgrounds in tables */

body.dark-mode table tbody tr td,
body.dark-mode .table tbody tr td,
body.dark-mode tbody tr td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

body.dark-mode table tbody tr:hover,
body.dark-mode .table tbody tr:hover,
body.dark-mode tbody tr:hover {
    background-color: #3d4a5c !important;
}

body.dark-mode table tbody tr:hover td,
body.dark-mode .table tbody tr:hover td,
body.dark-mode tbody tr:hover td {
    background-color: transparent !important;
}


/* Card Headers with bg-info */

body.dark-mode .card-header.bg-info,
body.dark-mode .bg-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

body.dark-mode .card-header.bg-info i,
body.dark-mode .bg-info i {
    color: #ffffff !important;
}


/* Border-0 cards */

body.dark-mode .card.border-0 {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}


/* Text colors in tables */

body.dark-mode tbody tr td {
    color: #e2e8f0 !important;
}


/* Pagination */

body.dark-mode .pagination .page-link {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #8ba4ff !important;
}

body.dark-mode .pagination .page-link:hover {
    background-color: #374151 !important;
    border-color: #667eea !important;
    color: #b89fff !important;
}

body.dark-mode .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
    color: #ffffff !important;
}

body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: #1e293b !important;
    border-color: #374151 !important;
    color: #4a5568 !important;
}


/* Override any white backgrounds in overview */

body.dark-mode #refund-section .card,
body.dark-mode #transactions-section .card,
body.dark-mode #recent-refunds .card,
body.dark-mode .real-data .card {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

body.dark-mode #refund-section .card-body,
body.dark-mode #transactions-section .card-body,
body.dark-mode #recent-refunds .card-body,
body.dark-mode .real-data .card-body {
    background: transparent !important;
}


/* Table responsive wrapper */

body.dark-mode .table-responsive {
    background: transparent !important;
}


/* Code elements in tables */

body.dark-mode tbody tr td code {
    background-color: rgba(102, 126, 234, 0.2) !important;
    color: #8ba4ff !important;
    border: 1px solid rgba(102, 126, 234, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}


/* ===========================
   LOADING OVERLAY & SKELETON
   =========================== */


/* Loading Overlay */

body.dark-mode .loading-overlay {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(102, 126, 234, 0.4) !important;
}

body.dark-mode .loading-spinner {
    border: 4px solid #2d3748 !important;
    border-top: 4px solid #667eea !important;
}

body.dark-mode .loading-text {
    color: #e2e8f0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .loading-subtext {
    color: #94a3b8 !important;
}


/* Skeleton Loading */

body.dark-mode .skeleton {
    background: linear-gradient(90deg, #2d3748 25%, #374151 50%, #2d3748 75%) !important;
    background-size: 200% 100%;
}

body.dark-mode .skeleton-card {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .skeleton-plan-card {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .skeleton-table {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

body.dark-mode .skeleton-container {
    background: transparent !important;
}


/* ===========================
   FAQ SECTION - FOOTER
   =========================== */


/* FAQ Container */

body.dark-mode .faq-container {
    background: transparent;
}


/* FAQ Header */

body.dark-mode .faq-header h3 {
    color: #e2e8f0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* FAQ Search */

body.dark-mode .faq-search {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .faq-search::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .faq-search:focus {
    outline: none;
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}


/* FAQ Items */

body.dark-mode .faq-item {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .faq-item:hover {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3) !important;
}

body.dark-mode .faq-item.open {
    background: linear-gradient(135deg, #2d3748 0%, #374151 100%) !important;
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4) !important;
}


/* FAQ Question */

body.dark-mode .faq-question {
    color: #e2e8f0 !important;
}

body.dark-mode .faq-question:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border-radius: 10px 10px 0 0;
}


/* FAQ Icon */

body.dark-mode .faq-icon {
    color: #667eea !important;
}


/* FAQ Answer */

body.dark-mode .faq-answer {
    color: #cbd5e1 !important;
}

body.dark-mode .faq-answer a {
    color: #8ba4ff !important;
}

body.dark-mode .faq-answer a:hover {
    color: #b89fff !important;
}

body.dark-mode .faq-answer strong {
    color: #e2e8f0 !important;
}

body.dark-mode .faq-answer em {
    color: #94a3b8 !important;
}


/* ===========================
   ADMIN MESSAGES MODAL
   =========================== */


/* Admin Messages Content */

body.dark-mode .admin-messages-content {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(102, 126, 234, 0.3) !important;
}


/* Slides Container */

body.dark-mode .admin-messages-slides-container {
    background: transparent !important;
}


/* Individual Slide */

body.dark-mode .admin-messages-slide {
    background: transparent !important;
}


/* Slide Title */

body.dark-mode .admin-messages-slide-title {
    color: #e2e8f0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Slide Body */

body.dark-mode .admin-messages-slide-body {
    color: #cbd5e1 !important;
}


/* Slide Meta */

body.dark-mode .admin-messages-slide-meta {
    border-top-color: rgba(102, 126, 234, 0.3) !important;
}


/* Priority Badges */

body.dark-mode .admin-messages-slide-priority.urgent {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
}

body.dark-mode .admin-messages-slide-priority.high {
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%) !important;
    box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4) !important;
}

body.dark-mode .admin-messages-slide-priority.medium {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode .admin-messages-slide-priority.low {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.4) !important;
}


/* Time */

body.dark-mode .admin-messages-slide-time {
    color: #94a3b8 !important;
}


/* Navigation Container */

body.dark-mode .admin-messages-navigation {
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}


/* Navigation Buttons */

body.dark-mode .admin-messages-nav-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body.dark-mode .admin-messages-nav-btn:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a3a92 100%) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

body.dark-mode .admin-messages-nav-btn:disabled {
    background: #374151 !important;
    box-shadow: none !important;
}


/* Dots */

body.dark-mode .admin-messages-dot {
    background: #4a5568 !important;
}

body.dark-mode .admin-messages-dot.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.6) !important;
}


/* Footer */

body.dark-mode .admin-messages-footer {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border-top-color: rgba(102, 126, 234, 0.3) !important;
}


/* Dismiss Button */

body.dark-mode .admin-messages-dismiss-btn {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.4) !important;
}

body.dark-mode .admin-messages-dismiss-btn:hover {
    background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
    box-shadow: 0 6px 20px rgba(100, 116, 139, 0.6) !important;
}


/* ===========================
   PROFILE POPUP MODAL
   =========================== */


/* Profile Popup Container */

body.dark-mode .profile-popup-container {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(102, 126, 234, 0.3) !important;
}


/* Balance Cards */

body.dark-mode .profile-balance-card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .profile-balance-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}


/* Main balance - Green gradient */

body.dark-mode .profile-balance-card:first-child {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
}


/* Refund balance - Orange gradient */

body.dark-mode .profile-balance-card.refund {
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%) !important;
}


/* Pending balance - Blue gradient */

body.dark-mode .profile-balance-card.pending {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}


/* Section Title */

body.dark-mode .profile-section-title {
    color: #e2e8f0 !important;
    border-bottom-color: rgba(102, 126, 234, 0.3) !important;
}

body.dark-mode .profile-section-title i {
    color: #667eea !important;
}


/* Info Labels */

body.dark-mode .profile-info-label {
    color: #94a3b8 !important;
}


/* Info Values */

body.dark-mode .profile-info-value {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    color: #e2e8f0 !important;
}

body.dark-mode .profile-info-value a {
    color: #8ba4ff !important;
}

body.dark-mode .profile-info-value a:hover {
    color: #b89fff !important;
}


/* Edit Inputs */

body.dark-mode .profile-edit-input {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    color: #e2e8f0 !important;
}

body.dark-mode .profile-edit-input:focus {
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

body.dark-mode .profile-edit-input[readonly] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    opacity: 0.7 !important;
}


/* Action Buttons */

body.dark-mode .profile-action-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body.dark-mode .profile-action-btn:hover {
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5) !important;
}

body.dark-mode .profile-action-btn.secondary {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.4) !important;
}

body.dark-mode .profile-action-btn.secondary:hover {
    box-shadow: 0 8px 30px rgba(100, 116, 139, 0.5) !important;
}


/* Success/Error Messages */

body.dark-mode .profile-success {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
    border-left-color: #10b981 !important;
    color: #d1fae5 !important;
}

body.dark-mode .profile-error {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
    border-left-color: #ef4444 !important;
    color: #fecaca !important;
}


/* Dashboard Stats */

body.dark-mode .dashboard-card {
    background-color: #2d3748;
    border-color: #4a5568;
}


/* Filter Cards */

body.dark-mode .filter-card {
    background-color: #2d3748;
    border-color: #4a5568;
}


/* ===============================
   TEXT COLORS
   =============================== */

body.dark-mode .text-muted {
    color: #a0aec0 !important;
}

body.dark-mode .text-dark {
    color: #e2e8f0 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e2e8f0;
}


/* ===============================
   BORDER COLORS
   =============================== */

body.dark-mode .border {
    border-color: #4a5568 !important;
}

body.dark-mode hr {
    border-color: #4a5568;
}


/* ===============================
   MOBILE MENU
   =============================== */

body.dark-mode .mobile-menu-overlay {
    background-color: rgba(26, 32, 44, 0.95);
}

body.dark-mode .mobile-menu-content {
    background-color: #2d3748;
}


/* ===============================
   THEME SWITCHER BUTTON ACTIVE STATE
   =============================== */

body.dark-mode .dropdown-item.active,
body.dark-mode [data-theme].active {
    background-color: #667eea;
    color: #fff;
}

.theme-btn-mobile {
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.3s ease;
}

.theme-btn-mobile:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.theme-btn-mobile.active {
    background-color: #667eea !important;
    color: #fff !important;
    border-color: #667eea !important;
}

.mobile-theme-switcher {
    padding: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.theme-options-mobile {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.theme-switcher {
    margin-left: 10px;
    font-size: 1.2rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
}

.theme-switcher:hover {
    transform: translateY(-2px);
    background: rgba(102, 126, 234, 0.2);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.theme-icon {
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.theme-icon:hover {
    transform: rotate(20deg);
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.6));
}


/* Dark mode enhancements for theme switcher */

body.dark-mode .theme-switcher {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body.dark-mode .theme-switcher:hover {
    background: rgba(102, 126, 234, 0.25);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

body.dark-mode .mobile-theme-switcher {
    border-top-color: #4a5568;
    background: rgba(45, 55, 72, 0.3);
}

body.dark-mode .mobile-theme-switcher button {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

body.dark-mode .mobile-theme-switcher button:hover {
    background: rgba(102, 126, 234, 0.25);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

body.dark-mode .mobile-theme-switcher button.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
}


/* ===============================
   OVERRIDE MEDIA QUERIES - Ngăn chặn flash từ system preference
   =============================== */


/* Override media queries khi đã có theme class */

body.dark-mode,
body.light-mode,
body.theme-loaded {
    /* Override any media query styles */
}


/* Override all body:not(.light-mode):not(.theme-loaded) rules when theme is loaded */

body.dark-mode *,
body.light-mode *,
body.theme-loaded * {
    /* Reset any inherited styles from media queries */
}


/* Light mode styles - có priority cao hơn media queries */

body.light-mode {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

body.light-mode .container,
body.light-mode .container-fluid {
    /* background-color: #ffffff !important;
    color: #1a1a1a !important; */
}


/* ===============================
   AUTO MODE - Default Dark Mode
   Áp dụng dark mode mặc định cho người dùng mới
   CHỈ áp dụng khi chưa có theme class được set
   =============================== */


/* Default to dark mode for new users */

body:not(.light-mode):not(.dark-mode):not(.theme-loaded) {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
}

body:not(.light-mode):not(.dark-mode):not(.theme-loaded) .container,
body:not(.light-mode):not(.dark-mode):not(.theme-loaded) .container-fluid {
    background-color: #1a202c;
}


/* Cards (trừ VPS cards - xem vps-responsive.css) */

body:not(.light-mode):not(.dark-mode):not(.theme-loaded) .card:not(.vps-card) {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

body:not(.light-mode):not(.dark-mode):not(.theme-loaded) .card-header {
    background-color: #4a5568;
    border-color: #4a5568;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .card-body {
    background-color: #2d3748;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .card-footer {
    background-color: #4a5568;
    border-color: #4a5568;
    color: #e2e8f0;
}


/* Header & Navigation - ENHANCED */

body:not(.light-mode):not(.theme-loaded) .header-main {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 50%, #334155 100%) !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(102, 126, 234, 0.1);
    backdrop-filter: blur(10px);
}


/* Logo Enhancement */

body:not(.light-mode):not(.theme-loaded) .header-main .navbar-brand,
body:not(.light-mode):not(.theme-loaded) .header-main h5 {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
    font-weight: 600;
}


/* Avatar glow effect */

body:not(.light-mode):not(.theme-loaded) .header-main img[style*="border-radius: 50%"] {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6), 0 0 40px rgba(102, 126, 234, 0.3);
    border: 2px solid rgba(102, 126, 234, 0.5);
}


/* Navigation Links */

body:not(.light-mode):not(.theme-loaded) .nav-link {
    color: #cbd5e0 !important;
    position: relative;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
}

body:not(.light-mode):not(.theme-loaded) .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

body:not(.light-mode):not(.theme-loaded) .nav-link:hover {
    color: #fff !important;
    background: rgba(102, 126, 234, 0.1);
}

body:not(.light-mode):not(.theme-loaded) .nav-link:hover::after {
    width: 80%;
}

body:not(.light-mode):not(.theme-loaded) .nav-link.active {
    color: #8ba4ff !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}


/* Balance Display */

body:not(.light-mode):not(.theme-loaded) .header-balance,
body:not(.light-mode):not(.theme-loaded) [style*="background: #e8f5e9"],
body:not(.light-mode):not(.theme-loaded) .badge.bg-light {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
}


/* Buttons Enhancement */

body:not(.light-mode):not(.theme-loaded) .btn-success,
body:not(.light-mode):not(.theme-loaded) button[style*="background: green"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
}

body:not(.light-mode):not(.theme-loaded) .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5), 0 0 30px rgba(16, 185, 129, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .btn-danger,
body:not(.light-mode):not(.theme-loaded) button[style*="background: red"] {
    background: linear-gradient(135deg, #612020 0%, #9f6161 100% 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.2);
    transition: all 0.3s ease;
}

body:not(.light-mode):not(.theme-loaded) .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.3);
}


/* Language Dropdown Button */

body:not(.light-mode):not(.theme-loaded) .language-switcher .btn,
body:not(.light-mode):not(.theme-loaded) #languageDropdown {
    background: rgba(45, 55, 72, 0.8) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #cbd5e0 !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body:not(.light-mode):not(.theme-loaded) .language-switcher .btn:hover,
body:not(.light-mode):not(.theme-loaded) #languageDropdown:hover {
    background: rgba(45, 55, 72, 0.9) !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .language-switcher .btn.show,
body:not(.light-mode):not(.theme-loaded) #languageDropdown.show,
body:not(.light-mode):not(.theme-loaded) #languageDropdown[aria-expanded="true"] {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}


/* Language Dropdown Select */

body:not(.light-mode):not(.theme-loaded) select[style*="border-radius"],
body:not(.light-mode):not(.theme-loaded) .form-select {
    background: rgba(45, 55, 72, 0.8) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #cbd5e0 !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body:not(.light-mode):not(.theme-loaded) select:hover,
body:not(.light-mode):not(.theme-loaded) .form-select:hover {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}


/* User Section */

body:not(.light-mode):not(.theme-loaded) .header-user {
    color: #e2e8f0;
}


/* Badge +30% */

body:not(.light-mode):not(.theme-loaded) .badge.bg-warning,
body:not(.light-mode):not(.theme-loaded) span[style*="background: orange"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
    font-weight: 700;
}


/* Dropdowns - ENHANCED */

body:not(.light-mode):not(.theme-loaded) .dropdown-menu {
    background: linear-gradient(135deg, #2d3748 0%, #334155 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    z-index: 9999 !important;
    overflow: hidden;
}

body:not(.light-mode):not(.theme-loaded) .dropdown-item {
    color: #e2e8f0;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 4px 8px;
    padding: 0.5rem 1rem;
}

body:not(.light-mode):not(.theme-loaded) .dropdown-item:hover,
body:not(.light-mode):not(.theme-loaded) .dropdown-item:focus {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    color: #fff;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .dropdown-item.active,
body:not(.light-mode):not(.theme-loaded) .dropdown-item[data-theme].active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
    font-weight: 600;
}

body:not(.light-mode):not(.theme-loaded) .dropdown-item i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}


/* Forms */

body:not(.light-mode):not(.theme-loaded) .form-control,
body:not(.light-mode):not(.theme-loaded) .form-select {
    background-color: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .form-control:focus,
body:not(.light-mode):not(.theme-loaded) .form-select:focus {
    background-color: #4a5568;
    border-color: #667eea;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .form-control::placeholder {
    color: #a0aec0;
}

body:not(.light-mode):not(.theme-loaded) .form-label {
    color: #cbd5e0;
}

body:not(.light-mode):not(.theme-loaded) .input-group-text {
    background-color: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
}


/* Tables */

body:not(.light-mode):not(.theme-loaded) .table {
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .table thead th {
    background-color: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}

body:not(.light-mode):not(.theme-loaded) .table tbody tr {
    border-color: #4a5568;
}

body:not(.light-mode):not(.theme-loaded) .table tbody tr:hover {
    background-color: #374151;
}

body:not(.light-mode):not(.theme-loaded) .table-striped tbody tr:nth-of-type(odd) {
    background-color: #2d3748;
}

body:not(.light-mode):not(.theme-loaded) .table-striped tbody tr:nth-of-type(even) {
    background-color: #374151;
}


/* Modals - Service Registration Popups */

body:not(.light-mode):not(.theme-loaded) .modal-content {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(102, 126, 234, 0.2);
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
    color: #fff !important;
}

body:not(.light-mode):not(.theme-loaded) .modal-title {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .modal-body {
    background: #2d3748;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .modal-footer {
    background: rgba(45, 55, 72, 0.8);
    border-top: 1px solid rgba(102, 126, 234, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .btn-close {
    filter: invert(1);
    opacity: 1;
}


/* OS & Billing Cards */

body:not(.light-mode):not(.theme-loaded) .os-card,
body:not(.light-mode):not(.theme-loaded) .billing-card {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .os-card:hover,
body:not(.light-mode):not(.theme-loaded) .billing-card:hover {
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}

body:not(.light-mode):not(.theme-loaded) .os-card.selected,
body:not(.light-mode):not(.theme-loaded) .billing-card.selected {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 0 0 30px rgba(102, 126, 234, 0.3);
    color: #fff;
}

body:not(.light-mode):not(.theme-loaded) .os-icon,
body:not(.light-mode):not(.theme-loaded) .billing-icon {
    color: #9ca3af;
}

body:not(.light-mode):not(.theme-loaded) .os-card.selected .os-icon,
body:not(.light-mode):not(.theme-loaded) .billing-card.selected .billing-icon {
    color: #fbbf24;
}

body:not(.light-mode):not(.theme-loaded) .os-name,
body:not(.light-mode):not(.theme-loaded) .billing-name {
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .os-card.selected .os-name,
body:not(.light-mode):not(.theme-loaded) .billing-card.selected .billing-name {
    color: #fff;
    font-weight: 700;
}

body:not(.light-mode):not(.theme-loaded) .billing-price {
    color: #cbd5e0;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.6) 0%, rgba(75, 85, 99, 0.6) 100%);
}

body:not(.light-mode):not(.theme-loaded) .billing-card:hover .billing-price {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
}

body:not(.light-mode):not(.theme-loaded) .billing-card.selected .billing-price {
    color: #fbbf24;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .discount-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

body:not(.light-mode):not(.theme-loaded) .billing-card.selected .discount-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.5);
}


/* Summary Sections */

body:not(.light-mode):not(.theme-loaded) .summary-section,
body:not(.light-mode):not(.theme-loaded) .price-summary {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.5) 0%, rgba(75, 85, 99, 0.5) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 15px;
    padding: 20px;
}

body:not(.light-mode):not(.theme-loaded) .summary-label {
    color: #9ca3af;
}

body:not(.light-mode):not(.theme-loaded) .summary-value {
    color: #e2e8f0;
    font-weight: 600;
}

body:not(.light-mode):not(.theme-loaded) .price-display,
body:not(.light-mode):not(.theme-loaded) .total-price {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: #6ee7b7;
}

body:not(.light-mode):not(.theme-loaded) .old-price {
    color: #ef4444;
}

body:not(.light-mode):not(.theme-loaded) .new-price {
    color: #10b981;
    text-shadow: 0 2px 10px rgba(16, 185, 129, 0.5);
}


/* Alerts */

body:not(.light-mode):not(.theme-loaded) .alert-info {
    background-color: #2b6cb0;
    border-color: #3182ce;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .alert-success {
    background-color: #276749;
    border-color: #38a169;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .alert-warning {
    background-color: #975a16;
    border-color: #d69e2e;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .alert-danger {
    background-color: #9b2c2c;
    border-color: #e53e3e;
    color: #e2e8f0;
}


/* Skeleton */

body:not(.light-mode):not(.theme-loaded) .skeleton {
    background: linear-gradient(90deg, #4a5568 25%, #718096 50%, #4a5568 75%);
    background-size: 200% 100%;
}

body:not(.light-mode):not(.theme-loaded) .skeleton-card {
    background: #2d3748;
    border-color: #4a5568;
}

body:not(.light-mode):not(.theme-loaded) .skeleton-table {
    background: #2d3748;
    border-color: #4a5568;
}


/* Text colors */

body:not(.light-mode):not(.theme-loaded) .text-muted {
    color: #a0aec0 !important;
}

body:not(.light-mode):not(.theme-loaded) .text-dark {
    color: #e2e8f0 !important;
}

body:not(.light-mode):not(.theme-loaded) h1,
body:not(.light-mode):not(.theme-loaded) h2,
body:not(.light-mode):not(.theme-loaded) h3,
body:not(.light-mode):not(.theme-loaded) h4,
body:not(.light-mode):not(.theme-loaded) h5,
body:not(.light-mode):not(.theme-loaded) h6 {
    color: #e2e8f0;
}


/* Borders */

body:not(.light-mode):not(.theme-loaded) .border {
    border-color: #4a5568 !important;
}

body:not(.light-mode):not(.theme-loaded) hr {
    border-color: #4a5568;
}


/* Mobile Menu */

body:not(.light-mode):not(.theme-loaded) .mobile-menu-overlay {
    background-color: rgba(26, 32, 44, 0.95);
}

body:not(.light-mode):not(.theme-loaded) .mobile-menu-content {
    background-color: #2d3748;
}


/* Footer */

body:not(.light-mode):not(.theme-loaded) .footer-modern {
    background-color: #2d3748;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .footer-modern a {
    color: #cbd5e0;
}

body:not(.light-mode):not(.theme-loaded) .footer-modern a:hover {
    color: #fff;
}


/* Custom Components */

body:not(.light-mode):not(.theme-loaded) .banner-container {
    background-color: #2d3748;
    border-color: #4a5568;
}


/* Overview - Keys Section */

body:not(.light-mode):not(.theme-loaded) .keys-container {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(102, 126, 234, 0.1);
}

body:not(.light-mode):not(.theme-loaded) .keys-content {
    background: #2d3748;
}

body:not(.light-mode):not(.theme-loaded) .key-card {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .key-card:hover {
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}

body:not(.light-mode):not(.theme-loaded) .key-product {
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .key-value {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #cbd5e0;
}

body:not(.light-mode):not(.theme-loaded) .key-value:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(102, 126, 234, 0.5);
}

body:not(.light-mode):not(.theme-loaded) .key-date-item {
    color: #9ca3af;
}

body:not(.light-mode):not(.theme-loaded) .key-date-value {
    color: #cbd5e0;
}

body:not(.light-mode):not(.theme-loaded) .key-status.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

body:not(.light-mode):not(.theme-loaded) .key-status.expired {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

body:not(.light-mode):not(.theme-loaded) .keys-empty,
body:not(.light-mode):not(.theme-loaded) .empty-state {
    background: transparent;
}

body:not(.light-mode):not(.theme-loaded) .empty-state i {
    color: #6b7280;
}

body:not(.light-mode):not(.theme-loaded) .empty-state h5 {
    color: #9ca3af;
}

body:not(.light-mode):not(.theme-loaded) .empty-state p {
    color: #6b7280;
}


/* Refund Stats */

body:not(.light-mode):not(.theme-loaded) .stats-card,
body:not(.light-mode):not(.theme-loaded) .stat-card,
body:not(.light-mode):not(.theme-loaded) .refund-stat-card {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .stat-icon {
    background: rgba(102, 126, 234, 0.2);
    color: #8ba4ff;
}

body:not(.light-mode):not(.theme-loaded) .stat-value {
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .stat-label {
    color: #9ca3af;
}


/* Transaction History */

body:not(.light-mode):not(.theme-loaded) .transaction-card,
body:not(.light-mode):not(.theme-loaded) .history-card,
body:not(.light-mode):not(.theme-loaded) .refund-history,
body:not(.light-mode):not(.theme-loaded) .transaction-history,
body:not(.light-mode):not(.theme-loaded) [class*="history"],
body:not(.light-mode):not(.theme-loaded) .history-section {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}


/* Ensure card bodies have dark background */

body:not(.light-mode):not(.theme-loaded) .card-body {
    background: transparent !important;
}


/* Section backgrounds */

body:not(.light-mode):not(.theme-loaded) section,
body:not(.light-mode):not(.theme-loaded) .section {
    background: transparent;
}


/* Container backgrounds for history sections */

body:not(.light-mode):not(.theme-loaded) .container-fluid,
body:not(.light-mode):not(.theme-loaded) .container {
    background: transparent;
}


/* Type Badges */

body:not(.light-mode):not(.theme-loaded) .badge.bg-success,
body:not(.light-mode):not(.theme-loaded) .type-badge.deposit,
body:not(.light-mode):not(.theme-loaded) td .badge-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .badge.bg-danger,
body:not(.light-mode):not(.theme-loaded) .type-badge.withdraw,
body:not(.light-mode):not(.theme-loaded) td .badge-danger {
    background: linear-gradient(135deg, #612020 0%, #9f6161 100% 100%) !important;
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .badge.bg-info,
body:not(.light-mode):not(.theme-loaded) td .badge-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}


/* Summary/Info Boxes */

body:not(.light-mode):not(.theme-loaded) .info-box,
body:not(.light-mode):not(.theme-loaded) .summary-box,
body:not(.light-mode):not(.theme-loaded) .stats-box,
body:not(.light-mode):not(.theme-loaded) [class*="info-"] {
    border: none;
    color: #e2e8f0;
}

body:not(.light-mode):not(.theme-loaded) .stat-number,
body:not(.light-mode):not(.theme-loaded) .summary-number,
body:not(.light-mode):not(.theme-loaded) .info-value {
    color: #8ba4ff !important;
}


/* Card Sections */

body:not(.light-mode):not(.theme-loaded) .card-section,
body:not(.light-mode):not(.theme-loaded) .info-section {
    background: transparent;
    border-color: rgba(102, 126, 234, 0.3);
}


/* Ensure all table rows have dark background */


/* Commented out to prevent white backgrounds in tables */


/* Text colors in tables */

body:not(.light-mode):not(.theme-loaded) tbody tr td {
    color: #e2e8f0 !important;
}

body:not(.light-mode):not(.theme-loaded) .dashboard-card {
    background-color: #2d3748;
    border-color: #4a5568;
}

body:not(.light-mode):not(.theme-loaded) .filter-card {
    background-color: #2d3748;
    border-color: #4a5568;
}

body:not(.light-mode):not(.theme-loaded) .btn-outline-secondary {
    color: #cbd5e0;
    border-color: #718096;
}

body:not(.light-mode):not(.theme-loaded) .btn-outline-secondary:hover {
    background-color: #4a5568;
    color: #fff;
}


/* Theme Switcher Enhancements */

body:not(.light-mode):not(.theme-loaded) .theme-switcher {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body:not(.light-mode):not(.theme-loaded) .theme-switcher:hover {
    background: rgba(102, 126, 234, 0.25);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

body:not(.light-mode):not(.theme-loaded) .mobile-theme-switcher {
    border-top-color: #4a5568;
    background: rgba(45, 55, 72, 0.3);
}

body:not(.light-mode):not(.theme-loaded) .mobile-theme-switcher button {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

body:not(.light-mode):not(.theme-loaded) .mobile-theme-switcher button:hover {
    background: rgba(102, 126, 234, 0.25);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

body:not(.light-mode):not(.theme-loaded) .mobile-theme-switcher button.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
}


/* ===========================
       REFUND SECTION - OVERVIEW
       =========================== */


/* Refund Amount Cards with bg-light */

body:not(.light-mode):not(.theme-loaded) .card.bg-light,
body:not(.light-mode):not(.theme-loaded) .bg-light.card {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light:hover,
body:not(.light-mode):not(.theme-loaded) .bg-light.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5) !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light .card-body,
body:not(.light-mode):not(.theme-loaded) .bg-light.card .card-body {
    background: transparent !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light .card-title,
body:not(.light-mode):not(.theme-loaded) .bg-light.card .card-title {
    color: #94a3b8 !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light .text-muted,
body:not(.light-mode):not(.theme-loaded) .bg-light.card .text-muted {
    color: #94a3b8 !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light .text-primary,
body:not(.light-mode):not(.theme-loaded) .bg-light.card .text-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light .text-success,
body:not(.light-mode):not(.theme-loaded) .bg-light.card .text-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light .text-warning,
body:not(.light-mode):not(.theme-loaded) .bg-light.card .text-warning {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light .text-info,
body:not(.light-mode):not(.theme-loaded) .bg-light.card .text-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body:not(.light-mode):not(.theme-loaded) .card.bg-light .text-danger,
body:not(.light-mode):not(.theme-loaded) .bg-light.card .text-danger {
    background: linear-gradient(135deg, #612020 0%, #9f6161 100% 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}


/* Refund Stats Icon Boxes */

body:not(.light-mode):not(.theme-loaded) .bg-primary.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .bg-warning.bg-gradient {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .bg-success.bg-gradient {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .bg-danger.bg-gradient {
    background: linear-gradient(135deg, #612020 0%, #9f6161 100% 100%) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .bg-info.bg-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}


/* Table Light thead */

body:not(.light-mode):not(.theme-loaded) .table-light,
body:not(.light-mode):not(.theme-loaded) thead.table-light,
body:not(.light-mode):not(.theme-loaded) thead.table-light th {
    background: linear-gradient(135deg, #4a5568 0%, #3d4a5c 100%) !important;
    color: #e2e8f0 !important;
    border-color: #718096 !important;
}


/* Ensure all table rows have dark background - FORCE OVERRIDE */


/* Commented out to prevent white backgrounds in tables */

body:not(.light-mode):not(.theme-loaded) table tbody tr td,
body:not(.light-mode):not(.theme-loaded) .table tbody tr td,
body:not(.light-mode):not(.theme-loaded) tbody tr td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

body:not(.light-mode):not(.theme-loaded) table tbody tr:hover,
body:not(.light-mode):not(.theme-loaded) .table tbody tr:hover,
body:not(.light-mode):not(.theme-loaded) tbody tr:hover {
    background-color: #3d4a5c !important;
}

body:not(.light-mode):not(.theme-loaded) table tbody tr:hover td,
body:not(.light-mode):not(.theme-loaded) .table tbody tr:hover td,
body:not(.light-mode):not(.theme-loaded) tbody tr:hover td {
    background-color: transparent !important;
}


/* Card Headers with bg-info */

body:not(.light-mode):not(.theme-loaded) .card-header.bg-info,
body:not(.light-mode):not(.theme-loaded) .bg-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

body:not(.light-mode):not(.theme-loaded) .card-header.bg-info i,
body:not(.light-mode):not(.theme-loaded) .bg-info i {
    color: #ffffff !important;
}


/* Border-0 cards */

body:not(.light-mode):not(.theme-loaded) .card.border-0 {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}


/* Text colors in tables */

body:not(.light-mode):not(.theme-loaded) tbody tr td {
    color: #e2e8f0 !important;
}


/* Pagination */

body:not(.light-mode):not(.theme-loaded) .pagination .page-link {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #8ba4ff !important;
}

body:not(.light-mode):not(.theme-loaded) .pagination .page-link:hover {
    background-color: #374151 !important;
    border-color: #667eea !important;
    color: #b89fff !important;
}

body:not(.light-mode):not(.theme-loaded) .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
    color: #ffffff !important;
}

body:not(.light-mode):not(.theme-loaded) .pagination .page-item.disabled .page-link {
    background-color: #1e293b !important;
    border-color: #374151 !important;
    color: #4a5568 !important;
}


/* Override any white backgrounds in overview */

body:not(.light-mode):not(.theme-loaded) #refund-section .card,
body:not(.light-mode):not(.theme-loaded) #transactions-section .card,
body:not(.light-mode):not(.theme-loaded) #recent-refunds .card,
body:not(.light-mode):not(.theme-loaded) .real-data .card {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

body:not(.light-mode):not(.theme-loaded) #refund-section .card-body,
body:not(.light-mode):not(.theme-loaded) #transactions-section .card-body,
body:not(.light-mode):not(.theme-loaded) #recent-refunds .card-body,
body:not(.light-mode):not(.theme-loaded) .real-data .card-body {
    background: transparent !important;
}


/* Table responsive wrapper */

body:not(.light-mode):not(.theme-loaded) .table-responsive {
    background: transparent !important;
}


/* Code elements in tables */

body:not(.light-mode):not(.theme-loaded) tbody tr td code {
    background-color: rgba(102, 126, 234, 0.2) !important;
    color: #8ba4ff !important;
    border: 1px solid rgba(102, 126, 234, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}


/* ===========================
       LOADING OVERLAY & SKELETON
       =========================== */


/* Loading Overlay */

body:not(.light-mode):not(.theme-loaded) .loading-overlay {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(102, 126, 234, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .loading-spinner {
    border: 4px solid #2d3748 !important;
    border-top: 4px solid #667eea !important;
}

body:not(.light-mode):not(.theme-loaded) .loading-text {
    color: #e2e8f0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body:not(.light-mode):not(.theme-loaded) .loading-subtext {
    color: #94a3b8 !important;
}


/* Skeleton Loading */

body:not(.light-mode):not(.theme-loaded) .skeleton {
    background: linear-gradient(90deg, #2d3748 25%, #374151 50%, #2d3748 75%) !important;
    background-size: 200% 100%;
}

body:not(.light-mode):not(.theme-loaded) .skeleton-card {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .skeleton-plan-card {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .skeleton-table {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

body:not(.light-mode):not(.theme-loaded) .skeleton-container {
    background: transparent !important;
}


/* ===========================
       FAQ SECTION - FOOTER
       =========================== */


/* FAQ Container */

body:not(.light-mode):not(.theme-loaded) .faq-container {
    background: transparent;
}


/* FAQ Header */

body:not(.light-mode):not(.theme-loaded) .faq-header h3 {
    color: #e2e8f0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* FAQ Search */

body:not(.light-mode):not(.theme-loaded) .faq-search {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-search::placeholder {
    color: #94a3b8 !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-search:focus {
    outline: none;
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}


/* FAQ Items */

body:not(.light-mode):not(.theme-loaded) .faq-item {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-item:hover {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3) !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-item.open {
    background: linear-gradient(135deg, #2d3748 0%, #374151 100%) !important;
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4) !important;
}


/* FAQ Question */

body:not(.light-mode):not(.theme-loaded) .faq-question {
    color: #e2e8f0 !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-question:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border-radius: 10px 10px 0 0;
}


/* FAQ Icon */

body:not(.light-mode):not(.theme-loaded) .faq-icon {
    color: #667eea !important;
}


/* FAQ Answer */

body:not(.light-mode):not(.theme-loaded) .faq-answer {
    color: #cbd5e1 !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-answer a {
    color: #8ba4ff !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-answer a:hover {
    color: #b89fff !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-answer strong {
    color: #e2e8f0 !important;
}

body:not(.light-mode):not(.theme-loaded) .faq-answer em {
    color: #94a3b8 !important;
}


/* ===========================
       ADMIN MESSAGES MODAL
       =========================== */


/* Admin Messages Content */

body:not(.light-mode):not(.theme-loaded) .admin-messages-content {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(102, 126, 234, 0.3) !important;
}


/* Slides Container */

body:not(.light-mode):not(.theme-loaded) .admin-messages-slides-container {
    background: transparent !important;
}


/* Individual Slide */

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide {
    background: transparent !important;
}


/* Slide Title */

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide-title {
    color: #e2e8f0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Slide Body */

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide-body {
    color: #cbd5e1 !important;
}


/* Slide Meta */

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide-meta {
    border-top-color: rgba(102, 126, 234, 0.3) !important;
}


/* Priority Badges */

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide-priority.urgent {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide-priority.high {
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%) !important;
    box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide-priority.medium {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide-priority.low {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.4) !important;
}


/* Time */

body:not(.light-mode):not(.theme-loaded) .admin-messages-slide-time {
    color: #94a3b8 !important;
}


/* Navigation Container */

body:not(.light-mode):not(.theme-loaded) .admin-messages-navigation {
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}


/* Navigation Buttons */

body:not(.light-mode):not(.theme-loaded) .admin-messages-nav-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .admin-messages-nav-btn:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a3a92 100%) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

body:not(.light-mode):not(.theme-loaded) .admin-messages-nav-btn:disabled {
    background: #374151 !important;
    box-shadow: none !important;
}


/* Dots */

body:not(.light-mode):not(.theme-loaded) .admin-messages-dot {
    background: #4a5568 !important;
}

body:not(.light-mode):not(.theme-loaded) .admin-messages-dot.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.6) !important;
}


/* Footer */

body:not(.light-mode):not(.theme-loaded) .admin-messages-footer {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border-top-color: rgba(102, 126, 234, 0.3) !important;
}


/* Dismiss Button */

body:not(.light-mode):not(.theme-loaded) .admin-messages-dismiss-btn {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .admin-messages-dismiss-btn:hover {
    background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
    box-shadow: 0 6px 20px rgba(100, 116, 139, 0.6) !important;
}


/* ===========================
       PROFILE POPUP MODAL
       =========================== */


/* Profile Popup Container */

body:not(.light-mode):not(.theme-loaded) .profile-popup-container {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(102, 126, 234, 0.3) !important;
}


/* Balance Cards */

body:not(.light-mode):not(.theme-loaded) .profile-balance-card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-balance-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}


/* Main balance - Green gradient */

body:not(.light-mode):not(.theme-loaded) .profile-balance-card:first-child {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
}


/* Refund balance - Orange gradient */

body:not(.light-mode):not(.theme-loaded) .profile-balance-card.refund {
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%) !important;
}


/* Pending balance - Blue gradient */

body:not(.light-mode):not(.theme-loaded) .profile-balance-card.pending {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}


/* Section Title */

body:not(.light-mode):not(.theme-loaded) .profile-section-title {
    color: #e2e8f0 !important;
    border-bottom-color: rgba(102, 126, 234, 0.3) !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-section-title i {
    color: #667eea !important;
}


/* Info Labels */

body:not(.light-mode):not(.theme-loaded) .profile-info-label {
    color: #94a3b8 !important;
}


/* Info Values */

body:not(.light-mode):not(.theme-loaded) .profile-info-value {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    color: #e2e8f0 !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-info-value a {
    color: #8ba4ff !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-info-value a:hover {
    color: #b89fff !important;
}


/* Edit Inputs */

body:not(.light-mode):not(.theme-loaded) .profile-edit-input {
    background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    color: #e2e8f0 !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-edit-input:focus {
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-edit-input[readonly] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    opacity: 0.7 !important;
}


/* Action Buttons */

body:not(.light-mode):not(.theme-loaded) .profile-action-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-action-btn:hover {
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5) !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-action-btn.secondary {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.4) !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-action-btn.secondary:hover {
    box-shadow: 0 8px 30px rgba(100, 116, 139, 0.5) !important;
}


/* Success/Error Messages */

body:not(.light-mode):not(.theme-loaded) .profile-success {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
    border-left-color: #10b981 !important;
    color: #d1fae5 !important;
}

body:not(.light-mode):not(.theme-loaded) .profile-error {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
    border-left-color: #ef4444 !important;
    color: #fecaca !important;
}


}

/* ==========================================
   MODERN 2-TIER HEADER - DARK MODE
   ========================================== */

/* ===== TIER 1: TOP BAR - DARK MODE ===== */
body.dark-mode .header-topbar {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(102, 126, 234, 0.15), inset 0 1px 0 rgba(102, 126, 234, 0.2) !important;
}
body.dark-mode .brand-name {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 10px rgba(167, 139, 250, 0.5));
}
body.dark-mode .brand-avatar,
body.dark-mode .brand-logo {
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3) !important;
}
body.dark-mode .brand-link:hover .brand-avatar,
body.dark-mode .brand-link:hover .brand-logo {
    box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5) !important;
}

/* ===== ICON BUTTONS - DARK MODE ===== */
body.dark-mode .btn-icon {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .btn-icon:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
    color: white !important;
    box-shadow: 0 6px 16px rgba(167, 139, 250, 0.6) !important;
}
body.dark-mode .theme-toggle-compact {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: rgba(251, 146, 60, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .theme-toggle-compact:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
    box-shadow: 0 6px 16px rgba(251, 146, 60, 0.6) !important;
}

/* ===== USER INFO CARD - DARK MODE ===== */
body.dark-mode .user-info-card {
    background: linear-gradient(135deg, #333 0%, #383838 100%) !important;
    border-color: rgb(126 0 43 / 40%) !important;
    box-shadow: 0 4px 16px rgb(34 43 40 / 40%), 0 0 30px rgb(36 43 41 / 20%) !important;
}
body.dark-mode .user-info-card:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.3) !important;
}

/* ===== DEPOSIT BUTTON - DARK MODE ===== */
body.dark-mode .btn-deposit,
body.dark-mode .btn-deposit-guest {
    background: linear-gradient(135deg, #059669 0%, #2563eb 100%) !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4), 0 0 25px rgba(5, 150, 105, 0.3) !important;
}
body.dark-mode .btn-deposit:hover,
body.dark-mode .btn-deposit-guest:hover {
    background: linear-gradient(135deg, #047857 0%, #1d4ed8 100%) !important;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.6), 0 0 40px rgba(5, 150, 105, 0.4) !important;
}

/* ===== LOGOUT BUTTON - DARK MODE ===== */
body.dark-mode .btn-logout {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.2) 100%) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}
body.dark-mode .btn-logout:hover {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5) !important;
}

/* ===== LOGIN BUTTON - DARK MODE ===== */
body.dark-mode .btn-login {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5) !important;
}
body.dark-mode .btn-login:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.7) !important;
}

/* ===== MOBILE MENU BUTTON - DARK MODE ===== */
body.dark-mode .btn-mobile-menu {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .btn-mobile-menu:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
    color: white !important;
    box-shadow: 0 6px 16px rgba(167, 139, 250, 0.6) !important;
}

/* ===== TIER 2: NAVIGATION BAR - DARK MODE ===== */
body.dark-mode .header-navbar {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.6) 0%, rgba(30, 41, 59, 0.6) 100%) !important;
    border-color: rgba(167, 139, 250, 0.2) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(167, 139, 250, 0.1) !important;
}
body.dark-mode .navbar-content .nav-link {
    color: #cbd5e1 !important;
}
body.dark-mode .navbar-content .nav-link:hover {
    color: #a78bfa !important;
    background: rgba(167, 139, 250, 0.15) !important;
}
body.dark-mode .navbar-content .nav-link::before {
    background: linear-gradient(90deg, #a78bfa 0%, #c084fc 100%) !important;
}
body.dark-mode .navbar-content .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4) !important;
}
body.dark-mode .navbar-content .nav-link-highlight {
    color: #fca5a5 !important;
}
body.dark-mode .navbar-content .nav-link-highlight:hover {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.15) !important;
}
body.dark-mode .navbar-content .nav-link-highlight.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

/* ===== DROPDOWN MENU - DARK MODE ===== */
body.dark-mode .navbar-content .dropdown-menu,
body.dark-mode .language-switcher-compact .dropdown-menu {
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .navbar-content .dropdown-item,
body.dark-mode .language-switcher-compact .dropdown-item {
    color: #cbd5e1 !important;
}
body.dark-mode .navbar-content .dropdown-item:hover,
body.dark-mode .language-switcher-compact .dropdown-item:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
    color: #ffffff !important;
}
body.dark-mode .navbar-content .dropdown-item i {
    color: #a78bfa !important;
}
body.dark-mode .navbar-content .dropdown-item:hover i {
    color: #ffffff !important;
}

/* ===== AUTO DARK MODE (System Preference) ===== */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode):not(.theme-loaded) .header-topbar {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
        border-color: rgba(102, 126, 234, 0.3) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(102, 126, 234, 0.15), inset 0 1px 0 rgba(102, 126, 234, 0.2) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .brand-name {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        filter: drop-shadow(0 2px 10px rgba(167, 139, 250, 0.5));
    }
    
    body:not(.light-mode):not(.theme-loaded) .brand-avatar,
    body:not(.light-mode):not(.theme-loaded) .brand-logo {
        box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .brand-link:hover .brand-avatar,
    body:not(.light-mode):not(.theme-loaded) .brand-link:hover .brand-logo {
        box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-icon {
        background: rgba(51, 65, 85, 0.8) !important;
        border-color: rgba(167, 139, 250, 0.3) !important;
        color: #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-icon:hover {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
        color: white !important;
        box-shadow: 0 6px 16px rgba(167, 139, 250, 0.6) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .theme-toggle-compact {
        background: rgba(51, 65, 85, 0.8) !important;
        border-color: rgba(251, 146, 60, 0.3) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .theme-toggle-compact:hover {
        background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
        box-shadow: 0 6px 16px rgba(251, 146, 60, 0.6) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .user-info-card {
        background: rgba(51, 65, 85, 0.8) !important;
        border-color: rgba(167, 139, 250, 0.3) !important;
        color: #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .user-info-card:hover {
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.3) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-deposit,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit-guest {
        background: linear-gradient(135deg, #059669 0%, #2563eb 100%) !important;
        border-color: rgba(37, 99, 235, 0.4) !important;
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4), 0 0 25px rgba(5, 150, 105, 0.3) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-deposit:hover,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit-guest:hover {
        background: linear-gradient(135deg, #047857 0%, #1d4ed8 100%) !important;
        box-shadow: 0 8px 30px rgba(37, 99, 235, 0.6), 0 0 40px rgba(5, 150, 105, 0.4) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-logout {
        background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.2) 100%) !important;
        border-color: #ef4444 !important;
        color: #fca5a5 !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-logout:hover {
        background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-login {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-login:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
        box-shadow: 0 8px 30px rgba(37, 99, 235, 0.7) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-mobile-menu {
        background: rgba(51, 65, 85, 0.8) !important;
        border-color: rgba(167, 139, 250, 0.3) !important;
        color: #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .btn-mobile-menu:hover {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
        color: white !important;
        box-shadow: 0 6px 16px rgba(167, 139, 250, 0.6) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .header-navbar {
        background: linear-gradient(135deg, rgba(51, 65, 85, 0.6) 0%, rgba(30, 41, 59, 0.6) 100%) !important;
        border-color: rgba(167, 139, 250, 0.2) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(167, 139, 250, 0.1) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .nav-link {
        color: #cbd5e1 !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .nav-link:hover {
        color: #a78bfa !important;
        background: rgba(167, 139, 250, 0.15) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .nav-link::before {
        background: linear-gradient(90deg, #a78bfa 0%, #c084fc 100%) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .nav-link.active {
        color: #ffffff !important;
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
        box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .nav-link-highlight {
        color: #fca5a5 !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .nav-link-highlight:hover {
        color: #f87171 !important;
        background: rgba(239, 68, 68, 0.15) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .nav-link-highlight.active {
        color: #ffffff !important;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .dropdown-menu,
    body:not(.light-mode):not(.theme-loaded) .language-switcher-compact .dropdown-menu {
        background: rgba(30, 41, 59, 0.98) !important;
        border-color: rgba(167, 139, 250, 0.3) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .dropdown-item,
    body:not(.light-mode):not(.theme-loaded) .language-switcher-compact .dropdown-item {
        color: #cbd5e1 !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .dropdown-item:hover,
    body:not(.light-mode):not(.theme-loaded) .language-switcher-compact .dropdown-item:hover {
        background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%) !important;
        color: #ffffff !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .dropdown-item i {
        color: #a78bfa !important;
    }
    
    body:not(.light-mode):not(.theme-loaded) .navbar-content .dropdown-item:hover i {
        color: #ffffff !important;
    }
}

/* ==========================================
   MODERN HEADER - DARK MODE RESPONSIVE
   ========================================== */

/* 3-Row Layout with new structure */
@media (max-width: 899px) {
    body.dark-mode .header-topbar,
    body:not(.light-mode):not(.theme-loaded) .header-topbar {
        border-radius: 16px !important;
    }
    /* User Info Card centered in Row 2 */
    
    body.dark-mode .header-row-2 .user-info-card,
    body:not(.light-mode):not(.theme-loaded) .header-row-2 .user-info-card {
        text-align: center !important;
    }
}

/* Desktop Layout */
@media (min-width: 900px) {
    body.dark-mode .header-row-2 .user-info-card,
    body:not(.light-mode):not(.theme-loaded) .header-row-2 .user-info-card {
        text-align: left !important;
    }
}

/* Tablet & Mobile */
@media (max-width: 768px) {
    body.dark-mode .header-topbar,
    body:not(.light-mode):not(.theme-loaded) .header-topbar {
        padding: 0.875rem 1rem !important;
    }
    
    body.dark-mode .badge-popup,
    body:not(.light-mode):not(.theme-loaded) .badge-popup {
        top: -10px !important;
        right: -6px !important;
        font-size: 9px !important;
        padding: 3px 8px !important;
    }
    
    body.dark-mode .btn-deposit,
    body.dark-mode .btn-deposit-guest,
    body.dark-mode .btn-logout,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit-guest,
    body:not(.light-mode):not(.theme-loaded) .btn-logout {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    body.dark-mode .header-topbar,
    body:not(.light-mode):not(.theme-loaded) .header-topbar {
        padding: 0.75rem !important;
        border-radius: 14px !important;
    }
    /* Removed user-info-card padding override - let header-modern.css handle it */
    
    body.dark-mode .btn-deposit,
    body.dark-mode .btn-deposit-guest,
    body.dark-mode .btn-logout,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit-guest,
    body:not(.light-mode):not(.theme-loaded) .btn-logout {
        padding: 9px 14px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* Very Small Mobile */
@media (max-width: 450px) {
    body.dark-mode .header-topbar,
    body:not(.light-mode):not(.theme-loaded) .header-topbar {
        padding: 0.625rem !important;
    }
    /* Removed user-info-card padding override - let header-modern.css handle it */
    
    body.dark-mode .btn-deposit,
    body.dark-mode .btn-deposit-guest,
    body.dark-mode .btn-logout,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit-guest,
    body:not(.light-mode):not(.theme-loaded) .btn-logout {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* Extra Small */
@media (max-width: 380px) {
    body.dark-mode .header-topbar,
    body:not(.light-mode):not(.theme-loaded) .header-topbar {
        padding: 0.5rem !important;
    }
    /* Removed user-info-card padding override - let header-modern.css handle it */
    
    body.dark-mode .btn-deposit,
    body.dark-mode .btn-deposit-guest,
    body.dark-mode .btn-logout,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit,
    body:not(.light-mode):not(.theme-loaded) .btn-deposit-guest,
    body:not(.light-mode):not(.theme-loaded) .btn-logout {
        padding: 7px 10px !important;
        font-size: 11px !important;
    }
    
    body.dark-mode .badge-popup,
    body:not(.light-mode):not(.theme-loaded) .badge-popup {
        top: -6px !important;
        right: -4px !important;
        font-size: 7px !important;
        padding: 2px 5px !important;
    }
}