/* ==========================================================
   LAEC LEARNING ACADEMY
   LEARNER.CSS
   Shared Learner Portal and Course Styles
   Version 1.0
========================================================== */


/* ==========================================================
   1. LEARNER DESIGN TOKENS
========================================================== */

:root{
    --learner-forest:#1B5E20;
    --learner-green:#2E7D32;
    --learner-dark-green:#174F1B;
    --learner-gold:#D6A23D;
    --learner-gold-soft:#FFD97A;

    --learner-bg:#F5F7F5;
    --learner-cream:#F7F3EA;
    --learner-surface:#FFFFFF;
    --learner-ink:#263238;
    --learner-muted:#68716C;
    --learner-line:#DFE7DF;

    --learner-danger:#B3261E;
    --learner-danger-soft:#FBECEA;

    --learner-success:#1F7A3D;
    --learner-success-soft:#E8F5EC;

    --learner-warning:#9A6500;
    --learner-warning-soft:#FFF5DA;

    --learner-info:#315F8C;
    --learner-info-soft:#EEF4FB;

    --learner-shadow-sm:0 8px 24px rgba(27,94,32,.05);
    --learner-shadow:0 15px 42px rgba(27,94,32,.14);
    --learner-shadow-lg:0 22px 65px rgba(27,94,32,.16);

    --learner-radius-sm:11px;
    --learner-radius:16px;
    --learner-radius-lg:24px;

    --learner-sidebar-width:270px;
    --learner-transition:.25s ease;
}


/* ==========================================================
   2. LEARNER GLOBAL
========================================================== */

.learner-page{
    margin:0;
    min-height:100vh;
    font-family:"Inter",sans-serif;
    color:var(--learner-ink);
    background:var(--learner-bg);
}

.learner-page *{
    box-sizing:border-box;
}

.learner-page.loading{
    overflow:hidden;
}

.learner-page a{
    transition:
        color var(--learner-transition),
        background-color var(--learner-transition),
        border-color var(--learner-transition),
        transform var(--learner-transition),
        box-shadow var(--learner-transition);
}


/* ==========================================================
   3. LEARNER AUTHENTICATION PAGES
========================================================== */

.learner-auth-page{
    background:
        radial-gradient(
            circle at top left,
            rgba(214,162,61,.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #F7F3EA 0%,
            #EDF5EE 100%
        );
}

.learner-auth-navbar{
    background:var(--learner-surface);
    box-shadow:0 2px 14px rgba(27,94,32,.08);
}

.learner-auth-navbar .navbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--learner-forest)!important;
    font-weight:700;
}

.learner-auth-navbar .navbar-brand img{
    width:46px;
    height:46px;
    object-fit:contain;
}

.learner-auth-wrap{
    min-height:calc(100vh - 76px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:110px 16px 45px;
}

.learner-auth-shell{
    width:min(980px,100%);
    display:grid;
    grid-template-columns:1.05fr .95fr;
    overflow:hidden;
    border:1px solid rgba(27,94,32,.08);
    border-radius:var(--learner-radius-lg);
    background:var(--learner-surface);
    box-shadow:var(--learner-shadow-lg);
}

.learner-auth-info{
    position:relative;
    overflow:hidden;
    padding:52px 46px;
    color:#FFFFFF;
    background:
        linear-gradient(
            145deg,
            var(--learner-dark-green),
            var(--learner-green)
        );
}

.learner-auth-info::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-80px;
    bottom:-70px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
}

.learner-auth-info > *{
    position:relative;
    z-index:1;
}

.learner-gold-label{
    color:var(--learner-gold-soft);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.learner-auth-info h1{
    margin:12px 0 16px;
    color:#FFFFFF;
    font-family:"Merriweather",serif;
    font-size:2rem;
}

.learner-auth-info p{
    color:rgba(255,255,255,.88);
}

.learner-course-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    padding:8px 14px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50px;
    background:rgba(255,255,255,.13);
    font-size:.88rem;
    font-weight:600;
}

.learner-steps{
    display:grid;
    gap:13px;
    margin-top:28px;
}

.learner-step{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.learner-step-icon{
    width:34px;
    height:34px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--learner-forest);
    background:var(--learner-gold-soft);
    font-weight:800;
}

.learner-step b{
    display:block;
}

.learner-step small{
    color:rgba(255,255,255,.78);
}

.learner-auth-panel{
    padding:52px 46px;
}

.learner-auth-panel h2{
    margin-bottom:8px;
    color:var(--learner-forest);
    font-family:"Merriweather",serif;
    font-size:1.55rem;
}

.learner-auth-lead{
    margin-bottom:24px;
    color:var(--learner-muted);
    font-size:.94rem;
}


/* ==========================================================
   4. LEARNER FORMS
========================================================== */

.learner-page .form-label{
    color:#33423A;
    font-size:.9rem;
    font-weight:700;
}

.learner-page .form-control,
.learner-page .form-select{
    padding:12px 14px;
    border:1px solid var(--learner-line);
    border-radius:12px;
}

.learner-page .form-control:focus,
.learner-page .form-select:focus{
    border-color:var(--learner-green);
    box-shadow:0 0 0 .2rem rgba(46,125,50,.12);
}

.learner-page .input-group-text{
    color:var(--learner-forest);
    background:#F3F7F3;
    border-color:var(--learner-line);
    border-radius:12px 0 0 12px;
}

.learner-page .input-group .btn-outline-secondary{
    color:var(--learner-forest);
    border-color:var(--learner-line);
    border-radius:0 12px 12px 0;
}

.learner-primary-btn{
    width:100%;
    margin-top:8px;
    padding:13px 20px;
    border:0;
    border-radius:50px;
    color:#FFFFFF;
    background:var(--learner-green);
    font-weight:800;
}

.learner-primary-btn:hover{
    color:#FFFFFF;
    background:var(--learner-forest);
}

.learner-primary-btn:disabled{
    cursor:not-allowed;
    opacity:.65;
}

.learner-helper-links{
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
    font-size:.88rem;
}

.learner-helper-links a{
    color:var(--learner-forest);
    font-weight:700;
    text-decoration:none;
}

.learner-security-note{
    margin-top:18px;
    padding:11px 13px;
    border:1px solid var(--learner-line);
    border-radius:12px;
    color:var(--learner-muted);
    background:#F7FAF7;
    font-size:.8rem;
}


/* ==========================================================
   5. LEARNER STATUS MESSAGES
========================================================== */

.learner-status{
    display:none;
    margin-top:16px;
    padding:12px 14px;
    border-radius:12px;
    font-size:.9rem;
    line-height:1.55;
}

.learner-status.show{
    display:block;
}

.learner-status.info{
    border:1px solid #CADCF0;
    color:var(--learner-info);
    background:var(--learner-info-soft);
}

.learner-status.success{
    border:1px solid #BFE3C9;
    color:var(--learner-success);
    background:var(--learner-success-soft);
}

.learner-status.error{
    border:1px solid #EFC4BF;
    color:var(--learner-danger);
    background:var(--learner-danger-soft);
}


/* ==========================================================
   6. LEARNER DASHBOARD SIDEBAR
========================================================== */

.learner-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:1040;
    width:var(--learner-sidebar-width);
    display:flex;
    flex-direction:column;
    color:#FFFFFF;
    background:
        linear-gradient(
            180deg,
            var(--learner-dark-green) 0%,
            #1F6C27 100%
        );
    box-shadow:8px 0 30px rgba(27,94,32,.12);
    transition:transform var(--learner-transition);
}

.learner-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:22px 20px;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#FFFFFF;
    text-decoration:none;
}

.learner-brand img{
    width:48px;
    height:48px;
    object-fit:contain;
    padding:4px;
    border-radius:12px;
    background:#FFFFFF;
}

.learner-brand strong{
    display:block;
    color:#FFFFFF;
    font-family:"Merriweather",serif;
    font-size:1rem;
}

.learner-brand span{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.72);
    font-size:.73rem;
}

.learner-sidebar-label{
    padding:20px 20px 8px;
    color:var(--learner-gold-soft);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.learner-side-nav{
    padding:0 12px;
}

.learner-side-link{
    display:flex;
    align-items:center;
    gap:12px;
    margin:4px 0;
    padding:12px 14px;
    border-radius:12px;
    color:rgba(255,255,255,.84);
    font-weight:600;
    text-decoration:none;
}

.learner-side-link:hover,
.learner-side-link.active{
    color:#FFFFFF;
    background:rgba(255,255,255,.13);
    transform:translateX(2px);
}

.learner-side-link i{
    width:20px;
    text-align:center;
}

.learner-side-link.disabled{
    pointer-events:none;
    opacity:.5;
}

.learner-sidebar-footer{
    margin-top:auto;
    padding:16px 12px 20px;
    border-top:1px solid rgba(255,255,255,.12);
}

.learner-mini-profile{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:12px;
    padding:10px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
}

.learner-avatar{
    width:40px;
    height:40px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--learner-forest);
    background:var(--learner-gold-soft);
    font-weight:800;
}

.learner-mini-profile strong{
    display:block;
    color:#FFFFFF;
    font-size:.84rem;
}

.learner-mini-profile span{
    display:block;
    max-width:150px;
    overflow:hidden;
    color:rgba(255,255,255,.68);
    font-size:.68rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.learner-logout-btn{
    width:100%;
    padding:11px 14px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:12px;
    color:#FFFFFF;
    background:transparent;
    font-weight:700;
}


/* ==========================================================
   7. LEARNER MAIN SHELL AND TOPBAR
========================================================== */

.learner-main-shell{
    min-height:100vh;
    margin-left:var(--learner-sidebar-width);
}

.learner-topbar{
    position:sticky;
    top:0;
    z-index:1030;
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 28px;
    border-bottom:1px solid var(--learner-line);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
}

.learner-topbar h1{
    margin:0;
    color:var(--learner-forest);
    font-family:"Merriweather",serif;
    font-size:1.35rem;
}

.learner-topbar p{
    margin:3px 0 0;
    color:var(--learner-muted);
    font-size:.82rem;
}

.learner-menu-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--learner-line);
    border-radius:11px;
    color:var(--learner-forest);
    background:#FFFFFF;
}

.learner-main-content{
    padding:28px;
}

.learner-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:1035;
    background:rgba(0,0,0,.4);
}

.learner-backdrop.show{
    display:block;
}


/* ==========================================================
   8. LEARNER DASHBOARD
========================================================== */

.learner-welcome-card{
    position:relative;
    overflow:hidden;
    margin-bottom:24px;
    padding:30px;
    border-radius:22px;
    color:#FFFFFF;
    background:
        linear-gradient(
            120deg,
            #195620,
            #2F8138
        );
    box-shadow:var(--learner-shadow);
}

.learner-welcome-card::after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-80px;
    top:-90px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.learner-welcome-card > *{
    position:relative;
    z-index:1;
}

.learner-eyebrow{
    color:var(--learner-gold-soft);
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.learner-welcome-card h2{
    margin:8px 0 10px;
    color:#FFFFFF;
    font-family:"Merriweather",serif;
    font-size:clamp(1.6rem,3vw,2.3rem);
}

.learner-welcome-card p{
    max-width:700px;
    margin:0;
    color:rgba(255,255,255,.86);
    line-height:1.7;
}

.learner-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:24px;
}

.learner-stat-card{
    padding:22px;
    border:1px solid var(--learner-line);
    border-radius:18px;
    background:#FFFFFF;
    box-shadow:var(--learner-shadow-sm);
}

.learner-stat-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--learner-forest);
    background:var(--learner-success-soft);
    font-size:1.2rem;
}

.learner-stat-value{
    margin-top:18px;
    color:var(--learner-forest);
    font-size:2rem;
    font-weight:800;
}

.learner-stat-label{
    color:var(--learner-muted);
    font-size:.84rem;
    font-weight:600;
}


/* ==========================================================
   9. COURSE CARDS
========================================================== */

.learner-course-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.learner-course-card{
    overflow:hidden;
    border:1px solid var(--learner-line);
    border-radius:18px;
    background:#FFFFFF;
    box-shadow:var(--learner-shadow-sm);
}

.learner-course-cover{
    min-height:180px;
    display:flex;
    align-items:flex-end;
    padding:22px;
    color:#FFFFFF;
    background:
        linear-gradient(
            rgba(20,70,27,.30),
            rgba(20,70,27,.78)
        ),
        var(--course-image,none) center/cover no-repeat;
}

.learner-course-cover h3{
    margin:0;
    color:#FFFFFF;
    font-size:1.35rem;
}

.learner-course-body{
    padding:22px;
}

.learner-course-body p{
    color:var(--learner-muted);
}

.learner-progress{
    height:10px;
    overflow:hidden;
    border-radius:999px;
    background:#E6EDE7;
}

.learner-progress-bar{
    height:100%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        var(--learner-green),
        #4C9A57
    );
}

.learner-course-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin:10px 0 18px;
    color:var(--learner-muted);
    font-size:.8rem;
}


/* ==========================================================
   10. COURSE CONTENT AND KEY CHECKS
========================================================== */

.course-shell{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    min-height:100vh;
}

.course-nav{
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    padding:22px 16px;
    color:#FFFFFF;
    background:
        linear-gradient(
            180deg,
            var(--learner-dark-green),
            #1F6C27
        );
}

.course-nav-title{
    margin-bottom:18px;
    color:#FFFFFF;
    font-family:"Merriweather",serif;
    font-size:1.15rem;
}

.course-nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    margin:5px 0;
    padding:11px 12px;
    border-radius:11px;
    color:rgba(255,255,255,.82);
    text-decoration:none;
}

.course-nav-item:hover,
.course-nav-item.active{
    color:#FFFFFF;
    background:rgba(255,255,255,.13);
}

.course-nav-item.locked{
    pointer-events:none;
    opacity:.45;
}

.course-nav-status{
    margin-left:auto;
    font-size:.75rem;
}

.course-main{
    min-width:0;
    padding:30px;
    background:var(--learner-bg);
}

.course-content-card{
    max-width:1050px;
    margin:0 auto 24px;
    padding:32px;
    border:1px solid var(--learner-line);
    border-radius:20px;
    background:#FFFFFF;
    box-shadow:var(--learner-shadow-sm);
}

.course-content-card h1,
.course-content-card h2,
.course-content-card h3{
    color:var(--learner-forest);
}

.course-figure{
    margin:24px auto;
    border-radius:16px;
    box-shadow:var(--learner-shadow-sm);
}

.course-note{
    margin:20px 0;
    padding:16px;
    border-left:4px solid var(--learner-gold);
    border-radius:0 12px 12px 0;
    color:#6F541C;
    background:#FFF8E8;
}

.course-actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px;
}


/* ==========================================================
   11. QUIZZES AND ASSESSMENTS
========================================================== */

.quiz-card{
    margin:22px 0;
    padding:22px;
    border:1px solid var(--learner-line);
    border-radius:16px;
    background:#FFFFFF;
}

.quiz-question{
    margin-bottom:14px;
    color:var(--learner-ink);
    font-weight:700;
}

.quiz-option{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:8px 0;
    padding:12px;
    border:1px solid var(--learner-line);
    border-radius:11px;
    cursor:pointer;
}

.quiz-option:hover{
    border-color:#B8D3BC;
    background:#F8FCF8;
}

.quiz-option.correct{
    border-color:#9ACBA3;
    background:var(--learner-success-soft);
}

.quiz-option.incorrect{
    border-color:#E2A8A2;
    background:var(--learner-danger-soft);
}

.quiz-result{
    margin-top:20px;
    padding:18px;
    border-radius:14px;
    text-align:center;
}

.quiz-result.pass{
    color:var(--learner-success);
    background:var(--learner-success-soft);
}

.quiz-result.fail{
    color:var(--learner-danger);
    background:var(--learner-danger-soft);
}

.quiz-score{
    font-size:2rem;
    font-weight:800;
}


/* ==========================================================
   12. COMPLETION, FEEDBACK, AND CERTIFICATE
========================================================== */

.completion-card{
    max-width:850px;
    margin:0 auto;
    padding:36px;
    border:1px solid var(--learner-line);
    border-radius:22px;
    background:#FFFFFF;
    box-shadow:var(--learner-shadow);
    text-align:center;
}

.completion-icon{
    width:82px;
    height:82px;
    display:grid;
    place-items:center;
    margin:0 auto 20px;
    border-radius:50%;
    color:#FFFFFF;
    background:var(--learner-green);
    font-size:2rem;
}

.completion-steps{
    display:grid;
    gap:12px;
    margin:26px 0;
    text-align:left;
}

.completion-step{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border:1px solid var(--learner-line);
    border-radius:12px;
    background:#FAFCFA;
}

.completion-step.done{
    border-color:#B8D3BC;
    background:var(--learner-success-soft);
}


/* ==========================================================
   13. LEARNER FOOTER
========================================================== */

.learner-footer{
    padding:18px;
    color:#6D766F;
    font-size:.78rem;
    text-align:center;
}


/* ==========================================================
   14. RESPONSIVE LEARNER LAYOUT
========================================================== */

@media(max-width:1100px){
    .learner-stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .course-shell{
        grid-template-columns:250px minmax(0,1fr);
    }
}

@media(max-width:900px){
    .learner-sidebar{
        transform:translateX(-105%);
    }

    .learner-sidebar.open{
        transform:none;
    }

    .learner-main-shell{
        margin-left:0;
    }

    .learner-menu-toggle{
        display:grid;
        place-items:center;
    }

    .learner-course-grid{
        grid-template-columns:1fr;
    }

    .course-shell{
        display:block;
    }

    .course-nav{
        position:relative;
        height:auto;
    }
}

@media(max-width:820px){
    .learner-auth-shell{
        grid-template-columns:1fr;
    }

    .learner-auth-info,
    .learner-auth-panel{
        padding:36px 26px;
    }

    .learner-auth-wrap{
        padding-top:95px;
    }
}

@media(max-width:620px){
    .learner-stats-grid{
        grid-template-columns:1fr;
    }

    .learner-topbar,
    .learner-main-content,
    .course-main{
        padding-left:16px;
        padding-right:16px;
    }

    .learner-welcome-card,
    .course-content-card,
    .completion-card{
        padding:24px 20px;
    }

    .course-actions{
        display:grid;
        grid-template-columns:1fr;
    }
}