/* ============================================================
   bacap · rr-toggle component (canonical)
   ------------------------------------------------------------
   Zentrale, wiederverwendbare Definition des Pill-Toggle-Buttons.
   Wird auf allen Rechner-Seiten verwendet (Entnahmeplan,
   Zinsrechner, Fondssparrechner, Rentenrechner).

   HTML-Struktur:
     <button class="rr-toggle" type="button" aria-pressed="false">
       <span class="rr-track"><span class="rr-handle"></span></span>
       <span class="toggle-text">Label</span>
     </button>

   EIN-Zustand wird erkannt über: Klasse "on", Klasse "is-on",
   aria-pressed="true" oder aria-checked="true".

   ----- Architektur -----
   Farben laufen über CSS-Variablen. Der Dark-Mode ändert NUR
   die Variablen (nicht die Eigenschaften direkt). Dadurch
   kollidiert er nie mit den Zustands-Regeln (.on), egal welche
   Selektor-Spezifität — die EIN-Optik gewinnt immer.

   ----- Design -----
   - Pill nur so breit wie der Inhalt (width: fit-content).
   - Pill-Rand: grau im AUS-Zustand, orange im EIN-Zustand.
   - Track: grau im AUS-Zustand, grün im EIN-Zustand.
   - Handle: weiß, gleitet beim Umschalten nach rechts.
   - Label: gedimmt im AUS-Zustand, voll + fett im EIN-Zustand.
   ============================================================ */

/* ---------- Farb-Variablen (Light-Mode-Defaults) ---------- */
.rr-toggle{
  --rrt-pill-bg:      rgba(0,0,0,.04);
  --rrt-pill-border:  rgba(0,0,0,.20);
  --rrt-track-bg:     rgba(0,0,0,.18);
  --rrt-accent:       #ff6b00;   /* Rand im EIN-Zustand */
  --rrt-track-on:     #22c55e;   /* Track im EIN-Zustand */
}

/* Dark-Mode: NUR Variablen umsetzen, keine Eigenschaften. */
:root[data-theme="dark"] .rr-toggle{
  --rrt-pill-bg:      rgba(255,255,255,.06);
  --rrt-pill-border:  rgba(255,255,255,.25);
  --rrt-track-bg:     rgba(255,255,255,.20);
}

/* ---------- Pill (Button) ---------- */
.rr-toggle{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  cursor:pointer;
  user-select:none;

  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;

  width:fit-content;
  max-width:max-content;
  min-width:0;
  flex:0 0 auto;
  padding:5px 14px 5px 5px;
  min-height:36px;

  border-radius:9999px;
  background-color:var(--rrt-pill-bg);
  border:1.5px solid var(--rrt-pill-border);
  color:inherit;
  white-space:nowrap;
  box-shadow:none;
  outline:none;

  transition:border-color .18s ease, background-color .18s ease;
}

/* EIN-Zustand: orangefarbener Rand */
.rr-toggle.on,
.rr-toggle.is-on,
.rr-toggle[aria-pressed="true"],
.rr-toggle[aria-checked="true"]{
  border-color:var(--rrt-accent);
}

.rr-toggle:focus-visible{
  outline:2px solid #0b5fff;
  outline-offset:2px;
}

.rr-toggle:disabled,
.rr-toggle[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* ---------- Track (Schiene) ---------- */
.rr-toggle .rr-track{
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
  flex:0 0 auto;
  border-radius:9999px;
  background-color:var(--rrt-track-bg);
  border:0;
  box-shadow:none;
  transition:background-color .18s ease;
}

/* EIN-Zustand: grüner Track */
.rr-toggle.on .rr-track,
.rr-toggle.is-on .rr-track,
.rr-toggle[aria-pressed="true"] .rr-track,
.rr-toggle[aria-checked="true"] .rr-track{
  background-color:var(--rrt-track-on);
}

/* ---------- Handle (Schieberegler) ---------- */
.rr-toggle .rr-handle{
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:0;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .18s ease;
}

.rr-toggle.on .rr-handle,
.rr-toggle.is-on .rr-handle,
.rr-toggle[aria-pressed="true"] .rr-handle,
.rr-toggle[aria-checked="true"] .rr-handle{
  transform:translateX(20px);
}

/* ---------- Label-Text ---------- */
.rr-toggle .toggle-text{
  display:inline-block;
  font-weight:500;
  white-space:nowrap;
  text-align:left;
  color:inherit;
  opacity:.6;
  transition:opacity .18s ease;
}

.rr-toggle.on .toggle-text,
.rr-toggle.is-on .toggle-text,
.rr-toggle[aria-pressed="true"] .toggle-text,
.rr-toggle[aria-checked="true"] .toggle-text{
  opacity:1;
  font-weight:700;
}