/* Sidebar dalam keadaan normal */
.sidebar {
    background-color: #2563EB; /* Biru tua */
    color: #2563EB; /* Putih */
    width: 16rem; /* 64px */
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Sidebar dalam keadaan collapsed */
.sidebar.collapsed {
    width: 60px;
    overflow: hidden;
}
/* Sembunyikan teks menu saat sidebar collapsed */
.sidebar.collapsed .menu-text {
    display: none;
}

/* Pusatkan ikon menu saat sidebar collapsed */
.sidebar.collapsed .menu-icon {
    margin-right: 0;
    text-align: center;
}
/* Submenu hidden secara default */
.hidden {
    display: none;
}

/* Submenu terlihat */
#databaseSubmenu {
    display: block;
    transition: all 0.3s ease;
}
.content {
    /* margin-left: 0rem; Sama dengan lebar sidebar normal */
    /* transition: margin-left 0.3s ease; */
    transition: all 0.3s ease;
}

/* Konten utama saat sidebar collapsed */
.sidebar.collapsed + .content {
    margin-left: 4rem; /* Sama dengan lebar sidebar collapsed */
}

.chart-container {
    height: 300px;
}
.fade-in {
    animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Submenu hidden by default */

/* Atur tinggi dan lebar tombol toggle agar tetap terlihat */
#toggleSidebar {
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tambahkan transisi untuk elemen */
.menu-item {
    color: #FFFFFF; /* Putih */
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-item:hover {
    background-color: #FBBF24; /* Oranye muda */
    color: #FFFFFF; /* Biru tua */
}
/* Active Menu Item */
.menu-item.active {
    background-color: #164ec9; /* Oranye terang */
    color: #1E3A8A; /* Biru tua */
    font-weight: bold;
}
.menu-item-sub {
    color: #FFFFFF; /* Putih */
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-item-sub:hover {
    background-color: #FBBF24; /* Oranye muda */
    color: #FFFFFF; /* Biru tua */
}
/* Active Menu Item */
.menu-item-sub.active {
    background-color: #164ec9; /* Oranye terang */
    color: #1E3A8A; /* Biru tua */
    font-weight: bold;
}
/* Menu Text */
.menu-text {
    color: #E0F2FE; /* Biru muda */
}



/* Header Sidebar */
.sidebar .p-4 {
    background-color: #2563EB; /* Biru sedang */
    border-bottom: 1px solid #2563EB; /* Biru tua */
}

/* User Profile */
.sidebar .p-4.border-t {
    background-color: #2563EB; /* Biru tua */
    border-top: 1px solid #2563EB; /* Biru */
}

.sidebar .w-10.h-10 {
    background-color: #2563EB; /* Oranye terang */
    color: #FFFFFF; /* Biru tua */
}

/* Transition untuk elemen */
.menu-item,
.menu-text,
.sidebar .p-4 {
    transition: all 0.3s ease;
}