/* =======================================================
   KiraEdu — Student Dashboard
   Gold, cream, white and slate visual system
======================================================= */

.student-dashboard{
    min-height:100vh;
    background:#f7f6f2;
    color:#0f172a;
}


/* =======================================================
   Welcome hero
======================================================= */

.welcome-panel{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    min-height:360px;
    padding:86px max(24px, calc((100vw - 1200px) / 2)) 125px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;

    background:
        linear-gradient(
            90deg,
            rgba(5,12,28,.93),
            rgba(5,12,28,.68)
        ),
        none;

    background-size:cover;
    background-position:center;
    color:#ffffff;
}

.welcome-panel > div:first-child{
    max-width:780px;
}

.welcome-panel .eyebrow{
    display:inline-flex;
    align-items:center;

    padding:8px 13px;

    border:1px solid rgba(212,175,55,.38);
    border-radius:999px;

    background:rgba(212,175,55,.16);
    color:#f3d46a;

    font-size:10px;
    font-weight:900;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.welcome-panel h1{
    margin:15px 0 14px;

    color:#fff7d6;
    font-family:var(--font-heading);
    font-size:55px;
    line-height:1.02;
    letter-spacing:-.045em;
}

.welcome-panel p{
    max-width:700px;
    margin:0;

    color:rgba(255,255,255,.8);
    font-size:17px;
    line-height:1.7;
}

.welcome-badge{
    flex-shrink:0;

    padding:15px 20px;

    border:1px solid rgba(244,212,106,.45);
    border-radius:18px;

    background:rgba(255,255,255,.1);
    backdrop-filter:blur(14px);

    color:#fff7d6;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}


/* =======================================================
   Dashboard shell
======================================================= */

.dashboard-shell{
    width:min(100% - 48px, 1200px);
    margin:-72px auto 80px;

    display:grid;
    grid-template-columns:290px minmax(0,1fr);
    align-items:start;
    gap:24px;

    position:relative;
    z-index:3;
}


/* =======================================================
   Sidebar
======================================================= */

.dashboard-sidebar{
    display:grid;
    gap:16px;
}

.profile-card,
.sidebar-status-card,
.menu-dropdown{
    border:1px solid #e6dfcc;
    border-radius:24px;
    background:#ffffff;

    box-shadow:0 18px 45px rgba(15,23,42,.075);
}

.profile-card{
    padding:22px;
}

.profile-main{
    display:flex;
    align-items:center;
    gap:14px;
}

.avatar{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;
    flex-shrink:0;

    border:1px solid #dec66e;
    border-radius:18px;
    background:#fff4c2;

    color:#876307;
    font-family:var(--font-heading);
    font-size:25px;
    font-weight:900;
}

.profile-text{
    min-width:0;
}

.profile-text h3{
    margin:0 0 3px;

    color:#111827;
    font-size:16px;
    line-height:1.25;
}

.profile-text p{
    margin:0 0 7px;

    color:#746c59;
    font-size:11px;
}

.student-number{
    display:inline-flex;

    padding:5px 8px;

    border-radius:999px;
    background:#f8f4e8;

    color:#80600b;
    font-size:9px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}


/* =======================================================
   Details and dropdowns
======================================================= */

.profile-dropdown{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #eee8da;
}

.profile-dropdown summary,
.menu-dropdown summary{
    position:relative;

    padding-right:24px;

    color:#413820;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    list-style:none;
}

.profile-dropdown summary::-webkit-details-marker,
.menu-dropdown summary::-webkit-details-marker{
    display:none;
}

.profile-dropdown summary::after,
.menu-dropdown summary::after{
    content:"+";

    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);

    color:#9a7109;
    font-size:17px;
}

.profile-dropdown[open] summary::after,
.menu-dropdown[open] summary::after{
    content:"−";
}

.profile-details{
    display:grid;
    gap:10px;

    margin-top:15px;
}

.profile-details div{
    padding:10px 11px;

    border:1px solid #ebe5d7;
    border-radius:12px;
    background:#fcfbf7;
}

.profile-details span{
    display:block;
    margin-bottom:4px;

    color:#827966;
    font-size:8px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.profile-details strong{
    display:block;

    color:#1f2937;
    font-size:11px;
    overflow-wrap:anywhere;
}


/* =======================================================
   Credential sidebar status
======================================================= */

.sidebar-status-card{
    padding:20px;
}

.sidebar-status-card > span{
    display:block;
    margin-bottom:9px;

    color:#8a806b;
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.sidebar-status-card strong{
    display:inline-flex;

    padding:7px 10px;

    border:1px solid #ddc778;
    border-radius:999px;
    background:#fff5cf;

    color:#765607;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}

.sidebar-status-card .pending-status{
    background:#f8f4e8;
    border-color:#e1d7b7;
    color:#74653c;
}

.sidebar-status-card p{
    margin:10px 0 0;

    color:#746c59;
    font-size:11px;
    line-height:1.55;
}


/* =======================================================
   Sidebar menus
======================================================= */

.menu-dropdown{
    padding:18px 20px;
}

.dropdown-content{
    display:grid;
    gap:7px;

    margin-top:14px;
}

.dropdown-content a,
.dropdown-content span{
    display:block;

    padding:10px 11px;

    border-radius:11px;

    color:#51482f;
    font-size:11px;
    text-decoration:none;
}

.dropdown-content a{
    background:#fcfbf7;
    border:1px solid #ebe5d7;
}

.dropdown-content a:hover{
    border-color:#d8c172;
    background:#fff8dd;
    color:#765607;
}

.browse-btn{
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:12px 18px;

    border:1px solid #bd900d;
    border-radius:15px;

    background:linear-gradient(135deg,#e1bb3f,#b98708);
    color:#ffffff;

    font-size:12px;
    font-weight:900;
    text-decoration:none;

    box-shadow:0 10px 24px rgba(154,113,9,.2);
}

.browse-btn:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#d4af37,#a87909);
}


/* =======================================================
   Main dashboard content
======================================================= */

.dashboard-main{
    min-width:0;
    display:grid;
    gap:22px;
}


/* =======================================================
   Overview cards
======================================================= */

.overview-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.overview-card{
    padding:21px;

    border:1px solid #e6dfcc;
    border-radius:21px;
    background:#ffffff;

    box-shadow:0 15px 38px rgba(15,23,42,.065);
}

.overview-card span{
    display:block;
    margin-bottom:9px;

    color:#817763;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.overview-card strong{
    display:block;

    color:#9a7109;
    font-family:var(--font-heading);
    font-size:31px;
    line-height:1;
}

.overview-card p{
    margin:8px 0 0;

    color:#746c59;
    font-size:10px;
}


/* =======================================================
   Shared dashboard cards
======================================================= */

.current-session-card,
.credential-card,
.certificates-section{
    padding:26px;

    border:1px solid #e6dfcc;
    border-radius:26px;
    background:#ffffff;

    box-shadow:0 18px 45px rgba(15,23,42,.075);
}

.section-label{
    display:block;
    margin-bottom:8px;

    color:#98700a;
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.current-session-card h2,
.credential-card h2,
.certificates-section h2{
    margin:0;

    color:#111827;
    font-family:var(--font-heading);
    font-size:29px;
    line-height:1.12;
}


/* =======================================================
   Current session
======================================================= */

.session-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}

.session-top > div{
    min-width:0;
}

.session-top p{
    margin:9px 0 0;

    color:#706856;
    font-size:12px;
    line-height:1.6;
}

.session-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:15px;
}

.session-meta span{
    padding:7px 10px;

    border:1px solid #e6ddc4;
    border-radius:999px;
    background:#faf7ed;

    color:#695b32;
    font-size:9px;
    font-weight:850;
}

.primary-btn,
.join-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:43px;
    padding:10px 15px;

    border:1px solid #c49a17;
    border-radius:13px;

    background:linear-gradient(135deg,#dfb93c,#b98708);
    color:#ffffff;

    font-size:10px;
    font-weight:900;
    text-decoration:none;
    white-space:nowrap;
}

.primary-btn:hover,
.join-btn:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#d4af37,#a87909);
}


/* =======================================================
   Online meeting card
======================================================= */

.online-session-card{
    margin-top:21px;
    padding:18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    border:1px solid #e3d49c;
    border-radius:18px;
    background:#fff9e6;
}

.online-session-card small{
    color:#98700a;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

.online-session-card h3{
    margin:5px 0;

    color:#2f2817;
    font-size:16px;
}

.online-session-card p{
    margin:0;

    color:#776b4c;
    font-size:10px;
}


/* =======================================================
   Training journey
======================================================= */

.session-status-panel{
    margin-top:21px;
    padding:20px;

    border:1px solid #e9e2d2;
    border-radius:19px;
    background:#fcfbf7;
}

.status-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.status-row > span{
    color:#4c432d;
    font-size:11px;
    font-weight:900;
}

.status-badge{
    padding:7px 10px;

    border:1px solid #ddc778;
    border-radius:999px;
    background:#fff5cf;

    color:#765607;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}

.status-cancelled,
.status-no_show{
    border-color:#e5caca;
    background:#f8eeee;
    color:#874242;
}

.status-steps{
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto;
    align-items:start;

    margin-top:24px;
}

.status-step{
    min-width:70px;
    text-align:center;
}

.status-step span{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    margin:0 auto;

    border:1px solid #ddd5c3;
    border-radius:50%;
    background:#ffffff;

    color:#8a816d;
    font-size:11px;
    font-weight:900;
}

.status-step.active span{
    border-color:#cba329;
    background:#fff2b8;
    color:#765607;
}

.status-step p{
    margin:8px 0 0;

    color:#776e5c;
    font-size:9px;
    font-weight:850;
}

.status-line{
    height:2px;
    margin-top:15px;

    background:#e5dfd1;
}

.status-line.active{
    background:#d1aa31;
}


/* =======================================================
   Credential wallet
======================================================= */

.credential-card{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);
    gap:22px;
    align-items:stretch;
}

.credential-card > div:first-child p{
    margin:12px 0 0;

    color:#746c59;
    font-size:12px;
    line-height:1.65;
}

.renewal-box{
    padding:20px;

    border:1px solid #e2d49e;
    border-radius:18px;
    background:#fff9e6;
}

.renewal-box span{
    display:block;
    margin-bottom:8px;

    color:#97700a;
    font-size:8px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.renewal-box strong{
    display:block;

    color:#382f18;
    font-size:16px;
}

.renewal-box p{
    margin:8px 0 0;

    color:#776b4c;
    font-size:10px;
    line-height:1.55;
}


/* =======================================================
   Certificates
======================================================= */

.section-header{
    margin-bottom:20px;
}

.section-header p{
    margin:10px 0 0;

    color:#746c59;
    font-size:11px;
}

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

.certificate-card{
    position:relative;

    display:grid;
    grid-template-columns:45px minmax(0,1fr);
    gap:13px;

    padding:19px;

    border:1px solid #e2d49d;
    border-radius:19px;
    background:#fffaf0;
}

.certificate-ribbon{
    position:absolute;
    top:12px;
    right:12px;

    padding:5px 8px;

    border-radius:999px;
    background:#fff0ae;

    color:#795707;
    font-size:7px;
    font-weight:900;
    text-transform:uppercase;
}

.certificate-icon{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border:1px solid #ddc36b;
    border-radius:14px;
    background:#fff2b8;

    font-size:18px;
}

.certificate-info{
    min-width:0;
    padding-right:42px;
}

.certificate-info h3{
    margin:0 0 6px;

    color:#292313;
    font-size:14px;
    line-height:1.3;
}

.certificate-info p{
    margin:0 0 5px;

    color:#75694a;
    font-size:9px;
    overflow-wrap:anywhere;
}

.certificate-info small{
    color:#8a8068;
    font-size:8px;
}

.certificate-link{
    grid-column:1/-1;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
   
    min-height:39px;

    border:1px solid #c99f20;
    border-radius:12px;

    background:linear-gradient(135deg,#dfb93c,#b98708);
    color:#ffffff;

    font-size:9px;
    font-weight:900;
    text-decoration:none;
}

.certificate-link:hover{
    background:linear-gradient(135deg,#d4af37,#a87909);
}

.empty-certificate{
    grid-column:1/-1;

    padding:45px 25px;

    border:1px dashed #d9c98e;
    border-radius:19px;
    background:#fffdf7;

    text-align:center;
}

.empty-certificate .certificate-icon{
    margin:0 auto 13px;
}

.empty-certificate h3{
    margin:0 0 8px;

    color:#342c18;
    font-size:18px;
}

.empty-certificate p{
    margin:0;

    color:#786f5d;
    font-size:11px;
}


.certificate-actions{
    display:flex;
    gap:12px;
    margin-top:22px;
    width:200px;
}

.btn-certificate{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:200px;
    padding:14px 18px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;
    font-size:.93rem;

    transition:.28s ease;

    border:1px solid rgba(212,175,55,.35);
}

.view-btn{
    background:#d4af37;
    color:#111;
}

.view-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(212,175,55,.35);
}

.download-btn{
    background:white;
    color:#333;
}

.download-btn:hover{
    background:#f8f8f8;
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}

/* =======================================================
   Tablet
======================================================= */

@media(max-width:980px){

    .dashboard-shell{
        grid-template-columns:1fr;
    }

    .dashboard-sidebar{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .profile-card{
        grid-column:1/-1;
    }

    .credential-card{
        grid-template-columns:1fr;
    }

}


/* =======================================================
   Mobile
======================================================= */

@media(max-width:620px){

    .welcome-panel{
        min-height:390px;
        padding:74px 15px 105px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:center;

        background-position:60% center;
    }

    .welcome-panel h1{
        font-size:40px;
        line-height:.96;
    }

    .welcome-panel p{
        font-size:13px;
        line-height:1.6;
    }

    .welcome-badge{
        padding:10px 13px;
        border-radius:13px;
        font-size:10px;
    }

    .dashboard-shell{
        width:calc(100% - 28px);
        margin:-58px auto 48px;
        gap:14px;
    }

    .dashboard-sidebar{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .profile-card,
    .sidebar-status-card,
    .menu-dropdown{
        border-radius:19px;
    }

    .overview-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .overview-card{
        min-width:0;
        padding:14px 10px;
        border-radius:16px;
    }

    .overview-card span{
        font-size:7px;
    }

    .overview-card strong{
        font-size:22px;
    }

    .overview-card p{
        font-size:8px;
    }

    .current-session-card,
    .credential-card,
    .certificates-section{
        padding:18px 15px;
        border-radius:20px;
    }

    .session-top{
        display:block;
    }

    .current-session-card h2,
    .credential-card h2,
    .certificates-section h2{
        font-size:23px;
    }

    .session-top .primary-btn{
        width:100%;
        margin-top:17px;
    }

    .online-session-card{
        display:block;
        padding:15px;
    }

    .online-session-card .join-btn{
        width:100%;
        margin-top:14px;
    }

    .session-status-panel{
        padding:15px 10px;
    }

    .status-step{
        min-width:55px;
    }

    .status-step p{
        font-size:7px;
    }

    .status-step span{
        width:29px;
        height:29px;
    }

    .certificate-grid{
        grid-template-columns:1fr;
    }

    .certificate-card{
        padding:17px 14px;
    }

}


/* =======================================================
   Very small phones
======================================================= */

@media(max-width:360px){

    .welcome-panel h1{
        font-size:36px;
    }

    .overview-grid{
        grid-template-columns:1fr;
    }

    .overview-card{
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
    }

    .overview-card p{
        grid-column:1/-1;
    }

}