/* ======================================
   Teacher Dashboard
====================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{

    background:#f4f7fb;
    color:#333;
    padding:25px;

}

.container{

    max-width:1400px;
    margin:auto;

}

header{

    background:linear-gradient(135deg,#1565c0,#42a5f5);
    color:white;
    padding:25px;
    border-radius:15px;
    margin-bottom:25px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

header h1{

    font-size:32px;

}

header p{

    margin-top:8px;
    opacity:.9;

}

/* =============================
Summary Cards
============================= */

#summaryCards{

    display:grid;

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

    gap:18px;

}

.card{

    background:white;

    border-radius:12px;

    padding:20px;

    text-align:center;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

    border-left:6px solid #1565c0;

}

.card:hover{

    transform:translateY(-6px);

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

}

.card h3{

    color:#666;

    margin-bottom:12px;

    font-size:17px;

}

.card h2{

    color:#1565c0;

    font-size:30px;

}

/* =============================
Quick Actions
============================= */

.actions{

    display:grid;

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

    gap:15px;

}

.actions button{

    border:none;

    padding:18px;

    border-radius:10px;

    color:white;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

    transition:.3s;

}

.actions button:hover{

    transform:scale(1.03);

}

/* Button Colors */

#qrScannerBtn{

    background:#00897b;

}

#studentsBtn{

    background:#1565c0;

}

#attendanceBtn{

    background:#43a047;

}

#paymentsBtn{

    background:#fb8c00;

}

#lessonsBtn{

    background:#8e24aa;

}

#reportsBtn{

    background:#3949ab;

}

#settingsBtn{

    background:#546e7a;

}

#refreshBtn{

    background:#e53935;

}

/* =============================
Sections
============================= */

section{

    margin-top:25px;

}

section h2{

    margin-bottom:15px;

    color:#1565c0;

}

/* =============================
Tables
============================= */

.table-container{

    overflow-x:auto;

}

table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

thead{

    background:#1565c0;

    color:white;

}

th{

    padding:14px;

}

td{

    padding:12px;

    border-bottom:1px solid #eee;

    text-align:center;

}

tbody tr:nth-child(even){

    background:#fafafa;

}

tbody tr:hover{

    background:#e3f2fd;

}

/* =============================
Outstanding Button
============================= */

.pay-btn{

    padding:8px 14px;

    border:none;

    border-radius:6px;

    background:#43a047;

    color:white;

    cursor:pointer;

    transition:.3s;

}

.pay-btn:hover{

    background:#2e7d32;

}

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

#recentActivity{

    background:white;

    border-radius:10px;

    padding:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.activity-item{

    padding:12px;

    border-bottom:1px solid #eee;

}

.activity-item:last-child{

    border-bottom:none;

}

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

@media(max-width:992px){

    #summaryCards{

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

    }

}

@media(max-width:768px){

    body{

        padding:12px;

    }

    header{

        text-align:center;

    }

    #summaryCards{

        grid-template-columns:1fr;

    }

    .actions{

        grid-template-columns:1fr;

    }

    table{

        font-size:13px;

    }

}

@media(max-width:480px){

    header h1{

        font-size:24px;

    }

    .card h2{

        font-size:24px;

    }

}

/* =============================
Print
============================= */

@media print{

    body{

        background:white;

    }

    .actions{

        display:none;

    }

    header{

        box-shadow:none;

    }

    table{

        box-shadow:none;

    }

}

#changePasswordBtn{
    background:#7c3aed;
}

.password-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,23,42,.62);
}

.password-modal[hidden]{
    display:none;
}

.password-modal-content{
    width:100%;
    max-width:480px;
    padding:26px;
    border-radius:12px;
    background:#fff;
    box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.password-modal-content h2{
    margin-bottom:20px;
    color:#1565c0;
}

#changePasswordForm{
    display:grid;
    gap:10px;
}

#changePasswordForm label{
    margin-top:6px;
    font-weight:700;
}

#changePasswordForm input{
    width:100%;
    padding:12px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    font-size:15px;
}

#changePasswordMessage{
    padding:10px;
    border-radius:7px;
    background:#fee2e2;
    color:#b91c1c;
}

#changePasswordMessage.success{
    background:#dcfce7;
    color:#166534;
}

.password-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:12px;
}

.password-modal-actions button{
    padding:10px 16px;
    border:0;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
}

#cancelPasswordBtn{
    background:#e2e8f0;
    color:#334155;
}

#savePasswordBtn{
    background:#1565c0;
    color:#fff;
}

#savePasswordBtn:disabled{
    cursor:wait;
    opacity:.65;
}

.online-class-management{
    padding:24px;
    border:1px solid #bfdbfe;
    border-radius:14px;
    background:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.online-class-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}

.online-class-heading h2{ margin-bottom:6px; }
.online-class-heading p,.online-class-form small{ color:#64748b; }
.online-class-record-status{ padding:7px 11px; border-radius:999px; color:#475569; background:#f1f5f9; font-size:13px; font-weight:700; white-space:nowrap; }
.online-class-record-status.active{ color:#166534; background:#dcfce7; }
.online-class-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.online-class-form label{ display:grid; gap:7px; font-weight:700; }
.online-class-form input,.online-class-form select,.online-class-form textarea{ width:100%; padding:12px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; font:inherit; }
.online-class-form input:focus,.online-class-form select:focus,.online-class-form textarea:focus{ border-color:#2563eb; outline:3px solid rgba(37,99,235,.12); }
.online-class-form textarea{ resize:vertical; }
.online-class-wide{ grid-column:1/-1; }
.online-class-status{ grid-column:1/-1; display:flex!important; grid-template-columns:auto 1fr; align-items:center; padding:13px; border:1px solid #bbf7d0; border-radius:9px; background:#f0fdf4; }
.online-class-status input{ width:auto; accent-color:#16a34a; }
.online-class-actions{ grid-column:1/-1; display:flex; align-items:center; gap:16px; }
.online-class-actions button{ padding:12px 18px; border:0; border-radius:8px; color:#fff; background:#1565c0; cursor:pointer; font-weight:700; }
.online-class-actions button:disabled{ cursor:wait; opacity:.65; }
.online-class-actions .disable-online-class{ background:#b91c1c; }
.online-class-actions .remove-online-class{ background:#475569; }
#onlineClassMessage{ color:#b91c1c; font-weight:700; }
#onlineClassMessage.success{ color:#15803d; }

.announcement-management{padding:24px;border:1px solid #ddd6fe;border-radius:14px;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.08)}
.announcement-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.announcement-heading h2{margin-bottom:6px}.announcement-heading p,.announcement-form small{color:#64748b}.announcement-heading button{min-height:44px;padding:11px 16px;border:0;border-radius:8px;color:#fff;background:#7c3aed;cursor:pointer;font-weight:700}
.announcement-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;padding:18px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.announcement-form label{display:grid;gap:7px;min-width:0;font-weight:700}.announcement-form input,.announcement-form select,.announcement-form textarea{width:100%;min-width:0;padding:12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:inherit}.announcement-form input:focus,.announcement-form select:focus,.announcement-form textarea:focus{border-color:#7c3aed;outline:3px solid rgba(124,58,237,.12)}.announcement-form textarea{resize:vertical}.announcement-wide{grid-column:1/-1}.announcement-active{grid-column:1/-1;display:flex!important;grid-template-columns:auto 1fr;align-items:center;padding:13px;border:1px solid #bbf7d0;border-radius:9px;background:#f0fdf4}.announcement-active input{width:auto;accent-color:#16a34a}
.announcement-form-actions{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.announcement-form-actions button{min-height:44px;padding:11px 17px;border:0;border-radius:8px;color:#fff;background:#7c3aed;cursor:pointer;font-weight:700}.announcement-form-actions #cancelAnnouncementEditBtn{color:#334155;background:#e2e8f0}.announcement-form-actions button:disabled{cursor:wait;opacity:.65}#announcementMessageStatus{margin:0;color:#b91c1c;font-weight:700}#announcementMessageStatus.success{color:#15803d}
.announcement-list{display:grid;gap:12px;margin-top:18px}.announcement-record{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:16px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.announcement-record h3{margin:0 0 6px;color:#1e3a8a}.announcement-record p{margin:0 0 9px;color:#475569;line-height:1.55;overflow-wrap:anywhere}.announcement-record-meta{display:flex;flex-wrap:wrap;gap:7px;color:#64748b;font-size:13px}.announcement-record-meta span{padding:4px 8px;border-radius:999px;background:#f1f5f9}.announcement-record-meta .active{color:#166534;background:#dcfce7}.announcement-record-meta .inactive{color:#92400e;background:#fef3c7}.announcement-record-actions{display:flex;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end;gap:7px}.announcement-record-actions button{min-height:40px;padding:9px 11px;border:0;border-radius:8px;color:#fff;background:#2563eb;cursor:pointer;font-weight:700}.announcement-record-actions .toggle-announcement{background:#d97706}.announcement-record-actions .delete-announcement{background:#b91c1c}.announcement-empty{padding:24px;border:1px dashed #cbd5e1;border-radius:10px;color:#64748b;text-align:center}

@media(max-width:700px){
    .online-class-heading,.online-class-actions{ align-items:stretch; flex-direction:column; }
    .online-class-record-status{ width:max-content; white-space:normal; }
    .online-class-form{ grid-template-columns:1fr; }
    .online-class-wide,.online-class-status,.online-class-actions{ grid-column:auto; }
    .online-class-actions button{ width:100%; }
    .announcement-heading,.announcement-form-actions{align-items:stretch;flex-direction:column}.announcement-heading button,.announcement-form-actions button{width:100%}.announcement-form{grid-template-columns:1fr}.announcement-wide,.announcement-active,.announcement-form-actions{grid-column:auto}.announcement-record{grid-template-columns:1fr}.announcement-record-actions{justify-content:flex-start}.announcement-record-actions button{flex:1 1 110px}
}