/* === THEME WARNA === */
/* Setiap tema memiliki skema warna yang disesuaikan untuk kontras dan estetika */

body.dark {
  background-color: #212121; /* Sedikit lebih terang dari hitam murni */
  color: #e0e0e0; /* Off-white untuk teks umum (body, p) */
}
body.dark .navbar { /* Mengatur background navbar */
  background-color: #495057 !important;
}
body.dark .nav-link { /* Warna font untuk menu level 0 */
  color: #e0e0e0 !important;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 5px;
}
body.dark .nav-link:hover {
  
  list-style: none;
  background-color: #333333;
  Color : #fff;
  border-radius: 8px;
}

body.dark .nav-link.active {
  background-color: #333333;
  color: #ffffff !important;
  border-radius: 8px;
}

body.dark .dropdown-menu { /* Background menu dropdown, termasuk mega menu */
  background-color: #343a40 !important; /* Background abu gelap untuk dropdown */
  color: #e0e0e0 !important; /* Warna teks umum untuk menu dropdown */
}
body.dark .dropdown-item { /* Warna font untuk item di dropdown */
  color: #e0e0e0 !important;
  padding-left:1rem;
}
body.dark .dropdown-item:hover {
  background-color: #495057 !important; /* Background hover untuk dropdown item */
  color: #ffffff !important; /* Font hover tetap putih terang */
  border-radius: 8px;
}

body.dark .activex {
  background-color: #495057 !important; /* Background hover untuk dropdown item */
  color: #ffffff !important; /* Font hover tetap putih terang */
  border-radius: 8px;
}

body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
  color: #ffffff !important; /* Headings lebih menonjol */
}
body.dark p {
  color: #e0e0e0 !important; /* Warna paragraf mengikuti body */
}
body.dark .mega-menu-heading { /* Judul kolom mega menu di dark theme */
  color: #ffffff !important; /* Pastikan judul tetap putih */
}

body.dark .modal-header{
  background-color: #495057; /* Sedikit lebih terang dari hitam murni */
  color: #ffffff; /* Off-white untuk teks umum (body, p) */
}

body.dark .modal-body{
  color: #000000; /* Off-white untuk teks umum (body, p) */
}

body.dark .modal-footer{
  background-color: #e0e0e0; /* Sedikit lebih terang dari hitam murni */
}


body.green {
  background-color: #e6ffe6; /* Latar belakang hijau sangat muda */
  color: #1a603c;
}
body.green .navbar {
  background-color: #c0f0c0 !important;
}
body.green .nav-link {
  color: #1a603c !important;
}
body.green .nav-link:hover {
  background-color: #a0e0a0 !important;
  color: #0d422a !important;
}
body.green .dropdown-menu {
  background-color: #c0f0c0 !important;
  color: #1a603c !important;
}
body.green .dropdown-item {
  color: #1a603c !important;
}
body.green .dropdown-item:hover {
  background-color: #a0e0a0 !important;
  color: #0d422a !important;
}
body.green h1, body.green h2, body.green h3, body.green h4, body.green h5, body.green h6 {
  color: #0f4a2e !important;
}
body.green p {
  color: #1a603c !important;
}
body.green .mega-menu-heading {
  color: #0f4a2e !important;
}

body.green .card-header {
  background-color: #1a603c !important;
}

body.green .card {
  background-color: #c0f0c0 !important;
  color: #1a603c !important;
}

body.green .datatablex thead {
    background: linear-gradient(to bottom, #5bba00, #c0fbb6);
    box-shadow: inset 0 -1px 0 #2f8000;
    color: #343a40;
}


body.blue {
  background-color: #e0f2ff;
  color: #004d99;
}
body.blue .navbar {
  background-color: #b3e0ff !important;
}
body.blue .nav-link {
  color: #004d99 !important;
}
body.blue .nav-link:hover {
  background-color: #99ccff !important;
  color: #003366 !important;
}
body.blue .dropdown-menu {
  background-color: #b3e0ff !important;
  color: #004d99 !important;
}
body.blue .dropdown-item {
  color: #004d99 !important;
}
body.blue .dropdown-item:hover {
  background-color: #99ccff !important;
  color: #003366 !important;
}
body.blue h1, body.blue h2, body.blue h3, body.blue h4, body.blue h5, body.blue h6 {
  color: #003a7a !important;
}
body.blue p {
  color: #004d99 !important;
}
body.blue .mega-menu-heading {
  color: #003a7a !important;
}

body.blue .card-header {
  background-color: #004d99 !important;
}

body.blue .card {
  background-color: #b3e0ff !important;
}


body.gray {
  background-color: #f5f5f5;
  color: #333333;
}
body.gray .navbar {
  background-color: #e8e8e8 !important;
}
body.gray .nav-link {
  color: #333333 !important;
}
body.gray .nav-link:hover {
  background-color: #d0d0d0 !important;
  color: #1a1a1a !important;
}
body.gray .dropdown-menu {
  background-color: #e8e8e8 !important;
  color: #333333 !important;
}
body.gray .dropdown-item {
  color: #333333 !important;
}
body.gray .dropdown-item:hover {
  background-color: #d0d0d0 !important;
  color: #1a1a1a !important;
}
body.gray h1, body.gray h2, body.gray h3, body.gray h4, body.gray h5, body.gray h6 {
  color: #222222 !important;
}
body.gray p {
  color: #333333 !important;
}
body.gray .mega-menu-heading {
  color: #222222 !important;
}


body.pink {
  background-color: #ffe6f2;
  color: #a3005a;
}
body.pink .navbar {
  background-color: #ffcce6 !important;
}
body.pink .nav-link {
  color: #a3005a !important;
}
body.pink .nav-link:hover {
  background-color: #ffb3d9 !important;
  color: #8f004a !important;
}
body.pink .dropdown-menu {
  background-color: #ffcce6 !important;
  color: #a3005a !important;
}
body.pink .dropdown-item {
  color: #a3005a !important;
}
body.pink .dropdown-item:hover {
  background-color: #ffb3d9 !important;
  color: #8f004a !important;
}
body.pink h1, body.pink h2, body.pink h3, body.pink h4, body.pink h5, body.pink h6 {
  color: #8f004a !important;
}
body.pink p {
  color: #a3005a !important;
}
body.pink .mega-menu-heading {
  color: #8f004a !important;
}

body.pink .card-header {
  background-color: #a3005a !important;
}

body.pink .card {
  background-color: #ffcce6 !important;
}

body.pink .datatablex thead {
    background: linear-gradient(to bottom, #d346b6, #e8a0ed);
    box-shadow: inset 0 -1px 0 #444;
    color: #343a40;
}


/* --- TAMBAHAN UNTUK NAVBAR FIXED TOP --- */
body {
  padding-top: 70px; /* Sesuaikan nilai ini jika navbar Anda memiliki tinggi yang berbeda */
}

/* === DROPDOWN MENU UMUM (DEFAULT HIDDEN STATE) === */
.navbar .dropdown-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  
  border-radius: 0;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 0;
  padding: 0;
  min-width: 10rem;
}

/* === UTAMA: ATURAN UNTUK MENAMPILKAN DROPDOWN UMUM & MEGA MENU === */
.navbar .dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  
  position: absolute !important;
  z-index: 1050 !important;
  top: 100% !important;
  left: 0 !important;

  /* Background dan color akan diambil dari blok tema di atas */
}

/* === STYLING KHUSUS UNTUK MEGA MENU === */
.navbar-nav .mega-menu.show {
    width: 100vw !important;
    left: 0 !important;
    padding: 20px;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.mega-menu-content {
    display: contents;
}

.mega-menu-column {
    padding: 5px;
    border-right: 1px solid rgba(0,0,0,0.1);
}
.mega-menu-column:last-child {
    border-right: none;
}

.mega-menu-heading {
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: 0;
  /* Color akan diambil dari blok tema di atas */
}

.mega-menu-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu-column .dropdown-item {
  padding: 5px 0;
  white-space: normal;
  /* Color akan diambil dari blok tema di atas */
}


/* === SUBMENU DROPDOWN (untuk dropdown biasa, bukan mega menu) === */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 0;
  min-width: 10rem;
}

.dropdown-submenu .dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Efek Hover (sekarang diatur per tema di bagian atas) */
/* Aturan generik ini tidak perlu lagi karena sudah ditangani per tema dengan !important */
/*
.nav-link:hover,
.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
*/

/* Dukungan hover untuk submenu di layar besar */
@media (min-width: 992px) {
  .dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* === OVERFLOW FIX === */
@media (min-width: 992px) {
  .navbar-collapse,
  .navbar-nav {
    overflow: visible !important;
  }
}

/* === STYLE NAVLINK UMUM === */
.navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* === STYLE MENU AKTIF === */
.navbar-nav .nav-link.active,
.navbar-nav .dropdown-item.active {
  font-weight: bold;
  background-color: rgba(0,0,0,0.1);
}

.no-margin-top {
  margin-top: 0 !important;
}

body h2 {
  text-align: center;
}

body.dark .bg-modif { /* Mengatur background navbar */
  background-color: #495057 !important;
}

.navbar-brand {
	Color: #fff;
}

.profil-wrapper {
  display: flex;
  align-items: center;      /* Biar sejajar secara vertikal */
  justify-content: flex-end;/* Biar nama di kiri, foto di kanan */
  position: fixed;
  top: 8px;
  right: 15px;
  gap: 10px;                /* Jarak antara nama dan foto */
}

.profil-bulat {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.profil-logo {
  width: 120px;
  height: 50px;
  object-fit: cover;
 
}

.nama {
  color: white;             /* Atur sesuai tema (bisa hitam/putih) */
  font-weight: bold;
}

.navbar {
    --bs-navbar-padding-y: 2px !important;
}

.inputtext {
    height: 30px;
    padding: 2px 2px 2px 5px;
    border: 1px solid #c0c0c0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 0 5px 0;
    color: black;
    font-size: 12px;
}

.inputnumber {
    height: 30px;
	width: 200px;
    padding: 2px 2px 2px 5px;
    border: 1px solid #c0c0c0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 0 5px 0;
    color: black;
    font-size: 12px;
}

.textareatext {
    padding: 2px 2px 2px 5px;
    border: 1px solid #c0c0c0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0 0 5px 0;
    color: black;
    font-size: 12px;
}