/* Custom Screenings Scroll Container */

#screenings .screenings-scroll-container {
    max-height: 500px; /* ~6 rows */
    position: relative;

    /* Scrolling behavior */
    overflow-y: auto;      /* visible breaks scrolling in some browsers */
    overflow-x: hidden;

    /* Smooth scrolling */
    scroll-behavior: smooth;

    /* Momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;

    /* Firefox scrollbar */
    scrollbar-color: #e6ae49 #f7f7f7;
}

/* WebKit-based browsers (Chrome, Edge, Safari) */
#screenings .screenings-scroll-container::-webkit-scrollbar {
    width: 8px;
}

#screenings .screenings-scroll-container::-webkit-scrollbar-track {
    background: #f7f7f7;
}

#screenings .screenings-scroll-container::-webkit-scrollbar-thumb {
    background-color: #e6ae49;
    border-radius: 4px;
    border: 2px solid #f7f7f7;
}

/* Optional: hover effect */
#screenings .screenings-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #d19a3f;
}

/* Webkit (Chrome, Safari) scrollbar styling */
#screenings .screenings-scroll-container::-webkit-scrollbar {
    width: 8px;
}

#screenings .screenings-scroll-container::-webkit-scrollbar-track {
    background: #f7f7f7;
    border-radius: 4px;
}

#screenings .screenings-scroll-container::-webkit-scrollbar-thumb {
    background: #e6ae49;
    border-radius: 4px;
    transition: background 0.3s ease;
}

#screenings .screenings-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #d49a38;
}

/* Ensure table remains full width */
#screenings .screenings-scroll-container .table {
    margin-bottom: 0;
}

/* Add subtle fade effect at top and bottom */
#screenings .screenings-wrapper {
    position: relative;
}

#screenings .screenings-wrapper::before,
#screenings .screenings-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 8px; /* Account for scrollbar */
    height: 20px;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

#screenings .screenings-wrapper::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
}

#screenings .screenings-wrapper::after {
    bottom: 0;
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

/* Show top fade when scrolled */
#screenings .screenings-wrapper.scrolled::before {
    opacity: 1;
}

/* Hide bottom fade when at bottom */
#screenings .screenings-wrapper.at-bottom::after {
    opacity: 0;
}

/* Maintain hover effects on table rows */
#screenings .screenings-scroll-container .table-lined tr:hover {
    background-color: #fafafa;
    transition: background-color 0.2s ease;
}

/* Responsive adjustments */
@media(max-width: 991px) {
    #screenings .screenings-scroll-container {
        max-height: 500px;
    }
}

@media(max-width: 767px) {
    #screenings .screenings-scroll-container {
        max-height: 400px;
    }
    
    #screenings .screenings-scroll-container::-webkit-scrollbar {
        width: 6px;
    }
}