/* ============================================================
   DARK MODE TOGGLE — Sun/Moon Pill Switch
   ============================================================
   Injected by darkmode.js into the nav area.
   Wrapper class: .dm-toggle-wrapper
   ============================================================ */

/* List item container */
li.dm-toggle-li {
  display: flex;
  align-items: center;
}

.dm-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* The pill track */
.dm-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: #ccc;
  border-radius: 999px;
  transition: background-color 0.25s ease;
  flex-shrink: 0;
}

.dark-mode-enabled .dm-toggle-track {
  background-color: #4285F4;
}

/* The sliding thumb */
.dm-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode-enabled .dm-toggle-thumb {
  transform: translateX(20px);
}

/* Icons inside the thumb */
.dm-toggle-thumb svg {
  width: 11px;
  height: 11px;
  pointer-events: none;
}

/* Sun icon (shown in light mode) */
.dm-icon-sun {
  display: block;
  fill: #f59e0b;
}

.dark-mode-enabled .dm-icon-sun {
  display: none;
}

/* Moon icon (shown in dark mode) */
.dm-icon-moon {
  display: none;
  fill: #4285F4;
}

.dark-mode-enabled .dm-icon-moon {
  display: block;
}

/* Optional label next to the toggle */
.dm-toggle-label {
  font-size: 13px;
  color: var(--config-main-navigation-nav-color, #333);
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  white-space: nowrap;
}

/* Hide label on mobile if space is tight */
@media (max-width: 767px) {
  .dm-toggle-label {
    display: none;
  }
}