/* ==========================================================================
   Mobile-only collapsible "Dashboard Menu" for the student area sidebar
   (My Courses, My Profile, My Books, Purchase History, etc. all share
   resources/views/frontend/default/student/left_sidebar.blade.php).

   Problem this fixes: on phones, the full profile card (avatar, name,
   email) + the entire nav list used to render above the page's real
   content — students had to scroll past all of it just to see their
   courses. Now it collapses into one compact bar by default on mobile,
   so the actual content underneath (course list, profile form, etc.)
   is reachable immediately, matching the pattern used by other student
   portals (a single tappable "Dashboard Menu" row).

   Scope: everything here is gated behind the same max-width: 991.98px
   breakpoint used by mentor-mobile-tabbar.css (matches Bootstrap's
   d-lg-none in the markup). Above that breakpoint this file changes
   nothing — .student-sidebar-toggle stays display:none (its default,
   set outside the media query below) and .student-sidebar-collapse is
   never touched, so desktop keeps rendering the sidebar exactly as
   before this change.
   ========================================================================== */

.student-sidebar-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .course-sideBar {
        padding: 14px 16px;
    }

    .student-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        padding: 4px 2px;
        text-align: left;
        cursor: pointer;
    }

    .student-sidebar-toggle .toggle-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .student-sidebar-toggle .toggle-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .student-sidebar-toggle .toggle-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-color, #1a1a1a);
    }

    .student-sidebar-toggle .toggle-caret {
        font-size: 16px;
        line-height: 1;
        color: #8a7a86;
        transition: transform .2s ease;
        flex-shrink: 0;
    }

    /* collapsed by default on mobile */
    .student-sidebar-collapse {
        display: none;
        margin-top: 18px;
    }

    .course-sideBar.is-open .student-sidebar-collapse {
        display: block;
    }

    .course-sideBar.is-open .student-sidebar-toggle .toggle-caret {
        transform: rotate(180deg);
    }
}