/* Sidebar fixed di kiri dengan lebar 240px dan tinggi penuh */
#media-sidebar {
    position: fixed;
    margin-top: 56px;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh; /* penuh tinggi viewport */
    background: #fff;
    overflow-y: auto; /* scroll sendiri jika konten lebih tinggi */
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 999; /* agar tetap di atas konten */
    box-shadow: 1px 0 rgba(0,0,0,0.1);
}

/* Saat sidebar disembunyikan (active), geser keluar layar */
#media-sidebar.active {
    left: -240px;
}

/* Konten utama beri margin kiri agar tidak tertutup sidebar */
#media-content {
    width: calc(100% - 240px);
    margin-left: 240px;
    padding: 0;
    min-height: 100vh;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

/* Jika sidebar disembunyikan, konten mengambil full lebar */
#media-sidebar.active + #media-content,
#media-content.sidebar-collapsed {
    margin-left: 0;
    width: 100%;
}

/* Responsif untuk layar kecil */
@media (max-width: 991.98px) {
    #media-sidebar {
        position: fixed;
        left: -240px; /* default sembunyi */
        height: 100vh;
        z-index: 1000;
    }

    #media-sidebar.active {
        left: 0;
    }

    #media-content {
        margin-left: 0;
        width: 100%;
    }
}

/* Scrollbar kustom (WebKit) */
#media-sidebar::-webkit-scrollbar {
    width: 6px;
}

#media-sidebar::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
}

#media-sidebar:hover::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Saat di-hover: tampilkan scrollbar */
#media-sidebar:hover::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

/* Styling tombol sidebarCollapse (opsional) */
#sidebarCollapse {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .75rem;
    width: 35px;
    height: 35px;
    font-size: 1.25rem;
    line-height: 1;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    margin-right: 10px;
    transition: box-shadow .15s ease-in-out;
}

#sidebarCollapse:hover {
    background-color: rgba(255, 72, 128, 0.1);
    border-color: rgba(255, 72, 128, 0.15);
    box-shadow: 0 0 5px rgba(255, 72, 128, 0.2);
}

/* Scroll hanya aktif saat hover */
.list-playlist-video {
    overflow-y: auto;
    max-height: calc(100% - 40px);
}


.list-playlist-video{
    padding-left: 0;
    list-style: none;
}

.list-playlist-video>li:hover, .list-playlist-video>li.active{
    background-color: rgba(255, 72, 128, .2);
}

/* Scrollbar kustom (khusus WebKit seperti Chrome dan Edge) */
.list-playlist-video::-webkit-scrollbar {
    width: 6px;
}

.list-playlist-video::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
}

.list-playlist-video:hover::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

.list-playlist-video:hover::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}


.list-recommendation-video{
    padding-left: 0;
    list-style: none;
}

.list-recommendation-video > li:hover,
.list-recommendation-video > li:hover a,
.list-recommendation-video > li:hover span {
    color: rgb(255, 72, 128);
}


#media-sidebar  .nav-pills .nav-link{
    padding: .5rem;
    color: rgba(0,0,0,.60);
    font-size: 14px;
}

#media-sidebar .nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
    color: var(--bs-primary);
    background-color: #ffecf2;
    font-weight: bold;
}

#media-sidebar .nav-pills .nav-link:hover {
    color: var(--bs-primary);
    background-color: #ffecf2;
}


#media-sidebar .nav-pills .sidebar-section-title {
    padding: .7rem .3rem;
    font-size: 17px;
    font-weight: 700;
    border-top: 1px solid #eaeaea;
}

.badge-primary{
    color: var(--bs-primary);
}

.badge-primary:hover, .badge-primary.active{
    background: var(--bs-primary);
    color: #fff;
}


.text-limit {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Batasi ke 3 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.bg-primary-5 {
    background-color: rgba(255, 72, 128, 0.05);
}