:root{
 --navy:#14275F;
 --navy2:#203C88;
 --saffron:#F97316;
 --gold:#F59E0B;
 --green:#15803D;
 --red:#B91C1C;
 --amber:#b8720a;
 --blue:#2563EB;
 --purple:#6D5BD0;
 --teal:#047857;
 --bg:#F3F6FC;
 --white:#fff;
 --surface:#FFFFFF;
 --surface2:#F8FAFF;
 --border:#DDE6F7;
 --border2:#C7D4EE;
 --text:#10204A;
 --text2:#53668F;
 --text3:#8796B8;
 --shadow:0 8px 24px rgba(16,32,74,.07);
 --shadow-lg:0 18px 48px rgba(16,32,74,.16);
 --r:12px;
 --rs:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13px}

/* LOGIN PAGE */
#login-page{display:flex;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f1c3f 0%,#1A2B5A 50%,#243a7a 100%);position:relative;overflow:hidden}
#login-page::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(255,107,0,.06);top:-200px;right:-200px}
#login-page::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(255,107,0,.04);bottom:-100px;left:-100px}
.login-box{background:var(--white);border-radius:16px;padding:40px 44px;width:460px;max-width:96vw;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative;z-index:1}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo-circle{width:64px;height:64px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff;margin:0 auto 12px;overflow:hidden}
.login-logo-circle:empty{background:linear-gradient(135deg,#FF6B00,#F5A623)}
.login-logo-circle img,.login-logo-circle .kems-logo{width:100%;height:100%;object-fit:contain;display:block}
.login-school{font-size:16px;font-weight:700;color:var(--navy);line-height:1.3;text-align:center}
.login-sub{font-size:11px;color:var(--text2);text-align:center;margin-top:4px}
.login-tabs{display:flex;gap:0;background:var(--bg);border-radius:var(--rs);padding:3px;margin-bottom:24px}
.login-tab{flex:1;padding:7px;text-align:center;font-size:12px;font-weight:600;border-radius:5px;cursor:pointer;color:var(--text2);transition:all .15s}
.login-tab.active{background:var(--white);color:var(--navy);box-shadow:var(--shadow)}
.login-field{margin-bottom:16px}
.login-field label{display:block;font-size:11px;font-weight:700;color:var(--text2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.login-field input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:13px;color:var(--text);outline:none;transition:border .15s;font-family:inherit}
.login-field input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,43,90,.08)}
.password-wrap{position:relative}
.password-wrap input{padding-right:70px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:1px solid var(--border);background:#f8faff;color:var(--navy);border-radius:6px;padding:5px 8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.password-toggle:hover{background:#eef3ff;border-color:var(--navy)}
.login-btn{width:100%;padding:13px;background:var(--navy);color:#fff;border:none;border-radius:var(--rs);font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:background .15s;font-family:inherit}
.login-btn:hover{background:var(--navy2)}
.login-error{background:var(--red);color:#fff;padding:8px 12px;border-radius:var(--rs);font-size:12px;margin-bottom:14px;display:none}
.login-info{margin-top:20px;background:var(--bg);border-radius:var(--rs);padding:12px 14px}
.login-info-title{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:6px}

/* MAIN APP */
#app{display:none;min-height:100vh}
.app-layout{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
#sidebar{width:235px;background:var(--navy);display:flex;flex-direction:column;height:100vh;max-height:100vh;flex-shrink:0;transition:width .2s;position:sticky;top:0;z-index:100;overflow:hidden}
#sidebar.collapsed{width:54px}
.brand{padding:14px 14px 10px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.brand-logo:empty{background:linear-gradient(135deg,#FF6B00,#F5A623)}
.brand-logo img,.brand-logo .kems-logo{width:100%;height:100%;object-fit:contain;display:block}
.brand-text{overflow:hidden;transition:opacity .2s}
#sidebar.collapsed .brand-text{opacity:0;width:0}
.brand-name{font-size:11px;font-weight:700;color:#fff;line-height:1.3}
.brand-udise{font-size:9px;color:rgba(255,255,255,.4);margin-top:1px}
.sidebar-toggle{position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--saffron);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;z-index:101;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.school-switch{padding:8px 10px;display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,.08)}
.ss-btn{flex:1;padding:5px 4px;border-radius:5px;text-align:center;font-size:10px;font-weight:700;cursor:pointer;color:rgba(255,255,255,.5);border:1px solid transparent;transition:all .15s;white-space:nowrap;overflow:hidden}
.ss-btn.active{background:rgba(255,107,0,.2);color:#fff;border-color:rgba(255,107,0,.4)}
#sidebar.collapsed .school-switch{display:none}
.nav-wrap{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 0;height:0}
.nav-wrap::-webkit-scrollbar{width:5px}
.nav-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
.nav-wrap::-webkit-scrollbar-thumb{background:rgba(255,107,0,.5);border-radius:3px}
.nav-wrap::-webkit-scrollbar-thumb:hover{background:rgba(255,107,0,.8)}
.ngrp{font-size:9px;font-weight:700;color:rgba(255,255,255,.3);padding:9px 14px 3px;letter-spacing:.07em;text-transform:uppercase;overflow:hidden;white-space:nowrap}
#sidebar.collapsed .ngrp{display:none}
.ni{display:flex;align-items:center;gap:9px;padding:7px 14px;cursor:pointer;font-size:12px;color:rgba(255,255,255,.6);border-left:2px solid transparent;transition:all .15s;white-space:nowrap;overflow:hidden;position:relative}
.ni:hover{background:rgba(255,255,255,.05);color:#fff}
.ni.active{background:rgba(255,107,0,.15);color:#fff;border-left-color:#FF6B00}
.ni-icon{display:none}
.ni-text{overflow:hidden;transition:opacity .2s}
#sidebar.collapsed .ni-text{opacity:0;width:0}
.ni-badge{background:var(--saffron);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;margin-left:auto;flex-shrink:0}
#sidebar.collapsed .ni-badge{display:none}
.sb-foot{padding:8px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:9px;color:rgba(255,255,255,.3);overflow:hidden;white-space:nowrap}
#sidebar.collapsed .sb-foot{display:none}

/* MAIN CONTENT */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;height:100vh}

/* TOPBAR */
#topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;gap:12px;height:54px;flex-shrink:0;box-shadow:0 1px 4px rgba(26,43,90,.06)}
.tb-title{font-size:15px;font-weight:700;color:var(--text);flex:1}
.tb-breadcrumb{font-size:11px;color:var(--text2)}
.tb-search{flex:1;max-width:280px;position:relative}
.tb-search input{width:100%;padding:7px 10px 7px 32px;border:1.5px solid var(--border);border-radius:20px;font-size:12px;color:var(--text);background:var(--bg);outline:none;font-family:inherit}
.tb-search input:focus{border-color:var(--navy);background:var(--white)}
.tb-search::before{content:'';position:absolute;left:12px;top:50%;width:12px;height:12px;border:2px solid var(--text2);border-radius:50%;transform:translateY(-55%);opacity:.75}
.tb-search::after{content:'';position:absolute;left:24px;top:31px;width:7px;height:2px;background:var(--text2);transform:rotate(45deg);opacity:.75}
.tb-icons{display:flex;align-items:center;gap:8px}
.tb-icon-btn{min-width:74px;height:34px;padding:0 12px;border-radius:18px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;position:relative;transition:all .15s}
.tb-icon-btn:hover{background:var(--border)}
.tb-notif-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--saffron);border:2px solid var(--white)}
.tb-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px;border-radius:20px;border:1px solid var(--border);background:var(--bg)}
.tb-avatar{width:28px;height:28px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.tb-user-name{font-size:12px;font-weight:600;color:var(--text)}
.tb-user-role{font-size:10px;color:var(--text2)}
.tb-school-badge{font-size:10px;padding:3px 10px;border-radius:10px;font-weight:600}
.tb-logout{height:34px;padding:0 14px;border-radius:18px;border:1px solid rgba(192,57,43,.28);background:#fff1ef;color:var(--red);font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:7px;transition:all .15s}
.tb-logout:hover{background:var(--red);color:#fff;border-color:var(--red)}
.tb-logout::before{content:'';width:12px;height:12px;background:currentColor;display:inline-block;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:900px){.tb-logout{padding:0 10px;font-size:0;min-width:36px}.tb-logout::before{width:14px;height:14px}}

/* CONTENT */
#content{flex:1;overflow:auto;padding:18px 20px}
#content::-webkit-scrollbar{width:5px}
#content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
#content::-webkit-scrollbar:horizontal{height:10px}
#content::-webkit-scrollbar-track:horizontal{background:#e7ecf8;border-radius:999px}
#content::-webkit-scrollbar-thumb:horizontal{background:#9fb0d3;border-radius:999px;border:2px solid #e7ecf8}
#content::-webkit-scrollbar-thumb:horizontal:hover{background:#6f84b2}

/* PAGES */
.page{display:none;animation:fadeIn .2s ease}
.page.active{display:block;position:relative;z-index:1}
@media(min-width:769px){
 #content > .page.active{min-width:1120px}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* CARDS */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.card-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#FAFBFF}
.card-title{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;cursor:pointer;transition:transform .15s}
.stat:hover{transform:translateY(-2px)}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.stat.s-b::before{background:var(--blue)}.stat.s-g::before{background:var(--green)}
.stat.s-r::before{background:var(--red)}.stat.s-o::before{background:var(--saffron)}
.stat.s-p::before{background:var(--purple)}.stat.s-t::before{background:var(--teal)}
.stat-icon{display:none}
.stat{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border:1px solid #d9e2f5;box-shadow:0 10px 28px rgba(26,43,90,.08)}
.stat:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--blue)}
.stat.s-g:before{background:var(--green)}
.stat.s-o:before{background:var(--saffron)}
.stat.s-r:before{background:var(--red)}
.stat.s-p:before{background:var(--purple)}
.stat-val{letter-spacing:0}
.ni{position:relative}
.ni:before{content:"";width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.35);flex:0 0 auto}
.ni.active:before{background:var(--saffron);box-shadow:0 0 0 4px rgba(255,111,0,.16)}
.btn{letter-spacing:0}
.stat-val{font-size:24px;font-weight:700;color:var(--text);line-height:1}
.stat-lbl{font-size:11px;color:var(--text2);margin-top:4px;font-weight:500}
.stat-sub{font-size:10px;margin-top:3px;font-weight:600}

/* TABLE */
.tw{overflow-x:auto}
.tw::-webkit-scrollbar{height:10px}
.tw::-webkit-scrollbar-track{background:#e7ecf8;border-radius:999px}
.tw::-webkit-scrollbar-thumb{background:#9fb0d3;border-radius:999px;border:2px solid #e7ecf8}
.tw::-webkit-scrollbar-thumb:hover{background:#6f84b2}
#pg-students .student-table-scroll{
 overflow:auto;
 max-height:calc(100vh - 310px);
 padding-bottom:10px;
}
#pg-students .student-table-scroll table.t{
 min-width:1900px;
}
#pg-students .student-table-scroll th:last-child,
#pg-students .student-table-scroll td:last-child{
 min-width:130px;
}
table.t{width:100%;border-collapse:collapse;font-size:12px}
table.t th{text-align:left;font-size:10px;font-weight:700;color:var(--text2);padding:8px 12px;border-bottom:2px solid var(--border);background:#F7F9FF;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;position:sticky;top:0}
table.t td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr:hover{background:#F4F6FF}
.t-actions{display:flex;gap:4px;flex-wrap:nowrap}

/* BADGES */
.b{display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap}
.bg{background:#e8f5e9;color:var(--green)}.br{background:#fdecea;color:var(--red)}
.ba{background:#fff3cd;color:var(--amber)}.bb{background:#e3f0fc;color:var(--blue)}
.bp{background:#EEEDFE;color:var(--purple)}.bn{background:#F1EFE8;color:#5F5E5A}
.bo{background:rgba(255,107,0,.1);color:var(--saffron)}.bt{background:#e0f5ec;color:var(--teal)}
.kems-pill{background:#e3f0fc;color:#185FA5;border:1px solid #b5d4f4}
.ag-pill{background:#EEEDFE;color:#534AB7;border:1px solid #afa9ec}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--rs);font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .15s;font-family:inherit;white-space:nowrap}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy2)}
.btn-saffron{background:var(--saffron);color:#fff}.btn-saffron:hover{background:#e05a00}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:#196629}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#a93226}
.btn-out{background:transparent;color:var(--text);border:1px solid var(--border2)}.btn-out:hover{background:var(--bg)}
.btn-edit{background:#E6F1FB;color:var(--blue);border:1px solid #b5d4f4}.btn-edit:hover{background:#d0e7f9}
.btn-del{background:#fdecea;color:var(--red);border:1px solid #f5a9a0}.btn-del:hover{background:#fbd7d4}
.btn-sm{padding:4px 9px;font-size:11px}.btn-xs{padding:2px 7px;font-size:10px}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:12px;color:var(--text);background:var(--white);outline:none;font-family:inherit}
.toolbar input{min-width:200px}
.toolbar input:focus,.toolbar select:focus{border-color:var(--navy)}

/* FORM */
.fg{margin-bottom:11px}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--text2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.fg input,.fg select,.fg textarea{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:12px;font-family:inherit;color:var(--text);background:var(--white);outline:none;transition:border .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,43,90,.06)}
.fg textarea{resize:vertical;min-height:64px;line-height:1.5}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fg4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,20,60,.5);z-index:999;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:var(--r);padding:22px 24px;width:600px;max-width:97vw;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-lg{width:800px}
.modal-xl{width:1000px}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1.5px solid var(--border)}
.mt{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.mc{cursor:pointer;font-size:22px;color:var(--text2);border:none;background:none;line-height:1}
.mc:hover{color:var(--red)}
.modal-tabs{display:flex;gap:0;background:var(--bg);border-radius:var(--rs);padding:3px;margin-bottom:18px}
.modal-tab{flex:1;padding:6px;text-align:center;font-size:11px;font-weight:700;border-radius:4px;cursor:pointer;color:var(--text2)}
.modal-tab.active{background:var(--white);color:var(--navy);box-shadow:var(--shadow)}

/* SECTION DIVIDER */
.sdiv{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:6px}

/* CONFIRM DELETE */
.confirm-box{background:var(--red);color:#fff;border-radius:var(--r);padding:16px 20px;text-align:center}
.confirm-box h3{font-size:15px;margin-bottom:8px}
.confirm-box p{font-size:12px;opacity:.85;margin-bottom:14px}
.confirm-btns{display:flex;gap:8px;justify-content:center}

/* TOAST */
#toast{display:none;position:fixed;bottom:24px;right:24px;border-radius:var(--rs);padding:12px 18px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);z-index:9999;max-width:380px;animation:slideUp .25s ease;font-family:inherit}
@keyframes slideUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
#toast.success{background:var(--green);color:#fff;border-left:4px solid #6DEDB8}
#toast.error{background:var(--red);color:#fff;border-left:4px solid #f5a9a0}
#toast.info{background:var(--navy);color:#fff;border-left:4px solid #FF6B00}
#toast.warn{background:var(--amber);color:#fff;border-left:4px solid #F5A623}

/* PROGRESS BAR */
.prog-wrap{background:var(--bg);border-radius:4px;height:6px;overflow:hidden;margin-top:5px}
.prog-fill{height:100%;border-radius:4px;transition:width .3s}

/* ATTENDANCE */
.att-bar{display:flex;align-items:center;gap:8px;margin:5px 0}
.att-lbl{font-size:11px;color:var(--text2);width:80px;flex-shrink:0}
.att-bg{flex:1;height:7px;background:var(--bg);border-radius:4px;overflow:hidden}
.att-fill{height:100%;border-radius:4px}
.att-pct{font-size:11px;font-weight:700;color:var(--text);width:36px;text-align:right}

/* REPORT CARD */
.rc-page{background:#fff;width:210mm;min-height:297mm;margin:0 auto;padding:15mm;font-family:'Times New Roman',serif;color:#000;box-shadow:var(--shadow-lg)}
@media print{
 body>*:not(#app){display:none!important}
 #app{display:block!important}
 .app-layout,#main,#content{display:block!important;height:auto!important;overflow:visible!important}
 #app>#main>#content .page:not(.active){display:none!important}
 #sidebar,#topbar,.no-print,.btn,.toolbar,.card-head .btn,.t-actions,.modal-overlay:not(.print-active){display:none!important}
 #fee-receipt,#fee-receipt-print,.receipt,.rc-page,.print-area{display:block!important}
 .page.active,.card,.tw{box-shadow:none!important;overflow:visible!important}
 .no-print,.tab-row,#tb-actions,#sidebar,#topbar,.toolbar,.t-actions,.btn{display:none!important}
 .print-only,#fee-receipt,.receipt,.admission-print,.certificate-print,.id-card-print{display:block!important}
 body,#content,.page.active{background:#fff!important}
 table{page-break-inside:auto}
 tr{page-break-inside:avoid;page-break-after:auto}
 .rc-page{box-shadow:none;margin:0;padding:10mm}
 @page{size:A4;margin:10mm}
}
.rc-header{text-align:center;border-bottom:3px double #1A2B5A;padding-bottom:10px;margin-bottom:10px}
.rc-logo-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px}
.rc-logo-circle{width:52px;height:52px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;overflow:hidden}
.rc-logo-circle:empty{background:linear-gradient(135deg,#FF6B00,#F5A623)}
.rc-logo-circle img,.rc-logo-circle .kems-logo{width:100%;height:100%;object-fit:contain;display:block}
.rc-school-name{font-size:18px;font-weight:700;color:#1A2B5A}
.rc-school-sub{font-size:11px;color:#555}
.rc-title-bar{background:#1A2B5A;color:#fff;text-align:center;padding:6px;font-size:14px;font-weight:700;margin:8px 0;letter-spacing:2px}
.rc-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #333;margin-bottom:10px}
.rc-info-cell{padding:5px 8px;font-size:11px;border-bottom:1px solid #ccc;border-right:1px solid #ccc}
.rc-info-cell:nth-child(even){border-right:none}
.rc-info-cell b{color:#1A2B5A}
table.rc-marks{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:10px}
table.rc-marks th{background:#1A2B5A;color:#fff;padding:6px 8px;text-align:center;border:1px solid #333}
table.rc-marks td{padding:5px 8px;border:1px solid #ccc;text-align:center}
table.rc-marks td:first-child{text-align:left}
table.rc-marks tr:nth-child(even){background:#f9f9f9}
.rc-total-row{background:#FFF3CD!important;font-weight:700}
.rc-grade-A{color:#1e7e34;font-weight:700}.rc-grade-B{color:#185FA5;font-weight:700}
.rc-grade-C{color:#b8720a;font-weight:700}.rc-grade-D{color:#c0392b;font-weight:700}
.rc-cca{margin-bottom:10px}
table.rc-cca-table{width:100%;border-collapse:collapse;font-size:11px}
table.rc-cca-table th{background:#243a7a;color:#fff;padding:5px 8px;text-align:left}
table.rc-cca-table td{padding:5px 8px;border:1px solid #ccc}
.rc-sign-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:20px;text-align:center}
.rc-sign-line{border-top:1px solid #333;padding-top:5px;font-size:11px;margin-top:30px}
.rc-remarks-box{border:1px solid #ccc;padding:8px;min-height:40px;font-size:11px;margin-bottom:10px}

/* ID CARD */
.id-card{width:85mm;height:54mm;background:linear-gradient(135deg,#1A2B5A,#243a7a);border-radius:8px;padding:10px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);display:inline-flex;flex-direction:column}
.id-card::before{content:'';position:absolute;width:80px;height:80px;border-radius:50%;background:rgba(255,107,0,.15);bottom:-20px;right:-20px}
.id-card-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.2)}
.id-card-logo{width:24px;height:24px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;overflow:hidden}
.id-card-logo:empty{background:linear-gradient(135deg,#FF6B00,#F5A623)}
.id-card-logo img,.id-card-logo .kems-logo{width:100%;height:100%;object-fit:contain;display:block}
.kems-logo{object-fit:contain;display:block;max-width:100%}
.id-card-school{font-size:8px;font-weight:700;line-height:1.3}
.id-card-body{display:flex;gap:8px;flex:1}
.id-card-photo{width:36px;height:45px;border-radius:4px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.id-card-info{flex:1}
.id-card-name{font-size:11px;font-weight:700;margin-bottom:3px}
.id-card-detail{font-size:8px;opacity:.8;margin-bottom:1px}
.id-card-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:4px}
.id-card-barcode{font-size:6px;opacity:.6;font-family:monospace;letter-spacing:2px}

/* PERMISSIONS UI */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.perm-module{background:var(--bg);border-radius:var(--rs);padding:10px 12px}
.perm-module-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:7px;display:flex;align-items:center;gap:5px}
.perm-checks{display:flex;gap:10px;flex-wrap:wrap}
.perm-check{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);cursor:pointer}
.perm-check input{accent-color:var(--navy)}

/* DASHBOARD WIDGETS */
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px}
.dash-chart{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.chart-bar-wrap{display:flex;align-items:flex-end;gap:6px;height:100px;margin-top:10px}
.chart-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.chart-bar{width:100%;border-radius:4px 4px 0 0;transition:height .3s;min-height:4px}
.chart-bar-lbl{font-size:9px;color:var(--text2);text-align:center}
.chart-bar-val{font-size:9px;font-weight:700;color:var(--text)}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.qa-btn{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer;text-align:center;transition:all .15s;box-shadow:var(--shadow)}
.qa-btn:hover{border-color:var(--saffron);transform:translateY(-1px)}
.qa-icon{font-size:22px;margin-bottom:5px}
.qa-title{font-size:12px;font-weight:700;color:var(--text)}
.qa-sub{font-size:10px;color:var(--text2);margin-top:2px}

/* NOTICE */
.notice-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.notice-item:last-child{border-bottom:none}
.notice-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px}

/* USER MANAGEMENT */
.user-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;margin-bottom:8px;transition:all .15s}
.user-card:hover{border-color:var(--border2);box-shadow:var(--shadow-lg)}
.user-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.user-info{flex:1}
.user-name{font-size:13px;font-weight:700;color:var(--text)}
.user-role{font-size:11px;color:var(--text2);margin-top:2px}
.user-meta{font-size:10px;color:var(--text3);margin-top:2px}

/* FEE STYLES */
.fee-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
.fee-row:last-child{border-bottom:none}

/* CALENDAR */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.cd{text-align:center;font-size:10px;padding:4px 2px;border-radius:4px;color:var(--text2);cursor:pointer}
.cd:hover{background:var(--bg)}
.cd.hd{font-weight:700;font-size:9px;color:var(--text3);cursor:default}
.cd.today{background:var(--navy);color:#fff;font-weight:700}
.cd.ev{background:rgba(255,107,0,.12);color:var(--saffron);font-weight:600}
.cd.hol{background:var(--red);color:#fff;font-weight:600}
.cd.holiday{background:#fdecea;color:var(--red)}

/* TIMETABLE */
.tt-grid{display:grid;grid-template-columns:80px repeat(8,1fr);gap:2px;font-size:10px}
.tt-cell{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:6px 4px;text-align:center;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tt-header{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)}
.tt-period{background:#F7F9FF;font-weight:600;color:var(--text2)}
.tt-subject{font-size:11px;font-weight:600;color:var(--navy);margin-bottom:2px}
.tt-teacher{font-size:9px;color:var(--text2)}

/* SEARCH DROPDOWN */
.srch-dd-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);font-size:12px;display:flex;align-items:center;gap:8px;transition:background .1s}
.srch-dd-item:hover{background:#EBF4FF}
.srch-dd-item:last-child{border-bottom:none}

/* RESPONSIVE */
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}.two-col,.three-col{grid-template-columns:1fr}}
@media(max-width:700px){#sidebar{width:52px}.brand-text,.ngrp,.ni-text,.sb-foot,.school-switch{display:none}.ni{justify-content:center}.stats{grid-template-columns:1fr 1fr}}
.sidebar-toggle{display:none}
/* KEMS visual refresh: UI polish only, no data behavior changes */
body{
 background:
 linear-gradient(180deg,#F7F9FE 0%,#EEF3FB 100%);
 color:var(--text);
 -webkit-font-smoothing:antialiased;
}
#login-page{
 background:
 radial-gradient(circle at 20% 10%,rgba(249,115,22,.14),transparent 28%),
 linear-gradient(135deg,#07142F 0%,#14275F 48%,#213F8B 100%);
}
#login-page::before,#login-page::after{display:none}
.login-box{
 border:1px solid rgba(255,255,255,.72);
 box-shadow:0 28px 80px rgba(2,8,23,.36);
}
.login-logo-circle:not(:has(img)),.brand-logo:not(:has(img)),.rc-logo-circle:not(:has(img)),.id-card-logo:not(:has(img)){
 background:linear-gradient(135deg,#F97316,#F59E0B);
}
#sidebar{
 background:linear-gradient(180deg,#12265D 0%,#172D66 54%,#10224F 100%);
 box-shadow:inset -1px 0 0 rgba(255,255,255,.08);
}
.brand{
 min-height:66px;
 background:rgba(255,255,255,.045);
}
.brand-logo{
 width:42px;
 height:42px;
 box-shadow:0 10px 22px rgba(249,115,22,.28);
}
.brand-name{font-size:12px;letter-spacing:.01em}
.school-switch{
 padding:10px 12px;
 background:rgba(255,255,255,.03);
}
.ss-btn{
 padding:8px 6px;
 border-radius:10px;
}
.ss-btn.active{
 background:rgba(249,115,22,.18);
 border-color:rgba(249,115,22,.5);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.ngrp{
 padding-top:13px;
 color:rgba(255,255,255,.42);
}
.ni{
 margin:2px 8px;
 padding:10px 12px;
 border-radius:10px;
 border-left:0;
 color:rgba(255,255,255,.68);
}
.ni:hover{
 background:rgba(255,255,255,.075);
 color:#fff;
 transform:translateX(2px);
}
.ni.active{
 background:linear-gradient(90deg,rgba(249,115,22,.22),rgba(255,255,255,.055));
 color:#fff;
 box-shadow:inset 3px 0 0 #F97316;
}
.ni:before{
 width:8px;
 height:8px;
 background:rgba(255,255,255,.32);
}
.ni.active:before{
 background:#F97316;
 box-shadow:0 0 0 4px rgba(249,115,22,.18);
}
#topbar{
 height:64px;
 padding:0 24px;
 background:rgba(255,255,255,.94);
 backdrop-filter:saturate(120%) blur(10px);
 border-bottom:1px solid rgba(199,212,238,.85);
 box-shadow:0 8px 22px rgba(16,32,74,.05);
}
.tb-title{
 font-size:18px;
 letter-spacing:0;
}
.tb-search input{
 min-height:40px;
 border-radius:16px;
 background:#F5F8FE;
 border-color:#D6E1F4;
}
.tb-search input:focus{
 background:#fff;
 box-shadow:0 0 0 4px rgba(37,99,235,.08);
}
.tb-icon-btn,.tb-user,.tb-logout{
 min-height:40px;
 border-radius:16px;
}
.tb-icon-btn{
 background:#F3F6FC;
}
.tb-user{
 padding:6px 12px 6px 7px;
 background:#F7FAFF;
}
.tb-avatar{
 width:34px;
 height:34px;
}
#content{
 padding:22px 26px 34px;
}
.toolbar{
 background:rgba(255,255,255,.66);
 border:1px solid rgba(221,230,247,.9);
 border-radius:16px;
 padding:12px;
 box-shadow:0 8px 24px rgba(16,32,74,.05);
}
.toolbar input,.toolbar select,.fg input,.fg select,.fg textarea{
 border-radius:10px;
 min-height:40px;
 background:#fff;
}
.toolbar input:focus,.toolbar select:focus,.fg input:focus,.fg select:focus,.fg textarea:focus{
 border-color:#2563EB;
 box-shadow:0 0 0 4px rgba(37,99,235,.09);
}
.stats{
 gap:16px;
 margin-bottom:20px;
}
.stat{
 min-height:112px;
 padding:20px 22px;
 border-radius:16px;
 background:
 linear-gradient(180deg,#FFFFFF 0%,#FBFDFF 100%);
 border:1px solid #DDE7F8;
 box-shadow:0 14px 34px rgba(16,32,74,.08);
}
.stat:hover{
 transform:translateY(-3px);
 box-shadow:0 18px 40px rgba(16,32,74,.12);
}
.stat:before{
 height:6px;
}
.stat-val{
 font-size:30px;
 line-height:1.05;
 font-weight:850;
}
.stat-lbl{
 font-size:13px;
 margin-top:8px;
 color:#465A87;
}
.stat-sub{
 font-size:11px;
 margin-top:6px;
}
#pg-dashboard:not(.active){
 display:none !important;
}
#pg-dashboard.active{
 display:block;
}
#pg-dashboard #dash-stats{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:16px;
 margin-bottom:28px;
 align-items:stretch;
 position:relative;
 z-index:1;
}
#pg-dashboard .dash-grid{
 display:grid;
 grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
 gap:18px;
 margin-top:0;
 margin-bottom:18px;
 clear:both;
 align-items:start;
 position:relative;
 z-index:0;
}
#pg-dashboard .dash-chart{
 min-width:0;
 overflow:hidden;
}
#pg-dashboard #fee-chart{
 max-height:320px;
 overflow:auto;
}
#pg-dashboard .two-col{
 clear:both;
 margin-top:18px;
}
.card{
 border-radius:16px;
 border:1px solid #DDE7F8;
 background:#fff;
 box-shadow:0 12px 30px rgba(16,32,74,.07);
}
.card-head{
 min-height:58px;
 padding:16px 18px;
 background:linear-gradient(180deg,#FBFDFF,#F6F9FF);
}
.card-title{
 font-size:15px;
 letter-spacing:0;
}
table.t th{
 padding:12px 14px;
 background:#F3F7FF;
 color:#52668F;
 font-size:11px;
}
table.t td{
 padding:13px 14px;
}
table.t tbody tr{
 transition:background .12s, box-shadow .12s;
}
table.t tbody tr:hover{
 background:#F7FAFF;
 box-shadow:inset 3px 0 0 #F97316;
}
.b{
 min-height:24px;
 padding:4px 10px;
 border-radius:999px;
}
.btn{
 min-height:40px;
 padding:9px 15px;
 border-radius:10px;
 box-shadow:0 6px 16px rgba(16,32,74,.08);
}
.btn:hover{
 transform:translateY(-1px);
 box-shadow:0 10px 24px rgba(16,32,74,.12);
}
.btn-xs{
 min-height:30px;
 padding:5px 9px;
}
.btn-sm{
 min-height:34px;
}
.btn-navy{
 background:linear-gradient(135deg,#14275F,#203C88);
}
.btn-saffron{
 background:linear-gradient(135deg,#F97316,#EA580C);
}
.btn-green{
 background:linear-gradient(135deg,#15803D,#0F766E);
}
.btn-red{
 background:linear-gradient(135deg,#B91C1C,#DC2626);
}
.btn-out{
 background:#fff;
}
.modal-overlay{
 background:rgba(7,20,47,.62);
 backdrop-filter:blur(6px);
}
.modal{
 border-radius:18px;
 border:1px solid rgba(255,255,255,.75);
 box-shadow:0 26px 70px rgba(2,8,23,.26);
}
.mh{
 margin:-2px 0 20px;
}
.mt{
 font-size:18px;
}
.mc{
 width:36px;
 height:36px;
 border-radius:50%;
 background:#F3F6FC;
 color:#31466F;
}
.mc:hover{
 background:#FEE2E2;
 color:#B91C1C;
}
.srch-dd-item{
 padding:11px 13px;
}
.srch-dd-item:hover,.srch-dd-item[data-fee-active="1"]{
 background:#EFF6FF!important;
}
.dash-grid,.two-col,.three-col{
 gap:18px;
}
.quick-actions{
 gap:12px;
}
.qa-btn{
 border-radius:14px;
 padding:16px 12px;
}
.qa-btn:hover{
 border-color:#F97316;
 box-shadow:0 14px 30px rgba(249,115,22,.13);
}
@media(max-width:900px){
 #topbar{height:auto;min-height:60px;gap:8px;flex-wrap:wrap;padding:10px 14px}
 #content{padding:16px 12px 74px}
 .toolbar{padding:10px}
 .stats{grid-template-columns:1fr}
 .stat{min-height:96px}
}

/* Inactive pages: defer layout/paint until opened */
.page:not(.active){
 content-visibility:auto;
 contain-intrinsic-size:1px 800px;
}

.kems-app-loading{
 display:none;
 position:fixed;
 inset:0;
 z-index:9998;
 background:rgba(255,255,255,.72);
 backdrop-filter:blur(2px);
 align-items:center;
 justify-content:center;
}
.kems-app-loading.visible{display:flex;}
.kems-app-loading-card{
 background:var(--white,#fff);
 border:1px solid var(--border,#e5e7eb);
 border-radius:var(--rs,8px);
 padding:20px 28px;
 box-shadow:var(--shadow-lg,0 10px 40px rgba(0,0,0,.08));
 text-align:center;
 min-width:220px;
}
.kems-app-loading-text{
 font-size:12px;
 color:var(--text2,#64748b);
 margin-top:12px;
}
.kems-skeleton-pulse{
 width:140px;
 height:8px;
 border-radius:999px;
 margin:0 auto;
 background:linear-gradient(90deg,#e2e8f0 25%,#f8fafc 50%,#e2e8f0 75%);
 background-size:200% 100%;
 animation:kemsSkeletonPulse 1.2s ease-in-out infinite;
}
@keyframes kemsSkeletonPulse{
 0%{background-position:200% 0}
 100%{background-position:-200% 0}
}


/* Mobile app shell */
@media(max-width:768px){#sidebar{width:100%!important;height:56px!important;position:fixed!important;bottom:0!important;top:auto!important;left:0!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;z-index:9999!important;padding:0!important}.brand{display:none!important}.nav-section-title{display:none!important}.nav-item{flex-direction:column!important;min-width:60px!important;padding:4px!important;font-size:8px!important;align-items:center!important;justify-content:center!important;height:56px!important}.main-content{margin-left:0!important;padding-bottom:70px!important}.login-box{width:100%!important;min-height:100vh!important;border-radius:0!important;padding:20px 16px!important;margin:0!important;max-width:100%!important}.card{padding:10px!important}table{font-size:11px!important}.modal-box{width:96%!important;margin:10px auto!important}}