/* ============================================================
COMPONENTS/CHARTS.CSS — Radar & Time Analytic (BENTUK A, rim
tersambung). Kartu = clip-path chamfer + latar neon yang tampak
sebagai garis 1px lewat ::before inset:1px (pola sama dengan
.threshold-section di forms.css) => garis bordir MENYAMBUNG di
pojok chamfer, tidak terputus. Napas 12px di container.
============================================================ */
/* napas panel Time Analytic (kebal cache) */
#timeAnalyticsContainer {
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
/* ---- kartu grafik: rim A tersambung ---- */
.chart-container {
    position: relative;
    isolation: isolate;
    margin-top: 16px;
    text-align: center;
    clip-path: var(--kx-clip);
    border: 0;
    border-radius: 0;
    background: rgba(26, 255, 156, .3);
    padding: 12px;
    transition: background .25s ease, filter .3s ease;
}
.chart-container::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--kx-clip);
    background: #05080c;
    z-index: -1;
}
.chart-container:hover {
    background: rgba(26, 255, 156, .55);
    filter: drop-shadow(0 0 7px var(--primary-glow));
}
.chart-container h3 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary-glow);
    margin: 0 0 8px;
}
#opportunityChart {
    max-width: 100%;
    background: rgba(3, 5, 10, 0.75) !important;
    clip-path: var(--kx-clip-sm);
    border-radius: 0;
    max-height: 180px;
    padding: 10px;
    box-sizing: border-box;
}
#timeAnalyticsCanvas {
    max-width: 100%;
    background: rgba(3, 5, 10, 0.75) !important;
    clip-path: var(--kx-clip-sm);
    border-radius: 0;
    padding: 10px;
    box-sizing: border-box;
}