/* ZoneSanity - Observability Console Styles (Cloudflare / Datadog Aesthetic) */

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
}

.status-dot-clean {
    background-color: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.status-dot-warn {
    background-color: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.status-dot-fail {
    background-color: #f43f5e;
    box-shadow: 0 0 6px rgba(244, 63, 94, 0.4);
}

/* Badges for technical console metrics */
.badge-clean {
    background-color: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.dark .badge-clean {
    background-color: rgba(6, 78, 59, 0.3);
    color: #4ade80;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-fail {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.dark .badge-fail {
    background-color: rgba(127, 29, 29, 0.3);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-warn {
    background-color: #fffbeb;
    color: #b45309;
    border: 1px solid #fef08a;
}
.dark .badge-warn {
    background-color: rgba(120, 53, 15, 0.3);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Tabular Key-Value Row styling */
.kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.dark .kv-row {
    border-bottom: 1px solid rgba(30, 41, 59, 0.8);
}
.kv-row:last-child {
    border-bottom: none;
}