/* ══════════════════════════════════════════════════════════════
   Control: Status-Dots
   Farbige Kreise zur Statusanzeige (Verbindungsstatus,
   Provider-Verfügbarkeit, Tenant-Status etc.)

   Größen:
     .z-dot-sm     → 8px  (w-2  — z.B. Remote-Health-Indikatoren)
     .z-dot        → 10px (w-2.5 — Standard: Provider-Dots, Tenant-Dots)
     .z-dot-lg     → 12px (w-3  — z.B. OpenRouter/OAI Provider-Status)

   Farben:
     .z-dot-success → #22c55e  grün  (verbunden, aktiv, OK)
     .z-dot-danger  → #ef4444  rot   (fehler, getrennt, offline)
     .z-dot-warning → #f59e0b  amber (teilweise, nicht konfiguriert)
     .z-dot-muted   → #9ca3af  grau  (unbekannt, neutral, deaktiviert)
     .z-dot-off     → #d1d5db  hellgrau (initial, nicht geprüft)

   Verwendung:
     <span class="z-dot z-dot-success"></span>
     <span class="z-dot-lg z-dot-danger"></span>
     <span id="my-dot" class="z-dot z-dot-muted"></span>

   JS-Toggle:
     dot.className = 'z-dot z-dot-success';
     dot.className = 'z-dot-lg z-dot-danger';
   ══════════════════════════════════════════════════════════════ */


/* ── Basis (alle Größen teilen diese Eigenschaften) ────────── */

.z-dot-sm,
.z-dot,
.z-dot-lg {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}


/* ── Größen ────────────────────────────────────────────────── */

.z-dot-sm {
    width: 8px;
    height: 8px;
}

.z-dot {
    width: 10px;
    height: 10px;
}

.z-dot-lg {
    width: 12px;
    height: 12px;
}


/* ── Farben ────────────────────────────────────────────────── */

.z-dot-success {
    background: #22c55e;
}

.z-dot-danger {
    background: #ef4444;
}

.z-dot-warning {
    background: #f59e0b;
}

.z-dot-muted {
    background: var(--z-text-faint, #9ca3af);
}

.z-dot-off {
    background: #d1d5db;
}