/* css/dark-mode.css */

/* --- Gaya Umum untuk Mode Gelap --- */
body.dark-mode {
    background-color: #343a40; /* Latar belakang utama gelap */
    color: #e2e6ea; /* Warna teks utama terang */
}

/* Pastikan semua elemen teks memiliki warna yang konsisten di dark mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode .text-muted {
    color: #e2e6ea !important;
}

body.dark-mode a {
    color: #8ab4f8; /* Warna link yang lebih terang dan jelas */
}

/* --- Gaya untuk Elemen Kontainer dan Panel --- */
body.dark-mode .main-container,
body.dark-mode .login-card { /* Digabungkan karena gaya serupa */
    background-color: #495057; /* Container/card lebih gelap */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Shadow lebih gelap */
}

body.dark-mode .left-panel h1,
body.dark-mode .left-panel p {
    color: #e2e6ea; /* Teks judul dan paragraf terang di left panel */
}

body.dark-mode .right-panel {
    border-left-color: #6c757d; /* Border pemisah lebih gelap */
}

@media (max-width: 768px) {
    body.dark-mode .right-panel {
        border-top-color: #6c757d; /* Border pemisah lebih gelap di mobile */
    }
}

/* --- Gaya untuk Form Controls (Input, Select) --- */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #5a6268; /* Input field lebih gelap */
    color: #e2e6ea;
    border-color: #6c757d;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
    color: #adb5bd; /* Placeholder teks lebih terang */
}

/* --- Gaya untuk Tombol (Buttons) --- */
body.dark-mode .btn-primary {
    background-color: #0056b3; /* Tombol primary di dark mode */
    border-color: #0056b3;
    color: #ffffff;
}
body.dark-mode .btn-primary:hover {
    background-color: #004085;
    border-color: #004085;
}

body.dark-mode .btn-secondary { /* Digabungkan karena gaya serupa */
    background-color: #6c757d; /* Tombol secondary di dark mode */
    border-color: #6c757d;
    color: #e2e6ea;
}
body.dark-mode .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

body.dark-mode .btn-outline-secondary {
    color: #adb5bd;
    border-color: #adb5bd;
}
body.dark-mode .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #ffffff;
    border-color: #6c757d;
}

body.dark-mode .btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}
body.dark-mode .btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

body.dark-mode .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529; /* Teks gelap di tombol warning */
}
body.dark-mode .btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

body.dark-mode .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
body.dark-mode .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* --- Gaya untuk Search Results Card dan List Group --- */
body.dark-mode .search-results-card {
    background-color: #6c757d; /* Card hasil pencarian lebih gelap */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .list-group-item {
    background-color: #495057; /* Item list hasil pencarian lebih gelap */
    color: #e2e6ea;
    border-color: #6c757d;
}

body.dark-mode .list-group-item strong {
    color: #e2e6ea; /* Teks bold di item list terang */
}

/* --- Gaya untuk Alert Messages --- */
body.dark-mode .alert-warning {
    background-color: #ffc107; /* Warna alert warning tetap kuning */
    color: #343a40; /* Teks gelap agar kontras */
    border-color: #ffc107;
}

body.dark-mode .alert-danger {
    background-color: #dc3545; /* Warna alert danger tetap merah */
    color: #ffffff;
    border-color: #dc3545;
}

body.dark-mode .alert-success {
    background-color: #28a745; /* Warna alert success tetap hijau */
    color: #ffffff;
    border-color: #28a745;
}

body.dark-mode .alert-info {
    background-color: #17a2b8; /* Info alert di dark mode */
    color: #fff;
    border-color: #17a2b8;
}

body.dark-mode .alert-secondary {
    background-color: #6c757d; /* Secondary alert di dark mode */
    color: #fff;
    border-color: #6c757d;
}

/* --- Gaya untuk Pagination --- */
body.dark-mode .pagination .page-item .page-link {
    background-color: #495057;
    color: #e2e6ea;
    border-color: #6c757d;
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
}

body.dark-mode .pagination .page-item .page-link:hover {
    background-color: #004085;
    border-color: #004085;
    color: #ffffff;
}

/* --- Gaya Khusus Dashboard --- */
/* Target navbar Bootstrap */
body.dark-mode .navbar {
    background-color: #2c3034 !important; /* Warna navbar atas di mode gelap */
    border-bottom-color: #495057 !important;
}

/* Perbaikan untuk navbar-brand (teks "Dashboard Siswa" / "ADELIA MARTA ARIYADI") */
body.dark-mode .navbar .navbar-brand {
    color: #e2e6ea !important; /* Paksa warna teks menjadi terang */
}

/* Perbaikan untuk ikon hamburger (navbar-toggler-icon) */
body.dark-mode .navbar-toggler-icon {
    /* Mengubah warna SVG di background-image */
    /* Ini adalah SVG encode untuk ikon hamburger putih */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28226, 230, 234, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Warna teks di navbar atas (misal: "Halo, [Nama] (Siswa)") */
body.dark-mode .navbar .navbar-text {
    color: #e2e6ea !important; 
}


/* Target offcanvas Bootstrap */
body.dark-mode .offcanvas {
    background-color: #212529; /* Warna offcanvas sidebar di mode gelap */
    color: #e2e6ea;
}

body.dark-mode .offcanvas .offcanvas-header {
    border-bottom-color: #495057;
}

body.dark-mode .offcanvas .offcanvas-title {
    color: #e2e6ea;
}

body.dark-mode .offcanvas .btn-close {
    filter: invert(1); /* Agar tombol close terlihat */
}

body.dark-mode .list-group-item {
    background-color: #495057; /* Item list di sidebar dan offcanvas */
    color: #e2e6ea;
    border-color: #6c757d;
}

body.dark-mode .list-group-item.active {
    background-color: #0056b3; /* Warna link aktif */
    color: #fff;
    border-color: #0056b3;
}

body.dark-mode .list-group-item:hover:not(.active) {
    background-color: #5a6268; /* Warna hover link */
    color: #fff;
}


body.dark-mode #content,
body.dark-mode .content-area {
    background-color: #343a40; /* Warna konten utama di mode gelap */
    color: #e2e6ea;
}

body.dark-mode .dashboard-card,
body.dark-mode .card {
    background-color: #454d55; /* Warna card di mode gelap */
    color: #e2e6ea;
    border-color: #5a6268;
}

/* Warna ikon di card, menggunakan !important hanya jika benar-benar diperlukan untuk override Bootstrap */
body.dark-mode .card .text-primary {
    color: #8ab4f8 !important;
}
body.dark-mode .card .text-success {
    color: #5cb85c !important;
}
body.dark-mode .card .text-warning {
    color: #ffda6a !important;
}

/* --- Gaya untuk Tabel --- */
body.dark-mode .table {
    color: #e2e6ea; /* Warna teks tabel */
}

body.dark-mode .table thead {
    color: #e2e6ea;
    border-bottom-color: #6c757d;
}

body.dark-mode .table-bordered {
    border-color: #6c757d; /* Border tabel */
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05); /* Warna stripe tabel */
}

body.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: #454d55; /* Warna stripe tabel untuk baris genap */
}

/* --- Transisi Elemen (Pastikan ada di akhir untuk cakupan luas) --- */
/* Transisi untuk semua elemen yang berubah warna */
body, .navbar, .offcanvas, .offcanvas-header, .offcanvas-title,
.main-content-wrapper, .dashboard-card, .card, .table, .table *,
.form-control, .btn, .list-group-item, .alert, .page-link,
.main-container, .login-card, .right-panel, .left-panel h1, .left-panel p {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}