/* ============================================
   EVERNOTE THEME - INLINE STYLE OVERRIDES
   This file overrides all inline styles to ensure
   Evernote theme consistency across the app
   ============================================ */

/* ============================================
   GLOBAL OVERRIDES FOR INLINE STYLES
   ============================================ */

/* Override Facebook color variables with Evernote colors */
:root {
  --fb-blue: var(--evernote-green) !important;
  --fb-blue-hover: var(--evernote-green-hover) !important;
  --fb-blue-active: var(--evernote-green-dark) !important;
  --fb-green: var(--evernote-green) !important;
  --fb-green-hover: var(--evernote-green-hover) !important;
  --primary: var(--evernote-green) !important;
  --primary-hover: var(--evernote-green-hover) !important;
  --primary-dark: var(--evernote-green-dark) !important;
}

/* Override body and layout */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide old header since we moved to sidebar */
.header,
header.header {
  display: none !important;
}

/* Hide specific old container elements but preserve others */
.container:not(.toggle-container):not(.progress-container):not(.loading-container):not(.media-preview-container):not(.image-preview-container) {
  display: none !important;
}

/* More specific: only hide main layout containers, not utility containers */
body > .container,
#app > .container,
.main-container {
  display: none !important;
}

/* Override all button styles to match Evernote theme */
.btn,
button,
input[type="button"],
input[type="submit"] {
  font-family: inherit !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  padding: var(--space-sm) var(--space-md) !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-xs) !important;
}

.btn-primary,
button[style*="background"],
button[style*="linear-gradient"] {
  background: var(--evernote-green) !important;
  background-image: none !important;
  color: rgb(12 12 21) !important;
  border-color: var(--evernote-green) !important;
}

.btn-primary:hover,
button[style*="background"]:hover,
button[style*="linear-gradient"]:hover {
  background: var(--evernote-green-hover) !important;
  background-image: none !important;
  border-color: var(--evernote-green-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

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

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

/* Override card styles */
.card,
.glass,
.mode-card,
.stat-card {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
  margin-bottom: var(--space-md) !important;
  transition: all var(--transition-base) !important;
}

.card:hover,
.glass:hover,
.mode-card:hover,
.stat-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--evernote-green) !important;
  transform: translateY(-2px) !important;
}

.mode-card.selected {
  border-color: var(--evernote-green) !important;
  background: rgba(0, 168, 45, 0.05) !important;
}

/* Override input styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  padding: var(--space-sm) var(--space-md) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  transition: all var(--transition-fast) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--evernote-green) !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 45, 0.1) !important;
  outline: none !important;
}

/* Override badge styles */
.badge,
.tag,
[class*="badge"],
span[style*="background"],
span[style*="border-radius"] {
  background: var(--evernote-green) !important;
  color: white !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-xs) var(--space-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.badge-secondary,
.badge[style*="gray"],
span[style*="e2e8f0"],
span[style*="background: #e0e0e0"] {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
}

/* Override stat values */
.stat-value {
  color: var(--evernote-green) !important;
  font-weight: 700 !important;
}

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

/* Override modal styles */
.modal,
div[style*="position: fixed"][style*="z-index"] {
  background: rgba(33, 33, 33, 0.8) !important;
  backdrop-filter: blur(5px) !important;
}

.modal-content,
.modal div[style*="background: white"] {
  background: var(--bg-primary) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--border-light) !important;
}

.modal-header {
  background: var(--evernote-green) !important;
  color: white !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Override navigation styles for sidebar */
.nav-item,
.sidebar-nav-item {
  color: var(--text-secondary) !important;
  background: none !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.nav-item:hover,
.sidebar-nav-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.nav-item.active,
.sidebar-nav-item.active {
  background: var(--bg-active) !important;
  color: var(--evernote-green) !important;
  font-weight: 600 !important;
}

/* Override inline background colors for containers */
div[style*="background: linear-gradient"],
div[style*="background-color"],
div[style*="background:#"] {
  background: var(--bg-primary) !important;
  background-image: none !important;
}

/* Special gradient containers that should keep some styling */
div[style*="linear-gradient"]:has(.card-title),
div[style*="667eea"],
div[style*="764ba2"] {
  background: linear-gradient(135deg, var(--evernote-green) 0%, var(--evernote-green-dark) 100%) !important;
  color: white !important;
}

/* Override text colors in styled containers */
h1, h2, h3, h4, h5, h6,
div[style*="color: #333"],
div[style*="color:#333"],
p[style*="color: #666"] {
  color: var(--text-primary) !important;
}

/* Override theme toggle positioning */
#themeToggle,
.theme-toggle {
  position: fixed !important;
  bottom: var(--space-lg) !important;
  right: var(--space-lg) !important;
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  box-shadow: var(--shadow-md) !important;
  z-index: 1000 !important;
}

/* Override saved variations button - FIX: Only apply fixed position to the actual floating button */
#savedVariationsButton {
  background: var(--evernote-green) !important;
  background-image: none !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  position: fixed !important;
  bottom: 80px !important;
  right: var(--space-lg) !important;
  padding: var(--space-md) var(--space-lg) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Style other green buttons without making them float */
button[style*="background: #48bb78"],
button[style*="background: #667eea"] {
  background: var(--evernote-green) !important;
  background-image: none !important;
  color: white !important;
  font-weight: 700 !important;
}

/* Override progress bars */
.progress-bar {
  background: var(--bg-tertiary) !important;
  border-radius: var(--radius-full) !important;
  height: 8px !important;
}

.progress-fill {
  background: var(--evernote-green) !important;
  border-radius: var(--radius-full) !important;
}

/* Override API cards and pills */
.api-card,
.api-pill,
div[style*="border: 1px solid #ddd"] {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
}

.api-pill.active,
.api-card.active {
  background: var(--evernote-green) !important;
  color: white !important;
  border-color: var(--evernote-green) !important;
}

/* Override filter tabs */
.filter-tab {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-sm) var(--space-md) !important;
}

.filter-tab.active {
  background: var(--evernote-green) !important;
  color: white !important;
  border-color: var(--evernote-green) !important;
}

/* Override loading states */
.loading-container,
div[style*="background: white; padding: 30px"] {
  background: var(--bg-primary) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Override scrollbar */
*::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

*::-webkit-scrollbar-track {
  background: var(--bg-tertiary) !important;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-medium) !important;
  border-radius: var(--radius-sm) !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--border-dark) !important;
}

/* ============================================
   SECTION MANAGEMENT FOR NEW LAYOUT
   ============================================ */

/* All sections should be visible in main content area */
section,
.section {
  display: block !important;
  margin-bottom: var(--space-xl) !important;
}

.section.hidden {
  display: none !important;
}

/* Dashboard section should be visible by default */
#mode-selection,
#dashboard-section,
section[id*="dashboard"] {
  
}

/* Override any hiding styles */
.fade-in {
  animation: fadeIn 0.5s ease-in-out !important;
}

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

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

/* Mobile styles */
@media (max-width: 768px) {
  .app-sidebar {
    width: var(--sidebar-collapsed-width) !important;
  }

  .sidebar-logo-text,
  .sidebar-version,
  .sidebar-nav-item span:not(.sidebar-nav-badge) {
    display: none !important;
  }

  .app-main {
    margin-left: var(--sidebar-collapsed-width) !important;
  }

  .main-content {
    padding: var(--space-md) !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mode-selector {
    grid-template-columns: 1fr !important;
  }

  /* Mobile button adjustments */
  .btn,
  button {
    width: 100% !important;
    margin-bottom: var(--space-sm) !important;
  }

  /* Exception for inline buttons */
  .btn.inline,
  button.inline,
  .sidebar-nav-item {
    width: auto !important;
  }
}

/* Dark mode specific overrides - IMPROVED CONTRAST */
[data-theme="dark"] {
  --evernote-green: #1e442e !important;
  --evernote-green-hover: #2c4f3a !important;
  --evernote-green-light: #365541 !important;
  --evernote-green-dark: #152a1c !important;
  --text-accent: #FFFFFF !important;

  /* Better contrast for text */
  --text-primary: #FFFFFF !important;
  --text-secondary: #E8EAED !important;
  --text-tertiary: #B0B3B8 !important;

  /* Better background contrast */
  --bg-primary: #1F1F1F !important;
  --bg-secondary: #0A0A0B !important;
  --bg-tertiary: #2D2E30 !important;
  --bg-sidebar: #262626 !important;
  --bg-hover: #3C3C3C !important;
  --bg-active: #0F4C3A !important;

  /* Better border contrast */
  --border-light: #3C4043 !important;
  --border-medium: #5F6368 !important;
  --border-dark: #80868B !important;
}

[data-theme="dark"] .sidebar-nav-item.active {
  color: #1e442e !important;
}

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

/* Enhanced dark mode text contrast */
[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: #FFFFFF !important;
}

[data-theme="dark"] p,
[data-theme="dark"] div,
[data-theme="dark"] span {
  color: #E8EAED !important;
}

/* Dark mode input fields with better contrast */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #9AA0A6 !important;
}

/* Dark mode modals */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal div[style*="background: white"] {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
}

/* Dark mode badges and tags */
[data-theme="dark"] .badge-secondary,
[data-theme="dark"] .badge[style*="gray"],
[data-theme="dark"] span[style*="e2e8f0"],
[data-theme="dark"] span[style*="background: #e0e0e0"] {
  background: #36373A !important;
  color: #E8EAED !important;
}

/* Dark mode API cards */
[data-theme="dark"] .api-card,
[data-theme="dark"] .api-pill,
[data-theme="dark"] div[style*="border: 1px solid #ddd"] {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #E8EAED !important;
}

/* Dark mode filter tabs */
[data-theme="dark"] .filter-tab {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #E8EAED !important;
}

/* Dark mode loading containers */
[data-theme="dark"] .loading-container,
[data-theme="dark"] div[style*="background: white; padding: 30px"] {
  background: #1F1F1F !important;
  color: #E8EAED !important;
}

/* ============================================
   SAVED VARIATIONS DARK MODE SUPPORT
   ============================================ */

/* Dark mode: Variation cards */
[data-theme="dark"] .variation-card {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .variation-card[style*="background: white"],
[data-theme="dark"] .variation-card[style*="background: #ffffff"] {
  background: #1F1F1F !important;
}

[data-theme="dark"] .variation-card h4 {
  color: #FFFFFF !important;
}

[data-theme="dark"] .variation-card p {
  color: #E8EAED !important;
}

[data-theme="dark"] .variation-card .variation-text {
  background: #2D2E30 !important;
  border-color: #1e442e !important;
  color: #E8EAED !important;
}

/* Dark mode: Card headers with gradients */
[data-theme="dark"] .variation-card div[style*="linear-gradient"],
[data-theme="dark"] .variation-card div[style*="background: linear-gradient"] {
  background: linear-gradient(135deg, #1e442e 0%, #152a1c 100%) !important;
}

/* Dark mode: Stats grid */
[data-theme="dark"] .stats-grid .stat-card {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
}

[data-theme="dark"] .stats-grid .stat-value {
  color: #1e442e !important;
}

[data-theme="dark"] .stats-grid .stat-label {
  color: #E8EAED !important;
}

/* Dark mode: Saved variations library specific styles */
[data-theme="dark"] #savedVariationsLibraryGrid .variation-card {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #savedVariationsLibraryGrid .variation-card:hover {
  border-color: #1e442e !important;
  transform: translateY(-2px) !important;
}

/* Dark mode: Variation card selected state */
[data-theme="dark"] .variation-card[style*="border-color: var(--evernote-green)"],
[data-theme="dark"] .variation-card[style*="border-color: #00A82D"] {
  border-color: #1e442e !important;
  background: rgba(30, 68, 46, 0.1) !important;
}

/* Dark mode: Library buttons and controls */
[data-theme="dark"] #savedVariationsLibraryControls button {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #E8EAED !important;
}

[data-theme="dark"] #savedVariationsLibraryControls button[style*="background: #00A82D"],
[data-theme="dark"] #savedVariationsLibraryControls button[style*="background: var(--primary)"] {
  background: #1e442e !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] #savedVariationsLibraryControls button:hover {
  background: #2c4f3a !important;
}

/* Dark mode: Filter buttons */
[data-theme="dark"] .filter-buttons button {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #E8EAED !important;
}

[data-theme="dark"] .filter-buttons button.active,
[data-theme="dark"] .filter-buttons button[style*="background: #00A82D"] {
  background: #1e442e !important;
  color: #FFFFFF !important;
}

/* Dark mode: Card content text elements */
[data-theme="dark"] .variation-card .headline,
[data-theme="dark"] .variation-card .primary-text,
[data-theme="dark"] .variation-card .description {
  color: #E8EAED !important;
}

/* Dark mode: Image placeholders and fallbacks */
[data-theme="dark"] .variation-card div[style*="color: #9ca3af"] {
  color: #9AA0A6 !important;
}

/* Dark mode: Variation type badges */
[data-theme="dark"] .variation-card span[style*="background: #667eea"],
[data-theme="dark"] .variation-card span[style*="background: #48bb78"] {
  background: #1e442e !important;
}

/* ============================================
   AD LIBRARY DARK MODE FIXES
   ============================================ */

/* Dark mode: Ad cards in library */
[data-theme="dark"] .ad-card-compact {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .ad-card-compact .ad-card-body {
  background: #1F1F1F !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .ad-card-compact h4 {
  color: #FFFFFF !important;
}

[data-theme="dark"] .ad-card-compact p {
  color: #E8EAED !important;
}

/* Dark mode: Ad library grid */
[data-theme="dark"] #adsLibraryGrid .ad-card-compact {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
}

/* Dark mode: Media thumbnails in ad library */
[data-theme="dark"] .ad-card-compact .ad-media-thumbnail {
  background: #2D2E30 !important;
  border-bottom-color: #3C4043 !important;
}

/* Dark mode: Ad card footer */
[data-theme="dark"] .ad-card-compact .ad-card-footer {
  background: #2D2E30 !important;
  border-top-color: #3C4043 !important;
}

/* Dark mode: Generate and view buttons in ad cards */
[data-theme="dark"] .ad-card-compact .generate-compact-btn {
  background: #1e442e !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .ad-card-compact .generate-compact-btn:hover {
  background: #2c4f3a !important;
}

[data-theme="dark"] .ad-card-compact .view-details-btn {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #E8EAED !important;
}

[data-theme="dark"] .ad-card-compact .view-details-btn:hover {
  background: #3C3C3C !important;
  border-color: #1e442e !important;
  color: #1e442e !important;
}

/* Dark mode: Ad content scroll area */
[data-theme="dark"] .ad-card-compact .ad-content-scroll {
  color: #E8EAED !important;
}

[data-theme="dark"] .ad-card-compact .ad-content-scroll p {
  color: #E8EAED !important;
}

/* Dark mode: Media badges */
[data-theme="dark"] .ad-card-compact .media-badge {
  background: #1e442e !important;
  color: #FFFFFF !important;
}

/* Dark mode: Ad library specific overrides using inline styles */
[data-theme="dark"] div[style*="background: white"] {
  background: #1F1F1F !important;
}

[data-theme="dark"] div[style*="color: #333"] {
  color: #FFFFFF !important;
}

[data-theme="dark"] div[style*="color: #1f2937"] {
  color: #FFFFFF !important;
}

[data-theme="dark"] div[style*="color: #4b5563"] {
  color: #E8EAED !important;
}

/* Dark mode: Inline style overrides for dynamic content */
[data-theme="dark"] [style*="background: white"] {
  background: #1F1F1F !important;
}

[data-theme="dark"] [style*="background:#ffffff"] {
  background: #1F1F1F !important;
}

[data-theme="dark"] [style*="color: #333"] {
  color: #FFFFFF !important;
}

[data-theme="dark"] [style*="color:#333"] {
  color: #FFFFFF !important;
}

[data-theme="dark"] [style*="color: #1f2937"] {
  color: #FFFFFF !important;
}

[data-theme="dark"] [style*="color: #4b5563"] {
  color: #E8EAED !important;
}

/* ============================================
   MODAL DARK MODE FIXES
   ============================================ */

/* Dark mode: All modals */
[data-theme="dark"] .modal {
  background: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .modal-content {
  background: #1F1F1F !important;
  border: 1px solid #3C4043 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .modal-header {
  background: #2D2E30 !important;
  border-bottom-color: #3C4043 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .modal-body {
  background: #1F1F1F !important;
  color: #E8EAED !important;
}

[data-theme="dark"] .modal-footer {
  background: #2D2E30 !important;
  border-top-color: #3C4043 !important;
}

/* Dark mode: Variation type modal specific */
[data-theme="dark"] #variationTypeModal .modal-content {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
}

[data-theme="dark"] #variationTypeModal h2,
[data-theme="dark"] #variationTypeModal h3 {
  color: #FFFFFF !important;
}

[data-theme="dark"] #variationTypeModal p {
  color: #E8EAED !important;
}

/* Dark mode: Variation type buttons */
[data-theme="dark"] .variation-type-btn {
  background: #2D2E30 !important;
  border-color: #3C4043 !important;
  color: #E8EAED !important;
}

[data-theme="dark"] .variation-type-btn:hover {
  background: #3C4043 !important;
  border-color: #1e442e !important;
}

[data-theme="dark"] .variation-type-btn.selected {
  background: #1e442e !important;
  border-color: #1e442e !important;
  color: #FFFFFF !important;
}

/* Dark mode: Modal buttons */
[data-theme="dark"] .modal button {
  background: #2D2E30 !important;
  border-color: #3C4043 !important;
  color: #E8EAED !important;
}

[data-theme="dark"] .modal button:hover {
  background: #3C4043 !important;
}

[data-theme="dark"] .modal button.btn-primary {
  background: #1e442e !important;
  border-color: #1e442e !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .modal button.btn-primary:hover {
  background: #2c4f3a !important;
}

/* ============================================
   UNIVERSAL MODAL AND CARD DARK MODE
   ============================================ */

/* Dark mode: Any div with modal styling */
[data-theme="dark"] div[style*="background: rgba(0, 0, 0, 0.5)"],
[data-theme="dark"] div[style*="background: rgba(0,0,0,0.5)"] {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* Dark mode: White modal content */
[data-theme="dark"] div[style*="background: white; border-radius"],
[data-theme="dark"] div[style*="background: #fff; border-radius"],
[data-theme="dark"] div[style*="background:#ffffff; border-radius"] {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
  color: #FFFFFF !important;
}

/* Dark mode: Modal headers */
[data-theme="dark"] div[style*="background: #f8f9fa"],
[data-theme="dark"] div[style*="background:#f8f9fa"] {
  background: #2D2E30 !important;
  color: #FFFFFF !important;
}

/* Dark mode: Any card-like structure */
[data-theme="dark"] div[style*="box-shadow"][style*="background: white"],
[data-theme="dark"] div[style*="box-shadow"][style*="background:#ffffff"] {
  background: #1F1F1F !important;
  border-color: #3C4043 !important;
}

/* Ensure proper z-index stacking */
.app-sidebar {
  z-index: 100 !important;
}

.app-main {
  z-index: 50 !important;
}

.theme-toggle {
  z-index: 1000 !important;
}

.modal {
  z-index: 2000 !important;
}

/* Fix any layout conflicts */
* {
  box-sizing: border-box !important;
}