/* Analytics page (Views/Analytics/Index.cshtml) - analisis durasi fasa kerja, trend
   prestasi pembekal, trend perbelanjaan ikut tahun, dan amaran harga luar biasa. */

.analytics-card {
    margin-bottom: 1.2rem;
}

.analytics-subtitle {
    font-size: 0.8rem;
    color: var(--ink-muted);
    margin-bottom: 0.8rem;
}

.analytics-chart-box {
    height: 320px;
}

.table-scroll-analytics {
    max-height: 400px;
    overflow-y: auto;
}

#phaseDurationTable,
#anomalyTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

#phaseDurationTable th,
#phaseDurationTable td,
#anomalyTable th,
#anomalyTable td {
    border: 1px solid var(--line);
}

#phaseDurationTable thead th,
#anomalyTable thead th {
    position: sticky;
    top: 0;
    background: var(--steel-dark);
    color: #FFFFFF;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.72rem;
    padding: 0.6rem 0.6rem;
    text-align: left;
    border-color: var(--steel);
    z-index: 2;
}

#phaseDurationTable tbody td,
#anomalyTable tbody td {
    padding: 0.5rem 0.6rem;
    vertical-align: middle;
    color: var(--ink);
}

/* Row fasa yang jadi bottleneck (purata hari paling tinggi) - highlight supaya
   terus nampak tanpa perlu baca setiap angka satu-satu. */
#phaseDurationTable tbody tr.is-bottleneck td {
    background: var(--status-red-tint);
}

.bottleneck-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--status-red-tint);
    color: var(--status-red);
    font-family: 'Oswald', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-left: 0.5rem;
}

/* Row amaran harga luar biasa - warna kuning peringatan (bukan merah, sebab ni
   baru "berkemungkinan silap", bukan mesti silap - perlukan semakan manual). */
#anomalyTable tbody tr.is-anomaly td {
    background: var(--status-yellow-tint);
}

.deviation-positive {
    color: var(--status-red);
    font-weight: 600;
}

.deviation-negative {
    color: var(--status-blue);
    font-weight: 600;
}