/* Animasi Pertukaran Halus */
body, #sidebar, header, .bg-white, .nav-item {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Tetapan Mod Gelap Menyeluruh */
body.dark-mode, 
html.dark-mode body, 
body.dark-mode main, 
body.dark-mode .main-content-area, 
body.dark-mode #main-wrapper { 
    background-color: #0f172a !important; 
    color: #f8fafc !important; 
}

/* Sidebar & Header (Gelap) */
body.dark-mode #sidebar { background-color: #1e293b !important; border-right: 1px solid #334155 !important; }
body.dark-mode header { background-color: #1e293b !important; border-bottom-color: #334155 !important; }

/* Kad Kandungan Putih ditukar Gelap */
body.dark-mode .bg-white { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
body.dark-mode .bg-surface { background-color: #1e293b !important; }

/* Teks Standard */
body.dark-mode .text-\[\#1f1f1f\], 
body.dark-mode .text-slate-800, 
body.dark-mode .text-gray-900,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode p { 
    color: #f8fafc !important; 
}

body.dark-mode .text-gray-600, body.dark-mode .text-slate-500 { color: #94a3b8 !important; }

/* Jadual & Pengepala Data */
body.dark-mode main .bg-slate-50, 
body.dark-mode main thead tr,
body.dark-mode .bg-gray-50 { 
    background-color: #334155 !important; border-color: #475569 !important; 
}
body.dark-mode main tbody tr:hover { background-color: #334155 !important; }
body.dark-mode border-gray-100 { border-color: #334155 !important; }
body.dark-mode border-gray-200 { border-color: #334155 !important; }

/* Butang Navigasi Tepi */
body.dark-mode .nav-item { color: #cbd5e1 !important; }
body.dark-mode .nav-item:hover { background-color: rgba(255,255,255,0.05) !important; color: #ffffff !important; }
body.dark-mode .nav-item.active { background-color: #334155 !important; color: #60a5fa !important; border: 1px solid #475569; }

/* Sembunyikan kesan market 'en' biru semasa mod gelap */
body.dark-mode[style*="background-color: #e0e7ff"] { background-color: #0f172a !important; }

/* --- KEMASKINI NAVBAR FRONTEND (GELAP) --- */
body.dark-mode nav.bg-white\/90 {
    background-color: rgba(15, 23, 42, 0.95) !important; /* Warna gelap dengan sedikit lutsinar */
    border-bottom-color: #334155 !important;
}

body.dark-mode nav .bg-slate-100 {
    background-color: #1e293b !important; /* Butang bahasa dll */
}

body.dark-mode nav .border-slate-200,
body.dark-mode nav .border-slate-100 {
    border-color: #334155 !important;
}

body.dark-mode nav .text-slate-900,
body.dark-mode nav .text-slate-800,
body.dark-mode nav .text-slate-600 {
    color: #e2e8f0 !important; /* Teks logo & pautan jadi cerah */
}

body.dark-mode nav a.text-slate-600:hover {
    color: #818cf8 !important; /* Efek hover biru cerah */
}

/* Hilangkan garisan bawah navbar di frontend supaya sebati dengan latar */
body.dark-mode nav.bg-white\/90 {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

/* --- KEMASKINI FOOTER (GELAP) --- */

/* 1. Gelapkan garisan sempadan (border) paling atas footer */
body.dark-mode footer {
    background-color: #0f172a !important;
    border-top-color: #1e293b !important; 
}

/* 2. Gelapkan garisan pemisah (hr/border-t) di bahagian hak cipta bawah sekali */
body.dark-mode footer .border-t {
    border-top-color: #1e293b !important;
}

/* 3. Terangkan sedikit teks hak cipta (termasuk nama Ilmusalaf) supaya mudah dibaca */
body.dark-mode footer .text-slate-600 {
    color: #cbd5e1 !important; 
}

body.dark-mode footer a:hover {
    color: #ffffff !important;
}

/* Terangkan nama laman web (Ilmusalaf / teks gelap) di bahagian footer */
body.dark-mode footer .text-slate-900 {
    color: #ffffff !important;
}

/* Terangkan nama laman web (Ilmusalaf / teks gelap) di bahagian footer */
body.dark-mode footer .text-slate-900 {
    color: #ffffff !important;
}