/* ==================== Settings Modal Styles ==================== */

/* Active segment highlight */
.settings-seg-active {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
}
html.dark .settings-seg-active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* ==================== Toggle Switch ==================== */

.settings-switch {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.settings-switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.settings-switch-track {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  background: #d1d5db; /* gray-300 */
  transition: background-color 200ms ease;
}

html.dark .settings-switch-track {
  background: rgba(255, 255, 255, 0.15);
}

.settings-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 200ms ease, background-color 200ms ease;
}

html.dark .settings-switch-knob {
  background: #e5e7eb;
}

/* Checked state */
.settings-switch input:checked + .settings-switch-track {
  background: #51CF66; /* emerald/primary green */
}

html.dark .settings-switch input:checked + .settings-switch-track {
  background: #34d399; /* emerald-400 */
}

.settings-switch input:checked + .settings-switch-track .settings-switch-knob {
  transform: translateX(20px);
}

/* Focus ring for accessibility */
.settings-switch input:focus-visible + .settings-switch-track {
  outline: 2px solid #51CF66;
  outline-offset: 2px;
}

html.dark .settings-switch input:focus-visible + .settings-switch-track {
  outline-color: #34d399;
}

/* Gear spin on hover (desktop only) */
@media (hover: hover) {
  #stitchDarkModeToggle:hover .material-icons-round {
    animation: settings-spin 600ms ease-in-out;
  }
}
@keyframes settings-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}