/* NUCLEAR OPTION: Force ALL backgrounds to dark in dark mode */

/* Set the root background color */
html.dark-mode {
  background-color: #121212 !important;
}

/* Force ALL elements to have dark backgrounds by default */
html.dark-mode *:not(input):not(textarea):not(select):not(option):not(button):not(.dark-mode-toggle-container *):not(.dark-mode-label *):not(.dark-mode-slider) {
  background-color: #121212 !important;
}

/* Only allow specific elements to have different backgrounds */
html.dark-mode .skill-card,
html.dark-mode .card,
html.dark-mode blockquote {
  background-color: #1e1e1e !important;
  border: 1px solid #333 !important;
}

/* Restore gray background for code blocks */
html.dark-mode pre,
html.dark-mode .highlight {
  background-color: #2b2b2b !important;
  border: 1px solid #444 !important;
  padding: 0.5rem;
  border-radius: 4px;
}

/* Simple gray background for inline code elements */
html.dark-mode code {
  background-color: #333333 !important;
  color: #ffffff !important;
  font-family: monospace !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
}

/* Target specific problematic elements */
html.dark-mode .key-skills,
html.dark-mode .key-skills *,
html.dark-mode .right-column,
html.dark-mode .right-column *,
html.dark-mode .page .wrapper .container,
html.dark-mode .content-container,
html.dark-mode .content {
  background-color: #121212 !important;
}

/* Fix text colors */
html.dark-mode {
  color: #e0e0e0 !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: #ffffff !important;
}

html.dark-mode p,
html.dark-mode li,
html.dark-mode span:not(.toggle-icon) {
  color: #e0e0e0 !important;
}

/* Override any inline styles */
html.dark-mode [style*="background"],
html.dark-mode [style*="background-color"] {
  background-color: #121212 !important;
}

/* Make sure skill cards have icons visible */
html.dark-mode .skill-card i,
html.dark-mode .skill-card svg {
  color: #4da3ff !important;
}

/* Fix the toggle appearance */
html.dark-mode .dark-mode-toggle-container {
  background-color: transparent !important;
}

html.dark-mode .dark-mode-label {
  background-color: transparent !important;
}

html.dark-mode .dark-mode-slider {
  background-color: rgba(85, 85, 85, 0.5) !important;
  border: 1px solid #666 !important;
}

html.dark-mode .toggle-icon {
  background-color: transparent !important;
}

/* Ensure links are visible */
html.dark-mode a {
  color: #4da3ff !important;
}

html.dark-mode a:hover {
  color: #80bdff !important;
}