/* Dark Mode */
body.dark-mode {
  background-color: #1a1a2e;
  color: #e6e6e6;
}

body.dark-mode header {
  background-color: #16213e;
}

body.dark-mode sidebar {
  background-color: #16213e;
  color: #e6e6e6;
}

body.dark-mode .sidebar-title {
  color: #6a9bd8;
}

body.dark-mode .search-box input {
  background-color: #1a1a2e;
  border-color: #2d3746;
  color: #e6e6e6;
}

body.dark-mode .menu-category {
  color: #a0aec0;
}

body.dark-mode .accordion-header {
  background-color: #1a1a2e;
  border-color: #2d3746;
}

body.dark-mode .accordion-header:hover {
  background-color: #2d3746;
}

body.dark-mode .accordion-header.active {
  background-color: #1e3a5f;
  border-color: #4a6fa5;
}

body.dark-mode .menu-item {
  border-bottom-color: #2d3746;
  background-color: #2d3746;
}

body.dark-mode .menu-item:hover {
  background-color: #2d3746;
}

body.dark-mode .menu-item.active {
  background-color: #1e3a5f;
  color: #6a9bd8;
}

body.dark-mode .progress-container {
  background-color: #1a1a2e;
}

body.dark-mode .progress-bar {
  background-color: #2d3746;
}

body.dark-mode main {
  background-color: #1a1a2e;
}

body.dark-mode #content-loader {
  background-color: #16213e;
}

/* Dark Mode Styles for Content */
body.dark-mode .content-card {
  background: #16213e;
  border-color: #2d3746;
  color: #e6e6e6;
}

body.dark-mode .content-card h2 {
  color: #6a9bd8;
  border-bottom-color: #1e3a5f;
}

body.dark-mode .content-card p {
  color: #e6e6e6;
}

body.dark-mode .example-block {
  background: #1a1a2e;
  border-color: #2d3746;
}

body.dark-mode .example-content p {
  border-bottom-color: #2d3746;
}

body.dark-mode .important-note {
  background: linear-gradient(135deg, #2d1b00 0%, #4a2c00 100%);
  border-color: #664200;
}

body.dark-mode .important-note h2 {
  color: #ffa726;
  border-bottom-color: #664200;
}

body.dark-mode .content-header {
  border-bottom-color: #2d3746;
}

body.dark-mode .breadcrumb {
  color: #a0aec0;
}

body.dark-mode .breadcrumb a {
  color: #6a9bd8;
}

body.dark-mode .breadcrumb a:hover {
  color: #8bb4f0;
}

body.dark-mode .content-footer {
  border-top-color: #2d3746;
}

body.dark-mode .nav-btn.outline {
  color: #6a9bd8;
  border-color: #6a9bd8;
}

body.dark-mode .nav-btn.outline:hover {
  background: #6a9bd8;
  color: #16213e;
}