/* Global Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* Dark Mode */
body.dark-mode {
    background-color: #121212;
    color: #f5f5f5;
}

body.dark-mode .container {
    background-color: #1e1e1e;
    color: #f5f5f5;
}

body.dark-mode .response-area {
    background-color: #2a2a2a;
    border-left-color: #4caf50;
}

body.dark-mode input,
body.dark-mode button {
    background-color: #333;
    color: #f5f5f5;
    border-color: #555;
}

/* Header */
/* Base Header Styling */
.dashboard-layout{

display:flex;

min-height:100vh;

background:#f6f8fc;

}

.sidebar{

width:250px;

background:white;

padding:25px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

gap:12px;

}

.sidebar-logo{

display:flex;

align-items:center;

gap:12px;

margin-bottom:25px;

}

.sidebar-logo img{

width:45px;

height:45px;

}

.sidebar button{

padding:15px;

border:none;

background:white;

border-radius:12px;

cursor:pointer;

font-size:15px;

text-align:left;

transition:.3s;

}

.sidebar button:hover{

background:#6d5dfc;

color:white;

}

.dashboard-content{

flex:1;

padding:30px;

}

.top-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.header-right{

display:flex;

align-items:center;

gap:20px;

}

.header-right input{

padding:12px 20px;

border-radius:30px;

border:1px solid #ddd;

width:240px;

}

.profile-avatar{

width:45px;

height:45px;

border-radius:50%;

object-fit:cover;

}


.notification-icon-wrapper{
    position:relative;
}

#notificationBtn{
    width:46px;
    height:46px;
    border:none;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    font-size:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    position:relative;
}

.notification-badge{
    position:absolute;
    top:-6px;
    right:-6px;
    background:#ff3b30;
    color:#fff;
    min-width:20px;
    height:20px;
    border-radius:50%;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}

.notification-dropdown{

    position:absolute;
    top:60px;
    right:0;

    width:340px;
    max-height:420px;

    overflow-y:auto;

    background:#fff;

    border-radius:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.15);

    padding:20px;

    z-index:9999;

}

.notification-dropdown.hidden{
    display:none;
}

.notification-dropdown ul{

    list-style:none;

    padding:0;

    margin:0;

}

.notification-dropdown li{

    padding:14px 0;

    border-bottom:1px solid #eee;

}

.notification-dropdown li:last-child{

    border-bottom:none;

}

.notification-dropdown small{

    color:#777;

}

.close-btn{

    float:right;

    cursor:pointer;

    font-size:18px;

    color:#888;

}

.mark-read-btn{

    width:100%;

    margin-top:15px;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#4F46E5;

    color:white;

    cursor:pointer;

}

.empty-notification{

    text-align:center;

    color:#888;

    padding:25px 0;

}

/* Dahsboaed rowa */

.dashboard-cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

margin-top:30px;

}



.dashboard-card{

background:#fff;

border-radius:18px;

padding:22px 24px;

height:150px;       

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.06);

transition:.35s;
}

.dashboard-card1{

background:#fff;

border-radius:18px;

padding:22px 24px;

height:150px;       

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.06);

transition:.35s;
}



.dashboard-card:hover{

transform:translateY(-8px);

}

.dashboard-card1:hover{

transform:translateY(-8px);

}



.card-text p{

font-size:17px;

font-weight:700;

color:#334155;

margin-bottom:18px;

}



.card-text h2{

font-size:40px;

font-weight:800;

}



.card-text span{

font-size:14px;

color:#16a34a;

font-weight:600;

}



.card-icon{

width:58px;

height:58px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

}



.purple{

background:#ede9fe;

}



.blue{

background:#dbeafe;

}



.orange{

background:#ffedd5;

}



.green{

background:#dcfce7;

}

/* ================= OVERVIEW ================= */

.dashboard-overview{

display:grid;

grid-template-columns:2fr 1.5fr 1fr;

gap:25px;

margin-top:35px;

}



.overview-card{

background:white;

padding:25px;

border-radius:22px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

}



.card-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}



.card-header h3{

font-size:22px;

color:#0f172a;

}



.card-header span{

color:#64748b;

font-size:14px;

}



/* Graph */

.student-chart-container{

    width:100%;
    height:320px;
    position:relative;

}

#studentProgressChart{

    width:100% !important;
    height:100% !important;

}



/* Subject */

.subject{

margin-bottom:22px;

}



.subject span{

display:block;

margin-bottom:8px;

font-weight:600;

}



.progress-line{

height:10px;

background:#e2e8f0;

border-radius:20px;

overflow:hidden;

}



.progress-line div{

height:100%;

background:linear-gradient(90deg,#14b8a6,#38bdf8);

border-radius:20px;

}



/* Goals */

.goal-list{

list-style:none;

}



.goal-list li{

padding:14px;

margin-bottom:14px;

background:#f8fafc;

border-radius:12px;

font-weight:600;

}

/* ===============================
   Dashboard Three Card Row
================================ */

.dashboard-row{

    display:grid;

    grid-template-columns: repeat(3, 1fr);

    gap:25px;

    margin-top:30px;

    align-items:stretch;

}



/* Common Dashboard Card */

.dashboard-card{

    background:white;

    border-radius:22px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

    transition:.35s;

    min-height:320px;

}



.dashboard-card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,0.12);

}



/* Header */

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}



.card-header h3{

    font-size:20px;

    margin:0;

    color:#1e293b;

}



/* ===============================
      Recent Activity
================================ */


.activity-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    max-height:360px;
    
    overflow:hidden;

}



.activity-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:3px;

    border-radius:15px;

    background:#f8fafc;

    transition:.3s;

}



.activity-item:hover{

    background:#eef2ff;

}



.activity-icon{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    background:#e0f2fe;

}



.activity-item h4{

    margin:0;

    font-size:15px;

    color:#334155;

}



.activity-item p{

    margin-top:5px;

    font-size:13px;

    color:#64748b;

}



/* ===============================
      Upcoming Assignments
================================ */


.assignment{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f8fafc;

    padding:15px;

    margin-bottom:15px;

    border-radius:15px;

    transition:.3s;

}



.assignment:hover{

    background:#ecfeff;

}



.assignment h4{

    margin:0;

    font-size:15px;

    color:#334155;

}



.assignment span{

    font-size:13px;

    font-weight:600;

    color:#0f766e;

}



/* Loading */

.loading-card{

    text-align:center;

    padding:40px 0;

    color:#64748b;

}




/* ===============================
        AI Coach Card
   (Same Existing Style)
================================ */


.ai-card{
    background: linear-gradient(135deg,#0f766e,#14b8a6);
    color: white;
}



.ai-top{

font-size:70px;

margin-bottom:20px;

}



.ai-card h3{
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
}



.ai-card p{

line-height:1.8;

margin-bottom:25px;

}



.ai-card button{
    background: #ffffff;
    color: #0f766e;
    font-weight: 700;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    cursor: pointer;
    transition: .3s;
}

.ai-card button:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

#coachMessage{
    color: rgba(255,255,255,0.95);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    margin: 15px 0 25px;
    text-align: center;
    max-width: 320px;
}


/* ===============================
      Responsive
================================ */


@media(max-width:1100px){

    .dashboard-row{

        grid-template-columns:1fr;

    }

}

/*================ QUICK ACTIONS ================*/

.quick-actions{

margin-top:35px;

}

.quick-actions h3{

font-size:24px;

margin-bottom:20px;

color:#0f172a;

}

.quick-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

}

.quick-card{

background:white;

border-radius:22px;

padding:28px;

box-shadow:0 12px 28px rgba(0,0,0,.06);

cursor:pointer;

transition:.35s;

}

.quick-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 40px rgba(20,184,166,.18);

}

.quick-icon{

width:70px;

height:70px;

border-radius:18px;

background:#ecfeff;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

margin-bottom:20px;

}

.quick-card h4{

margin-bottom:10px;

font-size:20px;

}

.quick-card p{

color:#64748b;

line-height:1.7;

}


/*================ CONTINUE LEARNING ================*/

.continue-learning{

margin-top:40px;

}

.section-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:22px;

}

.section-header h3{

font-size:24px;

color:#0f172a;

}

.section-header a{

text-decoration:none;

font-weight:600;

color:#14b8a6;

}

.learning-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:24px;

}

.learning-card{

background:white;

padding:25px;

border-radius:22px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

transition:.35s;

}

.learning-card:hover{

transform:translateY(-8px);

}

.learning-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.subject-icon{

width:60px;

height:60px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

}

.math{

background:#ede9fe;

}

.science{

background:#dcfce7;

}

.english{

background:#dbeafe;

}

.progress-percent{

font-weight:700;

color:#0f766e;

}

.learning-card h4{

margin-bottom:8px;

}

.learning-card p{

color:#64748b;

margin-bottom:18px;

}

.learning-card button{

width:100%;

padding:12px;

border:none;

border-radius:12px;

background:#14b8a6;

color:white;

font-weight:600;

cursor:pointer;

margin-top:18px;

transition:.3s;

}

.learning-card button:hover{

background:#0f766e;

}


.study-card{

background:white;

padding:35px;

border-radius:28px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

margin-top:40px;

}

.study-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.study-header h2{

font-size:32px;

margin-bottom:8px;

}

.study-header p{

color:#64748b;

}

.study-badge{

background:#14b8a6;

color:white;

padding:10px 20px;

border-radius:30px;

font-weight:700;

}

.study-search{

display:flex;

gap:18px;

margin-top:25px;

}

.study-search input{

flex:1;

padding:18px;

border-radius:18px;

border:2px solid #e2e8f0;

font-size:17px;

}

.study-search input:focus{

outline:none;

border-color:#14b8a6;

}

.study-search button{

padding:18px 35px;

border:none;

border-radius:18px;

background:#14b8a6;

color:white;

font-size:17px;

font-weight:600;

cursor:pointer;

}

.study-search button:hover{

background:#0f766e;

}

.suggested-topics{

margin-top:25px;

display:flex;

gap:12px;

flex-wrap:wrap;

align-items:center;

}

.suggested-topics span{

font-weight:700;

margin-right:10px;

}

.suggested-topics button{

background:#ecfeff;

border:none;

padding:10px 18px;

border-radius:25px;

cursor:pointer;

transition:.3s;

}

.suggested-topics button:hover{

background:#14b8a6;

color:white;

}

.loading-box{

margin-top:25px;

padding:18px;

background:#ecfeff;

border-radius:18px;

font-weight:600;

color:#0f766e;

}


/*================ STUDY PAGE ================*/

.study-page{

display:flex;

flex-direction:column;

gap:30px;

}

.study-hero{

background:linear-gradient(135deg,#0f766e,#14b8a6);

padding:40px;

border-radius:30px;

color:white;

}

.study-tag{

background:rgba(255,255,255,.2);

padding:8px 18px;

border-radius:30px;

display:inline-block;

margin-bottom:18px;

font-weight:600;

}

.study-hero h2{

font-size:40px;

margin-bottom:12px;

}

.study-hero p{

font-size:18px;

opacity:.9;

max-width:700px;

}



.study-search-card{

background:white;

padding:30px;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.search-box{

display:flex;

gap:18px;

}

.search-box input{

flex:1;

padding:18px;

border-radius:16px;

border:2px solid #e2e8f0;

font-size:16px;

}

.search-box input:focus{

outline:none;

border-color:#14b8a6;

}

.search-box button{

padding:18px 30px;

border:none;

border-radius:16px;

background:#14b8a6;

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.search-box button:hover{

background:#0f766e;

}



.popular-topics{

margin-top:22px;

display:flex;

flex-wrap:wrap;

gap:12px;

align-items:center;

}

.popular-topics span{

font-weight:700;

}

.popular-topics button{

background:#ecfeff;

border:none;

padding:10px 18px;

border-radius:30px;

cursor:pointer;

transition:.3s;

}

.popular-topics button:hover{

background:#14b8a6;

color:white;

}



.ai-loading{

background:#ecfeff;

padding:18px;

border-radius:18px;

font-weight:600;

color:#0f766e;

}



.response-card{

background:white;

border-radius:25px;

box-shadow:0 12px 30px rgba(0,0,0,.06);

overflow:hidden;

}

.response-header{

padding:22px 30px;

background:#f8fafc;

border-bottom:1px solid #e2e8f0;

}

.response-body{

padding:30px;

}

.response-body pre{

font-family:Inter,sans-serif;

white-space:pre-wrap;

line-height:1.9;

font-size:16px;

}



.quiz-card{

background:white;

border-radius:25px;

padding:30px;

box-shadow:0 12px 30px rgba(0,0,0,.06);

}

.quiz-header{

margin-bottom:20px;

}

.quiz-buttons{

display:flex;

gap:15px;

margin-top:25px;

}

.quiz-buttons button{

padding:14px 24px;

border:none;

border-radius:14px;

cursor:pointer;

background:#14b8a6;

color:white;

font-weight:600;

transition:.3s;

}

.quiz-buttons button:hover{

background:#0f766e;

}


/*=============== CHAT PAGE ===============*/

.chat-page{

display:flex;

flex-direction:column;

gap:25px;

}

.chat-top{

background:linear-gradient(135deg,#0f766e,#14b8a6);
padding:35px;

border-radius:25px;

color:white;

}

.chat-tag{

background:rgba(255,255,255,.2);

padding:8px 16px;

border-radius:30px;

display:inline-block;

margin-bottom:15px;

font-weight:600;

}

.suggestion-row{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.suggestion-row button{

border:none;

background:#eef6ff;

padding:12px 18px;

border-radius:30px;

cursor:pointer;

transition:.3s;

}

.suggestion-row button:hover{

background:#2563eb;

color:white;

}

.chat-window{

background:white;

border-radius:25px;

padding:25px;

height:500px;

overflow-y:auto;

box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.bot-chat{

background:#f1f5f9;

padding:18px;

border-radius:20px;

max-width:70%;

margin-bottom:25px;

}

.chat-input-box{

display:flex;

gap:15px;

}

.chat-input-box input{

flex:1;

padding:18px;

border-radius:15px;

border:2px solid #e2e8f0;

font-size:16px;

}

.chat-input-box button{

width:70px;

border:none;

background:#2563eb;

color:white;

border-radius:15px;

font-size:20px;

cursor:pointer;

}

/*============== ASSIGNMENTS ==============*/

.assignment-page{

display:flex;

flex-direction:column;

gap:30px;

}

.assignment-top{

background:linear-gradient(135deg,#0f766e,#14b8a6);

padding:35px;

border-radius:25px;

color:white;

}

.assignment-tag{

display:inline-block;

padding:8px 18px;

background:rgba(255,255,255,.2);

border-radius:30px;

margin-bottom:15px;

}

.assignment-list{

display:flex;

flex-direction:column;

gap:20px;

}

.assignment-card{

background:white;

padding:25px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

}

.assignment-card:hover{

transform:translateY(-5px);

}

.assignment-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.pending{

background:#fef3c7;

color:#b45309;

padding:8px 15px;

border-radius:30px;

font-size:14px;

font-weight:600;

}

.assignment-desc{

margin:15px 0;

color:#64748b;

}

.assignment-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

}

.upload-btn{

background:#2563eb;

color:white;

border:none;

padding:12px 22px;

border-radius:12px;

cursor:pointer;

margin-right:10px;

}

.assignment-btn{

background:#10b981;

color:white;

border:none;

padding:12px 22px;

border-radius:12px;

cursor:pointer;

}

.empty-card{

background:white;

padding:50px;

text-align:center;

border-radius:20px;

font-size:20px;

font-weight:600;

}


.assignment-modal{

    width:520px;
    max-width:95%;
    border-radius:20px;
    padding:35px;
}

.assignment-modal h2{

    margin-bottom:10px;
}

.assignment-modal p{

    color:#64748b;
    margin-bottom:25px;
}

.assignment-modal label{

    display:block;
    margin-top:18px;
    margin-bottom:8px;
    font-weight:600;
}

.assignment-modal textarea{

    width:100%;
    padding:14px;
    border-radius:12px;
    border:1px solid #ddd;
    resize:none;
}

.assignment-modal input[type=file]{

    width:100%;
    margin-top:10px;
}

.modal-actions{

    display:flex;
    justify-content:flex-end;
    gap:15px;
    margin-top:30px;
}

.submit-btn{

    background:#0f766e;
    color:#fff;
    border:none;
    padding:12px 26px;
    border-radius:10px;
    cursor:pointer;
}

.cancel-btn{

    background:#e2e8f0;
    border:none;
    padding:12px 22px;
    border-radius:10px;
    cursor:pointer;
}

.submit-btn:hover{

    background:#0d5f59;
}

.cancel-btn:hover{

    background:#cbd5e1;
}

/*=============== NOTES PAGE ===============*/

.notes-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

    margin-top:30px;

}

.resource-card{

    background:#fff;

    border-radius:22px;

    padding:25px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.resource-card:hover{

    transform:translateY(-8px);

}

.resource-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.resource-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ecfeff;

    font-size:28px;

}

.resource-card h3{

    margin:15px 0;

}

.resource-card p{

    color:#64748b;

    line-height:1.7;

}

.download-btn{

    display:inline-block;

    margin-top:20px;

    padding:12px 22px;

    background:#0f766e;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

}

.download-btn:hover{

    background:#0d5f59;

}

.empty-card{

    grid-column:1/-1;

    text-align:center;

    background:#fff;

    padding:70px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.07);

}

.empty-icon{

    font-size:70px;

    margin-bottom:20px;

}

.loading-card{

    text-align:center;

    padding:60px;

    background:white;

    border-radius:20px;

}


.progress-page{

display:flex;
flex-direction:column;
gap:25px;

}

.page-header h2{

font-size:30px;
margin-bottom:5px;

}

.page-header p{

color:#777;

}

.progress-stats{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}

.progress-stat-card{

background:#fff;
padding:25px;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.progress-stat-card h4{

color:#888;

}

.progress-stat-card h2{

font-size:32px;
margin-top:10px;

}

.progress-card-new{

background:#fff;
padding:25px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.progress-main{

height:15px;
background:#ececec;
border-radius:50px;
overflow:hidden;
margin-top:15px;

}

.progress-fill{

width:0%;
height:100%;
background:linear-gradient(90deg,#6C63FF,#00C6FF);
transition:.4s;

}

.progress-header{

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

}

#progressForm{

display:flex;
gap:15px;
margin-top:20px;

}

#progressForm input[type=text]{

flex:1;
padding:14px;
border-radius:12px;
border:1px solid #ddd;

}

.checkbox{

display:flex;
align-items:center;
gap:8px;

}

#progressForm button{

padding:14px 24px;
border:none;
background:#6C63FF;
color:white;
border-radius:12px;
cursor:pointer;

}

#progress-list{

display:flex;
flex-direction:column;
gap:15px;
margin-top:20px;

}

.progress-item{

display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
background:#f8f9ff;
border-radius:12px;

}


.history-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

margin-bottom:15px;

background:#fff;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.history-left h4{

margin:0;

font-size:17px;

}

.history-left p{

margin-top:6px;

color:#777;

}

.history-right{

display:flex;

gap:10px;

}

.history-right button{

width:42px;

height:42px;

border:none;

border-radius:10px;

cursor:pointer;

background:#eef2ff;

font-size:18px;

}

.history-right button:hover{

background:#4F46E5;

color:white;

}


/* ================= SYLLABUS ================= */

.syllabus-page{

margin-top:30px;

display:flex;

flex-direction:column;

gap:25px;

}

.student-class-card{

background:white;

border-radius:20px;

padding:25px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.student-class-card h3{

margin:0;

color:#666;

}

.student-class-card p{

font-size:28px;

font-weight:700;

color:#5b5ce2;

margin-top:8px;

}

.class-icon{

font-size:55px;

}

.subject-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.subject-buttons button{

padding:14px 24px;

border:none;

border-radius:12px;

background:#eef2ff;

color:#5b5ce2;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.subject-buttons button:hover{

background:#5b5ce2;

color:white;

transform:translateY(-3px);

}

.syllabus-content{

background:white;

border-radius:20px;

padding:25px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.section-title{

margin-bottom:20px;

}

.topic-card{

padding:18px;

border:1px solid #eee;

border-radius:12px;

margin-bottom:15px;

transition:.3s;

}

.topic-card:hover{

transform:translateY(-3px);

box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.topic-card h4{

margin-bottom:8px;

color:#444;

}

.topic-card button{

margin-top:15px;

padding:10px 18px;

border:none;

border-radius:10px;

background:#5b5ce2;

color:white;

cursor:pointer;

}


.profile-page{

margin-top:25px;

}

.profile-container{

display:grid;

grid-template-columns:300px 1fr;

gap:30px;

margin-top:25px;

}

.profile-left{

background:white;

padding:30px;

border-radius:20px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.profile-image-box img{

width:140px;

height:140px;

border-radius:50%;

object-fit:cover;

border:5px solid #6C63FF;

}

.profile-image-box h3{

margin-top:18px;

}

.profile-image-box p{

color:#888;

margin:8px 0;

}

.profile-image-box button{

margin-top:20px;

background:#6C63FF;

color:white;

padding:12px 20px;

border:none;

border-radius:10px;

cursor:pointer;

}

.profile-right{

background:white;

padding:35px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.input-group{

display:flex;

flex-direction:column;

margin-bottom:22px;

}

.input-group label{

font-weight:600;

margin-bottom:8px;

}

.input-group input{

padding:14px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

}

.save-profile-btn{

margin-top:20px;

padding:14px;

background:#6C63FF;

color:white;

border:none;

border-radius:12px;

font-size:16px;

cursor:pointer;

width:220px;

}

.profile-menu{

display:none;

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

background:rgba(0,0,0,.5);

justify-content:center;

align-items:center;

z-index:999;

}

.profile-menu-content{

background:white;

padding:25px;

border-radius:15px;

display:flex;

flex-direction:column;

gap:15px;

min-width:260px;

}

.profile-menu-content button{

padding:12px;

border:none;

background:#f4f4f4;

border-radius:10px;

cursor:pointer;

}

.password-wrapper{

position:relative;

display:flex;

align-items:center;

}

.password-wrapper input{

width:100%;

padding-right:45px;

}

.toggle-password{

position:absolute;

right:15px;

cursor:pointer;

color:#888;

font-size:18px;

transition:.3s;

}

.toggle-password:hover{

color:#6C63FF;

}

.profile-divider{

margin:40px 0;

border:none;

border-top:1px solid #e8e8e8;

}

.danger-zone{

background:#fff5f5;

border:1px solid #ffd8d8;

padding:25px;

border-radius:15px;

margin-top:20px;

}

.danger-zone h3{

color:#dc3545;

margin-bottom:10px;

}

.danger-zone p{

color:#666;

margin-bottom:18px;

}

.logout-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:13px 24px;

background:#dc3545;

color:white;

text-decoration:none;

border-radius:10px;

font-weight:600;

transition:.3s;

}

.logout-btn:hover{

background:#b02a37;

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(220,53,69,.3);

}

.profile-info{

margin-top:30px;

display:flex;

flex-direction:column;

gap:15px;

}

.info-box{

display:flex;

align-items:center;

gap:15px;

padding:15px;

background:#f8f9ff;

border-radius:12px;

transition:.3s;

}

.info-box:hover{

transform:translateY(-3px);

box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.info-box i{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#6C63FF;

color:white;

border-radius:12px;

font-size:18px;

}

.info-box small{

display:block;

color:#888;

}

.info-box h4{

margin-top:3px;

font-size:15px;

}



.modal-buttons{

display:flex;

justify-content:center;

gap:15px;

margin-top:20px;

}

.modal-buttons button{

padding:12px 20px;

border:none;

border-radius:8px;

cursor:pointer;

background:#ddd;

}

.modal-buttons a{

padding:12px 20px;

background:#dc3545;

color:white;

text-decoration:none;

border-radius:8px;

}


/* ================= REMARKS PAGE ================= */

.remarks-page{

padding:30px;

}

.remarks-summary{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin:25px 0;

}

.summary-card{

background:white;

padding:25px;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.summary-card h4{

color:#888;

margin-bottom:10px;

}

.summary-card h2{

font-size:28px;

color:#6C63FF;

}

.remarks-container{

display:flex;

flex-direction:column;

gap:18px;

}

.remark-card{

background:white;

padding:22px;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.06);

border-left:6px solid #6C63FF;

transition:.3s;

}

.remark-card:hover{

transform:translateY(-4px);

}

.remark-header{

display:flex;

justify-content:space-between;

margin-bottom:15px;

}

.teacher-name{

font-weight:700;

font-size:17px;

}

.remark-date{

color:#888;

font-size:14px;

}

.remark-text{

line-height:1.7;

color:#555;

}

.loading-card{

background:white;

padding:40px;

border-radius:18px;

text-align:center;

color:#777;

}


/*================ GOALS =================*/

.goals-page{

padding:30px;

}

.goal-summary{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin:25px 0;

}

.goal-summary-card{

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.goal-summary-card h4{

color:#777;

margin-bottom:10px;

}

.goal-summary-card h2{

font-size:30px;

color:#6C63FF;

}

.goal-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:25px;

}

.goal-card{

background:#fff;

padding:25px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.06);

transition:.3s;

}

.goal-card:hover{

transform:translateY(-6px);

}

.goal-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.goal-top span{

background:#6C63FF;

color:white;

padding:6px 15px;

border-radius:30px;

font-size:14px;

}

.goal-progress{

height:12px;

background:#eee;

border-radius:50px;

overflow:hidden;

margin:20px 0;

}

.goal-fill{

height:100%;

background:linear-gradient(90deg,#6C63FF,#4ECDC4);

}

.goal-footer{

margin-top:20px;

}

.goal-footer button{

width:100%;

padding:12px;

border:none;

background:#6C63FF;

color:white;

border-radius:10px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.goal-footer button:hover{

background:#5848d8;

}

.goal-completed{

background:#d4edda;

color:#28a745;

padding:12px;

border-radius:10px;

text-align:center;

font-weight:600;

}

.empty-goal{

background:white;

padding:50px;

text-align:center;

border-radius:20px;

font-size:22px;

}


/* ================= SUMMARIZE ================= */

.summarize-page{

    display:flex;
    flex-direction:column;
    gap:25px;

}

.summarize-card{

    background:white;
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.summarize-card textarea{

    width:100%;
    height:220px;
    resize:none;

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

    padding:18px;

    font-size:15px;

    outline:none;

}

.summarize-btn{

    margin-top:20px;

    background:#6C63FF;
    color:white;

    border:none;

    padding:14px 30px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}

.summarize-btn:hover{

    transform:translateY(-2px);

}

.summary-result{

    background:white;

    border-radius:20px;

    padding:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.result-header{

    margin-bottom:15px;

}

#summaryArea{

    min-height:180px;

    line-height:1.8;

    color:#555;

    white-space:pre-wrap;

}
  
  /* Controls Section */
  .controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

@media (max-width: 768px) {
    .header {
      flex-direction: row;
      align-items: flex-start;
      padding: 15px;
    }
  
    .controls {
      width: 100%;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
  
  @media (max-width: 480px) {
    .header {
      padding: 10px;
    }
  
    .controls {
      flex-direction: row;
      align-items: stretch;
      gap: 0.5rem;
    }
  }


/* Logout button */
.logout-button {
    background-color: #e76f51;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}


/* =====================================================
   STUDENT DASHBOARD - MOBILE RESPONSIVE FIX
   Paste at the END of style.css
===================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* MAIN LAYOUT */
    .dashboard-layout {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* SIDEBAR */
    .sidebar {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    .sidebar-logo {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-right: 5px !important;
    }

    .sidebar-logo img {
        width: 35px !important;
        height: 35px !important;
        object-fit: contain !important;
    }

    .sidebar-logo h2 {
        font-size: 18px !important;
        margin: 0 !important;
    }

    .sidebar button {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* MAIN CONTENT */
    .dashboard-content {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 15px !important;
        overflow: hidden !important;
    }

    /* TOP HEADER */
    .top-header {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .top-header h2 {
        font-size: 22px !important;
    }

    .top-header p {
        font-size: 14px !important;
    }

    .header-right {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    #dashboardSearch {
        width: 100% !important;
        min-width: 0 !important;
    }

    .profile-avatar {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }

    /* DASHBOARD TOP CARDS */
    .dashboard-cards {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .dashboard-card1 {
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
    }

    .dashboard-card1 h2 {
        font-size: 25px !important;
    }

    .dashboard-card1 p {
        font-size: 12px !important;
    }

    /* OVERVIEW */
    .dashboard-overview {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .overview-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* CHART */
    .student-chart-container {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .student-chart-container canvas {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* SECOND ROW */
    .dashboard-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .dashboard-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* QUICK ACTIONS */
    .quick-actions {
        width: 100% !important;
    }

    .quick-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .quick-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 15px !important;
    }

    .quick-card h4 {
        font-size: 14px !important;
    }

    .quick-card p {
        font-size: 11px !important;
    }

    /* CONTINUE LEARNING */
    .continue-learning,
    .learning-grid {
        width: 100% !important;
        min-width: 0 !important;
    }

    .learning-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* ALL FEATURE SECTIONS */
    .feature-section {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* STUDY */
    .study-page,
    .chat-page,
    .syllabus-page,
    .progress-page,
    .profile-page,
    .remarks-page,
    .goals-page,
    .summarize-page {
        width: 100% !important;
        min-width: 0 !important;
    }

    .study-search-card,
    .response-card,
    .quiz-card,
    .summarize-card,
    .summary-result {
        width: 100% !important;
        min-width: 0 !important;
    }

    .search-box {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .search-box input,
    .search-box button {
        width: 100% !important;
    }

    .popular-topics,
    .suggestion-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ASSIGNMENTS / NOTES / GOALS */
    .assignment-grid,
    .notes-grid,
    .goal-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 15px !important;
    }

    /* SYLLABUS */
    .subject-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* PROGRESS */
    .progress-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .progress-card-new {
        width: 100% !important;
        min-width: 0 !important;
    }

    #progressForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #progressForm input[type="text"],
    #progressForm button {
        width: 100% !important;
    }

    /* PROFILE */
    .profile-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 20px !important;
    }

    .profile-left,
    .profile-right {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* CHAT */
    .chat-window {
        width: 100% !important;
        min-width: 0 !important;
    }

    .chat-input-box {
        width: 100% !important;
        display: flex !important;
    }

    .chat-input-box input {
        min-width: 0 !important;
        flex: 1 !important;
    }

    /* MODALS */
    .modal-content {
        width: calc(100% - 30px) !important;
        max-width: 500px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
}


/* EXTRA SMALL MOBILE */

@media screen and (max-width: 400px) {

    .dashboard-content {
        padding: 10px !important;
    }

    .dashboard-cards,
    .quick-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-card1 {
        padding: 15px !important;
    }

    .top-header h2 {
        font-size: 20px !important;
    }

    .sidebar button {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* =====================================================
   STUDENT DASHBOARD - MOBILE HEADER / SIDEBAR FIX
   Paste at the VERY END of style.css
===================================================== */

@media screen and (max-width: 768px) {

    /* ================= GLOBAL ================= */

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }


    /* ================= MAIN LAYOUT ================= */

    .dashboard-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }


    /* =====================================================
       SIDEBAR
    ===================================================== */

    .sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        overflow: hidden !important;
    }


    /* =====================================================
       LOGO - WILL NOT SCROLL
    ===================================================== */

    .sidebar-logo {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        padding: 16px 16px 12px 16px !important;
        margin: 0 !important;

        white-space: nowrap !important;

        overflow: hidden !important;
    }


    .sidebar-logo img {
        width: 28px !important;
        height: 28px !important;

        object-fit: contain !important;

        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }


    .sidebar-logo h2 {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 18px !important;

        white-space: nowrap !important;

        flex: 0 0 auto !important;
    }


    /* =====================================================
       STUDENT NAVIGATION
       
       HTML ME BUTTONS DIRECTLY .sidebar KE ANDAR HAIN,
       ISLIYE LOGO KO EXCLUDE KARKE BUTTONS KO SCROLLABLE
       BANAYA GAYA HAI.
    ===================================================== */

    .sidebar button {
        width: auto !important;
        min-width: max-content !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        margin: 0 4px !important;
        padding: 10px 14px !important;

        font-size: 13px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;

        border-radius: 10px !important;
    }


    /*
       IMPORTANT:
       Sidebar buttons ko horizontal row me dikhane ke liye
       mobile par CSS Grid use kar rahe hain.
    */

    .sidebar {
        display: grid !important;

        grid-template-columns: max-content repeat(11, max-content) !important;

        grid-template-rows: auto auto !important;

        align-items: center !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        padding-bottom: 10px !important;

        scrollbar-width: none !important;
    }


    .sidebar::-webkit-scrollbar {
        display: none !important;
    }


    /*
       LOGO PURI FIRST ROW ME RAHEGA
    */

    .sidebar-logo {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        position: sticky !important;
        left: 0 !important;

        z-index: 20 !important;

        width: 100vw !important;
    }


    /*
       BUTTONS SECOND ROW ME HORIZONTAL SCROLL HONGE
    */

    .sidebar button {
        grid-row: 2 !important;
    }


    /*
       First button
    */

    .sidebar button:nth-of-type(1) {
        grid-column: 1 !important;
        margin-left: 12px !important;
    }


    /* Dashboard */

    .sidebar button:nth-of-type(2) {
        grid-column: 2 !important;
    }


    /* Study */

    .sidebar button:nth-of-type(3) {
        grid-column: 3 !important;
    }


    /* Summarize */

    .sidebar button:nth-of-type(4) {
        grid-column: 4 !important;
    }


    /* AI Chat */

    .sidebar button:nth-of-type(5) {
        grid-column: 5 !important;
    }


    /* Assignments */

    .sidebar button:nth-of-type(6) {
        grid-column: 6 !important;
    }


    /* Notes */

    .sidebar button:nth-of-type(7) {
        grid-column: 7 !important;
    }


    /* Syllabus */

    .sidebar button:nth-of-type(8) {
        grid-column: 8 !important;
    }


    /* Goals */

    .sidebar button:nth-of-type(9) {
        grid-column: 9 !important;
    }


    /* Progress */

    .sidebar button:nth-of-type(10) {
        grid-column: 10 !important;
    }


    /* Remarks */

    .sidebar button:nth-of-type(11) {
        grid-column: 11 !important;
        margin-right: 12px !important;
    }


    /* Profile */

    .sidebar button:nth-of-type(12) {
        grid-column: 12 !important;
        margin-right: 12px !important;
    }


    /* =====================================================
       MAIN CONTENT
    ===================================================== */

    .dashboard-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding: 15px !important;

        overflow: hidden !important;
    }


    /* ================= TOP HEADER ================= */

    .top-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 15px !important;
    }


    .top-header > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
    }


    .top-header h2 {
        font-size: 22px !important;
    }


    .top-header p {
        font-size: 14px !important;
    }


    .header-right {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        gap: 10px !important;
    }


    #dashboardSearch,
    .header-right input {
        flex: 1 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    .profile-avatar {
        width: 40px !important;
        height: 40px !important;

        flex: 0 0 auto !important;
    }


    /* ================= DASHBOARD CARDS ================= */

    .dashboard-cards {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    .dashboard-card1 {
        width: 100% !important;
        min-width: 0 !important;

        padding: 15px !important;
    }


    /* ================= OVERVIEW ================= */

    .dashboard-overview,
    .dashboard-row {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 15px !important;
    }


    .overview-card,
    .dashboard-card {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* ================= QUICK ACTIONS ================= */

    .quick-grid {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    .quick-card {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* ================= OTHER GRIDS ================= */

    .assignment-grid,
    .notes-grid,
    .goal-grid,
    .learning-grid,
    .progress-stats {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 15px !important;
    }


    /* ================= PROFILE ================= */

    .profile-container {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }


    .profile-left,
    .profile-right {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* ================= MODALS ================= */

    .modal-content {
        width: calc(100% - 30px) !important;
        max-width: 500px !important;

        max-height: 85vh !important;

        overflow-y: auto !important;
    }


    /* ================= LONG TEXT FIX ================= */

    h1,
    h2,
    h3,
    h4,
    p,
    span,
    strong,
    small {
        max-width: 100% !important;

        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

}


/* =====================================================
   EXTRA SMALL DEVICES
===================================================== */

@media screen and (max-width: 480px) {

    .dashboard-content {
        padding: 12px !important;
    }


    .dashboard-cards,
    .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }


    .sidebar-logo {
        padding: 14px 14px 10px 14px !important;
    }


    .sidebar-logo h2 {
        font-size: 17px !important;
    }


    .sidebar button {
        padding: 9px 12px !important;
        font-size: 12px !important;
    }


    .top-header h2 {
        font-size: 20px !important;
    }

}

/* =====================================================
   STUDENT NOTIFICATION - MOBILE FIX
   Paste at END of style.css
===================================================== */

@media screen and (max-width: 768px) {

    /* Notification button wrapper */
    .notification-icon-wrapper {
        position: relative !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }


    /* Notification dropdown */
    .notification-dropdown {
        position: fixed !important;

        /* Header ke neeche */
        top: 265px !important;

        /* Mobile screen ke according */
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        /* Screen se bahar na jaye */
        max-height: 65vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 9999 !important;

        box-sizing: border-box !important;
    }


    /* Notification items */
    .notification-item {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: flex-start !important;

        gap: 10px !important;

        box-sizing: border-box !important;
    }


    /* Notification text area */
    .notification-item > div {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* Long notification text */
    .notification-item h4,
    .notification-item p,
    .notification-item span,
    .notification-item strong {
        width: 100% !important;
        max-width: 100% !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;

        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }


    /* Close button */
    .notification-dropdown .close-btn,
    .notification-dropdown .close-notification {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media screen and (max-width: 480px) {

    .notification-dropdown {
        left: 8px !important;
        right: 8px !important;

        top: 265px !important;

        max-height: 60vh !important;
    }

    .notification-item {
        padding: 12px 10px !important;
    }

}


/* ============================= */
/* Instagram Style Profile Menu  */
/* ============================= */

.profile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.profile-menu-content {
    width: 340px;
    max-width: 90%;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    animation: popupScale 0.25s ease;
}

.profile-menu-content button {
    width: 100%;
    border: none;
    background: white;
    padding: 18px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.25s;
    border-bottom: 1px solid #ececec;
}

.profile-menu-content button:last-child {
    border-bottom: none;
}

.profile-menu-content button:hover {
    background: #f6f6f6;
}

.profile-menu-content button:first-child {
    color: #1877f2;
    font-weight: 600;
}

#removePhotoBtn {
    color: #e53935;
    font-weight: 600;
}

.profile-menu-content button:last-child {
    font-weight: 600;
}

/* ============================= */
/* Animations                    */
/* ============================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes popupScale {
    from {
        transform: scale(.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.avatar-label { 
  display: inline-block; 
  cursor: pointer; 
  position: relative; 
  text-align: center; 
} 
.avatar-img, #profilePicPreview { 
  width: 120px; /* Set width */ 
  height: 120px; /* Set height */ 
  object-fit: cover; /* Crop/scale to fill */ 
  border-radius: 50%; /* Make it circular */ 
  border: 2px solid #ddd; /* Optional border */ 
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Optional subtle shadow */ 
  cursor: pointer; /* Show pointer on hover */ 
  transition: 0.3s ease;
}

.avatar-img:hover, #profilePicPreview:hover { 
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Slightly stronger shadow on hover */ 
} 
.avatar-label input[type="file"] { 
  display: none; 
} 
.avatar-label span { 
  display: block; 
  font-size: 0.8rem; 
  margin-top: 0.5rem; 
  color: #393a39; 
  background-color: #68b4ff; 
  border-radius: 5px; 
}


.form-group {
  margin-bottom: 15px;
}

.profile-picture-section { 
  text-align: center; 
  margin-bottom: 1rem; 
}

.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

button#saveChangesBtn {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button#saveChangesBtn:hover {
  background-color: #45a049;
}

.message-area {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #e74c3c;
}

.validation-message {
  font-size: 0.85em;
  color: red;
  margin-top: 5px;
}

.password-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.password-wrapper input {
  flex: 1;
}

.toggle-password {
  margin-left: -30px;
  cursor: pointer;
  color: #888;
}

.password-strength {
  font-size: 0.9rem;
  margin-top: 4px;
  color: #555;
}
.weak {
  color: red;
}
.medium {
  color: orange;
}
.strong {
  color: green;
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #323232;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  opacity: 0.9;
  z-index: 1000;
  transition: opacity 0.3s ease;
}
.toast.success {
  background-color: #28a745;
}
.toast.error {
  background-color: #dc3545;
}
.toast.hidden {
  display: none;
}




.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: #2a9d8f;
  padding: 10px 20px;
  gap: 10px;
}

/* Button container styles */
.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1; /* take remaining space */
}

.nav-buttons button {
  background-color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.nav-buttons button:hover {
  background-color: #ddd;
}

.notification-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

#lang-btn,
#notificationBtn {
  background-color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 50%;
  font-weight: bold;
}

.notification-icon-wrapper {
  position: relative;
  display: inline-block;
}

/* #notificationBtn {
  position: relative;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
} */

/* .notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 50%;
  z-index: 10;
} */


/* Dropdown & notification list styling remains same */
/* Notification Dropdown Styling */
.notification-dropdown {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 320px;
  max-height: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  padding: 16px;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
}

.notification-dropdown.hidden {
  display: none;
}

.notification-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-dropdown li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  color: #333;
}

.notification-dropdown li:last-child {
  border-bottom: none;
}

.notification-dropdown small {
  color: #888;
  font-size: 12px;
}

.notification-dropdown p {
  text-align: center;
  font-style: italic;
  color: #999;
  margin-top: 10px;
}

.notification-dropdown button {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.notification-dropdown button:hover {
  background-color: #0056b3;
}

.notification-dropdown .close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}

.notification-dropdown .close-btn:hover {
  color: #333;
}


.hidden {
  display: none !important;
}

/* 📱 Responsive Layout */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .notification-container {
    align-self: flex-end;
    margin-top: 10px;
  }

  .nav-buttons {
    justify-content: center;
  }

  .nav-buttons button {
    width: 100%;
  }
}


  
/* 🔔 Notification bell on top right */
    /* .notification-icon {
      position: relative;
      cursor: pointer;
      font-size: 1.2rem;
    }
    .notification-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: red;
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 50%;
    }
    .notification-dropdown {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 10px;
      width: 300px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      position: absolute;
      right: 0;
      z-index: 1000;
    }
    .notification-dropdown ul {
      list-style: none;
      padding-left: 0;
      max-height: 300px;
      overflow-y: auto;
    }
    .notification-dropdown li {
      padding: 10px;
      border-bottom: 1px solid #eee;
      font-size: 0.95rem;
    }
    .notification-dropdown small {
      color: gray;
      font-size: 0.8rem;
    } */
    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #323232;
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 0.9rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s ease;
      z-index: 9999;
    }
    .toast.show {
      opacity: 1;
      transform: translateY(-10px);
    }
    .toast.success {
      background-color: #28a745;
    }
    .toast.error {
      background-color: #dc3545;
    }

/* Container */
.container {
    max-width: 800px;
    margin: 30px auto;
    padding: 2rem;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Sections */
.intro {
    margin-bottom: 20px;
}

.chat-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Input Field */
.chat-section input {
    width: 95%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

/* Button */
.chat-section button {
    align-self: flex-end;
    padding: 10px 20px;
    background-color: #2a9d8f;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.chat-section button:hover {
    background-color: #21867a;
}

/* Response Area */
.response-area {
    margin-top: 30px;
    background-color: #eef6f7;
    padding: 15px;
    border-radius: 10px;
    border-left: 5px solid #2a9d8f;
}

#aiResponse {
    white-space: pre-line;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Quiz container */
.quiz-section {
    padding: 20px;
    background-color: #f9fafb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    margin: auto;
}

/* Each question block */
.quiz-question {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* Question text */
.quiz-question p:first-child {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Option label */
.option-label {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 5px;
    transition: background-color 0.3s;
}

/* Highlight correct/incorrect in JS */
.option-label input[type="radio"] {
    margin-right: 8px;
}

/* Feedback text */
.feedback {
    font-size: 0.95rem;
    margin-top: 8px;
    font-weight: 500;
}

/* Buttons */
#regenerate-quiz-btn,
#check-answers-btn {
    padding: 10px 16px;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    background-color: #4299e1;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

#regenerate-quiz-btn:hover,
#check-answers-btn:hover {
    background-color: #2b6cb0;
}

  

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #4caf50;
}
input:checked + .slider:before {
    transform: translateX(26px);
}

/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Layout */
@media (max-width: 600px) {
    .container {
        margin: 15px;
        padding: 15px;
    }

    .chat-section button {
        width: 100%;
        align-self: stretch;
    }

    .controls {
        flex-direction: column;
        align-items: flex-end;
        right: 10px;
        top: 10px;
    }
}

.hidden {
    display: none;
}

  
  .hidden {
    display: none;
  }


/* Reuse fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


/* Summarize Section Styles */
.summarize-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.summarize-section h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #333;
}

.summarize-section textarea {
    width: 95%;
    height: 120px;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    resize: vertical;
    margin-bottom: 20px;
    background-color: #fff;
    color: #333;
}

.summarize-section button {
    padding: 10px 20px;
    background-color: #2a9d8f;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.summarize-section button:hover {
    background-color: #21867a;
}

#summaryArea {
    margin-top: 20px;
    padding: 15px;
    background-color: #eef6f7;
    border-radius: 8px;
    border-left: 5px solid #2a9d8f;
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    white-space: pre-line;
}

/* Chatbox Section Styling */
.chatbox-section {
    margin-top: 40px;
    padding: 20px;
    background-color: #f4f6f8;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s ease;
}

.chatbox-section h3 {
    margin-bottom: 15px;
    font-size: 20px;
    color: #2a9d8f;
}

.chatbox-section input {
    width: 95%;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
}

.chatbox-section button {
    padding: 10px 18px;
    background-color: #2a9d8f;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.chatbox-section button:hover {
    background-color: #21867a;
}

#chatOutput {
    margin-top: 15px;
    padding: 12px;
    background-color: #eef6f7;
    border-left: 4px solid #2a9d8f;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    white-space: pre-wrap;
}

/* Optional dark mode support */
body.dark-mode .chatbox-section {
    background-color: #1e1e2f;
}

body.dark-mode #chatOutput {
    background-color: #2e2e3e;
    color: #ddd;
}



/* Utility to hide sections */
.hidden {
  display: none !important;
}

/* Progress Section Container */
.progress-section1 {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  max-width: 600px;
  margin: 2rem auto;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Support */
body.dark-mode .progress-section1 {
  background-color: #1e293b;
  color: #f8fafc;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
}

/* Progress Form Styling */
#progressForm {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

#progressForm input[type="text"] {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
}

body.dark-mode #progressForm input[type="text"] {
  background-color: #334155;
  border-color: #475569;
  color: #f1f5f9;
}

#progressForm label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

#progressForm button {
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#progressForm button:hover {
  background-color: #2563eb;
}

/* Progress Summary */
.progress-summary {
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

/* Progress Bar Container */
.progress-container {
  background-color: #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  height: 16px;
  margin-bottom: 1rem;
}

body.dark-mode .progress-container {
  background-color: #475569;
}

/* Animated Progress Bar */
.progress-bar {
  height: 100%;
  background-color: #22c55e;
  width: 0%;
  transition: width 0.5s ease-in-out;
}

/* Progress List */
#progress-list {
  list-style: none;
  padding: 0;
}

#progress-list li {
  background-color: #f1f5f9;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.dark-mode #progress-list li {
  background-color: #334155;
  color: #f8fafc;
}

#progress-list button {
  background-color: transparent;
  color: #ef4444;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}



.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-buttons button {
  margin: 10px 5px;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.modal-buttons button:first-child {
  background-color: #28a745;
  color: white;
}

.modal-buttons button:last-child {
  background-color: #dc3545;
  color: white;
}


  
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 12px 18px;
    border-radius: 6px;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    opacity: 0.95;
    transition: all 0.3s ease-in-out;
}

.toast-success {
    background-color: #28a745;
}

.toast-error {
    background-color: #dc3545;
}






/* Login Page Styles */

   /* Global styles */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body.login-page {
    background-color: #f4f7fc;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #333;
}

.auth-container {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.login-button {
  display: inline-block;
  margin: 5px 0;
  padding: 8px 16px;
  text-decoration: none;
  color: black;
  background-color: white;
  border: none;
  border-radius: 5px;
  text-align: center;
}

.btn-secondary {
  background-color: #007BFF;
  color: white;
  padding: 7px;
  border-radius: 5px
}

.btn-outline-secondary {
  background-color: transparent;
  border: 1px solid #007BFF;
  color: #007BFF;
  padding: 7px;
  border-radius: 5px;
}

.btn:hover {
  opacity: 0.85;
}


h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #2c3e50;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    background-color: #f9f9f9;
    transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: #007BFF;
    outline: none;
}

.click {
    padding: 12px 20px;
    font-size: 16px;
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

p {
    padding-top:10px;
    font-size: 14px;
    color: #777;
}

a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

/* Responsive styling */
@media (max-width: 480px) {
    .auth-container {
        padding: 20px;
        width: 90%;
    }

    h2 {
        font-size: 20px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"] {
        font-size: 14px;
    }

    button {
        font-size: 14px;
    }
}


.forgot-link{
    color:#2563eb;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
}

.forgot-link:hover{
    text-decoration:underline;
}


.flashes {
  list-style-type: none;
  padding: 0;
  margin-bottom: 15px;
}

.flashes li.error {
  color: red;
}


/* style.css */

body.signup-page {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f9fafb;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}



.child-report {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
}
.child-report h4 {
  margin-bottom: 10px;
}
.child-report ul {
  list-style: none;
  padding-left: 0;
}
.child-report li {
  margin-bottom: 5px;
}


.goal-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.goal-list li {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
  position: relative;
}

.goal-list p {
  margin: 5px 0;
}

.progress-wrapper {
  margin: 10px 0;
}

.progress-bar {
  background-color: #2a9d8f;
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  width: fit-content;
}



.syllabus-section {
  margin-top: 30px;
  background: #f4f6ff;
  padding: 20px;
  border-radius: 10px;
}

.subject-card {
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.subject-card h3 {
  margin-bottom: 10px;
  color: #2c3e50;
}

.chapter-list {
  list-style: none;
  padding-left: 15px;
}

.chapter-list li {
  margin-bottom: 5px;
  padding: 5px;
  background: #e8f0fe;
  border-radius: 5px;
}


#syllabus {
  display: none;
}

.feature-section:not(.hidden) {
  display: block !important;
}

.feature-section.hidden {
  display: none !important;
}

.pdf-btn {
  margin-left: 10px;
  background-color: #4CAF50;
  color: white;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 4px;
  text-decoration: none;
}
.pdf-btn:hover {
  background-color: #388e3c;
}


.button-group {
  margin-bottom: 15px;
}
.subject-btn {
  background-color: #4f46e5;
  color: white;
  border: none;
  padding: 10px 14px;
  margin: 5px 8px 10px 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}
.subject-btn:hover {
  background-color: #4338ca;
}
.subject-block {
  margin-bottom: 20px;
}
.hidden {
  display: none;
}


/* styles.css */

/* Reset some default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Center the container on the page */
.choose-class {
  background: linear-gradient(135deg, #e3f2fd, #fce4ec);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main form container */
.container-c {
  background-color: white;
  padding: 30px 40px;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

/* Heading */
.container-c h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #333;
}

/* Form labels */
label {
  display: block;
  margin-bottom: 15px;
  color: #333;
  font-weight: 500;
}

/* Select boxes */
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 5px;
  font-size: 16px;
  transition: border 0.3s ease;
}

select:focus {
  border-color: #2196f3;
  outline: none;
}

/* Submit button */
button[type="submit"] {
  width: 100%;
  background-color: #2196f3;
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  margin-top: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #1976d2;
}


/* 🔘 Language Dropdown like Notifications */
.navbar-item.dropdown {
  position: relative;
  display: inline-block;
  margin-right: -5px;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #151515;
}

.dropdown-menu {
  position: absolute;
  top: 150%;
  right: 0;
  background: #dddddd;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 130px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.dropdown-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
  width: 100%;
  color: #000;
}

.dropdown-menu button:hover {
  background: #f5f5f5;
}

.hidden {
  display: none;
}


/* syllabus css */



.subject-button {
  background-color: #007bff;
  color: white;
  padding: 8px 16px;
  margin: 5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.subject-button:hover {
  background-color: #0056b3;
}






/* new code assignment, notes, remark */

/* === Styled Section: My Assignments / Notes / Remarks === */
#assignments, #notes, #remarks {
  display: none;
  padding: 20px;
  animation: fadeIn 0.4s ease-in-out;
}

.assignment-card, .notes-card, .remark-card {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.assignment-card:hover,
.notes-card:hover,
.remark-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.assignment-title,
.notes-title,
.remark-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10px;
}

.assignment-details,
.notes-content,
.remark-content {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

/* Optional status or label tag */
.assignment-status,
.notes-type,
.remark-label {
  display: inline-block;
  padding: 5px 12px;
  background-color: #e6f0ff;
  color: #3366cc;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 10px;
}


/* 🎨 Remarks Section */
.remarks-card {
  background: var(--card-bg, #fff);
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 700px;
  transition: all 0.3s ease-in-out;
}

.remarks-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.remarks-card .card-header h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
  border-left: 5px solid #007bff;
  padding-left: 10px;
}

.remarks-card .card-body {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

.remarks-card .loading-text {
  color: #999;
  font-style: italic;
}



/* notes css */
/* 📂 Notes & Resources Section */
.notes-card {
  background: var(--card-bg, #fff);
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 800px;
  transition: all 0.3s ease;
}

.notes-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.notes-card .card-header h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
  border-left: 5px solid #6c63ff;
  padding-left: 10px;
}

.notes-card .card-body {
  font-size: 1rem;
  color: #555;
}

.notes-card .loading-text {
  color: #999;
  font-style: italic;
}

/* Optional Note Entry Styling */
.note-entry {
  background-color: #f4f8ff;
  border-left: 4px solid #2196f3;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
}

.note-entry a {
  color: #1a73e8;
  font-weight: 500;
  text-decoration: none;
}

.note-entry a:hover {
  text-decoration: underline;
}