/* Final runtime CSS for dark mode (can be included after bootstrap.css) */

:root,
[data-theme="light"] {
  --dm-body-bg: #eee;
  --dm-body-color: #333;
  --aa-dropdown-color: #333;
}

[data-theme="dark"] {
  --dm-body-bg: #0b0d0f;
  --dm-body-color: #e9ecef;
  --dm-navbar-bg: #2b2d2f;
  --aa-dropdown-color: #ccc;
  --dm-surface: rgba(255,255,255,0.02);
  --dm-border: rgba(255,255,255,0.3);
  --dm-muted: rgba(255,255,255,0.6);
  --dm-primary: #4ea8ff;
}

/* Apply .dark-mode class to switch entire UI */
.dark-mode, .dark-mode body, .dark-mode .content-wrapper {
  background-color: var(--dm-body-bg) !important;
  color: var(--dm-body-color) !important;
}

/* Generic surface */
.dark-mode .bg-white, .dark-mode .bg-light {
  background-color: var(--dm-surface) !important;
  color: var(--dm-body-color) !important;
}

.dark-mode .bg-gradient-primary {
  background-color: #0b2b44;
  background-image: linear-gradient(180deg, #0b2b44 10%, #071923 100%);
  background-size: cover;
}

/* Card */
.dark-mode .card {
  background-color: var(--dm-surface);
  color: var(--dm-body-color);
  border: 1px solid var(--dm-border);
}

/* Buttons */
.dark-mode .btn-light {
  background-color: rgba(255,255,255,0.04);
  color: var(--dm-body-color);
  border: 1px solid rgba(255,255,255,0.06);
}
.dark-mode .btn-primary {
  background-color: var(--dm-primary);
  color: #fff;
  border-color: transparent;
}

/* Forms */
.dark-mode .form-control, .dark-mode .custom-select {
  background-color: rgba(255,255,255,0.02);
  color: var(--dm-body-color);
  border: 1px solid var(--dm-border);
}
.dark-mode .form-control:focus {
  background: color-mix(in srgb, var(--dm-body-bg) 90%, white 10%);
  /* filter: brightness(1.5); */
}
.dark-mode .form-control::placeholder { color: rgba(255,255,255,0.5); }

/* Tables */
.dark-mode .table {
  color: var(--dm-body-color);
}
.dark-mode .table th, .dark-mode .table td, .dark-mode .table .thead-light th {
  border-top: 1px solid rgba(255,255,255,0.04);
  border-left: 1px solid rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dark-mode .sidenav .sidenav-menu .nav .nav-link.active,
.dark-mode .table th, .dark-mode .table .thead-light th {
  background-color: rgba(255,255,255,0.10);
  color: var(--dm-body-color);
}

/* Pagination */
.dark-mode .page-item .page-link, .dark-mode .page-item.disabled .page-link {
  background-color: rgba(255,255,255,0.10);
  color: var(--dm-body-color);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-left: 1px solid rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Navbar */
.topnav {
  background-color: #d8dcdf;
}
.dark-mode .topnav {
  background-color: #171919;
}
.dark-mode .navbar .nav-link { color: rgba(255,255,255,0.85); }

/* Modals */
.dark-mode .modal-content {
  background-color: rgba(255,255,255,0.02);
  color: var(--dm-body-color);
  border: 1px solid var(--dm-border);
}

/* Utility classes */
.dark-mode .text-muted { color: var(--dm-muted) !important; }
.dark-mode .border { border-color: var(--dm-border) !important; }

@media (prefers-color-scheme: dark) {
  :root.dark-mode-preference, .dark-mode-pref {
    /* placeholder class names if you want to style differently */
  }
  /* Auto-apply: add dark mode styles to :root when prefers-color-scheme */
  /* To keep CSS-only auto-apply, you can copy the .dark-mode rules under this media query: */
  :root {
    /* if you want automatic dark-only variables, optional */
  }
  /* Example: automatically apply core dark variables to body */
  body {
    background-color: var(--dm-body-bg);
    color: var(--dm-body-color);
  }
}

/* --- Mengatur Tampilan Icon Sesuai Tema --- */
        /* Secara default (Light), icon bulan (dark mode) yang muncul */
        #dark-mode-toggle .bi-sun-fill { display: none; }
        #dark-mode-toggle .bi-moon-fill { display: inline-block; }

        /* Jika diubah ke Dark, icon matahari (light mode) yang muncul */
        .dark-mode #dark-mode-toggle .bi-sun-fill { display: inline-block; }
        .dark-mode #dark-mode-toggle .bi-moon-fill { display: none; }

.dark-mode .navbar-nav .nav-item a.nav-link:hover {
  color: var(--dm-body-color);
}

.dark-mode .dropdown-menu {
  background-color: var(--dm-body-bg);
  color: var(--dm-body-color);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-left: 1px solid rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.dropdown-item {
  color: var(--aa-dropdown-color);
}

.dark-mode h1 {
  color: #a8a8a8;
}