/* ClassRoom CSS */

        /* .aside-default-enabled.aside-fixed[data-kt-aside-minimize=on] .wrapper {
            transition: padding-left .3s ease;
            padding-left: 40px;
        }
        
        .aside-default-enabled.aside-fixed .wrapper {
            transition: padding-left .3s ease;
            padding-left: 440px;
            
        }
        .aside-default-enabled.aside-fixed[data-kt-sticky-header=on][data-kt-aside-minimize=on] .header{
            left: 0px;
            transition: left 0.3s ease;
            border-bottom: solid 1px var(--bs-gray-100);
        }
        [data-kt-aside-minimize=on] .aside.aside-default {
            display: none;
            transition: padding-left .3s ease;
        } */
        /* List Group Item */
        .list-group-item {
            transition: background-color .18s ease, transform .12s ease, box-shadow .12s ease, opacity .12s ease;
            border-radius: 8px;
            padding: 12px;
            margin: .4rem .6rem;
            display: block;
            background: transparent;
        }

        .list-group-item span {
            color: var(--bs-dark);
        }

        .list-group-item .completed-icon {
            display: none;
        }

        .list-group-item .locked-icon {
            display: none;
        }

        /* Active Class */
        .list-group-item.active {
            border: 1px solid var(--bs-primary);
        }

        .list-group-item.active span {

            font-weight: 500;
            color: var(--bs-primary);
        }

        /* Comleted Class */
        .list-group-item.completed span {
            color: var(--bs-gray-700);
        }

        .list-group-item.completed span {
            color: var(--bs-gray-700);
        }

        .list-group-item.completed .completed-icon {
            color: var(--bs-success);
            display: inline;
        }

        /* Locked Class */
        .list-group-item.locked span {
            color: var(--bs-gray-500);
        }

        .list-group-item.locked .locked-icon {
            display: inline;
        }

        /* unLocked Class */
        .list-group-item.unlocked span {
            color: var(--bs-gray-700);
        }


        .list-group-item.unlocked .locked-icon {
            display: none;
        }



        /* Module General CSS */
        .list-group-item.info,
        .mod-locked-icon,
        .mod-completed-icon {
            display: none;
        }

        /* Active Module CSS */
        .mod-active .info {
            display: inline;
        }

        /* Locked Module CSS */
        .mod-locked {
            /* Do not disable pointer-events here — allow the anchor (.not-collapsible) to control interactivity.
               Keep a subtle visual treatment to indicate locked state. */
            cursor: default;
            opacity: 0.95;
        }

        .mod-locked .mod-locked-icon {
            display: inline;
        }

        .mod-locked .info {
            display: none;
        }

        /* Completed Module CSS */
        .mod-completed .mod-completed-icon {
            display: inline;
        }

        .mod-completed.info {
            display: none;
        }


        li.list-group-item:hover {
            cursor: pointer;
            background-color: var(--bs-gray-100);
        }

        li.list-group-item.active:hover {
            cursor: pointer;
            background-color: var(--bs-primary);
        }

        @media screen and (max-width: 992px) {
            .aside-default-enabled.aside-fixed .wrapper {
                transition: padding-left 0.3s ease;
                padding: 0px 10px;
            }

            .content {
                border-radius: 10px;
            }

            .classroom-minimized-logo {
                display: none;
            }

            .aside.aside-default {
                width: 500px;
                transition: padding-right .3s ease;
                padding: 0px 5px 0px 5px;
            }
        }

        @media screen and (max-width: 576px) {
            .aside-default-enabled.aside-fixed .wrapper {
                transition: padding-left .3s ease;
                padding: 0px;
            }

            .list-group-item {
                padding: 15px;
            }
        }

        /* When a module is explicitly non-collapsible */
        a.not-collapsible {
            pointer-events: none;
            cursor: not-allowed;
            opacity: 0.9;
        }

        /* When a locked lesson should not be clickable (controlled by Blade) */
        .list-group-item.locked a.locked-no-click {
            pointer-events: none;
            cursor: not-allowed;
            opacity: 0.75;
        }

        /* also ensure aria-disabled visual consistency (optional) */
        .list-group-item.locked a[aria-disabled="true"] {
            pointer-events: none;
            cursor: not-allowed;
            opacity: 0.75;
        }

        /* ===== DESIGN UPDATES: beautify module & lesson states ===== */

        /* base tweaks */
        .list-group-item {
            transition: background-color .18s ease, transform .12s ease, box-shadow .12s ease, opacity .12s ease;
            border-radius: 8px;
            padding: 12px;
            margin: .4rem .6rem;
            display: block;
            background: transparent;
        }

        /* module header anchor */
        .list-group-item > a.h6 {
            width: 100%;
            align-items: center;
            gap: .6rem;
            padding: 14px;
            border-radius: 8px;
            transition: background-color .18s ease, transform .12s ease;
            box-shadow: none;
        }

        /* chevron animation */
        .chevron-arrow {
            transition: transform .22s ease;
            display: inline-flex;
            align-items: center;
        }
        a.collapsible.collapsed .chevron-arrow { transform: rotate(0deg); }
        a.collapsible:not(.collapsed) .chevron-arrow { transform: rotate(180deg); }

        /* module state accents */
        .mod-active > a.h6 {
            background: linear-gradient(90deg, rgba(13,110,253,0.07), rgba(13,110,253,0.03));
            border: 1px solid rgba(13,110,253,0.08);
            box-shadow: 0 2px 6px rgba(13,110,253,0.04);
        }
        .mod-completed > a.h6 {
            border-left: 4px solid var(--bs-success);
            background: rgba(25,135,84,0.03);
        }
        .mod-locked > a.h6 {
            border-left: 4px solid rgba(108,117,125,0.12);
            background: rgba(248,249,250,0.6);
        }

        /* module meta (counts/icons) */
        .mod-completed-icon i { color: var(--bs-success); }
        .mod-locked-icon i { color: var(--bs-secondary); }
        .info { font-size: .85rem; color: rgba(0,0,0,.55); }

        /* hover micro-interactions */
        .list-group-item > a.h6:hover {
            /* no lift: keep hover subtle without movement or shadow */
            transform: none;
            box-shadow: none;
        }

        /* Add subtle border for module rows (keeps lesson .bg-light card border intact) */
        .list-group-item.m-2.bg-body {
            border: 1px solid rgba(15,15,15,0.04);
            background-clip: padding-box;
        }
        .list-group-item.m-2.bg-body > a.h6 {
            border: none; /* header anchor sits inside the bordered row */
            border-radius: 6px;
        }

        /* lesson items */
        .list-group-item.bg-light {
            background: #fff;
            border: 1px solid rgba(15,15,15,0.03);
            padding: 10px;
            display: block;
            margin: .35rem .6rem;
        }
        .list-group-item .icon { width: 28px; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; }
        .list-group-item .icon i { font-size: .92rem; color: rgba(0,0,0,0.45); }

        /* lesson states */
        .list-group-item.completed {
            border-left: 4px solid var(--bs-success);
            background: linear-gradient(90deg, rgba(25,135,84,0.03), rgba(255,255,255,0));
        }
        .list-group-item.completed .icon i { color: var(--bs-success); }
        .list-group-item.active {
            border-left: 4px solid var(--bs-primary);
            background: linear-gradient(90deg, rgba(13,110,253,0.05), rgba(255,255,255,0));
        }
        .list-group-item.active .icon i { color: var(--bs-primary); font-weight:600; }
        .list-group-item.locked {
            border-left: 4px solid rgba(108,117,125,0.08);
            background: rgba(248,249,250,0.55);
            color: rgba(33,37,41,0.6);
        }
        .list-group-item.unlocked {
            background: rgba(248,249,250,0.12);
        }

        /* disabled / non-clickable visuals (Blade will toggle these classes) */
        a.not-collapsible {
            pointer-events: none;
            cursor: not-allowed;
            opacity: 0.85;
            filter: grayscale(.06);
        }
        .list-group-item.locked a.locked-no-click,
        .list-group-item.locked a[aria-disabled="true"] {
            pointer-events: none;
            cursor: not-allowed;
            opacity: 0.7;
            filter: grayscale(.06);
        }

        /* small badges / counters */
        .list-group-item .info {
            display: inline-block;
            font-size: .82rem;
            padding: 4px 8px;
            border-radius: 12px;
            background: rgba(0,0,0,0.03);
        }

        /* small responsive tweaks */
        @media (max-width: 576px) {
            .list-group-item > a.h6 { padding: 12px; }
            .list-group-item { margin-left: .3rem; margin-right: .3rem; }
        }

        /* ensure collapse content spacing */
        .collapse > .list-group { padding: .2rem 0  .6rem 0; }

        /* Ensure modules don't get a full border by default (less intrusive) */
        .list-group-item {
		/* remove any default border for module-level items */
		border: none;
	}

	/* Keep the subtle card border for lesson items only */
	.list-group-item.bg-light {
		/* explicit light card border for lesson rows */
		border: 1px solid rgba(15,15,15,0.03);
	}

	/* Module header anchor: ensure no full border by default */
	.list-group-item > a.h6 {
		border: none;
	}

	/* Active module: clear primary accent (left bar) + subtle primary background */
	.mod-active > a.h6 {
	    border-left: 4px solid var(--bs-primary);
	    background: linear-gradient(90deg, rgba(13,110,253,0.06), rgba(255,255,255,0));
	    box-shadow: 0 6px 18px rgba(13,110,253,0.04);
	}

	/* Completed module: keep success left accent, no full border */
	.mod-completed > a.h6 {
	    border-left: 4px solid var(--bs-success);
	    background: rgba(25,135,84,0.03);
	    box-shadow: none;
	}

	/* Locked module: subtle left accent, no disabled pointer-blocking here */
	.mod-locked > a.h6 {
	    border-left: 4px solid rgba(108,117,125,0.12);
	    background: rgba(248,249,250,0.6);
	}

	/* Ensure lesson active/complete visuals remain distinct */
	.list-group-item.bg-light.active {
	    border-left: 4px solid var(--bs-primary);
	    background: linear-gradient(90deg, rgba(13,110,253,0.05), rgba(255,255,255,0));
	}
	.list-group-item.bg-light.completed {
	    border-left: 4px solid var(--bs-success);
	    background: linear-gradient(90deg, rgba(25,135,84,0.03), rgba(255,255,255,0));
	}

	/* ===== collapse-smoothing overrides ===== */

	/* Remove transform/box-shadow from transition to avoid sub-pixel movement on toggle */
	.list-group-item {
	    /* keep color/opacity transitions only; drop transform/box-shadow to prevent pixel-jitter */
	    transition: background-color .18s ease, opacity .12s ease;
	}

	/* Module header: keep only background transition, disable transform/box-shadow transitions */
	.list-group-item > a.h6 {
	    transition: background-color .18s ease;
	    -webkit-tap-highlight-color: transparent;
	}

	/* Disable visual movement from focus/active states */
	.list-group-item > a.h6:focus,
	.list-group-item > a.h6:active {
	    outline: none;
	    box-shadow: none !important;
	    transform: none !important;
	}

	/* Hint the browser that height will change and enforce a smooth height timing */
	.collapse {
	    will-change: height;
	    transition: height .36s cubic-bezier(.4,0,.2,1);
	    /* keep overflow hidden while animating to avoid jumps */
	    overflow: hidden;
	}

	/* Ensure collapsed content padding/margins are constant to avoid spacing jumps */
	.collapse > .list-group {
	    margin: 0;
	    padding: .2rem 0 .6rem 0;
	}

	/* Stabilize the module row spacing so expansion doesn't change the row box sizing */
	.list-group-item.m-2.bg-body {
	    /* ensure internal spacing is consistent whether collapsed or expanded */
	    padding-top: .35rem;
	    padding-bottom: .35rem;
	}

	/* Keep chevron rotation smooth but layout-stable (no layout-affecting properties) */
	.chevron-arrow {
	    backface-visibility: hidden;
	    transform-origin: center;
	}

	/* If any earlier rules attempted to 'lift' or add shadow on hover, neutralize them here */
	.list-group-item > a.h6:hover {
	    transform: none !important;
	    box-shadow: none !important;
	}

	/* ===== collapse-smoothing: disable height animation to remove "jerk" =====
   Bootstrap animates height which can cause sub-pixel layout shifts.
   We disable height transitions and provide a gentle opacity fade for content. */
.collapse {
    /* prevent height animation that causes vertical jitter */
    transition: none !important;
    will-change: auto;
    overflow: hidden; /* keep content clipped while toggling */
}

/* fade the inner list for a smooth visual reveal without affecting layout flow */
.collapse > .list-group {
    opacity: 0;
    transition: opacity .22s ease;
    margin: 0;
    padding: .2rem 0 .6rem 0;
}

.collapse.show > .list-group {
    opacity: 1;
}

/* ensure header anchor doesn't shift on click/focus */
.list-group-item > a.h6 {
    outline: none;
    transform: none !important;
    box-shadow: none !important;
}

/* ensure module row spacing is stable while collapse toggles */
.list-group-item.m-2.bg-body {
    /* keep top/bottom padding stable */
    padding-top: .6rem;
    padding-bottom: .6rem;
}

/* Ensure rows with timeline + content stretch columns to same height */
.row.align-items-stretch {
    align-items: stretch;
}

/* Allow aside column to stretch and timeline to size with content */
.col-md-6.align-self-stretch,
.col-md-6.align-self-stretch .lessonsTimeline {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Make the scroll wrapper auto-height and visible overflow so it grows with content */
.hover-scroll-y,
.hover-scroll-overlay-y,
.hover-scroll-y.z-index-1,
.hover-scroll-overlay-y.z-index-1 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Make lessonsTimeline fill available column and allow its inner list to expand */
.lessonsTimeline {
    flex: 1 1 auto;
    min-height: 0; /* allow flex children to size properly */
}

/* Collapse content: keep fade-only reveal (no layout jumps) */
.collapse > .list-group {
    opacity: 0;
    transition: opacity .22s ease;
}
.collapse.show > .list-group {
    opacity: 1;
}

/* Keep module row spacing stable so expansion doesn't shift neighbors */
.list-group-item.m-2.bg-body {
    padding-top: .6rem;
    padding-bottom: .6rem;
}