/* ──────────────────────────────────────────────────────────────
   Controls: Erweiterte-Indexierung-Toggles
   ──────────────────────────────────────────────────────────────
   Zwei wiederverwendbare Toggles für das "Erweiterte Indexierung"-
   Feature (indexing_mode: standard | advanced). Global geladen via
   _layout.html. Aktivzustand über .active-Klasse.

   .z-icon-toggle  → kompakter Icon-Button (26×24), Icon scan-text.
                     Für die PDF-Dateiliste (pro Datei + Master).
   .z-adv-toggle   → beschrifteter Pill: Status-Punkt + Icon + Text
                     "Erweiterte Indexierung". Für den Event-Dialog.

   Beide nutzen ausschließlich Design-Tokens (--z-control-active,
   --z-accent-light, --z-border, …), keine Hardcoded-Farben.
   Icon wird via initIcons() aus <svg data-icon="scan-text"> gefüllt.
   ────────────────────────────────────────────────────────────── */

/* ── Icon-Toggle (kompakt) — PDF-Liste & Master ── */
.z-icon-toggle {
    width: 26px; height: 24px; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--z-border); border-radius: 6px;
    background: var(--z-bg-input); color: var(--z-text-muted);
    cursor: pointer; padding: 0; transition: all 0.12s ease;
}
.z-icon-toggle:hover {
    border-color: var(--z-control-active);
    color: var(--z-text-mid);
}
.z-icon-toggle.active {
    background: var(--z-accent-light);
    border-color: var(--z-control-active);
    color: var(--z-control-active);
}
.z-icon-toggle svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Beschrifteter Toggle (Punkt + Icon + Text) — Event-Zeile ── */
.z-adv-toggle {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    border: 1px solid var(--z-border); border-radius: 999px;
    background: var(--z-bg-input); color: var(--z-text-muted);
    padding: 5px 12px; font-size: 12px; cursor: pointer;
    white-space: nowrap; transition: all 0.12s ease; user-select: none;
}
.z-adv-toggle:hover {
    border-color: var(--z-control-active);
    color: var(--z-text-mid);
}
.z-adv-toggle.active {
    background: var(--z-accent-light);
    border-color: var(--z-control-active);
    color: var(--z-primary);
}
.z-adv-toggle svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    flex: 0 0 auto;
}
.z-adv-toggle .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--z-text-faint); flex: 0 0 auto;
    transition: background 0.12s ease;
}
.z-adv-toggle.active .dot {
    background: var(--z-control-active);
}

/* ── Disabled (Feature noch nicht freigeschaltet — Vorschau) ──
   Sichtbar als Vorschau, aber inaktiv. KEIN pointer-events:none,
   damit der Tooltip beim Hover weiter erscheint. Active-State
   unterdrückt, Klick ist im JS bereits geblockt. */
.z-icon-toggle.is-disabled,
.z-adv-toggle.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.z-icon-toggle.is-disabled:hover {
    border-color: var(--z-border);
    color: var(--z-text-muted);
}
.z-adv-toggle.is-disabled:hover {
    border-color: var(--z-border);
    color: var(--z-text-muted);
}
.z-icon-toggle.is-disabled.active,
.z-adv-toggle.is-disabled.active {
    background: var(--z-bg-input);
    border-color: var(--z-border);
    color: var(--z-text-muted);
}
.z-adv-toggle.is-disabled.active .dot {
    background: var(--z-text-faint);
}