/* frontend/css/np.toggle.css
   Kleine Komponente: Switch (für Theme Toggle)
   - dreamy / cloudy, sehr dezent
   - kein Rahmen
   - Track wechselt zwischen Primary (OFF) und Secondary (ON)
*/
.np-switch{position:relative;display:inline-flex;align-items:center;justify-content:center}
.np-switch__input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.np-switch__track{
  width:52px;height:30px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:flex-start;
  padding:2px;box-sizing:border-box;

  background:var(--color-primary,#ec4899);

  box-shadow:
    0 10px 26px rgba(2,6,23,0.14),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -10px 18px rgba(0,0,0,0.08);

  transition:background var(--transition-fast,0.15s ease-out),box-shadow var(--transition-fast,0.15s ease-out);
}

.np-switch__thumb{
  width:24px;height:24px;border-radius:999px;
  background:rgba(255,255,255,0.92);

  box-shadow:
    0 10px 22px rgba(2,6,23,0.16),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -10px 14px rgba(2,6,23,0.06);

  transform:translateX(0);
  transition:transform var(--transition-fast,0.15s ease-out);
}

.np-switch__input:focus + .np-switch__track{
  box-shadow:
    0 10px 26px rgba(2,6,23,0.14),
    0 0 0 3px var(--color-primary-soft,rgba(236,72,153,0.18)),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -10px 18px rgba(0,0,0,0.08);
}

.np-switch__input:checked + .np-switch__track{background:var(--color-primary-secondary,#4f46e5)}
.np-switch__input:checked + .np-switch__track .np-switch__thumb{transform:translateX(22px)}