/* Dark Mode Styles */
/* Light mode variables */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --heading-color: #000000;
  --link-color: #0078D7;
  --link-hover-color: #0056b3;
  --border-color: #eaeaea;
  --card-bg: #f8f8f8;
  --nav-bg: #ffffff;
  --footer-bg: #ffffff;
  --footer-text: #666666;
  --code-bg: #f5f5f5;
  --blockquote-bg: #f9f9f9;
  --blockquote-border: #e5e5e5;
  --toggle-bg: #dddddd;
  --toggle-circle: #ffffff;
  --toggle-border: #cccccc;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --base-color: #ffffff;
  --base-offset-color: #eaeaea;
}

/* Dark mode variables */
html.dark-mode {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --heading-color: #ffffff;
  --link-color: #4da3ff;
  --link-hover-color: #80bdff;
  --border-color: #333333;
  --card-bg: #1e1e1e;
  --nav-bg: #121212;
  --footer-bg: #121212;
  --footer-text: #bbbbbb;
  --code-bg: #1e1e1e;
  --blockquote-bg: #1e1e1e;
  --blockquote-border: #333333;
  --toggle-bg: #555555;
  --toggle-circle: #dddddd;
  --toggle-border: #666666;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --base-color: #121212;
  --base-offset-color: #333333;
}

/* Base styles with variables */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Direct dark mode overrides - Force dark backgrounds everywhere */
html.dark-mode body,
html.dark-mode .wrapper,
html.dark-mode .page,
html.dark-mode .container,
html.dark-mode .content,
html.dark-mode .content-container,
html.dark-mode .right-column,
html.dark-mode .left-column,
html.dark-mode .key-skills,
html.dark-mode main,
html.dark-mode section,
html.dark-mode div {
  background-color: #121212 !important;
  color: #e0e0e0;
}

/* Fix white backgrounds in dark mode - Target specific elements */
html.dark-mode .page .wrapper .container,
html.dark-mode .key-skills,
html.dark-mode .content-container,
html.dark-mode .content,
html.dark-mode .card,
html.dark-mode .key-skills > div,
html.dark-mode .key-skills h2,
html.dark-mode .key-skills > div > div {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

/* Fix the white background in the right column */
html.dark-mode .right-column,
html.dark-mode .right-column > div {
  background-color: #121212 !important;
}

/* Ensure all divs in dark mode have dark background unless specifically exempted */
html.dark-mode div:not(.skill-card):not(.card):not(.dark-mode-toggle-container):not(.dark-mode-label):not(.dark-mode-slider) {
  background-color: #121212 !important;
  color: #e0e0e0;
}

/* Only allow specific elements to have different background colors */
html.dark-mode .skill-card,
html.dark-mode .card,
html.dark-mode pre,
html.dark-mode code,
html.dark-mode blockquote {
  background-color: #1e1e1e !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;
}

html.dark-mode a {
  color: #4da3ff;
}

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

/* Header */
html.dark-mode .header {
  background-color: #121212;
  border-bottom: 1px solid #333333;
}

html.dark-mode .header-logo {
  color: #ffffff;
}

html.dark-mode .menu-main li a {
  color: #e0e0e0;
}

html.dark-mode .menu-main li.active a {
  color: #4da3ff;
}

/* Footer */
html.dark-mode .footer {
  background-color: #121212;
  color: #bbbbbb;
  border-top: 1px solid #333333;
}

/* Content areas */
html.dark-mode .page .wrapper .container {
  background-color: #121212;
}

html.dark-mode .content {
  color: #e0e0e0;
}

html.dark-mode .content p {
  color: #e0e0e0;
}

/* Cards and skill cards */
html.dark-mode .card {
  background-color: #1e1e1e;
  border: 1px solid #333333;
}

html.dark-mode .key-skills {
  background-color: #121212;
}

html.dark-mode .skill-card {
  background-color: #1e1e1e !important;
  border: 1px solid #333333 !important;
}

html.dark-mode .left-column, 
html.dark-mode .right-column {
  background-color: #121212;
}

/* Code and blockquotes */
html.dark-mode pre, 
html.dark-mode code {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

html.dark-mode blockquote {
  background-color: #1e1e1e;
  border-left: 4px solid #333333;
  color: #e0e0e0;
}

/* Images in dark mode */
html.dark-mode img:not([src*=".svg"]) {
  filter: brightness(0.9) contrast(1.1);
}

/* Dark Mode Toggle Styles */
.dark-mode-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  background-color: transparent !important;
}

.dark-mode-label {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0;
}

.dark-mode-label input {
  opacity: 0;
  width: 0;
  height: 0;
}

.dark-mode-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--toggle-bg);
  transition: .4s;
  border-radius: 24px;
  border: 1px solid var(--toggle-border);
}

.dark-mode-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background-color: var(--toggle-circle);
  transition: .4s;
  border-radius: 50%;
}

input:checked + .dark-mode-slider {
  background-color: #0078D7;
}

input:checked + .dark-mode-slider:before {
  transform: translateX(26px);
}

.toggle-icon {
  margin: 0 5px;
  font-size: 14px;
}