/* File   : app.css
   Lokasi : public/assets/css/
   Fungsi : Gaya visual utama - palet formal (putih, biru tua, abu-abu), minimalis */

:root {
    --biru-tua: #1b2a47;
    --biru: #2f5aa8;
    --abu-muda: #f4f6f9;
    --hijau: #1e8a5f;
    --kuning: #d99e14;
    --merah: #c8433c;
}

body {
    background-color: var(--abu-muda);
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    color: #2b2f36;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
    width: 250px;
    min-height: 100vh;
    background-color: var(--biru-tua);
    color: #dbe3f0;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1030;
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}
.sidebar-brand {
    padding: 1.2rem 1.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; gap: .6rem;
}
.sidebar-menu { padding: .75rem .6rem; flex-grow: 1; overflow-y: auto; }
.sidebar-menu a, .sidebar-logout {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .85rem; margin-bottom: .15rem;
    border-radius: 8px; color: #c3cde3; text-decoration: none;
    font-size: .92rem; width: 100%; background: none; border: none; text-align: left;
}
.sidebar-menu a i { width: 18px; text-align: center; }
.sidebar-menu a:hover, .sidebar-logout:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-menu a.active { background: var(--biru); color: #fff; font-weight: 600; }
.sidebar-divider { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #7f8bab; padding: 1rem .85rem .35rem; }
.sidebar-logout { color: #f3b4b0; }
.sidebar-logout:hover { background: rgba(200,67,60,.18); color: #fff; }

.main-content { margin-left: 250px; min-height: 100vh; }
.topbar { background: #fff; padding: .85rem 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.05); position: sticky; top: 0; z-index: 1020; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1025; }
.sidebar-overlay.show { display: block; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
}

/* ---------- KARTU STATISTIK ---------- */
.kartu-statistik { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); border-left: 4px solid var(--biru); }
.kartu-statistik .angka { font-size: 1.7rem; font-weight: 700; }
.kartu-statistik .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #77808f; font-weight: 600; }
.kartu-statistik.tema-hijau { border-left-color: var(--hijau); }
.kartu-statistik.tema-kuning { border-left-color: var(--kuning); }
.kartu-statistik.tema-merah { border-left-color: var(--merah); }
.kartu-statistik.tema-abu { border-left-color: #8a93a3; }

/* ---------- KARTU & TABEL UMUM ---------- */
.card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.table thead.table-dark th { background-color: var(--biru-tua); border-color: var(--biru-tua); font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; }
.table td, .table th { vertical-align: middle; font-size: .9rem; }

/* ---------- BADGE STATUS ---------- */
.badge-baik { background: #e3f5ec; color: var(--hijau); font-weight: 600; }
.badge-ringan { background: #fdf3dc; color: var(--kuning); font-weight: 600; }
.badge-berat { background: #fbe6e5; color: var(--merah); font-weight: 600; }
.badge-nonaktif { background: #eceef1; color: #6c7280; font-weight: 600; }

.btn-primary { background-color: var(--biru); border-color: var(--biru); }
.btn-primary:hover { background-color: #244a8c; border-color: #244a8c; }

/* ---------- EMPTY STATE ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: #9aa1ad; }
.empty-state i { font-size: 2.5rem; margin-bottom: .75rem; display: block; }

/* ---------- LOGIN ---------- */
.halaman-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--biru-tua), var(--biru)); }
.kartu-login { max-width: 400px; width: 100%; border-radius: 16px; }