:root {
    --soc-critical: #dc3545;
    --soc-warning: #ffc107;
    --soc-healthy: #198754;
    --soc-stale: #6c757d;
    --soc-muted: #6f42c1;
}

.soc-value { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.density-compact .soc-value { font-size: 1.75rem; }
.density-large .soc-value { font-size: 3rem; }

.site-card { transition: transform .15s, box-shadow .15s; border-left: 4px solid var(--soc-stale); }
.site-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }
.status-border-critical { border-left-color: var(--soc-critical) !important; }
.status-border-warning { border-left-color: var(--soc-warning) !important; }
.status-border-healthy { border-left-color: var(--soc-healthy) !important; }
.status-border-stale, .status-border-unknown, .status-border-offline { border-left-color: var(--soc-stale) !important; }

.status-text-critical { color: var(--soc-critical); }
.status-text-warning { color: #b8860b; }
.status-text-healthy { color: var(--soc-healthy); }
.status-text-stale, .status-text-unknown { color: var(--soc-stale); }

.status-bg-critical { background-color: var(--soc-critical) !important; }
.status-bg-warning { background-color: var(--soc-warning) !important; }
.status-bg-healthy { background-color: var(--soc-healthy) !important; }
.status-bg-stale, .status-bg-unknown { background-color: var(--soc-stale) !important; }

.status-badge.status-critical { background-color: var(--soc-critical); }
.status-badge.status-warning { background-color: var(--soc-warning); color: #000; }
.status-badge.status-healthy { background-color: var(--soc-healthy); }
.status-badge.status-stale, .status-badge.status-unknown { background-color: var(--soc-stale); }

.widget-card .widget-label { font-size: .75rem; text-transform: uppercase; color: #6c757d; }
.widget-card .widget-value { font-size: 1.5rem; font-weight: 600; }

@media (max-width: 576px) {
    .soc-value { font-size: 2rem; }
    .filter-group .btn { font-size: .7rem; padding: .2rem .4rem; }
}

.api-job-progress { height: 1.35rem; }
.api-job-progress .progress-bar { font-size: .75rem; font-weight: 600; transition: width .35s ease; }
.api-job-activity { max-height: 10rem; overflow-y: auto; font-family: var(--bs-font-monospace); font-size: .72rem; line-height: 1.45; }
.api-job-activity .api-job-log-line { padding: .1rem 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.api-job-activity .api-job-log-line:last-child { border-bottom: 0; font-weight: 600; }
#api-job-background-banner .progress { background-color: rgba(255,255,255,.6); }
.api-job-banner { cursor: pointer; }
.api-job-banner .btn { cursor: pointer; }