/* ──────────────────────────────────────────────────────────────
   Control: z-toggle-switch (Switch-in-Button)
   ──────────────────────────────────────────────────────────────
   Wiederverwendbarer Switch-in-Button-Toggle (Variante A) mit
   optionalem Icon + Label. Aktivzustand über .active-Klasse.

   Hervorgegangen aus chat_optimizer.css (ADR-016: geteilte Control-
   Datei statt seitenlokaler Duplizierung). Global geladen via
   _layout.html, daher auf jeder Seite verfügbar (Chat-Optimizer,
   RAGs, …).

   Größen:
     .z-toggle-switch          → Standard (Höhe 38px, wie Combo/Input)
     .z-toggle-switch--sm      → Klein (Höhe 22px), für enge Zeilen

   Nutzung:
     <div class="z-toggle-switch" onclick="this.classList.toggle('active')">
       <div class="z-toggle-track"><div class="z-toggle-thumb"></div></div>
       <span class="z-toggle-label">Label</span>
     </div>

   Mit Icon (svg data-icon via initIcons / zIcon):
     <div class="z-toggle-switch z-toggle-switch--sm" ...>
       <svg class="z-toggle-icon" data-icon="scan-text"></svg>
       <div class="z-toggle-track"><div class="z-toggle-thumb"></div></div>
     </div>

   Abhängigkeiten:  Design-Tokens aus _layout.html
   ────────────────────────────────────────────────────────────── */

/* ── Normal size (matches combo/input height) ── */
.z-toggle-switch {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0.3rem 0.6rem 0.3rem 0.45rem;
    border: 1px solid var(--z-border); border-radius: 0.375rem;
    background: var(--z-bg-input); cursor: pointer; user-select: none;
    transition: all 0.2s ease; flex-shrink: 0;
    height: 38px;
}
.z-toggle-switch:hover { border-color: var(--z-primary); }
.z-toggle-switch.active {
    border-color: var(--z-primary);
    background: var(--z-primary-dim, rgba(14,154,167,0.1));
}

.z-toggle-track {
    width: 30px; height: 16px; border-radius: 999px;
    background: var(--z-track-bg, rgba(255,255,255,0.06));
    border: 1.5px solid var(--z-border);
    position: relative; transition: all 0.2s ease; flex-shrink: 0;
}
.z-toggle-thumb {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--z-text-faint);
    position: absolute; top: 2px; left: 2px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.z-toggle-switch.active .z-toggle-track {
    background: var(--z-primary);
    border-color: var(--z-primary);
}
.z-toggle-switch.active .z-toggle-thumb {
    left: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.z-toggle-label {
    font-size: 0.75rem; font-weight: 600;
    color: var(--z-text-muted); transition: color 0.15s;
    white-space: nowrap;
}
.z-toggle-switch.active .z-toggle-label { color: var(--z-primary); }

.z-toggle-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--z-text-faint); transition: color 0.15s;
}
.z-toggle-switch.active .z-toggle-icon { color: var(--z-primary); }

/* ── Small size ── */
.z-toggle-switch--sm {
    height: 22px; gap: 4px;
    padding: 0.1rem 0.35rem 0.1rem 0.25rem;
}
.z-toggle-switch--sm .z-toggle-track {
    width: 22px; height: 12px;
}
.z-toggle-switch--sm .z-toggle-thumb {
    width: 6px; height: 6px; top: 50%; left: 2px; transform: translateY(-50%);
}
.z-toggle-switch--sm.active .z-toggle-thumb {
    left: 12px;
}
.z-toggle-switch--sm .z-toggle-label {
    font-size: 0.65rem;
}
.z-toggle-switch--sm .z-toggle-icon {
    width: 12px; height: 12px;
}