/*
Skin Name: Dark Mode
*/

/* 1. Mengubah variabel inti Bootstrap */
body.skin-dark-mode {
    --bs-body-bg: #212529;
    --bs-body-color: #dee2e6;
    --bs-border-color: #495057;
    --bs-tertiary-bg: #343a40;
}

/* 2. Menimpa elemen-elemen spesifik */

/* Membuat elemen .bg-light menjadi gelap */
body.skin-dark-mode .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

/* Membuat semua heading berwarna terang */
body.skin-dark-mode h1,
body.skin-dark-mode h2,
body.skin-dark-mode h3,
body.skin-dark-mode h4,
body.skin-dark-mode h5,
body.skin-dark-mode h6 {
    color: #f8f9fa;
}

/* Memastikan warna link tetap menggunakan warna primer tema */
body.skin-dark-mode a {
    color: var(--primary-color-al-theme);
}
body.skin-dark-mode a:hover {
    filter: brightness(1.2); /* Sedikit lebih terang saat di-hover */
}

/* Memastikan teks putih di footer tetap putih */
body.skin-dark-mode footer.text-white p,
body.skin-dark-mode footer.text-white a {
    color: #ffffff !important;
}

/* Memperbaiki warna teks di navigasi halaman (pagination) */
body.skin-dark-mode .page-item.active .page-link {
    color: #ffffff !important;
}

/* Membuat Daftar Isi Otomatis cocok dengan mode gelap */
body.skin-dark-mode .al-pbn-toc {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
}
body.skin-dark-mode .al-pbn-toc p {
    color: #f8f9fa;
}

body.skin-dark-mode .text-muted,
body.skin-dark-mode .text-muted a {
    color: #adb5bd !important; /* Warna abu-abu terang agar kontras */
}

/* Membuat warna tagline menjadi terang di mode gelap */
body.skin-dark-mode .site-tagline {
    color: #dee2e6;
}