/* ── Data Insights — SSR donut chart ────────────────────────────────────────── */

.ssr-donut-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 161px;
    height: 161px;
}

.ssr-donut-wrap canvas {
    display: block;
}

.ssr-donut-label {
    position: absolute;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    pointer-events: none;
}

/* ── Data Insights — SSR status colours ─────────────────────────────────────── */

/* ── Data Insights — SSR legend ─────────────────────────────────────────────── */

.ssr-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    font-size: 0.875rem;
}

.ssr-legend-label {
    font-weight: 600;
    margin-right: 0.25rem;
}

.ssr-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ssr-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Data Insights — SSR status colours ─────────────────────────────────────── */

.overview-monitor-status.green {
    color: #2e7d32;
}

.overview-monitor-status.yellow {
    color: #D7FB5F;
}

.overview-monitor-status.orange {
    color: #e65100;
}

.overview-monitor-status.red {
    color: #c62828;
}

/* ── OCY: แสดง stat ตลอดบน touch device (ไม่มี hover) ──────────────────────── */

@media (hover: none), (max-width: 991px) {
    .di-card--flip .di-card__title {
        opacity: 0 !important;
        transform: translateY(6px) !important;
    }
    .di-card--flip .di-card__stat {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* ── CPT: N/A symbol (yellow circle) ────────────────────────────────────────── */

.overview-status-symbol.yellow {
    background-color: #f0b429;
}