/* resources/static/css/custom.css */


/* Ensure the logo area is transparent so the sidebar gradient is visible */
.aside .aside-logo {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optional: faint separator line */
}

/* Update class untuk gradien diagonal yang sangat halus */
.bg-pintrans-gradient {
    /* Putih dominan, oranye hanya di ujung bawah-kiri dan atas-kanan */
    background: linear-gradient(135deg,
        rgba(251, 192, 45, 0.1) 0%,
        #ffffff 20%,
        #ffffff 80%,
        rgba(251, 192, 45, 0.1) 100%) !important;
    border-bottom: 1px solid rgba(251, 192, 45, 0.3);
}

/* Tambahkan aksen garis bawah agar menu tidak terlihat "melayang" */
.bg-pintrans-gradient::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ffffff, #fbc02d);
}

/* 1. Mengubah warna saat Menu di-Hover */
.aside .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active) {
    background-color: rgba(251, 192, 45, 0.2) !important; /* Warna oranye transparan saat hover */
    transition: background-color 0.3s ease;
}

.aside .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active) .menu-title {
    color: #fbc02d !important; /* Warna teks oranye saat hover */
}

/* 2. Mengubah warna saat Menu Terpilih (Active/Here) */
.aside .menu-item.here > .menu-link,
.aside .menu-item.show > .menu-link,
.aside .menu-link.active {
    background-color: #1e90ff !important; /* Biru gelap default Metronic untuk menu aktif */
}

.aside .menu-item.here > .menu-link .menu-title,
.aside .menu-link.active .menu-title {
    color: #ffffff !important; /* Teks putih agar kontras di menu aktif */
}

/* 3. Memberi aksen garis oranye di samping menu yang aktif */
.aside .menu-item.here > .menu-link {
    border-left: 4px solid #fbc02d !important;
}

/* Custom class for 90% width centered */
.w-90 {
    max-width: 90% !important;
    width: 90% !important;
    margin-left: auto;  /* Centers the container */
    margin-right: auto; /* Centers the container */
}