/* Quimitor V3.5 Official Dark Theme style overrides */

/* Root dark variables already set in variables.css. These selectors handle specific cascaded overrides */

/* Navbar & Sidebar overrides */
.dark .navbar {
  background-color: var(--bg-card);
  border-bottom: 4px solid var(--color-accent);
}

.dark .navbar-links li {
  color: var(--color-text);
}

.dark .navbar-links li:hover {
  color: var(--color-accent);
}

.dark .sidebar-item {
  color: var(--color-text-muted);
}

.dark .sidebar-item:hover {
  background-color: var(--bg-secondary);
  color: var(--color-accent);
}

.dark .sidebar-item.active {
  background-color: var(--color-accent);
  color: #0A1B33;
}

.dark .sidebar-icon-svg {
  fill: currentColor;
}

/* Headings Contrast overrides */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .card-header-title,
.dark .lab-card-title,
.dark .why-card-title,
.dark .section-title,
.dark .advantage-title,
.dark .step-title,
.dark .testimonial-meta-name,
.dark .bolivia-card-title,
.dark .community-card-title,
.dark .community-dark-title,
.dark .profile-name {
  color: #EAEFF7 !important;
}

/* Profile / Dashboard Hero overrides */
.dark .profile-stats-pill {
  background: rgba(18, 42, 74, 0.6);
  border: 2px solid #1C3966;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dark .pill-stat .stat-value {
  color: var(--color-accent) !important;
}

.dark .pill-stat .stat-label {
  color: var(--color-text-muted);
}

.dark .profile-avatar-initials {
  background-color: #122A4A;
  border-color: #1C3966;
  color: var(--color-accent);
}

/* Cards & containers borders & shadows */
.dark .card,
.dark .suggested-section-card,
.dark .streak-card,
.dark .why-card,
.dark .lab-card,
.dark .speech-bubble {
  border-color: #1C3966;
  box-shadow: 0 6px 0 #1C3966, 0 12px 24px rgba(0, 0, 0, 0.4);
  background-color: var(--bg-card);
}

.dark .card:hover,
.dark .suggested-section-card:hover,
.dark .streak-card:hover,
.dark .why-card:hover,
.dark .lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 #1C3966, 0 16px 32px rgba(0, 0, 0, 0.5);
  border-color: var(--color-accent);
}

.dark .card-header-with-icon {
  border-bottom: 2.5px solid #1C3966;
}

.dark .card-header-icon-container {
  background-color: #1C3966;
  border-color: #1C3966;
  box-shadow: 0 3px 0 #1C3966;
}

/* Progress bar, empty states, and button colors */
.dark .xp-bar-fill {
  background: linear-gradient(to right, var(--color-teal), var(--color-accent));
}

.dark .suggested-lab-card {
  background-color: var(--bg-secondary);
  border-color: #1C3966;
}

.dark .suggested-lab-card:hover {
  box-shadow: 0 4px 0 var(--color-accent);
  border-color: var(--color-accent);
}

.dark .suggested-lab-icon-box {
  border-color: #1C3966;
}

.dark .suggested-lab-icon-box.basic,
.dark .suggested-lab-icon-box.medium {
  background-color: #0A1B33;
}

.dark .empty-state {
  background-color: var(--bg-secondary);
  border-color: #1C3966;
}

.dark .empty-icon {
  color: var(--color-accent);
}

.dark .btn-accent {
  background-color: var(--color-accent);
  color: #0A1B33;
}

.dark .btn-accent:hover {
  background-color: var(--color-accent-hover);
}

.dark .btn-secondary {
  background-color: #1C3966;
  color: #EAEFF7;
  border: 2px solid #1C3966;
}

.dark .btn-secondary:hover {
  background-color: #122A4A;
}

.dark .footer-deco-molecule {
  color: var(--color-accent);
}

.dark .social-icon {
  border-color: #1C3966;
  background-color: #0F2440;
  color: #EAEFF7;
  box-shadow: 0 4px 0 #1C3966;
}

.dark .social-icon:hover {
  background-color: var(--color-accent);
  color: #0A1B33;
  box-shadow: 0 6px 0 var(--color-accent);
  border-color: var(--color-accent);
}