/* monitor-extras.css — styles for avg/peak pills and KPI icons */
.avg-stats{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem}
.avg-pill{background:#0b1220;border:1px solid rgba(255,255,255,.06);padding:.35rem .6rem;border-radius:999px;font-size:.8rem;color:#cbd5e1;display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.avg-pill .dot{width:.5rem;height:.5rem;border-radius:50%}
.avg-pill strong{color:#fff;font-weight:600}
.avg-pill.hint{background:#0f172a;color:#94a3b8;border-color:rgba(148,163,184,.25)}
/* KPI icons (in case needed) */
.kpi-row{display:flex;align-items:center;gap:.6rem}
.kpi-col{display:flex;flex-direction:column;line-height:1.1}
.kpi-icon{width:24px;height:24px;image-rendering:pixelated;flex:0 0 24px}
@media (min-width:1024px){ .kpi-icon{width:28px;height:28px} }


.card {
    @apply bg-white shadow rounded-2xl p-5 border border-gray-100;
}

.kpi {
    @apply text-3xl font-semibold;
}

.kpi-sub {
    @apply text-sm text-gray-500;
}

.pill {
    @apply inline-block px-2 py-1 rounded-full text-xs bg-gray-100;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

/* loader spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 122, 0, 0.67);
    border-top-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(88, 88, 88, 0.0);
    backdrop-filter: blur(2px);
}

.hidden {
    display: none;
}