:root {
    --color-primary: #1565C0;
    --color-secondary: #424242;
    --bg-body: #F4F6F9;
    --bg-navbar: #1565C0;
    --bg-sidebar: #FFFFFF;
    --text-sidebar: #333333;
    --color-success: #2E7D32;
    --color-warning: #F9A825;
    --color-danger: #C62828;
    --color-info: #0277BD;
    --color-muted: #9E9E9E;
}

body {
    background-color: var(--bg-body);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.app-navbar {
    background-color: var(--bg-navbar);
}

.app-sidebar {
    background-color: var(--bg-sidebar);
    min-width: 220px;
    min-height: calc(100vh - 56px);
    border-right: 1px solid rgba(0,0,0,0.06);
}
.app-sidebar .nav-link {
    color: var(--text-sidebar);
    border-radius: 6px;
    margin-bottom: 2px;
}
.app-sidebar .nav-link:hover {
    background-color: rgba(0,0,0,0.05);
}

.sidebar-overlay {
    display: none;
}

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    }
    .app-sidebar.show {
        transform: translateX(0);
    }
    .sidebar-overlay.show {
        display: block;
        position: fixed;
        top: 56px; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1030;
    }
}

.login-page {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.kpi-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform .15s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Status badges - sesuai spesifikasi (poin 11) */
.status-on-track { color: var(--color-success); }
.status-warning   { color: var(--color-warning); }
.status-late,
.status-critical  { color: var(--color-danger); }
.status-info      { color: var(--color-info); }
.status-not-started { color: var(--color-muted); }