/* static/css/custom_jazzmin.css */

/* --- Bagian 1: Mengubah Warna Primer & Status --- */
/* Ini akan mempengaruhi banyak elemen seperti tombol, link aktif, header widget, dll. */
:root {
    /* ==== Palet Biru Muda Utama ==== */
    --primary: #4390e9;   /* Biru muda utama yang terang */
    --secondary: #6c757d; /* Tetap abu-abu standar */
    --success: #28a745;   /* Hijau standar untuk sukses */
    --info: #17a2b8;      /* Biru cyan standar untuk info */
    --warning: #ffc107;   /* Kuning standar untuk warning */
    --danger: #dc3545;    /* Merah standar untuk bahaya */
    --light: #f8f9fa;     /* Putih muda standar */
    --dark: #343a40;      /* Abu-abu gelap standar */

    /* Variabel AdminLTE yang sering terkait dengan primary */
    --blue: var(--primary); /* Pastikan Bootstrap/AdminLTE 'blue' menggunakan primary kita */

    /* Jika Anda ingin nuansa biru yang berbeda untuk setiap status,
       Anda bisa mendefinisikannya secara spesifik: */
    /* --blue: #52B2BF; */
    /* --indigo: #6610f2; */
    /* --purple: #6f42c1; */
    /* --pink: #e83e8c; */
    /* --red: #dc3545; */
    /* --orange: #fd7e14; */
    /* --yellow: #ffc107; */
    /* --green: #28a745; */
    /* --teal: #20c997; */
    /* --cyan: #17a2b8; */

    /* Anda juga bisa mendefinisikan varian terang/gelap dari primary */
    --primary-light: #ecd0ac; /* Untuk hover, active states */
    --primary-dark: #088ba5;  /* Untuk kontras, background gelap */
}

/* --- Bagian 2: Mengubah Warna Sidebar --- */
/* Ini menargetkan sidebar itu sendiri.
   Asumsi Anda menggunakan tema sidebar "dark" (default AdminLTE/Jazzmin) */
.main-sidebar, .main-sidebar::before {
    background-color: var(--primary-dark) !important; /* Latar belakang sidebar */
}

/* Warna teks link di sidebar */
.main-sidebar .nav-sidebar .nav-item .nav-link {
    color: #f0f0f0 !important; /* Warna teks link (misal: putih keabu-abuan) */
}

/* Warna teks link saat di-hover */
.main-sidebar .nav-sidebar .nav-item .nav-link:hover {
    background-color: var(--primary) !important; /* Latar belakang saat hover */
    color: #fff !important; /* Warna teks saat hover */
}

/* Warna link aktif di sidebar (yang sedang dipilih) */
.main-sidebar .nav-sidebar .nav-item .nav-link.active {
    background-color: var(--primary-light) !important; /* Latar belakang link aktif */
    color: #333 !important; /* Warna teks link aktif (misal: abu-abu gelap) */
}

/* Warna ikon di sidebar */
.main-sidebar .nav-sidebar .nav-item .nav-link i {
    color: #e0e0e0 !important; /* Warna ikon (lebih terang sedikit dari teks) */
}

/* Warna dropdown/sub-menu di sidebar */
.main-sidebar .nav-sidebar .nav-item.menu-open > .nav-treeview {
    background-color: rgba(0, 0, 0, 0.2) !important; /* Latar belakang sub-menu */
}
.main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link {
    color: #d0d0d0 !important; /* Warna teks sub-menu */
}
.main-sidebar .nav-sidebar .nav-item .nav-treeview .nav-item .nav-link:hover {
    background-color: var(--primary) !important; /* Latar belakang sub-menu hover */
    color: #fff !important;
}


/* --- Bagian 3: Mengubah Warna Top Navbar/Header --- */
.main-header {
    background-color: var(--primary-dark) !important; /* Latar belakang header atas */
}

.main-header .nav-link {
    color: #f0f0f0 !important; /* Warna teks link di header atas */
}

.main-header .nav-link:hover {
    color: #fff !important; /* Warna teks link di header atas saat hover */
}


/* --- Bagian 4: Mengubah Ukuran Logo di Login Page (dari diskusi sebelumnya) --- */
.login-box .login-logo img {
    width: 150px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
}

.login-box .login-logo b,
.login-box .login-logo a span {
    display: none !important;
}

/* --- Bagian 5: Mengubah Warna Teks pada Login Page --- */
.login-box-msg, .register-box-msg {
    color: #555 !important; /* Warna teks pesan di login/register page */
}
.login-box .card-body {
    background-color: #fff !important; /* Latar belakang card login */
    border-top: 3px solid var(--primary) !important; /* Border atas card login */
}

/* --- Bagian 6: Mengubah Warna Tombol Utama --- */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}