/* Dark Mode */
.dark-mode {
  background-color: #121212 !important;
  color: #ffffff !important;
}

.dark-mode .navbar {
  background-color: #1f1f1f !important;
}

.dark-mode .card {
  background-color: #222 !important;
  color: #fff !important;
}

.dark-mode .btn-dark {
  background-color: #444 !important;
  border-color: #666 !important;
}

.dark-mode .scrollbar-sidebar {
  background-color: #1f1f1f !important;
  color: white !important;
}
.dark-mode .app-main__inner {
  background-color: rgb(80, 80, 80) !important;
  color: white !important;
}

.scrollbar-sidebar {
  /* height: 100vh;
    width: 250px;
    position: fixed;
    left: 0;
    top: 0; */
  background-color: #f8f9fa;
  padding-top: 20px;
}

.scrollbar-sidebar a {
  /* padding: 10px;
    display: block; */
  color: black;
  /* text-decoration: none; */
}

.scrollbar-sidebar a:hover {
  background-color: #ddd;
}
/* Efek Hover di Dark Mode */
.dark-mode .widget-chart-hover:hover {
  background-color: #333 !important; /* Warna lebih terang saat hover */
  border: 1px solid #666 !important;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2);
}

.dark-mode .scrollbar-sidebar a {
  color: white !important;
}

.dark-mode .scrollbar-sidebar a:hover {
  background-color: #444 !important;
}
/* Dark mode untuk navigasi */
.dark-mode .nav-item .nav-link {
  background-color: #222 !important;
  color: #ffffff !important;
  border: 1px solid #444 !important;
  transition: all 0.3s ease-in-out;
}

/* Hover effect di dark mode */
.dark-mode .nav-item .nav-link:hover {
  background-color: #333 !important; /* Warna lebih terang saat hover */
  border: 1px solid #666 !important;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2);
}

/* Warna ikon dalam dark mode */
.dark-mode .tab-subheading span i {
  color: #ffc107 !important;
}
/* Dark mode untuk header */
.dark-mode .app-header.header-shadow {
  background-color: #1f1f1f !important;
  color: #ffffff !important;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1) !important;
}

/* Warna teks dan ikon dalam header */
.dark-mode .app-header .nav-link,
.dark-mode .app-header .widget-number,
.dark-mode .app-header .tab-subheading {
  color: #ffffff !important;
}
.dark-mode .card-title {
  color: #ffffff !important; /* Warna teks putih */
}
/* Hover effect untuk navigasi dalam header */
.dark-mode .app-header .nav-item .nav-link:hover {
  background-color: #333 !important;
  border-radius: 5px;
}

/* Dark mode untuk menu vertikal */
.dark-mode .vertical-nav-menu ul > li > a.mm-active {
  background-color: #333 !important; /* Warna latar menu aktif */
  color: #ffffff !important; /* Warna teks */
  border-left: 4px solid #ffc107 !important; /* Highlight menu aktif */
}

/* Hover effect di dark mode */
.dark-mode .vertical-nav-menu ul > li > a:hover {
  background-color: #444 !important;
  color: #ffc107 !important;
}
.dark-mode .vertical-nav-menu li > a.mm-active {
  background-color: #333 !important; /* Warna latar menu aktif */
  color: #ffffff !important; /* Warna teks */
  border-left: 4px solid #ffc107 !important; /* Highlight menu aktif */
}

/* Hover effect di dark mode */
.dark-mode .vertical-nav-menu li > a:hover {
  background-color: #444 !important;
  color: #ffc107 !important;
}
.dark-mode .card-header {
  background-color: #222 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #444 !important;
}
.dark-mode .card-footer {
  background-color: #222 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #444 !important;
}
/* ==== LIST GROUP ==== */
.dark-mode .list-group {
  background-color: #1f1f1f !important; /* Warna latar belakang */
  border: 1px solid #444 !important; /* Border lebih jelas */
}

/* ==== ITEM LIST ==== */
.dark-mode .list-group-item {
  background-color: #222 !important; /* Warna item */
  color: #ffffff !important; /* Warna teks */
  border-bottom: 1px solid #444 !important; /* Garis pembatas */
}

/* ==== HOVER EFFECT ==== */
.dark-mode .list-group-item:hover {
  background-color: #333 !important;
  color: #ffc107 !important; /* Warna kuning saat hover */
}

/* ==== WIDGET CONTENT ==== */
.dark-mode .widget-content {
  background-color: #222 !important;
  color: #ffffff !important;
}
/* ==== FOOTER UTAMA ==== */
.dark-mode .app-footer {
  background-color: #1f1f1f !important; /* Latar belakang gelap */
  color: #ffffff !important; /* Warna teks putih */
  border-top: 1px solid #444 !important; /* Garis pembatas lebih jelas */
  padding: 15px;
}

/* ==== BAGIAN DALAM FOOTER ==== */
.dark-mode .app-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #222 !important;
  padding: 10px;
  border-radius: 5px;
}

/* ==== FOOTER KIRI (app-footer-left) ==== */
.dark-mode .app-footer-left {
  color: #ffffff !important;
}

/* ==== FOOTER DOTS (ICON & DROPDOWN) ==== */
.dark-mode .footer-dots {
  background-color: #2a2a2a !important;
  border-radius: 5px;
  padding: 5px;
}

.dark-mode .footer-dots .dropdown {
  background-color: #333 !important;
  border: 1px solid #444 !important;
}

/* ==== DROPDOWN ITEM DI FOOTER ==== */
.dark-mode .footer-dots .dropdown-menu {
  background-color: #222 !important;
  border: 1px solid #444 !important;
}

.dark-mode .footer-dots .dropdown-item {
  color: #ffffff !important;
}

.dark-mode .footer-dots .dropdown-item:hover {
  background-color: #333 !important;
  color: #ffc107 !important; /* Warna kuning saat hover */
}

/* ==== MODAL BACKGROUND ==== */
.dark-mode .modal-content {
  background-color: #1f1f1f !important; /* Latar belakang modal */
  color: #ffffff !important; /* Warna teks putih */
  border: 1px solid #444; /* Border gelap */
}

/* ==== MODAL HEADER ==== */
.dark-mode .modal-header {
  background-color: #2a2a2a !important; /* Latar belakang header */
  border-bottom: 1px solid #444; /* Border */
}

/* ==== MODAL TITLE ==== */
.dark-mode .modal-title {
  color: #ffffff !important; /* Warna teks putih */
}

/* ==== TOMBOL CLOSE (X) ==== */
.dark-mode .modal-header .close {
  color: #ffffff !important;
}

/* ==== MODAL BODY ==== */
.dark-mode .modal-body {
  background-color: #1f1f1f !important;
  color: #ffffff !important;
}

/* ==== MODAL FOOTER ==== */
.dark-mode .modal-footer {
  background-color: #2a2a2a !important;
  border-top: 1px solid #444;
}

/* ==== HOVER EFEK PADA TOMBOL CLOSE ==== */
.dark-mode .modal-header .close:hover {
  color: #ff5252 !important; /* Warna merah saat hover */
}

/* ==== INPUT DI MODAL ==== */
.dark-mode .modal-body input,
.dark-mode .modal-body textarea {
  background-color: #333 !important;
  color: #ffffff !important;
  border: 1px solid #555 !important;
}

/* ==== BUTTON DI MODAL ==== */
.dark-mode .modal-footer .btn {
  background-color: #444 !important;
  color: #ffffff !important;
  border: 1px solid #666 !important;
}

/* ==== HOVER PADA BUTTON ==== */
.dark-mode .modal-footer .btn:hover {
  background-color: #666 !important;
  color: #ffffff !important;
  border: 1px solid #666 !important;
}

/* ==== HEADER ATAS (MOBILE & DESKTOP) ==== */
.dark-mode .app-header__content {
  background-color: #1f1f1f !important; /* Latar belakang gelap */
  color: #ffffff !important; /* Warna teks putih */
  border-bottom: 1px solid #444; /* Border bawah */
}

/* ==== HEADER LEFT (SEARCH WRAPPER) ==== */
.dark-mode .app-header-left {
  background-color: #1f1f1f !important;
}

/* ==== INPUT SEARCH ==== */
.dark-mode .search-wrapper .input-holder input {
  background-color: #333 !important; /* Latar belakang input */
  color: #ffffff !important; /* Warna teks */
  border: 1px solid #555 !important;
}

/* ==== PLACEHOLDER INPUT SEARCH ==== */
.dark-mode .search-wrapper .input-holder input::placeholder {
  color: #bbb !important; /* Warna placeholder */
}

/* ==== BORDER SEARCH WRAPPER ==== */
.dark-mode .search-wrapper .input-holder {
  border: 1px solid #555 !important;
}

/* ==== ICON SEARCH ==== */
.dark-mode .search-wrapper .input-holder .search-icon {
  color: #ffffff !important; /* Warna ikon */
}

/* ==== SEARCH HOVER EFFECT ==== */
.dark-mode .search-wrapper:hover {
  background-color: #292929 !important;
  border: 1px solid #666 !important;
}