/* =========================================================
   BARIKAB EDUCATIONAL CENTER
   Main CSS File
   هره برخه په جلا Section کې ده
   ========================================================= */


/* =========================================================
   1. GENERAL / RESET
   ========================================================= */

* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    margin: 0;
    background: #D6E8F9;
    color: #222;
}


/* =========================================================
   2. HEADER
   ========================================================= */

header {
    background: #123b2a;
    color: white;
    padding: 25px;
    text-align: center;
}

header h1 {
    margin: 0 0 8px;
    font-size: 28px;
}

header p {
    margin: 0;
    font-size: 16px;
}


/* =========================================================
   3. TOP BAR / LANGUAGE
   ========================================================= */

.top-bar {
    display: flex;
    justify-content: flex-end;
    padding: 15px;
    background: white;
}

.language-btn {
    background: #176b49;
    color: white;
}


/* =========================================================
   4. MAIN CONTAINER
   ========================================================= */

.container {
    max-width: 1100px;
    margin: auto;
    padding: 25px;
}


/* =========================================================
   5. DASHBOARD WELCOME
   ========================================================= */

.welcome {
    background: white;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}


/* =========================================================
   6. DASHBOARD CARDS
   ========================================================= */

.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

.card h3 {
    margin-top: 0;
    color: #176b49;
}

.card .number {
    font-size: 30px;
    font-weight: bold;
}

#becLogoutButton{
    background-color: darkred;
    color: white;
}

/* =========================================================
   7. MAIN MENU BUTTONS
   ========================================================= */

.menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.menu button {
    background: #176b49;
    color: white;
    min-height: 70px;
}

.menu button:hover {
    background: #123b2a;
}


/* =========================================================
   8. COMMON SECTION
   ========================================================= */

.section {
    background: white;
    padding: 25px;
    border-radius: 15px;
    margin-top: 25px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}


/* =========================================================
   9. FORMS
   ========================================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 7px;
    font-weight: bold;
}

input,
select {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
}


/* =========================================================
   10. CHECKBOX
   ========================================================= */

.checkbox-row {
    margin-top: 15px;
}


/* =========================================================
   11. SAVE BUTTON
   ========================================================= */

.save-btn {
    margin-top: 20px;
    background: #176b49;
    color: white;
    width: 100%;
}


/* =========================================================
   12. BACK BUTTON
   ========================================================= */

.back-btn {
    background: #555;
    color: white;
    margin-bottom: 20px;
}


/* =========================================================
   13. MESSAGE BOX
   ========================================================= */

.message {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    display: none;
}


/* =========================================================
   14. SEARCH BOX
   ========================================================= */

.search-box {
    width: 100%;
    margin-top: 5px;
}


/* =========================================================
   15. TABLE
   ========================================================= */

.table-wrap {
    overflow-x: auto;
}

.students-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    color:black;
}

.students-table th,
.students-table td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
}

.students-table th {
    background: #123b2a;
    color: white;
}


/* =========================================================
   16. ACTION BUTTONS
   ========================================================= */

.action-btn {
    padding: 7px 12px;
    margin: 2px;
    color: white;
    background: #176b49;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.action-btn:hover {
    background: #123b2a;
}

.edit-btn {
    background: #176b49;
    color: white;
}

.edit-btn:hover {
    background: #123b2a;
}

.delete-btn {
    background: #b3261e;
}


/* =========================================================
   17. FOOTER
   ========================================================= */

footer {
    margin-top: 40px;
    background: #123b2a;
    color: white;
    text-align: center;
    padding: 20px;
}


/* =========================================================
   18. TABLET RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .cards,
    .menu {
        grid-template-columns: repeat(2, 1fr);
    }

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


/* =========================================================
   19. MOBILE RESPONSIVE
   ========================================================= */

@media (max-width: 500px) {

    .cards,
    .menu {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 15px;
    }

    header h1 {
        font-size: 22px;
    }
}


/* =========================================================
   20. FEE MANAGEMENT ENHANCEMENTS
   ========================================================= */

#feeSection h2 {
    margin-top: 10px;
    color: #123b2a;
}

#feeSection .form-group input[readonly] {
    background: #eef6f1;
    font-weight: bold;
}

#feeSection .save-btn {
    font-size: 17px;
    font-weight: bold;
    border-radius: 9px;
}

#feeSection .students-table th,
#feeSection .students-table td {
    white-space: nowrap;
}

#feeSection .message {
    font-weight: bold;
}

@media (max-width: 600px) {
    #feeSection {
        padding: 15px;
    }

    #feeSection .students-table th,
    #feeSection .students-table td {
        padding: 8px;
        font-size: 13px;
    }

    #feeSection .save-btn {
        min-height: 48px;
    }
}

/* Student photos and tidy, alphabetically ordered student list */
.photo-upload-group { align-items: flex-start; }
.student-photo-preview-wrap { width: 92px; height: 92px; margin: 4px 0 10px; position: relative; }
.student-photo-preview, .student-list-photo, .student-list-photo-fallback, .student-photo-placeholder {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 12%;
    border: 2px solid #d7e4dc;
}
.student-photo-preview { display: none; }
.student-photo-placeholder, .student-list-photo-fallback {
    display: flex; align-items: center; justify-content: center;
    background: #edf4ef; color: #176b49; font-size: 30px;
}
.photo-upload-group small { color: #666; margin-top: 5px; }
#studentSection .table-wrap { border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); background: white; }
#studentSection .students-table { margin-top: 12px; min-width: 760px; }
#studentSection .students-table th { position: sticky; top: 0; z-index: 1; }
#studentSection .students-table tbody tr:nth-child(even) { background: #f7faf8; }
#studentSection .students-table tbody tr:hover { background: #eaf4ed; }
#studentSection .students-table td { vertical-align: middle; }
.student-photo-cell { width: 76px; }
.student-list-photo, .student-list-photo-fallback { display: inline-flex; width: 48px; height: 48px; vertical-align: middle; }
.student-list-photo-fallback { font-size: 22px; }
.student-status { display: inline-block; border-radius: 20px; padding: 5px 10px; font-size: 13px; white-space: nowrap; }
.student-status.is-active { background: #e0f4e7; color: #176b49; }
.student-status.is-inactive { background: #fbe8e8; color: #a12a2a; }
@media (max-width: 650px) {
    #studentSection .form-grid { grid-template-columns: 1fr; }
    #studentSection .students-table th, #studentSection .students-table td { padding: 8px; }
}


/* Backup and restore panel */
.backup-panel { margin: 22px 0; padding: 18px; border: 1px solid #d6e2e8; border-radius: 12px; background: #f8fbfc; }
.backup-panel h3 { margin-top: 0; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.backup-panel small { display: block; line-height: 1.8; color: #555; }
#backupStatus { min-height: 1.4em; }


/* Dashboard graphics and active/inactive student cards */
.stat-active { border-top: 4px solid #16a36a; }
.stat-active h3 { color: #138653; }
.stat-inactive { border-top: 4px solid #ef5350; }
.stat-inactive h3 { color: #d94343; }
.card small { color: #738096; }
.dashboard-graphic {
    background: #fff; border-radius: 15px; padding: 22px; margin: 0 0 25px;
    box-shadow: 0 3px 12px rgba(0,0,0,.08); border: 1px solid #e6edf4;
}
.graphic-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.graphic-heading h3 { margin:0 0 18px; color:#18324f; }
.graphic-heading span { color:#738096; font-size:14px; margin-bottom:18px; }
.status-track { display:flex; width:100%; height:28px; overflow:hidden; border-radius:8px; background:#edf1f5; }
.status-bar-active { background:linear-gradient(90deg,#16a36a,#39c98a); transition:width .4s ease; }
.status-bar-inactive { background:linear-gradient(90deg,#f56b6b,#dc3545); transition:width .4s ease; }
.status-legend { display:flex; gap:28px; flex-wrap:wrap; margin-top:15px; color:#34445b; }
.legend-dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-left:6px; }
.active-dot { background:#16a36a; } .inactive-dot { background:#dc3545; }
@media (max-width: 800px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .menu { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px) { .cards { grid-template-columns:1fr; } .container { padding:14px; } }

/* ===== BEC modern graphic dashboard theme ===== */
:root{--navy:#102a49;--blue:#0875ee;--green:#18a765;--red:#fa4c55;--purple:#8050df;--orange:#ff9e24;--ink:#102b50;--muted:#7187a5;--line:#dce8f7}
body{background:#f3f8fe;color:var(--ink);font-family:Arial,"Noto Naskh Arabic",sans-serif}
header{background:linear-gradient(115deg,#0d2440,#183d65);padding:18px 26px;text-align:right;box-shadow:0 4px 18px #102b5014}
header h1{font-size:25px}header p{color:#d8e7fa}
.top-bar{padding:10px 24px;background:#fff;border-bottom:1px solid var(--line)}
.language-btn{background:var(--blue);border-radius:9px;padding:10px 18px}
.container{max-width:1600px;padding:24px}
#dashboard .welcome{background:transparent;box-shadow:none;padding:0 2px 16px;border:0}
#dashboard .welcome h2{font-size:27px;color:var(--ink);margin-bottom:5px}
#dashboard .welcome p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:12px 0 20px}
.card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px 22px;box-shadow:0 3px 12px #183c6410;position:relative;overflow:hidden;min-height:130px}
.card:before{content:"";position:absolute;right:0;top:0;width:5px;height:100%;background:var(--blue)}
.card.stat-active:before{background:var(--green)}.card.stat-inactive:before{background:var(--red)}
.card:nth-child(4):before{background:var(--purple)}.card:nth-child(5):before{background:var(--orange)}.card:nth-child(6):before{background:#12b9c7}
.card h3{font-size:15px;color:#516987;margin:0 0 15px}.card .number{font-size:32px;font-weight:800;color:var(--ink)}.card small{color:var(--muted)}
.dashboard-graphic,.backup-panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;box-shadow:0 3px 12px #183c6410;margin:18px 0}
.graphic-heading h3,.backup-panel h3{color:var(--ink);font-size:19px}.status-track{height:22px;background:#fbe7e8;border-radius:20px;overflow:hidden;display:flex;margin:22px 0 14px}.status-bar-active{background:linear-gradient(90deg,#15985a,#22c47b);height:100%;transition:width .4s}.status-bar-inactive{background:linear-gradient(90deg,#ff7378,#f63d49);height:100%;transition:width .4s}.status-legend{display:flex;gap:28px;flex-wrap:wrap;color:#536b8a}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:7px}.active-dot{background:var(--green)}.inactive-dot{background:var(--red)}
.backup-panel{background:linear-gradient(135deg,#fff,#f8fbff)}.backup-actions{display:flex;gap:12px;flex-wrap:wrap}.backup-actions button{border:0;border-radius:9px;padding:12px 18px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}.backup-actions button+button{background:var(--green)}
.menu{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}.menu button{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:17px 10px;font-weight:700;box-shadow:0 3px 12px #183c640b;cursor:pointer}.menu button:hover{background:#edf5ff;border-color:#9fc9ff;transform:translateY(-1px)}
section.section{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 3px 12px #183c640b;padding:22px;margin:18px 0}input,select,textarea{border:1px solid #d4e1f0!important;border-radius:8px!important;padding:10px!important}button{transition:.15s}table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}th{background:#eff5fc!important;color:#244366!important}td,th{padding:12px 10px;border-bottom:1px solid #edf2f8!important}tr:last-child td{border-bottom:0!important}
@media(min-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}#dashboard .welcome{display:block}}
@media(max-width:700px){.container{padding:12px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{padding:14px;min-height:112px}.card .number{font-size:26px}.menu{grid-template-columns:repeat(2,minmax(0,1fr))}header{padding:16px}.dashboard-graphic,.backup-panel{padding:15px}.status-legend{gap:12px}}


/* ===== BEC Graphic Dashboard theme ===== */
:root{--navy:#102b49;--navy2:#0b2038;--blue:#0878f9;--green:#17a765;--red:#ff4d55;--purple:#8750e8;--orange:#ff9f2e;--line:#dce8f7;--muted:#7087a6}
body{background:#f3f8fe;color:#102b49;font-family:Arial,"Noto Naskh Arabic",sans-serif}
header{background:linear-gradient(115deg,var(--navy2),var(--navy));text-align:right;padding:18px 28px;border-bottom:1px solid #203f61}
header h1{font-size:25px}header p{color:#d4e2f5}
.top-bar{background:white;border-bottom:1px solid var(--line);padding:10px 24px}
.language-btn{background:var(--blue);border-radius:9px;padding:10px 16px}
.container{max-width:1600px;padding:22px 26px;margin:0 auto}
.welcome{background:transparent;padding:0 2px 16px;box-shadow:none;border:0}
.welcome h2{font-size:27px;color:#102b49;margin-bottom:5px}
.welcome p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0 20px}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 18px;min-height:125px;box-shadow:0 3px 12px #193c6510;overflow:hidden}
.card:before{content:"";position:absolute;right:0;top:0;width:5px;height:100%;background:var(--blue)}
.card:nth-child(2):before{background:var(--green)}.card:nth-child(3):before{background:var(--red)}.card:nth-child(4):before{background:var(--purple)}.card:nth-child(5):before{background:var(--orange)}.card:nth-child(6):before{background:#20b8c9}
.card h3{font-size:15px;color:#526985;margin:0 0 12px}.number{font-size:32px;font-weight:800;color:#102b49}
.card small{color:var(--muted)}
.stat-active{background:linear-gradient(135deg,#fff,#f0fff7)}.stat-inactive{background:linear-gradient(135deg,#fff,#fff3f3)}
.dashboard-graphic,.backup-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin:18px 0;box-shadow:0 3px 12px #193c650a}
.graphic-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.graphic-heading h3,.backup-panel h3{margin:0;color:#102b49;font-size:18px}
#studentStatusSummary{color:var(--muted);font-size:13px}
.status-track{height:22px;background:#f0f4fa;border-radius:20px;overflow:hidden;display:flex;direction:ltr;box-shadow:inset 0 1px 3px #0001}
.status-bar-active{background:linear-gradient(90deg,#119e60,#24c47b);transition:width .4s}
.status-bar-inactive{background:linear-gradient(90deg,#ff666a,#f23e4a);transition:width .4s}
.status-legend{display:flex;gap:25px;flex-wrap:wrap;margin-top:15px;color:#4b6280}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:7px}.active-dot{background:var(--green)}.inactive-dot{background:var(--red)}
.backup-panel p{color:#657b98;line-height:1.9}.backup-actions{display:flex;gap:10px;flex-wrap:wrap}.backup-actions button,.menu button,button{border-radius:9px}
.backup-actions button{background:var(--blue);color:#fff;border:0;padding:12px 17px;cursor:pointer}.backup-actions button+button{background:var(--navy)}
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:20px 0}
.menu button{background:#fff!important;color:#173656!important;border:1px solid var(--line)!important;box-shadow:0 3px 12px #193c650a;padding:17px 12px!important;text-align:center;font-weight:700;cursor:pointer;transition:.2s}
.menu button:hover{background:#eaf3ff!important;border-color:#8bbcff!important;transform:translateY(-2px)}
section:not(#dashboard){border-radius:12px}
input,select,textarea{border-radius:8px!important;border:1px solid #d7e3f1!important;padding:10px!important}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:10px;overflow:hidden}
th{background:#edf4fc;color:#173656}th,td{padding:11px 9px;border-bottom:1px solid #e8eff8}
@media(min-width:1050px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1350px){.cards{grid-template-columns:repeat(6,minmax(0,1fr))}.card{padding:17px 14px}}
@media(max-width:700px){.container{padding:12px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:14px 12px}.number{font-size:25px}header{padding:16px}.graphic-heading{align-items:flex-start}}


/* BEC modern dashboard theme */
:root{--navy:#14233f;--navy2:#1e3559;--teal:#16a085;--mint:#e7f7f1;--blue:#eaf1ff;--rose:#fff0f0;--gold:#fff7df;--ink:#25324a;--muted:#77839a}
body{background:#f3f6fb;color:var(--ink);font-family:Arial,"Noto Sans",sans-serif}
header{background:linear-gradient(120deg,var(--navy),var(--navy2));text-align:start;padding:22px 30px;box-shadow:0 8px 25px #14233f20}
header h1{font-size:25px;letter-spacing:.2px} header p{color:#d5deef}
.top-bar{background:transparent;padding:14px 28px 0}
.language-btn{background:#fff;color:var(--navy);border:1px solid #dbe2ee;border-radius:11px;padding:10px 18px;font-weight:700;box-shadow:0 3px 12px #14233f0c}
.container{max-width:1440px;padding:22px 28px}
.welcome{background:linear-gradient(120deg,#fff,#f8fbff);border:1px solid #e7edf6;border-radius:18px;padding:26px 30px;box-shadow:0 8px 28px #253a5c0a}
.welcome h2{color:var(--navy);margin-top:0}
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{position:relative;text-align:start;border:1px solid #e7edf5;border-radius:17px;padding:22px 24px;box-shadow:0 7px 24px #1d31520b;overflow:hidden;min-height:126px}
.card:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:#5279d8}
.card:nth-child(2){background:var(--mint)}.card:nth-child(2):before{background:#16a085}
.card:nth-child(3){background:var(--rose)}.card:nth-child(3):before{background:#e45c70}
.card:nth-child(4){background:var(--blue)}.card:nth-child(4):before{background:#5279d8}
.card:nth-child(5){background:var(--gold)}.card:nth-child(5):before{background:#e4a62c}
.card:nth-child(6){background:#f2edff}.card:nth-child(6):before{background:#8664cf}
.card h3{color:#52617a;font-size:15px;font-weight:600;margin:0 0 16px}
.card .number{font-size:32px;color:var(--navy);line-height:1.2}
.dashboard-graphic,.backup-panel{background:white;border:1px solid #e5ebf4;border-radius:18px;padding:24px;margin:22px 0;box-shadow:0 7px 24px #1d31520b}
.graphic-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:20px}
.graphic-heading h3,.backup-panel h3{margin:0;color:var(--navy)}
#studentStatusSummary{color:var(--muted);font-size:13px}
.status-track{height:16px;background:#edf1f7;border-radius:30px;overflow:hidden;display:flex;direction:ltr}
.status-bar-active{background:#17a884;height:100%;transition:width .35s}
.status-bar-inactive{background:#e45c70;height:100%;transition:width .35s}
.status-legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:15px;color:#53627a}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:7px}.active-dot{background:#17a884}.inactive-dot{background:#e45c70}
.menu{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.menu button,.backup-actions button{background:var(--navy);border-radius:13px;padding:17px 12px;box-shadow:0 6px 16px #14233f16;transition:transform .15s,background .15s}
.menu button:hover,.backup-actions button:hover{background:#25436e;transform:translateY(-2px)}
button{cursor:pointer;border:0;color:white;font-weight:600}
.section{background:white;border:1px solid #e6ecf5;border-radius:18px;padding:25px;box-shadow:0 8px 28px #253a5c0a}
input,select,textarea{border:1px solid #d9e1ed;border-radius:10px;padding:11px 12px;background:#fbfcfe}
label{color:#53627a;font-weight:600}
.back-btn{background:#5a6b85;border-radius:10px;padding:11px 16px}
table{border-collapse:collapse;width:100%;background:white;border-radius:12px;overflow:hidden}
th{background:#edf2fa;color:#293b5a}td,th{padding:12px;border-bottom:1px solid #e8edf5;text-align:start}
@media(max-width:900px){.menu{grid-template-columns:repeat(2,minmax(0,1fr))}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.container{padding:16px}}
@media(max-width:560px){.cards,.menu{grid-template-columns:1fr}header{padding:18px}.container{padding:12px}.card{min-height:unset}}


/* Dashboard reports */
.dashboard-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:22px 0}
.dashboard-report-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(22,45,70,.08);border:1px solid #e8edf3;min-width:0}
.dashboard-report-card h3{margin:0 0 16px;color:#17324d;font-size:18px}
.report-big-number{font-size:38px;font-weight:800;color:#24835d}
.dashboard-report-card p{color:#718096;margin:8px 0 0}
.report-metrics{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.report-metrics span{display:flex;flex-direction:column;gap:5px;background:#f4f7fb;border-radius:12px;padding:14px;min-width:85px;flex:1}
.report-metrics b{font-size:25px;color:#243b53}.report-metrics small{color:#65758b}
.dashboard-wide{grid-column:1/-1}.dashboard-table-wrap{overflow-x:auto}
.dashboard-table-wrap table{width:100%;border-collapse:collapse}.dashboard-table-wrap th,.dashboard-table-wrap td{padding:11px;text-align:start;border-bottom:1px solid #edf1f5;white-space:nowrap}
.dashboard-table-wrap th{background:#f6f8fb;color:#425466}
@media(max-width:700px){.dashboard-report-grid{grid-template-columns:1fr}.dashboard-wide{grid-column:auto}}


/* BEC dashboard navigation: persistent vertical sidebar inspired by the approved mockup */
@media (min-width: 1000px) {
  .menu { position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; width: 248px; margin: 0; padding: 118px 16px 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; background: #102b49; box-shadow: 4px 0 18px rgba(12,35,60,.16); }
  .menu button { width: 100%; min-height: 56px; text-align: left; padding: 15px 16px; background: transparent; color: #edf5ff; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; box-shadow: none; }
  .menu button:hover { background: #20466f; border-color: #4778aa; transform: translateX(2px); }
  header, .top-bar, main.container { margin-left: 248px; }
  main.container { max-width: none; padding: 24px 28px; }
  header { text-align: left; }
  .top-bar { justify-content: flex-end; }
}
@media (max-width: 999px) { .menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Reference-inspired BEC dashboard layout */
:root{--bec-navy:#102b49;--bec-blue:#0877e8;--bec-bg:#f3f8fe;--bec-border:#dce8f5}
body{background:var(--bec-bg)!important;color:#142d4e;font-family:Tahoma,Arial,sans-serif}
.bec-sidebar{position:fixed;inset:0 auto 0 0;width:242px;background:linear-gradient(180deg,#102b49,#09213d);color:#fff;z-index:1000;display:flex;flex-direction:column;box-shadow:4px 0 18px #0b29451c}
.bec-brand{height:82px;display:flex;align-items:center;gap:12px;padding:15px 22px;border-bottom:1px solid #ffffff20}
.bec-cap{font-size:35px}.bec-brand strong{font-size:28px;display:block;line-height:1.1}.bec-brand small{font-size:12px;color:#d6e4f5}
.bec-nav{padding:14px 9px;display:grid;gap:5px}.bec-nav-item{border:0;border-radius:8px;background:transparent;color:#f4f8ff;text-align:left;padding:13px 14px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:13px;cursor:pointer;min-height:44px}.bec-nav-item:hover,.bec-nav-item.selected{background:#0864bf}
.bec-sidebar-bottom{margin-top:auto;padding:22px;display:grid;gap:25px;border-top:1px solid #ffffff20;font-size:13px}.bec-sidebar-bottom small{color:#9fb4cc}
body>header,body>.top-bar,body>main.container{margin-left:242px!important;width:calc(100% - 242px)!important;box-sizing:border-box}
body>header{background:#fff!important;padding:18px 26px!important;border-bottom:1px solid var(--bec-border)}
body>.top-bar{background:#fff!important;padding:10px 25px!important}
body>main.container{max-width:none!important;padding:22px 16px!important}
#dashboard .cards{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:12px}
#dashboard .card,.dashboard-graphic,.dashboard-report-card{border:1px solid var(--bec-border)!important;border-radius:9px!important;box-shadow:0 2px 8px #18395b0a!important;background:#fff!important}
#dashboard .card{min-height:130px;padding:18px!important}
.dashboard-graphic,.dashboard-report-card{padding:18px!important}
.dashboard-report-grid{gap:14px!important}
#dashboard h2,#dashboard h3{color:#132e50}
.bec-sidebar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:1000px){.bec-sidebar{width:190px}body>header,body>.top-bar,body>main.container{margin-left:190px!important;width:calc(100% - 190px)!important}#dashboard .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.bec-sidebar{position:relative;width:100%;height:auto;inset:auto}.bec-brand{height:65px}.bec-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.bec-nav-item{font-size:12px;padding:9px}body>header,body>.top-bar,body>main.container{margin-left:0!important;width:100%!important}#dashboard .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
html[dir="rtl"] .bec-nav-item{text-align:right}

/* BEC LOGO — uploaded official logo */
.bec-brand { gap: 10px; padding: 12px 14px; }
.bec-logo { width: 58px; height: 58px; object-fit: contain; flex: 0 0 58px; }
.bec-brand strong { font-size: 23px; }
.bec-brand small { display: block; max-width: 140px; line-height: 1.25; }
@media(max-width:650px) {
  .bec-logo { width: 48px; height: 48px; flex-basis: 48px; }
}

/* BEC visual corrections: larger standalone logo and high-contrast buttons */
.bec-brand{height:150px!important;justify-content:center!important;padding:14px!important;}
.bec-logo{width:124px!important;height:124px!important;max-width:100%;object-fit:contain!important;flex:0 0 124px!important;}
.bec-nav-item{background:#173b60!important;color:#fff!important;border:1px solid #31577c!important;}
.bec-nav-item:hover,.bec-nav-item.selected{background:#0877e8!important;color:#fff!important;border-color:#65b4ff!important;}
.language-btn,.save-btn,.back-btn,.action-btn,.backup-actions button{color:#fff!important;font-weight:700!important;text-shadow:0 1px 1px #0003;}
.language-btn{background:#075db5!important;border:1px solid #064b91!important;}
.save-btn{background:#087a45!important;}
.back-btn{background:#334e68!important;}
.action-btn{background:#075db5!important;}
.delete-btn{background:#b42318!important;color:#fff!important;}
button:focus-visible{outline:3px solid #ffbf47!important;outline-offset:2px!important;}
@media(max-width:650px){.bec-brand{height:95px!important}.bec-logo{width:82px!important;height:82px!important;flex-basis:82px!important}}

/* =========================================================
   20. DASHBOARD VISUAL POLISH
   ========================================================= */
#dashboard .welcome {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce9e2;
  background: linear-gradient(125deg, #ffffff 0%, #f1f8f4 58%, #e5f1ea 100%);
  box-shadow: 0 10px 28px rgba(18, 59, 42, .09);
}
#dashboard .welcome::after {
  content: "BEC";
  position: absolute;
  inset-inline-end: 22px;
  top: 12px;
  font-size: clamp(42px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: 3px;
  color: rgba(23, 107, 73, .07);
  pointer-events: none;
}
#dashboard .welcome h2 { color: #123b2a; font-size: clamp(23px, 3vw, 32px); }
#dashboard .cards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
#dashboard .card {
  position: relative;
  border: 1px solid #e1ebe5;
  border-top: 4px solid #176b49;
  transition: transform .18s ease, box-shadow .18s ease;
}
#dashboard .card:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(18, 59, 42, .12); }
#dashboard .card .number { color: #123b2a; font-variant-numeric: tabular-nums; }
#dashboard .card.stat-active { border-top-color: #1c9a63; }
#dashboard .card.stat-inactive { border-top-color: #d97706; }
.dashboard-graphic, .dashboard-report-card, .backup-panel {
  border: 1px solid #e0e9e4;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(18, 59, 42, .055);
}
.dashboard-report-card h3, .dashboard-graphic h3, .backup-panel h3 { color: #123b2a; }
.bec-nav-item { transition: background .18s ease, transform .18s ease; }
.bec-nav-item:hover { background: #1b4965; transform: translateX(-2px); }
.bec-nav-item.selected { background: #176b49; box-shadow: inset 3px 0 #b7f0d0; }
button, .language-btn { font-weight: 700; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #80cfa7; outline-offset: 2px;
}
body.bec-english { font-family: Arial, Helvetica, sans-serif; }
body.bec-english .bec-sidebar { direction: ltr; }
body.bec-english .bec-nav-item { text-align: left !important; }
body.bec-english .bec-brand { justify-content: center; }
body.bec-english .container, body.bec-english .section { direction: ltr; }
@media (max-width: 650px) {
  #dashboard .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #dashboard .card { padding: 14px 10px; }
}


/* Section-wide search fields */
.section-search{margin:12px 0;display:flex;gap:10px;max-width:520px}
.section-search input{width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#172033;font-size:15px;outline:none}
.section-search input:focus{border-color:#16835b;box-shadow:0 0 0 3px rgba(22,131,91,.14)}


/* Attendance system */
.attendance-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0}
.attendance-stat{background:#f1f5f9;border-radius:12px;padding:14px;text-align:center;border-top:4px solid #64748b;display:flex;flex-direction:column;gap:7px}
.attendance-stat strong{font-size:25px;color:#172033}.attendance-stat.present{border-color:#16a34a}.attendance-stat.absent{border-color:#dc2626}.attendance-stat.late{border-color:#d97706}.attendance-stat.excused{border-color:#2563eb}
.attendance-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.attendance-actions button{min-height:42px;cursor:pointer}
.attendance-table select,.attendance-table input{min-width:120px;padding:9px;border:1px solid #cbd5e1;border-radius:8px;max-width:100%}
#attendanceMessage{display:none;margin:12px 0;padding:12px;border-radius:8px}
@media(max-width:700px){.attendance-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.attendance-controls{grid-template-columns:1fr}.attendance-actions button{width:100%}}


/* FINAL ACCESSIBILITY PASS: consistent high-contrast buttons across every section */
button, input[type="button"], input[type="submit"], input[type="reset"] {
  color: #ffffff; background-color: #174a78; border: 1px solid #123b60;
  font-weight: 700 !important; text-shadow: none !important; border-radius: 9px;
  padding: 10px 14px; line-height: 1.35; opacity: 1 !important;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { filter: brightness(1.08); }
button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled { background: #64748b !important; color: #fff !important; opacity: .75 !important; }
button.primary-btn, button.report-generate-btn { background: #075985 !important; color: #fff !important; border-color: #064568 !important; }
button.report-print-btn { background: #475569 !important; color: #fff !important; border-color: #334155 !important; }
button.report-csv-btn { background: #167044 !important; color: #fff !important; border-color: #105634 !important; }
button.save-btn, button[type="submit"] { background: #087a45 !important; color: #fff !important; border-color: #066238 !important; }
button.back-btn, button.cancel-btn { background: #475569 !important; color: #fff !important; border-color: #334155 !important; }
button.edit-btn { background: #075db5 !important; color: #fff !important; border-color: #064b91 !important; }
button.delete-btn { background: #b42318 !important; color: #fff !important; border-color: #8f1d14 !important; }
button.language-btn { background: #075db5 !important; color: #fff !important; border-color: #064b91 !important; }
.bec-nav-item { color: #fff !important; }
#reportsSection .form-container button { min-height: 42px; }
#reportsSection #generalReportMessage { color: #17324d; font-weight: 700; }
#reportsSection table th { color: #17324d !important; background: #e8f1fa !important; }
@media (max-width: 650px) { #reportsSection .form-container button { width: 100%; } }

/* Student report photo and readable fee-slip actions */
.report-student-photo{width:54px;height:64px;object-fit:cover;object-position:center 12%;border-radius:6px;border:1px solid #cbd8d0;display:block;margin:auto;background:#f3f6f4}
.report-photo-fallback{width:54px;height:64px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid #cbd8d0;background:#f3f6f4;font-size:26px}
#generalReportTable td{vertical-align:middle}
#generalReportTable .action-btn{white-space:nowrap;padding:7px 10px;font-weight:600;cursor:pointer;border-radius:6px}
@media print{.report-student-photo{width:45px;height:54px}}


/* BEC polished local login */
.bec-login-screen{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(circle at 15% 15%,rgba(55,160,113,.35),transparent 35%),linear-gradient(135deg,#092b20 0%,#12543c 52%,#0c3529 100%);font-family:Arial,sans-serif}
.bec-login-decoration{position:absolute;width:440px;height:440px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-130px;bottom:-180px;box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.02);pointer-events:none}
.bec-login-card{position:relative;width:min(100%,430px);padding:34px 32px 25px;border:1px solid rgba(255,255,255,.55);border-radius:25px;background:rgba(255,255,255,.97);box-shadow:0 25px 80px rgba(0,0,0,.28);text-align:right}
.bec-login-logo{width:78px;height:78px;margin:0 auto 14px;border-radius:20px;background:#eff7f1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bec-login-logo img{width:100%;height:100%;object-fit:contain}
.bec-login-kicker{text-align:center;font-size:10px;letter-spacing:2px;font-weight:800;color:#26805a;direction:ltr}
.bec-login-card h1{text-align:center;color:#153d2c;font-size:29px;margin:12px 0 7px}
.bec-login-subtitle{text-align:center;color:#718078;font-size:14px;margin:0 0 26px}
.bec-login-card label{display:block;font-weight:700;color:#244c39;font-size:14px;margin:15px 0 7px}
.bec-login-card input{width:100%;height:48px;border:1px solid #dce7df;border-radius:12px;background:#f9fcfa;padding:0 13px;font-size:15px;outline:none;transition:.2s}
.bec-login-card input:focus{border-color:#26805a;box-shadow:0 0 0 3px rgba(38,128,90,.12)}
.bec-password-wrap{position:relative}.bec-password-wrap input{padding-left:48px}.bec-password-wrap button{position:absolute;left:7px;top:6px;height:36px;width:36px;border:0;background:transparent;cursor:pointer}
.bec-login-submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:49px;margin-top:22px;border:0;border-radius:12px;background:linear-gradient(100deg,#176b49,#23865d);color:#fff;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(23,107,73,.22)}
.bec-login-submit:hover{filter:brightness(1.06)}.bec-login-submit:disabled{opacity:.7;cursor:wait}
.bec-login-error{display:none;margin-top:12px;padding:10px 12px;border-radius:10px;background:#fff0ef;color:#a32d28;font-size:13px;line-height:1.7}
.bec-login-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;color:#6c7d73;font-size:12px}
.bec-status-dot{width:8px;height:8px;border-radius:50%;background:#20a66a;box-shadow:0 0 0 4px rgba(32,166,106,.12)}
.bec-login-help{margin-top:17px;padding-top:12px;border-top:1px solid #e7eee9;color:#5d6f64;font-size:12px}
.bec-login-help summary{cursor:pointer;text-align:center}.bec-login-help p{margin:8px 0;direction:ltr;text-align:center}.bec-login-help code{background:#eef5ef;padding:3px 6px;border-radius:5px;color:#164d34}
.bec-logged-in-as{font-size:12px;color:#486557;margin-left:auto}.bec-logout-btn{border:0;border-radius:9px;background:#fce8e6;color:#9d302a;padding:8px 12px;cursor:pointer;font-weight:700}
@media(max-width:480px){.bec-login-card{padding:27px 22px 21px;border-radius:21px}.bec-login-card h1{font-size:25px}.bec-login-logo{width:68px;height:68px}}

/* Dashboard refresh button */
.refresh-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.refresh-btn{border:0;border-radius:9px;padding:11px 20px;background:var(--blue,#1d4ed8);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.refresh-btn:hover{filter:brightness(1.08)}
.refresh-btn:disabled{opacity:.7;cursor:wait}
.refresh-btn.is-loading{animation:becPulse 1s ease-in-out infinite}
@keyframes becPulse{50%{opacity:.55}}

/* Library */
.fee-filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.fee-filter-row .search-box{flex:1 1 260px;margin:0}
.lib-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.lib-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.lib-tab{border:1px solid #176b49;background:#fff;color:#176b49;border-radius:9px;padding:10px 18px;font-weight:700;cursor:pointer}
.lib-tab.active{background:#176b49;color:#fff}
.lib-badge{display:inline-block;min-width:28px;padding:3px 10px;border-radius:999px;font-weight:700;font-size:13px;text-align:center}
.lib-badge.ok{background:#d4edda;color:#155724}
.lib-badge.warn{background:#fff3cd;color:#664d03}
.lib-badge.bad{background:#f8d7da;color:#721c24}


/* =========================================================
   FEES — د زده‌کوونکي لنډیز او تفصیل
   ========================================================= */
.fee-student-row { cursor: pointer; background: #f3fbf6; }
.fee-student-row:hover { filter: brightness(0.96); }
.fee-student-row.fee-has-debt { background: #fdeaea; border-right: 6px solid #c62828; }
.fee-student-row.fee-has-debt td { color: #8e1b1b; font-weight: bold; }
.fee-student-name { text-align: right !important; }
.fee-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 14px; font-weight: bold; }
.fee-badge-debt { background: #c62828; color: #fff; }
.fee-badge-ok { background: #176b49; color: #fff; }
.fee-detail-row > td { background: #fafafa; padding: 8px !important; }
.fee-month-table th { background: #176b49; }
.fee-month-debt td { background: #fff3e0; color: #b71c1c; }

.fee-student-row.fee-all-paid { background: #e3f6e8; border-right: 6px solid #176b49; }
.fee-student-row.fee-all-paid td { color: #0f5132; font-weight: bold; }

.fee-student-row.fee-free { background: #e8f1fb; border-right: 6px solid #1565c0; }
.fee-student-row.fee-free td { color: #0d47a1; font-weight: bold; }
.fee-badge-free { background: #1565c0; color: #fff; }

.fee-student-row.fee-has-missing { background: #fff4e0; border-right: 6px solid #ef6c00; }
.fee-student-row.fee-has-missing td { color: #8a4300; font-weight: bold; }
.fee-badge-missing { background: #ef6c00; color: #fff; }
.fee-missing-box { background: #fff4e0; border: 1px solid #ef6c00; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; text-align: right; color: #8a4300; font-weight: bold; }
.fee-missing-chip { display: inline-block; background: #ef6c00; color: #fff; border-radius: 10px; padding: 2px 9px; margin: 2px; font-size: 14px; }
.multi-month-box { border: 1px solid #176b49; border-radius: 10px; padding: 10px 14px; margin: 14px 0; background: #f3fbf6; }
.multi-month-box summary { cursor: pointer; font-weight: bold; font-size: 18px; color: #176b49; }
.mm-help { font-size: 14px; line-height: 1.7; }
.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; }
.mm-item { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #cfe3d7; border-radius: 8px; padding: 8px; cursor: pointer; }

.fee-cutoff-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; font-size: 14px; }
.fee-cutoff-row select { padding: 6px; }
.fee-sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.fee-sum-card { background: #fff; border: 1px solid #cfe3d7; border-radius: 10px; padding: 10px; text-align: center; }
.fee-sum-card b { display: block; font-size: 20px; color: #176b49; }
.fee-log-table td, .fee-log-table th { font-size: 13px; }


/* ---- Students: toolbar, count, pager, photo framing, role visibility ---- */
.stu-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px;align-items:center}
.stu-toolbar select{padding:9px 10px;border:1px solid #c8d6cd;border-radius:8px;background:#fff;font:inherit}
.stu-toolbar .back-btn{margin:0}
.stu-count{font-size:14px;color:#2d4a3a;margin:4px 0 8px}
.stu-count b{color:#176b49}
.stu-pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px 0}
.stu-pager button{padding:8px 16px;border:1px solid #176b49;background:#fff;color:#176b49;border-radius:8px;cursor:pointer;font:inherit}
.stu-pager button:disabled{opacity:.4;cursor:default}
body.bec-role-viewer #studentSection #saveButton,
body.bec-role-viewer #studentSection .edit-btn,
body.bec-role-viewer #studentSection .delete-btn,
body.bec-role-viewer #feeSection #saveFeeBtn,
body.bec-role-viewer #feeSection .edit-btn,
body.bec-role-viewer #feeSection .delete-btn{display:none!important}
body.bec-role-editor #studentSection .delete-btn,
body.bec-role-editor #feeSection .delete-btn{display:none!important}


/* ---- Students: optional-field tag + wide field ---- */
.opt-tag{font-size:.75em;font-weight:normal;color:#8a9a8f;margin-inline-start:4px}
.form-group.wide-field{grid-column:1/-1}
.form-group textarea{width:100%;padding:10px;border:1px solid #cfd8d2;border-radius:8px;font:inherit;resize:vertical}

.inactive-note{display:block;font-size:.72em;color:#8a6d3b;margin-top:2px}

.student-docs-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.student-doc-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #d3e1d3;border-radius:8px;background:#fff;font-size:.9em}
.student-doc-item .doc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-doc-item button{border:0;border-radius:6px;padding:4px 10px;cursor:pointer;background:#eef5ec;color:#123b2a}
.student-doc-item button.doc-del{background:#fbe9e9;color:#9b1c1c}
.doc-badge{font-size:.8em;margin-inline-start:4px;color:#52735f}
.bec-doc-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:16px}
.bec-doc-overlay img{max-width:100%;max-height:100%;border-radius:8px;background:#fff}

/* ---- Student profile overlay ---- */
.sp-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto}
.sp-card{background:#fff;color:#17332a;border-radius:12px;max-width:760px;width:100%;padding:16px 18px;box-shadow:0 8px 30px #0005}
.sp-head{display:flex;align-items:center;gap:12px}
.sp-head img,.sp-ph{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#eef5ec;display:flex;align-items:center;justify-content:center;font-size:28px}
.sp-head h3{margin:0}.sp-head small{color:#52735f}
.sp-x{margin-inline-start:auto;border:0;background:#fbe9e9;color:#9b1c1c;border-radius:8px;padding:6px 12px;cursor:pointer}
.sp-actions{display:flex;gap:8px;margin:10px 0}.sp-actions button{border:0;border-radius:8px;padding:8px 14px;cursor:pointer;background:#123b2a;color:#fff}
.sp-card h4{margin:14px 0 6px;color:#123b2a;border-bottom:1px solid #d3e1d3;padding-bottom:4px}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.sp-row{display:flex;justify-content:space-between;gap:8px;font-size:.9em;border-bottom:1px dotted #d3e1d3;padding:3px 0}.sp-row span{color:#52735f}
.sp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0}
.sp-stats div{background:#eef5ec;border-radius:8px;padding:8px;text-align:center}.sp-stats b{display:block;font-size:1.2em}.sp-stats small{color:#52735f}
.sp-empty{color:#8a9a8f;font-size:.9em}
@media(max-width:560px){.sp-grid{grid-template-columns:1fr}}

/* ---- د راتلونکي فیس شمېرنه ---- */
.fee-upcoming{border:1px solid #f3c98b;background:#fff8ec;border-radius:12px;padding:12px 14px;margin:14px 0}
.fee-upcoming .fu-head{font-weight:800;color:#9a5a00;margin-bottom:8px}
.fee-upcoming .fu-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;background:#fff;border:1px solid #f1dfc2;margin-top:6px;flex-wrap:wrap}
.fee-upcoming .fu-main{flex:1 1 160px;min-width:0;display:flex;flex-direction:column}
.fee-upcoming .fu-main small{color:#7a6a52}
.fee-upcoming .fu-days{display:flex;align-items:center;gap:8px;font-weight:700;color:#7a4a00}
.fee-upcoming .fu-num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:50%;background:#f0a640;color:#fff;font-weight:800}
.fee-upcoming .fu-soon{border-color:#f0a640}.fee-upcoming .fu-soon .fu-num{background:#e8731a}
.fee-upcoming .fu-zero{border-color:#d93c3c;background:#fff1f1}.fee-upcoming .fu-zero .fu-num{background:#d93c3c}.fee-upcoming .fu-zero .fu-days{color:#b42318}
.fee-upcoming .fu-wa{padding:6px 12px}

/* Student edit mode */
.stu-edit-banner{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#fff7e0;border:1px solid #f2c94c;color:#7a5a00;font-weight:700}
#studentPhotoRemove{margin-top:8px}

/* Fees: collapsible long lists */
.fee-upcoming .fu-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-bottom:0;user-select:none}
.fee-upcoming .fu-arrow{font-size:13px;opacity:.8}
.fee-upcoming .fu-rows{margin-top:8px}
.fee-more-row td{text-align:center;background:#f4f8f5;padding:10px}
.fee-more-row .back-btn{margin:2px 4px}
.fee-more-info{margin-inline-end:10px;color:#5b6b62;font-weight:700}
.fee-more-chips{display:inline-block;vertical-align:middle}
.fee-more-chips summary{display:inline-block;cursor:pointer;background:#fff;color:#ef6c00;border:1px solid #ef6c00;border-radius:10px;padding:2px 9px;font-size:14px}
.fee-sum-more{margin-top:10px}
.fee-sum-more summary{cursor:pointer;font-weight:800;padding:6px 0}

.fd-cards{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.fd-cards .fee-sum-card{flex:1 1 150px}