:root{
  --navy:#0E294A; --cyan:#5BAAAE; --gray:#8E8E8E;
  --white:#FFFFFF; --border:#E0E0E0; --bg:#F7F8FA;
  --text:#1A1A2E; --sm:#555; --r:8px; --t:0.2s ease;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Aptos','Segoe UI',-apple-system,Helvetica,Arial,sans-serif;font-size:14px;color:var(--text);background:var(--bg);}

/* ── LOGIN ─────────────────────────────── */
#loginScreen{min-height:100vh;display:flex;flex-direction:row;}
.login-left{width:44%;min-width:360px;display:flex;flex-direction:column;justify-content:center;padding:60px 64px;background:var(--white);}
.login-right{flex:1;background:linear-gradient(145deg,#0E294A 0%,#125060 45%,#5BAAAE 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.login-right::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 40%,rgba(91,170,174,0.25) 0%,transparent 60%);pointer-events:none;}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:38px;}
.login-brand-icon{width:38px;height:38px;flex-shrink:0;}
.login-brand-sep{width:1px;height:30px;background:var(--border);}
.login-brand-text .prod{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-0.4px;line-height:1;}
.login-brand-text .prod em{color:var(--cyan);font-style:normal;}
.login-brand-text .tm{font-size:9px;vertical-align:super;color:var(--gray);}
.login-brand-text .byline{font-size:10px;color:var(--gray);margin-top:3px;}
.login-h1{font-size:26px;font-weight:800;color:var(--navy);margin-bottom:6px;line-height:1.25;}
.login-sub{font-size:13px;color:var(--gray);margin-bottom:26px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;font-weight:700;color:var(--navy);letter-spacing:0.6px;text-transform:uppercase;margin-bottom:6px;}
.field .in-wrap{position:relative;}
.field .in-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#BDBDBD;font-size:13px;pointer-events:none;font-style:normal;}
.field input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--border);border-radius:var(--r);font-size:14px;font-family:inherit;color:var(--text);outline:none;background:#FAFAFA;transition:border-color var(--t),background var(--t);}
.field input:focus{border-color:var(--cyan);background:var(--white);}
.login-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.login-remember{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sm);cursor:pointer;}
.login-remember input[type=checkbox]{width:14px;height:14px;accent-color:var(--cyan);}
.login-forgot{font-size:12px;color:var(--cyan);font-weight:600;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;}
.btn-login{width:100%;padding:12px;background:var(--cyan);color:var(--white);border:none;border-radius:var(--r);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:background var(--t);letter-spacing:0.2px;}
.btn-login:hover{background:#4a9598;}
.login-err{font-size:12px;color:#c0392b;margin-top:10px;text-align:center;display:none;padding:8px 12px;background:#FFF5F5;border:1px solid #FFCDD2;border-radius:var(--r);}
.login-hints{margin-top:22px;border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;background:#FAFAFA;}
.login-hints .hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:var(--gray);margin-bottom:9px;}
.login-hints .hint-row{display:flex;gap:8px;align-items:center;padding:3px 0;}
.login-hints .role-tag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;border:1px solid var(--cyan);color:var(--cyan);text-transform:uppercase;letter-spacing:0.4px;width:52px;text-align:center;flex-shrink:0;}
.login-hints .cred{font-size:12px;color:var(--sm);}
.login-hints .cred strong{color:var(--navy);}
/* RIGHT PANEL */
.rp-gnaan-logo{position:relative;z-index:1;margin-bottom:36px;text-align:center;}
.rp-gnaan-logo img{height:80px;width:auto;}
.rp-illus{position:relative;z-index:1;margin-bottom:36px;}
.rp-card{background:rgba(255,255,255,0.96);border-radius:12px;width:240px;padding:16px 18px;box-shadow:0 12px 48px rgba(0,0,0,0.22);}
.rp-win-dots{display:flex;gap:5px;margin-bottom:14px;}
.rp-win-dot{width:8px;height:8px;border-radius:50%;}
.rp-rows{display:flex;flex-direction:column;gap:11px;}
.rp-row{display:flex;align-items:center;gap:10px;}
.rp-ava{width:30px;height:30px;border-radius:50%;background:var(--navy);flex-shrink:0;}
.rp-lines{flex:1;display:flex;flex-direction:column;gap:5px;}
.rp-line{height:5px;border-radius:3px;background:#E8E8E8;}
.rp-float{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:16px;backdrop-filter:blur(4px);}
.rp-tagline{position:relative;z-index:1;text-align:center;}
.rp-tagline h2{font-size:24px;font-weight:800;color:var(--white);margin-bottom:8px;letter-spacing:-0.3px;}
.rp-tagline p{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.6;}
.rp-ind{display:flex;gap:6px;justify-content:center;margin-top:16px;}
.rp-ind-dot{height:7px;border-radius:4px;background:rgba(255,255,255,0.3);}
.rp-ind-dot.act{width:20px;background:rgba(255,255,255,0.9);}
.rp-ind-dot:not(.act){width:7px;}

/* ── APP SHELL ────────────────────────── */
#app{display:flex;min-height:100vh;}

/* ── SIDEBAR ──────────────────────────── */
.sidebar{width:212px;flex-shrink:0;background:var(--navy);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;}
.sb-brand{padding:18px 18px 15px;border-bottom:1px solid rgba(255,255,255,0.08);}
.sb-brand .logo{font-size:19px;font-weight:800;color:var(--white);letter-spacing:-0.5px;}
.sb-brand .logo em{color:var(--cyan);font-style:normal;}
.sb-brand .role-chip{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;padding:2px 8px;border:1px solid var(--cyan);color:var(--cyan);border-radius:20px;margin-top:5px;}
.sb-nav{flex:1;padding:10px 0;overflow-y:auto;}
.sb-section{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.26);padding:10px 18px 3px;}
.sb-item{display:flex;align-items:center;gap:9px;padding:8px 18px;font-size:13px;color:rgba(255,255,255,0.58);cursor:pointer;transition:all var(--t);border-left:2px solid transparent;}
.sb-item:hover{color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.05);}
.sb-item.active{color:var(--cyan);background:rgba(91,170,174,0.11);border-left-color:var(--cyan);}
.sb-icon{font-size:13px;width:18px;text-align:center;}
.sb-footer{padding:13px 18px;border-top:1px solid rgba(255,255,255,0.08);}
.sb-user{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.sb-avatar{width:30px;height:30px;border-radius:50%;background:var(--cyan);color:var(--white);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-name{font-size:12px;font-weight:600;color:var(--white);}
.sb-email{font-size:10px;color:rgba(255,255,255,0.38);}
.btn-logout{width:100%;padding:7px;background:transparent;border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.52);border-radius:var(--r);font-size:12px;font-family:inherit;cursor:pointer;transition:all var(--t);}
.btn-logout:hover{border-color:rgba(255,255,255,0.45);color:var(--white);}

/* ── MAIN ─────────────────────────────── */
.main{margin-left:212px;flex:1;min-height:100vh;display:flex;flex-direction:column;}
.topbar{height:52px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:100;}
.topbar-title{font-size:15px;font-weight:700;color:var(--navy);flex:1;}
.topbar-date{font-size:12px;color:var(--gray);}
.page{padding:20px 24px;}

/* ── CARDS ────────────────────────────── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px;}
.card-hd{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--gray);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}

/* ── KPI ──────────────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;}
.kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--gray);margin-bottom:8px;}
.kpi-val{font-size:30px;font-weight:800;color:var(--navy);line-height:1;margin-bottom:6px;}
.kpi-sub{font-size:11px;color:var(--gray);display:flex;align-items:center;gap:5px;}

/* ── PILLS ────────────────────────────── */
.pill{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;}
.pill-g{color:#2E7D32;border:1px solid #C8E6C9;background:#F1F8F1;}
.pill-r{color:#c0392b;border:1px solid #FFCDD2;background:#FFF5F5;}
.pill-y{color:#E65100;border:1px solid #FFE0B2;background:#FFF8F1;}
.pill-b{color:var(--navy);border:1px solid #BBDEFB;background:#EEF4FD;}
.pill-c{color:#00796B;border:1px solid #B2DFDB;background:#F0FAF9;}

/* ── BADGES ───────────────────────────── */
.badge{display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px;}
.badge-g{color:#2E7D32;border:1px solid #C8E6C9;}
.badge-r{color:#c0392b;border:1px solid #FFCDD2;}
.badge-y{color:#E65100;border:1px solid #FFE0B2;}
.badge-b{color:var(--navy);border:1px solid #BBDEFB;}
.badge-c{color:#00796B;border:1px solid #B2DFDB;}

/* ── GRIDS ────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.g-6535{display:grid;grid-template-columns:1.65fr 1fr;gap:14px;}
.g-4060{display:grid;grid-template-columns:1fr 1.55fr;gap:14px;}
.mb14{margin-bottom:14px;} .mb18{margin-bottom:18px;} .mt10{margin-top:10px;} .mt14{margin-top:14px;}

/* ── TABLE ────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray);padding:7px 10px;text-align:left;border-bottom:1px solid var(--border);}
.tbl td{padding:9px 10px;border-bottom:1px solid #F3F3F3;font-size:13px;color:var(--text);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover td{background:#FAFAFA;}

/* ── BUTTONS ──────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border:1px solid var(--border);border-radius:var(--r);font-size:12px;font-weight:500;font-family:inherit;background:var(--white);color:var(--sm);cursor:pointer;transition:all var(--t);}
.btn:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-dark{background:var(--navy);color:var(--white);border-color:var(--navy);}
.btn-dark:hover{background:#16375f;color:var(--white);border-color:#16375f;}
.btn-sm{padding:4px 9px;font-size:11px;}

/* ── SEARCH ROW ───────────────────────── */
.search-row{display:flex;gap:10px;margin-bottom:14px;align-items:center;}
.search-in{padding:7px 11px;border:1px solid var(--border);border-radius:var(--r);font-size:13px;font-family:inherit;outline:none;transition:border-color var(--t);}
.search-in:focus{border-color:var(--cyan);}
.search-in.flex1{flex:1;}

/* ── PAGE HEADER ──────────────────────── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.ph h2{font-size:20px;font-weight:800;color:var(--navy);}
.ph p{font-size:12px;color:var(--gray);margin-top:2px;}

/* ── AVATAR ───────────────────────────── */
.s-ava{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--white);flex-shrink:0;}

/* ── SCHEDULE ─────────────────────────── */
.sched-item{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #F5F5F5;}
.sched-item:last-child{border-bottom:none;}
.sched-time{width:80px;font-size:11px;font-weight:600;color:var(--gray);flex-shrink:0;padding-top:1px;}
.sched-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-top:4px;flex-shrink:0;}
.sched-subj{font-size:13px;font-weight:600;color:var(--navy);}
.sched-info{font-size:11px;color:var(--gray);margin-top:1px;}

/* ── EVENTS ───────────────────────────── */
.ev-item{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #F5F5F5;}
.ev-item:last-child{border-bottom:none;}
.ev-date{width:36px;text-align:center;flex-shrink:0;}
.ev-dd{font-size:20px;font-weight:800;color:var(--navy);line-height:1;}
.ev-mm{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--cyan);}
.ev-title{font-size:13px;font-weight:600;color:var(--navy);}
.ev-desc{font-size:11px;color:var(--gray);margin-top:2px;}

/* ── ANNOUNCEMENTS ────────────────────── */
.ann-item{padding:10px 0;border-bottom:1px solid #F5F5F5;}
.ann-item:last-child{border-bottom:none;}
.ann-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px;}
.ann-meta{font-size:10px;color:var(--gray);}
.ann-body{font-size:12px;color:var(--sm);margin-top:4px;line-height:1.55;}

/* ── ATT BAR ──────────────────────────── */
.att-bar{height:4px;background:var(--border);border-radius:2px;margin-top:4px;}
.att-fill{height:100%;border-radius:2px;background:var(--cyan);}
.att-fill.warn{background:#FF9800;}
.att-fill.low{background:#f44336;}

/* ── FEE ROW ──────────────────────────── */
.fee-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F5F5F5;font-size:13px;}
.fee-row:last-child{border-bottom:none;}

/* ── GRADE / EXAM ROWS ────────────────── */
.grade-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;}
.grade-item:last-child{border-bottom:none;}
.exam-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #F5F5F5;}
.exam-item:last-child{border-bottom:none;}
.mini-bar{width:70px;height:4px;background:var(--border);border-radius:2px;}
.mini-fill{height:100%;border-radius:2px;background:var(--cyan);}

/* ── MODAL ────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(14,41,74,0.38);z-index:500;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.modal{background:var(--white);border:1px solid var(--border);border-radius:var(--r);width:780px;max-height:91vh;display:flex;flex-direction:column;}
.modal-hd{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-hd h3{font-size:16px;font-weight:800;color:var(--navy);}
.modal-hd p{font-size:12px;color:var(--gray);margin-top:2px;}
.modal-x{width:26px;height:26px;border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gray);font-size:14px;background:none;transition:all var(--t);flex-shrink:0;font-family:inherit;}
.modal-x:hover{border-color:var(--navy);color:var(--navy);}
.modal-body{overflow-y:auto;flex:1;}

/* ── PROFILE HERO ─────────────────────── */
.prof-hero{display:flex;gap:16px;align-items:flex-start;padding:18px 22px;border-bottom:1px solid var(--border);}
.prof-ava{width:70px;height:70px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--white);flex-shrink:0;}
.prof-name{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:3px;}
.prof-id{font-size:12px;color:var(--gray);margin-bottom:8px;}
.prof-tags{display:flex;gap:6px;flex-wrap:wrap;}

/* ── TABS ─────────────────────────────── */
.tabs{display:flex;border-bottom:1px solid var(--border);padding:0 22px;overflow-x:auto;}
.tab{padding:9px 14px;font-size:12px;font-weight:600;color:var(--gray);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--t);font-family:inherit;background:none;border-top:none;border-left:none;border-right:none;white-space:nowrap;}
.tab:hover{color:var(--navy);}
.tab.active{color:var(--navy);border-bottom-color:var(--cyan);}
.tab-pane{display:none;padding:18px 22px;}
.tab-pane.active{display:block;}

/* ── INFO GRID ────────────────────────── */
.ig{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ig-item label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray);display:block;margin-bottom:3px;}
.ig-item span{font-size:13px;color:var(--text);}
.ig-full{grid-column:1/-1;}

/* ── SECTION TITLE ────────────────────── */
.sec-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--gray);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}

/* ── ACADEMIC HISTORY ROW ─────────────── */
.ah-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #F5F5F5;}
.ah-row:last-child{border-bottom:none;}
.ah-yr{font-size:12px;font-weight:600;color:var(--gray);width:72px;flex-shrink:0;}
.ah-cls{font-size:13px;font-weight:600;color:var(--navy);width:60px;flex-shrink:0;}
.ah-bar{flex:1;height:4px;background:var(--border);border-radius:2px;}
.ah-fill{height:100%;border-radius:2px;background:var(--cyan);}
.ah-score{font-size:13px;font-weight:700;color:var(--navy);width:36px;text-align:right;}

/* ── HEALTH ITEM ──────────────────────── */
.h-item{padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;}
.h-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray);margin-bottom:3px;}
.h-val{font-size:13px;color:var(--text);}

/* ── DOCUMENT ITEM ────────────────────── */
.doc-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;}
.doc-icon{width:32px;height:32px;background:#F0F7F7;border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.doc-name{font-size:13px;font-weight:500;color:var(--navy);}
.doc-info{font-size:11px;color:var(--gray);}
.doc-status{margin-left:auto;}

/* ── ID CARD ──────────────────────────── */
.id-card{width:300px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:0 auto;}
.id-card-top{background:var(--navy);padding:14px;text-align:center;}
.id-card-top .school{font-size:13px;font-weight:700;color:var(--white);letter-spacing:0.3px;}
.id-card-top .city{font-size:10px;color:rgba(255,255,255,0.48);margin-top:2px;}
.id-card-mid{padding:14px;display:flex;gap:12px;align-items:flex-start;}
.id-photo{width:58px;height:70px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--white);flex-shrink:0;}
.icd-name{font-size:13px;font-weight:700;color:var(--navy);}
.icd-f{font-size:11px;color:var(--gray);margin-top:3px;}
.id-card-bot{background:var(--cyan);padding:7px 14px;text-align:center;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--white);text-transform:uppercase;}

/* ── ALERT BOX ────────────────────────── */
.alert-warn{padding:11px 14px;background:#FFF8F1;border:1px solid #FFE0B2;border-radius:var(--r);margin-top:10px;}
.alert-warn .al{font-size:11px;font-weight:700;color:#E65100;margin-bottom:3px;text-transform:uppercase;letter-spacing:0.4px;}
.alert-warn p{font-size:13px;color:var(--sm);}
.alert-ok{padding:11px 14px;background:#F1F8F1;border:1px solid #C8E6C9;border-radius:var(--r);margin-top:10px;}
.alert-ok p{font-size:13px;color:#2E7D32;}

/* ── COMING SOON ──────────────────────── */
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:var(--gray);}
.coming-soon .icon{font-size:46px;margin-bottom:16px;}
.coming-soon h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.coming-soon p{font-size:13px;}

/* ── MISC ─────────────────────────────── */
.hidden{display:none!important;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:#DDD;border-radius:2px;}
.divider{height:1px;background:var(--border);margin:14px 0;}
/* ── ACADEMICS / CLASS MANAGEMENT ──────── */
.page-header{margin-bottom:24px;}

/* generic table for academic views */
.table{width:100%;border-collapse:collapse;margin-top:16px;}
.table th, .table td{border:1px solid var(--border);padding:8px;text-align:left;font-size:13px;}
.table th{background:#F5F5F5;font-weight:700;}
.page-header h1{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:4px;}
.page-header p{font-size:13px;color:var(--sm);}

.admin-controls{margin-bottom:20px;display:flex;gap:10px;}
.btn-primary{padding:10px 16px;background:var(--cyan);color:var(--white);border:none;border-radius:var(--r);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background var(--t);}
.btn-primary:hover{background:#4a9598;}
.btn-secondary{padding:8px 14px;background:#F5F5F5;color:var(--text);border:1px solid var(--border);border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background var(--t);}
.btn-secondary:hover{background:#EBEBEB;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-icon{width:28px;height:28px;padding:0;border:none;background:none;cursor:pointer;font-size:13px;color:var(--navy);border-radius:4px;transition:background var(--t);}
.btn-icon:hover{background:#F0F0F0;}
.btn-icon.danger:hover{background:#FFE0E0;color:#C41C3B;}

.classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:24px;}

.grade-section{margin-bottom:28px;}
.grade-section h3{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--cyan);}

.class-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}

.class-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--white);display:flex;flex-direction:column;transition:box-shadow var(--t),border-color var(--t);}
.class-card:hover{border-color:var(--cyan);box-shadow:0 4px 16px rgba(91,170,174,0.1);}

.card-header{padding:12px 14px;background:#F9F9F9;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.card-header h4{font-size:15px;font-weight:800;color:var(--navy);margin:0;}
.card-actions{display:flex;gap:4px;}

.card-body{padding:12px 14px;flex:1;}
.card-body p{margin:8px 0;font-size:13px;color:var(--text);}
.card-body p strong{color:var(--navy);}
.card-body small{display:block;color:var(--gray);font-size:11px;margin-top:6px;}

.card-footer{padding:10px 14px;border-top:1px solid var(--border);display:flex;gap:8px;}
.card-footer .btn{flex:1;}

.badge{display:inline-block;padding:4px 8px;background:var(--cyan);color:var(--white);border-radius:3px;font-size:11px;font-weight:700;}
.badge-info{display:inline-block;padding:4px 10px;background:#E3F2FD;color:#1565C0;border-radius:3px;font-size:11px;font-weight:700;}

.summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border);}
.stat-box{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);text-align:center;}
.stat-value{font-size:28px;font-weight:800;color:var(--cyan);margin-bottom:4px;}
.stat-label{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:0.3px;font-weight:700;}

/* Student View - My Class */
.student-class-info{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px;}
.info-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.info-card h3{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.info-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;border-bottom:1px dashed var(--border);}
.info-row:last-child{border-bottom:none;}
.info-row label{font-weight:700;color:var(--navy);}
.info-row span{color:var(--text);}

.subject-list{list-style:none;padding:0;margin:0;}
.subject-list li{padding:8px 0;font-size:13px;color:var(--text);border-bottom:1px dashed var(--border);}
.subject-list li:last-child{border-bottom:none;}

.timetable-section{margin-top:24px;padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);}
.timetable-section h3{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:12px;}

/* Curriculum */
.curriculum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px;}
.curriculum-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--white);}
.curriculum-card .card-header{padding:12px;background:#F9F9F9;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.curriculum-card h4{font-size:15px;font-weight:800;color:var(--navy);margin:0;}

/* Timetables */
.timetables-list{margin-top:16px;}
.timetable-card{margin-bottom:24px;padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);}
.timetable-card h3{font-size:16px;font-weight:800;color:var(--navy);margin:0 0 12px 0;}
.timetable-grid{display:grid;gap:4px;margin:12px 0;}
.grid-row{display:grid;grid-template-columns:80px repeat(5,1fr);gap:4px;}
.grid-cell{padding:6px;border:1px solid var(--border);font-size:11px;text-align:center;background:var(--white);}
.grid-cell.header{background:#F5F5F5;font-weight:700;color:var(--navy);}
.grid-row:nth-child(odd) .grid-cell:not(.header){background:#FAFAFA;}

/* Timetable & Scheduling Module */
.timetable-menu{display:flex;gap:8px;margin-bottom:24px;}
.timetable-menu .menu-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;}
.timetable-menu .menu-btn:hover{background:#F5F5F5;}
.timetable-menu .menu-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);}

.timetables-section .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.timetables-section .header-actions{display:flex;gap:8px;align-items:center;}

.timetable-grid{display:grid;grid-template-columns:100px repeat(5,1fr);gap:2px;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#F9F9F9;}
.timetable-grid .grid-header{display:contents;}
.timetable-grid .grid-header .day-column,.timetable-grid .grid-header .time-column{background:#E3F2FD;color:var(--navy);font-weight:700;font-size:12px;padding:12px;text-align:center;border-bottom:1px solid var(--border);}
.timetable-grid .grid-row{display:contents;}
.timetable-grid .grid-row .time-column{background:#F5F5F5;color:var(--navy);font-weight:600;font-size:11px;padding:8px;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid #E0E0E0;}
.timetable-grid .slot-cell{background:var(--white);border:1px solid #E0E0E0;padding:8px;text-align:center;font-size:11px;cursor:pointer;transition:all 0.2s;}
.timetable-grid .slot-cell:hover{background:#FFF8E1;}
.timetable-grid .slot-cell.empty{background:#FAFAFA;color:#999;cursor:pointer;}
.timetable-grid .slot-cell .subject{font-weight:700;color:var(--navy);margin-bottom:2px;}
.timetable-grid .slot-cell .teacher{font-size:10px;color:#666;margin-bottom:1px;}
.timetable-grid .slot-cell .room{font-size:10px;color:#999;font-style:italic;}

.assignments-section .assignments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px;}
.faculty-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.faculty-card .faculty-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.faculty-card h4{font-size:16px;font-weight:800;color:var(--navy);margin:0;}
.faculty-card .faculty-details{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.faculty-card .detail-item{text-align:center;}
.faculty-card .detail-item span{display:block;font-size:10px;color:#666;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.faculty-card .detail-item strong{font-size:18px;font-weight:800;color:var(--navy);}
.faculty-card .faculty-actions{display:flex;gap:6px;}

.conflicts-section .conflicts-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0;}
.conflicts-section .summary-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center;}
.conflicts-section .summary-card .stat-value{font-size:24px;font-weight:800;margin-bottom:4px;}
.conflicts-section .summary-card .stat-label{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.5px;}
.conflicts-section .conflicts-list{margin-top:16px;}
.conflict-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;}
.conflict-card .conflict-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.conflict-card h4{font-size:14px;font-weight:700;margin:0 0 4px 0;}
.conflict-card .conflict-badges{display:flex;gap:6px;}
.conflict-card .conflict-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:12px;}
.conflict-card .detail-item{display:flex;flex-direction:column;}
.conflict-card .detail-item span{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.conflict-card .detail-item strong{font-size:13px;font-weight:600;color:var(--navy);}
.conflict-card .conflict-actions{display:flex;gap:6px;}

.substitutes-section .substitutes-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;}
.substitutes-section .summary-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center;}
.substitutes-section .summary-card .stat-value{font-size:24px;font-weight:800;margin-bottom:4px;}
.substitutes-section .summary-card .stat-label{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.5px;}
.substitutes-section .substitutes-list{margin-top:16px;}
.substitute-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;}
.substitute-card .substitute-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.substitute-card h4{font-size:14px;font-weight:700;margin:0 0 4px 0;}
.substitute-card .substitute-details{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.substitute-card .detail-row{display:flex;flex-direction:column;}
.substitute-card .detail-row span{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.substitute-card .detail-row strong{font-size:13px;font-weight:600;color:var(--navy);}
.substitute-card .substitute-actions{display:flex;gap:6px;}

.faculty-timetable .timetable-grid{grid-template-columns:100px repeat(5,1fr);}
.faculty-timetable .slot-cell.faculty-slot{background:#E8F5E8;border-color:#4CAF50;}
.faculty-timetable .slot-cell.faculty-slot .subject{color:#2E7D32;}
.faculty-timetable .slot-cell.faculty-slot .class-info{font-size:10px;color:#666;margin-bottom:1px;}
.faculty-timetable .faculty-actions{display:flex;gap:8px;margin-top:16px;}

.student-timetable .timetable-grid{grid-template-columns:100px repeat(5,1fr);}
.student-timetable .slot-cell.student-slot{background:#FFF3E0;border-color:#FF9800;}
.student-timetable .slot-cell.student-slot .subject{color:#E65100;}
.student-timetable .timetable-info{background:#FFF8E1;border:1px solid #FFE082;border-radius:6px;padding:12px;margin-bottom:16px;}
.student-timetable .timetable-info h3{font-size:16px;font-weight:700;color:#E65100;margin:0 0 4px 0;}
.student-timetable .timetable-info p{font-size:13px;color:#666;margin:0;}
.student-timetable .student-actions{display:flex;gap:8px;margin-top:16px;}

/* Lesson Plans */
.plans-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px;}
.plan-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--white);}
.plan-card .card-header{padding:12px;background:#F9F9F9;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.plan-card h4{font-size:14px;font-weight:800;color:var(--navy);margin:0;}
.plan-card .card-actions{display:flex;gap:6px;align-items:center;}

/* Assignments */
.assignments-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px;}
.assignment-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--white);}
.assignment-card .badge-pending{background:#FFF3CD;color:#856404;}
.assignment-card .badge-due-soon{background:#FFE4E1;color:#C41C3B;}
.assignment-card .badge-completed{background:#D4EDDA;color:#155724;}

/* Syllabus */
.syllabus-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:16px;}
.progress-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--white);}
.progress-card .card-header{padding:12px;background:#F9F9F9;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.progress-bar{width:100%;height:20px;background:#EEE;border-radius:4px;overflow:hidden;margin:8px 0;}
.progress-fill{height:100%;transition:width 0.3s ease;}

/* Filter bar */
.filter-bar{padding:12px;background:#F5F5F5;border-radius:var(--r);margin:12px 0;display:flex;align-items:center;gap:10px;}
.filter-bar label{font-weight:700;font-size:13px;color:var(--navy);}
.filter-bar select{padding:6px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;}
/* Attendance */
.attendance-controls{padding:12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;display:flex;align-items:center;gap:12px;}
.attendance-controls label{font-weight:700;font-size:13px;color:var(--navy);margin-right:8px;}
.attendance-controls select,.attendance-controls input{padding:8px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;}

.attendance-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0;}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center;}
.stat-card .stat-value{font-size:28px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.stat-card .stat-label{font-size:12px;color:var(--sm);text-transform:uppercase;letter-spacing:0.5px;}

.attendance-status{padding:12px;background:#F0F7F7;border-left:4px solid var(--cyan);border-radius:4px;margin:12px 0;}
.attendance-status h3{font-size:14px;font-weight:700;margin:0 0 6px 0;}
.attendance-status p{font-size:13px;color:var(--sm);margin:0;}

.attendance-history{margin-top:20px;padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);}
.attendance-history h3{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 12px 0;}

.attendance-list{display:flex;flex-direction:column;gap:8px;}
.attendance-item{display:flex;gap:12px;padding:8px;background:#F9F9F9;border-radius:4px;align-items:center;font-size:13px;}
.attendance-item .date{min-width:85px;font-weight:700;color:var(--navy);}
.attendance-item .status{font-weight:700;min-width:80px;}
.attendance-item .reason{color:var(--sm);font-style:italic;flex:1;}

.admin-controls{padding:12px;background:#F5F5F5;border-radius:var(--r);margin-bottom:16px;display:flex;gap:10px;flex-wrap:wrap;}

.alerts-section{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:20px;}
.alerts-section h3{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 12px 0;}

.alerts-list{display:flex;flex-direction:column;gap:10px;}
.alert-box{padding:12px;border-radius:4px;border-left:4px solid;}
.alert-box .alert-student{font-weight:700;color:var(--navy);margin-bottom:4px;}
.alert-box .alert-details{font-size:12px;color:var(--sm);margin-bottom:8px;}

.summary-section{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:20px;}
.summary-section h3{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 12px 0;}

.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.summary-card{border:1px solid var(--border);border-radius:var(--r);padding:12px;background:#F9F9F9;}
.summary-card .card-title{font-weight:700;color:var(--navy);margin-bottom:8px;}
.summary-card .card-stat{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;}

.records-section{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);}
.records-section h3{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 12px 0;}
/* Grades & Exams */
.grade-menu{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap;}
.menu-btn{padding:10px 16px;background:#F5F5F5;border:1px solid var(--border);border-radius:var(--r);font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;transition:all var(--t);}
.menu-btn:hover{background:var(--cyan);color:white;border-color:var(--cyan);}
.menu-btn.active{background:var(--cyan);color:white;border-color:var(--cyan);}
.exams-section,.marks-section,.grades-summary,.marks-detail,.performance-trend{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.section-header h3{margin:0;color:var(--navy);}
.exams-list{display:flex;flex-direction:column;gap:12px;}
.exam-card{border:1px solid var(--border);border-left:4px solid var(--cyan);border-radius:4px;padding:12px;background:#F9F9F9;transition:all var(--t);}
.exam-card.completed{border-left-color:#2E7D32;background:#F1F8F4;}
.exam-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.exam-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.exam-header h4{margin:0;color:var(--navy);font-size:14px;}
.exam-class{font-size:12px;color:var(--sm);margin:2px 0;}
.exam-details{display:flex;gap:16px;font-size:12px;color:var(--sm);margin:8px 0;}
.exam-actions{display:flex;gap:8px;margin-top:8px;}
.marks-controls{padding:12px;background:#F5F5F5;border-radius:4px;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.marks-controls label{font-weight:700;font-size:13px;color:var(--navy);}
.marks-controls select{padding:6px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;flex:1;max-width:300px;}
.marks-form{padding:12px;background:#F9F9F9;border-radius:4px;}
.marks-input{width:60px;padding:6px;border:1px solid var(--border);border-radius:4px;text-align:center;font-family:inherit;}
.marks-actions{text-align:right;margin-top:12px;}
.report-card-header{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px;background:linear-gradient(135deg,#0E294A 0%,#125060 100%);color:white;border-radius:var(--r);margin-bottom:16px;}
.report-card-header h3{margin:0;font-size:18px;}
.report-card-header p{margin:4px 0 0 0;font-size:13px;opacity:0.9;}
.card-gpa{text-align:center;}
.gpa-value{font-size:32px;font-weight:800;}
.gpa-label{font-size:11px;text-transform:uppercase;letter-spacing:0.5px;opacity:0.8;}
.grades-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:10px;}
.grade-item{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:12px;text-align:center;}
.grade-item.overall{border-top:3px solid var(--cyan);}
.subject-name{font-size:12px;color:var(--sm);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:6px;}
.grade-display{font-size:24px;font-weight:800;color:var(--cyan);margin:4px 0;}
.grade-label{font-size:11px;color:var(--sm);}
.marks-detail .table{width:100%;border-collapse:collapse;}
.marks-detail .table thead tr{background:#F5F5F5;border-bottom:2px solid var(--border);}
.marks-detail .table th{padding:10px;text-align:left;font-weight:700;color:var(--navy);font-size:13px;}
.marks-detail .table td{padding:10px;border-bottom:1px solid var(--border);font-size:13px;}
.marks-detail .table tbody tr:hover{background:#F9F9F9;}
.marks-good{color:#2E7D32;font-weight:700;}
.marks-fair{color:#F57C00;font-weight:700;}
.marks-poor{color:#C41C3B;font-weight:700;}
.performance-trend{padding:16px;background:linear-gradient(135deg,#F0F7F7 0%,#F9F9F9 100%);border-left:4px solid var(--cyan);border-radius:4px;}
.trend-info{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:12px 0;}
.trend-item{display:flex;flex-direction:column;align-items:center;padding:12px;background:white;border-radius:4px;}
.trend-item span:first-child{font-size:12px;color:var(--sm);margin-bottom:4px;}
.trend-item strong{font-size:18px;color:var(--navy);}
.analytics-controls{padding:12px;background:#F5F5F5;border-radius:4px;margin-bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.analytics-controls label{font-weight:700;font-size:13px;color:var(--navy);}
.analytics-controls select{padding:6px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;}
.analytics-summary,.rankings-section,.trends-section,.distribution-section,.analytics-list{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;}
.analytics-summary h3,.rankings-section h3,.trends-section h3,.distribution-section h3,.analytics-list h3{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 12px 0;}
.summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.rankings-section .table{width:100%;border-collapse:collapse;}
.rankings-section thead tr{background:#F5F5F5;border-bottom:2px solid var(--border);}
.rankings-section th{padding:10px;text-align:left;font-weight:700;color:var(--navy);font-size:13px;}
.rankings-section td{padding:10px;border-bottom:1px solid var(--border);font-size:13px;}
.rankings-section tbody tr:hover{background:#F9F9F9;}
.trends-chart{background:#F5F5F5;padding:16px;border-radius:4px;margin-top:10px;min-height:250px;display:flex;align-items:center;justify-content:center;}
.grade-dist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:10px;}
.dist-item{padding:10px;background:#F9F9F9;border-radius:4px;}
.dist-grade-label{font-weight:700;color:var(--navy);margin-bottom:6px;display:block;font-size:12px;}
.dist-bar{background:linear-gradient(90deg,#2E7D32,#4CAF50);color:white;font-weight:700;border-radius:4px;display:flex;align-items:center;justify-content:center;height:28px;}
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:10px;}
.insight-section{background:#F9F9F9;padding:12px;border-radius:4px;border-left:4px solid var(--cyan);}
.insight-section h4{margin:0 0 8px 0;color:var(--navy);font-size:13px;}
.insight-item{margin:4px 0;font-size:12px;color:var(--sm);}

/* Fee Management */
.fee-menu{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap;}
.menu-btn{padding:10px 16px;background:#F5F5F5;border:1px solid var(--border);border-radius:var(--r);font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;transition:all var(--t);}
.menu-btn:hover{background:var(--cyan);color:white;border-color:var(--cyan);}
.menu-btn.active{background:var(--cyan);color:white;border-color:var(--cyan);}

.fee-section,.invoices-section,.outstanding-section,.student-invoices,.payment-history,.payment-instructions{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;}

.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.section-header h3{margin:0;color:var(--navy);font-size:15px;font-weight:800;}

.fee-structure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:12px;}
.fee-card{border:1px solid var(--border);border-radius:var(--r);padding:14px;background:#F9F9F9;}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.card-header h4{margin:0;color:var(--navy);font-size:14px;}

.fee-items{display:flex;flex-direction:column;gap:8px;}
.fee-item{display:flex;justify-content:space-between;align-items:flex-start;padding:8px;background:white;border-radius:4px;}
.item-left{flex:1;}
.item-left h5{margin:0;font-size:13px;color:var(--navy);}
.item-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}

/* Communication & Notices Module */
.communication-menu{display:flex;gap:8px;margin-bottom:24px;}
.communication-menu .menu-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;}
.communication-menu .menu-btn:hover{background:#F5F5F5;}
.communication-menu .menu-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);}

/* Announcements */
.announcements-section .announcements-list{margin-top:16px;}
.announcement-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;}
.announcement-card.recent{border-left:4px solid #4CAF50;}
.announcement-card .announcement-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.announcement-card .announcement-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.announcement-card .announcement-meta .badge{font-size:11px;padding:4px 8px;}
.announcement-card .announcement-meta .date{font-size:12px;color:#666;}
.announcement-card .announcement-meta .from{font-size:12px;color:#666;font-weight:600;}
.announcement-card .announcement-content h4{margin:0 0 8px 0;font-size:16px;font-weight:700;color:var(--navy);}
.announcement-card .announcement-content p{margin:0;font-size:14px;line-height:1.5;}
.announcement-card .announcement-actions{display:flex;gap:6px;}

/* Class Notices */
.notices-section .notices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px;}
.notice-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.notice-card .notice-header{margin-bottom:12px;}
.notice-card h4{margin:0 0 8px 0;font-size:15px;font-weight:700;color:var(--navy);}
.notice-card .notice-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.notice-card .class-badge{background:#E3F2FD;color:#1976D2;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:600;}
.notice-card .date{font-size:11px;color:#666;}
.notice-card .notice-content p{margin:0 0 8px 0;font-size:13px;line-height:1.5;}
.notice-card .notice-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666;}
.notice-card .notice-actions{display:flex;gap:6px;margin-top:12px;}
.notice-card .pinned-icon{color:#F57C00;font-size:14px;}

/* Circulars */
.circulars-section .circulars-list{margin-top:16px;}
.circular-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;}
.circular-card.expired{opacity:0.7;border-color:#CCC;}
.circular-card .circular-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.circular-card .circular-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.circular-card .circular-meta .badge{font-size:11px;padding:4px 8px;}
.circular-card .circular-meta .category{font-size:12px;color:#666;font-weight:600;}
.circular-card .circular-meta .audience{font-size:12px;color:#666;}
.circular-card .circular-meta .date{font-size:12px;color:#666;}
.circular-card .circular-content h4{margin:0 0 8px 0;font-size:16px;font-weight:700;color:var(--navy);}
.circular-card .circular-content p{margin:0 0 8px 0;font-size:14px;line-height:1.5;}
.circular-card .attachments{font-size:12px;color:#666;margin-top:8px;}
.circular-card .circular-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666;margin-top:8px;}
.circular-card .pinned-badge{background:#FFF3E0;color:#E65100;padding:2px 6px;border-radius:3px;font-size:11px;}
.circular-card .circular-actions{display:flex;gap:6px;}

/* Parent Messages */
.messages-section .messages-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;}
.messages-section .summary-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center;}
.messages-section .summary-card .stat-value{font-size:24px;font-weight:800;margin-bottom:4px;}
.messages-section .summary-card .stat-label{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.5px;}
.messages-section .messages-list{margin-top:16px;}
.message-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;}
.message-card.unread{border-left:4px solid #2196F3;}
.message-card .message-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.message-card .message-info{flex:1;}
.message-card h4{margin:0 0 8px 0;font-size:15px;font-weight:700;color:var(--navy);}
.message-card .message-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.message-card .message-meta span{font-size:12px;color:#666;}
.message-card .message-status{display:flex;gap:4px;align-items:center;}
.message-card .unread-dot{width:8px;height:8px;background:#2196F3;border-radius:50%;}
.message-card .replied-icon{font-size:12px;}
.message-card .message-content p{margin:0 0 8px 0;font-size:13px;line-height:1.5;}
.message-card .attachments{font-size:12px;color:#666;margin-top:8px;}
.message-card .message-actions{display:flex;gap:6px;margin-top:12px;}

/* Notice Board */
.noticeboard-section .pinned-notices{margin-top:16px;}
.pinned-notice-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;border-left:4px solid #F57C00;}
.pinned-notice-card.expired{opacity:0.7;border-color:#CCC;}
.pinned-notice-card .pinned-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.pinned-notice-card .pinned-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.pinned-notice-card .pinned-meta .badge{font-size:11px;padding:4px 8px;}
.pinned-notice-card .pinned-meta .category{font-size:12px;color:#666;font-weight:600;}
.pinned-notice-card .pinned-meta .views{font-size:12px;color:#666;}
.pinned-notice-card .pinned-content h4{margin:0 0 8px 0;font-size:16px;font-weight:700;color:var(--navy);}
.pinned-notice-card .pinned-content p{margin:0 0 8px 0;font-size:14px;line-height:1.5;}
.pinned-notice-card .pinned-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666;}
.pinned-notice-card .pinned-actions{display:flex;gap:6px;}

/* Faculty Communication */
.faculty-communication-menu{display:flex;gap:8px;margin-bottom:24px;}
.faculty-communication-menu .menu-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;}
.faculty-communication-menu .menu-btn:hover{background:#F5F5F5;}
.faculty-communication-menu .menu-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);}
.faculty-notices-section .faculty-notices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px;}
.faculty-notice-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.faculty-notice-card .notice-header{margin-bottom:12px;}
.faculty-notice-card h4{margin:0 0 8px 0;font-size:15px;font-weight:700;color:var(--navy);}
.faculty-notice-card .notice-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.faculty-notice-card .class-badge{background:#E3F2FD;color:#1976D2;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:600;}
.faculty-notice-card .date{font-size:11px;color:#666;}
.faculty-notice-card .notice-content p{margin:0 0 8px 0;font-size:13px;line-height:1.5;}
.faculty-notice-card .notice-stats{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666;margin-bottom:8px;}
.faculty-notice-card .pinned-indicator{color:#F57C00;font-size:12px;}
.faculty-notice-card .notice-actions{display:flex;gap:6px;}

/* Student Communication */
.student-communication-menu{display:flex;gap:8px;margin-bottom:24px;}
.student-communication-menu .menu-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;}
.student-communication-menu .menu-btn:hover{background:#F5F5F5;}
.student-communication-menu .menu-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);}
.student-notices-section .student-notices-list{margin-top:16px;}
.student-notice-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;}
.student-notice-card.unread{border-left:4px solid #2196F3;}
.student-notice-card .notice-header{margin-bottom:12px;}
.student-notice-card h4{margin:0 0 8px 0;font-size:15px;font-weight:700;color:var(--navy);}
.student-notice-card .notice-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.student-notice-card .date{font-size:11px;color:#666;}
.student-notice-card .pinned-icon{color:#F57C00;font-size:14px;}
.student-notice-card .notice-content p{margin:0 0 8px 0;font-size:13px;line-height:1.5;}
.student-notice-card .attachments{font-size:12px;color:#666;margin-top:8px;}
.student-notice-card .notice-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666;margin-top:8px;}
.student-notice-card .read-indicator{color:#4CAF50;font-weight:600;}

/* Transport */
.transport-menu{display:flex;gap:8px;margin-bottom:24px;}
.transport-menu .menu-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;}
.transport-menu .menu-btn:hover{background:#F5F5F5;}
.transport-menu .menu-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);}

.routes-list, .drivers-list, .vehicles-list, .assignments-list{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.route-card, .driver-card, .vehicle-card, .assignment-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.route-card h4, .driver-card h4, .vehicle-card h4{margin:0 0 8px 0;font-size:16px;font-weight:700;color:var(--navy);}
.route-actions, .driver-actions, .vehicle-actions, .assignment-actions{display:flex;gap:6px;margin-top:12px;}
.student-transport-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-top:16px;}

/* Events & Calendar */
.events-menu{display:flex;gap:8px;margin-bottom:24px;}
.events-menu .menu-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;}
.events-menu .menu-btn:hover{background:#F5F5F5;}
.events-menu .menu-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);}

.calendar-section .events-list,
.rsvp-section .rsvp-list,
.student-events .events-list{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.event-card,
.rsvp-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.event-card .event-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.event-card .event-header h4{margin:0;font-size:16px;font-weight:700;color:var(--navy);}
.event-card .badge{font-size:11px;padding:4px 8px;}
.event-meta{font-size:13px;color:#666;}
.event-actions{display:flex;gap:6px;margin-top:12px;}
.student-events .event-card{display:flex;flex-direction:column;gap:6px;}

/* Staff Management */
.staff-menu{display:flex;gap:8px;margin-bottom:24px;}
.staff-menu .menu-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;}
.staff-menu .menu-btn:hover{background:#F5F5F5;}
.staff-menu .menu-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);}
.profiles-list, .attendance-list, .payroll-list, .notes-list{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.profile-card, .attendance-card, .payroll-card, .note-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.profile-actions, .event-actions{display:flex;gap:6px;margin-top:12px;}

.item-right .amount{font-weight:700;color:var(--navy);font-size:14px;}

.filter-bar{padding:12px;background:#F5F5F5;border-radius:4px;margin:12px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.filter-bar label{font-weight:700;font-size:13px;color:var(--navy);}
.filter-bar select{padding:6px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;}

.invoices-list{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.invoice-card{border:1px solid var(--border);border-left:4px solid;border-radius:4px;padding:12px;background:#F9F9F9;}
.invoice-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08);}

.invoice-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.invoice-header h4{margin:0;color:var(--navy);font-size:14px;}
.invoice-header-student{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.invoice-header-student h4{margin:0;color:var(--navy);font-size:14px;}

.invoice-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0;font-size:13px;}
.detail-row{display:flex;justify-content:space-between;padding:4px 0;}
.detail-row span:first-child{color:var(--sm);}

.invoice-items{padding:8px 0;background:white;border-radius:4px;border:1px solid #EEE;}
.item-row{display:flex;justify-content:space-between;padding:6px 8px;font-size:12px;border-bottom:1px solid #F0F0F0;}
.item-row:last-child{border:none;}

.invoice-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;}
.amount-info{display:flex;gap:16px;color:var(--sm);}

.invoice-actions{display:flex;gap:6px;}

.outstanding-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0;}

.outstanding-list{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-top:16px;}
.outstanding-list h3{margin:0 0 12px 0;color:var(--navy);font-size:15px;font-weight:800;}

.outstanding-list .table{width:100%;border-collapse:collapse;font-size:13px;}
.outstanding-list thead tr{background:#F5F5F5;border-bottom:2px solid var(--border);}
.outstanding-list th{padding:10px;text-align:left;font-weight:700;color:var(--navy);}
.outstanding-list td{padding:10px;border-bottom:1px solid var(--border);}
.outstanding-list tbody tr:hover{background:#F9F9F9;}

.payment-summary{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-top:16px;}
.payment-summary h3{margin:0 0 12px 0;color:var(--navy);}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.summary-item{padding:16px;background:linear-gradient(135deg,#F0F7F7 0%,#FFFFFF 100%);border:1px solid var(--border);border-radius:4px;text-align:center;}
.summary-item h4{margin:0 0 8px 0;font-size:12px;color:var(--sm);text-transform:uppercase;letter-spacing:0.3px;}
.summary-item .amount,.summary-item .percentage{font-size:24px;font-weight:800;color:var(--cyan);}

.fee-summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:16px 0;}
.summary-card{border:1px solid var(--border);border-radius:var(--r);padding:14px;background:white;}
.summary-card .card-title{font-size:11px;color:var(--sm);text-transform:uppercase;letter-spacing:0.4px;margin:0 0 6px 0;font-weight:700;}
.summary-card .status-badge{font-size:20px;font-weight:800;color:var(--cyan);margin:6px 0;}
.summary-card .card-amount{font-size:22px;font-weight:800;color:var(--navy);margin:6px 0;}

.student-invoices{padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-top:16px;}
.student-invoices h3{margin:0 0 12px 0;color:var(--navy);font-size:15px;font-weight:800;}

.payment-history{margin-top:16px;}
.payment-history h3{margin:0 0 12px 0;color:var(--navy);font-size:15px;font-weight:800;}

.history-list{display:flex;flex-direction:column;gap:8px;}
.payment-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px;background:#F9F9F9;border-radius:4px;border-left:4px solid #2E7D32;}
.payment-left{flex:1;}
.payment-left h5{margin:0;font-size:13px;color:var(--navy);}
.payment-right{text-align:right;}
.payment-right .amount{font-size:16px;font-weight:800;}
.payment-right .status{font-weight:700;}

.payment-instructions{margin-top:16px;}
.payment-instructions h3{margin:0 0 12px 0;color:var(--navy);font-size:15px;font-weight:800;}

.methods-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:10px;}
.method-card{border:1px solid var(--border);border-radius:4px;padding:14px;background:#F9F9F9;}
.method-card h5{margin:0 0 8px 0;color:var(--navy);font-size:13px;}
.method-card p{margin:4px 0;font-size:12px;color:var(--sm);}

/* PDF Reader Simulation */
.pdf-reader-container {
  background-color: #525659;
  padding: 20px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  height: 75vh;
}
.pdf-reader-toolbar {
  background-color: #323639;
  padding: 8px 12px;
  border-radius: var(--r) var(--r) 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
}
.pdf-reader-toolbar .tool {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--t);
}
.pdf-reader-toolbar .tool:hover {
  opacity: 1;
}
.pdf-reader-page {
  background-color: white;
  flex-grow: 1;
  padding: 20px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  overflow-y: auto;
}
.pdf-reader-content p {
  margin-bottom: 1em;
  line-height: 1.6;
}
.pdf-reader-toolbar .page-indicator {
  flex-grow: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.pdf-reader-toolbar .tool:disabled {
  opacity: 0.3;
  cursor: default;
}
.textbook-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.textbook-card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.textbook-card h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.textbook-footer {
  text-align: center;
  margin-top: 16px;
}