<style>
/* Default (light mode) */
.sidebar {
  background-color: #faf9f8ff; /* abu terang */
  min-height: 100vh;
  border-right: 1px solid #ddd;
}

.sidebar h4 {
  color: #333;
}

.sidebar .nav-link {
  color: #333 !important;
  font-weight: 500;
  margin: 2px 0;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background-color: #e9ecef !important;
  color: #000 !important;
}

/* Dark mode aktif */
.dark-mode .sidebar {
  background-color: #2c2c2c !important; /* abu gelap */
  border-right: 1px solid #444;
}

.dark-mode .sidebar h4,
.dark-mode .sidebar .nav-link {
  color: #f1f1f1 !important; /* teks jadi terang */
}

.dark-mode .sidebar .nav-link:hover,
.dark-mode .sidebar .nav-link.active {
  background-color: #444 !important;
  color: #ffffffff !important;
}


</style>



<!-- Sidebar -->


<!-- Sidebar -->
<div class="sidebar d-flex flex-column p-1 bg-light" id="sidebar">
  <h4 class="mb-4">Admin Panel</h4>
  <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
      <a href="<?= base_url('admin/dashboard'); ?>" class="nav-link">📊 Dashboard</a>
    </li>
    <li>
      <a href="<?= base_url('admin/pendaftar_perorangan'); ?>" class="nav-link">👥 Pendaftar Perorangan</a>
    </li>
    <li>
      <a href="<?= base_url('admin/pendaftar_kelompok'); ?>" class="nav-link">👥 Pendaftar Kelompok</a>
    </li>
    <li>
      <a href="<?= base_url('admin/jenis_seni'); ?>" class="nav-link">🎭 Data Seni</a>
    </li>
    <li>
      <a href="#" class="nav-link">⚙ Pengaturan</a>
    </li>
    <li>
      <a href="<?= base_url('auth/logout'); ?>" class="nav-link text-danger">🚪 Logout</a>
    </li>
  </ul>
</div>