/* ============================================================================
 * Admin Monitoring Tab Styles
 *
 * Purpose:
 *   Styles for the ops loop monitoring dashboard in the admin panel.
 *   Covers metric cells, chart containers, status indicators, and responsive layout.
 *
 * How to undo:
 *   Remove this file and the <link> from index.html.
 * ============================================================================ */

/* Metric cells inside heartbeat card */
.ops-metric-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-subtle);
    border-radius: 8px;
}

.ops-metric-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.ops-metric-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    font-variant-numeric: tabular-nums;
}

/* Heartbeat pulse animation for active indicator */
@keyframes ops-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

#ops-heartbeat-indicator {
    animation: ops-pulse 2s ease-in-out infinite;
}

/* Chart canvas responsive */
#ops-chart-events {
    width: 100%;
    display: block;
}

/* Ops log table density overrides */
#admin-panel-monitoring .admin-table td {
    padding: 10px 16px;
    font-size: 0.8rem;
}

#admin-panel-monitoring .admin-table th {
    padding: 10px 16px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Responsive: stack charts vertically on narrow screens */
@media (max-width: 900px) {
    #admin-panel-monitoring>div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
}

/* Retention stats cells */
#ops-retention-stats>div {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-subtle);
    border-radius: 8px;
    min-width: 80px;
}