/* Dark Mode CSS Variables and Styles */

:root {
  /* Light mode colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --border-color: #dee2e6;
  --card-bg: #ffffff;
  --sidebar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --sidebar-text: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-active: rgba(255, 255, 255, 0.2);
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --btn-primary-bg: #667eea;
  --btn-primary-hover: #5a6fd8;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-hover: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
  /* Dark mode colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3d3d3d;
  --text-primary: #ffffff;
  --text-secondary: #b8b8b8;
  --text-muted: #888888;
  --border-color: #444444;
  --card-bg: #2d2d2d;
  --sidebar-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --sidebar-text: #ecf0f1;
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-active: rgba(255, 255, 255, 0.2);
  --input-bg: #3d3d3d;
  --input-border: #555555;
  --btn-primary-bg: #667eea;
  --btn-primary-hover: #5a6fd8;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-hover: rgba(0, 0, 0, 0.4);
}

/* Force dark theme on all major containers */
[data-theme="dark"] body,
[data-theme="dark"] html {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] #content,
[data-theme="dark"] .main-content {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Override specific content area backgrounds */
[data-theme="dark"] #content {
  background: var(--bg-primary) !important;
}

/* Apply theme colors to elements - ONLY for dark mode */
[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main content area - ONLY for dark mode */
[data-theme="dark"] #content {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

[data-theme="dark"] .main-content {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  padding: 2rem;
}

/* Content wrapper - ONLY for dark mode */
[data-theme="dark"] .content-wrapper {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Container backgrounds - ONLY for dark mode */
[data-theme="dark"] .container, 
[data-theme="dark"] .container-fluid {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Cards and containers - ONLY for dark mode */
[data-theme="dark"] .card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .card-header {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .card-footer {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

/* Dashboard and page containers - ONLY for dark mode */
[data-theme="dark"] .dashboard-container {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .page-container {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .content-header {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

/* Row and column backgrounds - ONLY for dark mode */
[data-theme="dark"] .row {
  background-color: transparent;
}

[data-theme="dark"] .col, 
[data-theme="dark"] [class*="col-"] {
  background-color: transparent;
}

/* Sidebar styling - ONLY for dark mode */
[data-theme="dark"] .sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
}

[data-theme="dark"] .sidebar .nav-link {
  color: var(--sidebar-text);
  transition: all 0.2s ease;
}

[data-theme="dark"] .sidebar .nav-link:hover {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-text);
}

[data-theme="dark"] .sidebar .nav-link.active {
  background-color: var(--sidebar-active);
  color: var(--sidebar-text);
}

/* Forms and inputs - ONLY for dark mode */
[data-theme="dark"] .form-control {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
  background-color: var(--input-bg);
  border-color: var(--btn-primary-bg);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

[data-theme="dark"] .form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

/* Tables - ONLY for dark mode */
[data-theme="dark"] .table {
  color: var(--text-primary);
}

[data-theme="dark"] .table-hover tbody tr:hover td {
  background-color: var(--bg-tertiary);
}

/* Dropdowns - ONLY for dark mode */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Modals - ONLY for dark mode */
[data-theme="dark"] .modal-content {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
  border-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
  border-color: var(--border-color);
}

/* Badges - ONLY for dark mode */
[data-theme="dark"] .badge {
  color: #ffffff;
}

/* Alerts - ONLY for dark mode */
[data-theme="dark"] .alert {
  border-color: var(--border-color);
}

/* Text colors - ONLY for dark mode */
[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .text-secondary {
  color: var(--text-secondary) !important;
}

/* Dark mode toggle button */
.dark-mode-toggle-container {
  padding: 1rem;
  border-top: 1px solid var(--sidebar-hover);
  margin-top: 1rem;
}

.dark-mode-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 1px solid var(--sidebar-hover);
  border-radius: 0.5rem;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 0.9rem;
}

.dark-mode-toggle:hover {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-text);
  text-decoration: none;
  transform: translateY(-1px);
}

.dark-mode-toggle.active {
  background-color: var(--sidebar-active);
  border-color: var(--sidebar-active);
}

.dark-mode-toggle i {
  margin-right: 0.75rem;
  font-size: 1rem;
  width: 1.2rem;
  text-align: center;
}

/* Profile card dark mode */
[data-theme="dark"] .profile-card {
  background-color: var(--sidebar-hover);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem;
}

[data-theme="dark"] .profile-name {
  color: var(--sidebar-text);
  font-weight: 600;
}

[data-theme="dark"] .profile-email {
  color: var(--text-muted);
  font-size: 0.85rem;
}

[data-theme="dark"] .profile-link {
  color: var(--sidebar-text);
  text-decoration: none;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

[data-theme="dark"] .profile-link:hover {
  color: var(--sidebar-text);
  background-color: var(--sidebar-hover);
  padding-left: 0.5rem;
  border-radius: 0.25rem;
}

[data-theme="dark"] .profile-link i {
  margin-right: 0.75rem;
  width: 1rem;
  text-align: center;
}

/* Custom scrollbar for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Marketing and Communication dashboard specific */
/* Light mode defaults */
.marketing-hub {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.metric-card {
  background: #ffffff;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.metric-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.analytics-card {
  background: #ffffff;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.analytics-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.performance-bar {
  background: #e9ecef;
}

.performance-fill {
  background: linear-gradient(45deg, #667eea, #764ba2);
}

.date-range-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.template-usage-item {
  border-left: 4px solid #667eea;
  background: #f8f9fa;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
}

/* Dark mode overrides */
[data-theme="dark"] .marketing-hub {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

[data-theme="dark"] .metric-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow);
  transition: all 0.2s ease;
}

[data-theme="dark"] .metric-card:hover {
  box-shadow: 0 4px 12px var(--shadow-hover);
}

[data-theme="dark"] .analytics-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow);
}

[data-theme="dark"] .analytics-card:hover {
  box-shadow: 0 4px 12px var(--shadow-hover);
}

/* Performance bars - ONLY for dark mode */
[data-theme="dark"] .performance-bar {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .performance-fill {
  background: linear-gradient(45deg, #667eea, #764ba2);
}

/* Date range card */
/* Date range card */
[data-theme="light"] .date-range-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

[data-theme="dark"] .date-range-card {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

/* Template usage items - ONLY for dark mode */
[data-theme="dark"] .template-usage-item {
  border-left: 4px solid #667eea;
  background: var(--bg-secondary);
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
}

/* Buttons in dark mode */
[data-theme="dark"] .btn-outline-primary {
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-bg);
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: white;
}

[data-theme="dark"] .btn-outline-secondary {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--text-secondary);
  border-color: var(--text-secondary);
  color: white;
}

/* Make sure all text is properly colored - ONLY for dark mode */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
  color: var(--text-primary);
}

[data-theme="dark"] p {
  color: var(--text-primary);
}

/* List groups - ONLY for dark mode */
[data-theme="dark"] .list-group-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Navigation pills and tabs - ONLY for dark mode */
[data-theme="dark"] .nav-pills .nav-link {
  color: var(--text-secondary);
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--btn-primary-bg);
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary);
  border-color: transparent transparent var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--card-bg);
  border-color: var(--border-color) var(--border-color) var(--card-bg);
  color: var(--text-primary);
}

/* Pagination - ONLY for dark mode */
[data-theme="dark"] .page-link {
  color: var(--btn-primary-bg);
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .page-link:hover {
  color: var(--btn-primary-hover);
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Override any potential white backgrounds */
[data-theme="dark"] .bg-white {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-light {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .text-dark {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-black {
  color: var(--text-primary) !important;
}

/* Ensure all Bootstrap containers use theme colors */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container-lg,
[data-theme="dark"] .container-md,
[data-theme="dark"] .container-sm,
[data-theme="dark"] .container-xl,
[data-theme="dark"] .container-xxl {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Dashboard specific overrides */
[data-theme="dark"] .dashboard-content {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-card .icon-shape.bg-light {
  background-color: var(--bg-tertiary) !important;
}

/* Comprehensive dark mode overrides */
[data-theme="dark"] .row,
[data-theme="dark"] main,
[data-theme="dark"] section,
[data-theme="dark"] article {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Force all Bootstrap utility classes in dark mode */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-transparent {
  background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .text-white {
  color: var(--text-primary) !important;
}

/* Override hardcoded white backgrounds from style.css */
[data-theme="dark"] .fc {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .calendar-container {
  background: var(--card-bg) !important;
}

/* Additional calendar and dashboard elements for dark mode */
[data-theme="dark"] .fc-button {
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  color: white !important;
}

[data-theme="dark"] .fc-button:hover {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}

[data-theme="dark"] .fc-button:disabled {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] .fc-toolbar-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-daygrid-day {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc-daygrid-day-number {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-col-header-cell {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc-col-header-cell-cushion {
  color: var(--text-primary) !important;
}

/* Inventory and other dashboard tables */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .table thead th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .table td {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Integration Dashboard Elements */
[data-theme="dark"] .integration-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .integration-status {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .connection-indicator {
  border-color: var(--border-color) !important;
}

/* Analytics Dashboard Elements */
[data-theme="dark"] .chart-container {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .analytics-metric {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .metric-value {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .metric-label {
  color: var(--text-secondary) !important;
}

/* AI Dashboard Elements */
[data-theme="dark"] .ai-prompt-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .ai-response {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .ai-status {
  color: var(--text-primary) !important;
}

/* Chart.js overrides for dark mode */
[data-theme="dark"] .chart-container canvas {
  filter: invert(0) !important;
}

/* Ensure all dashboard widgets are themed */
[data-theme="dark"] .widget {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .widget-header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .widget-content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* AI Dashboard specific elements */
[data-theme="dark"] .ai-metric-card {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
  color: white !important;
}

[data-theme="dark"] .insight-card {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-left: 4px solid #667eea !important;
}

[data-theme="dark"] .performance-chart {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .ai-section {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Marketing Dashboard specific elements */
[data-theme="dark"] .campaign-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .status-badge.active {
  background-color: #1e7e34 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .status-badge.draft {
  background-color: #856404 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .status-badge.paused {
  background-color: #721c24 !important;
  color: #ffffff !important;
}

/* Integration Dashboard specific elements */
[data-theme="dark"] .integration-card {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .status-active {
  background-color: #1e7e34 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .status-inactive {
  background-color: #721c24 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .status-error {
  background-color: #856404 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .stats-grid {
  color: var(--text-primary) !important;
}

/* Override inline styles on AI dashboard */
[data-theme="dark"] .ai-metric-card[style*="background: linear-gradient(135deg, #11998e"] {
  background: linear-gradient(135deg, #0d7377 0%, #14a085 100%) !important;
}

[data-theme="dark"] .ai-metric-card[style*="background: linear-gradient(135deg, #ff6b6b"] {
  background: linear-gradient(135deg, #c0392b 0%, #e67e22 100%) !important;
}

[data-theme="dark"] .ai-metric-card[style*="background: linear-gradient(135deg, #a8edea"] {
  background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
  color: #ffffff !important;
}

/* More specific overrides for common dashboard elements */
[data-theme="dark"] div[style*="background: white"] {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] div[style*="background: #f8f9ff"] {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] div[style*="background-color: white"] {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Marketing Dashboard additional elements */
[data-theme="dark"] .status-badge.completed {
  background-color: #495057 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .metric-card {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .metric-number {
  color: #667eea !important;
}

[data-theme="dark"] .metric-label {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .analytics-chart {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .activity-item {
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .activity-icon.email {
  background-color: #1976d2 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .activity-icon.sms {
  background-color: #2e7d32 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .activity-icon.conversion {
  background-color: #f57c00 !important;
  color: #ffffff !important;
}

/* Integration Dashboard additional elements */
[data-theme="dark"] .stat-card {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-left: 4px solid #007bff !important;
}

[data-theme="dark"] .stat-value {
  color: #007bff !important;
}

[data-theme="dark"] .stat-label {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .activity-list {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .activity-item {
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .sync-icon {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Comprehensive overrides for any remaining problematic elements */
[data-theme="dark"] .card-body {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .card-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .card-text {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .list-group {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .nav-link {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-link:hover {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-light {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-light:hover {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Override any remaining inline white backgrounds */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color: #fff"] {
  background: var(--card-bg) !important;
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Override light gray backgrounds */
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background: #f0f0f0"],
[data-theme="dark"] [style*="background-color: #f0f0f0"] {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}