/* ==========================================================================
   Kodxx Switch — Modern Toggle
   iOS-inspired toggle with smooth spring animation and kodxx dark accent.
   ========================================================================== */

.md3-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 12px;
  user-select: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.md3-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* ── Track ── */
.md3-switch-track {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--md3-switch-track, #d4d4d4);
  transition: background 0.3s cubic-bezier(.4, 0, .2, 1),
              box-shadow 0.3s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Subtle inner shadow when off */
.md3-switch-track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: opacity 0.3s ease;
  opacity: 1;
}

.md3-switch input:checked + .md3-switch-track {
  background: var(--md3-switch-track-checked, #1a1a1a);
}

.md3-switch input:checked + .md3-switch-track::before {
  opacity: 0;
}

/* ── Thumb ── */
.md3-switch-thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 22px;
  height: 22px;
  background: var(--md3-switch-thumb, #ffffff);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
  transition: left 0.3s cubic-bezier(.34, 1.56, .64, 1),
              width 0.2s ease,
              left 0.2s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thumb slides right when checked */
.md3-switch input:checked + .md3-switch-track .md3-switch-thumb {
  left: 22px;
}

/* Stretch effect on press */
.md3-switch:active .md3-switch-thumb {
  width: 26px;
}

.md3-switch:active input:checked + .md3-switch-track .md3-switch-thumb {
  left: 18px;
}

/* ── Focus ring ── */
.md3-switch input:focus-visible + .md3-switch-track {
  outline: 2px solid var(--md3-switch-track-checked, #1a1a1a);
  outline-offset: 2px;
}

/* ── Hover glow ── */
.md3-switch:hover .md3-switch-track {
  box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.06);
}

.md3-switch input:checked:hover + .md3-switch-track {
  box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.1);
}

/* ── Disabled ── */
.md3-switch input:disabled + .md3-switch-track {
  background: var(--md3-switch-disabled, #e5e5e5);
  cursor: not-allowed;
  opacity: 0.5;
}

.md3-switch input:disabled + .md3-switch-track .md3-switch-thumb {
  box-shadow: none;
}

.md3-switch input:disabled ~ .md3-switch-label {
  color: #bbb;
  cursor: not-allowed;
}

/* ── Ripple (hidden, kept for DOM compat) ── */
.md3-switch-ripple {
  display: none;
}

/* ── Label ── */
.md3-switch-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--md3-on-surface, #333);
  cursor: pointer;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.md3-switch:hover .md3-switch-label {
  color: var(--md3-on-surface, #1a1a1a);
}

/* ── Indicator (loading dot) ── */
.md3-switch-indicator {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--md3-switch-track-checked, #1a1a1a);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex: 0 0 auto;
}

.md3-switch-indicator.active {
  opacity: 1;
  animation: md3-switch-indicator-pulse 1.2s ease-in-out infinite;
}

@keyframes md3-switch-indicator-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.6; }
  50%      { transform: scale(1.1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .md3-switch-indicator.active { animation: none; }
  .md3-switch-thumb { transition: left 0.1s ease !important; }
}

/* ── Small variant ── */
.md3-switch.small .md3-switch-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
}

.md3-switch.small .md3-switch-thumb {
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
}

.md3-switch.small input:checked + .md3-switch-track .md3-switch-thumb {
  left: 18px;
}

.md3-switch.small:active .md3-switch-thumb {
  width: 20px;
}

.md3-switch.small:active input:checked + .md3-switch-track .md3-switch-thumb {
  left: 14px;
}

.md3-switch.small .md3-switch-label {
  font-size: 0.82rem;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .md3-switch-label { font-size: 0.84rem; }
  .md3-switch { gap: 10px; }
}