/* =========================================================
   Tema Biru — Monitoring Chatbot AI Pemerintah
   Biru tua  : #0b2d6b / #103a8a  (navbar, sidebar, judul)
   Biru sedang: #1d63d1
   Biru muda : #4f8ef7 / #e7f0ff  (aksen, latar lembut)
   ========================================================= */
:root {
    --biru-tua: #0b2d6b;
    --biru-tua-2: #103a8a;
    --biru-sedang: #1d63d1;
    --biru-muda: #4f8ef7;
    --biru-lembut: #e7f0ff;
    --biru-lembut-2: #f3f8ff;
}

/* Navbar atas — gradasi biru tua */
.bg-navbar-biru {
    background: linear-gradient(90deg, var(--biru-tua) 0%, var(--biru-tua-2) 60%, var(--biru-sedang) 100%);
}

/* Sidebar — biru tua pekat */
.sidebar-biru-tua {
    background-color: var(--biru-tua) !important;
}
.brand-biru-tua {
    background-color: rgba(0, 0, 0, 0.18) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-biru-tua .brand-link,
.sidebar-biru-tua .brand-text {
    color: #ffffff !important;
}

/* Menu sidebar */
.sidebar-biru-tua .nav-link {
    color: #c7d6f3 !important;
    border-radius: .5rem;
    margin: 2px 8px;
}
.sidebar-biru-tua .nav-link:hover {
    background-color: rgba(79, 142, 247, 0.18) !important;
    color: #ffffff !important;
}
.sidebar-biru-tua .nav-link.active {
    background: linear-gradient(90deg, var(--biru-sedang), var(--biru-muda)) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(29, 99, 209, 0.4);
}
.sidebar-biru-tua .nav-header {
    color: #6f8fd0 !important;
    font-size: .72rem;
    letter-spacing: .06em;
}

/* Aksen teks & utilitas */
.text-biru-tua { color: var(--biru-tua) !important; }
.text-biru-sedang { color: var(--biru-sedang) !important; }

/* Kartu statistik (small box) */
.kotak-stat {
    border: none;
    border-radius: .85rem;
    color: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 18px rgba(11, 45, 107, 0.18);
}
.kotak-stat .ikon {
    position: absolute;
    right: 12px;
    bottom: 6px;
    font-size: 3.6rem;
    opacity: .22;
}
.kotak-stat .angka { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kotak-stat .label { opacity: .9; }
.stat-biru-tua   { background: linear-gradient(135deg, var(--biru-tua), var(--biru-tua-2)); }
.stat-biru-sedang{ background: linear-gradient(135deg, var(--biru-sedang), #2f7be0); }
.stat-biru-muda  { background: linear-gradient(135deg, var(--biru-muda), #76a9fb); }
.stat-info       { background: linear-gradient(135deg, #0aa6c2, #34c4dd); }
.stat-hijau      { background: linear-gradient(135deg, #1f9d6b, #2fc28a); }
.stat-kuning     { background: linear-gradient(135deg, #d9a200, #f0bd3b); }

/* Kartu umum */
.card {
    border: 1px solid var(--biru-lembut);
    border-radius: .85rem;
    box-shadow: 0 2px 10px rgba(11, 45, 107, 0.06);
}
.card-header {
    background-color: var(--biru-lembut-2);
    border-bottom: 1px solid var(--biru-lembut);
    font-weight: 600;
    color: var(--biru-tua);
    border-radius: .85rem .85rem 0 0 !important;
}

/* Tabel */
.table thead th {
    background-color: var(--biru-tua);
    color: #fff;
    border-color: var(--biru-tua-2);
    font-weight: 600;
    vertical-align: middle;
}
.table-hover tbody tr:hover { background-color: var(--biru-lembut); }

/* Tombol primer */
.btn-primary {
    background-color: var(--biru-sedang);
    border-color: var(--biru-sedang);
}
.btn-primary:hover { background-color: var(--biru-tua-2); border-color: var(--biru-tua-2); }
.btn-outline-primary { color: var(--biru-sedang); border-color: var(--biru-sedang); }
.btn-outline-primary:hover { background-color: var(--biru-sedang); border-color: var(--biru-sedang); }

a { color: var(--biru-sedang); }
.page-item.active .page-link {
    background-color: var(--biru-sedang);
    border-color: var(--biru-sedang);
}
.page-link { color: var(--biru-sedang); }

.app-footer {
    border-top: 1px solid var(--biru-lembut);
    color: #6c757d;
}

/* Lencana status */
.badge-status { font-weight: 500; padding: .4em .65em; }