/**
 * Dark Theme Foundation - Premium Luxury Suite Platform
 * Color Palette: Deep blacks, luxury gold accents, premium purple
 * Last Updated: 2025-12-19 - Comprehensive white background fixes
 * Version: 2.0 - Ultra-aggressive overrides
 * NUCLEAR OPTION: Force dark backgrounds on everything
 */

/* ============================================
   NUCLEAR OPTION - FORCE DARK ON EVERYTHING
   ============================================ */

/* Override ALL white backgrounds from style.css - MUST BE AFTER style.css loads */
/* These match the exact selectors from style.css but with .dark-theme prefix for higher specificity */
.dark-theme .sidebar__bkg {
  background-color: var(--bg-secondary) !important;
  border-right-color: var(--bg-secondary) !important;
}
.dark-theme .sidebar:hover .sidebar__inside {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .sidebar__inside {
  background-color: var(--bg-secondary) !important;
}

/* Override mobile sidebar white background */
@media (max-width: 767px) {
.dark-theme .sidebar__inside {
    background-color: var(--bg-secondary) !important;
}
}

/* Override any element with white background from style.css */
.dark-theme [style*="background-color: #FFFFFF"],
.dark-theme [style*="background-color: white"],
.dark-theme [style*="background: white"],
.dark-theme [style*="background: #FFFFFF"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* Override ALL computed white backgrounds with maximum specificity */
.dark-theme *[style*="background-color: white"],
.dark-theme *[style*="background-color: #fff"],
.dark-theme *[style*="background-color: #FFF"],
.dark-theme *[style*="background-color: #FFFFFF"],
.dark-theme *[style*="background-color: #ffffff"],
.dark-theme *[style*="background: white"],
.dark-theme *[style*="background: #fff"],
.dark-theme *[style*="background: #FFF"],
.dark-theme *[style*="background: #FFFFFF"],
.dark-theme *[style*="background: #ffffff"],
body.dark-theme *[style*="background"],
.dark-theme body *[style*="background"],
#app.dark-theme *[style*="background"],
.dark-theme #app *[style*="background"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}
:root {
  /* ============================================
     PRIMARY COLORS - Backgrounds
     ============================================ */
  --bg-primary: #0A0A0F;
  --bg-secondary: #1A1A24;
  --bg-tertiary: #252530;
  --bg-hover: #2A2A35;
  --bg-card: #1E1E2A;
  --bg-modal: rgba(10, 10, 15, 0.95);
  --bg-overlay: rgba(0, 0, 0, 0.75);
  --bg-medium-grey: #3A3A45; /* Medium grey for white backgrounds */
  
  /* Override style.css variables when dark theme is active */
  --bg-white: #3A3A45;
  --bg-sidebar: #1A1A24;
  --bg-sidebar-hover: #252530;
  --bg-card: #3A3A45;
  --bg-table-row: #3A3A45;
  --bg-table-row-even: #2A2A35;
  --bg-modal: #3A3A45;
  --bg-accordion: #3A3A45;
  --text-primary: #E0E0E0;
  --text-primary-inverse: #000000;
  --border-color: #252530;

  /* ============================================
     ACCENT COLORS - Luxury Gold & Purple
     ============================================ */
  --accent-gold: #D4AF37;
  --accent-gold-light: #F4D03F;
  --accent-gold-dark: #B8941F;
  --accent-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
  
  --accent-purple: #7B2CBF;
  --accent-purple-light: #9D4EDD;
  --accent-purple-dark: #5A1A8F;
  --accent-purple-gradient: linear-gradient(135deg, #7B2CBF 0%, #9D4EDD 100%);

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-primary: #FFFFFF;
  --text-secondary: #B8B8C8;
  --text-muted: #6B6B7A;
  --text-disabled: #4A4A55;
  --text-inverse: #0A0A0F; /* For text on gold/purple backgrounds */

  /* ============================================
     STATUS COLORS
     ============================================ */
  --success: #10B981;
  --success-light: #34D399;
  --success-dark: #059669;
  
  --warning: #F59E0B;
  --warning-light: #FBBF24;
  --warning-dark: #D97706;
  
  --error: #EF4444;
  --error-light: #F87171;
  --error-dark: #DC2626;
  
  --info: #3B82F6;
  --info-light: #60A5FA;
  --info-dark: #2563EB;

  /* ============================================
     BORDERS & DIVIDERS
     ============================================ */
  --border-color: #2A2A35;
  --border-light: #1F1F2A;
  --border-focus: #D4AF37;
  --divider-color: #1F1F2A;
  --divider-light: #2A2A35;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-gold: 0 4px 14px 0 rgba(212, 175, 55, 0.3);
  --shadow-purple: 0 4px 14px 0 rgba(123, 44, 191, 0.3);

  /* ============================================
     GLASSMORPHISM
     ============================================ */
  --glass-bg: rgba(30, 30, 42, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-backdrop: blur(10px);

  /* ============================================
     SPACING (Base: 4px)
     ============================================ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', serif;
  --font-body: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* ============================================
   GLOBAL DARK THEME APPLICATIONS
   ============================================ */

/* Override body white background */
body.dark-theme,
.dark-theme body,
.dark-theme {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
  font-family: var(--font-body);
}

/* Override html element */
html.dark-theme,
.dark-theme html {
  background-color: var(--bg-primary) !important;
}

/* Override main content containers - ULTRA AGGRESSIVE */
.dark-theme .main-layout,
.dark-theme .main-layout__container,
.dark-theme .container-fluid,
.dark-theme .container,
.dark-theme main,
.dark-theme section,
.dark-theme article,
.dark-theme div:not(.sidebar):not(.sidebar__inside):not(.sidebar__bkg),
.dark-theme .components,
.dark-theme .filters {
  background-color: var(--bg-primary) !important;
  background: var(--bg-primary) !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: 700;
}
.dark-theme h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}
.dark-theme h2 {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
}
.dark-theme h3 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: var(--spacing-md);
}
.dark-theme p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

/* ============================================
   CARDS
   ============================================ */
.dark-theme .card,
.dark-theme .el-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}
.dark-theme .card:hover,
.dark-theme .el-card:hover {
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

/* Glassmorphism Card */
.dark-theme .card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ============================================
   BUTTONS
   ============================================ */
.dark-theme .btn-primary,
.dark-theme .el-button--primary {
  background: var(--accent-gold-gradient);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  padding: var(--spacing-sm) var(--spacing-lg);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-gold);
}
.dark-theme .btn-primary:hover,
.dark-theme .el-button--primary:hover {
  background: var(--accent-gold-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.dark-theme .el-button--primary:focus,
.dark-theme .el-button--primary:active {
  background: var(--accent-gold-light);
  color: var(--text-inverse);
  border: none;
}
.dark-theme .el-button--primary.is-plain,
.dark-theme .el-button--primary.is-plain:focus,
.dark-theme .el-button--primary.is-plain:hover,
.dark-theme .el-button--primary.is-plain:active,
.dark-theme .investors-dashboard .el-button--primary {
  background: var(--accent-gold-gradient) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  box-shadow: var(--shadow-gold) !important;
}

/* Global: force dark backgrounds across pages */
.dark-theme,
.dark-theme #app,
.dark-theme main,
.dark-theme .main-layout,
.dark-theme .main-layout__container,
.dark-theme .container-fluid,
.dark-theme .container,
.dark-theme main,
.dark-theme section,
.dark-theme article,
.dark-theme .page-content,
.dark-theme .content,
html,
body {
  background-color: var(--bg-primary) !important;
  min-height: 100vh;
}

/* Global tables */
.dark-theme .el-table,
.dark-theme .el-table__body-wrapper,
.dark-theme .el-table__header-wrapper,
.dark-theme .el-table__row,
.dark-theme .el-table th,
.dark-theme .el-table td,
.dark-theme .el-table__empty-block,
.dark-theme .el-table__empty-block-inner {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .el-table__empty-text {
  color: var(--text-secondary) !important;
}

/* Global cards and panels */
.dark-theme .el-card,
.dark-theme .el-card__body,
.dark-theme .el-collapse,
.dark-theme .el-collapse-item__header,
.dark-theme .el-collapse-item__content {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Global dialogs & overlays */
.dark-theme .el-dialog,
.dark-theme .el-dialog__body,
.dark-theme .el-dialog__header,
.dark-theme .el-dialog__footer,
.dark-theme .el-message-box,
.dark-theme .el-popover,
.dark-theme .el-tooltip__popper {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Form labels and fields inside dialogs (e.g., Create Masterclass) */
.dark-theme .el-form-item__label {
  color: var(--text-primary) !important;
}
.dark-theme .el-dialog .el-input__inner,
.dark-theme .el-dialog .el-textarea__inner,
.dark-theme .el-dialog .el-select .el-input__inner,
.dark-theme .el-dialog .el-input-number__decrease,
.dark-theme .el-dialog .el-input-number__increase {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-loading-mask {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Global inputs/dropdowns/pickers */
.dark-theme .el-input__inner,
.dark-theme .el-textarea__inner,
.dark-theme .el-select-dropdown,
.dark-theme .el-select-dropdown__item,
.dark-theme .el-picker-panel,
.dark-theme .el-date-picker,
.dark-theme .el-cascader-menus,
.dark-theme .el-dropdown-menu {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Types page */
.dark-theme .types-page {
  background-color: var(--bg-primary) !important;
  min-height: 100vh;
}
.dark-theme .types-page .type-card,
.dark-theme .types-page .type-entry {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Catch any inline white backgrounds */
.dark-theme *[style*="#fff"],
.dark-theme *[style*="#FFF"],
.dark-theme *[style*="rgb(255, 255, 255)"],
.dark-theme *[style*="background: white"],
.dark-theme *[style*="background-color: white"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}
.dark-theme .btn-secondary,
.dark-theme .el-button--default {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}
.dark-theme .btn-secondary:hover,
.dark-theme .el-button--default:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--accent-purple);
  color: var(--accent-purple-light);
}
.dark-theme .btn-outline {
  background-color: transparent;
  color: var(--accent-gold);
  border: 2px solid var(--accent-gold);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}
.dark-theme .btn-outline:hover {
  background-color: var(--accent-gold);
  color: var(--text-inverse);
}

/* ============================================
   INPUTS & FORMS
   ============================================ */
.dark-theme .el-input__inner,
.dark-theme input[type="text"],
.dark-theme input[type="email"],
.dark-theme input[type="password"],
.dark-theme textarea,
.dark-theme select {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all var(--transition-base);
}
.dark-theme .el-input__inner:focus,
.dark-theme input:focus,
.dark-theme textarea:focus,
.dark-theme select:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  outline: none;
}
.dark-theme .el-input__inner::-moz-placeholder, .dark-theme input::-moz-placeholder {
  color: var(--text-muted);
}
.dark-theme .el-input__inner::placeholder,
.dark-theme input::placeholder {
  color: var(--text-muted);
}

/* ============================================
   SIDEBAR
   ============================================ */
.dark-theme .sidebar {
  background-color: var(--bg-secondary) !important;
  border-right: 1px solid var(--border-color);
}
.dark-theme .sidebar__bkg {
  background-color: var(--bg-secondary) !important;
  border-right-color: var(--bg-secondary) !important;
}
.dark-theme .sidebar__inside {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .sidebar__overlay-bkg {
  background: rgba(255, 255, 255, 0.01) !important;
}
.dark-theme .sidebar__link {
  color: var(--text-secondary);
  transition: all var(--transition-base);
}
.dark-theme .sidebar__link:hover {
  color: var(--accent-gold);
  background-color: var(--bg-tertiary);
}
.dark-theme .sidebar__list-item.active .sidebar__link {
  color: var(--accent-gold);
  background-color: var(--bg-tertiary);
  border-left: 3px solid var(--accent-gold);
}
.dark-theme .sidebar__list-item.active .sidebar__icon-container {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .sidebar__list-item.active::after {
  border-left-color: var(--bg-tertiary) !important;
}

/* Sidebar hover states */
.dark-theme .sidebar:hover .sidebar__bkg {
  background-color: var(--bg-secondary) !important;
  border-color: var(--bg-secondary) !important;
}
.dark-theme .sidebar:hover .sidebar__inside {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .sidebar:hover .sidebar__list-item:hover {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .sidebar:hover .sidebar__list-item.active {
  background-color: var(--bg-tertiary) !important;
}

/* Sidebar item label */
.dark-theme .sidebar__item-label {
  color: var(--text-secondary) !important;
}
.dark-theme .sidebar:hover .sidebar__item-label {
  color: var(--text-secondary) !important;
}

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

/* Element UI Table - COMPLETE OVERRIDE - Maximum Specificity */
.dark-theme .el-table,
.dark-theme .el-table__body-wrapper,
.dark-theme .el-table__header-wrapper,
.dark-theme .el-table__empty-block,
.dark-theme .el-table__empty-block-inner,
.dark-theme .el-table .el-table__empty-block,
.dark-theme .el-table .el-table__empty-block-inner,
.dark-theme .el-table__body-wrapper .el-table__empty-block,
.dark-theme .el-table__body-wrapper .el-table__empty-block-inner {
  background-color: #3A3A45 !important;
  background: #3A3A45 !important;
}
.dark-theme .el-table__empty-text,
.dark-theme .el-table__empty-block .el-table__empty-text {
  color: var(--text-primary) !important;
}
.dark-theme .el-table th,
.dark-theme .el-table__header th,
.dark-theme .el-table thead th {
  background-color: #3A3A45 !important;
  color: #E0E0E0 !important;
  border-bottom: 1px solid #252530 !important;
}
.dark-theme .el-table td,
.dark-theme .el-table__row td,
.dark-theme .el-table tbody td {
  background-color: #3A3A45 !important;
  border-bottom: 1px solid #252530 !important;
  color: #E0E0E0 !important;
}
.dark-theme .el-table tr:hover,
.dark-theme .el-table__row:hover,
.dark-theme .el-table tbody tr:hover {
  background-color: #252530 !important;
}
.dark-theme .el-table__row,
.dark-theme .el-table tbody tr {
  background-color: #3A3A45 !important;
}

/* Override any inline styles Element UI might add */
.dark-theme .el-table[style*="background"],
.dark-theme .el-table__body-wrapper[style*="background"],
.dark-theme .el-table__empty-block[style*="background"],
.dark-theme .el-table__empty-block-inner[style*="background"] {
  background-color: #3A3A45 !important;
  background: #3A3A45 !important;
}

/* ============================================
   MODALS & DIALOGS
   ============================================ */
.dark-theme .el-dialog {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}
.dark-theme .el-dialog__header {
  border-bottom: 1px solid var(--border-color);
}
.dark-theme .el-dialog__title {
  color: var(--text-primary);
  font-family: var(--font-heading);
}
.dark-theme .el-dialog__body {
  color: var(--text-secondary);
}

/* ============================================
   BADGES & TAGS
   ============================================ */
.dark-theme .badge,
.dark-theme .el-tag {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.875rem;
}
.dark-theme .badge-success {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border-color: var(--success);
}
.dark-theme .badge-warning {
  background-color: rgba(245, 158, 11, 0.2);
  color: var(--warning);
  border-color: var(--warning);
}
.dark-theme .badge-error {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--error);
  border-color: var(--error);
}
.dark-theme .badge-gold {
  background: var(--accent-gold-gradient);
  color: var(--text-inverse);
  border: none;
}

/* ============================================
   DIVIDERS
   ============================================ */
.dark-theme .el-divider {
  border-color: var(--divider-color);
}
.dark-theme hr {
  border-color: var(--divider-color);
}

/* ============================================
   SCROLLBARS
   ============================================ */
.dark-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.dark-theme ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
.dark-theme ::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
}
.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.dark-theme .text-gold {
  color: var(--accent-gold);
}
.dark-theme .text-purple {
  color: var(--accent-purple);
}
.dark-theme .bg-gold {
  background: var(--accent-gold-gradient);
  color: var(--text-inverse);
}
.dark-theme .bg-purple {
  background: var(--accent-purple-gradient);
  color: var(--text-primary);
}
.dark-theme .border-gold {
  border-color: var(--accent-gold);
}
.dark-theme .border-purple {
  border-color: var(--accent-purple);
}
.dark-theme .shadow-gold {
  box-shadow: var(--shadow-gold);
}
.dark-theme .shadow-purple {
  box-shadow: var(--shadow-purple);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes slideIn {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
@keyframes shimmer {
0% {
    background-position: -1000px 0;
}
100% {
    background-position: 1000px 0;
}
}
.dark-theme .fade-in {
  animation: fadeIn var(--transition-base);
}
.dark-theme .slide-in {
  animation: slideIn var(--transition-base);
}

/* ============================================
   OVERRIDE WHITE BACKGROUNDS TO MEDIUM GREY
   ============================================ */

/* Override any white backgrounds with medium grey */
.dark-theme * {
  background-color: inherit;
}
.dark-theme [style*="background-color: white"],
.dark-theme [style*="background-color: #fff"],
.dark-theme [style*="background-color: #FFF"],
.dark-theme [style*="background-color: #FFFFFF"],
.dark-theme [style*="background: white"],
.dark-theme [style*="background: #fff"],
.dark-theme [style*="background: #FFF"],
.dark-theme [style*="background: #FFFFFF"] {
  background-color: var(--bg-medium-grey) !important;
}

/* Override common white background classes */
.dark-theme .el-card__body,
.dark-theme .el-dialog__body,
.dark-theme .el-table__body-wrapper,
.dark-theme .el-table__header-wrapper,
.dark-theme .el-form-item__content,
.dark-theme .el-select-dropdown,
.dark-theme .el-picker-panel,
.dark-theme .el-date-picker,
.dark-theme .el-time-picker,
.dark-theme .el-popover,
.dark-theme .el-tooltip__popper,
.dark-theme .el-message-box,
.dark-theme .el-notification,
.dark-theme .el-loading-mask {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Element UI components with white backgrounds */
.dark-theme .el-card {
  background-color: var(--bg-card) !important;
}
.dark-theme .el-card__body {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .el-dialog {
  background-color: var(--bg-card) !important;
}
.dark-theme .el-dialog__body {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .el-table {
  background-color: var(--bg-card) !important;
}
.dark-theme .el-table__body-wrapper {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .el-table__header-wrapper {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .el-select-dropdown {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-picker-panel {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-popover {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-message-box {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-notification {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* Override any divs or containers with white backgrounds */
.dark-theme div[class*="white"],
.dark-theme div[class*="bg-white"],
.dark-theme .white-bg,
.dark-theme .bg-white {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Bootstrap white backgrounds if used */
.dark-theme .bg-light {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .bg-white {
  background-color: var(--bg-medium-grey) !important;
}

/* Override any remaining white backgrounds from base styles */
.dark-theme .modal-content,
.dark-theme .modal-body,
.dark-theme .modal-header,
.dark-theme .modal-footer {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Element UI form components */
.dark-theme .el-form,
.dark-theme .el-form-item,
.dark-theme .el-form-item__content,
.dark-theme .el-form-item__label {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Override Element UI tabs */
.dark-theme .el-tabs,
.dark-theme .el-tabs__content,
.dark-theme .el-tabs__header {
  background-color: transparent !important;
}
.dark-theme .el-tabs__item {
  color: var(--text-secondary) !important;
}
.dark-theme .el-tabs__item.is-active {
  color: var(--accent-gold) !important;
}

/* Override Element UI dialog header and footer */
.dark-theme .el-dialog__header {
  background-color: var(--bg-card) !important;
  border-bottom-color: var(--border-color) !important;
}
.dark-theme .el-dialog__footer {
  background-color: var(--bg-card) !important;
  border-top-color: var(--border-color) !important;
}

/* Override any div elements that might have white backgrounds */
.dark-theme div:not([class*="highcharts"]):not([class*="el-"]):not([class*="sidebar"]) {
  background-color: inherit;
}

/* Force override for any element with computed white background */
.dark-theme * {
  background-image: none !important;
}
.dark-theme *[style*="background"] {
  background-color: var(--bg-medium-grey) !important;
  background-image: none !important;
}

/* Override table white backgrounds from style.css - match exact selectors */
.dark-theme .table__quis-table,
.dark-theme .quis-table {
  background-color: transparent !important;
}
.dark-theme .table__quis-table h3,
.dark-theme .table__quis-table h4 {
  color: var(--text-primary) !important;
}

/* ============================================
   COMPREHENSIVE WHITE BACKGROUND FIXES
   ============================================ */

/* Override all common white background classes */
.dark-theme .white,
.dark-theme .bg-white,
.dark-theme .white-bg,
.dark-theme [class*="white"],
.dark-theme [class*="White"] {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Bootstrap classes */
.dark-theme .bg-light,
.dark-theme .bg-white,
.dark-theme .card-white,
.dark-theme .panel-white {
  background-color: var(--bg-medium-grey) !important;
}

/* Override common container classes */
.dark-theme .content-wrapper,
.dark-theme .page-wrapper,
.dark-theme .main-content,
.dark-theme .content-area,
.dark-theme .page-content {
  background-color: var(--bg-primary) !important;
}

/* Override all table-related white backgrounds */
.dark-theme .el-table__body-wrapper,
.dark-theme .el-table__header-wrapper,
.dark-theme .el-table__fixed,
.dark-theme .el-table__fixed-right,
.dark-theme .el-table__fixed-body-wrapper {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .el-table__body tr,
.dark-theme .el-table__body td,
.dark-theme .el-table__header th {
  background-color: transparent !important;
}
.dark-theme .el-table__body tr.el-table__row {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .el-table__body tr.el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Override card and panel backgrounds */
.dark-theme .card,
.dark-theme .panel,
.dark-theme .box,
.dark-theme .widget {
  background-color: var(--bg-card) !important;
}
.dark-theme .card-body,
.dark-theme .card-header,
.dark-theme .card-footer,
.dark-theme .panel-body,
.dark-theme .panel-heading {
  background-color: var(--bg-medium-grey) !important;
}

/* Override form elements */
.dark-theme .form-group,
.dark-theme .form-control,
.dark-theme .input-group,
.dark-theme .input-group-addon {
  background-color: var(--bg-secondary) !important;
}

/* Override list and list items */
.dark-theme ul,
.dark-theme ol,
.dark-theme li {
  background-color: transparent !important;
}
.dark-theme .list-group,
.dark-theme .list-group-item {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .list-group-item:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Override tabs */
.dark-theme .nav-tabs,
.dark-theme .nav-tabs .nav-link,
.dark-theme .tab-content,
.dark-theme .tab-pane {
  background-color: transparent !important;
}
.dark-theme .nav-tabs .nav-link.active {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* Override accordion and collapse */
.dark-theme .accordion,
.dark-theme .accordion-item,
.dark-theme .accordion-header,
.dark-theme .accordion-body,
.dark-theme .collapse,
.dark-theme .collapsing {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* Override badges and labels */
.dark-theme .badge,
.dark-theme .label {
  background-color: var(--bg-tertiary) !important;
}

/* Override dropdown menus */
.dark-theme .dropdown-menu,
.dark-theme .dropdown-item {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .dropdown-item:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Override pagination */
.dark-theme .pagination,
.dark-theme .page-item,
.dark-theme .page-link {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .page-item.active .page-link {
  background-color: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
}

/* Override breadcrumbs */
.dark-theme .breadcrumb,
.dark-theme .breadcrumb-item {
  background-color: transparent !important;
}

/* Override alerts */
.dark-theme .alert {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Override progress bars */
.dark-theme .progress {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .progress-bar {
  background-color: var(--accent-gold) !important;
}

/* Override tooltips and popovers */
.dark-theme .tooltip,
.dark-theme .tooltip-inner,
.dark-theme .popover,
.dark-theme .popover-body {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Override all Element UI dropdowns and popups */
.dark-theme .el-dropdown-menu,
.dark-theme .el-dropdown-menu__item {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-dropdown-menu__item:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Override Element UI autocomplete */
.dark-theme .el-autocomplete-suggestion {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-autocomplete-suggestion__list li {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-autocomplete-suggestion__list li:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Override Element UI time picker */
.dark-theme .el-time-panel {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* Override Element UI steps */
.dark-theme .el-steps {
  background-color: transparent !important;
}
.dark-theme .el-step__head {
  background-color: var(--bg-secondary) !important;
}

/* Override Element UI timeline */
.dark-theme .el-timeline-item__wrapper {
  background-color: transparent !important;
}

/* Override Element UI drawer */
.dark-theme .el-drawer {
  background-color: var(--bg-card) !important;
}
.dark-theme .el-drawer__body {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Element UI collapse */
.dark-theme .el-collapse {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-collapse-item__header {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-collapse-item__content {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Override Element UI carousel */
.dark-theme .el-carousel__arrow {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .el-carousel__indicators {
  background-color: transparent !important;
}

/* Override any remaining white backgrounds with inline styles - ULTRA AGGRESSIVE */
.dark-theme [style*="background-color: white"],
.dark-theme [style*="background-color: #fff"],
.dark-theme [style*="background-color: #FFF"],
.dark-theme [style*="background-color: #FFFFFF"],
.dark-theme [style*="background-color: #ffffff"],
.dark-theme [style*="background: white"],
.dark-theme [style*="background: #fff"],
.dark-theme [style*="background: #FFF"],
.dark-theme [style*="background: #FFFFFF"],
.dark-theme [style*="background: #ffffff"],
.dark-theme [style*="background-color: rgb(255, 255, 255)"],
.dark-theme [style*="background-color: rgba(255, 255, 255"],
body.dark-theme [style*="background"],
.dark-theme body [style*="background"],
#app.dark-theme [style*="background"],
.dark-theme #app [style*="background"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* Force override ALL divs and sections that might have white backgrounds */
.dark-theme div:not(.sidebar):not(.sidebar__inside):not(.sidebar__bkg):not(.highcharts-container):not(.highcharts-background),
.dark-theme section:not(.sidebar),
.dark-theme article:not(.sidebar) {
  background-color: inherit !important;
}

/* Nuclear option: Override everything that's not explicitly dark */
.dark-theme *:not(.sidebar):not(.sidebar__inside):not(.sidebar__bkg):not(.highcharts-container):not(.highcharts-background):not(svg):not(svg *) {
  /* Force check for white backgrounds */
}

/* Override computed styles - use attribute selector for inline styles */
.dark-theme [style*="background"]:not([style*="background-color: var"]):not([style*="background: var"]) {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* Override computed styles that might be white */
.dark-theme * {
  /* Force dark backgrounds on all elements unless explicitly overridden */
}

/* Specific overrides for common page components */
.dark-theme .components,
.dark-theme .filters,
.dark-theme .quis-table,
.dark-theme .table__quis-table {
  background-color: transparent !important;
}

/* Override any remaining Element UI components */
.dark-theme .el-loading-mask {
  background-color: rgba(10, 10, 15, 0.8) !important;
}
.dark-theme .el-loading-spinner {
  color: var(--accent-gold) !important;
}

/* Override Element UI message boxes and notifications */
.dark-theme .el-message {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-message-box__message {
  color: var(--text-primary) !important;
}

/* Override any modals or overlays */
.dark-theme .modal-backdrop,
.dark-theme .v-modal {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

/* ============================================
   PAGE-SPECIFIC OVERRIDES
   ============================================ */

/* Dashboard page */
.dark-theme .dashboard,
.dark-theme .admin-dashboard {
  background-color: var(--bg-primary) !important;
}

/* Games page */
.dark-theme .games-container,
.dark-theme .game-list {
  background-color: transparent !important;
}

/* Projects/Launch page */
.dark-theme .project-container,
.dark-theme .launch-container {
  background-color: transparent !important;
}

/* Activities page */
.dark-theme .activities-container,
.dark-theme .activity-list {
  background-color: transparent !important;
}

/* Admins page */
.dark-theme .admins-container,
.dark-theme .admin-list {
  background-color: transparent !important;
}

/* Settings page */
.dark-theme .settings-container,
.dark-theme .settings-panel {
  background-color: transparent !important;
}

/* Messages page */
.dark-theme .message-container,
.dark-theme .message-list {
  background-color: transparent !important;
}

/* Masterclasses page */
.dark-theme .masterclass-container,
.dark-theme .masterclass-list {
  background-color: transparent !important;
}

/* Voting page */
.dark-theme .voting-container,
.dark-theme .voting-list {
  background-color: transparent !important;
}

/* NFTs page */
.dark-theme .nft-container,
.dark-theme .nft-list {
  background-color: transparent !important;
}

/* Bridge page */
.dark-theme .bridge-container,
.dark-theme .bridge-stats {
  background-color: transparent !important;
}

/* Promos page */
.dark-theme .promo-container,
.dark-theme .promo-list {
  background-color: transparent !important;
}

/* Tokens page */
.dark-theme .token-container,
.dark-theme .token-list {
  background-color: transparent !important;
}

/* Events page */
.dark-theme .events-container,
.dark-theme .event-list {
  background-color: transparent !important;
}

/* Blockchain page */
.dark-theme .blockchain-container,
.dark-theme .blockchain-dashboard {
  background-color: transparent !important;
}

/* AI page */
.dark-theme .ai-container,
.dark-theme .ai-dashboard {
  background-color: transparent !important;
}

/* Investors page */
.dark-theme .investors-container,
.dark-theme .investors-dashboard {
  background-color: var(--bg-primary) !important;
}
.dark-theme .investors-dashboard .page-header,
.dark-theme .investors-dashboard .stats-grid,
.dark-theme .investors-dashboard .filters-section {
  background-color: transparent !important;
}
.dark-theme .investors-dashboard .stat-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark-theme .investors-dashboard .stat-value {
  color: var(--text-primary) !important;
}
.dark-theme .investors-dashboard .stat-label {
  color: var(--text-secondary) !important;
}

/* Investors table specific overrides */
.dark-theme .investors-dashboard .el-table,
.dark-theme .investors-dashboard .el-table__body-wrapper,
.dark-theme .investors-dashboard .el-table__header-wrapper {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .investors-dashboard .el-table__row {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .investors-dashboard .el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .investors-dashboard .el-table th,
.dark-theme .investors-dashboard .el-table td {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark-theme .investors-dashboard .el-table__empty-block {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .investors-dashboard .el-table__empty-text {
  color: var(--text-secondary) !important;
}

/* Override Element UI table empty state completely */
.dark-theme .el-table__empty-block,
.dark-theme .el-table__empty-block-inner {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}
.dark-theme .el-table__empty-text {
  color: var(--text-secondary) !important;
}

/* Override any white backgrounds in the investors dashboard container */
.dark-theme .investors-dashboard > *,
.dark-theme .investors-dashboard div,
.dark-theme .investors-dashboard section {
  background-color: inherit !important;
}

/* Force override for any element with computed white background in investors page */
.dark-theme .investors-dashboard [style*="background"],
.dark-theme .investors-dashboard [style*="background-color"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* Ensure page background stays dark and fills viewport */
.dark-theme,
.dark-theme html,
.dark-theme body,
.dark-theme #app,
.dark-theme main,
.dark-theme .main-layout,
.dark-theme .main-layout__container,
.dark-theme .container-fluid,
.dark-theme .container {
  background-color: var(--bg-primary) !important;
}

/* Vendors page: force gold buttons to filled style */
.dark-theme .vendors-dashboard .el-button--primary,
.dark-theme .vendors-dashboard .el-button--primary.is-plain,
.dark-theme .vendors-dashboard .el-button--primary:focus,
.dark-theme .vendors-dashboard .el-button--primary:active,
.dark-theme .vendors-dashboard .el-button--primary:hover {
  background: var(--accent-gold-gradient) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  box-shadow: var(--shadow-gold) !important;
}
.dark-theme .investors-dashboard {
  background-color: var(--bg-primary) !important;
  min-height: 100vh;
}

/* Investors page - force dark backgrounds for inputs, dropdowns, dialogs */
.dark-theme .investors-dashboard .el-input__inner,
.dark-theme .investors-dashboard .el-textarea__inner {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .investors-dashboard .el-select-dropdown,
.dark-theme .investors-dashboard .el-select-dropdown__item,
.dark-theme .investors-dashboard .el-picker-panel,
.dark-theme .investors-dashboard .el-date-picker,
.dark-theme .investors-dashboard .el-cascader-menus,
.dark-theme .investors-dashboard .el-dropdown-menu {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .investors-dashboard .el-dialog,
.dark-theme .investors-dashboard .el-dialog__body,
.dark-theme .investors-dashboard .el-dialog__header,
.dark-theme .investors-dashboard .el-dialog__footer {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}
.dark-theme .investors-dashboard .el-loading-mask {
  background: rgba(0, 0, 0, 0.4) !important;
}
.dark-theme .investors-dashboard .el-table .cell {
  color: var(--text-primary) !important;
}

/* Locations page */
.dark-theme .locations-container,
.dark-theme .locations-dashboard {
  background-color: transparent !important;
}

/* Vendors page */
.dark-theme .vendors-container,
.dark-theme .vendors-dashboard {
  background-color: transparent !important;
}

/* User profile page */
.dark-theme .user-profile,
.dark-theme .profile-container {
  background-color: transparent !important;
}

/* Override any remaining white backgrounds in specific components */
.dark-theme .el-row,
.dark-theme .el-col {
  background-color: transparent !important;
}
.dark-theme .el-card.is-always-shadow,
.dark-theme .el-card.is-hover-shadow {
  background-color: var(--bg-card) !important;
}

/* Override Element UI empty states */
.dark-theme .el-empty {
  background-color: transparent !important;
}
.dark-theme .el-empty__image {
  opacity: 0.5;
}

/* Override Element UI result */
.dark-theme .el-result {
  background-color: transparent !important;
}

/* Override Element UI skeleton */
.dark-theme .el-skeleton {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .el-skeleton__item {
  background-color: var(--bg-tertiary) !important;
}

/* Override any remaining white backgrounds with important specificity */
.dark-theme div[class*="container"]:not([class*="highcharts"]):not([class*="el-"]),
.dark-theme section[class*="container"]:not([class*="highcharts"]):not([class*="el-"]),
.dark-theme article[class*="container"]:not([class*="highcharts"]):not([class*="el-"]) {
  background-color: inherit !important;
}

/* Final catch-all for any white backgrounds */
.dark-theme *:not(svg):not(svg *) {
  /* Remove any white background images */
  background-image: none !important;
}
.dark-theme *[class*="bg-"]:not([class*="bg-dark"]):not([class*="bg-primary"]):not([class*="bg-secondary"]):not([class*="bg-tertiary"]):not([class*="bg-card"]):not([class*="bg-medium"]) {
  background-color: var(--bg-medium-grey) !important;
}

/* ============================================
   COMPONENT-SPECIFIC INLINE STYLE OVERRIDES
   ============================================ */

/* AdminDashboard component */
.dark-theme .admin-dashboard .el-table__row,
.dark-theme .admin-dashboard .el-card__body {
  background-color: var(--bg-medium-grey) !important;
}

/* AdminGraphTopPanel component */
.dark-theme .admin-dashboard .stats-container,
.dark-theme .admin-dashboard .chart-container {
  background-color: var(--bg-medium-grey) !important;
}

/* PlayAndEarn component */
.dark-theme .play-earn-container,
.dark-theme .play-earn-container .el-card {
  background-color: var(--bg-medium-grey) !important;
}

/* UserTransactions component */
.dark-theme .user-transactions .el-table__row,
.dark-theme .user-transactions .el-card,
.dark-theme .user-transactions .transaction-item {
  background-color: var(--bg-medium-grey) !important;
}

/* UserReferrals component */
.dark-theme .user-referrals .el-table__row,
.dark-theme .user-referrals .referral-item {
  background-color: var(--bg-medium-grey) !important;
}

/* AdminSettings component */
.dark-theme .admin-settings .el-card,
.dark-theme .admin-settings .settings-panel {
  background-color: var(--bg-medium-grey) !important;
}

/* AdminMessageCenter component */
.dark-theme .admin-message-center .message-item,
.dark-theme .admin-message-center .message-list {
  background-color: var(--bg-medium-grey) !important;
}

/* UserProfile component */
.dark-theme .user-profile .el-card,
.dark-theme .user-profile .profile-section,
.dark-theme .user-profile .el-tabs__content {
  background-color: var(--bg-medium-grey) !important;
}

/* MasterclassDetails component */
.dark-theme .masterclass-details .el-card,
.dark-theme .masterclass-details .content-section {
  background-color: var(--bg-medium-grey) !important;
}

/* ProjectDetails component */
.dark-theme .project-details .el-card,
.dark-theme .project-details .content-section {
  background-color: var(--bg-medium-grey) !important;
}

/* GameView component */
.dark-theme .game-view .el-card,
.dark-theme .game-view .content-section {
  background-color: var(--bg-medium-grey) !important;
}

/* Override any component with scoped styles that have white backgrounds */
.dark-theme [class*="component"] [style*="background"],
.dark-theme [class*="Component"] [style*="background"] {
  background-color: var(--bg-medium-grey) !important;
}

/* Override all Vue component root elements */
.dark-theme .vue-component,
.dark-theme [data-v-],
.dark-theme [class*="vue-"] {
  background-color: inherit !important;
}

/* Force dark backgrounds on all table rows across all components */
.dark-theme .el-table__body .el-table__row,
.dark-theme .el-table__body tr,
.dark-theme .el-table__body td {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .el-table__body .el-table__row:hover,
.dark-theme .el-table__body tr:hover,
.dark-theme .el-table__body tr:hover td {
  background-color: var(--bg-tertiary) !important;
}

/* Override all card bodies */
.dark-theme .el-card__body,
.dark-theme .card-body,
.dark-theme .panel-body {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

/* Override all card headers */
.dark-theme .el-card__header,
.dark-theme .card-header,
.dark-theme .panel-heading {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* ============================================
   DASHBOARD SPECIFIC OVERRIDES
   ============================================ */

/* Dashboard score blocks */
.dark-theme .scores-block {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

/* Dashboard chart containers */
.dark-theme .chart-container {
  background-color: var(--bg-medium-grey) !important;
}

/* Dashboard proof play containers */
.dark-theme .proof-play-container {
  background-color: var(--bg-medium-grey) !important;
}

/* Dashboard play earn containers */
.dark-theme .play-earn-container {
  background-color: var(--bg-medium-grey) !important;
}

/* Dashboard sales container */
.dark-theme .sales-container {
  background-color: var(--bg-medium-grey) !important;
}

/* Dashboard stats containers */
.dark-theme .registrant-stats,
.dark-theme .token-stats,
.dark-theme .demographics-stats,
.dark-theme .latest-signups {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}
.dark-theme .registrant-stats .title,
.dark-theme .token-stats .title,
.dark-theme .demographics-stats .title,
.dark-theme .latest-signups .title {
  color: var(--text-primary) !important;
}

/* Dashboard rewards container */
.dark-theme .rewards-container {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .rewards-container .top-header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
.dark-theme .rewards-container .scores-details {
  background-color: var(--bg-medium-grey) !important;
}

/* ============================================
   REGISTRANTS TABLE OVERRIDES
   ============================================ */
.dark-theme .registrants-table .el-table__row {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .registrants-table .el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .registrants-table .el-table__cell {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .registrants-table .el-table__cell:hover {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .registrants-table h3 {
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}
.dark-theme .registrants-table h4 {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.dark-theme .registrants-table .first-name {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.dark-theme .registrants-table .first-name:hover {
  color: var(--accent-gold) !important;
}

/* ============================================
   ELEMENT UI TABLE OVERRIDES
   ============================================ */
.dark-theme .el-table__row {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .el-table__row.el-table__row--striped {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .el-table__row.el-table__row--striped:hover {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .el-table td,
.dark-theme .el-table th {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-table__body tr:hover > td {
  background-color: var(--bg-tertiary) !important;
}

/* ============================================
   ELEMENT UI SELECT DROPDOWN OVERRIDES
   ============================================ */
.dark-theme .el-select-dropdown__item {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-select-dropdown__item:hover {
  background-color: var(--bg-tertiary) !important;
}
.dark-theme .el-select-dropdown__item.selected {
  background-color: var(--bg-tertiary) !important;
  color: var(--accent-gold) !important;
}

/* ============================================
   ELEMENT UI DATE PICKER OVERRIDES
   ============================================ */
.dark-theme .el-date-picker__header-label,
.dark-theme .el-picker-panel__link-btn {
  color: var(--text-primary) !important;
}
.dark-theme .el-date-table td.available:hover {
  color: var(--accent-gold) !important;
}
.dark-theme .el-date-table td.current:not(.disabled) {
  color: var(--accent-gold) !important;
}
.dark-theme .el-date-table td.today span {
  color: var(--accent-gold) !important;
}

/* ============================================
   ELEMENT UI PAGINATION OVERRIDES
   ============================================ */
.dark-theme .el-pagination .el-pager li {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-pagination .el-pager li:hover {
  color: var(--accent-gold) !important;
}
.dark-theme .el-pagination .el-pager li.active {
  background-color: var(--accent-gold) !important;
  color: var(--text-inverse) !important;
}
.dark-theme .el-pagination button {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-pagination button:hover {
  color: var(--accent-gold) !important;
}
.dark-theme .el-pagination button:disabled {
  color: var(--text-disabled) !important;
}

/* ============================================
   ELEMENT UI INPUT OVERRIDES
   ============================================ */
.dark-theme .el-input__inner {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-input__inner:focus {
  border-color: var(--accent-gold) !important;
}
.dark-theme .el-textarea__inner {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-date-editor .el-input__inner {
  background-color: var(--bg-secondary) !important;
}
.dark-theme .el-cascader-panel {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-tree-node__content {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}
.dark-theme .el-transfer-panel {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-upload-dragger {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
.dark-theme .el-color-dropdown {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* ============================================
   GENERAL COMPONENT OVERRIDES
   ============================================ */
.dark-theme .components {
  background-color: transparent !important;
}
.dark-theme .main-layout__container {
  background-color: var(--bg-primary) !important;
}
.dark-theme .main-layout {
  background-color: var(--bg-primary) !important;
}

/* Override Bootstrap container classes */
.dark-theme .container-fluid,
.dark-theme .container {
  background-color: var(--bg-primary) !important;
}

/* Override router-view and main content wrapper */
.dark-theme router-view,
.dark-theme [class*="content"],
.dark-theme [class*="wrapper"],
.dark-theme [class*="page"] {
  background-color: var(--bg-primary) !important;
}

/* Override any remaining white backgrounds */
.dark-theme [class*="white"],
.dark-theme [style*="background-color: white"],
.dark-theme [style*="background-color: #fff"],
.dark-theme [style*="background-color: #FFF"],
.dark-theme [style*="background-color: #FFFFFF"],
.dark-theme [style*="background: white"],
.dark-theme [style*="background: #fff"],
.dark-theme [style*="background: #FFF"],
.dark-theme [style*="background: #FFFFFF"],
.dark-theme [style*="background: whitesmoke"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* ============================================
   HIGHCHARTS OVERRIDES
   ============================================ */

/* Override Highcharts SVG white backgrounds */
.dark-theme .highcharts-background,
.dark-theme .highcharts-container .highcharts-background,
.dark-theme svg .highcharts-background {
  fill: var(--bg-medium-grey) !important;
}

/* Override any SVG elements with white fills */
.dark-theme svg rect[fill="#ffffff"],
.dark-theme svg rect[fill="#fff"],
.dark-theme svg rect[fill="#FFF"],
.dark-theme svg rect[fill="white"],
.dark-theme svg .highcharts-background[fill="#ffffff"],
.dark-theme svg .highcharts-background[fill="#fff"],
.dark-theme svg .highcharts-background[fill="#FFF"],
.dark-theme svg .highcharts-background[fill="white"] {
  fill: var(--bg-medium-grey) !important;
}

/* Highcharts container backgrounds */
.dark-theme .highcharts-container {
  background-color: var(--bg-medium-grey) !important;
}
.dark-theme .highcharts-container svg {
  background-color: var(--bg-medium-grey) !important;
}

/* Highcharts plot backgrounds */
.dark-theme .highcharts-plot-background {
  fill: var(--bg-secondary) !important;
}

/* Highcharts chart backgrounds */
.dark-theme .highcharts-chart {
  background-color: var(--bg-medium-grey) !important;
}

/* Highcharts text colors for readability */
.dark-theme .highcharts-title,
.dark-theme .highcharts-subtitle,
.dark-theme .highcharts-axis-labels,
.dark-theme .highcharts-legend-item,
.dark-theme .highcharts-data-label {
  fill: var(--text-primary) !important;
  color: var(--text-primary) !important;
}
.dark-theme .highcharts-axis-line,
.dark-theme .highcharts-tick {
  stroke: var(--border-color) !important;
}
.dark-theme .highcharts-grid-line {
  stroke: var(--border-color) !important;
}

/* Highcharts tooltip */
.dark-theme .highcharts-tooltip {
  fill: var(--bg-card) !important;
}
.dark-theme .highcharts-tooltip-box {
  fill: var(--bg-card) !important;
  stroke: var(--border-color) !important;
}
.dark-theme .highcharts-tooltip text {
  fill: var(--text-primary) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
.dark-theme h1 {
    font-size: 2rem;
}
.dark-theme h2 {
    font-size: 1.5rem;
}
.dark-theme .card {
    border-radius: var(--radius-md);
}
}


/**
 * Dark Theme Foundation - Premium Luxury Suite Platform
 * Color Palette: Deep blacks, luxury gold accents, premium purple
 * Last Updated: 2025-12-19 - Comprehensive white background fixes
 * Version: 2.0 - Ultra-aggressive overrides
 * NUCLEAR OPTION: Force dark backgrounds on everything
 */

/* ============================================
   NUCLEAR OPTION - FORCE DARK ON EVERYTHING
   ============================================ */

/* Override ALL white backgrounds from style.css - MUST BE AFTER style.css loads */
/* These match the exact selectors from style.css but with .dark-theme prefix for higher specificity */
.dark-theme .sidebar__bkg {
  background-color: var(--bg-secondary) !important;
  border-right-color: var(--bg-secondary) !important;
}

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

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

/* Override mobile sidebar white background */
@media (max-width: 767px) {
  .dark-theme .sidebar__inside {
    background-color: var(--bg-secondary) !important;
  }
}

/* Override any element with white background from style.css */
.dark-theme [style*="background-color: #FFFFFF"],
.dark-theme [style*="background-color: white"],
.dark-theme [style*="background: white"],
.dark-theme [style*="background: #FFFFFF"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* Override ALL computed white backgrounds with maximum specificity */
.dark-theme *[style*="background-color: white"],
.dark-theme *[style*="background-color: #fff"],
.dark-theme *[style*="background-color: #FFF"],
.dark-theme *[style*="background-color: #FFFFFF"],
.dark-theme *[style*="background-color: #ffffff"],
.dark-theme *[style*="background: white"],
.dark-theme *[style*="background: #fff"],
.dark-theme *[style*="background: #FFF"],
.dark-theme *[style*="background: #FFFFFF"],
.dark-theme *[style*="background: #ffffff"],
body.dark-theme *[style*="background"],
.dark-theme body *[style*="background"],
#app.dark-theme *[style*="background"],
.dark-theme #app *[style*="background"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

:root {
  /* ============================================
     PRIMARY COLORS - Backgrounds
     ============================================ */
  --bg-primary: #0A0A0F;
  --bg-secondary: #1A1A24;
  --bg-tertiary: #252530;
  --bg-hover: #2A2A35;
  --bg-card: #1E1E2A;
  --bg-modal: rgba(10, 10, 15, 0.95);
  --bg-overlay: rgba(0, 0, 0, 0.75);
  --bg-medium-grey: #3A3A45; /* Medium grey for white backgrounds */
  
  /* Override style.css variables when dark theme is active */
  --bg-white: #3A3A45;
  --bg-sidebar: #1A1A24;
  --bg-sidebar-hover: #252530;
  --bg-card: #3A3A45;
  --bg-table-row: #3A3A45;
  --bg-table-row-even: #2A2A35;
  --bg-modal: #3A3A45;
  --bg-accordion: #3A3A45;
  --text-primary: #E0E0E0;
  --text-primary-inverse: #000000;
  --border-color: #252530;

  /* ============================================
     ACCENT COLORS - Luxury Gold & Purple
     ============================================ */
  --accent-gold: #D4AF37;
  --accent-gold-light: #F4D03F;
  --accent-gold-dark: #B8941F;
  --accent-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
  
  --accent-purple: #7B2CBF;
  --accent-purple-light: #9D4EDD;
  --accent-purple-dark: #5A1A8F;
  --accent-purple-gradient: linear-gradient(135deg, #7B2CBF 0%, #9D4EDD 100%);

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-primary: #FFFFFF;
  --text-secondary: #B8B8C8;
  --text-muted: #6B6B7A;
  --text-disabled: #4A4A55;
  --text-inverse: #0A0A0F; /* For text on gold/purple backgrounds */

  /* ============================================
     STATUS COLORS
     ============================================ */
  --success: #10B981;
  --success-light: #34D399;
  --success-dark: #059669;
  
  --warning: #F59E0B;
  --warning-light: #FBBF24;
  --warning-dark: #D97706;
  
  --error: #EF4444;
  --error-light: #F87171;
  --error-dark: #DC2626;
  
  --info: #3B82F6;
  --info-light: #60A5FA;
  --info-dark: #2563EB;

  /* ============================================
     BORDERS & DIVIDERS
     ============================================ */
  --border-color: #2A2A35;
  --border-light: #1F1F2A;
  --border-focus: #D4AF37;
  --divider-color: #1F1F2A;
  --divider-light: #2A2A35;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-gold: 0 4px 14px 0 rgba(212, 175, 55, 0.3);
  --shadow-purple: 0 4px 14px 0 rgba(123, 44, 191, 0.3);

  /* ============================================
     GLASSMORPHISM
     ============================================ */
  --glass-bg: rgba(30, 30, 42, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-backdrop: blur(10px);

  /* ============================================
     SPACING (Base: 4px)
     ============================================ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', serif;
  --font-body: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* ============================================
   GLOBAL DARK THEME APPLICATIONS
   ============================================ */

/* Override body white background */
body.dark-theme,
.dark-theme body,
.dark-theme {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
  font-family: var(--font-body);
}

/* Override html element */
html.dark-theme,
.dark-theme html {
  background-color: var(--bg-primary) !important;
}

/* Override main content containers - ULTRA AGGRESSIVE */
.dark-theme .main-layout,
.dark-theme .main-layout__container,
.dark-theme .container-fluid,
.dark-theme .container,
.dark-theme main,
.dark-theme section,
.dark-theme article,
.dark-theme div:not(.sidebar):not(.sidebar__inside):not(.sidebar__bkg),
.dark-theme .components,
.dark-theme .filters {
  background-color: var(--bg-primary) !important;
  background: var(--bg-primary) !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: 700;
}

.dark-theme h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

.dark-theme h2 {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
}

.dark-theme h3 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: var(--spacing-md);
}

.dark-theme p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

/* ============================================
   CARDS
   ============================================ */

.dark-theme .card,
.dark-theme .el-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.dark-theme .card:hover,
.dark-theme .el-card:hover {
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

/* Glassmorphism Card */
.dark-theme .card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ============================================
   BUTTONS
   ============================================ */

.dark-theme .btn-primary,
.dark-theme .el-button--primary {
  background: var(--accent-gold-gradient);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  padding: var(--spacing-sm) var(--spacing-lg);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-gold);
}

.dark-theme .btn-primary:hover,
.dark-theme .el-button--primary:hover {
  background: var(--accent-gold-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.dark-theme .el-button--primary:focus,
.dark-theme .el-button--primary:active {
  background: var(--accent-gold-light);
  color: var(--text-inverse);
  border: none;
}

.dark-theme .el-button--primary.is-plain,
.dark-theme .el-button--primary.is-plain:focus,
.dark-theme .el-button--primary.is-plain:hover,
.dark-theme .el-button--primary.is-plain:active,
.dark-theme .investors-dashboard .el-button--primary {
  background: var(--accent-gold-gradient) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  box-shadow: var(--shadow-gold) !important;
}

/* Global: force dark backgrounds across pages */
.dark-theme,
.dark-theme #app,
.dark-theme main,
.dark-theme .main-layout,
.dark-theme .main-layout__container,
.dark-theme .container-fluid,
.dark-theme .container,
.dark-theme main,
.dark-theme section,
.dark-theme article,
.dark-theme .page-content,
.dark-theme .content,
html,
body {
  background-color: var(--bg-primary) !important;
  min-height: 100vh;
}

/* Global tables */
.dark-theme .el-table,
.dark-theme .el-table__body-wrapper,
.dark-theme .el-table__header-wrapper,
.dark-theme .el-table__row,
.dark-theme .el-table th,
.dark-theme .el-table td,
.dark-theme .el-table__empty-block,
.dark-theme .el-table__empty-block-inner {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}

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

/* Global cards and panels */
.dark-theme .el-card,
.dark-theme .el-card__body,
.dark-theme .el-collapse,
.dark-theme .el-collapse-item__header,
.dark-theme .el-collapse-item__content {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Global dialogs & overlays */
.dark-theme .el-dialog,
.dark-theme .el-dialog__body,
.dark-theme .el-dialog__header,
.dark-theme .el-dialog__footer,
.dark-theme .el-message-box,
.dark-theme .el-popover,
.dark-theme .el-tooltip__popper {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Form labels and fields inside dialogs (e.g., Create Masterclass) */
.dark-theme .el-form-item__label {
  color: var(--text-primary) !important;
}

.dark-theme .el-dialog .el-input__inner,
.dark-theme .el-dialog .el-textarea__inner,
.dark-theme .el-dialog .el-select .el-input__inner,
.dark-theme .el-dialog .el-input-number__decrease,
.dark-theme .el-dialog .el-input-number__increase {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-loading-mask {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Global inputs/dropdowns/pickers */
.dark-theme .el-input__inner,
.dark-theme .el-textarea__inner,
.dark-theme .el-select-dropdown,
.dark-theme .el-select-dropdown__item,
.dark-theme .el-picker-panel,
.dark-theme .el-date-picker,
.dark-theme .el-cascader-menus,
.dark-theme .el-dropdown-menu {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Types page */
.dark-theme .types-page {
  background-color: var(--bg-primary) !important;
  min-height: 100vh;
}

.dark-theme .types-page .type-card,
.dark-theme .types-page .type-entry {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Catch any inline white backgrounds */
.dark-theme *[style*="#fff"],
.dark-theme *[style*="#FFF"],
.dark-theme *[style*="rgb(255, 255, 255)"],
.dark-theme *[style*="background: white"],
.dark-theme *[style*="background-color: white"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

.dark-theme .btn-secondary,
.dark-theme .el-button--default {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.dark-theme .btn-secondary:hover,
.dark-theme .el-button--default:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--accent-purple);
  color: var(--accent-purple-light);
}

.dark-theme .btn-outline {
  background-color: transparent;
  color: var(--accent-gold);
  border: 2px solid var(--accent-gold);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.dark-theme .btn-outline:hover {
  background-color: var(--accent-gold);
  color: var(--text-inverse);
}

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

.dark-theme .el-input__inner,
.dark-theme input[type="text"],
.dark-theme input[type="email"],
.dark-theme input[type="password"],
.dark-theme textarea,
.dark-theme select {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all var(--transition-base);
}

.dark-theme .el-input__inner:focus,
.dark-theme input:focus,
.dark-theme textarea:focus,
.dark-theme select:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  outline: none;
}

.dark-theme .el-input__inner::-moz-placeholder, .dark-theme input::-moz-placeholder {
  color: var(--text-muted);
}

.dark-theme .el-input__inner::placeholder,
.dark-theme input::placeholder {
  color: var(--text-muted);
}

/* ============================================
   SIDEBAR
   ============================================ */

.dark-theme .sidebar {
  background-color: var(--bg-secondary) !important;
  border-right: 1px solid var(--border-color);
}

.dark-theme .sidebar__bkg {
  background-color: var(--bg-secondary) !important;
  border-right-color: var(--bg-secondary) !important;
}

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

.dark-theme .sidebar__overlay-bkg {
  background: rgba(255, 255, 255, 0.01) !important;
}

.dark-theme .sidebar__link {
  color: var(--text-secondary);
  transition: all var(--transition-base);
}

.dark-theme .sidebar__link:hover {
  color: var(--accent-gold);
  background-color: var(--bg-tertiary);
}

.dark-theme .sidebar__list-item.active .sidebar__link {
  color: var(--accent-gold);
  background-color: var(--bg-tertiary);
  border-left: 3px solid var(--accent-gold);
}

.dark-theme .sidebar__list-item.active .sidebar__icon-container {
  background-color: var(--bg-tertiary) !important;
}

.dark-theme .sidebar__list-item.active::after {
  border-left-color: var(--bg-tertiary) !important;
}

/* Sidebar hover states */
.dark-theme .sidebar:hover .sidebar__bkg {
  background-color: var(--bg-secondary) !important;
  border-color: var(--bg-secondary) !important;
}

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

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

.dark-theme .sidebar:hover .sidebar__list-item.active {
  background-color: var(--bg-tertiary) !important;
}

/* Sidebar item label */
.dark-theme .sidebar__item-label {
  color: var(--text-secondary) !important;
}

.dark-theme .sidebar:hover .sidebar__item-label {
  color: var(--text-secondary) !important;
}

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

/* Element UI Table - COMPLETE OVERRIDE - Maximum Specificity */
.dark-theme .el-table,
.dark-theme .el-table__body-wrapper,
.dark-theme .el-table__header-wrapper,
.dark-theme .el-table__empty-block,
.dark-theme .el-table__empty-block-inner,
.dark-theme .el-table .el-table__empty-block,
.dark-theme .el-table .el-table__empty-block-inner,
.dark-theme .el-table__body-wrapper .el-table__empty-block,
.dark-theme .el-table__body-wrapper .el-table__empty-block-inner {
  background-color: #3A3A45 !important;
  background: #3A3A45 !important;
}

.dark-theme .el-table__empty-text,
.dark-theme .el-table__empty-block .el-table__empty-text {
  color: var(--text-primary) !important;
}

.dark-theme .el-table th,
.dark-theme .el-table__header th,
.dark-theme .el-table thead th {
  background-color: #3A3A45 !important;
  color: #E0E0E0 !important;
  border-bottom: 1px solid #252530 !important;
}

.dark-theme .el-table td,
.dark-theme .el-table__row td,
.dark-theme .el-table tbody td {
  background-color: #3A3A45 !important;
  border-bottom: 1px solid #252530 !important;
  color: #E0E0E0 !important;
}

.dark-theme .el-table tr:hover,
.dark-theme .el-table__row:hover,
.dark-theme .el-table tbody tr:hover {
  background-color: #252530 !important;
}

.dark-theme .el-table__row,
.dark-theme .el-table tbody tr {
  background-color: #3A3A45 !important;
}

/* Override any inline styles Element UI might add */
.dark-theme .el-table[style*="background"],
.dark-theme .el-table__body-wrapper[style*="background"],
.dark-theme .el-table__empty-block[style*="background"],
.dark-theme .el-table__empty-block-inner[style*="background"] {
  background-color: #3A3A45 !important;
  background: #3A3A45 !important;
}

/* ============================================
   MODALS & DIALOGS
   ============================================ */

.dark-theme .el-dialog {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

.dark-theme .el-dialog__header {
  border-bottom: 1px solid var(--border-color);
}

.dark-theme .el-dialog__title {
  color: var(--text-primary);
  font-family: var(--font-heading);
}

.dark-theme .el-dialog__body {
  color: var(--text-secondary);
}

/* ============================================
   BADGES & TAGS
   ============================================ */

.dark-theme .badge,
.dark-theme .el-tag {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.875rem;
}

.dark-theme .badge-success {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border-color: var(--success);
}

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

.dark-theme .badge-error {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--error);
  border-color: var(--error);
}

.dark-theme .badge-gold {
  background: var(--accent-gold-gradient);
  color: var(--text-inverse);
  border: none;
}

/* ============================================
   DIVIDERS
   ============================================ */

.dark-theme .el-divider {
  border-color: var(--divider-color);
}

.dark-theme hr {
  border-color: var(--divider-color);
}

/* ============================================
   SCROLLBARS
   ============================================ */

.dark-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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

/* ============================================
   UTILITY CLASSES
   ============================================ */

.dark-theme .text-gold {
  color: var(--accent-gold);
}

.dark-theme .text-purple {
  color: var(--accent-purple);
}

.dark-theme .bg-gold {
  background: var(--accent-gold-gradient);
  color: var(--text-inverse);
}

.dark-theme .bg-purple {
  background: var(--accent-purple-gradient);
  color: var(--text-primary);
}

.dark-theme .border-gold {
  border-color: var(--accent-gold);
}

.dark-theme .border-purple {
  border-color: var(--accent-purple);
}

.dark-theme .shadow-gold {
  box-shadow: var(--shadow-gold);
}

.dark-theme .shadow-purple {
  box-shadow: var(--shadow-purple);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.dark-theme .fade-in {
  animation: fadeIn var(--transition-base);
}

.dark-theme .slide-in {
  animation: slideIn var(--transition-base);
}

/* ============================================
   OVERRIDE WHITE BACKGROUNDS TO MEDIUM GREY
   ============================================ */

/* Override any white backgrounds with medium grey */
.dark-theme * {
  background-color: inherit;
}

.dark-theme [style*="background-color: white"],
.dark-theme [style*="background-color: #fff"],
.dark-theme [style*="background-color: #FFF"],
.dark-theme [style*="background-color: #FFFFFF"],
.dark-theme [style*="background: white"],
.dark-theme [style*="background: #fff"],
.dark-theme [style*="background: #FFF"],
.dark-theme [style*="background: #FFFFFF"] {
  background-color: var(--bg-medium-grey) !important;
}

/* Override common white background classes */
.dark-theme .el-card__body,
.dark-theme .el-dialog__body,
.dark-theme .el-table__body-wrapper,
.dark-theme .el-table__header-wrapper,
.dark-theme .el-form-item__content,
.dark-theme .el-select-dropdown,
.dark-theme .el-picker-panel,
.dark-theme .el-date-picker,
.dark-theme .el-time-picker,
.dark-theme .el-popover,
.dark-theme .el-tooltip__popper,
.dark-theme .el-message-box,
.dark-theme .el-notification,
.dark-theme .el-loading-mask {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Element UI components with white backgrounds */
.dark-theme .el-card {
  background-color: var(--bg-card) !important;
}

.dark-theme .el-card__body {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .el-dialog {
  background-color: var(--bg-card) !important;
}

.dark-theme .el-dialog__body {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .el-table {
  background-color: var(--bg-card) !important;
}

.dark-theme .el-table__body-wrapper {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .el-table__header-wrapper {
  background-color: var(--bg-secondary) !important;
}

.dark-theme .el-select-dropdown {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-picker-panel {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-popover {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-message-box {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-notification {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* Override any divs or containers with white backgrounds */
.dark-theme div[class*="white"],
.dark-theme div[class*="bg-white"],
.dark-theme .white-bg,
.dark-theme .bg-white {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Bootstrap white backgrounds if used */
.dark-theme .bg-light {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .bg-white {
  background-color: var(--bg-medium-grey) !important;
}

/* Override any remaining white backgrounds from base styles */
.dark-theme .modal-content,
.dark-theme .modal-body,
.dark-theme .modal-header,
.dark-theme .modal-footer {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Element UI form components */
.dark-theme .el-form,
.dark-theme .el-form-item,
.dark-theme .el-form-item__content,
.dark-theme .el-form-item__label {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Override Element UI tabs */
.dark-theme .el-tabs,
.dark-theme .el-tabs__content,
.dark-theme .el-tabs__header {
  background-color: transparent !important;
}

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

.dark-theme .el-tabs__item.is-active {
  color: var(--accent-gold) !important;
}

/* Override Element UI dialog header and footer */
.dark-theme .el-dialog__header {
  background-color: var(--bg-card) !important;
  border-bottom-color: var(--border-color) !important;
}

.dark-theme .el-dialog__footer {
  background-color: var(--bg-card) !important;
  border-top-color: var(--border-color) !important;
}

/* Override any div elements that might have white backgrounds */
.dark-theme div:not([class*="highcharts"]):not([class*="el-"]):not([class*="sidebar"]) {
  background-color: inherit;
}

/* Force override for any element with computed white background */
.dark-theme * {
  background-image: none !important;
}

.dark-theme *[style*="background"] {
  background-color: var(--bg-medium-grey) !important;
  background-image: none !important;
}

/* Override table white backgrounds from style.css - match exact selectors */
.dark-theme .table__quis-table,
.dark-theme .quis-table {
  background-color: transparent !important;
}

.dark-theme .table__quis-table h3,
.dark-theme .table__quis-table h4 {
  color: var(--text-primary) !important;
}

/* ============================================
   COMPREHENSIVE WHITE BACKGROUND FIXES
   ============================================ */

/* Override all common white background classes */
.dark-theme .white,
.dark-theme .bg-white,
.dark-theme .white-bg,
.dark-theme [class*="white"],
.dark-theme [class*="White"] {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Bootstrap classes */
.dark-theme .bg-light,
.dark-theme .bg-white,
.dark-theme .card-white,
.dark-theme .panel-white {
  background-color: var(--bg-medium-grey) !important;
}

/* Override common container classes */
.dark-theme .content-wrapper,
.dark-theme .page-wrapper,
.dark-theme .main-content,
.dark-theme .content-area,
.dark-theme .page-content {
  background-color: var(--bg-primary) !important;
}

/* Override all table-related white backgrounds */
.dark-theme .el-table__body-wrapper,
.dark-theme .el-table__header-wrapper,
.dark-theme .el-table__fixed,
.dark-theme .el-table__fixed-right,
.dark-theme .el-table__fixed-body-wrapper {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .el-table__body tr,
.dark-theme .el-table__body td,
.dark-theme .el-table__header th {
  background-color: transparent !important;
}

.dark-theme .el-table__body tr.el-table__row {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .el-table__body tr.el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Override card and panel backgrounds */
.dark-theme .card,
.dark-theme .panel,
.dark-theme .box,
.dark-theme .widget {
  background-color: var(--bg-card) !important;
}

.dark-theme .card-body,
.dark-theme .card-header,
.dark-theme .card-footer,
.dark-theme .panel-body,
.dark-theme .panel-heading {
  background-color: var(--bg-medium-grey) !important;
}

/* Override form elements */
.dark-theme .form-group,
.dark-theme .form-control,
.dark-theme .input-group,
.dark-theme .input-group-addon {
  background-color: var(--bg-secondary) !important;
}

/* Override list and list items */
.dark-theme ul,
.dark-theme ol,
.dark-theme li {
  background-color: transparent !important;
}

.dark-theme .list-group,
.dark-theme .list-group-item {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

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

/* Override tabs */
.dark-theme .nav-tabs,
.dark-theme .nav-tabs .nav-link,
.dark-theme .tab-content,
.dark-theme .tab-pane {
  background-color: transparent !important;
}

.dark-theme .nav-tabs .nav-link.active {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* Override accordion and collapse */
.dark-theme .accordion,
.dark-theme .accordion-item,
.dark-theme .accordion-header,
.dark-theme .accordion-body,
.dark-theme .collapse,
.dark-theme .collapsing {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* Override badges and labels */
.dark-theme .badge,
.dark-theme .label {
  background-color: var(--bg-tertiary) !important;
}

/* Override dropdown menus */
.dark-theme .dropdown-menu,
.dark-theme .dropdown-item {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

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

/* Override pagination */
.dark-theme .pagination,
.dark-theme .page-item,
.dark-theme .page-link {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .page-item.active .page-link {
  background-color: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
}

/* Override breadcrumbs */
.dark-theme .breadcrumb,
.dark-theme .breadcrumb-item {
  background-color: transparent !important;
}

/* Override alerts */
.dark-theme .alert {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Override progress bars */
.dark-theme .progress {
  background-color: var(--bg-secondary) !important;
}

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

/* Override tooltips and popovers */
.dark-theme .tooltip,
.dark-theme .tooltip-inner,
.dark-theme .popover,
.dark-theme .popover-body {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Override all Element UI dropdowns and popups */
.dark-theme .el-dropdown-menu,
.dark-theme .el-dropdown-menu__item {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-dropdown-menu__item:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Override Element UI autocomplete */
.dark-theme .el-autocomplete-suggestion {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-autocomplete-suggestion__list li {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-autocomplete-suggestion__list li:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Override Element UI time picker */
.dark-theme .el-time-panel {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* Override Element UI steps */
.dark-theme .el-steps {
  background-color: transparent !important;
}

.dark-theme .el-step__head {
  background-color: var(--bg-secondary) !important;
}

/* Override Element UI timeline */
.dark-theme .el-timeline-item__wrapper {
  background-color: transparent !important;
}

/* Override Element UI drawer */
.dark-theme .el-drawer {
  background-color: var(--bg-card) !important;
}

.dark-theme .el-drawer__body {
  background-color: var(--bg-medium-grey) !important;
}

/* Override Element UI collapse */
.dark-theme .el-collapse {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-collapse-item__header {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-collapse-item__content {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Override Element UI carousel */
.dark-theme .el-carousel__arrow {
  background-color: var(--bg-secondary) !important;
}

.dark-theme .el-carousel__indicators {
  background-color: transparent !important;
}

/* Override any remaining white backgrounds with inline styles - ULTRA AGGRESSIVE */
.dark-theme [style*="background-color: white"],
.dark-theme [style*="background-color: #fff"],
.dark-theme [style*="background-color: #FFF"],
.dark-theme [style*="background-color: #FFFFFF"],
.dark-theme [style*="background-color: #ffffff"],
.dark-theme [style*="background: white"],
.dark-theme [style*="background: #fff"],
.dark-theme [style*="background: #FFF"],
.dark-theme [style*="background: #FFFFFF"],
.dark-theme [style*="background: #ffffff"],
.dark-theme [style*="background-color: rgb(255, 255, 255)"],
.dark-theme [style*="background-color: rgba(255, 255, 255"],
body.dark-theme [style*="background"],
.dark-theme body [style*="background"],
#app.dark-theme [style*="background"],
.dark-theme #app [style*="background"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* Force override ALL divs and sections that might have white backgrounds */
.dark-theme div:not(.sidebar):not(.sidebar__inside):not(.sidebar__bkg):not(.highcharts-container):not(.highcharts-background),
.dark-theme section:not(.sidebar),
.dark-theme article:not(.sidebar) {
  background-color: inherit !important;
}

/* Nuclear option: Override everything that's not explicitly dark */
.dark-theme *:not(.sidebar):not(.sidebar__inside):not(.sidebar__bkg):not(.highcharts-container):not(.highcharts-background):not(svg):not(svg *) {
  /* Force check for white backgrounds */
}

/* Override computed styles - use attribute selector for inline styles */
.dark-theme [style*="background"]:not([style*="background-color: var"]):not([style*="background: var"]) {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* Override computed styles that might be white */
.dark-theme * {
  /* Force dark backgrounds on all elements unless explicitly overridden */
}

/* Specific overrides for common page components */
.dark-theme .components,
.dark-theme .filters,
.dark-theme .quis-table,
.dark-theme .table__quis-table {
  background-color: transparent !important;
}

/* Override any remaining Element UI components */
.dark-theme .el-loading-mask {
  background-color: rgba(10, 10, 15, 0.8) !important;
}

.dark-theme .el-loading-spinner {
  color: var(--accent-gold) !important;
}

/* Override Element UI message boxes and notifications */
.dark-theme .el-message {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

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

/* Override any modals or overlays */
.dark-theme .modal-backdrop,
.dark-theme .v-modal {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

/* ============================================
   PAGE-SPECIFIC OVERRIDES
   ============================================ */

/* Dashboard page */
.dark-theme .dashboard,
.dark-theme .admin-dashboard {
  background-color: var(--bg-primary) !important;
}

/* Games page */
.dark-theme .games-container,
.dark-theme .game-list {
  background-color: transparent !important;
}

/* Projects/Launch page */
.dark-theme .project-container,
.dark-theme .launch-container {
  background-color: transparent !important;
}

/* Activities page */
.dark-theme .activities-container,
.dark-theme .activity-list {
  background-color: transparent !important;
}

/* Admins page */
.dark-theme .admins-container,
.dark-theme .admin-list {
  background-color: transparent !important;
}

/* Settings page */
.dark-theme .settings-container,
.dark-theme .settings-panel {
  background-color: transparent !important;
}

/* Messages page */
.dark-theme .message-container,
.dark-theme .message-list {
  background-color: transparent !important;
}

/* Masterclasses page */
.dark-theme .masterclass-container,
.dark-theme .masterclass-list {
  background-color: transparent !important;
}

/* Voting page */
.dark-theme .voting-container,
.dark-theme .voting-list {
  background-color: transparent !important;
}

/* NFTs page */
.dark-theme .nft-container,
.dark-theme .nft-list {
  background-color: transparent !important;
}

/* Bridge page */
.dark-theme .bridge-container,
.dark-theme .bridge-stats {
  background-color: transparent !important;
}

/* Promos page */
.dark-theme .promo-container,
.dark-theme .promo-list {
  background-color: transparent !important;
}

/* Tokens page */
.dark-theme .token-container,
.dark-theme .token-list {
  background-color: transparent !important;
}

/* Events page */
.dark-theme .events-container,
.dark-theme .event-list {
  background-color: transparent !important;
}

/* Blockchain page */
.dark-theme .blockchain-container,
.dark-theme .blockchain-dashboard {
  background-color: transparent !important;
}

/* AI page */
.dark-theme .ai-container,
.dark-theme .ai-dashboard {
  background-color: transparent !important;
}

/* Investors page */
.dark-theme .investors-container,
.dark-theme .investors-dashboard {
  background-color: var(--bg-primary) !important;
}

.dark-theme .investors-dashboard .page-header,
.dark-theme .investors-dashboard .stats-grid,
.dark-theme .investors-dashboard .filters-section {
  background-color: transparent !important;
}

.dark-theme .investors-dashboard .stat-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

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

.dark-theme .investors-dashboard .stat-label {
  color: var(--text-secondary) !important;
}

/* Investors table specific overrides */
.dark-theme .investors-dashboard .el-table,
.dark-theme .investors-dashboard .el-table__body-wrapper,
.dark-theme .investors-dashboard .el-table__header-wrapper {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .investors-dashboard .el-table__row {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .investors-dashboard .el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark-theme .investors-dashboard .el-table th,
.dark-theme .investors-dashboard .el-table td {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark-theme .investors-dashboard .el-table__empty-block {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .investors-dashboard .el-table__empty-text {
  color: var(--text-secondary) !important;
}

/* Override Element UI table empty state completely */
.dark-theme .el-table__empty-block,
.dark-theme .el-table__empty-block-inner {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

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

/* Override any white backgrounds in the investors dashboard container */
.dark-theme .investors-dashboard > *,
.dark-theme .investors-dashboard div,
.dark-theme .investors-dashboard section {
  background-color: inherit !important;
}

/* Force override for any element with computed white background in investors page */
.dark-theme .investors-dashboard [style*="background"],
.dark-theme .investors-dashboard [style*="background-color"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* Ensure page background stays dark and fills viewport */
.dark-theme,
.dark-theme html,
.dark-theme body,
.dark-theme #app,
.dark-theme main,
.dark-theme .main-layout,
.dark-theme .main-layout__container,
.dark-theme .container-fluid,
.dark-theme .container {
  background-color: var(--bg-primary) !important;
}

/* Vendors page: force gold buttons to filled style */
.dark-theme .vendors-dashboard .el-button--primary,
.dark-theme .vendors-dashboard .el-button--primary.is-plain,
.dark-theme .vendors-dashboard .el-button--primary:focus,
.dark-theme .vendors-dashboard .el-button--primary:active,
.dark-theme .vendors-dashboard .el-button--primary:hover {
  background: var(--accent-gold-gradient) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  box-shadow: var(--shadow-gold) !important;
}

.dark-theme .investors-dashboard {
  background-color: var(--bg-primary) !important;
  min-height: 100vh;
}

/* Investors page - force dark backgrounds for inputs, dropdowns, dialogs */
.dark-theme .investors-dashboard .el-input__inner,
.dark-theme .investors-dashboard .el-textarea__inner {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .investors-dashboard .el-select-dropdown,
.dark-theme .investors-dashboard .el-select-dropdown__item,
.dark-theme .investors-dashboard .el-picker-panel,
.dark-theme .investors-dashboard .el-date-picker,
.dark-theme .investors-dashboard .el-cascader-menus,
.dark-theme .investors-dashboard .el-dropdown-menu {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .investors-dashboard .el-dialog,
.dark-theme .investors-dashboard .el-dialog__body,
.dark-theme .investors-dashboard .el-dialog__header,
.dark-theme .investors-dashboard .el-dialog__footer {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.dark-theme .investors-dashboard .el-loading-mask {
  background: rgba(0, 0, 0, 0.4) !important;
}

.dark-theme .investors-dashboard .el-table .cell {
  color: var(--text-primary) !important;
}

/* Locations page */
.dark-theme .locations-container,
.dark-theme .locations-dashboard {
  background-color: transparent !important;
}

/* Vendors page */
.dark-theme .vendors-container,
.dark-theme .vendors-dashboard {
  background-color: transparent !important;
}

/* User profile page */
.dark-theme .user-profile,
.dark-theme .profile-container {
  background-color: transparent !important;
}

/* Override any remaining white backgrounds in specific components */
.dark-theme .el-row,
.dark-theme .el-col {
  background-color: transparent !important;
}

.dark-theme .el-card.is-always-shadow,
.dark-theme .el-card.is-hover-shadow {
  background-color: var(--bg-card) !important;
}

/* Override Element UI empty states */
.dark-theme .el-empty {
  background-color: transparent !important;
}

.dark-theme .el-empty__image {
  opacity: 0.5;
}

/* Override Element UI result */
.dark-theme .el-result {
  background-color: transparent !important;
}

/* Override Element UI skeleton */
.dark-theme .el-skeleton {
  background-color: var(--bg-secondary) !important;
}

.dark-theme .el-skeleton__item {
  background-color: var(--bg-tertiary) !important;
}

/* Override any remaining white backgrounds with important specificity */
.dark-theme div[class*="container"]:not([class*="highcharts"]):not([class*="el-"]),
.dark-theme section[class*="container"]:not([class*="highcharts"]):not([class*="el-"]),
.dark-theme article[class*="container"]:not([class*="highcharts"]):not([class*="el-"]) {
  background-color: inherit !important;
}

/* Final catch-all for any white backgrounds */
.dark-theme *:not(svg):not(svg *) {
  /* Remove any white background images */
  background-image: none !important;
}

.dark-theme *[class*="bg-"]:not([class*="bg-dark"]):not([class*="bg-primary"]):not([class*="bg-secondary"]):not([class*="bg-tertiary"]):not([class*="bg-card"]):not([class*="bg-medium"]) {
  background-color: var(--bg-medium-grey) !important;
}

/* ============================================
   COMPONENT-SPECIFIC INLINE STYLE OVERRIDES
   ============================================ */

/* AdminDashboard component */
.dark-theme .admin-dashboard .el-table__row,
.dark-theme .admin-dashboard .el-card__body {
  background-color: var(--bg-medium-grey) !important;
}

/* AdminGraphTopPanel component */
.dark-theme .admin-dashboard .stats-container,
.dark-theme .admin-dashboard .chart-container {
  background-color: var(--bg-medium-grey) !important;
}

/* PlayAndEarn component */
.dark-theme .play-earn-container,
.dark-theme .play-earn-container .el-card {
  background-color: var(--bg-medium-grey) !important;
}

/* UserTransactions component */
.dark-theme .user-transactions .el-table__row,
.dark-theme .user-transactions .el-card,
.dark-theme .user-transactions .transaction-item {
  background-color: var(--bg-medium-grey) !important;
}

/* UserReferrals component */
.dark-theme .user-referrals .el-table__row,
.dark-theme .user-referrals .referral-item {
  background-color: var(--bg-medium-grey) !important;
}

/* AdminSettings component */
.dark-theme .admin-settings .el-card,
.dark-theme .admin-settings .settings-panel {
  background-color: var(--bg-medium-grey) !important;
}

/* AdminMessageCenter component */
.dark-theme .admin-message-center .message-item,
.dark-theme .admin-message-center .message-list {
  background-color: var(--bg-medium-grey) !important;
}

/* UserProfile component */
.dark-theme .user-profile .el-card,
.dark-theme .user-profile .profile-section,
.dark-theme .user-profile .el-tabs__content {
  background-color: var(--bg-medium-grey) !important;
}

/* MasterclassDetails component */
.dark-theme .masterclass-details .el-card,
.dark-theme .masterclass-details .content-section {
  background-color: var(--bg-medium-grey) !important;
}

/* ProjectDetails component */
.dark-theme .project-details .el-card,
.dark-theme .project-details .content-section {
  background-color: var(--bg-medium-grey) !important;
}

/* GameView component */
.dark-theme .game-view .el-card,
.dark-theme .game-view .content-section {
  background-color: var(--bg-medium-grey) !important;
}

/* Override any component with scoped styles that have white backgrounds */
.dark-theme [class*="component"] [style*="background"],
.dark-theme [class*="Component"] [style*="background"] {
  background-color: var(--bg-medium-grey) !important;
}

/* Override all Vue component root elements */
.dark-theme .vue-component,
.dark-theme [data-v-],
.dark-theme [class*="vue-"] {
  background-color: inherit !important;
}

/* Force dark backgrounds on all table rows across all components */
.dark-theme .el-table__body .el-table__row,
.dark-theme .el-table__body tr,
.dark-theme .el-table__body td {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .el-table__body .el-table__row:hover,
.dark-theme .el-table__body tr:hover,
.dark-theme .el-table__body tr:hover td {
  background-color: var(--bg-tertiary) !important;
}

/* Override all card bodies */
.dark-theme .el-card__body,
.dark-theme .card-body,
.dark-theme .panel-body {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

/* Override all card headers */
.dark-theme .el-card__header,
.dark-theme .card-header,
.dark-theme .panel-heading {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* ============================================
   DASHBOARD SPECIFIC OVERRIDES
   ============================================ */

/* Dashboard score blocks */
.dark-theme .scores-block {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

/* Dashboard chart containers */
.dark-theme .chart-container {
  background-color: var(--bg-medium-grey) !important;
}

/* Dashboard proof play containers */
.dark-theme .proof-play-container {
  background-color: var(--bg-medium-grey) !important;
}

/* Dashboard play earn containers */
.dark-theme .play-earn-container {
  background-color: var(--bg-medium-grey) !important;
}

/* Dashboard sales container */
.dark-theme .sales-container {
  background-color: var(--bg-medium-grey) !important;
}

/* Dashboard stats containers */
.dark-theme .registrant-stats,
.dark-theme .token-stats,
.dark-theme .demographics-stats,
.dark-theme .latest-signups {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

.dark-theme .registrant-stats .title,
.dark-theme .token-stats .title,
.dark-theme .demographics-stats .title,
.dark-theme .latest-signups .title {
  color: var(--text-primary) !important;
}

/* Dashboard rewards container */
.dark-theme .rewards-container {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .rewards-container .top-header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dark-theme .rewards-container .scores-details {
  background-color: var(--bg-medium-grey) !important;
}

/* ============================================
   REGISTRANTS TABLE OVERRIDES
   ============================================ */

.dark-theme .registrants-table .el-table__row {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .registrants-table .el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark-theme .registrants-table .el-table__cell {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .registrants-table .el-table__cell:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark-theme .registrants-table h3 {
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

.dark-theme .registrants-table h4 {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.dark-theme .registrants-table .first-name {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.dark-theme .registrants-table .first-name:hover {
  color: var(--accent-gold) !important;
}

/* ============================================
   ELEMENT UI TABLE OVERRIDES
   ============================================ */

.dark-theme .el-table__row {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .el-table__row:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark-theme .el-table__row.el-table__row--striped {
  background-color: var(--bg-secondary) !important;
}

.dark-theme .el-table__row.el-table__row--striped:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark-theme .el-table td,
.dark-theme .el-table th {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-table__body tr:hover > td {
  background-color: var(--bg-tertiary) !important;
}

/* ============================================
   ELEMENT UI SELECT DROPDOWN OVERRIDES
   ============================================ */

.dark-theme .el-select-dropdown__item {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-select-dropdown__item:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark-theme .el-select-dropdown__item.selected {
  background-color: var(--bg-tertiary) !important;
  color: var(--accent-gold) !important;
}

/* ============================================
   ELEMENT UI DATE PICKER OVERRIDES
   ============================================ */

.dark-theme .el-date-picker__header-label,
.dark-theme .el-picker-panel__link-btn {
  color: var(--text-primary) !important;
}

.dark-theme .el-date-table td.available:hover {
  color: var(--accent-gold) !important;
}

.dark-theme .el-date-table td.current:not(.disabled) {
  color: var(--accent-gold) !important;
}

.dark-theme .el-date-table td.today span {
  color: var(--accent-gold) !important;
}

/* ============================================
   ELEMENT UI PAGINATION OVERRIDES
   ============================================ */

.dark-theme .el-pagination .el-pager li {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-pagination .el-pager li:hover {
  color: var(--accent-gold) !important;
}

.dark-theme .el-pagination .el-pager li.active {
  background-color: var(--accent-gold) !important;
  color: var(--text-inverse) !important;
}

.dark-theme .el-pagination button {
  background-color: var(--bg-medium-grey) !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-pagination button:hover {
  color: var(--accent-gold) !important;
}

.dark-theme .el-pagination button:disabled {
  color: var(--text-disabled) !important;
}

/* ============================================
   ELEMENT UI INPUT OVERRIDES
   ============================================ */

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

.dark-theme .el-input__inner:focus {
  border-color: var(--accent-gold) !important;
}

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

.dark-theme .el-date-editor .el-input__inner {
  background-color: var(--bg-secondary) !important;
}

.dark-theme .el-cascader-panel {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-tree-node__content {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-transfer-panel {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-upload-dragger {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-color-dropdown {
  background-color: var(--bg-medium-grey) !important;
  border-color: var(--border-color) !important;
}

/* ============================================
   GENERAL COMPONENT OVERRIDES
   ============================================ */

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

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

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

/* Override Bootstrap container classes */
.dark-theme .container-fluid,
.dark-theme .container {
  background-color: var(--bg-primary) !important;
}

/* Override router-view and main content wrapper */
.dark-theme router-view,
.dark-theme [class*="content"],
.dark-theme [class*="wrapper"],
.dark-theme [class*="page"] {
  background-color: var(--bg-primary) !important;
}

/* Override any remaining white backgrounds */
.dark-theme [class*="white"],
.dark-theme [style*="background-color: white"],
.dark-theme [style*="background-color: #fff"],
.dark-theme [style*="background-color: #FFF"],
.dark-theme [style*="background-color: #FFFFFF"],
.dark-theme [style*="background: white"],
.dark-theme [style*="background: #fff"],
.dark-theme [style*="background: #FFF"],
.dark-theme [style*="background: #FFFFFF"],
.dark-theme [style*="background: whitesmoke"] {
  background-color: var(--bg-medium-grey) !important;
  background: var(--bg-medium-grey) !important;
}

/* ============================================
   HIGHCHARTS OVERRIDES
   ============================================ */

/* Override Highcharts SVG white backgrounds */
.dark-theme .highcharts-background,
.dark-theme .highcharts-container .highcharts-background,
.dark-theme svg .highcharts-background {
  fill: var(--bg-medium-grey) !important;
}

/* Override any SVG elements with white fills */
.dark-theme svg rect[fill="#ffffff"],
.dark-theme svg rect[fill="#fff"],
.dark-theme svg rect[fill="#FFF"],
.dark-theme svg rect[fill="white"],
.dark-theme svg .highcharts-background[fill="#ffffff"],
.dark-theme svg .highcharts-background[fill="#fff"],
.dark-theme svg .highcharts-background[fill="#FFF"],
.dark-theme svg .highcharts-background[fill="white"] {
  fill: var(--bg-medium-grey) !important;
}

/* Highcharts container backgrounds */
.dark-theme .highcharts-container {
  background-color: var(--bg-medium-grey) !important;
}

.dark-theme .highcharts-container svg {
  background-color: var(--bg-medium-grey) !important;
}

/* Highcharts plot backgrounds */
.dark-theme .highcharts-plot-background {
  fill: var(--bg-secondary) !important;
}

/* Highcharts chart backgrounds */
.dark-theme .highcharts-chart {
  background-color: var(--bg-medium-grey) !important;
}

/* Highcharts text colors for readability */
.dark-theme .highcharts-title,
.dark-theme .highcharts-subtitle,
.dark-theme .highcharts-axis-labels,
.dark-theme .highcharts-legend-item,
.dark-theme .highcharts-data-label {
  fill: var(--text-primary) !important;
  color: var(--text-primary) !important;
}

.dark-theme .highcharts-axis-line,
.dark-theme .highcharts-tick {
  stroke: var(--border-color) !important;
}

.dark-theme .highcharts-grid-line {
  stroke: var(--border-color) !important;
}

/* Highcharts tooltip */
.dark-theme .highcharts-tooltip {
  fill: var(--bg-card) !important;
}

.dark-theme .highcharts-tooltip-box {
  fill: var(--bg-card) !important;
  stroke: var(--border-color) !important;
}

.dark-theme .highcharts-tooltip text {
  fill: var(--text-primary) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .dark-theme h1 {
    font-size: 2rem;
  }
  
  .dark-theme h2 {
    font-size: 1.5rem;
  }
  
  .dark-theme .card {
    border-radius: var(--radius-md);
  }
}