:root{
    --blue:#1595c9;
    --blue-dark:#0e6995;
    --green:#39a96b;
    --red:#e64352;
    --yellow:#f2b43b;
    --orange:#f07a2d;
    --purple:#6358d8;
    --ink:#162033;
    --muted:#718097;
    --bg:#f4f8fc;
    --card:#ffffff;
    --line:#e4ebf3;
    --shadow:0 18px 55px rgba(24,76,112,.09);
    --sidebar:#111a2b;
}
html[data-theme="dark"]{
    color-scheme:dark;
    --ink:#f0f5fb;
    --muted:#a8b4c6;
    --bg:#0b111b;
    --card:#151f2e;
    --line:#2b384b;
    --shadow:0 18px 55px rgba(0,0,0,.28);
    --sidebar:#080e18;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;transition:background .25s,color .25s}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:272px;background:linear-gradient(180deg,var(--sidebar),#14243a);color:#d7e5f3;padding:17px 15px;display:flex;flex-direction:column;z-index:60;transition:transform .3s}
.sidebar-brand{background:white;border-radius:20px;padding:10px;display:flex;align-items:center;gap:12px;margin-bottom:19px;color:#152033}
.sidebar-brand img{width:78px;height:72px;object-fit:contain}
.sidebar-brand b,.sidebar-brand span{display:block}
.sidebar-brand b{font-size:16px}.sidebar-brand span{font-size:9px;color:#6c7786;margin-top:3px}
.sidebar-nav{display:grid;gap:4px;overflow:auto;padding-right:3px}
.sidebar-nav a{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:12px;color:#aab8ca;font-size:13px;transition:.23s}
.sidebar-nav a i{width:21px;text-align:center}
.sidebar-nav a:hover,.sidebar-nav a.active{background:linear-gradient(135deg,#1595c9,#0e72a2);color:white;transform:translateX(3px)}
.sidebar-user{margin-top:auto;border-top:1px solid #2b3a4e;padding-top:14px;display:grid;grid-template-columns:42px 1fr 28px;align-items:center;gap:9px}
.sidebar-user .avatar{width:42px;height:42px;border-radius:14px;background:#24344a;display:grid;place-items:center;font-weight:900}
.sidebar-user b,.sidebar-user span{display:block}.sidebar-user b{font-size:12px}.sidebar-user span{font-size:9px;color:#92a3b9}
.sidebar-user>a{color:#9db0c6}
.topbar{position:fixed;left:272px;right:0;top:0;height:78px;background:color-mix(in srgb,var(--card) 91%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);display:flex;align-items:center;gap:14px;padding:0 26px;z-index:50}
.icon-button{width:43px;height:43px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:13px;display:grid;place-items:center;cursor:pointer}
.global-search{position:relative;flex:1;max-width:650px}
.global-search>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}
.global-search input{width:100%;padding:12px 14px 12px 42px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:13px;outline:none}
#globalResults{position:absolute;left:0;right:0;top:51px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:none}
#globalResults a{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line)}
#globalResults small{display:block;color:var(--muted)}
.academic-chip{margin-left:auto;display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.academic-chip i{color:var(--blue)}.academic-chip span,.academic-chip b{display:block}.academic-chip span{font-size:9px;color:var(--muted)}.academic-chip b{font-size:12px}
.primary-button,.secondary-button,.danger-button,.filter-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 16px;font-size:12px;font-weight:800;cursor:pointer}
.primary-button{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:white;box-shadow:0 10px 25px rgba(21,149,201,.23)}
.primary-button.compact{padding:11px 14px}
.secondary-button{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.danger-button{background:#fff0f1;color:#c52c3b;border:1px solid #ffd0d5}
.filter-button{background:var(--ink);color:var(--card)}
.main-content{margin-left:272px;padding:106px 26px 82px;min-height:100vh}
.page-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}
.page-heading>div:first-child>span{font-size:10px;color:var(--blue);font-weight:900;letter-spacing:.14em}
.page-heading h1{margin:6px 0 0;font-size:34px;letter-spacing:-.025em}
.page-date{font-size:11px;color:var(--muted)}
.toast-message{display:flex;align-items:center;gap:10px;background:#e8f7f0;color:#147651;padding:13px 15px;border-radius:12px;margin-bottom:15px}
.toast-message.error{background:#fff0f1;color:#b82d3c}.toast-message.warning{background:#fff5df;color:#956112}
.toast-message button{margin-left:auto;border:0;background:none;color:inherit;font-size:20px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.metric-card{background:var(--card);border:1px solid var(--line);border-radius:19px;padding:19px;box-shadow:var(--shadow);position:relative;transition:.3s}
.metric-card:hover{transform:translateY(-5px)}
.metric-card>i{position:absolute;right:16px;top:16px;width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:#e8f5fb;color:var(--blue)}
.metric-card.green>i{background:#e7f7ef;color:var(--green)}.metric-card.orange>i{background:#fff2e4;color:var(--orange)}.metric-card.red>i{background:#ffedef;color:var(--red)}.metric-card.purple>i{background:#efedff;color:var(--purple)}
.metric-card span{font-size:11px;color:var(--muted)}.metric-card strong{display:block;font-size:24px;margin:20px 0 8px}.metric-card small{color:var(--green);font-size:9px}
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:15px;margin-top:15px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:19px;padding:21px;box-shadow:var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}
.panel-head span{font-size:9px;color:var(--blue);font-weight:900;letter-spacing:.13em}
.panel-head h3{margin:5px 0 0;font-size:18px}
.panel-head a{font-size:11px;color:var(--blue)}
.chart{height:310px;width:100%}
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:12px;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--line)}
.data-table td{padding:13px 12px;font-size:12px;border-bottom:1px solid var(--line)}
.data-table tr:hover td{background:color-mix(in srgb,var(--blue) 4%,transparent)}
.avatar-cell{display:flex;align-items:center;gap:10px}.avatar-cell img,.avatar-cell .placeholder{width:42px;height:42px;border-radius:13px;object-fit:cover;background:#e9f4fa;display:grid;place-items:center;color:var(--blue);font-weight:900}
.avatar-cell b,.avatar-cell small{display:block}.avatar-cell small{font-size:10px;color:var(--muted)}
.status{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900}
.status.active,.status.paid,.status.present{background:#e8f7ef;color:#177653}
.status.inactive,.status.unpaid,.status.absent{background:#ffedef;color:#bd3341}
.status.pending,.status.partial,.status.late{background:#fff4df;color:#966417}
.table-button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:7px 9px;font-size:10px;cursor:pointer}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:17px}
.search-box{position:relative}.search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search-box input{width:330px;padding:11px 12px 11px 36px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:11px}
.filter-row{display:flex;gap:9px;flex-wrap:wrap}.filter-row input,.filter-row select{padding:10px 11px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid .full{grid-column:1/-1}
.form-grid label{font-size:10px;font-weight:800;color:var(--muted);display:grid;gap:6px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:11px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;outline:none}
.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:19px}
.modal-shell{position:fixed;inset:0;background:rgba(7,13,22,.62);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-shell.open{display:flex}.modal-card{width:min(780px,100%);max-height:92vh;overflow:auto;background:var(--card);border-radius:24px;padding:28px;position:relative}.modal-card.wide{width:min(1120px,100%)}
.modal-close{position:absolute;right:17px;top:13px;background:none;border:0;color:var(--muted);font-size:27px;cursor:pointer}
.eyebrow{font-size:9px;color:var(--blue);font-weight:900;letter-spacing:.14em}
.modal-card h2{margin:7px 0 22px}
.photo-upload{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;margin-bottom:20px}.photo-upload img{width:110px;height:120px;border-radius:17px;object-fit:cover;background:#edf5fa;border:1px solid var(--line)}
.tabs{display:flex;gap:5px;background:var(--card);border:1px solid var(--line);padding:4px;border-radius:12px;width:max-content;margin-bottom:17px}.tabs a{padding:8px 12px;border-radius:8px;font-size:10px}.tabs a.active{background:var(--blue);color:white}
.summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.summary-row article{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:17px}.summary-row span{display:block;font-size:10px;color:var(--muted)}.summary-row strong{display:block;margin-top:8px;font-size:18px}
.activity-list{display:grid}.activity-list a,.activity-list article{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.activity-list i{width:36px;height:36px;border-radius:11px;background:#e8f5fb;color:var(--blue);display:grid;place-items:center}.activity-list b,.activity-list span{display:block}.activity-list span{font-size:9px;color:var(--muted)}.activity-list strong{font-size:11px}
.quick-dock{position:fixed;right:21px;bottom:21px;background:#111827;border-radius:16px;padding:8px;display:flex;gap:4px;z-index:45;box-shadow:0 18px 45px rgba(0,0,0,.24)}.quick-dock a{color:white;padding:9px 10px;border-radius:9px;display:flex;align-items:center;gap:6px;font-size:9px}.quick-dock a:hover{background:var(--blue)}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#f5f9fd}
.login-visual{background:linear-gradient(135deg,rgba(8,31,50,.88),rgba(12,109,151,.83)),url('../images/login-cover.jpg') center/cover;color:white;padding:6vw;display:flex;flex-direction:column;justify-content:space-between}
.login-visual img{width:300px;background:white;padding:12px;border-radius:20px}.login-visual h1{font-size:clamp(48px,6vw,88px);line-height:.92;letter-spacing:-.05em;max-width:800px}.login-visual p{max-width:650px;color:#d6eaf4;line-height:1.7}.login-visual span{font-size:10px;letter-spacing:.15em;color:#8fe2ff;font-weight:900}
.login-form{display:grid;place-items:center;padding:30px;background:white;color:#172033}.login-form form{width:min(440px,100%)}.login-form h2{font-size:42px;margin:8px 0}.login-form>form>p{color:#748095}.login-form label{display:grid;gap:7px;font-size:11px;font-weight:800;margin:17px 0}.login-form input{padding:14px;border:1px solid #dce5ef;border-radius:11px}.login-submit{width:100%;border:0;background:linear-gradient(135deg,#1595c9,#0e6f9d);color:white;padding:14px;border-radius:11px;font-weight:900;display:flex;justify-content:space-between}.login-note{font-size:10px;color:#8490a1;margin-top:17px;line-height:1.6}
.mark-entry{overflow:auto}.mark-entry table{min-width:900px}.mark-entry input{width:82px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.rubric-grid{display:grid;gap:10px}.rubric-section{border:1px solid var(--line);border-radius:15px;overflow:hidden}.rubric-section h4{margin:0;padding:10px 13px;background:#e8f5fb;color:#185d7c;font-size:12px}.rubric-item{display:grid;grid-template-columns:1fr 170px;gap:12px;align-items:center;padding:10px 13px;border-top:1px solid var(--line)}.rubric-item select{padding:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px}
.report-card-shell{background:#dfe5ec;padding:25px;border-radius:18px;overflow:auto}.report-page{width:794px;min-height:1123px;margin:0 auto 22px;background:white;color:#111;padding:42px;box-shadow:0 12px 35px rgba(0,0,0,.14);font-family:Arial,sans-serif}.report-header{display:grid;grid-template-columns:110px 1fr 105px;gap:18px;align-items:start}.report-header img.logo{width:100px}.report-header .student-photo{width:92px;height:105px;object-fit:cover;border:1px solid #bbb}.report-title{text-align:center}.report-title h1{font-size:29px;margin:8px 0}.report-title p{font-size:12px}.student-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:22px 0;border:1px solid #333}.student-meta div{padding:8px;border-right:1px solid #333}.student-meta div:last-child{border:0}.student-meta span,.student-meta b{display:block}.student-meta span{font-size:9px;color:#555}.report-table{width:100%;border-collapse:collapse;font-size:10px}.report-table th,.report-table td{border:1px solid #333;padding:6px;vertical-align:top}.report-table th{background:#e6f3fb}.report-table .section td{background:#d9eef8;text-align:center;font-weight:bold}.report-table .orange-section td{background:#ff6f00;color:#111}.report-footer{display:flex;justify-content:space-between;margin-top:28px;font-size:11px}.signature-line{border-top:1px solid #333;min-width:180px;padding-top:5px}.report-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:15px}
@media(max-width:1120px){.metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.sidebar{width:230px}.topbar{left:230px}.main-content{margin-left:230px}.summary-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.sidebar{transform:translateX(-100%);width:270px}.menu-open .sidebar{transform:none}.topbar{left:0;padding:0 13px}.global-search,.academic-chip{display:none}.main-content{margin-left:0;padding:96px 13px 78px}.page-date{display:none}.metrics,.summary-row{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.login-page{grid-template-columns:1fr}.login-visual{min-height:46vh;padding:35px 23px}.login-visual img{width:230px}.login-visual h1{font-size:46px}.quick-dock{left:10px;right:10px;justify-content:space-around}.quick-dock span{display:none}.photo-upload{grid-template-columns:1fr}.rubric-item{grid-template-columns:1fr}.report-card-shell{padding:8px}.report-page{transform-origin:top left;transform:scale(.56);margin-bottom:-470px}.search-box input{width:100%}}
@media print{.sidebar,.topbar,.page-heading,.report-actions,.quick-dock,.toast-message{display:none!important}.main-content{margin:0;padding:0;background:white}.report-card-shell{padding:0;background:white}.report-page{box-shadow:none;margin:0;page-break-after:always;width:100%;min-height:auto}.report-page:last-child{page-break-after:auto}}

@media(max-width:1100px){body .timetable-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:700px){body .timetable-grid{grid-template-columns:1fr!important}}


/* V1.1.2 — subject coverage */
.coverage-preview{
    border-left:4px solid var(--blue);
    background:color-mix(in srgb,var(--blue) 6%,var(--card));
    padding:14px 16px;
    border-radius:0 12px 12px 0;
    line-height:1.65;
}
.form-grid label small{
    font-size:9px;
    font-weight:500;
    color:var(--muted);
    line-height:1.5;
}


/* V1.1.3 — lesson-plan approval workflow */
.lesson-plan-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border-radius:999px;
    font-size:9px;
    font-weight:900;
}
.workflow-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.workflow-steps article{
    border:1px solid var(--line);
    border-radius:15px;
    padding:16px;
    background:var(--card);
}
.workflow-steps i{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#e8f5fb;
    color:var(--blue);
    margin-bottom:12px;
}
.workflow-steps b,.workflow-steps span{display:block}
.workflow-steps span{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.55}
input[type="file"]{
    padding:10px;
    border:1px dashed var(--line);
    border-radius:10px;
    background:var(--bg);
    color:var(--ink);
}
@media(max-width:800px){
    .workflow-steps{grid-template-columns:1fr}
}


/* V1.1.4 — Super Admin workflow switch */
.workflow-switch-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:start;
}
@media(max-width:850px){
    .workflow-switch-grid{grid-template-columns:1fr}
}