/* ──────────────────────────────────────────────────────────────
   Control: z-radio-list — Single-Select List mit Radio-Buttons
   ──────────────────────────────────────────────────────────────
   Scrollbare, umrandete Liste für Einzelauswahl.
   Jede Zeile ist ein Radio-Label mit optionalem Beschreibungstext.

   Nutzung (JS):
     zRadioList(container, {
         name:     'user-group',         // Radio-name-Attribut
         items:    [{id, label, desc}],   // Einträge
         selected: 'abc-123',             // aktive ID (oder '')
         empty:    'Keine Einträge',      // Leertext
         none:     'Keine Gruppe',        // optionale "Nichts gewählt"-Option
         onChange: (id) => { ... },        // Callback bei Wechsel
     });

   Markup:
     <div class="z-radio-list">
         <label class="z-radio-list-item">
             <input type="radio" ...>
             <span class="z-radio-list-label">Name</span>
             <span class="z-radio-list-desc">— Beschreibung</span>
         </label>
     </div>

   Farbe:  --z-control-active (#18B2CB) — gemeinsame Akzentfarbe
   Abhängigkeiten:  Design-Tokens aus _layout.html
   ────────────────────────────────────────────────────────────── */

/* ── Container ────────────────────────────────────────────── */
.z-radio-list {
    border: 1px solid var(--z-border);
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding: 0.25rem;
}

/* ── Item (Label + Radio) ─────────────────────────────────── */
.z-radio-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.1s;
    color: var(--z-text);
}

.z-radio-list-item:hover {
    background: var(--z-bg-subtle);
}

/* ── Radio-Button ─────────────────────────────────────────── */
.z-radio-list-item input[type="radio"] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    accent-color: var(--z-control-active, #18B2CB);
}

/* ── Label + Beschreibung ─────────────────────────────────── */
.z-radio-list-label {
    font-weight: 500;
    color: var(--z-text);
}

.z-radio-list-desc {
    color: var(--z-text-muted);
    font-size: 0.75rem;
}

/* ── "Keine"-Option (italic, muted) ───────────────────────── */
.z-radio-list-item--none .z-radio-list-label {
    font-style: italic;
    font-weight: 400;
    color: var(--z-text-muted);
}

/* ── Leertext ─────────────────────────────────────────────── */
.z-radio-list-empty {
    padding: 0.5rem;
    color: var(--z-text-muted);
    font-size: 0.85rem;
}