/* =========================
     Navbar
  ========================= */
.navbar {
  transition: background-color 0.3s, color 0.3s; /* Smooth transition when navbar colors change (e.g., dark mode) */
}

body.dark-mode .navbar {
  background-color: #1e1e1e !important; /* Dark background for navbar in dark mode */
}

body.dark-mode .navbar-brand,
body.dark-mode .nav-link {
  color: #f1f1f1 !important; /* Light text color for brand and links in dark mode */
}

body.dark-mode .nav-link.active {
  color: #4cafef !important; /* Highlight active link with a blue color in dark mode */
}

/* Hamburger icon visible in dark */
body.dark-mode .navbar-toggler-icon {
  filter: invert(1) brightness(2); /* Makes the hamburger menu icon visible by inverting and brightening it in dark mode */
}

/* =========================
         Toggle Switch
      ========================= */
.theme-switch {
  display: inline-flex; /* Keep it inline so it doesn't take full width */
  align-items: center; /* Vertically center the switch and label */
  cursor: pointer; /* Shows pointer cursor on hover */
  gap: 6px; /* Space between switch and text */
  padding: 5px 10px; /* Internal spacing */
  border-radius: 20px; /* Rounded pill shape */
  background: #f1f1f1; /* Light background */
  user-select: none; /* Prevents text selection when clicking */
}

body.dark-mode .theme-switch {
  background: #333; /* Dark background for dark mode */
  color: #fff; /* White text in dark mode */
}

.theme-switch input {
  display: none; /* Hides the actual checkbox input */
}

.slider {
  width: 40px; /* Width of toggle */
  height: 20px; /* Height of toggle */
  background-color: #ccc; /* Default track color */
  border-radius: 20px; /* Rounded track */
  position: relative; /* For positioning the circle inside */
  transition: 0.3s; /* Smooth transition on toggle */
}

.slider::before {
  content: "";
  position: absolute; /* Positioned inside the slider */
  top: 2px;
  left: 2px;
  width: 16px; /* Circle diameter */
  height: 16px;
  background: white; /* Circle color */
  border-radius: 50%; /* Makes it a circle */
  transition: 0.3s; /* Smooth sliding effect */
}

input:checked + .slider {
  background-color: #4caf50; /* Track turns green when toggled on */
}

input:checked + .slider::before {
  transform: translateX(20px); /* Moves the circle to the right when toggled */
}