/* ============================================================================
   Scroll Containers Component
   Custom scrollbars and scrollable container styling
   ============================================================================ */

/* Base Scrollable Container */
.scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom Scrollbar (Webkit browsers) */
.scroll-container::-webkit-scrollbar {
    width: 6px;
}

.scroll-container::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
    transition: background 0.2s;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Firefox Scrollbar */
.scroll-container {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) var(--gray-100);
}

/* Max Height Variants */
.scroll-container--sm {
    max-height: 200px;
}

.scroll-container--md {
    max-height: 300px;
}

.scroll-container--lg {
    max-height: 400px;
}

.scroll-container--xl {
    max-height: 500px;
}

/* Full Height (with header offset) */
.scroll-container--full {
    max-height: calc(100vh - 200px);
}

/* Horizontal Scroll */
.scroll-container--horizontal {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.scroll-container--horizontal::-webkit-scrollbar {
    height: 6px;
    width: auto;
}

/* Hidden Scrollbar (still scrollable) */
.scroll-container--hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-container--hidden::-webkit-scrollbar {
    display: none;
}

/* Themed Scrollbar - Primary */
.scroll-container--primary::-webkit-scrollbar-thumb {
    background: var(--ekafa-accent);
}

.scroll-container--primary::-webkit-scrollbar-thumb:hover {
    background: var(--ekafa-primary);
}

.scroll-container--primary {
    scrollbar-color: var(--ekafa-accent) var(--gray-100);
}

/* Pending Items Scroll (dashboard specific) */
.pending-scroll {
    max-height: 350px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.pending-scroll::-webkit-scrollbar {
    width: 4px;
}

.pending-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.pending-scroll::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 2px;
}

.pending-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300);
}

/* Activity Scroll */
.activity-scroll {
    max-height: 400px;
    overflow-y: auto;
}

/* Task Scroll Container (teacher dashboard) */
.task-scroll-container {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

.task-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.task-scroll-container::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 10px;
}

.task-scroll-container::-webkit-scrollbar-thumb {
    background: var(--ekafa-accent);
    border-radius: 10px;
}

.task-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #059669;
}

/* Table Scroll Container */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll::-webkit-scrollbar {
    height: 8px;
}

.table-scroll::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 4px;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

/* Modal/Dialog Scroll */
.modal-scroll {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem;
}

/* Card Body Scroll */
.card-body-scroll {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Dropdown Scroll */
.dropdown-scroll {
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-scroll::-webkit-scrollbar {
    width: 4px;
}

.dropdown-scroll::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 2px;
}

/* Fade Indicators (shows there's more content) */
.scroll-fade-top {
    position: relative;
}

.scroll-fade-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, white 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
}

.scroll-fade-top.scrolled::before {
    opacity: 1;
}

.scroll-fade-bottom {
    position: relative;
}

.scroll-fade-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, white 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Smooth Scroll */
.scroll-smooth {
    scroll-behavior: smooth;
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-container--lg {
        max-height: 300px;
    }

    .scroll-container--xl {
        max-height: 350px;
    }

    .scroll-container--full {
        max-height: calc(100vh - 150px);
    }

    .pending-scroll {
        max-height: 250px;
    }

    .activity-scroll {
        max-height: 300px;
    }
}