/* "EG Thaana" is the school's Dhivehi font: Faruma here, and the page's head says otherwise when the school
   chose another under Fonts (its rule comes later, so it wins). Only Thaana and Arabic letters take it. */
@font-face{font-family:"EG Thaana";src:url("/static/fonts/Faruma.otf") format("opentype");unicode-range:U+0600-06FF,U+0780-07BF,U+FDF2,U+FDFA-FDFB,U+FE70-FEFF}

:root{--bg:#f4f2ee;--ink:#1d1d1f;--mut:#6b6b6b}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 "EG Thaana","Segoe UI",system-ui,sans-serif}
main{max-width:1040px;margin:0 auto;padding:26px 28px 40px}
header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #dedad3;padding-bottom:18px;margin-bottom:22px}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit}
.brand img{width:96px;height:96px;object-fit:contain}
.name{font-size:40px;font-weight:800;letter-spacing:-.5px;line-height:1}
.name .e{color:#0b2f6b} .name .g{background:linear-gradient(90deg,#2f9e3f,#0b7a8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{color:#0b2f6b;font-size:14px;margin:6px 0 4px;font-weight:500} .eyebrow{margin-top:2px}
.stamp{background:#fff;border:1px solid #dedad3;border-radius:8px;padding:7px 14px;font-size:12px;color:var(--mut)}
.row{display:grid;gap:18px;margin-bottom:18px} .r2{grid-template-columns:1fr 1fr} .r3{grid-template-columns:1fr 1fr 1.25fr}
.card{background:#fff;border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px #0001;border:1px solid #eee}
.card h2{font-size:16px;margin:0} .sub{margin:2px 0 16px;color:var(--mut);font-size:12px}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{padding:6px 15px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;text-decoration:none}
.pill.green{background:#43a05a} .pill.amber{background:#e5a53d} .pill.pink{background:#e29bb8;color:#5b1f37}
.rule{border-top:1px dashed #ddd;margin:16px 0}
.tile{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 14px;border-radius:9px;color:#fff;
 font-weight:600;font-size:12.5px;text-decoration:none;margin-bottom:8px}
.tile:hover{filter:brightness(1.08)} .chev{opacity:.7;font-size:16px}
.badge{background:#fff;color:#555;border-radius:999px;padding:1px 9px;font-size:10px;border:1px solid #ddd}
.teal{background:#4d9191} .grey{background:#d4d4d1;color:#666} .maroon{background:#762e43} .magenta{background:#d1599b}
.red{background:#b03d3d} .underline{text-decoration:underline} .cyan{background:#5fb6cf}
.darkteal{background:#3f7a72} .navy{background:#333b6d} .olive{background:#48592b} .brown{background:#8b7a4a}
.blue{background:#4a76b8} .midnight{background:#1f2755} .teal2{background:#357a75} .sync{background:#0f766e}
.staffgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px} .wide{grid-column:1/-1}
footer{color:var(--mut);font-size:11px;margin-top:22px}
@media(max-width:760px){.r2,.r3{grid-template-columns:1fr}}

/* --- shared panel styles --- */
a{color:#2563eb;text-decoration:none}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.userchip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dedad3;border-radius:999px;padding:5px 6px 5px 14px;font-size:12.5px}
.userchip .role{border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;color:#fff}
.role.admin{background:#b03d3d}.role.staff{background:#4a76b8}.role.student{background:#43a05a}.role.parent{background:#d1599b}
.userchip form{margin:0}.linkbtn,.userchip button{background:#eef0f4;color:#1d1d1f;border:0;border-radius:999px;padding:5px 12px;cursor:pointer;font-size:12px}
.strip{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.strip a{background:#0b2f6b;color:#fff;padding:9px 16px;border-radius:9px;font-weight:600;font-size:13px}
.strip a.alt{background:#0f766e}.strip a.ghost{background:#fff;color:#0b2f6b;border:1px solid #dedad3}
.authwrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.authcard{background:#fff;border-radius:16px;box-shadow:0 4px 24px #0002;padding:30px 32px;width:100%;max-width:420px}
.authcard .brand{justify-content:center;margin-bottom:8px}.authcard .brand img{width:72px;height:72px}
.authcard .name{font-size:30px}.authcard .tag{text-align:center;font-size:12px;margin:0 0 18px}
label{display:block;font-size:12px;font-weight:600;margin:12px 0 4px;color:#333}
input,select{width:100%;padding:9px 11px;border:1px solid #cfd3da;border-radius:8px;font:inherit;background:#fff}
input:focus,select:focus{outline:2px solid #2563eb55;border-color:#2563eb}
.btn,button.btn{background:#0b2f6b;color:#fff;border:0;border-radius:9px;padding:10px 18px;font-weight:600;cursor:pointer;font:inherit;font-weight:600}
.btn.full{width:100%;margin-top:18px}.btn.small{padding:5px 12px;font-size:12px}.btn.danger{background:#b03d3d}.btn.green{background:#2f9e3f}
.msg{border-radius:8px;padding:9px 12px;margin:0 0 12px;font-size:13px}.msg.err{background:#fde8e8;color:#9b1c1c}.msg.ok{background:#e3f6e8;color:#1e6b34}
.roles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}.roles span{font-size:11px;color:#fff;border-radius:999px;padding:3px 11px}
.panel{background:#fff;border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px #0001;border:1px solid #eee;margin-bottom:18px}
.panel h2{margin:0 0 4px;font-size:17px}.panel .sub{margin:0 0 14px;color:#6b6b6b;font-size:12px}
table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:8px 10px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b6b6b}
td form{display:inline}td input,td select{padding:5px 8px;font-size:12px;width:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.hint{font-size:11.5px;color:#6b6b6b;margin-top:3px}
.off{opacity:.5}.cards{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.cards div{background:#fff;border-radius:12px;padding:12px 18px;box-shadow:0 1px 3px #0002;font-size:12px;color:#555}.cards b{display:block;font-size:26px;color:#111}
pre{background:#111;color:#ddd;padding:10px;border-radius:8px;overflow:auto;font-size:12px;max-height:240px}
.pilltag{display:inline-block;border-radius:999px;padding:1px 9px;font-size:11px;background:#eef0f4}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}

.profhead{display:flex;gap:22px;align-items:center}.avatar{width:120px;height:128px;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 2px 8px #0003}.avatar.ph{display:grid;place-items:center;background:#0b2f6b;color:#fff;font-size:38px;font-weight:700}

/* --- Viuga-style profile --- */
.vwrap{background:#fff;border:1px solid #d9d9d9;border-radius:4px;overflow:hidden;font-size:12px;color:#333}
.vhead{display:flex;justify-content:space-between;gap:20px;background:#f2f2f2;border-bottom:1px solid #d9d9d9;padding:12px 16px}
.vid{display:flex;gap:14px;align-items:flex-start}.vid .avatar{width:72px;height:76px;border-radius:2px;border:0;box-shadow:none;font-size:24px}
.vid h1{font-size:15px;margin:2px 0 0;font-weight:700;letter-spacing:.2px;color:#222}.vid div div{font-size:14px;line-height:1.35;color:#222}
.vkv{font-size:11px;border-collapse:collapse;width:auto}.vkv td{padding:1px 0 1px 14px;border:0;text-align:left}.vkv td:first-child{text-align:right;color:#555;padding-left:0}.vkv td:last-child{color:#2b6f8f}
.vtabs{display:flex;flex-wrap:wrap;gap:1px;background:#e9e9e9;padding:6px 10px 0;border-bottom:1px solid #d9d9d9}
.vtabs a{background:#dcdcdc;color:#444;padding:5px 11px;border:1px solid #cfcfcf;border-bottom:0;border-radius:3px 3px 0 0;font-size:11px}
.vtabs a.on{background:#2b2b2b;color:#fff;border-color:#2b2b2b}
.vbody{padding:14px 16px 24px}
.vsec{color:#1f6f8b;font-size:12.5px;font-weight:600;margin:20px 0 6px;display:flex;justify-content:space-between}
table.vt{width:100%;border-collapse:collapse;font-size:11.5px}
table.vt td{background:#fffdf0;border-top:1px solid #efe6b8;border-bottom:1px solid #efe6b8;padding:6px 8px;vertical-align:top}
table.vt tr:nth-child(even) td{background:#fff}
table.vt td.l{width:22%;color:#444}table.vt td.v{width:38%}
table.vt td.dv,table.vt td.dl{direction:rtl;text-align:right;font-family:"EG Thaana","Times New Roman",serif;font-size:14px;font-weight:400;font-style:normal}
table.vt td.dv{width:22%}table.vt td.dl{width:18%}
table.vg{width:100%;border-collapse:collapse;font-size:11px}
table.vg th{background:#f9d98b;color:#333;text-transform:none;letter-spacing:0;font-size:11px;padding:7px 6px;border:1px solid #e8c56a;text-align:center}
table.vg td{padding:6px;border:1px solid #e6e0c4;background:#fffdf0;vertical-align:top}
table.vg tr:nth-child(even) td{background:#fff}
.vnone{padding:6px 8px;color:#666}
.vdoc a{display:block;margin:2px 0}

.vsec .dv{font-family:"EG Thaana","Times New Roman",serif;font-size:14px;font-weight:400;direction:rtl}

.dnrbar{display:flex;justify-content:space-between;align-items:center;padding:26px 8px 14px;font-size:14px;color:#1f6f8b;border-bottom:1px solid #e3e3e3}
.dnrbtn{background:#2b6f74;color:#fff;border-radius:3px;padding:3px 10px;font-size:11.5px}
.dnrbtn:hover{filter:brightness(1.12)}

.syncbtn{display:inline-block;margin-top:8px;background:#2b6f74;color:#fff!important;border-radius:3px;padding:3px 10px;font-size:11.5px}
.syncbtn:hover{filter:brightness(1.12)}
ol.steps{padding-left:20px}ol.steps li{margin:0 0 14px}

.switcher{margin:0}.switcher select{width:auto;padding:4px 8px;font-size:12px;border-radius:999px;background:#eef3ff;border:1px solid #cdd8f0;font-weight:600;color:#0b2f6b}
.schoolname{font-size:12px;font-weight:600;color:#0b2f6b;background:#eef3ff;border-radius:999px;padding:3px 10px}
.schoollogo{height:26px;width:auto;vertical-align:middle;margin-right:8px;border-radius:4px}
h3{font-size:14px;margin:14px 0 4px;color:#0b2f6b}

.tabs{display:flex;gap:2px;border-bottom:1px solid #ddd;margin:10px 0 14px}
.tabs .tb{background:#eee;border:1px solid #ddd;border-bottom:0;border-radius:8px 8px 0 0;padding:7px 16px;cursor:pointer;font:inherit;font-weight:600;font-size:13px;color:#555}
.tabs .tb.on{background:#0b2f6b;color:#fff;border-color:#0b2f6b}
.tabbody table{font-size:12.5px}

.urow{display:flex;align-items:center;gap:10px}
.uava{width:42px;height:46px;object-fit:cover;border-radius:4px;flex:0 0 auto;background:#eee}
.uava.ph{display:grid;place-items:center;background:#0b2f6b;color:#fff;font-size:14px;font-weight:700}
.uname{font-weight:700;font-size:12.5px;letter-spacing:.2px;color:#222;line-height:1.2}
.utable td{vertical-align:middle}

.urow.plain{color:inherit;text-decoration:none}
.urow.plain:hover .uname{color:#0b2f6b;text-decoration:underline}

.roleboxes{display:flex;flex-direction:column;gap:2px}
.rolebox{display:flex;align-items:center;gap:5px;font-size:11px;cursor:pointer;margin:0}
.rolebox input{width:auto;margin:0}
.role.teacher{background:#7a5fc4}
.userchip .role+.role{margin-left:3px}
.utable td input{margin:1px 0}

.vedit .vt td.v input,.vedit .vt td.dv input{width:100%;box-sizing:border-box;font-size:13px;padding:3px 6px}
.vedit .vt td.dv input.thaana{font-family:"EG Thaana",'MV Faseyha','Faruma','MV Boli',serif;text-align:right}
.vedit .newrow input{background:#fbfbfd}
.vedit .newrow .hint{font-size:10px}
.vsave{display:flex;align-items:center;gap:12px;margin:16px 8px;flex-wrap:wrap}

/* --- the sync panel: figures straight from the attendance clock --- */
.zrow{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.zduo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.zchart{text-align:center}
.zchart h3,.zdept{font-size:13px;margin:4px 0 10px;color:#444;font-weight:700}
.zdept{text-align:center;margin-top:18px;border-top:1px solid #f0efec;padding-top:14px}
.donut .dnum{font:700 22px/1 "Segoe UI",system-ui,sans-serif;fill:#1d1d1f}
.donut .dcap{font:11px/1 "Segoe UI",system-ui,sans-serif;fill:#8a8a8a}
.zleg{margin-top:8px;font-size:12px}
.zleg div{display:flex;align-items:center;gap:6px;padding:2px 0}
.zleg i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.zleg span{flex:1;text-align:left;color:#555}
.zleg b{font-variant-numeric:tabular-nums}
.zleg em{font-style:normal;color:#8a8a8a;min-width:52px;text-align:right}
.zdevs{margin-top:12px;text-align:left}
.zdev{border-top:1px solid #f0efec;padding:7px 0;font-size:11.5px;display:grid;grid-template-columns:1fr auto;gap:0 8px}
.zdev b{font-size:12.5px}.zdev span{color:#8a8a8a}
.zdev em{font-style:normal;font-weight:700;font-size:11px;grid-row:1;grid-column:2}
.zdev .on{color:#2f8f46}.zdev .offl{color:#c0392b}
.zdev .zseen{grid-column:2;text-align:right}
.zbars{display:flex;gap:10px;align-items:flex-end;justify-content:space-around;padding:4px 0 0}
.zbar{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.zpct{font-size:11px;color:#555;font-variant-numeric:tabular-nums}
.ztrack{width:38px;background:#eceae6;border-radius:5px;display:flex;align-items:flex-end;overflow:hidden}
.zbar .ztrack{display:flex}
.zfill{width:100%;background:linear-gradient(180deg,#5fbd72,#43a05a);border-radius:5px 5px 0 0;min-height:2px}
.zlab{font-size:10.5px;color:#444;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zsub{font-size:10px;color:#9a9a9a}
.zmonitor{display:flex;flex-direction:column;max-height:560px}
.zmons{overflow:auto;margin:0 -6px;padding:0 6px}
.zmon{display:grid;grid-template-columns:34px 1fr auto auto;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid #f4f3f0}
.zpic img,.zpic .ph{width:34px;height:34px;border-radius:50%;object-fit:cover;display:grid;place-items:center}
.zpic .ph{background:#e7e5e0;color:#777;font-size:11px;font-weight:700}
.zwho{min-width:0}.zwho b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zwho span{font-size:10.5px;color:#9a9a9a}
.ztime{font-size:12px;font-variant-numeric:tabular-nums;text-align:right;color:#444}
.ztime span{display:block;font-size:10px;color:#a5a5a5}
.zstate{font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;background:#eee;color:#555}
.zstate.in{background:#e4f4e7;color:#2f8f46}.zstate.out{background:#e6eefb;color:#3a68b0}
.zstate.otin,.zstate.otout{background:#fdf0dd;color:#a3701a}
.mbars{display:flex;gap:3px;align-items:flex-end;height:90px;margin-top:12px}
.mday{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:3px}
.mday>div{background:#9db8e0;border-radius:3px 3px 0 0;min-height:2px}
.mday.wk>div{background:#dcd8d0}
.mday.now>div{background:#0b2f6b}
.mday span{font-size:9px;color:#a5a5a5;text-align:center}
.zsec{font-size:15px;margin:26px 0 12px;padding-top:16px;border-top:1px solid #dedad3;color:#444}
@media(max-width:900px){.zrow,.zduo{grid-template-columns:1fr}.zmonitor{max-height:none}}

/* --- events --- */
.evh{font-size:13px;color:#666;margin:18px 0 8px;font-weight:700}
.evrow{display:grid;grid-template-columns:52px 1fr auto auto;gap:12px;align-items:center;
 padding:10px 0;border-top:1px solid #f0efec}
.evrow.open{display:block}
.evdate{text-align:center;background:#f7f6f3;border-radius:10px;padding:5px 0;line-height:1.1}
.evdate b{display:block;font-size:19px}
.evdate span{font-size:10.5px;color:#777;text-transform:uppercase}
.evdate em{display:block;font-style:normal;font-size:9px;color:#a5a5a5}
.evwhat b{font-size:13.5px}
.evnote{margin:4px 0 0;font-size:12px;color:#555;white-space:pre-wrap}
.evwho .pilltag{font-size:10.5px}
.pilltag.a-everyone{background:#e6eefb;color:#3a68b0}
.pilltag.a-staff{background:#e4f4e7;color:#2f8f46}
.pilltag.a-students{background:#f1e9fb;color:#6b47b0}
.pilltag.a-parents{background:#fde9f1;color:#b03d76}
.evtools{display:flex;gap:6px;align-items:center}
.evtools form{margin:0}
.evform{margin-top:6px}
.evform textarea{width:100%;font:inherit;padding:7px 9px;border:1px solid #d8d5cf;border-radius:8px}
@media(max-width:700px){.evrow{grid-template-columns:48px 1fr;row-gap:6px}.evwho,.evtools{grid-column:2}}

/* --- live figures you can touch --- */
#zlive.stale{opacity:.55;transition:opacity .3s}
.live{color:#2f8f46;font-weight:700}
.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#43a05a;margin-right:5px;
 animation:beat 2s ease-in-out infinite;vertical-align:middle}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}
.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.tap:active{transform:scale(.985)}
button.lgrow,button.zbar{background:none;border:0;font:inherit;color:inherit;padding:0;text-align:inherit;width:100%}
button.lgrow{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;min-height:32px}
button.lgrow:hover,button.zbar:hover .ztrack{background:#f4f3f0}
button.lgrow.on{background:#eef3fb;box-shadow:inset 0 0 0 1px #cfdcf3}
button.zbar{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:9px;padding:4px 2px}
button.zbar.on{background:#eef3fb;box-shadow:inset 0 0 0 1px #cfdcf3}
.zdrill{position:fixed;inset:0;z-index:60;background:#0006;display:flex;align-items:center;justify-content:center;padding:20px}
.zdrill[hidden]{display:none}
.zmodal{background:#fff;border-radius:14px;box-shadow:0 18px 50px #0003;width:min(860px,100%);max-height:82vh;
 display:flex;flex-direction:column;overflow:hidden}
.zmhead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #eceae6}
.zmhead b{font-size:15px;flex:1}
.zclose{background:none;border:0;font-size:26px;line-height:1;color:#888;cursor:pointer;padding:0 4px}
.zclose:hover{color:#222}
.zmbody{overflow:auto;padding:4px 18px 18px}
.zdtable table{width:100%}
.zdtable em{font-style:normal;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.zdtable em.in{background:#e4f4e7;color:#2f8f46}
.zdtable em.out{background:#fdeaea;color:#c0392b}
.tapnote{text-align:center;margin-top:10px}
a.zmon{color:inherit;text-decoration:none;border-radius:9px}
a.zmon:hover{background:#f7f6f3}
@media(pointer:coarse){
 .zmon{padding:11px 4px}
 button.lgrow{min-height:44px}
 .zdrill>div{padding:10px 2px}
 .ztrack{width:44px}
}

/* --- the clock's own menu, inside the panel --- */
.znav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 16px;border-bottom:1px solid #dedad3;padding-bottom:10px}
.ztab{padding:8px 15px;border-radius:9px;font-size:13px;font-weight:600;color:#444;text-decoration:none}
.ztab:hover{background:#eceae6}
.ztab.on{background:#0f766e;color:#fff}
.ztab.out{color:#8a8a8a;font-weight:500}
.zfind{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.zfind input{max-width:280px}
.zcell{display:flex;align-items:center;gap:9px}
.zcell img,.zcell .ph{width:32px;height:32px;border-radius:50%;object-fit:cover;display:grid;place-items:center;
 background:#e7e5e0;color:#777;font-size:11px;font-weight:700;flex:0 0 auto}
.zcell b{font-weight:600}
.mono{font-variant-numeric:tabular-nums}
@media(pointer:coarse){.ztab{padding:11px 16px}}

/* --- what each event keeps --- */
.crumbs{font-size:12.5px;color:#6b6b6b;margin:0 0 12px}
.evcount{display:block;font-size:10.5px;color:#9a9a9a}
.evfiles{margin-top:4px}
.evfile{display:grid;grid-template-columns:30px 1fr auto auto;gap:10px;align-items:center;
 padding:9px 0;border-top:1px solid #f0efec}
.evfile.open{display:block}
.evicon{font-size:18px;text-align:center}
.evfname a{font-weight:600;font-size:13.5px}
.evfname .hint{margin-top:1px}
.evform h3.evh{margin-top:0}
@media(max-width:700px){.evfile{grid-template-columns:26px 1fr;row-gap:4px}.evfile .hint,.evtools{grid-column:2}}
@media(pointer:coarse){.evfile{padding:13px 0}}

/* the rings are tappable too, not just the figures under them */
.dseg{cursor:pointer}
svg .tap:active{transform:none}  /* scaling an SVG shape moves it, so leave it alone */
.donut circle:not(.dseg),.donut path:not(.dseg){pointer-events:none}
path.dseg:hover,circle.dseg:hover{fill:#00000012}
text.dseg:hover{opacity:.7}
text.dseg{user-select:none}
.donut .dseg{transition:fill .15s}

/* the Attendance reports */
.znav.sub{border-bottom:0;padding-bottom:4px;margin-bottom:8px}
.ztab.small{padding:6px 12px;font-size:12px;background:#f4f3f0}
.ztab.small.on{background:#0f766e;color:#fff}
td.dcell{font-size:11px;text-align:center;font-variant-numeric:tabular-nums;color:#555;min-width:40px}
td.dcell.lat{background:#fdeaea;color:#c0392b;font-weight:700}
.utable th{white-space:nowrap}

/* --- the events list, read like a folder listing --- */
.folderhead{display:grid;grid-template-columns:1fr 200px 90px 110px;gap:12px;padding:0 10px 6px;
 font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a;border-bottom:1px solid #e8e6e2}
.folderrow{display:flex;align-items:center;border-bottom:1px solid #f1efec}
.folderrow.open{display:block;padding:10px}
.foldermain{flex:1;min-width:0;display:grid;grid-template-columns:34px 1fr 200px 90px 110px;gap:12px;
 align-items:center;padding:12px 10px;color:inherit;text-decoration:none;border-radius:8px}
.folderrow:hover{background:#faf9f7}
.foldermain:hover .foldername{text-decoration:underline}
.foldericon{color:#5f6368;display:flex}
.foldername{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foldermeta,.folderkept{font-size:12px;color:#8a8a8a}
.foldertools{padding-right:8px;opacity:0;transition:opacity .12s}
.folderrow:hover .foldertools,.foldertools:focus-within{opacity:1}
@media(pointer:coarse){.foldertools{opacity:1}.foldermain{padding:15px 10px}}
@media(max-width:800px){
 .folderhead{display:none}
 .foldermain{grid-template-columns:30px 1fr;row-gap:2px}
 .foldermeta,.folderkept,.foldermain .pilltag{grid-column:2}
}

.foldermain.infolder{grid-template-columns:34px 1fr 90px}
.btn.ghost{background:#f1efec;color:#444}
@media(max-width:800px){.foldermain.infolder{grid-template-columns:30px 1fr}}

/* --- the judging portal --- */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin:14px 0}
.slot{background:#f4f3f0;border:1px solid #e0ded9;border-radius:10px;padding:14px 0;font:600 15px/1 inherit;
 color:#555;cursor:pointer;min-height:48px}
.slot.on{background:#43a05a;border-color:#3b8f50;color:#fff}
.slots.locked .slot{cursor:default;opacity:.7}
.jtotal{font-size:15px;margin:10px 0 2px}
.jtotal b{font-size:20px}
.jprog{display:grid;grid-template-columns:1fr 2fr auto;gap:10px;align-items:center;font-size:12px;padding:3px 0}
.jbar{background:#eceae6;border-radius:999px;height:8px;overflow:hidden}
.jbar div{background:#43a05a;height:100%}
.jprog em{font-style:normal;color:#8a8a8a;font-variant-numeric:tabular-nums}
@media(pointer:coarse){.slot{min-height:56px;font-size:17px}}

.req{color:#c0392b}
.mlform select,.mlform input{width:100%}
.mlform .mlother{margin-top:2px}

.livesync{font-size:12.5px;color:#2f8f46;margin:14px 0 0}

/* --- the official judgement sheet, on screen and on paper --- */
.psheet{background:#fff;border:1px solid #e6e4e0;border-radius:12px;padding:18px 20px 24px;overflow-x:auto}
.phead{text-align:center;margin-bottom:14px}
.phead .plogo{height:54px;object-fit:contain;display:block;margin:0 auto 6px}
.phead .pwho{font-size:12px;color:#555;letter-spacing:.04em}
.phead h1{font-size:19px;margin:6px 0 2px;text-decoration:underline}
.phead h2{font-size:15px;margin:0;font-weight:700;text-decoration:underline}
.pgrid{border-collapse:collapse;width:100%;table-layout:fixed;font-size:9px}
.pgrid th,.pgrid td{border:1px solid #9aa0a6;padding:2px 1px;text-align:center;overflow:hidden}
.pgrid th.grp{font-size:11px;padding:4px}
.pgrid tr.nums th{font-size:8px;font-weight:600;background:#f3f6f3}
.pgrid .rg{width:24px}
.pgrid .nm{width:120px;text-align:left;padding-left:5px;font-size:10px}
.pgrid .hs{width:66px;font-size:9px;font-weight:600}
.pgrid .hs.h-yellow{background:#ffe680}
.pgrid .hs.h-blue{background:#8fb3e0;color:#10233d}
.pgrid .hs.h-red{background:#e08080}
.pgrid .hs.h-green{background:#9ad9a0}
.pgrid .tt{width:34px;font-size:10px;font-weight:700}
.pgrid td.bx{font-size:10px;color:#1a7f37;font-weight:700}
.pgrid td.bx.on{background:#eaf6ec}
.pgrid th.cr{font-size:9px;font-weight:600;line-height:1.2;padding:3px 2px;white-space:nowrap;
  text-transform:none;letter-spacing:0;background:#f3f6f3;
  writing-mode:vertical-rl;transform:rotate(180deg);height:30mm;vertical-align:bottom;text-align:left}
.pgrid td.mk{font-size:11px;font-weight:700;height:18px}
.signs{display:flex;gap:40px;margin-top:34px;flex-wrap:wrap}
.sg{min-width:190px}
.sg .line{border-bottom:1px solid #333;height:26px}
.sg .ttl{font-size:11px;color:#555;margin-top:5px}
.sg .jn{font-weight:700;font-size:12px}
.sg .dt{font-size:11px;color:#555}
.pfoot{margin-top:22px;font-size:10px;color:#8a8a8a;text-align:right}
@media print{
 @page{size:A4 landscape;margin:8mm}
 body{background:#fff}
 main{max-width:none;padding:0;margin:0}
 header,.topbar,.strip,footer,.noprint,.msg,.crumbs{display:none !important}
 .psheet{border:0;border-radius:0;padding:0;overflow:visible}
 .psheet{width:100%}
 .pgrid{font-size:8pt;line-height:1.15;width:100% !important;table-layout:auto}
 .pgrid th,.pgrid td{padding:2px 1px}
 .pgrid .nm{width:auto;min-width:34mm;font-size:8.5pt;line-height:1.15;padding:3px 4px;white-space:normal;
   text-align:left}
 .pgrid .hs{width:auto;min-width:17mm;font-size:8pt}
 .pgrid .rg{width:8mm}
 .pgrid .tt{width:auto;min-width:11mm;font-size:8.5pt}
 /* on their side, so a mark column is only as wide as a number */
 .pgrid th.cr{height:32mm;font-size:8pt;padding:2px 1px}
 .pgrid td.mk{height:7mm}
 .pgrid td.mk{height:auto;font-size:8.5pt}
 .pgrid th.cr{font-size:6.8pt;line-height:1.08;padding:2px 1px}
 .pgrid tr.nums th{font-size:6.5pt}
 .pgrid thead{display:table-header-group}
 .pgrid tr{page-break-inside:avoid}
 .pgrid td.bx.on,.pgrid .hs{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .pgrid td.bx.on{background:#eaf6ec !important}
 /* the sheet is printed to be signed, so the heading and the footer give their room to the grid */
 .phead{margin-bottom:6px}
 .phead .plogo{height:34px;margin-bottom:2px}
 .phead h1{font-size:13pt;margin:2px 0 1px}
 .phead h2{font-size:11pt}
 .signs{margin-top:10mm;gap:22mm}
 .sg .line{height:9mm}
 .pfoot{margin-top:4mm}
}

.role.principal{background:#7a1f3d}
.role.supervisor{background:#b5651d}
.role.leading_teacher{background:#2f6f8f}

.utable select[name=supervisor]{max-width:170px;font-size:12px}

.evtools select{max-width:170px;font-size:12px;padding:4px 6px}

/* ==================== the app frame: a menu down the side, the work beside it ==================== */
:root{--navy:#12275c;--navy2:#1b3474;--ink2:#2c3a55}
.navtoggle{display:none}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--navy);color:#dbe4f7;display:flex;flex-direction:column;padding:18px 14px;gap:18px;
 position:sticky;top:0;height:100vh;overflow-y:auto}
.sbrand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;padding:2px 6px 0}
.sbrand img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:9px;padding:3px}
.sbrand b{font-size:17px;letter-spacing:-.2px}
.snav{display:flex;flex-direction:column;gap:3px;flex:1}
.snav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#c3d0ec;
 text-decoration:none;font-size:13.5px;font-weight:500}
.snav a:hover{background:#ffffff14;color:#fff}
.snav a.on{background:#ffffff1f;color:#fff;font-weight:600}
.snav .ic{flex:0 0 auto;opacity:.9}
.sfoot{display:flex;align-items:center;gap:10px;border-top:1px solid #ffffff1f;padding-top:14px;font-size:12px}
.sfoot img{width:32px;height:32px;object-fit:contain;background:#fff;border-radius:50%;padding:2px}
.sfoot b{display:block;color:#fff;font-size:12.5px}
.sfoot span{color:#9fb0d4;font-size:11px}
.content{min-width:0;display:flex;flex-direction:column}
.tbar{display:flex;align-items:center;gap:14px;padding:12px 26px;background:#fff;border-bottom:1px solid #e8e5e0;
 position:sticky;top:0;z-index:20}
.twho b{font-size:16px;color:var(--navy)} .twho span{color:#7b7b7b;font-size:13px;margin-left:10px}
.tright{margin-left:auto}
.burger,.scrim{display:none}
.app main{max-width:1180px;margin:0;padding:22px 26px 90px;width:100%}
main.plain{max-width:1040px;margin:0 auto;padding:26px 28px 40px}

/* ---- the greeting ---- */
.hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(110deg,#eaf2ff,#f4f8ff 60%,#eafaf3);
 border:1px solid #dfe8f6;border-radius:16px;padding:22px 24px;margin-bottom:18px}
.hgreet{flex:1;min-width:220px}
.hgreet p{margin:0;color:#5b6b8a;font-size:14px}
.hgreet h1{margin:2px 0 4px;font-size:30px;letter-spacing:-.6px;color:var(--navy)}
.hgreet .hrole{color:#63738f;font-size:13px}
.hdate{background:#fff;border:1px solid #e3e9f3;border-radius:12px;padding:12px 18px;text-align:center;min-width:132px}
.hdate span{display:block;font-size:11px;color:#8a95a8}
.hdate b{display:block;font-size:16px;color:var(--navy);margin:2px 0}

/* ---- the big buttons ---- */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.acard{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:104px;
 border-radius:14px;padding:16px 18px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;
 box-shadow:0 1px 2px #0000001a}
.acard:hover{filter:brightness(1.07)}
.acard .ic{opacity:.92}
.a-blue{background:#1d4ed8}.a-teal{background:#12796a}.a-maroon{background:#8d2846}
.a-purple{background:#6d45b8}.a-cyan{background:#0f6fa8}.a-slate{background:#3f4a63}

/* ---- the panels of links ---- */
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.cards2 .card{background:#fff;border:1px solid #eae7e2;border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px #0001}
.cards2 .card.wide{grid-column:1/-1}
.cards2 .card h2{font-size:15px;margin:0 0 12px;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
 color:#fff;text-decoration:none;background:#4d9191}
.chip:hover{filter:brightness(1.08)}
.app footer{margin-top:22px}

/* ---- the bar along the bottom on a phone ---- */
.bnav{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e6e3de;
 padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:30}
.bnav a,.bnav .bmore{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;
 color:#7c8697;text-decoration:none;font-size:10.5px;cursor:pointer}
.bnav a.on{color:var(--navy);font-weight:700}

@media(max-width:980px){
 .app{grid-template-columns:1fr}
 .side{position:fixed;left:0;top:0;bottom:0;width:250px;transform:translateX(-100%);transition:transform .2s;
  z-index:60;height:100dvh}
 .navtoggle:checked ~ .app .side{transform:none}
 .navtoggle:checked ~ .scrim{display:block;position:fixed;inset:0;background:#0006;z-index:50}
 .burger{display:inline-flex;color:var(--navy);cursor:pointer}
 .app main{padding:16px 16px 96px}
 .tbar{padding:10px 16px}
 .twho span{display:none}
 .bnav{display:flex}
 .hgreet h1{font-size:24px}
 .hero{padding:18px}
 .actions{grid-template-columns:1fr 1fr;gap:10px}
 .acard{min-height:88px;gap:14px;font-size:13.5px;padding:13px 14px}
 .cards2{grid-template-columns:1fr}
}
@media(max-width:400px){.actions{gap:8px}.acard{min-height:80px}}

.sme{display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid #ffffff1f;
 border-bottom:1px solid #ffffff1f}
.savatar{width:34px;height:34px;border-radius:50%;background:#ffffff26;display:grid;place-items:center;
 font-size:12px;font-weight:700;color:#fff;flex:0 0 auto}
.sme b{display:block;color:#fff;font-size:13px;line-height:1.2}
.sme span{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px}
.sme .role{font-size:9.5px;padding:1px 7px}
.sout{display:flex;gap:8px;align-items:center;padding:0 8px}
.sout a,.sout button{background:#ffffff1a;color:#dbe4f7;border:0;border-radius:999px;padding:6px 13px;
 font-size:12px;cursor:pointer;text-decoration:none}
.sout a:hover,.sout button:hover{background:#ffffff2e;color:#fff}
.sout form{margin:0}
@media(min-width:981px){.sme,.sout{display:none}}
@media(max-width:980px){.tright{display:none}.twho b{font-size:15px}}

.saveall{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 4px;padding-top:14px;
 border-top:1px solid #eae7e2}
.saveall .btn{padding:10px 26px}

/* the profile button shows the person, not a flat colour */
.acard.aface{background:#fff;color:var(--ink2);border:1px solid #e4e1db;flex-direction:row;align-items:center;
 gap:14px;justify-content:flex-start}
.acard.aface:hover{filter:none;border-color:#c9d4e8;box-shadow:0 2px 8px #0000000f}
.acard.aface .facewrap{flex:0 0 auto}
.acard.aface img,.acard.aface .initials{width:54px;height:54px;border-radius:50%;object-fit:cover;display:grid;
 place-items:center;background:#e7ecf5;color:#4a5b7a;font-weight:700;font-size:17px}
.acard.aface b{display:block;font-size:14px;color:var(--navy);line-height:1.2;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.acard.aface span span,.acard.aface>span:last-child{font-weight:600;font-size:12.5px;color:#7b8798}

.fallback{color:#a3701a}

/* a marking form: one row per criterion */
.marks{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.markrow{display:grid;grid-template-columns:1fr 92px 58px;gap:12px;align-items:center;
 background:#faf9f7;border:1px solid #eae7e2;border-radius:11px;padding:11px 14px}
.mname{font-size:13.5px;font-weight:600;color:#2c3a55}
.markbox{font-size:17px;font-weight:700;text-align:center;padding:9px 6px;border-radius:9px;
 border:1px solid #d8d5cf;width:100%}
.markbox:focus{outline:2px solid #1d4ed8;outline-offset:1px}
.mmax{font-size:12px;color:#8a8a8a}
@media(pointer:coarse){.markbox{font-size:19px;padding:12px 6px}}

/* --- timetable: laid out like EduPage - a row per day, a column per period, breaks as narrow columns --- */
.ttbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;justify-content:space-between;margin:0 0 14px}
.ttpick{display:flex;flex-direction:column;gap:3px;min-width:200px;max-width:100%}
.ttpick label{margin:0;font-size:11px;color:#6b6b6b;text-transform:uppercase;letter-spacing:.06em}
.ttpick select{max-width:100%}
.tttools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tttools .btn{text-decoration:none}
.tttabs{display:flex;flex-wrap:wrap;gap:3px;border-bottom:2px solid #0b2f6b}
.tttabs a{padding:7px 14px;border-radius:8px 8px 0 0;background:#eef0f4;color:#444;text-decoration:none;
 font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tttabs a.on{background:#0b2f6b;color:#fff}
.ttweek{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ttweek .btn{text-decoration:none}.ttweek span{font-size:12px;color:#6b6b6b;margin-left:4px}
.tthead{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start;margin-bottom:10px}
.tthead h2{margin:0;font-size:22px;text-align:center}.tthead .sub{text-align:center;margin:2px 0 0}
.ttschool{font-size:11px;color:#555}
.ttct{font-size:12px;color:#333;text-align:right}
.ttwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ttgrid{border-collapse:collapse;width:100%;min-width:760px;table-layout:fixed;font-size:12px}
.ttgrid th,.ttgrid td{border:1px solid #c9c5bd;padding:0;text-align:center;vertical-align:middle}
.ttgrid th{background:#f6f4f0;color:#222;text-transform:none;letter-spacing:0}
.ttgrid th.ttcorner{width:54px}
.ttgrid th.ttph{padding:5px 3px}
.ttgrid th.ttph b{display:block;font-size:14px}
.ttgrid th.ttph span{display:block;font-size:10px;color:#666;font-weight:500}
.ttgrid th.ttph.ttbrk{width:42px;padding:4px 2px}
.ttgrid th.ttph.ttbrk b{font-size:8.5px;font-weight:600;line-height:1.15;color:#777;overflow-wrap:anywhere}
.ttgrid th.ttph.ttbrk span{font-size:8.5px}
.ttgrid td.ttbrk{background:#efece6}
.ttgrid th.ttd{font-size:20px;font-weight:800;padding:4px 2px}
.ttgrid th.ttd b{display:block}
.ttgrid th.ttd span{display:block;font-size:10px;font-weight:500;color:#777}
.ttgrid th.ttd.today{background:#e3ecfb}
.ttgrid td{height:64px}
.ttgrid td.clash{background:#fdeaea}
.ttl{display:flex;flex-direction:column;justify-content:space-between;min-height:64px;padding:3px 4px;box-sizing:border-box}
.ttl>b{font-size:15px;font-weight:800;color:#111;line-height:1.1;margin:2px 0;overflow-wrap:anywhere}
.ttc{display:flex;justify-content:space-between;gap:4px;font-size:10px;line-height:1.2;color:#444}
.ttc span:last-child{text-align:right}
td.ttsplit .ttl{min-height:0}
td.ttsplit .ttl>b{font-size:12px}
td.ttsplit .ttl+.ttl{border-top:1px dashed #b9b4ab}
.ttl.ttcov{box-shadow:inset 0 0 0 2px #2f9e3f}
.ttl.ttoff{box-shadow:inset 0 0 0 2px #b42318;background:repeating-linear-gradient(135deg,#fff,#fff 6px,#fbeaea 6px,#fbeaea 12px) !important}
.ttl s{color:#b42318}
mark.ttsub{background:#d6f3df;color:#0e6b35;font-weight:700;border-radius:3px;padding:0 3px}
em.ttcx{font-style:normal;color:#b42318;font-weight:700}
.ttsubs{margin:10px 0 0;padding-left:18px;font-size:12px;color:#333}
.ttfoot{margin-top:8px;font-size:11px;color:#6b6b6b}
.ttwarn{color:#b42318;font-style:normal;font-size:10.5px;display:block}.ttwarn.ttin{display:inline;font-size:inherit}
.ttedit .ttgrid{min-width:1040px}
.ttedit .ttgrid td{padding:4px;height:auto;vertical-align:top}
.ttedit .ttgrid input,.ttedit .ttgrid select{width:100%;padding:4px 5px;font-size:11.5px;margin:0;box-sizing:border-box}
.ttedit .ttgrid select,.ttedit .ttgrid input+input{margin-top:3px;color:#444}
.ttdays{display:flex;flex-wrap:wrap;gap:8px 18px}
.ttday{display:flex;align-items:center;gap:6px;margin:0;font-weight:500}
.ttday input{width:auto}
.tttts .ttdays{gap:4px 10px}.tttts .ttday{font-size:12px}
.tttts td{vertical-align:top}.tttts .ttdates input{width:140px;margin:0 0 4px}
.ttnew{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-top:16px}
.ttnew label{display:flex;flex-direction:column;gap:3px;margin:0;font-size:12px;color:#555;flex:0 1 auto;min-width:0}
.ttnew input{max-width:100%}
.ttsetup td input{width:100%}.ttsetup td.c{text-align:center}.ttsetup td.c input{width:auto}
.ttsetup td select{max-width:220px}
.ttsetup textarea{width:100%;font:inherit;padding:7px 9px;border:1px solid #d8d5cf;border-radius:8px}
/* substitution: the published list, the admins' day, the home-page card */
.sbday input{width:auto;padding:4px 8px;font-size:12px;margin-left:4px}
.sblist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px 22px}
.sbgroup h3{margin:0 0 4px;font-size:14px;border-bottom:2px solid #0b2f6b;padding-bottom:3px}
.sbgroup ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.5}
.sbgroup li.sboff{color:#b42318}.sbgroup li.sbin{color:#0e6b35}
.sbpanel h3{margin:16px 0 6px;font-size:14px}.sbpanel h2+h3{margin-top:8px}
.sbinline{display:inline;margin:0}
.sbtable td{vertical-align:middle}.sbtable td.c{text-align:center}
.sbcovs{line-height:1.9}
.sbcov{display:inline-block;margin:1px 6px 1px 0;padding:1px 8px;border-radius:10px;background:#eef2fb;color:#0b2f6b;font-size:12px;white-space:nowrap}
.sbcov small{color:#5a6b85;font-size:11px}
.sblessons{list-style:none;margin:0;padding:0}
.sbitem{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:10px 0;
 border-top:1px solid #eee}
.sbitem:first-child{border-top:0}
.sbwhat{flex:1 1 260px;min-width:0;font-size:13px}.sbwhat .hint{font-size:12px}
.sbassign,.sbdo{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:0 1 auto;min-width:0;margin:0}
.sbassign select{width:auto;max-width:340px;padding:5px 8px;font-size:12px}
.sbforce{display:flex;align-items:center;gap:4px;margin:0;font-size:11.5px;font-weight:500;color:#555}
.sbforce input{width:auto;margin:0}
.sbbanner{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:12px 16px;border-radius:12px;
 background:#fff7e6;border:1px solid #f3d69b;color:#6a4300;text-decoration:none}
.sbbanner:hover{border-color:#e0b85c}
.sbbanner b{display:block;font-size:14.5px}.sbbanner span{font-size:12px}.sbbanner>span:nth-child(2){flex:1}
.sbbanner .chev{font-size:22px}
@media(max-width:700px){
 .sbassign select{max-width:100%;flex:1 1 100%}
 .tthead{grid-template-columns:1fr}.tthead .ttct,.ttschool{text-align:center}
 .ttpick{min-width:0;flex:1 1 100%}
}
@media print{
 .side,.tbar,.bnav,.scrim,.linkbtn,.ttbar{display:none !important}
 .app{display:block}
 .ttsheet{border:0;box-shadow:none;padding:0;margin:0}
 .ttgrid{min-width:0;font-size:8pt}
 .ttgrid td{height:15mm}
 .ttl{min-height:15mm}
 .ttgrid th,.ttgrid td,.ttl,mark.ttsub{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* --- the whole-school lesson grid (aSc style) --- */
.ttallwrap{overflow:auto;max-height:78vh;border:1px solid #cfd3da;border-radius:6px}
.ttall{border-collapse:separate;border-spacing:0;font-size:11px;table-layout:auto}
.ttall.z1{font-size:9px}.ttall.z3{font-size:13.5px}
.ttall th,.ttall td{border-right:1px solid #cfd3da;border-bottom:1px solid #cfd3da;padding:0;vertical-align:top}
/* the header is two thin rows as in aSc - the day's name over its periods, the period numbers under it - and both
   stay in view while the grid scrolls: each row is exactly 18px tall, so the second one sticks 18px down (an em
   offset drifted with the zoom). .ttday is also the Manage page's day tick-box label (display:flex); a flex th
   stops being a table cell and every day name piled up in the corner - so here it is a table cell again. */
.ttall thead th{position:sticky;top:0;z-index:3;background:#f7f8fa;font-size:.85em;font-weight:500;padding:0 2px;
 height:18px;line-height:16px;white-space:nowrap;overflow:hidden;text-align:center;color:#333;letter-spacing:0;
 text-transform:none;min-width:2.6em}
.ttall thead tr:first-child th{top:0}.ttall thead tr:last-child th{top:18px}
.ttall th.ttday{display:table-cell;background:#f7f8fa;color:#222;font-weight:500;border-right:2px solid #7d8799}
.ttall thead th.now{background:#ffe600;color:#111;font-weight:700}
.ttall th.ttrow{position:sticky;left:0;z-index:2;background:#fff;text-align:left;padding:.3em .7em;font-size:1.05em;
 font-weight:700;white-space:nowrap;color:#111;letter-spacing:0;text-transform:none}
.ttall thead th.ttrow{z-index:4;background:#f3f6f3}
.ttall td{height:3.2em;min-width:3.2em}
.ttall td.dayend,.ttall th.dayend{border-right:2px solid #7d8799}
.ttstack{display:flex;flex-direction:column;gap:1px;height:100%}
.ttcard{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;min-height:3.1em;
 padding:.15em .1em;font-weight:700;font-size:1em;line-height:1.05;text-align:center;text-decoration:none}
.ttcard small{font-weight:500;font-size:.72em;opacity:.85;line-height:1.1}
.ttstack.many .ttcard{min-height:1.5em;font-size:.85em}.ttstack.many .ttcard small{display:none}
.ttcard:hover{filter:brightness(1.08)}
.ttvalid{margin:8px 0 0;font-size:11px;color:#6b6b6b}
@media print{
 .ttallwrap{max-height:none;overflow:visible;border:0}
 .ttall{font-size:7pt}
 .ttall th,.ttall td,.ttcard{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .ttall thead th,.ttall th.ttrow{position:static}
}

/* --- the substitution board (EduPage style): lessons table on the left, a teacher-per-row day on the right --- */
.sbsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.sbsplit{grid-template-columns:1fr}}
.sblist tr.sbrow{cursor:pointer}.sblist tr.sbrow:hover td{background:#f3f6fb}
.sblist tr.sbrow.on td{background:#3b6fb6;color:#fff}.sblist tr.sbrow.on td a,.sblist tr.sbrow.on td em,.sblist tr.sbrow.on td.hint{color:#fff}
.sbtick{color:#2f9e3f;font-weight:700}
.sbboard h4{margin:0 0 6px;font-size:12.5px;color:#0b2f6b;text-align:center}
.sbb{border-collapse:collapse;font-size:11px;width:100%}
.sbb th,.sbb td{border:1px solid #cfd3da;padding:0;height:22px;text-align:center}
.sbb tr:first-child th{font-size:10px;background:#f3f6f3;padding:2px;letter-spacing:0}
.sbb th.lp{background:#ffe600}.sbb td.lp{background:#fff3a0}
.sbb td.busy{background:#f6bcbc}.sbb td.cov{background:#e0201f;color:#fff;font-weight:700}.sbb td.here{background:#e0201f}
.sbb td.busy.lp{background:#e9a0a0}.sbb td.cov.lp{background:#c81414;color:#fff}
.sbb th.sbn{text-align:left;padding:1px 7px;white-space:nowrap;background:#fff;font-weight:700;text-transform:none;font-size:11px;color:#111}
.sbb tr.cls th.sbn{background:#eef2fb}
.sbb tr.chosen th.sbn{background:#3fbf5f}.sbb tr.chosen th.sbn .sbname,.sbb tr.chosen th.sbn small{color:#fff}
.sbb tr.chosen td{background:#fff}
.sbb tr.chosen td.busy{background:#f6bcbc}.sbb tr.chosen td.cov{background:#e0201f;color:#fff}   /* a period they cover: red (11 Oct 2026) */
.sbb tr.away th.sbn{color:#999;font-weight:500}
.sbboard .ttwrap{max-height:72vh;overflow:auto}
.sbb tr:first-child th{position:sticky;top:0;z-index:3}
.sbb th.sbn{position:sticky;left:0;z-index:2;min-width:150px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.sbb tr:first-child th.sbn{z-index:4}
.sbb tr.sbt{cursor:pointer}.sbb tr.away{cursor:default}
.sbb tr.sbt:not(.away):hover td{filter:brightness(.93)}.sbb tr.sbt:not(.away):hover th.sbn{background:#eef2fb}
.sbb tr.chosen:hover th.sbn{background:#35a852}
.sbname{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#0b2f6b;cursor:pointer;text-align:left}
.sbb tr.busy .sbname{color:#7a5a00}.sbb small{display:block;font-weight:500;font-size:9.5px;color:#666;line-height:1.1}

/* --- Print menu and the substitution reports --- */
.sbprint{position:relative;display:inline-block}.sbprint summary{list-style:none;cursor:pointer;display:inline-block}
.sbprint summary::-webkit-details-marker{display:none}
.sbmenu{position:absolute;right:0;top:110%;background:#fff;border:1px solid #dedad3;border-radius:8px;box-shadow:0 4px 14px #0002;
 padding:6px 0;min-width:310px;z-index:20;text-align:left}
.sbmenu a{display:block;padding:7px 14px;color:#1d1d1f;font-size:13px;white-space:nowrap}.sbmenu a:hover{background:#eef0f4}
.rep .repbox{border:1px solid #cfd3da;border-radius:8px;padding:8px 14px;margin:10px 0}
.rep .repbox h3{margin:0 0 4px;font-size:15px;display:inline-block;border:1px solid #cfd3da;border-radius:6px;padding:2px 10px}
.rep ul{list-style:none;margin:4px 0 0;padding:0}.rep li{padding:2px 0;font-size:12.5px}
.repno{display:inline-block;min-width:2.4em;font-size:13px;margin-right:6px}.repn{font-size:12px;color:#666;font-weight:500;margin-left:6px}
@media print{.rep .repbox{break-inside:avoid}}

/* --- the board's row menu (aSc style) --- */
.sbmenu2{position:fixed;z-index:50;background:#fff;border:1px solid #cfd3da;border-radius:8px;box-shadow:0 6px 18px #0003;
 padding:6px 0;min-width:170px}
.sbmenu2 button{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:8px 14px 8px 10px;
 font:inherit;font-size:13px;color:#1d1d1f;cursor:pointer;text-align:left}
.sbmenu2 button:hover:not([disabled]){background:#eef0f4}.sbmenu2 button[disabled]{color:#aaa;cursor:default}
.sbmenu2 button i{width:14px;font-style:normal;color:#2f9e3f;visibility:hidden}.sbmenu2 button.on i{visibility:visible}
.sbmsep{border-top:1px solid #e6e3de;margin:4px 0}
.sbdetail{position:fixed;z-index:51;background:#fff;border:1px solid #cfd3da;border-radius:8px;box-shadow:0 6px 18px #0003;
 padding:10px 14px;max-width:360px;font-size:12.5px;line-height:1.45}

/* --- the grid page uses the whole screen, and "fit" zoom squeezes the week on to it as aSc does --- */
main.wide{max-width:none;padding:14px 16px 30px}
.ttall.zfit{width:100%;table-layout:fixed;font-size:10.5px}
.ttall.zfit th.ttrow{width:118px;white-space:normal;line-height:1.1;padding:.2em .5em;font-size:11px}
.ttall.zfit thead th{min-width:0;padding:0 1px;font-size:9px}
.ttall.zfit td{min-width:0;height:2.3em}.ttall.zfit .ttcard{min-height:2.2em;padding:0;font-size:1em}
.ttall.zfit .ttcard small{display:none}.ttall.zfit .ttstack.many .ttcard{min-height:1.1em;font-size:.82em}
@media(max-width:900px){.ttall.zfit{width:auto;table-layout:auto;font-size:10px}.ttall.zfit td{min-width:2.8em}}

/* ---- the Criteria / Stats box under the substitution board (EduPage) ---- */
.sbcrit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;padding:8px 12px;border:1px solid #d9dce2;
 border-radius:8px;background:#fbfbfd;font-size:12px}
.sbcrit h5{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b6b6b}
.sbcrit p{margin:0}.sbcrit #sbcname{font-weight:700;color:#0b2f6b}
.sbcrit dl{display:grid;grid-template-columns:auto auto;gap:2px 12px;margin:0}
.sbcrit dt{color:#555}.sbcrit dd{margin:0;font-weight:700;text-align:right}

/* ---- the Main grid as aSc: one-line row names (teachers by short name), so every row is the same height ---- */
.ttall.zfit th.ttrow{width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttall.zfit .ttcard{line-height:1.05;overflow:hidden}

/* ---- the Main grid's view picker, as aSc's: a drop-down with an icon per view ---- */
.ttvpick{position:relative;display:inline-block}
.ttvpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-width:170px;padding:6px 30px 6px 10px;
 border:1px solid #c9ced8;border-radius:6px;background:#fff;font-weight:600;position:relative}
.ttvpick summary::-webkit-details-marker{display:none}
.ttvpick summary::after{content:"";position:absolute;right:11px;top:50%;margin-top:-2px;border:5px solid transparent;
 border-top-color:#666;border-bottom:0}
.ttvmenu{position:absolute;z-index:20;left:0;top:calc(100% + 3px);min-width:200px;background:#fff;border:1px solid #c9ced8;
 border-radius:4px;box-shadow:0 6px 18px #0002;padding:4px 0}
.ttvmenu a{display:flex;align-items:center;gap:10px;padding:7px 14px;color:#222;text-decoration:none}
.ttvmenu a:hover{background:#eef3fb}.ttvmenu a.on{background:#fbf3c4}
.ttvi{width:20px;text-align:center;font-size:16px}

/* ---- the active timetable, named where the Super Admin has a list of them ---- */
.ttfixed{padding:7px 12px;border:1px solid #d9dce2;border-radius:6px;background:#f7f8fa;font-weight:600;color:#0b2f6b}
.ttfixed span{font-weight:400;color:#6b6b6b}
.ttactive .ttnowon{font-size:15px;margin:0 0 6px}

/* ---- printing a week (the Print button): clean white boxes, as aSc prints them - no tints, no shaded breaks ---- */
@media print{
 .ttsheet .ttl,.ttsheet td,.ttsheet th,.ttsheet .ttl.ttcov,.ttsheet .ttl.ttoff{background:#fff !important;box-shadow:none !important}
 .ttsheet th.now,.ttsheet td.now,.ttsheet .today{background:#fff !important}
}

/* ---- the Main grid's cards as clean as aSc's: the code alone, plain Arial, not bold ---- */
.ttall .ttcard{font-family:Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:0}

/* ---- beside the Timetable list (Super Admin): the active one starred, or a button to make this one active ---- */
.ttisactive{display:inline-block;padding:7px 12px;border-radius:6px;background:#e4f4e7;color:#2f8f46;font-weight:700;
 text-decoration:none;white-space:nowrap}
.ttmkact{white-space:nowrap}

/* ---- the sidebar: the school on top, EduGulhun at the foot ---- */
.sbrand.sbschool{align-items:center}
.sbrand.sbschool img{width:40px;height:40px;border-radius:50%;padding:2px;flex:0 0 auto}
.sbrand.sbschool div{min-width:0}
.sbrand.sbschool b{display:block;font-size:15px;line-height:1.2}
.sbrand.sbschool span{display:block;color:#9fb0d4;font-size:11px;margin-top:2px}
.sfoot.sfedu img{border-radius:8px;padding:3px}

/* ---- the school's name on one line in the sidebar ---- */
.sbrand.sbschool b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.sbrand.sbschool span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- event folders: admins only unless shared ---- */
.foldershare{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:#fdeaea;color:#c0392b;
 white-space:nowrap;margin-right:8px}
.foldershare.on{background:#e4f4e7;color:#2f8f46}
.foldershareform{margin:0 8px 0 0}

/* ---- the events list: who each event is for, chosen in place by admins ---- */
.folderrow.adm .foldermain{grid-template-columns:34px 1fr 200px 90px}
.evwho{margin:0 8px 0 0;flex:0 0 auto}
.evwho select{width:auto;min-width:150px;padding:4px 26px 4px 10px;font-size:12px;font-weight:600;border-radius:12px;
 border:1px solid #d9dce2;background-color:#e6eefb;color:#3a68b0;cursor:pointer}
.evwho select.a-staff,.pilltag.a-staff{background-color:#e4f4e7;color:#2f8f46}
.evwho select.a-students,.pilltag.a-students{background-color:#f1e9fb;color:#6b47b0}
.evwho select.a-parents,.pilltag.a-parents{background-color:#fde9f1;color:#b03d76}
.evwho select.a-admins,.pilltag.a-admins{background-color:#fdeaea;color:#c0392b}
.evwho select.a-principal,.pilltag.a-principal,.evwho select.a-supervisor,.pilltag.a-supervisor{background-color:#fdf0dd;color:#a3701a}
.evwho select.a-leading_teacher,.pilltag.a-leading_teacher,.evwho select.a-teachers,.pilltag.a-teachers{background-color:#e0f3f5;color:#1f7a86}
@media(max-width:800px){.folderrow.adm{flex-wrap:wrap}.evwho{margin:0 0 10px 52px}}

/* ---- under the Main grid: the lessons not on it (aSc's tray, read-only) ---- */
.ttnotplaced{margin-top:10px;background:#ceced3;border:1px solid #000;padding:8px 10px}
.ttnph{font-size:12px;color:#222;margin-bottom:6px}
.ttnph a{margin-left:4px}
.ttnpcards{display:flex;flex-wrap:wrap;gap:6px}
.ttnpc{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;min-height:40px;
 padding:3px 8px;border:1px solid #0005;font-family:Arial,Helvetica,sans-serif;cursor:help}
.ttnpc b{font-size:13px}.ttnpc small{font-size:10px;opacity:.9;max-width:150px;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.ttnotplaced .hint{margin:0}

/* ---- the absence form: When is he/she absent - the whole day, or Period from / till ---- */
.sbwhen select{min-width:120px}
.sbspan{display:inline-flex;gap:8px;align-items:flex-end}
.sbspan[hidden]{display:none}
.sbspan select{min-width:64px}

/* ---- who an event is for: several groups at once, ticked ---- */
.evauds{display:flex;flex-wrap:wrap;gap:6px 8px;padding:4px 0}
.evaud{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px 3px 6px;
 border-radius:12px;background:#e6eefb;color:#3a68b0;cursor:pointer;white-space:nowrap}
.evaud input{width:auto;margin:0}
.evwho summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:4px;align-items:center;max-width:220px}
.evwho summary::-webkit-details-marker{display:none}
.evwho summary::after{content:"\25BE";color:#666;margin-left:2px}
.evwho{position:relative;flex:0 0 auto;margin-right:8px}
.evwhof{position:absolute;z-index:20;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #c9ced8;border-radius:8px;
 box-shadow:0 6px 18px #0002;padding:8px;display:flex;flex-direction:column;gap:5px;min-width:190px}
.evwhof .btn{margin-top:4px;align-self:flex-end}
.evaud.a-staff,.pilltag.a-staff{background:#e4f4e7;color:#2f8f46}
.evaud.a-students,.pilltag.a-students{background:#f1e9fb;color:#6b47b0}
.evaud.a-parents,.pilltag.a-parents{background:#fde9f1;color:#b03d76}
.evaud.a-admins,.pilltag.a-admins{background:#fdeaea;color:#c0392b}
.evaud.a-principal,.pilltag.a-principal,.evaud.a-supervisor,.pilltag.a-supervisor{background:#fdf0dd;color:#a3701a}
.evaud.a-leading_teacher,.pilltag.a-leading_teacher,.evaud.a-teachers,.pilltag.a-teachers{background:#e0f3f5;color:#1f7a86}

/* ---- the substitution page as EduPage lays it out: the absent teachers down the left, the lessons and the board beside ---- */
.sbday{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}
.sbleft{border-right:1px solid #e8e6e2;padding-right:14px;min-width:0}
.sbmain{min-width:0}
.sbmain .sbsplit{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.sbnew summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 10px;color:#0b2f6b}
.sbnew summary::-webkit-details-marker{display:none}
.sbplus{width:56px;height:56px;border-radius:50%;background:#5cb85c;color:#fff;font-size:38px;line-height:56px;text-align:center;
 box-shadow:0 2px 6px #0003}
.sbnew[open] summary{color:#333}
.sbnew .ttnew{padding:6px 0 10px;border-bottom:1px solid #e8e6e2}
.sbnew .ttnew label,.sbnew .ttnew .sbwhen{display:block;width:100%}
.sbnew .ttnew select,.sbnew .ttnew input{width:100%}
.sbsub{margin:8px 0 4px;font-size:13px;background:#eef2fb;padding:4px 8px;border-radius:4px}
.sbabs{list-style:none;margin:0;padding:0}
.sbabs li{position:relative}
.sbabsd summary{list-style:none;cursor:pointer;padding:6px 8px;border-radius:4px;font-size:13px}
.sbabsd summary::-webkit-details-marker{display:none}
.sbabsd summary:hover,.sbabsd[open] summary{background:#dbe7fb}
.sbabscard{position:absolute;z-index:30;left:0;top:calc(100% + 2px);width:290px;background:#fff;border:1px solid #c9ced8;
 border-radius:8px;box-shadow:0 8px 24px #0003;padding:10px 12px 12px}
.sbabscard h4{margin:0 0 8px;font-size:16px;color:#333}
.sbabscard dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 10px;font-size:12px}
.sbabscard dt{color:#888;text-transform:uppercase;font-size:10px;letter-spacing:.05em;align-self:center}
.sbabscard dd{margin:0}
.sbabsbtns{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid #e8e6e2}
.sbabsbtns form{margin:0}
.sbchange{padding-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.sbchange .sbwhen{font-size:11px}
.sblate summary{cursor:pointer;list-style:none}
.sblate summary::-webkit-details-marker{display:none}
.sblate h3{display:inline;font-size:13px;margin:0}
.sbn2{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#c0392b;color:#fff;font-size:11px;text-align:center}
.sbstrip{margin:0 0 8px}
.sblist tr.sbhl td{background:#fff3a0}
@media(max-width:1000px){.sbday{grid-template-columns:1fr}.sbleft{border-right:0;padding-right:0}}

/* ---- the substitution board and lesson list as small as EduPage's: abbreviations, one line per row ---- */
.sbmain .sbsplit{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
.sbb{font-size:10.5px}
.sbb th,.sbb td{height:18px}
.sbb tr:first-child th{font-size:9.5px}
.sbb th.sbn{min-width:64px;max-width:96px;padding:0 6px;font-size:11px}
.sbb tr.cls th.sbn{font-size:11px}
.sbb small{display:none}
.sblist th,.sblist td{white-space:nowrap;padding:4px 8px;font-size:12px}
.sblist td:last-child{white-space:normal}

/* ---- the board takes only the room it needs; the lesson list gets the rest ---- */
.sbmain .sbsplit{grid-template-columns:minmax(0,1fr) auto}
.sbmain .sbboard .sbb{width:auto}
.sbmain .sbboard{min-width:300px}

/* ---- the board column: as wide as its table, the period cells readable; the lesson list gets the rest ---- */
.sbmain .sbsplit{grid-template-columns:minmax(0,1fr) minmax(300px,440px)}
.sbmain .sbboard{min-width:0}
.sbb td{min-width:22px}
.sbboard h4{text-align:left}
.sbboards p.hint{max-width:440px}

/* ---- the substitution reports as EduPage prints them: black Arial, black-bordered boxes ---- */
.rep,.rep .tthead h2,.rep .sub,.rep .hint,.rep li,.rep .repno,.rep .repn{font-family:Arial,Helvetica,sans-serif;color:#000}
.rep .tthead h2{font-weight:400;font-size:22px}
.rep .tthead .sub{font-size:14px}
.rep .tthead .sub .hint{font-size:11px;color:#000}
.rep .ttschool{color:#000}
.rep .repbox{border:1px solid #000;border-radius:6px;padding:6px 10px 8px;margin:10px 0;background:#fff}
.rep .repbox h3{border:1px solid #000;border-radius:5px;padding:2px 8px;font-size:17px;font-weight:700;color:#000;background:#fff}
.rep .repbox .repn{color:#000;font-weight:400;font-size:12px}
.rep ul{margin:6px 0 0}.rep li{font-size:12px;padding:2px 0 2px 6px;color:#000}
.rep .repno{font-size:14px;min-width:2.2em}
.rep li .hint{color:#000}
.rep .repbox .hint{color:#000}
@media print{.rep .repbox{border-color:#000}.rep{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ---- the sheet's corner: the school's logo under its name ---- */
.ttschool{display:flex;flex-direction:column;align-items:flex-start;gap:4px;white-space:nowrap}   /* the name on one line */
.ttlogo{width:44px;height:44px;object-fit:contain}
@media print{.ttlogo{width:14mm;height:14mm}}

/* ---- no empty space: the lesson list stretches to the board, the board fills its column to the right edge ---- */
.sbmain .sbsplit{grid-template-columns:minmax(0,1fr) minmax(320px,36%);gap:10px}
.sbmain .sbsplit > .ttwrap{width:100%}
table.sblist{display:table;width:100%}
.sbmain .sbboard{min-width:0;width:100%}
.sbmain .sbboard .ttwrap{width:100%}
.sbmain .sbboard .sbb{width:100%;table-layout:fixed}
.sbb th.sbn{width:96px;min-width:0;max-width:none}
.sbb td{min-width:0}

/* ---- under the board: put in someone who is not a teacher ---- */
.sbother{display:inline-flex;gap:6px;align-items:flex-end;margin-left:auto}
.sbother label{font-size:11px;color:#6b6b6b;display:flex;flex-direction:column;gap:2px}
.sbother select{min-width:170px;font-size:12px}

/* ---- once a substitute is put in, the periods they now take go solid green, as aSc shows it ---- */
.sbb tr.chosen td.lp,.sbb tr.chosen td.cov.lp,.sbb tr.chosen td.busy.lp{background:#3cb371}

/* ---- Publish / Cancel over the day's lessons (EduPage) ---- */
.sbpubbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border:1px solid #d9dce2;
 border-radius:6px;background:#f7f8fa;font-size:13px}
.sbpubbar span{color:#333}
.sbpub{background:#eef2fb;color:#1f3f7a;border:1px solid #b9c6e0}
.sbpub:hover{background:#dfe7f8}
.sbcancel{color:#777}
.sbpubok{color:#2f8f46;font-weight:600}

/* ---- the New absent box, as EduPage opens it over the page ---- */
.sbnew[open]::before{content:"";position:fixed;inset:0;background:#0003;z-index:59}
.sbnewbox{position:fixed;left:50%;top:12%;transform:translateX(-50%);width:min(640px,94vw);max-height:80vh;overflow-y:auto;overflow-x:hidden;
 background:#fff;border:1px solid #5b606b;border-radius:4px;box-shadow:0 12px 40px #0005;z-index:60;text-align:left;font-size:13px}
.sbnewh{background:#3c4049;color:#fff;padding:6px 10px;display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.sbnewx{background:none;border:0;color:#fff;font-size:14px;cursor:pointer;padding:0 4px}
.sbnewf{padding:6px 14px 12px}
.sbnrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed #e3e3e3}
.sbnico{font-size:30px;width:52px;text-align:center;flex:0 0 auto;line-height:1}
.sbnrow label,.sbnrow .sbwhen{display:flex;align-items:center;gap:12px;font-size:13px;color:#333;margin:0}
.sbnrow select{min-width:160px;width:auto;font-size:13px}
.sbnrow .sbspan{margin-left:6px}
/* Period from / till must fit on the line (8 Oct 2026: "till" was cut off); on a narrow screen they wrap below */
.sbnrow{flex-wrap:wrap;row-gap:8px}
.sbnrow .sbwhen{white-space:nowrap}
.sbnrow .sbwhen select{min-width:110px}
.sbnrow .sbspan label{gap:8px;white-space:nowrap}
.sbnrow .sbspan select{min-width:72px}
.sbninl input{width:auto;margin:0 6px 0 0}
.sbnnote{display:block;margin:12px 0 0;font-size:13px;color:#333}
.sbnnote textarea{display:block;width:100%;margin-top:4px;font:inherit}
.sbnbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #e3e3e3}
.sbok{background:#5cb85c;border-color:#4cae4c}

/* ---- EduPage's day navigation: green arrows round the date, the weekday under it ---- */
.sbdaywrap{display:inline-block}
.sbdaynav{display:flex;align-items:center;gap:6px}
.sbarrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;background:#bfe3c2;
 border:1px solid #7fbf86;color:#2e7d32;text-decoration:none;font-size:11px;border-radius:2px}
.sbarrow:hover{background:#a9d9ad}
.sbdatef{margin:0}
.sbdatebox{position:relative;display:inline-block;border:1px solid #9a9a9a;background:#fff;padding:3px 14px;font-size:13px;
 min-width:96px;text-align:center;cursor:pointer;border-radius:2px}
.sbdatebox input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.sbdayname{font-size:13px;color:#333;text-align:center;margin-top:4px}
/* ---- the New absent picture ---- */
.sbnewpic{display:block;margin:0 auto 2px}
.sbnew summary:hover .sbnewpic circle[fill="#5cb85c"]{fill:#4cae4c}

/* ---- clear lines and boxes, as EduPage draws them: the lesson list and the board ---- */
table.sblist{border:1px solid #c9d0dc;border-collapse:collapse}
.sblist th{background:#e9edf3;color:#333;border:1px solid #c9d0dc;font-weight:600}
.sblist td{border:1px solid #d5dbe6;border-left:0;border-right:0;padding:5px 8px}
.sblist td:first-child{border-left:1px solid #d5dbe6}.sblist td:last-child{border-right:1px solid #d5dbe6}
.sblist tr.sbrow:nth-child(odd) td{background:#fff}
.sblist tr.sbrow:hover td{background:#e8eefb}
.sblist tr.sbrow.on td{background:#3b6fb6}
.sbb{border:1px solid #333}
.sbb th,.sbb td{border:1px solid #8a8a8a}
.sbb tr:first-child th{border-bottom:2px solid #333;background:#e9edf3}
.sbb tr.cls th,.sbb tr.cls td{border-bottom:2px solid #333}
.sbb th.sbn{border-right:2px solid #333;background:#fff}
.sbb td.here{outline:2px solid #000;outline-offset:-2px}

/* ---- EduPage's Publish button: light grey, a green tick ---- */
.sbpubbar .btn.sbpub{background:#f4f5f7;color:#333;border:1px solid #c9ced8;font-weight:500}
.sbpubbar .btn.sbpub:hover{background:#e9ebef}
.sbtickg{color:#43a05a;font-weight:700}
.sbpubbar .btn.sbcancel{background:none;border:0;color:#888}

/* ---- EduPage's ticks and numbers in the lesson list: a bold green tick, plain black numbers, clear row lines ---- */
.sblist .sbtick{color:#43a05a;font-size:17px;font-weight:900;line-height:1}
.sblist tr.sbrow.on .sbtick{color:#a9e0b4}
.sblist td:nth-child(2) a{color:#111;text-decoration:none;font-weight:600}
.sblist tr.sbrow.on td:nth-child(2) a{color:#fff}
.sblist td{border-top:1px solid #c9d0dc;border-bottom:1px solid #c9d0dc}
.sblist td:first-child{width:34px;text-align:center}

/* ---- who can edit the substitution ---- */
.sbaccd summary{cursor:pointer;list-style:none}.sbaccd summary::-webkit-details-marker{display:none}
.sbaccd summary h2{display:inline;margin-right:10px}
.sbaccs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 14px;margin:8px 0}
.sbacc{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:400}
.sbacc input{width:auto;margin:0}

/* --- Real-Time Monitor: the photo grows under the pointer, the way the clock's own monitor does.
   The row keeps its 34px column, so nothing shifts: the picture scales out of its box instead. --- */
.zpic{position:relative;z-index:0}
.zpic img{transition:transform .12s ease, box-shadow .12s ease}
.zmon:hover .zpic{z-index:5}
/* grow from the left edge so the picture opens to the RIGHT, into the row - scaling from the centre
   pushed it off the left of the list, where the scrolling panel cut it off */
.zmon:hover .zpic img{transform:scale(2.4);transform-origin:left center;
                      box-shadow:0 6px 22px rgba(0,0,0,.28);border:2px solid #fff}
/* on a touch screen there is no pointer to hover with, so leave the photos alone */
@media(hover:none){.zmon:hover .zpic img{transform:none;box-shadow:none;border:0}}

/* --- the Today panel and the monitor end at the same height, so the page does not leave a gap
   beside a short Real-Time Monitor list. The monitor now lists every punch of the day, so its list
   scrolls inside its own box instead of stretching the page down past the Today card. --- */
.zrow{align-items:stretch}
.zrow>.panel{height:100%}
.zmonitor{max-height:none}
.zmons{flex:1 1 auto;min-height:0;max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}

/* --- Department chart: a 0-100 scale beside the bars, like the clock's own chart --- */
.zplot{position:relative;padding-left:34px;margin-top:6px}
.zaxis{position:absolute;left:0;right:0;bottom:46px;height:var(--zh,132px);pointer-events:none}
.zaxis span{position:absolute;left:0;right:0;border-top:1px solid #efeeea}
.zaxis span i{position:absolute;left:-32px;top:-7px;width:26px;text-align:right;
               font-style:normal;font-size:9.5px;color:#a5a5a5;font-variant-numeric:tabular-nums}
.zplot .zbars{position:relative;z-index:1}
.zplot .ztrack{background:transparent}

/* --- One person, read only: the clock's own Employee layout without the input boxes --- */
.phead{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
                border-bottom:1px solid #eeede9;padding-bottom:14px;margin-bottom:12px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 26px;flex:1;min-width:0}
.pgrid.p3{grid-template-columns:1fr 1fr 1fr}
/* label sits to the left of its value, right-aligned, the way the clock's own form is laid out */
.pfield{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:9px;min-width:0}
.pfield.wide,.pwide{grid-column:1/-1}
.pfield label{font-size:11px;color:#6b6b6b;text-align:right;line-height:1.25}
.pval{font-size:12.5px;color:#222;padding:6px 9px;background:#fff;border:1px solid #ddd9d2;
      border-radius:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:31px;
      display:flex;align-items:center}
.pphoto{width:104px;height:124px;border:1px solid #ddd9d2;border-radius:5px;flex:none;overflow:hidden;
        display:grid;place-items:center;background:#fafaf8}
.pphoto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.pphoto .ph{width:100%;height:100%;display:grid;place-items:center;background:#f2f1ed;color:#9a9a9a;
            font-size:22px;font-weight:700;border-radius:0}
.pperson .znav.sub{margin:4px 0 14px}
@media(max-width:700px){.pgrid{grid-template-columns:1fr}.pperson .phead{flex-direction:column-reverse}}

/* --- A person opens as a dialog over the personnel list, the way the clock does it --- */
.pedit{position:fixed;inset:0;background:rgba(20,22,26,.45);display:grid;place-items:start center;
       padding:28px 16px;overflow:auto;z-index:60}
.pbox{background:#fff;border-radius:8px;width:min(1020px,100%);box-shadow:0 18px 60px rgba(0,0,0,.3);
      overflow:hidden}
.pbar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;
      border-bottom:1px solid #e8e6e1;font-size:14px}
.pclose{color:#888;text-decoration:none;font-size:22px;line-height:1;padding:0 4px}
.pclose:hover{color:#222}
.pbody{padding:16px}
.psec{background:#f5f4f1;border:1px solid #e8e6e1;border-radius:5px;padding:7px 12px;margin-bottom:14px;
      font-size:12.5px;color:#4a4a4a}
.pedit .phead{border-bottom:0;padding-bottom:4px;align-items:flex-start}
.ptabs{border-bottom:1px solid #e8e6e1;padding-bottom:8px;margin:14px 0 16px}
@media(max-width:700px){.pedit{padding:10px 8px}.pbody{padding:12px}}

/* --- The Employee dialog's tabs switch with CSS alone: a radio per section, the panels after them.
   No script and no page load, so a click is instant. The radios themselves are never shown. --- */
.ptabin{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.ppanel{display:none}
#pt-private:checked   ~ .ppanels .pp-private,
#pt-device:checked    ~ .ppanels .pp-device,
#pt-attendance:checked ~ .ppanels .pp-attendance,
#pt-account:checked   ~ .ppanels .pp-account{display:grid}
#pt-private:checked   ~ .ptabs label[for="pt-private"],
#pt-device:checked    ~ .ptabs label[for="pt-device"],
#pt-attendance:checked ~ .ptabs label[for="pt-attendance"],
#pt-account:checked   ~ .ptabs label[for="pt-account"]{background:#14634f;color:#fff;border-color:#14634f}
.ptabs label{cursor:pointer;user-select:none}

/* the substitution block while a change is being saved in the background */
/* The substitution board saves in the background; this slim bar is the only thing that moves,
   so the page itself never flashes or jumps. */
#subwrap.sbbusy{opacity:1}
.sbprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.7);transition:width .35s ease-out,opacity .3s .15s}
.sbprog.done{opacity:0;width:100%}
@media print{.sbprog{display:none}}

/* the cover row's little menu, like EduPage's */
.sbrowmenu{position:fixed;z-index:80;background:#fff;border:1px solid #d9d6cf;border-radius:7px;
           box-shadow:0 10px 30px rgba(0,0,0,.18);padding:4px;min-width:150px}
.sbrowmenu button{display:block;width:100%;text-align:left;background:none;border:0;padding:7px 11px;
                  font:inherit;font-size:12.5px;color:#222;border-radius:5px;cursor:pointer}
.sbrowmenu button:hover{background:#f1efe9}
.sbrowmenu small{color:#999}
td.sbtaker{cursor:pointer}
td.sbtaker:hover{background:#eef6f2;border-radius:5px}

/* the dialog's footer, where Confirm/Cancel sit in the clock's own screen */
.pfoot{display:flex;justify-content:flex-end;gap:8px;padding:11px 16px;border-top:1px solid #e8e6e1;
       background:#fafaf8}

/* Personnel list: the Employee ID column, like the clock's own grid */
th.zid,td.zid{width:92px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#2a6df4;font-weight:600}
td.zid{font-size:13px}

/* On a wide screen give the monitor more room and let both panels run the full height together,
   so there is no blank strip down the right of the Sync panel. */
@media(min-width:1500px){
  .zrow{grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr)}
}

/* the monitor list scrolls, so give the hovered row room and let its picture sit above the rest */
.zmon{position:relative}
.zmon:hover{z-index:6}

/* editable fields in the Employee dialog */
.pedit1{display:flex;align-items:center;gap:7px;min-width:0}
.pedit1 input{flex:1;min-width:0;font:inherit;font-size:12.5px;color:#222;padding:6px 9px;
              background:#fff;border:1px solid #ccc7bd;border-radius:5px;min-height:31px}
.pedit1 input:focus{outline:2px solid #14634f33;border-color:#14634f}
.pnote{font-size:9.5px;color:#a5a5a5;white-space:nowrap}
.pfoot .btn{min-width:88px;justify-content:center}

/* the two real settings on the Device panel */
.devedit{display:grid;grid-template-columns:1fr 1fr auto;gap:10px 22px;margin-top:14px;
         border-top:1px solid #eeede9;padding-top:14px}
.devedit select{font:inherit;font-size:12.5px;padding:6px 9px;border:1px solid #ccc7bd;border-radius:5px}
@media(max-width:700px){.devedit{grid-template-columns:1fr}}

.addemp{margin:10px 0}
.addemp summary{display:inline-block;cursor:pointer;list-style:none}
.addemp summary::-webkit-details-marker{display:none}
.btn.danger{background:#c0392b;border-color:#c0392b;color:#fff}
.btn.danger:hover{background:#a93226}

.zcount{font-size:11px;color:#9a9a9a;margin-left:8px;white-space:nowrap}

/* --- the sidebar's headings: click one and its pages appear under it (no script) --- */
.sb .navgrp{display:block}
.sb .navgrp>summary{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;
                    list-style:none;border-radius:9px;color:inherit;font-size:14px}
.sb .navgrp>summary::-webkit-details-marker{display:none}
.sb .navgrp>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;
                           border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.5;
                           transition:transform .15s}
.sb .navgrp[open]>summary::after{transform:rotate(45deg)}
.sb .navgrp>summary:hover{background:rgba(255,255,255,.08)}
.sb .navgrp>a{padding-left:42px;font-size:13.5px;opacity:.92}

/* --- the public page: what the school has published, for anyone, no sign-in --- */
.pubbody{margin:0;background:#f6f5f2;color:#1d2126;
         font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.pubwrap{max-width:1000px;margin:0 auto;padding:0 16px}
.pubhead{background:#0b2f6b;color:#fff;padding:16px 0}
.pubhead .pubwrap{display:flex;align-items:center;gap:14px}
.pubhead h1{margin:0;font-size:20px}
.pubhead p{margin:0;font-size:12.5px;opacity:.8}
.pubhead .btn{margin-left:auto;background:#fff;color:#0b2f6b;border-color:#fff}
.publogo{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:9px;padding:3px}
.pubnav{background:#123d86}
.pubnav .pubwrap{display:flex;gap:4px}
.pubnav a{color:#cfe0ff;text-decoration:none;padding:11px 15px;font-size:14px}
.pubnav a.on,.pubnav a:hover{background:rgba(255,255,255,.12);color:#fff}
.pubbody main{padding-top:20px;padding-bottom:34px}
.pubbody h2{font-size:19px;margin:0 0 4px}
.pubday{display:flex;gap:8px;margin:12px 0 16px}
.pubfoot{border-top:1px solid #e4e2dd;padding:14px 0;color:#8a8a8a;font-size:12.5px;background:#fff}

/* the public timetable grid */
.pubclasses{flex-wrap:wrap;gap:5px;margin:10px 0 14px}
.pubtt{border-collapse:collapse;width:100%;background:#fff}
.pubtt th,.pubtt td{border:1px solid #ddd9d2;padding:5px 6px;text-align:center;vertical-align:top;font-size:12.5px}
.pubtt th{background:#f5f4f1;font-weight:600;font-size:11.5px}
.pubtt th small{display:block;font-weight:400;color:#999;font-size:9.5px}
.pubtt th.pday{width:56px;font-size:15px;background:#fff}
.pubtt .pcell b{display:block;font-weight:600}
.pubtt .pcell small{color:#999;font-size:10px}

/* the public timetable, laid out like the printed one */
.pubpick{display:flex;align-items:center;gap:8px;margin:14px 0}
.pubpick label{font-size:12.5px;color:#666}
.pubpick select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid #ccc7bd;border-radius:6px;
                background:#fff;min-width:200px}
.pubttname{text-align:center;font-size:34px;font-weight:400;margin:10px 0 2px}
.pubttsub{text-align:center;color:#8a8a8a;font-size:12.5px;margin:0 0 14px}
.pubtt .pcell b{font-size:17px;font-weight:400}
.pubtt .pcell small{display:block;font-size:9.5px;color:#777;margin-top:2px}
.pubtt td{height:58px}

/* the front page: content on the left, the side column on the right */
.pubcols{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:34px;align-items:start}
.pubintro{margin-bottom:8px}
.pubstory{display:flex;gap:16px;padding:18px 0;border-top:1px solid #e7e5e0}
.pubthumb{width:150px;height:96px;flex:none;border-radius:6px;
          background:linear-gradient(135deg,#dfe7f3,#c8d6ea)}
.pubstory h3{margin:0 0 6px;font-size:21px;font-weight:400}
.pubstory h3 a{color:#2f6f3e;text-decoration:none}
.pubstory h3 a:hover{text-decoration:underline}
.pubstory p{margin:0 0 10px;color:#4a4a4a;font-size:13.5px}
.pubside h3{font-size:20px;font-weight:400;margin:0 0 6px}
.pubside .btn{display:block;text-align:center}
.pubsub{color:#8a8a8a;font-size:12px;margin:0 0 10px}
.pubbell{width:100%;border-collapse:collapse;font-size:12px}
.pubbell td{padding:3px 0;border-bottom:1px solid #eeece7;color:#555}
.pubbell td:last-child{text-align:right;color:#888;white-space:nowrap}
.pubside>h3:not(:first-child){margin-top:24px}
@media(max-width:820px){.pubcols{grid-template-columns:1fr}.pubthumb{display:none}}

/* ---- The public site in the school's green, and the timetable at the size aSc prints it ---- */
.pubhead{background:#5a9e2f}
.pubhead .btn{background:#fff;color:#3f7a1f;border-color:#fff}
.pubnav{background:#4d8c27}
.pubnav a{color:#e6f2dc}
.pubnav a.on,.pubnav a:hover{background:#42781f;color:#fff}
.pubstory h3 a{color:#3f7a1f}

/* the grid itself: black on white, thin rules, and room to breathe - as the printed timetable is */
.pubtt{background:#fff;table-layout:fixed}
.pubtt th,.pubtt td{border:1px solid #333;padding:4px 3px;color:#000}
.pubtt th{background:#fff;font-weight:400;font-size:17px;text-transform:none;letter-spacing:0}
.pubtt th small{display:block;font-size:9px;color:#333;font-weight:400;margin-top:1px}
/* the arrival column is a note, not a lesson - keep its heading small and let it wrap */
.pubtt th:nth-child(2){font-size:8.5px;line-height:1.15;white-space:normal;vertical-align:middle}
.pubtt th:nth-child(2) small{font-size:8.5px}
.pubtt th.pday{font-size:30px;width:78px;color:#000}
.pubtt td{height:96px;vertical-align:middle}
.pubtt .pcell{padding:2px 0}
.pubtt .pcell b{font-size:26px;font-weight:400;line-height:1.05;color:#000}
.pubtt .pcell small{font-size:10px;color:#444;text-align:right;display:block;padding-right:2px}
.pubttname{font-size:40px;color:#000}
.pubttsub{font-size:12px;color:#444}
.pubbody .pubwrap{max-width:1180px}
@media(max-width:900px){
  .pubtt .pcell b{font-size:17px}
  .pubtt th.pday{font-size:20px;width:46px}
  .pubtt td{height:64px}
  .pubttname{font-size:26px}
}

/* ---- aSc's own typography for the printed grid ---- */
.pubsheet{font-family:Arial,Helvetica,"Liberation Sans",sans-serif;max-width:940px;margin:0 auto}
.pubsheet .pubttname{font-size:40px;font-weight:400;text-align:center;margin:6px 0 2px;color:#000}
.pubttline{display:flex;justify-content:space-between;font-size:11px;color:#000;padding:0 2px 2px}
.pubttline+.ttwrap{margin-top:0}
.pubsheet .pubtt{border-collapse:collapse;width:100%}
.pubsheet .pubtt th,.pubsheet .pubtt td{border:1px solid #000;padding:2px}
.pubsheet .pubtt th{font-size:19px;font-weight:400;padding:3px 2px}
.pubsheet .pubtt th small{font-size:9px;color:#000;font-weight:400}
.pubsheet .pubtt th:nth-child(2){font-size:7.5px;line-height:1.1}
.pubsheet .pubtt th:nth-child(2) small{font-size:8px}
.pubsheet .pubtt th.pday{font-size:34px;width:92px;border:1px solid #000}
.pubsheet .pubtt td{height:98px;vertical-align:top;padding-top:6px}
.pubsheet .pubtt .pcell b{font-size:24px;font-weight:400;display:block;text-align:center;line-height:1.1}
.pubsheet .pubtt .pcell small{font-size:8.5px;color:#000;text-align:right;display:block;line-height:1.1}
.pubsheet .pubtt .pcell{margin-bottom:2px}
@media(max-width:900px){
  .pubsheet .pubtt .pcell b{font-size:16px}
  .pubsheet .pubtt th.pday{font-size:22px;width:52px}
  .pubsheet .pubtt td{height:66px}
  .pubsheet .pubttname{font-size:26px}
}

/* ---- a cell's lessons divide its height, with a rule between them, as EduPage prints them ---- */
.pubsheet .pubtt td{padding:0;height:98px;vertical-align:top}
.pstack{display:flex;flex-direction:column;height:98px}
.pubsheet .pubtt .pcell{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;
                        position:relative;padding:0 16px 0 4px;margin:0}
.pubsheet .pubtt .pcell+.pcell{border-top:1px solid #000}
.pubsheet .pubtt .pcell b{font-size:24px;font-weight:400;line-height:1;display:block;text-align:center}
/* the teacher sits at the right of their own lesson, small, the way aSc places it */
.pubsheet .pubtt .pcell small{position:absolute;right:3px;bottom:2px;font-size:8.5px;line-height:1.05;
                              color:#000;text-align:right;max-width:58%}
/* two or three in one cell: the subject shrinks so each still fits on its line */
.pstack .pcell:nth-child(n+2),.pstack .pcell:nth-child(n+2)~.pcell{}
.pstack:has(.pcell:nth-child(2)) .pcell b{font-size:19px}
.pstack:has(.pcell:nth-child(3)) .pcell b{font-size:16px}
.pstack:has(.pcell:nth-child(3)) .pcell small{font-size:7.5px}
@media(max-width:900px){
  .pstack{height:66px}
  .pubsheet .pubtt td{height:66px}
  .pstack:has(.pcell:nth-child(2)) .pcell b{font-size:13px}
  .pstack:has(.pcell:nth-child(3)) .pcell b{font-size:11px}
}

/* the day sits to the left of its row and centred down it, the way aSc prints it */
.pubsheet .pubtt th.pday{text-align:left;padding:0 0 0 14px;vertical-align:middle;font-weight:400}

/* ---- On a phone: keep the grid's real proportions and let it pan sideways.
   Squeezing ten periods into 360px ran the subjects into each other; a table that keeps its
   shape and scrolls is far easier to read than one that overlaps. ---- */
.pubsheet .ttwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){
  .pubsheet .pubtt{min-width:860px;table-layout:fixed}
  .pubsheet .pubtt th{font-size:15px}
  .pubsheet .pubtt th small{font-size:8px}
  .pubsheet .pubtt th:nth-child(2){font-size:7px}
  .pubsheet .pubtt th.pday{font-size:22px;width:62px;padding-left:8px}
  .pubsheet .pubtt td,.pstack{height:74px}
  .pubsheet .pubtt .pcell b{font-size:19px}
  .pstack:has(.pcell:nth-child(2)) .pcell b{font-size:15px}
  .pstack:has(.pcell:nth-child(3)) .pcell b{font-size:12px}
  .pubsheet .pubtt .pcell small{font-size:7.5px}
  .pubsheet .pubttname{font-size:28px}
  .pubttline{font-size:10px}
  .pubpick select{min-width:0;flex:1}
  /* a hint that it moves, rather than looking cut off */
  .pubsheet .ttwrap{box-shadow:inset -14px 0 12px -12px rgba(0,0,0,.25)}
}

/* ---- On a phone, fit the whole week on the screen the way aSc's own mobile view does.
   It is small, but a timetable you can see all of beats one you have to drag across. ---- */
@media(max-width:900px){
  .pubsheet .ttwrap{overflow-x:visible;box-shadow:none}
  .pubsheet .pubtt{min-width:0;width:100%;table-layout:fixed}
  .pubsheet .pubtt th,.pubsheet .pubtt td{padding:1px}
  .pubsheet .pubtt th{font-size:8.5px;line-height:1.1}
  .pubsheet .pubtt th small{font-size:5.5px;line-height:1}
  .pubsheet .pubtt th:nth-child(2){font-size:5px}
  .pubsheet .pubtt th:nth-child(2) small{font-size:5px}
  .pubsheet .pubtt th.pday{font-size:12px;width:26px;padding-left:2px;text-align:center}
  .pubsheet .pubtt td,.pstack{height:38px}
  .pubsheet .pubtt .pcell{padding:0 1px}
  .pubsheet .pubtt .pcell b{font-size:9.5px;line-height:1}
  .pstack:has(.pcell:nth-child(2)) .pcell b{font-size:7.5px}
  .pstack:has(.pcell:nth-child(3)) .pcell b{font-size:6px}
  .pubsheet .pubtt .pcell small{position:static;display:block;font-size:5px;line-height:1;
                                text-align:right;max-width:none;padding-right:1px}
  .pubsheet .pubttname{font-size:19px;margin:4px 0 1px}
  .pubttline{font-size:7px}
  .pubbody .pubwrap{padding:0 6px}
}

/* on a phone the teacher goes back to the corner of the cell, with the subject centred in the middle -
   sitting it beside the subject ran the two together */
@media(max-width:900px){
  .pubsheet .pubtt .pcell{position:relative;justify-content:center;align-items:center;padding:0 2px 5px}
  .pubsheet .pubtt .pcell b{font-size:10px;text-align:center;display:block}
  .pubsheet .pubtt .pcell small{position:absolute;right:1px;bottom:0;display:block;font-size:5px;
                                line-height:1;text-align:right;max-width:70%}
}

/* ---- The judgement sheet on screen, laid out as it will print (A4 landscape).
   The names were wrapping to three lines and squeezing every other column. ---- */
.psheet{overflow-x:auto}
@media print{.psheet[data-page=landscape] .pgrid th.cr{height:26mm}
 .psheet[data-page=landscape] .pgrid .nm{min-width:40mm}}
.pgrid{border-collapse:collapse;width:100%;min-width:940px;font-size:11px}
.pgrid th,.pgrid td{border:1px solid #555;padding:3px 4px;vertical-align:middle}
.pgrid thead th{text-align:center;font-weight:600;line-height:1.15;font-size:10px}
.pgrid .rg{width:34px;text-align:center}
.pgrid .nm{width:150px;text-align:left;line-height:1.2}
.pgrid .hs{width:86px;text-align:center}
.pgrid .tt{width:46px;text-align:center}
.pgrid tbody td{height:30px}
/* the criterion headings are long; let them wrap but keep every column the same width */
.pgrid thead th:not(.rg):not(.nm):not(.hs):not(.tt){width:62px;font-size:9.5px;word-break:normal;hyphens:auto}
.pgrid .mx{font-size:9px;color:#555;text-align:center}
@media print{
  .pgrid{min-width:0;font-size:7.5pt}
  .pgrid .nm{width:32mm}
  .pgrid tbody td{height:8mm}
  .pgrid thead th:not(.rg):not(.nm):not(.hs):not(.tt){width:auto;font-size:6.5pt}
}

/* Dhivehi reads right to left; Faruma/MV Boli render it properly where they are installed */
.dv,input.dv{font-family:"EG Thaana","Faruma","MV Boli","A_Faruma",system-ui,sans-serif;direction:rtl;text-align:right}
td .dv{font-size:12.5px;color:#444;margin-top:2px}

/* ================= Dashboard ================= */
.dhero{display:flex;gap:20px;align-items:center;justify-content:space-between;
       background:linear-gradient(110deg,#eaf3ff 0%,#f3f8ff 45%,#eaf6f1 100%);
       border:1px solid #e2e9f3;border-radius:16px;padding:22px 24px;margin-bottom:16px}
.dwelcome{margin:0;color:#5a6b80;font-size:14px}
.dhero h1{margin:2px 0 8px;font-size:30px;color:#12325c}
.dhero h1 span{font-size:24px}
.dquote{margin:0 0 6px;color:#5a6b80;font-size:13.5px;font-style:italic;max-width:46ch}
.dhero .hrole{margin:0;color:#6b7a8d;font-size:12.5px}

.dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0}
.dstat{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #e7e5e0;
       border-radius:14px;padding:14px 16px}
.dsicon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.dstat span{display:block;font-size:12px;color:#7b8794}
.dstat b{display:block;font-size:26px;line-height:1.15;color:#1d2a3a;font-variant-numeric:tabular-nums}
.dstat small{font-size:11px;color:#9aa4b0}

.dgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;margin-bottom:18px}
.dgroup{background:#fff;border:1px solid #e7e5e0;border-radius:16px;padding:16px}
.dghead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.dgicon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff}
.dghead h2{margin:0;font-size:16px;color:#1d2a3a}
.dghead p{margin:1px 0 0;font-size:12px;color:#8a95a2}
.dlinks{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dlink{display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:10px;background:#f6f8fa;
       color:#28323d;text-decoration:none;font-size:12.5px;border:1px solid #eef1f4}
.dlink:hover{background:#eef3f8;border-color:#dde5ee}
.dlink.off{opacity:.55}
.dlink.off:after{content:"soon";margin-left:auto;font-size:9.5px;color:#9aa4b0}
.a-blue{background:#3b82c4}.a-teal{background:#2f9e7e}.a-purple{background:#7c5cc4}
.a-orange{background:#e08b3a}.a-maroon{background:#c0506b}.a-green{background:#48a05a}
.dfoot{float:right;font-style:italic;color:#9aa4b0}
@media(max-width:760px){
  .dhero{flex-direction:column;align-items:flex-start}
  .dlinks{grid-template-columns:1fr}
}

/* ---- The teachers' substitution sheet, printed tighter: the boxes were carrying more air than
   EduPage's own version, which pushed a short day onto more paper than it needs ---- */
.rep .repbox{padding:5px 11px;margin:6px 0;border-radius:7px}
.rep .repbox h3{margin:0 0 2px;font-size:13.5px;padding:1px 8px;border-radius:5px}
.rep ul{margin:2px 0 0}
.rep li{padding:1px 0;font-size:11.5px;line-height:1.35}
.rep .tthead h2{font-size:19px;margin:0 0 2px}
.rep .tthead .sub{font-size:12.5px}
@media print{
  @page{margin:10mm}
  .rep{margin:0 !important}
  .rep .repbox{padding:4px 10px;margin:5px 0}
  .rep .repbox h3{font-size:12.5pt}
  .rep li{font-size:9.5pt;padding:0}
}

/* ---- Dashboard, second pass: the person front and centre, and more life in the cards ---- */
.dhero{display:flex;gap:20px;align-items:center;padding:20px 24px}
.dface{width:74px;height:74px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
       background:#dbe7f6;border:3px solid #fff;box-shadow:0 3px 12px rgba(18,50,92,.18)}
.dface img{width:100%;height:100%;object-fit:cover}
.dface .initials{font-weight:700;color:#2f5b95;font-size:24px}
.dwho{flex:1;min-width:0}
.dwho h1{margin:1px 0 4px;font-size:27px;color:#12325c}
.dprof{display:inline-block;margin-top:6px;font-size:12px;color:#2f6f9e;text-decoration:none}
.dprof:hover{text-decoration:underline}

/* the six quick tiles: a little depth, and they lift under the pointer */
.actions .acard{border-radius:16px;min-height:104px;padding:14px;box-shadow:0 2px 8px rgba(20,30,50,.10);
                transition:transform .12s ease, box-shadow .12s ease}
.actions .acard:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,30,50,.18)}
.actions .acard span{font-weight:600}

/* stat cards: a tinted face behind the icon, and a clearer number */
.dstat{box-shadow:0 1px 4px rgba(20,30,50,.06);transition:box-shadow .12s ease}
.dstat:hover{box-shadow:0 6px 16px rgba(20,30,50,.12)}
.dstat b{font-size:28px;font-weight:700;letter-spacing:-.5px}
.dsicon{box-shadow:0 3px 8px rgba(20,30,50,.18)}

/* group cards: a coloured hairline at the top edge, so each section reads as its own thing */
.dgroup{position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(20,30,50,.06);
        transition:box-shadow .12s ease}
.dgroup:hover{box-shadow:0 8px 20px rgba(20,30,50,.12)}
.dgroup:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:currentColor;opacity:.9}
.dgroup:nth-child(1){color:#7c5cc4}.dgroup:nth-child(2){color:#2f9e7e}.dgroup:nth-child(3){color:#3b82c4}
.dgroup:nth-child(4){color:#e08b3a}.dgroup:nth-child(5){color:#c0506b}.dgroup:nth-child(6){color:#48a05a}
.dghead h2,.dghead p,.dlink{color:#1d2a3a}
.dghead p{color:#8a95a2}
.dgicon{box-shadow:0 3px 8px rgba(20,30,50,.18)}
.dlink{transition:background .12s ease, transform .12s ease}
.dlink:hover{transform:translateX(2px)}
@media(max-width:760px){.dhero{flex-wrap:wrap}.dface{width:58px;height:58px}}

/* ---- The students list, laid out like the school's own class-list spreadsheet ---- */
.slistwrap{overflow-x:auto;border:1px solid #c9ccd2;border-radius:8px;background:#fff}
.slist{border-collapse:collapse;width:100%;min-width:1500px;font-size:12px}
.slist th,.slist td{border:1px solid #c9ccd2;padding:4px 7px;vertical-align:middle;white-space:nowrap}
.slist th{background:#fff9c4;font-weight:700;font-size:11.5px;color:#1d2a3a;position:sticky;top:0;z-index:2}
.slist tr:nth-child(even) td{background:#fbfbf9}
.slist td.sno{width:38px;text-align:center;color:#8a8a8a}
.slist td.sidx{width:62px;text-align:center;font-variant-numeric:tabular-nums;color:#2a6df4;font-weight:600}
.slist td.snm{font-weight:600;min-width:210px}
.slist td.snm a{color:#12325c;text-decoration:none}
.slist td.snm a:hover{text-decoration:underline}
.slist td.mono{font-variant-numeric:tabular-nums;color:#3a4653}
.slist td.dv{min-width:180px;text-align:right}
@media(max-width:900px){.slist{min-width:1200px;font-size:11px}}

/* ================= School Details ================= */
.sdhero{display:flex;gap:20px;align-items:center;background:linear-gradient(115deg,#0b2f6b,#17529c 60%,#1f7a6a);
        color:#fff;border-radius:18px;padding:24px 26px;margin-bottom:16px}
.sdlogo{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:16px;padding:7px;flex:none}
.sdhero h1{margin:0;font-size:27px}
.sdmotto{margin:6px 0 2px;font-size:15px;font-style:italic;color:#d8e6ff}
.sdstrap{margin:0;font-size:12.5px;color:#a9c3e8;text-transform:uppercase;letter-spacing:.8px}

.sdnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.sdnums div{background:#fff;border:1px solid #e7e5e0;border-radius:14px;padding:14px 16px;text-align:center}
.sdnums b{display:block;font-size:24px;color:#12325c}
.sdnums span{font-size:11.5px;color:#8a95a2}

.sdcols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.sdlist{display:grid;gap:11px}
.sdrow{display:flex;gap:11px;align-items:flex-start}
.sdic{width:32px;height:32px;border-radius:10px;background:#eef3fa;color:#2f6f9e;display:grid;
      place-items:center;flex:none}
.sdrow span{display:block;font-size:11px;color:#8a95a2}
.sdrow b{font-size:13.5px;color:#1d2a3a;font-weight:600}
.sdvision{margin:0;font-size:13.5px;line-height:1.7;color:#3a4653}

.sdstory{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sdstory li{display:flex;gap:14px;align-items:flex-start}
.sdyear{flex:none;min-width:58px;font-weight:700;color:#2f6f9e;font-size:13px;padding-top:1px}
.sdstory p{margin:0;font-size:13.5px;color:#3a4653;line-height:1.6}
.sdstory b{color:#12325c}

.sdfacs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}
.sdfac{display:flex;gap:10px;align-items:center;background:#f6f8fa;border:1px solid #eef1f4;
       border-radius:11px;padding:11px 13px;font-size:13px;color:#28323d}
.sdfac svg{color:#2f9e7e;flex:none}
@media(max-width:760px){.sdcols{grid-template-columns:1fr}.sdhero{flex-direction:column;text-align:center}}

/* the students table fills the page rather than leaving a blank strip beside it */
.slistwrap{width:100%}
.slist{min-width:100%;width:max-content}
.slist td.snm{min-width:200px;white-space:normal}
.slist td:nth-child(4){min-width:190px;white-space:normal}   /* address */
.slist td:nth-child(8){min-width:170px;white-space:normal}   /* parent */

/* ---- The teacher board, coloured the way aSc/EduPage colours it ----
   yellow  = the lesson's own period        red   = the absent teacher's lesson
   green   = already teaches this class     pink  = busy that period                */
.sbb td.lp,.sbb th.lp{background:#fff6c4}
.sbb td.busy,.sbb td.lesson{background:#f3c9c9}
.sbb td.cover{background:#e6b9b9}
.sbb td.teaches,.sbb td.own{background:#79c28a}
.sbb tr.sbt.here td.lp{background:#c8e6a0}
.sbb td.gone{background:#d23b3b}
.sbb th.sbn{background:#eef1f4;font-size:11.5px;text-align:left;padding-left:6px}
.sbb tr.sbt:hover th.sbn{background:#dfe6ee}
.sbb td{min-width:26px;height:19px;border:1px solid #cfd3da}

/* ---- The teachers' substitution sheet: as little white space as the page allows ---- */
@media print{
  @page{size:A4 portrait;margin:8mm}
  .rep .repbox{padding:3px 9px;margin:4px 0;break-inside:avoid}
  .rep .repbox h3{font-size:11.5pt;padding:1px 7px;margin:0 0 1px}
  .rep li{font-size:9pt;padding:0;line-height:1.3}
  .rep .tthead h2{font-size:15pt;margin:0}
  .rep .tthead .sub{font-size:10pt}
}

/* the period range beside an absent teacher's name, when they are away for only part of the day */
.sbpart{float:right;font-size:11px;color:#6b7a8d;font-weight:600;background:#eef1f4;
        border-radius:6px;padding:1px 6px;margin-left:8px}

/* every punch a person made today, with its kind, inside the Present/Absent list */
.zpunches{min-width:260px}
.zp{display:inline-flex;align-items:center;gap:5px;margin:2px 4px 2px 0;padding:2px 7px;border-radius:999px;
    font-size:10.5px;background:#eef1f4;color:#44505e;white-space:nowrap}
.zp b{font-variant-numeric:tabular-nums;font-size:11px;color:#1d2a3a}
.zp.in{background:#e3f3e7;color:#1f6b38}
.zp.out{background:#fdeaea;color:#a33a3a}
.zp.otin{background:#fdf1dc;color:#8a5a12}
.zp.otout{background:#f3e9fb;color:#6a3d9c}

/* ---- The board, in aSc's own colours. These override the muted ones above: same selectors,
   later in the file, so they win. Cell classes are lp / busy / cov / here. ---- */
.sbb th.lp{background:#ffff00}
.sbb td.lp{background:#ffff00}
.sbb td{background:#fff}
.sbb td.busy{background:#ffcccc}
.sbb td.cov{background:#ef9a9a}
.sbb td.here{background:#ff0000}
.sbb td.busy.lp{background:#ffcc99}
.sbb td.cov.lp{background:#ef9a9a}
.sbb td.here.lp{background:#ff0000}
.sbb th,.sbb td{border:1px solid #9aa0a6}

/* the face beside a name in the Present / Absent list */
.zwho{display:flex;align-items:center;gap:9px;min-width:210px}
.zface{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:#e7e5e0}
.zface.ph{display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#77808c}

/* print: let the boxes flow to the foot of the page before starting a new one */
@media print{
  html,body{height:auto!important;min-height:0!important}
  main,main.wide,.rep{height:auto!important;min-height:0!important}
  .rep .repbox{margin:3px 0;padding:3px 9px}
  .rep .repbox:first-child{margin-top:0}
}

/* The Sync panel's Today figures arrive a moment after the page, so the space they fill says so. */
.zwait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 16px;color:#6b7280;font-size:14px}
.zwait p{margin:0}
.zspin{width:26px;height:26px;border:3px solid #e5e7eb;border-top-color:#6d5bd0;border-radius:50%;
  animation:zspin .8s linear infinite}
@keyframes zspin{to{transform:rotate(360deg)}}

/* "Add punch by hand" - from the monitor's heading and from each name on a drill list. */
.zmonitor h2{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.zaddpunch{font-size:11px;padding:3px 9px;white-space:nowrap}
.zdtable td .zaddpunch{margin-left:8px}

/* ---- printing a judgement sheet: it goes out to be signed, so it must land on one page ---- */
.pbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;
  border:1px solid #d9dce2;border-radius:6px;background:#f7f8fa;font-size:13px;
  position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(16,26,48,.06)}
.pbar select{font-size:13px;padding:4px 8px}
.pbar label{display:flex;align-items:center;gap:6px;font-size:12px;color:#555}
.pbar .hint{margin:0}
@media print{
  html,body,main{height:auto!important;min-height:0!important;margin:0!important;padding:0!important;
    background:#fff!important}
  .psheet{break-inside:avoid;page-break-inside:avoid;box-shadow:none;border:0;margin:0;padding:0}
  .psheet table{break-inside:avoid;page-break-inside:avoid}
  .psheet tr{break-inside:avoid;page-break-inside:avoid}
  .signs{break-inside:avoid;page-break-inside:avoid}
}

/* The page-loading bar. Deliberately the only thing that moves: the page you are leaving stays put until
   the next one is ready, so a slow page never looks like a broken one. */
.navprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:10000;background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.7);transition:width .4s ease-out,opacity .3s .15s;pointer-events:none}
.navprog.done{opacity:0;width:100%}
@media print{.navprog{display:none}}

/* ---- our own date-and-time picker. Chrome draws its own dropdown outside the page, where its column order
   cannot be changed, so this replaces it: the same single field, with PM above AM. ---- */
.dtwrap{position:relative;display:block}
.dtfield{width:100%;cursor:pointer;font-variant-numeric:tabular-nums}
.dticon{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:4px;
  color:#5b6470;cursor:pointer;line-height:0;border-radius:4px}
.dticon:hover{background:#eef2f8;color:#12275c}
.dtpanel{position:absolute;z-index:60;top:calc(100% + 4px);left:0;display:flex;gap:0;background:#fff;
  border:1px solid #d7dbe2;border-radius:8px;box-shadow:0 10px 28px rgba(16,26,48,.18);overflow:hidden}
.dtcal{padding:10px 12px;min-width:232px}
.dthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.dthead b{font-size:13px;color:#12275c}
.dtnav button{background:none;border:0;font-size:15px;cursor:pointer;padding:2px 6px;
  border-radius:4px;color:#5b6470}
.dtnav button:hover{background:#eef2f8}
.dtgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.dtdow{font-size:10px;color:#8a919b;text-align:center;padding:3px 0}
.dtday{background:none;border:0;padding:5px 0;font-size:12px;border-radius:4px;cursor:pointer;color:#26303f}
.dtday:hover{background:#eef2f8}
.dtday.off{color:#c2c7cf}
.dtday.today{color:#1a73e8;font-weight:700}
.dtday.on{outline:2px solid #12275c;outline-offset:-2px;font-weight:700}
.dtfoot{display:flex;justify-content:space-between;margin-top:8px}
.dtfoot button{background:none;border:0;color:#1a73e8;font-size:12px;cursor:pointer;padding:2px 4px}
.dtfoot button:hover{text-decoration:underline}
.dtcols{display:flex;border-left:1px solid #e6e9ee}
.dtcol{width:52px;max-height:214px;overflow-y:auto;scrollbar-width:thin;border-right:1px solid #f0f2f6}
.dtcol:last-child{border-right:0}
.dtopt{display:block;width:100%;background:none;border:0;padding:5px 0;font-size:12px;cursor:pointer;
  color:#26303f;font-variant-numeric:tabular-nums}
.dtopt:hover{background:#eef2f8}
.dtopt.on{background:#1a73e8;color:#fff;font-weight:700}
@media(max-width:640px){.dtpanel{flex-direction:column}.dtcols{border-left:0;border-top:1px solid #e6e9ee}
  .dtcol{width:auto;flex:1 1 0;max-height:150px}}

/* The cover list's own "Who substitutes" picker: a plain cell until you use it, so the table still reads
   as a list rather than as a form. */
td.sbwhotd{padding:1px 4px}
.sbwho{margin:0}
.sbwho select{width:100%;min-width:150px;max-width:230px;border:1px solid transparent;background:transparent;
  font:inherit;font-size:12px;color:#12275c;padding:2px 4px;border-radius:4px;cursor:pointer;
  -webkit-appearance:none;appearance:none}
tr.sbrow:hover .sbwho select,.sbwho select:focus{border-color:#c9d2e2;background:#fff}
.sbwho select:focus{outline:2px solid #2a6df4;outline-offset:-2px}
@media print{.sbwho select{-webkit-appearance:none;appearance:none;border:0;background:none;color:#000}}

/* ---- a member of staff's own missed punches, and the request to have one put in ---- */
.zmiss{color:#c0392b}
.mqd{position:relative;display:inline-block}
.mqd summary{list-style:none;cursor:pointer}
.mqd summary::-webkit-details-marker{display:none}
/* The request box opens in the row itself rather than floating over it: floating meant the panel's own
   scroll box cut it in half, and the time picker inside it with the box. */
.mqf{margin:8px 0 4px;width:min(260px,100%);display:flex;flex-direction:column;gap:8px;padding:12px;
  background:#fff;border:1px solid #d7dbe2;border-radius:8px;box-shadow:0 6px 18px rgba(16,26,48,.12)}
.mqtable td{vertical-align:top}
.mqtable{width:100%}
.mqf label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#555}
.mqf input,.mqf select{font-size:13px;padding:5px 7px}
.mqf .btn{align-self:flex-start}
.dttimeonly .dtfield{width:100%}
.dttimeonly .dtpanel{left:0;right:auto}
.dttimeonly .dtcol{max-height:200px}
.dttimeonly .dtcols{border-left:0}

/* ---- missing punches, folded away on the Substitution page so it never crowds the day's work ---- */
.sbmiss{margin-top:12px;border:1px solid #e6d7d7;border-radius:6px;background:#fdf7f7}
.sbmiss>summary{cursor:pointer;padding:8px 10px;font-size:13px;display:flex;align-items:center;gap:8px;
  list-style:none}
.sbmiss>summary::-webkit-details-marker{display:none}
.sbmiss>summary::before{content:"\25B8";color:#a05252;transition:transform .15s}
.sbmiss[open]>summary::before{transform:rotate(90deg)}
.sbmissn{margin-left:auto;background:#c0392b;color:#fff;border-radius:10px;padding:1px 8px;font-size:11px;
  font-weight:700}
.sbmiss .hint{margin:0 10px 8px}
.sbmiss .ttwrap{max-height:280px;overflow:auto;margin:0 6px 8px}

/* ---- a second horizontal scrollbar above a wide table, so sideways scrolling is reachable from the top ---- */
.xscroll{overflow-x:auto;overflow-y:hidden;height:14px;margin-bottom:-1px;border:1px solid #c9ccd2;
  border-bottom:0;border-radius:8px 8px 0 0;background:#fafbfc}
.xscroll>div{height:1px}
@media print{.xscroll{display:none}}

/* ---- editing a pupil's details in the cell itself ---- */
td.cell{cursor:text}
td.cell:hover{background:#eef4ff;box-shadow:inset 0 0 0 1px #c3d4f2}
td.cell.saving{opacity:.6}
td.cell.saved{background:#e4f4e7;box-shadow:inset 0 0 0 1px #8fd3a3;transition:background .3s}
td.cell.failed{background:#fdeaea;box-shadow:inset 0 0 0 1px #e8a2a2}
.cellin{width:100%;min-width:60px;box-sizing:border-box;font:inherit;padding:2px 4px;border:1px solid #2a6df4;
  border-radius:3px;outline:none;background:#fff}
.slist td.snm{font-weight:600}

/* The list scrolls in its own box, so the yellow headings stay put and the sideways bar at the top stays
   reachable however far down the roll you are. */
.slistwrap{max-height:calc(100vh - 210px);overflow:auto;border-radius:0 0 8px 8px}
.slist th{box-shadow:inset 0 -1px 0 #c9ccd2}
@media print{.slistwrap{max-height:none;overflow:visible}}

/* ---- each class as the school crest: click one to open its list ----
   The crest's own colours are written on its shapes, not here, so it can never come out black if this
   stylesheet is stale or slow. */
.cbadges{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 16px}
.cbadge{display:block;position:relative;text-decoration:none;border-radius:14px;line-height:0;
  transition:transform .12s,box-shadow .12s;outline-offset:3px}
.cbadge:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(16,26,48,.22)}
.cbadge.on{box-shadow:0 0 0 3px #12275c,0 8px 18px rgba(16,26,48,.22)}
.cbsvg{display:block;border-radius:14px}
.cbn{position:absolute;top:6px;right:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:#12275c;color:#fff;font:700 12px/22px system-ui,Segoe UI,sans-serif;text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
@media(max-width:640px){.cbadges{gap:8px}.cbadge svg,.cbpic{width:96px;height:99px}}

/* a class's own picture in place of the drawn crest, and the handles to put one there */
.cbwrap{position:relative;display:inline-block;line-height:0}
.cbpic{display:block;width:118px;height:122px;object-fit:cover;border-radius:14px;background:#2e9e4f}
.cbedit{position:absolute;left:6px;bottom:8px;display:flex;align-items:center;gap:2px;font-size:12px;
  background:rgba(255,255,255,.92);border-radius:9px;padding:1px 5px;cursor:pointer;opacity:0;
  transition:opacity .12s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cbwrap:hover .cbedit,.cbedit.busy{opacity:1}
.cbedit.busy{opacity:.6;pointer-events:none}
.cbdel{background:none;border:0;cursor:pointer;color:#c0392b;font-size:11px;padding:0 1px;line-height:1}

/* the count beside a Students tab */
.znav.sub .zc{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;
  background:rgba(18,39,92,.10);font-size:11px;font-weight:700;line-height:17px;text-align:center}
.znav.sub .ztab.on .zc{background:rgba(255,255,255,.28);color:#fff}
.slist td.scls{min-width:86px;white-space:nowrap;font-weight:600;color:#12275c}
.slist td.sgen{width:74px;white-space:nowrap}

/* a field the Add pupil form filled in for you */
.lkfilled{background:#e4f4e7;transition:background .4s}
.lkmsg{margin:6px 0 10px;color:#2f8f46;font-weight:600}
.lkmsg.bad{color:#c0392b}
.lkmsg.bad a{margin-left:4px}

/* adding an existing pupil to the SEN list - a mark, not a move */
.senbox{margin:10px 0 14px;padding:12px 14px;border:1px solid #d9dce2;border-radius:8px;background:#f7f8fa}
.senbox b{font-size:14px}
.senbox .hint{margin:4px 0 8px}
.senbox select{min-width:min(420px,100%)}
.senbox #senpick{min-width:min(460px,100%)}
.senbox #sennote{color:#a3701a}

/* ---- Students Profile: a card a pupil ---- */
.spgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin:6px 0 4px}
.spcard{background:#fff;border:1px solid #e3e5ea;border-radius:10px;overflow:hidden;
  box-shadow:0 1px 3px rgba(16,26,48,.06)}
.spcard header{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#12275c;color:#fff}
.spav{flex:none;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:.5px}
.spcard h3{margin:0;font-size:15px;line-height:1.2;color:#fff}  /* the global h3 colour is navy, which on a navy header is invisible */
.spcard header p{margin:2px 0 0;font-size:11.5px;opacity:.85}
.spsen{background:#f9c229;color:#3a2c00;border-radius:8px;padding:0 6px;font-weight:700;opacity:1}
.spbody{padding:8px 14px 12px}
.spl{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12.5px;
  border-bottom:1px dotted #eceef2}
.spl>span{color:#6b7280;flex:none}
.spl>b{text-align:right;font-weight:600;min-width:40px;min-height:17px}
.spl>b.cell{cursor:text;border-radius:3px}
.spl>b.cell:hover{background:#eef4ff;box-shadow:inset 0 0 0 1px #c3d4f2}
.sphr{margin:9px 0 3px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8a919b}
.spl .dv{font-family:"EG Thaana",'Faruma','MV Boli',sans-serif}
@media print{.spgrid{grid-template-columns:repeat(2,1fr)}.spcard{break-inside:avoid}}

/* ---- Students Profile: a small card a pupil, opening onto their own page ---- */
.spgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin:6px 0 4px}
.spmini{background:#fff;border:1px solid #e9ebf0;border-radius:14px;padding:16px 12px 12px;text-align:center;
  box-shadow:0 1px 3px rgba(16,26,48,.05);transition:transform .12s,box-shadow .12s}
.spmini:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,26,48,.12)}
.spopen{display:block;text-decoration:none;color:inherit}
.spface{display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin:0 auto 10px;
  border-radius:50%;background:#eef0f5;color:#5b6470;font-weight:700;font-size:22px;letter-spacing:.5px;
  object-fit:cover;overflow:hidden}
img.spface{display:block}
.spmini b{display:block;font-size:13.5px;color:#12275c;line-height:1.25}
.spidx{display:block;font-size:12px;color:#8a919b;margin-top:2px}
.spmini .spsen{display:inline-block;margin-top:5px;font-size:10px;padding:1px 7px;border-radius:8px;
  background:#f9c229;color:#3a2c00;font-weight:700}
.spacts{display:flex;justify-content:center;gap:8px;margin-top:11px}
.spact{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;
  border-radius:9px;cursor:pointer;font-size:14px;text-decoration:none;line-height:1}
.spact.look{background:#eef1fe;color:#4a5ad4}
.spact.edit{background:#e6f6ee;color:#1f8a52}
.spact.bin{background:#fdecec;color:#d24b4b}
.spact:hover{filter:brightness(.95)}
.spdel{display:inline}

/* one pupil's own page */
.spone{max-width:760px}
.spone .spcard{margin-top:10px}
.spbig{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.18);font-weight:700;font-size:20px;flex:none;object-fit:cover;overflow:hidden}
img.spbig{display:block}
.spdocs{margin-top:14px;background:#fff;border:1px solid #e3e5ea;border-radius:10px;padding:14px 16px}
.spdocs h3{margin:0 0 2px;font-size:15px}
.spfiles{list-style:none;margin:8px 0;padding:0}
.spfiles li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f0f2f6}
.spfiles li a{font-weight:600;text-decoration:none}
.spfiles li .hint{margin:0 auto 0 0}
.spup{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zfresh{color:#6b7280}

/* ---- "Today's substitutions" print: a proper page margin and a size teachers can read on the notice
   board. Comes last so it wins over the earlier rules that kept shrinking this sheet to fit. ---- */
@media print{
  .rep .tthead h2{font-size:18pt !important;margin:0 0 2px !important}
  .rep .tthead .sub{font-size:12pt !important}
  .rep .repbox{padding:6px 12px !important;margin:7px 0 !important}
  .rep .repbox h3{font-size:14pt !important;padding:2px 9px !important;margin:0 0 3px !important}
  .rep li{font-size:11.5pt !important;line-height:1.45 !important;padding:1px 0 !important}
  .rep .repno{font-size:11.5pt !important}
}

/* the JPG download draws the sheet on screen, so it gets the print sizes spelt out here as well - the
   picture and the paper should be the same page */
.jpgsheet .tthead h2{font-size:24px !important;margin:0 0 2px !important}
.jpgsheet .tthead .sub{font-size:16px !important}
.jpgsheet .repbox{padding:8px 16px !important;margin:9px 0 !important;border:1px solid #000 !important}
.jpgsheet .repbox h3{font-size:19px !important;padding:3px 12px !important;margin:0 0 4px !important}
.jpgsheet li{font-size:15px !important;line-height:1.45 !important;padding:1px 0 !important}
.jpgsheet .repno{font-size:15px !important}
.jpgsheet,.jpgsheet *{color:#000}

/* ---- Calendar: the school's month, every event, meeting and lesson plan on its day ---- */
.calbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.calbar h2{margin:0;min-width:170px;text-align:center}
.calkey{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#555}
.calkey span{display:flex;align-items:center;gap:5px}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid #dfe2e8;
  border-left:1px solid #dfe2e8}
.calhead{padding:6px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#5b6470;background:#f5f6f9;border-right:1px solid #dfe2e8;border-bottom:1px solid #dfe2e8}
.calday{min-height:104px;padding:5px 6px 6px;border-right:1px solid #dfe2e8;border-bottom:1px solid #dfe2e8;
  background:#fff;display:flex;flex-direction:column;gap:3px;min-width:0}
.calblank{background:#fafbfc}
.calweekend{background:#fbfaf7}
.calnum{font-size:12px;font-weight:700;color:#6b7280;align-self:flex-start;min-width:22px;height:22px;
  line-height:22px;text-align:center;border-radius:11px}
.caltoday .calnum{background:#12275c;color:#fff}
.calchip{display:block;font-size:11.5px;line-height:1.3;padding:2px 6px;border-radius:4px;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid}
.calchip b{font-weight:700}
.calchip:hover{filter:brightness(.95)}
.cal-ev{background:#e8f0fe;color:#1a4fb4;border-color:#2a6df4}
.cal-co{background:#fdeee6;color:#9a4413;border-color:#e07b39}
.cal-lp{background:#e6f5ec;color:#1f6f43;border-color:#34a868}
.caldot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.caldot.cal-ev{background:#2a6df4}.caldot.cal-co{background:#e07b39}.caldot.cal-lp{background:#34a868}
.caladd{margin-top:10px;font-size:13px;color:#555}
.calagenda{list-style:none;margin:0;padding:0}
.calagenda li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f0f2f6;font-size:13px}
.calagenda li a{font-weight:600;text-decoration:none}
.calagenda .hint{margin:0 0 0 auto}
.calwhen{width:56px;flex:none;color:#6b7280;font-variant-numeric:tabular-nums}
@media(max-width:720px){.calday{min-height:58px;padding:3px}.calchip{font-size:0;padding:0;height:6px;border:0}
  .calhead{padding:4px 2px;font-size:9.5px;text-align:center}.calkey{margin-left:0}}

/* ==================== Academic Calendar ==================== */
.t-aca{--c:#2f9e62;--bg:#e3f5ea}
.t-hol{--c:#e0487a;--bg:#fde4ec}
.t-act{--c:#2a6df4;--bg:#e5eefe}
.t-exm{--c:#8b5cf6;--bg:#eee6fe}
.t-stf{--c:#e9a21c;--bg:#fdf1d6}
.t-brk{--c:#56a8e8;--bg:#e2f1fc}
.caldot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--c,#999);flex:none}

.calhdr{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:4px 0 14px}
.calhdr h1{margin:0;font-size:34px;letter-spacing:-.02em;color:#101828}
.calhdr p{margin:4px 0 0;color:#5b6470;font-size:15px}
.calterms{font-size:12.5px !important;color:#6b7280 !important}
.caltent{display:inline-block;background:#fdf1d6;color:#8a5a00;border:1px solid #f1d38a;border-radius:6px;
  padding:1px 8px;font-size:11.5px;font-weight:700;margin-left:6px}
.caltools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.caltools form{margin:0}
.caltools select{padding:8px 10px;border-radius:8px;border:1px solid #d7dbe2;font-weight:600;background:#fff}
.caltools .btn{padding:8px 14px}

.calcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.calcard{display:flex;align-items:center;gap:16px;text-align:left;background:#fff;border:1px solid #e6e8ee;
  border-radius:12px;padding:18px 20px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.calcard:hover{box-shadow:0 6px 18px rgba(16,26,48,.08)}
.calcic{flex:none;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.calcic.ic-grn{background:#e3f5ea;color:#1f8a52}.calcic.ic-blu{background:#e5eefe;color:#2a6df4}
.calcard div>span{display:block;font-size:13px;color:#6b7280}
.calcard b{display:block;font-size:20px;color:#101828;margin:2px 0;line-height:1.2}
.calcard b.calbig{font-size:22px}
.calcard small{display:block;font-size:14px;color:#6b7280}

.calmain{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.calboard{background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:14px;min-width:0}
.calbar2{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.calvs{display:inline-flex;border:1px solid #d7dbe2;border-radius:9px;overflow:hidden}
.calv{border:0;background:#fff;padding:8px 18px;font:inherit;font-weight:600;cursor:pointer;color:#344054}
.calv+.calv{border-left:1px solid #e6e8ee}
.calv.on{background:#0f5a4c;color:#fff}
#calq{flex:1 1 200px;min-width:0;padding:8px 12px;border:1px solid #d7dbe2;border-radius:9px}
#calaud{padding:8px 10px;border:1px solid #d7dbe2;border-radius:9px;background:#fff}
.calfs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.calf{display:flex;align-items:center;gap:7px;border:1px solid #e1e4ea;background:#fff;border-radius:8px;
  padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer;color:#344054}
.calf:not(.on){opacity:.4;text-decoration:line-through}

/* the year planner */
.calplan{max-height:calc(100vh - 330px);min-height:420px;overflow:auto;border:1px solid #dfe3ea;border-radius:8px}
.caltab{width:100%;border-collapse:collapse;table-layout:fixed}
.caltab thead th{position:sticky;top:0;z-index:2;background:#12275c;color:#fff;font-size:13px;font-weight:700;
  text-align:left;padding:10px 12px}
.caltab thead th:nth-child(1){width:110px}
.caltab thead th:nth-child(2){width:212px;letter-spacing:.35em;text-align:center}
.caltab td,.caltab th.calmon{border-top:1px solid #e6e8ee;vertical-align:top;padding:10px 12px}
.caltab td+td,.caltab th.calmon+td{border-left:1px solid #eef0f4}
.calmon b{display:block;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#12275c}
.calmon span{font-size:13px;color:#6b7280;font-weight:400}
.calrow.calnow th.calmon{box-shadow:inset 4px 0 0 #0f5a4c}
.cmini{display:grid;grid-template-columns:repeat(7,26px);gap:2px;justify-content:center}
.cmh{font-size:10px;font-weight:700;color:#8a919b;text-align:center;height:14px}
.cmd{height:22px;line-height:22px;text-align:center;font-size:11.5px;border-radius:4px;color:#26303f;
  font-variant-numeric:tabular-nums}
.cmd.cmwe{color:#9aa1ab}
.cmd[class*=c-t-]{background:var(--bg);color:#101828;font-weight:600}
.c-t-aca{--bg:#c8ecd6}.c-t-hol{--bg:#f9c9d8}.c-t-act{--bg:#cfe0fd}.c-t-exm{--bg:#ddd0fc}
.c-t-stf{--bg:#fbe3a6}.c-t-brk{--bg:#c6e4f8}
.cmd.cmtoday{outline:2px solid #0f5a4c;outline-offset:-2px;font-weight:800}
.calcol{min-width:0}
.calnone{color:#c2c7cf}
.calitem{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;
  padding:4px 5px;margin:0 0 4px;border-radius:6px;cursor:pointer;font:inherit;color:inherit}
.calitem:hover,.calitem.picked{background:#f3f6fb}
.calitem.picked{box-shadow:inset 0 0 0 1px #c3d4f2}
.calitem .caldot{margin-top:4px}
.calitxt{min-width:0}
.calitxt b{display:block;font-size:13px;color:#101828}
.calitxt>span{display:block;font-size:12.5px;color:#475467;line-height:1.35}
.calstaff{display:inline-block !important;margin-top:4px;background:#fdf1d6;color:#8a5a00;border:1px solid #f1d38a;
  border-radius:6px;padding:0 7px;font-size:11px !important;font-weight:700}
.calitxt .caltent{margin:4px 0 0}

/* month */
.mbar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mbar b{font-size:17px;min-width:160px;text-align:center}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid #e1e4ea;
  border-left:1px solid #e1e4ea}
.mhead{padding:6px 8px;font-size:11px;font-weight:700;text-transform:uppercase;color:#5b6470;background:#f5f6f9;
  border-right:1px solid #e1e4ea;border-bottom:1px solid #e1e4ea}
.mday{min-height:98px;padding:4px 5px;border-right:1px solid #e1e4ea;border-bottom:1px solid #e1e4ea;
  display:flex;flex-direction:column;gap:3px;min-width:0}
.mblank{background:#fafbfc}.mwe{background:#fbfbfc}
.mnum{font-size:12px;font-weight:700;color:#6b7280;width:22px;height:22px;line-height:22px;text-align:center;
  border-radius:11px}
.mtoday .mnum{background:#0f5a4c;color:#fff}
.mchip{display:block;width:100%;text-align:left;font:inherit;font-size:11.5px;line-height:1.3;padding:2px 6px;
  border:0;border-left:3px solid var(--c);background:var(--bg);color:#101828;border-radius:4px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* agenda */
.calagenda2{max-height:calc(100vh - 330px);overflow:auto}
.aghead{margin:14px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#12275c}
.calline{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid #f0f2f6;padding:7px 4px;font:inherit;cursor:pointer;color:inherit}
.calline b{width:132px;flex:none;font-size:13px;color:#101828}
.calline:hover,.calline.picked{background:#f3f6fb}

/* the side */
.calside{display:flex;flex-direction:column;gap:16px}
.calpanel{background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:16px}
.calph{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.calph h3{margin:0;font-size:18px;color:#101828}
.calall{font-size:13px;font-weight:600;color:#0f5a4c;text-decoration:none}
.calups{display:flex;flex-direction:column;gap:8px}
.calup{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid #eceef3;border-radius:10px;
  padding:9px 10px;background:#fff;font:inherit;cursor:pointer;color:inherit}
.calup:hover,.calup.picked{border-color:#c3d4f2;background:#f7f9fd}
.calupd{flex:none;width:52px;height:52px;border-radius:9px;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1}
.calupd small{font-size:10.5px;text-transform:uppercase;font-weight:700;color:#475467}
.calupd b{font-size:20px;color:#101828;margin-top:2px}
.calupt b{display:block;font-size:14px;color:#101828}
.calupt span{display:flex;align-items:center;gap:6px;font-size:12px;color:#5b6470;margin-top:3px;flex-wrap:wrap}
.calupt em{font-style:normal;color:#8a919b}
.calselk{font-size:15px;font-weight:700;color:#101828}
.calsel h3{margin:4px 0 12px;font-size:21px;color:#12275c;line-height:1.25}
.calselr{display:flex;gap:10px;align-items:flex-start;margin:0 0 11px;color:#475467;font-size:14px}
.calselr svg{flex:none;margin-top:2px;color:#6b7280}
.calselr small{display:block;font-size:12px;color:#8a919b}
.calstat{display:inline-block}
.calstat.tent{background:#fdf1d6;color:#8a5a00;border:1px solid #f1d38a;border-radius:6px;padding:1px 9px;
  font-weight:700;font-size:13px}
.calnotes{white-space:pre-wrap}
.calselb{display:flex;gap:8px;margin-top:12px}
.calselb .btn{flex:1}

.callegend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:12.5px;color:#475467}
.callegend span{display:flex;align-items:center;gap:6px}
.calsrc{margin-left:auto;color:#8a919b}

/* the editor */
.caldlg{border:0;border-radius:12px;padding:0;width:min(520px,94vw);box-shadow:0 20px 50px rgba(16,26,48,.3)}
.caldlg::backdrop{background:rgba(16,26,48,.35)}
.caldlg form{padding:20px;display:flex;flex-direction:column;gap:10px}
.caldlg h3{margin:0 0 4px}
.caldlg label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#475467}
.caldlg input,.caldlg select,.caldlg textarea{font:inherit;font-size:14px;padding:7px 9px;border:1px solid #d7dbe2;
  border-radius:7px}
.caldlg2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.caldlgb{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

/* the download: the whole view, not a window onto it */
.caljpgcopy .calplan,.caljpgcopy .calagenda2{max-height:none;overflow:visible;min-height:0}

@media(max-width:1100px){.calmain{grid-template-columns:1fr}.calcards{grid-template-columns:1fr}}
@media(max-width:760px){.caltab thead{display:none}.caltab,.caltab tbody,.caltab tr,.caltab td,.caltab th{display:block;
  width:auto}.caltab td+td{border-left:0}.calhdr h1{font-size:26px}}
/* the month on a phone: a clean grid - the day's number and a coloured dot for each entry - and the month's entries
   listed below it, day by day, each one tappable for its details */
.mlist{display:none}
@media(max-width:760px){
  .mbar{justify-content:space-between}.mbar b{min-width:0;font-size:16px}
  .mhead{padding:6px 0;text-align:center;font-size:10.5px}
  .mday{min-height:46px;padding:3px 2px;align-items:center;gap:2px;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:center}
  .mnum{width:24px;height:24px;line-height:24px;border-radius:12px;flex:none;margin:0 calc(50% - 12px) 2px}
  .mday .mchip{font-size:0;width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--c);flex:none}
  .mlist{display:block;margin-top:12px;border-top:1px solid #e1e4ea}
  .mlrow{display:flex;gap:12px;padding:10px 4px;border-bottom:1px solid #eef0f4;align-items:flex-start}
  .mlrow.mltoday .mldate{background:#0f5a4c;color:#fff}
  .mldate{flex:none;width:46px;border-radius:10px;background:#f1f5f4;text-align:center;padding:5px 0;color:#12275c}
  .mldate b{display:block;font-size:18px;line-height:1.1}.mldate span{font-size:11px;text-transform:uppercase}
  .mlents{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
  .mlents .mchip{font-size:13.5px;padding:6px 10px;white-space:normal;line-height:1.35}
  .mlents .mchip small{display:block;font-size:11.5px;color:#5b6470}
}
@media print{
  @page{size:A4 landscape;margin:10mm}
  .caltools,.calbar2,.calfs,.calside,.calcards,.calsrc{display:none !important}
  .calmain{display:block}.calboard{border:0;padding:0}
  .calplan,.calagenda2{max-height:none;overflow:visible;border:0;min-height:0}
  .caltab thead th{background:#12275c !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cmd[class*=c-t-],.caldot,.calstaff,.caltent{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .calrow{break-inside:avoid}
}

/* the planner needs the width more than the side panel does: until the screen is wide enough for both,
   Upcoming Events and the picked entry sit underneath instead of squeezing the three columns */
.caltab thead th:nth-child(1){width:96px}
.caltab thead th:nth-child(2){width:188px}
.cmini{grid-template-columns:repeat(7,23px)}
@media(max-width:1450px){
  .calmain{grid-template-columns:1fr}
  .calside{display:grid;grid-template-columns:1fr 1fr;align-items:start}
}
@media(max-width:900px){.calside{grid-template-columns:1fr}}

/* ==================== Weekly Coordination ==================== */
.chdr{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:4px 0 12px}
.chdr h1{margin:0;font-size:32px;color:#12275c;letter-spacing:-.01em}
.chdr p{margin:4px 0 0;color:#5b6470;font-size:15px}
.ctools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ctools .btn{padding:9px 16px}
.cinl{display:inline-flex;gap:6px;align-items:center;margin:0}
.cinfo{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;background:#f5f7fa;border:1px solid #e3e7ee;
  border-radius:10px;padding:10px 16px;margin-bottom:14px;font-size:14px;color:#344054}
.cinfo b{color:#101828}
.cinfo select,.cinfo input[type=date]{padding:5px 8px;border:1px solid #d7dbe2;border-radius:7px;font:inherit;
  background:#fff}
.cweek{display:inline-flex;align-items:center;gap:8px}
.cweek a{text-decoration:none;font-size:18px;line-height:1;padding:0 6px;border-radius:5px;color:#12275c}
.cweek a:hover{background:#e3e7ee}
.cwkjump{position:relative;cursor:pointer;border-radius:6px;padding:2px 4px}.cwkjump:hover{background:#e3e7ee}
.cwkjump input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.cobsw{margin:6px 0 0}.cobsw summary{cursor:pointer;font-size:12px;color:#12275c;font-weight:600}.cobsw form{margin-top:6px;align-items:end}
.cweek small{color:#6b7280}
.cstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.cstat{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:14px 16px}
.cstic{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cstic.ic-grn{background:#e3f5ea;color:#1f8a52}.cstic.ic-blu{background:#e5eefe;color:#2a6df4}
.cstic.ic-red{background:#fde4e4;color:#d24b4b}.cstic.ic-amb{background:#fdf1d6;color:#c47f00}
.cstat span{display:block;font-size:13px;color:#5b6470}
.cstat b{display:block;font-size:24px;color:#101828;margin-top:2px}
.ctabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid #e3e7ee;margin-bottom:14px}
.ctab_{padding:9px 14px;text-decoration:none;color:#475467;font-weight:600;font-size:14px;border-bottom:3px solid transparent;
  margin-bottom:-1px}
.ctab_.on{color:#0f5a4c;border-bottom-color:#0f5a4c}
.ctab_:hover{color:#101828}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.cleft,.cright{display:flex;flex-direction:column;gap:14px;min-width:0}
.c2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cpanel{background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:14px 16px;min-width:0}
.cph{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.cph h3{margin:0;display:flex;align-items:center;gap:9px;font-size:17px;color:#12275c}
.cph h3 svg{color:#0f5a4c}
.cph h3 small{font-weight:400;color:#5b6470;font-size:14px}
.clink{font-size:13px;font-weight:600;color:#0f5a4c;text-decoration:none}
.ctwrap{overflow-x:auto}
.ctab{width:100%;border-collapse:collapse;font-size:13.5px}
.ctab th,.ctab td{border:1px solid #e3e7ee;padding:7px 10px;vertical-align:top;text-align:left}
.ctab thead th{background:#f5f7fa;font-size:12.5px;color:#344054;font-weight:700}
.ctab th.clot{background:#fff;font-size:14px;color:#101828;vertical-align:middle;width:150px}
.ctab .clog{width:78px;text-align:center;font-weight:700;vertical-align:middle}
.ctab .clos{width:120px;font-weight:700;vertical-align:middle}
.cloo div{margin:2px 0;line-height:1.45}
.clocode{display:inline-block;background:#dff3ee;color:#0f5a4c;border-radius:6px;padding:0 8px;font-weight:700;
  font-size:12.5px;margin-right:4px}
.cabs input{width:52px;padding:4px 6px;border:1px solid #d7dbe2;border-radius:6px;text-align:center}
.cabs td{text-align:center}.cabst{font-weight:700}
.cpill{display:inline-block;border-radius:7px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap}
.p-present{background:#e4f4e7;color:#2f8f46}.p-absent{background:#fde4e4;color:#c0392b}
.p-none{background:#f1f3f6;color:#5b6470}.p-open{background:#fdf1d6;color:#a36a00}
.p-done{background:#e4f4e7;color:#2f8f46}.p-proposed{background:#fdf1d6;color:#a36a00}
.p-confirmed{background:#e5eefe;color:#1a4fb4}
.caddrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.caddrow input,.caddrow select{padding:7px 9px;border:1px solid #d7dbe2;border-radius:7px;font:inherit;font-size:13px}
.caddrow input[name=issue],.caddrow input[name=solution]{flex:1 1 200px}
.cattr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:8px 0;
  border-bottom:1px solid #f0f2f6}
.cattr b{font-size:14px;color:#101828}
.cattst{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.catt{font-size:12.5px;color:#5b6470}
.cattr .cinl{grid-column:1/-1}
.cattr .cinl+.cinl{grid-column:auto}
.cabsf input{width:130px;padding:5px 7px;border:1px solid #d7dbe2;border-radius:6px;font-size:12.5px}
.cattn{text-align:right;margin:6px 0 0}
.cobsf{display:flex;flex-direction:column;gap:8px}
.cobsf label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#475467}
.cobsf select,.cobsf textarea,.cobsf input{font:inherit;font-size:13.5px;padding:7px 9px;border:1px solid #d7dbe2;
  border-radius:7px}
.cobsf .btn{align-self:flex-end}
.cobsl{list-style:none;margin:10px 0 0;padding:0}
.cobsl li{border-top:1px solid #f0f2f6;padding:8px 0;font-size:13.5px}
.cobsl p{margin:3px 0}
.cright textarea,.cpanel form>textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;padding:8px 10px;
  border:1px solid #d7dbe2;border-radius:7px}
.cpanel form>.btn{margin-top:8px}
.cother{white-space:pre-wrap;margin:0}
.clorow{display:grid;grid-template-columns:170px minmax(0,1fr) 90px minmax(0,2fr) auto;gap:8px;align-items:start;
  padding:8px 0;border-bottom:1px solid #f0f2f6}
.clorow input,.clorow textarea{font:inherit;font-size:13.5px;padding:7px 9px;border:1px solid #d7dbe2;border-radius:7px;
  min-width:0}
.clolbl b{display:block;font-size:14px;color:#101828}.clolbl span{font-size:12.5px;color:#5b6470}
.cloextra{grid-template-columns:170px 100px 140px minmax(0,1fr) 90px minmax(0,1.5fr) auto;background:#fafbfc}
.cwho{margin:0 0 10px}.cwho select{padding:6px 8px;border:1px solid #d7dbe2;border-radius:7px;margin-left:6px}
.cgms{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;margin:8px 0 12px}
.cgm{display:flex;gap:7px;align-items:center;font-size:13.5px}
.cgm small{color:#9aa1ab;margin-left:auto;font-size:11.5px}
.cfoot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:10px 14px;background:#f5f7fa;
  border:1px solid #e3e7ee;border-radius:10px;font-size:13px;color:#5b6470}
.cst{background:#e5eefe;color:#1a4fb4;border-radius:7px;padding:2px 10px;font-weight:700}
@media(max-width:1200px){.cgrid{grid-template-columns:1fr}.cstats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.c2{grid-template-columns:1fr}.clorow,.cloextra{grid-template-columns:1fr}
  .chdr h1{font-size:24px}}
@media print{
  .ctools,.ctabs,.cinfo form,.caddrow,.cobsf,.cattr .cinl,.cweek a,.cwho,.cfoot{display:none !important}
  .cpanel{break-inside:avoid;border-color:#bbb}
  .cgrid{display:block}
}

/* ---- the Year Planner as the school's own sheet: a bordered row a week, every day in its sheet colour ---- */
.stab{width:100%;border-collapse:collapse;table-layout:fixed;font-family:"Times New Roman",Georgia,serif;
  font-size:13px;color:#000}
.stab th,.stab td{border:1px solid #1b1b1b}
.stab thead th{position:sticky;top:0;z-index:2;font-weight:700;padding:7px 6px;text-align:center;
  font-family:system-ui,Segoe UI,sans-serif;font-size:12.5px;letter-spacing:.02em}
.stab thead th:nth-child(1){width:52px}
.stab thead th:nth-child(2){width:96px}
.stab thead th.sdh{width:34px}
.stab th.sy,.stab th.sm{font-weight:700;font-size:12.5px;text-align:left;padding:4px 6px;vertical-align:middle}
.stab td.sd{text-align:center;height:26px;padding:0;font-size:14px;font-variant-numeric:tabular-nums}
.stab td.sdtoday{box-shadow:inset 0 0 0 3px #0f3fd8;border-radius:0}
.stab td.sent{vertical-align:top;padding:3px 7px;line-height:1.35}
.sline{display:block;width:100%;text-align:left;background:none;border:0;padding:1px 0;margin:0;font:inherit;
  color:#000;cursor:pointer}
.sline:hover,.sline.picked{text-decoration:underline;background:rgba(15,63,216,.06)}
.stab tr.swnow th.sm{box-shadow:inset 4px 0 0 #0f3fd8}
.sdkey{display:inline-block;width:18px;height:14px;border:1px solid #333;flex:none}

/* the sheet's tables - the term box beside the title and the summary under the calendar */
.sheettab{border-collapse:collapse;font-family:"Times New Roman",Georgia,serif;font-size:13px;color:#000}
.sheettab td{border:1px solid #1b1b1b;padding:4px 8px;vertical-align:middle}
.sheettab td.sx{border:0;padding:0}
.caltbox{align-self:flex-start;margin-left:auto}
.stermbox td{min-width:70px}
.calsum{margin-top:18px;overflow-x:auto}
.ssummary{width:100%}
.ssummary td{font-size:13px}

@media print{
  .stab td.sd,.stab th,.sheettab td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stab thead th{position:static}
}
/* On a phone the Year Planner is the whole sheet at the screen's width, as the ministry's printed calendar looks:
   every size follows the screen, so nothing runs off the side (pinch to read the small print). */
@media(max-width:760px){
  .calplan{max-height:78vh;min-height:0;overflow:auto;border-radius:4px;-webkit-overflow-scrolling:touch}
  .stab{table-layout:fixed;width:100%;font-size:2.3vw;line-height:1.22}
  .stab thead th{position:sticky;top:0;z-index:2;font-size:2.05vw;padding:1vw .2vw;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
  .stab thead th:nth-child(1){width:6%}
  .stab thead th:nth-child(2){width:14.5%}
  .stab thead th.sdh{width:4.2%}
  .stab th.sy,.stab th.sm{font-size:1.75vw;padding:.4vw .3vw;letter-spacing:0;white-space:nowrap;overflow:hidden}
  .stab td.sd{font-size:2.4vw;height:4.6vw}
  .stab td.sdtoday{box-shadow:inset 0 0 0 2px #0f3fd8}
  .stab td.sent{padding:.4vw .7vw;line-height:1.2;overflow-wrap:anywhere}
  .stab tr.swnow th.sm{box-shadow:inset 2px 0 0 #0f3fd8}
}

/* the summary is the sheet's own table: laid out by its columns, and wide enough to read - it scrolls
   sideways on a narrow screen rather than squeezing */
.ssummary{width:auto;min-width:100%}
.ssummary td{white-space:nowrap}
.ssummary td[colspan]{white-space:normal}
/* the clock's Comm Key: hidden as it is typed, without being a password box browsers would fill in */
.maskkey{-webkit-text-security:disc;text-security:disc;font-family:monospace;letter-spacing:.15em;width:9em}

/* The Employee window's header: fields on the left, the photo on the right, whole. It shares the class names
   .phead / .pgrid with the judging sheet, whose full-width table rules were stretching the fields and pushing
   the photo off the edge of the window - so its layout is spelt out here, scoped to the window. */
.pedit .phead,.pperson .phead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;
  align-items:start;text-align:left;margin-bottom:10px}
.pedit .phead>.pgrid,.pperson .phead>.pgrid{width:auto;min-width:0;table-layout:auto;font-size:inherit}
/* the box takes the photo's own shape, so the whole face and shoulders show rather than a cropped middle */
.pedit .pphoto,.pperson .pphoto{width:120px;height:auto;min-height:144px;align-self:start}
.pedit .pphoto img,.pperson .pphoto img{height:auto;max-height:240px;object-fit:contain}
.pedit .pphoto .ph,.pperson .pphoto .ph{min-height:144px}
.pedit .pgrid,.pperson .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));font-size:inherit;width:auto;min-width:0}
.pedit .pgrid.p3,.pperson .pgrid.p3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.pedit .pgrid.p3,.pperson .pgrid.p3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.pedit .phead,.pperson .phead,.pedit .pgrid,.pperson .pgrid,
  .pedit .pgrid.p3,.pperson .pgrid.p3{grid-template-columns:minmax(0,1fr)}
  .pedit .pphoto,.pperson .pphoto{justify-self:center}}

/* Sync > Device: the clock's Cloud Server connection (photos) */
.cloudsteps{margin:6px 0 8px 18px;padding:0;line-height:1.7;font-size:13px}
.cloudsend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 6px}
.cloudjobs{max-height:360px;overflow:auto;border:1px solid #eeede9;border-radius:6px;margin-top:6px}
.cloudjobs table{margin:0}

/* Present today: how the last punch was made */
.zvia{font-style:normal;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap;
      background:#eef0f3;color:#4a5160;margin-right:6px}
.zvia.fp{background:#e4f4e7;color:#2f8f46}
.zvia.card{background:#e8f0fb;color:#2c5d9f}
.zvia.hand{background:#fdf0dd;color:#a3701a}

/* Change photo: under the photo in the Employee window, beside Sync on the profile */
.pphotocol{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.chphoto{display:inline-flex;flex-direction:column;align-items:center;gap:3px;margin-top:6px}
.chphoto .btn{white-space:nowrap}
.chphoto .hint{font-size:11px;max-width:160px;text-align:center}
.vid .chphoto{align-items:flex-start;margin-left:0}
@media(max-width:700px){.pedit .pphotocol,.pperson .pphotocol{justify-self:center}}
#photoaccess summary{cursor:pointer;list-style:none}
#photoaccess summary::-webkit-details-marker{display:none}
#photoaccess summary h2::after{content:" \25BE";font-size:13px;color:#8a8a8a}

/* ================= The public website (Home, Timetable, Substitution) =================
   Everything is under the ps- prefix and body.psbody, so none of it can reach the signed-in panel. */
body.psbody{margin:0;background:#f2f6f0;color:#24432b;-webkit-text-size-adjust:100%;text-size-adjust:100%;font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --psgreen:#1f6f3f;--psdark:#24432b;--psdeep:#649f32;--pstint:#e9f1e4;--psline:#d5e2d0;--psmuted:#647267;
  --pshead:#e1edd9;--pszebra:#f7faf4}
.psbody a{color:inherit}
.psbody .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pswrap{max-width:1180px;margin:0 auto;padding:0 24px}
.psi{flex:none;vertical-align:middle}

/* header */
.pshead{background:#fff;border-bottom:1px solid var(--psline);position:sticky;top:0;z-index:20}
.pshead .pswrap{display:flex;align-items:center;gap:28px;min-height:76px}
.psbrand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.pslogo{width:48px;height:48px;object-fit:contain;background:#fff;border:1px solid var(--psline);border-radius:12px;padding:3px}
.psbrand span{font-size:22px;font-weight:700;color:var(--psdark);letter-spacing:-.01em}
.psnav{display:flex;gap:4px;margin-left:auto}
.psnav a{display:flex;align-items:center;gap:8px;padding:0 14px;height:76px;text-decoration:none;color:#647267;
  font-weight:500;border-bottom:3px solid transparent;margin-bottom:-1px}
.psnav a:hover{color:var(--psgreen)}
.psnav a.on{color:var(--psgreen);border-bottom-color:var(--psgreen);font-weight:600}
.psbtn{display:inline-flex;align-items:center;gap:6px;background:var(--psgreen);color:#fff!important;text-decoration:none;
  font-weight:600;border:0;border-radius:10px;padding:10px 20px;cursor:pointer;font-size:15px}
.psbtn:hover{background:var(--psdark)}
.psbtn.ghost{background:var(--pstint);color:var(--psdark)!important}
.psbtn.ghost:hover{background:#dcefe2}

/* photo banner */
/* the words on a green strip of their own, and the photo beside them - so the name never sits on top of
   the buildings the photo is there to show */
.pshero{position:relative;overflow:hidden;background:var(--psdeep);color:#fff}
.psslides{position:absolute;top:0;bottom:0;right:0;left:34%}
.psslide{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;
  transition:opacity 1s ease}
.psslide.on{opacity:1}
.psdots{position:absolute;z-index:3;bottom:12px;left:34%;right:0;display:flex;justify-content:center;gap:8px}
.psdots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer;transition:background .2s,transform .2s}
.psdots button.on{background:#fff;transform:scale(1.25)}
.pshero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--psdeep) 34%,rgba(100,159,50,.55) 38%,rgba(100,159,50,0) 44%)}
.pshero .pswrap{position:relative;z-index:2}   /* the words above the photos and their shade */
.pshero h1,.pshero p{text-shadow:0 2px 10px rgba(0,0,0,.45)}
.pshero .pswrap{min-height:260px;display:flex;align-items:center}
.psherotext{padding:34px 0;max-width:560px}
.pskicker{margin:0 0 6px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.92}
.pshero h1{margin:0;font-size:46px;line-height:1.08;font-weight:800;letter-spacing:-.01em}
.pshero p{margin:10px 0 0;font-size:17px;opacity:.95}

/* page body */
.psmain{padding:26px 0 48px}
.pscard{background:#fff;border:1px solid var(--psline);border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(20,60,35,.04)}
.psmuted{color:var(--psmuted);margin:0}
.psbadge{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--pstint);color:var(--psgreen);flex:none}
.psgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.pslink{text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s,transform .15s}
.pslink:hover{box-shadow:0 8px 24px rgba(20,60,35,.10);transform:translateY(-1px)}
.pscard h2{margin:0;font-size:20px;color:var(--psdark)}
.pscard p{margin:0}
.pslink .psbtn{align-self:flex-start;margin-top:4px}
.psbells{display:flex;flex-direction:column;gap:8px}
.psbells table{width:100%;border-collapse:collapse;font-size:14px}
.psbells td{padding:6px 0;border-bottom:1px solid var(--psline)}
.psbells td.mono{text-align:right;color:var(--psmuted);font-variant-numeric:tabular-nums}
.pswelcome{margin-top:20px}
.pswelcome img{max-width:100%;border-radius:10px}

/* timetable */
.pspick{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:18px;min-width:min(320px,100%)}
.psselect{position:relative;display:flex;align-items:center;flex:1}
.psselect select{appearance:none;-webkit-appearance:none;width:100%;border:0;background:#fff;font:inherit;
  font-size:17px;font-weight:500;color:#24432b;padding:8px 30px 8px 2px;cursor:pointer}
.psselect select:focus{outline:2px solid #1f6f3f33;border-radius:6px}
.psselect .psi{position:absolute;right:4px;pointer-events:none;color:var(--psmuted)}
.pssheet{background:#fff}
.psttitle{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.psttitle h2{font-size:34px}
.psttitle .psmuted{font-size:17px;color:#34493b;font-weight:600}
.psttwrap{overflow-x:auto;border:1px solid var(--psline);border-radius:10px;background:#fff}
.pstt{width:100%;border-collapse:collapse;min-width:860px;font-size:17px;table-layout:fixed}
.pstt th,.pstt td{border:1px solid var(--psline);text-align:center;padding:14px 6px;vertical-align:middle;
  text-transform:none;letter-spacing:normal;font-size:17px}
.pstt tr:first-child th{background:var(--pshead);color:var(--psdark);font-weight:600}
.pstt tr:nth-child(odd):not(:first-child) td,.pstt tr:nth-child(odd):not(:first-child) th.psday{background:var(--pszebra)}
.pstt tr:first-child th b{display:block;font-size:22px;font-weight:800;color:#1f6f3f}
.pstt tr:first-child th small{display:block;font-size:15px;color:#2f4636;font-weight:600;line-height:1.35;margin-top:3px}
.pstt th.psday{width:88px;text-align:left;padding-left:16px;color:#1a3421;background:#fff;font-size:19px;font-weight:800}
.pstt tr:first-child th.psday{background:var(--pshead)}
.pstt td.psbreak{background:var(--pszebra)}
.pslesson+.pslesson{margin-top:6px;padding-top:6px;border-top:1px dashed var(--psline)}
.pslesson b{display:block;font-weight:800;font-size:20px;color:#1a3421;letter-spacing:.01em}
.pslesson small{display:block;color:#34493b;font-size:15.5px;font-weight:600;margin-top:3px}
.psttfoot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding:13px 18px;font-size:16px;
  background:var(--pszebra);border:1px solid var(--psline);border-radius:10px;color:#24432b}
.psttfoot span{display:inline-flex;align-items:center;gap:10px}
.psttfoot .psi{color:var(--psgreen)}

/* substitution */
.psdayhead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--psline)}
.psdaynav{display:flex;gap:8px;flex-wrap:wrap}
.pssubs .sblist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pssubs .sbgroup{border:1px solid var(--psline);border-radius:10px;padding:12px 14px;background:var(--pszebra);margin:0}
.pssubs .sbgroup h3{margin:0 0 6px;color:var(--psdark);font-size:16px}
.pssubs .sbgroup ul{margin:0;padding-left:18px}
.pssubs .sbgroup li{margin:3px 0}

/* footer */
.psfoot{background:var(--psdeep);color:#e3efe6;padding:34px 0 18px}
.psfcols{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:30px}
.psfbrand{display:flex;gap:14px;align-items:center}
.psfbrand .pslogo{width:56px;height:56px;border-color:transparent}
.psfbrand b{display:block;font-size:18px;color:#fff}
.psfbrand span{font-size:14px;opacity:.85}
.psfoot h4{margin:0 0 10px;color:#fff;font-size:15px}
.psfoot ul{list-style:none;margin:0;padding:0}
.psfoot li{margin:6px 0;display:flex;align-items:center;gap:10px;font-size:14px}
.psfoot a{text-decoration:none;opacity:.92}
.psfoot a:hover{opacity:1;text-decoration:underline}
.psfbottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);font-size:13px;opacity:.8}

/* the phone's tab bar */
.psbar{display:none}

@media(max-width:900px){
  .psnav a span{display:none}
  .psnav a{padding:0 12px}
  .psgrid3{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .pswrap{padding:0 16px}
  .psmain .pswrap:has(.pssheet){padding:0 12px}
  .pshead{background:var(--psdeep);border-bottom:0}   /* the footer's green */
  .pshead .pswrap{min-height:64px;gap:12px}
  .psbrand span{color:#fff;font-size:19px}
  .pslogo{width:42px;height:42px}
  .psnav{display:none}
  .pssign{margin-left:auto;background:#fff;color:var(--psdark)!important;padding:8px 14px;font-size:14px}
  .pshero{margin:14px 16px 0;border-radius:14px}
  .psslides{left:0}
  .psdots{left:0;bottom:9px}
  .pshero::after{background:linear-gradient(90deg,rgba(16,44,26,.62) 0%,rgba(16,44,26,.34) 42%,rgba(16,44,26,0) 72%)}
  .pshero .pswrap{min-height:150px;padding:0 18px}
  .psherotext{padding:22px 0}
  .pshero h1{font-size:32px}
  .pshero p{font-size:15px}
  .pskicker{font-size:11px}
  .psmain{padding:16px 0 96px}
  .psgrid3{grid-template-columns:1fr;gap:14px}
  .pscard{padding:16px;border-radius:12px}
  .pspick{display:flex;width:100%;box-sizing:border-box}
  .psttitle h2{font-size:22px}
  .psttitle .psmuted{font-size:13.5px}
  .pstt{min-width:0;table-layout:fixed;font-size:11px}
  .pstt th,.pstt td{padding:6px 1px}
  .pstt tr:first-child th b{font-size:13px}
  .pstt tr:first-child th.psbreak b{font-size:9px;overflow-wrap:anywhere;hyphens:auto;line-height:1.1}
  .pstt tr:first-child th small{font-size:8.5px;font-weight:600}
  .pssheet{padding:12px 6px}
  .pssheet .psttitle{padding:0 4px}
  .pstt th.psday{width:30px;padding-left:3px;font-size:11.5px}
  .pstt th.psbreak{width:20px;padding:4px 0}
  .psvert{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;line-height:1.1}
  .psvert b,.psvert small{display:inline!important;font-size:8.5px!important;margin:0!important}
  .psvert small br{display:none}
  .psvert small::before{content:" "}
  .pslesson b{font-size:12.5px}
  .pslesson small{font-size:8px;letter-spacing:-.03em;line-height:1.15;white-space:normal;overflow:visible;
    text-overflow:clip;overflow-wrap:anywhere}
  .psttfoot{font-size:12px;padding:10px 12px}
  .psfcols{grid-template-columns:1fr;gap:20px}
  .psfoot{padding-bottom:88px}
  .psbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--psline);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .psbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#56655b;
    font-size:11.5px;padding:4px 0;border-top:3px solid transparent;margin-top:-7px;padding-top:8px}
  .psbar a.on{color:var(--psgreen);border-top-color:var(--psgreen);font-weight:600}
}

/* the public site's loading line: a click swaps the content in place, and this shows it is on its way */
.psprog{position:fixed;left:0;top:0;height:3px;width:0;z-index:100;background:#649f32;
  box-shadow:0 0 8px rgba(100,159,50,.6);opacity:0;pointer-events:none}
.psprog.go{opacity:1;width:80%;transition:width 1.2s cubic-bezier(.1,.7,.2,1)}
.psprog.done{width:100%;opacity:0;transition:width .15s ease-out,opacity .3s ease .15s}

/* Website photos (admins): each photo with a computer-shaped and a phone-shaped preview of what shows */
.bpadd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 18px}
.bpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;margin-bottom:12px}
.bpcard{border:1px solid #e3e1da;border-radius:10px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:10px}
.bpshots{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.bpwide,.bpphone{background-size:cover;background-repeat:no-repeat;border-radius:8px;border:1px solid #e3e1da;background-color:#eef3ea}
.bpwide{aspect-ratio:4.4/1;min-width:0}
.bpphone{width:120px;aspect-ratio:2.3/1}
.bpmeta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.bpfocus{display:flex;gap:10px;flex-wrap:wrap}
.bpfocus label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#6b6b6b}
.bpfocus select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid #d9d6cf;border-radius:6px;background:#fff}
.bpacts{display:flex;gap:6px;flex-wrap:wrap}
.bpacts button[disabled]{opacity:.4;cursor:default}
@media(max-width:560px){.bpgrid{grid-template-columns:1fr}}

/* ---- the banner slider's controls, the way EduPage lays them out: numbers top-left, arrows at the sides,
        pause top-right, dots underneath */
.psnums{position:absolute;z-index:3;top:10px;left:calc(34% + 10px);display:flex;gap:2px}
.psnums button{min-width:22px;height:22px;padding:0 5px;border:0;border-radius:3px;background:rgba(20,30,22,.55);
  color:#fff;font:600 12px/22px "Segoe UI",system-ui,sans-serif;cursor:pointer}
.psnums button:hover{background:rgba(20,30,22,.75)}
.psnums button.on{background:#649f32}
.psarrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);border:0;background:none;padding:6px;
  color:rgba(255,255,255,.85);cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));transition:color .15s}
.psarrow:hover{color:#fff}
.psarrow.prev{left:calc(34% + 2px)}
.psarrow.next{right:6px}
.pspause{position:absolute;z-index:3;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:4px;
  background:rgba(20,30,22,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.pspause:hover{background:rgba(20,30,22,.75)}
.pshero:not(.paused) .psply,.pshero.paused .pspz{display:none}

/* ---- the clock in the Bell times card */
.psbells{position:relative}
.psclock{position:absolute;top:12px;right:12px;width:96px;height:96px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.psclock svg{display:block}
.psclock .psnum text{fill:#fff;font:700 11px Arial,"Helvetica Neue",sans-serif;text-anchor:middle}

/* ---- the photo gallery on Home */
.psgallery{margin-top:20px}
.psghead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.psghead .psmuted{margin-left:auto;font-size:14px}
.psgthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px}
.psgthumb{padding:0;border:3px solid #fff;background:#e9f1e4;cursor:pointer;aspect-ratio:1/1;border-radius:50%;
  overflow:hidden;box-shadow:0 2px 8px rgba(20,60,35,.22);transition:transform .15s,box-shadow .15s}
.psgthumb:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(20,60,35,.3)}
.psgthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pslight{position:fixed;inset:0;z-index:200;background:rgba(8,18,11,.93);display:none;align-items:center;justify-content:center}
.pslight.open{display:flex}
.pslight img{max-width:90vw;max-height:84vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.pslight button{position:absolute;border:0;background:none;color:#fff;cursor:pointer;opacity:.85;line-height:1}
.pslight button:hover{opacity:1}
.pslx{top:12px;right:18px;font-size:42px}
.pslp,.psln{top:50%;transform:translateY(-50%);font-size:64px;padding:10px 16px}
.pslp{left:6px}
.psln{right:6px}
.pslc{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#dfe9e1;font-size:14px}

/* ---- the day strip on Substitution */
.psdays{display:flex;gap:2px;overflow-x:auto;margin:0 0 16px;padding-bottom:6px;scrollbar-width:thin}
.psdaypick{flex:1 0 52px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border-radius:8px;
  text-decoration:none;color:#24432b;transition:background .15s}
.psdaypick:hover{background:#f7faf4}
.psdaypick b{font-size:17px;font-weight:700}
.psdaypick span{font-size:12.5px;color:#647267}
.psdaypick.off b,.psdaypick.off span{color:#b8c2bb}
.psdaypick.today b{color:#1f6f3f}
.psdaypick.on{background:var(--pshead);box-shadow:inset 0 -3px 0 #649f32}
.psdaypick.on b,.psdaypick.on span{color:#1a3421}

/* ---- Website photos (admins): the slide timing and the gallery list */
.bptime{margin:6px 0 4px}
.bptime label{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.bptime select{font:inherit;padding:5px 8px;border:1px solid #d9d6cf;border-radius:6px;background:#fff}
.bpggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:12px}
.bpgcard{border:1px solid #e3e1da;border-radius:10px;padding:8px;background:#fff;display:flex;flex-direction:column;gap:6px}
.bpgcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.bpgcard .bpacts .btn{padding:4px 8px;font-size:11px}

@media(max-width:760px){
  .psnums{left:10px;top:8px}
  .psnums button{min-width:19px;height:19px;font-size:11px;line-height:19px;padding:0 4px}
  .pspause{top:6px;right:8px;width:26px;height:26px}
  .psarrow{display:none}
  .pshero .pswrap{min-height:180px}
  .psherotext{padding:34px 0 24px}
  .psclock{width:74px;height:74px;top:12px;right:12px}
  .psclock svg{width:74px;height:74px}
  .psgthumbs{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px}
  .psdaypick{flex:0 0 46px}
  .psdaypick b{font-size:15px}
  .pslp,.psln{font-size:48px}
}

/* ---- Platform Overview (Super Admin) */
.sov{display:flex;flex-direction:column;gap:18px}
.sovtop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.sovtop h1{margin:0;font-size:30px;color:#1e2a4a;letter-spacing:-.01em}
.sovtop p{margin:4px 0 0;color:#6b7280}
.sovbtns{display:flex;gap:10px}
.sovstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sovcard,.sovstat{background:#fff;border:1px solid #e6e8ee;border-radius:14px;box-shadow:0 1px 3px rgba(20,30,60,.05)}
.sovstat{display:flex;gap:14px;align-items:flex-start;padding:16px}
.sovstat b{display:block;font-size:30px;line-height:1.15;color:#1e2a4a;margin:2px 0}
.sovlab{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;color:#1e2a4a;font-size:14px}
.sovlive{font-size:10.5px;font-weight:600;color:#2f8f46;background:#e4f4e7;border-radius:10px;padding:2px 8px}
.sovsub{display:block;font-size:12.5px;color:#6b7280}
.sovstat>div{flex:1;min-width:0}
.sovico{display:inline-grid;place-items:center;flex:none;width:52px;height:52px;border-radius:12px;color:#fff}
.sovico.sm{width:38px;height:38px;border-radius:10px}
.sovico.blue{background:#3b6fd8}.sovico.green{background:#2f9e5a}.sovico.purple{background:#8a55c8}
.sovico.orange{background:#ef7a2a}.sovico.gray{background:#8c95a3}
.sovmain{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:16px;align-items:start}
.sovleft{display:flex;flex-direction:column;gap:16px;min-width:0}
.sovcard{padding:16px 18px}
.sovhead{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.sovhead h2{margin:0;font-size:17px;color:#1e2a4a}
.sovhead p{margin:2px 0 0;font-size:12.5px;color:#6b7280}
.sovsearch{margin-left:auto;min-width:220px;border:1px solid #dfe3ea;border-radius:8px;padding:8px 12px;font:inherit;font-size:13px}
.sovtable{overflow-x:auto}
.sovtable table{width:100%;border-collapse:collapse;font-size:13px}
.sovtable th{text-align:left;font-size:11.5px;font-weight:600;color:#6b7280;text-transform:none;letter-spacing:0;
  padding:9px 10px;background:#f6f7fa;border-bottom:1px solid #e6e8ee}
.sovtable td{padding:10px;border-bottom:1px solid #f0f1f5;vertical-align:middle}
.sovtable td.mono{white-space:nowrap;color:#4b5563}
.sovnone{color:#8a8f98;text-align:center;padding:18px}
.sovschool{display:flex;align-items:center;gap:10px}
.sovschool img,.sovph{width:38px;height:38px;border-radius:50%;object-fit:contain;border:1px solid #e6e8ee;background:#fff}
.sovph{display:grid;place-items:center;font-weight:700;color:#3b6fd8}
.sovschool b{display:block;color:#1e2a4a}
.sovschool span{font-size:11.5px;color:#8a8f98}
.sovacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sovacts form{margin:0}
.sovlink{border:0;background:none;color:#3b6fd8;font:inherit;font-size:12.5px;cursor:pointer;padding:0}
.sovlink:hover{text-decoration:underline}
.sovpill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;border-radius:12px;padding:3px 10px;white-space:nowrap}
.sovpill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sovpill.ok{background:#e4f4e7;color:#2f8f46}.sovpill.warn{background:#fdf0dd;color:#b86a12}
.sovpill.err{background:#fdeaea;color:#c0392b}.sovpill.off{background:#eef0f3;color:#6b7280}
.sovfoot{margin:10px 0 0;font-size:12px;color:#8a8f98}
.sovhealth{display:flex;flex-direction:column}
.sovhrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f1f5;text-decoration:none;color:inherit}
.sovhrow:last-child{border-bottom:0}
.sovhrow>div{flex:1;min-width:0}
.sovhrow b{display:block;font-size:13.5px;color:#1e2a4a}
.sovhrow span{font-size:12px;color:#6b7280}
a.sovhrow:hover b{color:#3b6fd8}
.sovbar{width:90px;height:7px;border-radius:4px;background:#e6e8ee;overflow:hidden}
.sovbar i{display:block;height:100%;background:#3b6fd8;border-radius:4px}
.sovpct{font-size:12px;color:#4b5563;min-width:32px;text-align:right}
.sovgo{font-size:22px;color:#9aa1ad;line-height:1}
.sovquicks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sovquick{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;transition:box-shadow .15s}
.sovquick:hover{box-shadow:0 6px 18px rgba(20,30,60,.10)}
.sovquick .sovico{background:#eef2fb;color:#3b6fd8}
.sovquick>div{flex:1;min-width:0}
.sovquick b{display:block;color:#1e2a4a;font-size:14.5px}
.sovquick span{font-size:12px;color:#6b7280}
.sovlists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sovdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.sovdot.ok{background:#2f9e5a}.sovdot.err{background:#d9534f}.sovdot.warn{background:#ef9a2a}
@media(max-width:1100px){.sovstats{grid-template-columns:repeat(2,minmax(0,1fr))}.sovmain,.sovlists{grid-template-columns:1fr}}
@media(max-width:640px){.sovstats,.sovquicks{grid-template-columns:1fr}.sovsearch{min-width:0;width:100%;margin-left:0}}
.sovhrow .sovico,.sovhead .sovico{color:#fff}
.sovhrow .sovico svg,.sovhead .sovico svg{stroke:#fff}

/* the banner grows taller as the screen grows wider, so a wide screen shows as much of each photo as an
   ordinary one does, instead of a thin, zoomed-in band (the photo area keeps roughly a 3:1 shape) */
@media(min-width:761px){.pshero .pswrap{min-height:clamp(260px,20.5vw,480px)}}

/* Websites: the school website's parts, as tiles */
.wstiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:12px}
.wstile{align-items:flex-start}
.wstile em{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:#3b6fd8;margin-top:6px}

/* many photos in the banner: smaller dots, closer together, so a long album still fits on one line */
.psdots{gap:6px;flex-wrap:wrap;padding:0 12px}
.psdots button{width:8px;height:8px}
@media(max-width:760px){.psdots{gap:4px}.psdots button{width:6px;height:6px}}

/* Website photos: the previews are frames you drag the photo in (and zoom), shaped like the real banner */
.bpwide,.bpphone{position:relative;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.bpwide.dragging,.bpphone.dragging{cursor:grabbing;box-shadow:0 0 0 2px #3b6fd8}
.bpwide i,.bpphone i{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;pointer-events:none}
.bpwide{aspect-ratio:3.2/1}
.bpphone{width:130px;aspect-ratio:1.9/1}
.bpframe{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bpframe label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#4b5563}
.bpframe input[type=range]{width:150px;accent-color:#3b6fd8}
.bpframe [data-saved]{font-size:12px}
/* the website: a zoomed photo stays inside the banner */
.psslides{overflow:hidden}

/* ---- The substitution board in EduPage's exact colours
   yellow #fcff43 the lesson's period | pink #fac3c3 teaching then | red #f51e14 a cover (the chosen substitute)
   green #44ad6b the teacher pointed at or clicked | grid #c5bdc5 | the class's own lesson framed in black */
.sbb{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sbb th,.sbb td{border-color:#c5bdc5}
.sbb tr:first-child th.lp{background:#fcff43;color:#000}
.sbb td.lp{background:#fcff43}
.sbb td.busy,.sbb td.busy.lp{background:#fac3c3}
.sbb td.cov,.sbb td.cov.lp{background:#f51e14}
.sbb tr.cls td.here{background:#f51e14;box-shadow:inset 0 0 0 2px #000}
.sbb tr.cls td.busy{background:#fac3c3}
.sbb tr.sbt:not(.away):hover td{filter:none}
.sbb tr.sbt:not(.away):hover td:not(.busy):not(.cov):not(.lp),
.sbb tr.sbt.picked td:not(.busy):not(.cov):not(.lp){background:#44ad6b}
.sbb tr.sbt:not(.away):hover th.sbn,.sbb tr.sbt.picked th.sbn,.sbb tr.chosen:hover th.sbn{background:#44ad6b}
.sbb tr.sbt:not(.away):hover th.sbn .sbname,.sbb tr.sbt:not(.away):hover th.sbn small,
.sbb tr.sbt.picked th.sbn .sbname,.sbb tr.sbt.picked th.sbn small{color:#fff}
.sbb tr.chosen td{background:#fff}
.sbb tr.chosen td.lp{background:#fcff43}
.sbb tr.chosen td.busy{background:#fac3c3}
.sbb tr.chosen td.cov,.sbb tr.chosen td.cov.lp{background:#f51e14}
.sbb tr.chosen th.sbn{background:#fff;box-shadow:inset 4px 0 0 #f51e14}
.sbb tr.chosen th.sbn .sbname,.sbb tr.chosen th.sbn small{color:#111}
.sbb tr.chosen:hover th.sbn .sbname,.sbb tr.chosen:hover th.sbn small,
.sbb tr.chosen.picked th.sbn .sbname{color:#fff}
.sblist tr.sbrow.on td{background:#518dc0}

/* Students: the year in the corner, and the earlier years' pages */
.syhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.syhead h2{margin:0}
.syear{margin:0}
.syear select{font:700 28px/1.1 Georgia,"Times New Roman",serif;color:#111;border:0;background:transparent;
  padding:2px 26px 2px 6px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#555 50%),linear-gradient(135deg,#555 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.syear select:hover,.syear select:focus{background-color:#f3f6f3;border-radius:8px;outline:none}
.syncyears{display:inline-block;margin-left:6px;vertical-align:middle}
.sytotals{max-width:520px}
.sytotals td,.sytotals th{text-align:center}
.sytotals tr.sysum td{background:#f3f6f3;font-weight:700}

/* Substitution: the day picker in the tab bar, next to SUBSTITUTION - the day's name beside the date, not under it */
.sbtopbar{align-items:center;justify-content:flex-start}
.sbtopbar .tttools{margin-left:auto}
.sbtopbar .sbdaywrap{display:flex;align-items:center;gap:10px}
.sbtopbar .sbdayname{margin-top:0;text-align:left;white-space:nowrap}

/* Students: the Academic Year picker - a button with the year, and a list of every year under it */
.syp{position:relative;margin:0}
.syp>summary{list-style:none}
.syp>summary::-webkit-details-marker{display:none}
.sypbtn{display:flex;align-items:center;gap:12px;min-width:260px;padding:10px 16px 10px 14px;cursor:pointer;
  background:#fff;border:1.5px solid #c9d6d1;border-radius:14px;box-shadow:0 1px 3px rgba(20,60,50,.06);user-select:none}
.sypbtn:hover{border-color:#2a7d6b}
.syp[open] .sypbtn{border-color:#2a7d6b;box-shadow:0 0 0 3px rgba(42,125,107,.12)}
.sypico{color:#2a7d6b;display:grid;place-items:center}
.syptext{display:flex;flex-direction:column;line-height:1.1}
.syptext small{font-size:12.5px;color:#6b7a75}
.syptext b{font-size:26px;font-weight:800;color:#13201b;letter-spacing:-.01em}
.syppill{font-size:12px;font-weight:600;border-radius:12px;padding:3px 11px;background:#e9ecef;color:#55606a;white-space:nowrap}
.syppill.cur{background:#d7efe8;color:#1f6f5c}
.sypchev{margin-left:auto;color:#2a7d6b;transition:transform .15s}
.syp[open] .sypchev{transform:rotate(180deg)}
.syppanel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:340px;background:#fff;border:1px solid #dfe6e3;
  border-radius:14px;box-shadow:0 14px 40px rgba(15,40,32,.16);padding:12px}
.syphead{font-weight:700;font-size:15px;color:#13201b;padding:4px 8px 10px}
.syplist{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.sypitem{display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  text-decoration:none;color:#2b3632}
.sypitem:hover{background:#f3f7f5}
.sypitem.on{background:#e3f2ee}
.sypitem b{font-size:16px;font-weight:600}
.sypitem.on b{font-weight:800;color:#13201b}
.sypcheck{color:#1f6f5c;font-weight:800;font-size:16px;text-align:center}
.sypn{font-size:12px;color:#7a8783;text-align:right}
.sypadd{border-top:1px solid #e6ebe9;margin-top:10px;padding:10px 4px 2px}
.sypadd button{border:0;background:none;cursor:pointer;font:inherit;font-size:15px;font-weight:600;color:#1f6f5c;
  display:flex;align-items:center;gap:10px;padding:6px 6px}
.sypadd button span{font-size:22px;line-height:1;font-weight:400}
.sypadd button:hover{color:#134d40}
.sypadd small{display:block;color:#7a8783;font-size:11.5px;padding:0 6px 0 38px}
@media(max-width:640px){.sypbtn{min-width:0}.syppanel{width:min(340px,92vw)}}

/* Users: the two tabs, and Login status */
.ustabs{margin:6px 0 12px}
.lscards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:12px 0 18px}
.lscard{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid #e6e8ee;border-radius:12px;
  background:#fff;text-decoration:none;color:#1e2a4a;transition:box-shadow .15s,border-color .15s}
.lscard:hover{box-shadow:0 4px 14px rgba(20,30,60,.08)}
.lscard.on{border-color:#3b6fd8;box-shadow:0 0 0 2px rgba(59,111,216,.18)}
.lscard b{font-size:26px;line-height:1.1}
.lscard>span:last-child{font-size:12.5px;color:#6b7280}
.lsico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;margin-bottom:4px}
.lscard.ok .lsico{background:#e4f4e7;color:#2f8f46}.lscard.info .lsico{background:#e8f0fb;color:#2c5d9f}
.lscard.warn .lsico{background:#fdf0dd;color:#b86a12}.lscard.err .lsico{background:#fdeaea;color:#c0392b}
.lscard.off .lsico{background:#eef0f3;color:#6b7280}
.lstitle{margin:4px 0 8px;font-size:16px}
.lspill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;border-radius:12px;padding:3px 10px;white-space:nowrap}
.lspill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.lspill.ok{background:#e4f4e7;color:#2f8f46}.lspill.info{background:#e8f0fb;color:#2c5d9f}
.lspill.warn{background:#fdf0dd;color:#b86a12}.lspill.err{background:#fdeaea;color:#c0392b}.lspill.off{background:#eef0f3;color:#6b7280}
.lstable td{vertical-align:middle}
.lsroles{display:flex;flex-wrap:wrap;gap:3px}
.lsroles .role{font-size:10.5px}
.lstable tr.ls-blocked td{opacity:.6}
@media(max-width:1100px){.lscards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.lscards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the Academic Year picker in the school's chosen colours */
.sypbtn{border-color:#1f766d}
.sypbtn:hover,.syp[open] .sypbtn{border-color:#16665f}
.syp[open] .sypbtn{box-shadow:0 0 0 3px rgba(22,102,95,.14)}
.sypico,.sypchev,.sypcheck{color:#16665f}
.syptext b,.syphead{color:#203247}
.syppill{background:#e8eef3;color:#4a5a6a}
.syppill.cur{background:#d5f1e6;color:#16665f}
.syppanel{background:#f5f8f5;border-color:#dfe8e2}
.sypitem:hover{background:#e9f0eb}
.sypitem b{color:#203247}
.sypitem.on{background:#1f766d}
.sypitem.on b,.sypitem.on .sypcheck,.sypitem.on .sypn{color:#fff}
.sypitem.on .syppill.cur{background:#d5f1e6;color:#16665f}
.sypadd button{color:#16665f}
.sypadd button:hover{color:#0f4d47}

/* Payroll > Attendance: the school's attendance sheet, laid out as the sheet is */
.asbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.asbar label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.asbar select{font:inherit;padding:6px 10px;border:1px solid #d9d6cf;border-radius:7px;background:#fff;max-width:320px}
.astable{border-collapse:collapse;font-size:12px;background:#fff;white-space:nowrap}
.astable th,.astable td{border:1px solid #cfd6dc;padding:4px 7px;text-align:center}
.astable th{background:#eef3f7;color:#203247;font-weight:600;text-transform:none;letter-spacing:0;font-size:11.5px}
.astable th.asday{background:#dfeaf3}
.astable th.asday b{display:block;font-size:12.5px}
.astable th.asday span{display:block;font-size:11px;font-weight:500}
.astable th.asday small{display:block;font-size:10px;color:#5b6b7a;font-weight:500}
.astable tr.assub th{font-size:10.5px;font-weight:500;background:#f4f7fa}
.astable td.asno,.astable td.asnid,.astable td.asname,.astable td.asdes{background:#fbfcfd;text-align:left}
.astable td.asname{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 #cfd6dc;min-width:190px}
.astable td.asname div{display:flex;align-items:center;gap:8px}
.astable td.asname a{color:#203247;font-weight:600;text-decoration:none}
.astable td.asname a:hover{text-decoration:underline}
.asface{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.asface.ph{display:inline-grid;place-items:center;background:#e6ecf2;color:#55606a;font-size:10px;font-weight:700}
.astable td.astime{font-variant-numeric:tabular-nums;font-weight:600}
.astable .aszero{color:#b4bcc5;font-weight:400}
.astable td.aspunch{color:#55606a;font-size:11px}
.astable tr.asout td{background:#fafbfc}
.astable td.aslate.on{color:#c0392b;font-weight:700;background:#fdeeee}
.astable td.asstate{font-size:12.5px}
.astable td.asstate.present{background:#e4f4e7;color:#1e6b33}
.astable td.asstate.sick{background:#fdf0dd;color:#8a5a0c}
.astable td.asstate.leave{background:#e8eef3;color:#3e4f60}
.astable td.asstate.other{background:#efe8f7;color:#553a7a}
.astable tr.asin td{border-top:2px solid #b9c4cf}
.astitle{margin:20px 0 8px;font-size:16px;color:#203247}
.assum td:last-child,.assum th:last-child{position:static}
@media print{.aspanel .slistwrap{overflow:visible!important}.astable{font-size:8px}.astable th,.astable td{padding:1px 2px}
  .astable td.asname{position:static}}

/* Payroll: its own page, with its tabs */
.payhead{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.payhead h1{margin:0;font-size:26px;color:#1e2a4a}
.payhead p{margin:2px 0 0;color:#6b7280}
.payico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#7b5cc4;color:#fff;flex:none}
.payico svg{stroke:#fff}
.paytabs{margin:0 0 16px;border-bottom:2px solid #e3e1ea;padding-bottom:0;gap:4px}
.paytabs .ztab{border-radius:9px 9px 0 0;padding:9px 18px;font-weight:600}
.paytabs .ztab.on{background:#7b5cc4;color:#fff}
.paysoon{margin-left:8px;font-size:10.5px;font-weight:600;background:#eeeaf7;color:#6a55a8;border-radius:9px;padding:1px 7px}
.paytabs .ztab.on .paysoon{background:rgba(255,255,255,.25);color:#fff}
.paymonths{display:flex;gap:8px;margin:0 0 10px}
.paylater p{max-width:680px}

/* "Who can edit": the permissions screen (Sync > Attendance, and each Payroll tab) */
.pmtabline{border-bottom:2px solid #dfeadf;margin:6px 0 0}
.pmtab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 4px;font-weight:700;color:#2f7d32;
  border-bottom:3px solid #2f7d32;margin-bottom:-2px}
.pmpanel{border-top-left-radius:0;padding:22px}
.pmhead{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.pmhead h2{margin:0;font-size:22px;color:#12201a}
.pmhead p{margin:3px 0 0;color:#4b5a53}
.pmshield{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#e6f2e6;color:#2f7d32;flex:none}
.pmlock{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:#e6f2e6;color:#2f7d32;
  font-weight:600;font-size:13px;border-radius:8px;padding:7px 12px;white-space:nowrap}
.pminfo{display:flex;align-items:center;gap:12px;background:#e6f2e6;color:#234d27;border-radius:8px;padding:11px 14px;margin-bottom:16px}
.pminfo svg{color:#2f7d32;flex:none}
.pmcols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.pmleft,.pmside{border:1px solid #e1e7e2;border-radius:10px;padding:14px;background:#fff}
.pmtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pmsearch{display:flex;align-items:center;gap:8px;border:1px solid #cfd8d2;border-radius:8px;padding:0 10px;flex:1;min-width:200px;color:#6a7a72}
.pmsearch input{border:0;outline:0;font:inherit;padding:9px 0;width:100%;background:transparent}
.pmsearch:focus-within{border-color:#2f7d32;box-shadow:0 0 0 3px rgba(47,125,50,.12)}
.pmchip{border:1px solid #cfd8d2;background:#fff;border-radius:8px;padding:8px 14px;font:inherit;font-size:13.5px;cursor:pointer;color:#2b3a32}
.pmchip:hover{border-color:#2f7d32}
.pmchip.on{background:#2f7d32;border-color:#2f7d32;color:#fff;font-weight:600}
.pmcount{margin-left:auto;font-size:13px;color:#5a6a62;white-space:nowrap}
.pmlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;max-height:330px;overflow-y:auto;padding-right:4px}
.pmitem{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;cursor:pointer;min-width:0}
.pmitem:hover{background:#f4f8f4}
.pmitem.on{background:#e6f2e6}
.pmitem[hidden]{display:none}
.pmitem input{width:18px;height:18px;accent-color:#2f7d32;flex:none;margin:0}
.pmitem>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#1c2a23}
.pmface{width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover;display:inline-grid;place-items:center;
  background:#e4ece6;color:#2c4a36;font-size:11.5px;font-weight:700}
.pmside h3{margin:0 0 10px;font-size:17px;color:#12201a}
.pmside h4{margin:14px 0 8px;font-size:14.5px;color:#12201a;border-top:1px solid #e1e7e2;padding-top:14px}
.pmalways{display:flex;align-items:center;gap:12px;background:#e6f2e6;border-radius:8px;padding:10px 12px;color:#2f7d32}
.pmalways b{display:block;color:#12201a;font-size:13.5px}
.pmalways span{font-size:13.5px;color:#34493b}
.pmsels{display:flex;flex-direction:column;gap:6px;max-height:190px;overflow-y:auto}
.pmsel{display:flex;align-items:center;gap:10px;background:#f1f7f1;border-radius:8px;padding:7px 10px}
.pmsel b{font-size:13.5px;color:#12201a}
.pmcan{list-style:none;margin:12px 0 0;padding:10px 12px;background:#f4f8f4;border-radius:8px;display:flex;flex-direction:column;gap:7px}
.pmcan li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#1c2a23}
.pmcan svg{color:#fff;background:#2f7d32;border-radius:50%;padding:2px;flex:none}
.pmothers{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#5a6a62;border-top:1px solid #e1e7e2;margin:12px 0 0;padding-top:12px}
.pmfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e1e7e2;margin-top:16px;padding-top:16px}
.pmsave{background:#2f7d32;display:inline-flex;align-items:center;gap:8px}
.pmsave:hover{background:#256428}
.paylocked{opacity:.55;cursor:not-allowed}
.payaccess{margin-left:auto}
.paywho{margin:0 0 4px}
@media(max-width:1100px){.pmcols{grid-template-columns:1fr}.pmlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pmlist{grid-template-columns:1fr}.pmlock{display:none}}
.astable td.aspunch[style],.astable td.astime[style]{color:#000}
.astable td.asstate[style]{color:#1b2a22}

/* the attendance states in Google Sheets' own dropdown colours (the API does not give these, so they are set here) */
.astable td.asstate.present{background:#d4edbc;color:#11734b}
.astable td.asstate.sick{background:#ffe5a0;color:#473821}
.astable td.asstate.leave{background:#e6cff2;color:#5a3286}
.astable td.asstate.other{background:#bfe1f6;color:#0a53a8}
.astable tr.asout td.astime,.astable tr.asout td.aspunch{background:#fff}


/* ==================== Green theme (1 Oct 2026) ====================
   Colours and symbols taken from the school's own mockup of the dashboard: a deep green menu, a pale green
   page, white tiles with the symbol in a coloured square. Only colours change here - nothing moves. */
:root{--navy:#0f3f21;--navy2:#17633a;--bg:#f2f8f4}
.side{background:#0f3f21;color:#e6f5ec}
.snav a{color:#eaf7ef}
.snav a:hover{background:#ffffff17;color:#fff}
.snav a.on{background:#2e7c48;color:#fff;box-shadow:0 2px 8px #00000033}
.snav summary{color:#f0fff6}
.sbrand.sbschool span{color:#b9e2c8}
.sfoot span{color:#a9d2b8}
.sout a,.sout button{color:#e6f5ec}
.tbar{border-bottom-color:#e2ece5}
.twho b{color:#0c2f1f}.twho span{color:#7d8f87}
.userchip{border-color:#dce8df}
.userchip .linkbtn,.userchip button{background:#eef5f0;color:#1c3327}
.role.leading_teacher{background:#368050}
.bnav a.on{color:#17633a}

/* the greeting */
.dhero{background:linear-gradient(110deg,#e8f5e8 0%,#e7f7e9 55%,#e0f8e5 100%);border-color:#d6eadb}
.dhero h1,.dwho h1{color:#0f3d24}
.dwelcome{color:#3b5446}
.dhero .hrole{color:#5b7163}
.dprof{color:#1b6334;font-weight:600}
.dface{background:#d5ecdb;box-shadow:0 3px 12px rgba(15,63,33,.20)}
.dface .initials{color:#1b6334}
.hdate{display:flex;align-items:center;gap:12px;text-align:left;border-color:#deebe2;min-width:0;padding:14px 20px}
.hdate>.ic{color:#0b9c3c;flex:none}
.hdate span{color:#7b8a84}
.hdate b{color:#0d2d21}

/* today's absences */
.sbbanner{background:#fef8e6;border-color:#f8e3b0;color:#5a5f52}
.sbbanner:hover{border-color:#e9c877}
.sbbanner b{color:#8a4a06}
.sbbanner .ic{color:#d3850a}
.sbbanner .chev{color:#a8682a}

/* the six big buttons: white, the symbol in a coloured square, an arrow in a tinted ring */
.actions .acard{position:relative;background:#fff;color:#11261c;border:1px solid #e2eee6;gap:14px;
                box-shadow:0 2px 8px rgba(15,63,33,.07)}
.actions .acard:hover{filter:none;box-shadow:0 10px 22px rgba(15,63,33,.15)}
.actions .acard .ic{width:60px;height:60px;padding:15px;border-radius:16px;box-sizing:border-box;color:#fff;opacity:1;
                    stroke-width:1.9;background:linear-gradient(160deg,var(--t1),var(--t2));box-shadow:0 6px 14px var(--ts)}
.actions .acard span{padding-right:40px}
.actions .acard:after{content:"";position:absolute;right:14px;bottom:13px;width:30px;height:30px;border-radius:50%;
                      background:var(--tc)}
.actions .acard:before{content:"";position:absolute;right:27px;bottom:24px;width:7px;height:7px;z-index:1;
                       border-top:2px solid var(--ta);border-right:2px solid var(--ta);transform:rotate(45deg)}
.actions .a-blue{--t1:#49bf70;--t2:#07692e;--ts:rgba(7,105,46,.30);--tc:#e2f4e7;--ta:#0a5522}
.actions .a-teal{--t1:#3bd0b0;--t2:#04805d;--ts:rgba(4,128,93,.30);--tc:#e0f5ee;--ta:#167855}
.actions .a-maroon{--t1:#fd6e8c;--t2:#bc1947;--ts:rgba(188,25,71,.28);--tc:#ffe5e9;--ta:#b41c3e}
.actions .a-purple{--t1:#af81fe;--t2:#612ecc;--ts:rgba(97,46,204,.28);--tc:#eee8fc;--ta:#4b22b0}
.actions .a-cyan{--t1:#44bd72;--t2:#036c30;--ts:rgba(3,108,48,.30);--tc:#e2f4e7;--ta:#0a5522}
.actions .a-web{--t1:#3ed6b0;--t2:#006b4d;--ts:rgba(0,107,77,.30);--tc:#e0f5ee;--ta:#167855}

/* the figures: a tinted square, the symbol in its own colour */
.dstat{border-color:#e2eee6}
.dstat b{color:#0c2327}
.dsicon{width:46px;height:46px;box-shadow:none}
.dsicon .ic{stroke-width:1.9;fill:currentColor;fill-opacity:.22}
.dsicon.a-blue{background:#e4f6ea;color:#0c7d3c}
.dsicon.a-teal{background:#e2f7ee;color:#05835a}
.dsicon.a-purple{background:#efeafc;color:#633fb8}
.dsicon.a-orange{background:#fef1d6;color:#d27f06}
.dsicon.a-maroon{background:#fee7ec;color:#d44c68}

/* the six groups */
.dgroup{border-color:#e2eee6}
.dgroup:nth-child(1){color:#2c854c}.dgroup:nth-child(2){color:#06ae95}.dgroup:nth-child(3){color:#8956e7}
.dgroup:nth-child(4){color:#d94665}.dgroup:nth-child(5){color:#309c3c}.dgroup:nth-child(6){color:#dc7e03}
.dgicon{color:#fff}
.dgicon.a-blue{background:linear-gradient(160deg,#40b464,#036828)}
.dgicon.a-teal{background:linear-gradient(160deg,#35cfab,#009b72)}
.dgicon.a-purple{background:linear-gradient(160deg,#a877fe,#602bc8)}
.dgicon.a-maroon{background:linear-gradient(160deg,#ee6681,#b62649)}
.dgicon.a-green{background:linear-gradient(160deg,#63c168,#2b923a)}
.dgicon.a-orange{background:linear-gradient(160deg,#ed9f28,#d17807)}
.dghead h2{color:#0c2327}
.dlink{background:#f2f7f6;border-color:#e4eeea;color:#18242f}
.dlink:hover{background:#e6f3ea;border-color:#cbe2d3}
.dlink:not(.off):after{content:"";margin:0 4px 0 auto;width:6px;height:6px;flex:none;
                       border-top:1.8px solid #374157;border-right:1.8px solid #374157;transform:rotate(45deg)}
.dlink.off{opacity:1;color:#8a9296;background:#f7faf9}
.dlink.off .ic{color:#a3abad}
.dlink.off:after{content:"Soon";margin-left:auto;font-size:10px;color:#8f9699;background:#e3e9ea;
                 border-radius:6px;padding:2px 7px}

/* ---- Payroll > Attendance: the places that can be changed in the sheet ---- */
.astable th.asday .asedit{display:block;width:100%;margin:1px 0 0;padding:1px 4px;border:1px dashed #8fa9bf;border-radius:5px;
  background:#fff;color:#203247;font:inherit;cursor:pointer}
.astable th.asday .asdate{font-size:11px;font-weight:500}
.astable th.asday .assign{font-size:10px;font-weight:500;color:#5b6b7a}
.astable th.asday .asedit:hover,.astable th.asday .asedit:focus-visible{border-style:solid;border-color:#16665f;background:#eef8f5;outline:0}
.astable .asinput{display:block;width:auto;max-width:132px;margin:1px auto 0;padding:1px 4px;font:inherit;font-size:11px;
  border:1px solid #16665f;border-radius:5px}
.astable td.ased{cursor:pointer;position:relative}
.astable td.ased:hover,.astable td.ased:focus-visible,.astable td.ased.asopen{outline:2px solid #16665f;outline-offset:-2px}
.astable td.ased:empty:hover:after{content:"\270E";color:#8fa9bf;font-size:12px}
.astable td.ased.saving{opacity:.55}
.astable td.ased.justsaved{outline:2px solid #2f9e3f;outline-offset:-2px}
.astable td.asname small.asown{display:block;margin-top:1px;font-size:10px;font-weight:600;color:#16665f}
.asedhint{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:#eef8f5;border:1px solid #cfe6df;color:#1c3d38;font-size:12.5px}
.assaved{margin-left:10px;font-weight:600}
.assaved.ok{color:#1e6b34}.assaved.bad{color:#b03d3d}
.asmenu{position:absolute;z-index:80;display:flex;flex-direction:column;gap:3px;min-width:230px;max-width:340px;padding:7px;
  background:#fff;border:1px solid #cfd6dc;border-radius:10px;box-shadow:0 10px 30px rgba(20,30,50,.22)}
.asopt{border:0;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;text-align:right;cursor:pointer;
  background:#eef1f4;color:#1b2a22}
.asopt.present{background:#d4edbc;color:#11734b}.asopt.sick{background:#ffe5a0;color:#473821}
.asopt.leave{background:#e6cff2;color:#5a3286}.asopt.other{background:#bfe1f6;color:#0a53a8}
.asopt.none{background:#fff;border:1px dashed #b9c4cf;color:#6b7785;text-align:center}
.asopt:hover,.asopt:focus-visible{outline:2px solid #16665f;outline-offset:1px}
.asopt.on{box-shadow:inset 0 0 0 2px #16665f}
@media print{.asedhint,.asmenu{display:none}.astable th.asday .asedit{border:0;padding:0;background:none}
  .astable td.asname small.asown{display:none}}

/* ---- Payroll > Who can edit: what can be changed, and personal sign-in times ---- */
.plpanel,.sgpanel{margin-top:16px}
.pllist{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.plrow{display:flex;align-items:center;gap:14px;margin:0;padding:12px 14px;border:1px solid #e1e7e2;border-radius:10px;
  background:#fff;color:inherit;text-decoration:none}
.plrow:hover,.plrow:focus-visible{border-color:#8fc39a;background:#f7fbf8;outline:0}
.pltext{flex:1;min-width:0}
.pltext b{display:block;font-size:14px;color:#1c2a23}
.pltext span{display:block;font-size:12.5px;color:#5a6a62;font-weight:400}
.pltext .plnames{margin-top:3px;color:#256428;font-weight:600}
.plwho{flex:none;font-style:normal;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;background:#eef1f0;color:#5a6a62}
.plwho.on{background:#e3f3e5;color:#256428}
.plgo{flex:none;font-size:12.5px;font-weight:600;color:#16665f;white-space:nowrap}
.payplace{margin-top:-6px}
.plfoot{display:flex;justify-content:flex-end;border-top:1px solid #e1e7e2;margin-top:12px;padding-top:12px}
.sgwho{display:flex;align-items:center;gap:10px}
.sgwho b{display:block;font-size:13.5px}.sgwho small{color:#6b7785;font-size:11px}
.sgtable td{vertical-align:middle}.sgtable form{margin:0}
.sgtime{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;color:#16665f}
.sgh{margin:18px 0 8px;font-size:14px;color:#203247}
.sgadd{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:12px 14px;background:#f4f8f4;border-radius:10px}
.sgadd label{margin:0;display:flex;flex-direction:column;gap:4px;font-size:12px}
.sgadd select{min-width:260px;width:auto}.sgadd input{width:auto}
.sgagain{display:flex;align-items:center;gap:10px;margin:12px 0 0}
.sglog td{font-size:12.5px}
@media(max-width:700px){.plgo{display:none}.sgadd select{min-width:0;width:100%}.sgadd label{flex:1 1 140px}}
button.btn.pmsave,a.btn.pmsave{background:#2f7d32}
button.btn.pmsave:hover,a.btn.pmsave:hover{background:#256428}

/* the menu down the side is navy: #192a55, the page being shown in #345792, near-white lettering - the shades
   in the school's own picture of it. The school tried dark green, its light green and the bright blue of the
   "Log in" button in turn, and came back to this each time as the clearest. Only the menu: the rest of the
   panel keeps its green. */
.side{background:#192a55;color:#e6edf8}
.snav a,.snav summary{color:#e6edf8}
.snav a:hover{background:#ffffff17;color:#fff}
.snav a.on{background:#345792;color:#fff;box-shadow:0 2px 8px #00000033}
.sbrand.sbschool span{color:#b9c6e3}
.sfoot,.sme{border-top-color:#ffffff2e}
.sfoot span{color:#b9c6e3}
.sout a,.sout button{background:#ffffff1a;color:#e6edf8}
.sout a:hover,.sout button:hover{background:#ffffff2e}

/* ---- Payroll > Individual Reports: the staff on the left, one person's month or year on the right ---- */
.ircols{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}
.irside{position:sticky;top:70px}
.irsearch{display:block;margin:0 0 8px}
.irsearch input{width:100%}
.irlist{display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 220px);overflow-y:auto;border:1px solid #e1e7e2;
  border-radius:10px;padding:5px;background:#fbfcfb}
.iritem{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;color:inherit;text-decoration:none}
.iritem:hover{background:#eef5f0}
.iritem.on{background:#1f766d;color:#fff}
.iritem b{display:block;font-size:12.5px;line-height:1.25}
.iritem small{display:block;font-size:10.5px;color:#6b7785}
.iritem.on small{color:#d7efe9}
.iritem.gone{opacity:.62}
.iritem[hidden]{display:none}
.irmain{min-width:0;transition:opacity .12s}
.irmain.irbusy{opacity:.45}
.irempty h2{margin-top:4px}
.irhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;border-radius:12px;
  background:linear-gradient(110deg,#e8f5e8,#e7f7e9 55%,#e0f8e5);border:1px solid #d6eadb;margin-bottom:14px}
.irface{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #fff;box-shadow:0 2px 8px rgba(15,63,33,.18)}
.irface.ph{display:grid;place-items:center;background:#d5ecdb;color:#1b6334;font-weight:700;font-size:20px}
.irwho{flex:1;min-width:220px}
.irwho h2{margin:0 0 2px;font-size:20px;color:#0f3d24}
.irwho p{margin:0;font-size:13px;color:#4c6155}
.irwho .irjoin{margin-top:5px;font-size:12.5px}
.irwho .irjoin.warn{color:#8a4a06}
.irtools{display:flex;align-items:center;gap:10px}
.irviews{display:flex;background:#fff;border:1px solid #cfe2d5;border-radius:999px;padding:3px}
.irviews a{padding:6px 16px;border-radius:999px;font-size:13px;font-weight:600;color:#2c4a39;text-decoration:none}
.irviews a.on{background:#1f766d;color:#fff}
.irh{margin:16px 0 8px;font-size:15px;color:#203247}
.irpick{margin:0 0 10px}
.irpick label{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600}
.irpick select{width:auto;min-width:230px;padding:6px 10px}
.irtable th{vertical-align:bottom;white-space:normal;max-width:110px;min-width:54px;line-height:1.25}
.irtable th small{display:block;font-size:9.5px;font-weight:500;color:#6b7785}
.irtable th.irlab{text-align:left;white-space:nowrap;max-width:none;background:#fbfcfd;font-weight:600}
.irtable td{font-size:13px;font-variant-numeric:tabular-nums;font-weight:600}
.irtable td.irz{color:#b4bcc5;font-weight:400}
.irtable tr.irtotal th,.irtable tr.irtotal td{background:#eef5f0;border-top:2px solid #8fb39b;font-weight:700}
.irk{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12.5px}
.irk.present{background:#d4edbc;color:#11734b}.irk.sick{background:#ffe5a0;color:#473821}
.irk.leave{background:#e6cff2;color:#5a3286}.irk.other{background:#bfe1f6;color:#0a53a8}
.astable th.irk{display:table-cell;border-radius:0;padding:4px 7px;font-size:11.5px}
.irdays td{font-size:12.5px}
.irdays td.irlate{color:#c0392b;font-weight:700}
.irbars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:0 0 14px}
.irbar{border:1px solid #e1e7e2;border-radius:10px;padding:10px 12px;background:#fff}
.irbart{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.irbart b{font-size:13px;white-space:nowrap}
.irbarl{height:8px;border-radius:999px;background:#e9eeea;overflow:hidden}
.irbarl i{display:block;height:100%;border-radius:999px;background:#2f9a55}
.irbar small{display:block;margin-top:5px;font-size:11.5px;color:#5a6a62}
.irbar.over{border-color:#e3a3a3;background:#fff6f6}
.irbar.over .irbarl i{background:#c0392b}
.irbar .irover{color:#b03d3d;font-weight:700}
.irnote{margin:0 0 10px}
.irlimits{margin-top:22px;border:1px solid #e1e7e2;border-radius:10px;padding:10px 14px;background:#fbfcfb}
.irlimits summary{cursor:pointer;font-weight:600;font-size:13px;color:#203247}
.irlims{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:8px 18px;margin:10px 0}
.irlim{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:400}
.irlim .irk{flex:1;text-align:right}
.irlim input{width:92px;flex:none}
@media(max-width:900px){.ircols{grid-template-columns:1fr}.irside{position:static}.irlist{max-height:240px}}
@media print{.ircols{display:block}.irhead{background:none;border:0;padding:0}.irtable th{max-width:none}
  .irpanel .slistwrap{overflow:visible!important}}
.mrtable td.asname{min-width:200px}
.mrtable td.ircom{text-align:left;font-weight:400;font-size:12px;max-width:220px;white-space:normal}
.mrnote{background:#fff7e6;border-color:#f3d69b;color:#6a4300}

/* ---- A member of staff's own page, in the look the school drew: the welcome, the three figures, their own
   report, the missed punches. The colours are the ones in the school's pictures. ---- */
.mebox{background:#fff;border:1px solid #e2eee6;border-radius:16px;overflow:hidden;margin-bottom:16px;
  box-shadow:0 1px 4px rgba(20,30,50,.05)}
.mehero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px 16px;
  background:linear-gradient(100deg,#fff 0%,#fefefe 42%,#ecf8f3 72%,#eaf8f2 100%)}
.mewho p{margin:0;font-size:17px;font-weight:700;color:#124735}
.mewho h1{margin:3px 0 9px;font-size:27px;letter-spacing:-.2px;color:#04231c}
.mewho .meline{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;font-weight:500;color:#718390}
.mewho .meline i{font-style:normal}
.mesay{display:flex;align-items:center;gap:14px;flex:none}
.mesay svg{flex:none}
.mesay span{position:relative;font:italic 700 16.5px/1.2 "Segoe Script","Lucida Handwriting","Brush Script MT",cursive;
  color:#17503c;transform:rotate(-7deg);text-align:center;padding-bottom:7px}
.mesay span:after{content:"";position:absolute;left:6%;right:0;bottom:0;height:7px;border-bottom:2px solid #17503c;
  border-radius:0 0 60% 60%/0 0 100% 100%}
.mestats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:4px 18px 18px}
.mestat{display:flex;align-items:center;gap:20px;padding:20px 22px;border-radius:14px}
.mestat span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;flex:none}
.mestat span .ic{stroke-width:2}
.mestat b{display:block;font-size:31px;line-height:1.05;color:#071c18;font-variant-numeric:tabular-nums}
.mestat div{font-size:13.5px;font-weight:700;color:#1c5245}
.mestat.g{background:#f1fcf8}.mestat.g span{background:linear-gradient(160deg,#319861,#268058);box-shadow:0 4px 10px rgba(38,128,88,.28)}
.mestat.b{background:#eef5fd}.mestat.b span{background:#4283df;box-shadow:0 4px 10px rgba(66,131,223,.28)}
.mestat.b div{color:#1f3f6e}
.mestat.p{background:#f6f4fd}.mestat.p span{background:#7b5bdb;box-shadow:0 4px 10px rgba(123,91,219,.28)}
.mestat.p div{color:#3d2a80}
.irown{margin-bottom:16px}
.mqpanel{padding:0;overflow:visible}
.mqhead{display:flex;align-items:center;gap:16px;padding:13px 20px;color:#fff;background:linear-gradient(100deg,#1d634e,#1e695d)}
.mqhead h2{margin:0;font-size:17px;color:#fff}
.mqhead p{margin:3px 0 0;font-size:12.5px;color:#eaf9f3}
.mqbang{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#185a47;
  font-weight:800;font-size:20px;flex:none}
.mqpanel>p{margin:10px 20px}
.mqpanel .mqtable{width:100%;margin:0;border-collapse:collapse}
.mqpanel .mqtable th{background:#f0f9f6;color:#164647;font-weight:700;font-size:11.5px;letter-spacing:.03em;
  text-transform:uppercase;text-align:left;padding:11px 20px;border:0}
.mqpanel .mqtable td{padding:11px 20px;border:0;border-top:1px solid #eef3f0;color:#4d6076;vertical-align:middle}
.mqpanel .mqtable tr:nth-child(2) td{border-top:0}
.mqpanel .zstate{display:inline-block;background:#d7f5e7;color:#247444;font-weight:700;border-radius:8px;padding:5px 12px}
.mqpanel .mqtable td .hint{color:#516679;font-size:13px}
.mqpanel .zmiss{color:#e02529;font-weight:700}
.mqpanel summary.btn,.mqpanel .mqf .btn{background:#24397a;color:#fbfbfc;border-radius:9px;padding:8px 20px}
@media(max-width:760px){.mesay{display:none}.mestats{grid-template-columns:1fr;gap:10px;padding:4px 12px 12px}.mewho h1{font-size:23px}
  .mestat{padding:13px 16px}.mestat b{font-size:26px}.mqpanel .mqtable th,.mqpanel .mqtable td{padding:9px 12px}}
@media print{.mebox,.mqpanel{display:none}}

.irlang{font-size:12.5px;font-weight:600;color:#16665f;text-decoration:none;padding:5px 12px;border:1px solid #cfe2d5;border-radius:999px;background:#fff}
.irlang:hover{background:#eef8f5}
.irlim{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px}
.irlim input[type=text]{flex:1.2;min-width:150px;width:auto}
.irlim small{color:#6b7785;white-space:nowrap}
.irlims{grid-template-columns:1fr}

/* ---- My page: its two tabs, and Request a punch ---- */
.metabs{margin:0 0 14px;border-bottom:2px solid #dcebe1;padding-bottom:0;gap:4px}
.metabs .ztab{border-radius:9px 9px 0 0;padding:9px 18px;font-weight:600;color:#2c4a39}
.metabs .ztab.on{background:#1d634e;color:#fff}
.metabs .zc{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:#f1c40f;color:#3b2f00;font-size:11px;text-align:center}
.rqpanel{padding:0;overflow:visible;margin-bottom:16px}
.rqbody{padding:16px 20px 18px;display:flex;flex-direction:column;gap:14px;max-width:640px}
.rqbody label{margin:0;font-size:12.5px;font-weight:600;color:#1c3327}
.rqday input{display:block;width:auto;margin-top:4px}
.rqset{border:1px solid #dcebe1;border-radius:10px;padding:8px 14px 12px;margin:0}
.rqset legend{font-size:12.5px;font-weight:700;color:#164647;padding:0 6px}
.rqset .hint{margin:0 0 8px}
.rqp{display:flex;align-items:center;gap:12px;padding:7px 0;border-top:1px solid #eef3f0;cursor:pointer}
.rqp:first-of-type{border-top:0}
.rqp input[type=checkbox]{width:18px;height:18px;flex:none;margin:0}
.rqp .zstate{min-width:118px;text-align:center;display:inline-block;border-radius:8px;padding:5px 12px;font-weight:700}
.rqp .dtwrap{width:auto}.rqp .dtfield{width:120px}
.rqp:has(input[type=checkbox]:not(:checked)) .dtfield{opacity:.45}
.rqwhy{display:flex;flex-wrap:wrap;gap:12px}
.rqwhy label{flex:1 1 220px}
.rqwhy select,.rqwhy input{display:block;margin-top:4px}
.rqfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
button.btn.rqsend{background:#24397a;padding:10px 22px}
.rqhist table td{vertical-align:middle}

.mqhead{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.mqpanel:has(.mqhead:last-child) .mqhead{border-radius:inherit}

/* ---- A person's days, one rounded row a day (the school's drawing): green heading bar, the date in its own box,
   the state as a pill with its symbol. On a phone the Day column folds into the date. ---- */
.irdaywrap{overflow-x:auto}
.irdaylist{width:100%;border-collapse:separate;border-spacing:0 7px;margin-top:-4px}
.irdaylist th{background:#0b6755;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:12px;text-align:center;border:0;border-right:1px solid #ffffff26;white-space:nowrap}
.irdaylist th:first-child{border-radius:12px 0 0 12px}
.irdaylist th:last-child{border-radius:0 12px 12px 0;border-right:0}
.irdaylist td{background:#f5f9fc;border:0;height:56px;padding:0 12px;text-align:center;vertical-align:middle;
  font-size:15.5px;color:#0b1220;font-variant-numeric:tabular-nums}
.irdaylist td:first-child{border-radius:12px 0 0 12px;padding:0;width:1%}
.irdaylist td:last-child{border-radius:0 12px 12px 0}
.irdate>div{display:flex;align-items:center;gap:13px;height:56px;padding:0 18px;border-radius:12px;background:#e2f4ee;
  white-space:nowrap;text-align:left}
.irdic{display:grid;place-items:center;color:#034430;flex:none}
.irdd b{display:block;font-size:19px;line-height:1.05;color:#001a15}
.irdd small{display:block;font-size:12.5px;color:#243b36;margin-top:2px}
.irdd em{display:none;font-style:normal}
.irdaylist td.irdname{text-align:left;font-size:16px;padding-left:20px}
.irdaylist td.irtm{color:#0b1220}
.irdaylist td.irlate{color:#c0392b;font-weight:700}
.irnil{color:#83868b}
.irst{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:7px 20px 7px 9px;font-size:14.5px;
  font-weight:600;line-height:1.2;text-align:left}
.irst svg{flex:none}
.irst.present{background:#d6efcd;color:#07330b}
.irst.leave{background:#e6d3ff;color:#321861}
.irst.sick{background:#ffe5a0;color:#473821}
.irst.other{background:#cfe6f8;color:#0a3f80}
@media(max-width:760px){
  .irdaylist{border-spacing:0 5px}
  .irdaylist .irdname{display:none}
  .irdd em{display:inline}
  .irdaylist th{font-size:10.5px;padding:9px 4px;letter-spacing:.02em}
  .irdaylist th span{display:none}
  .irdaylist td{font-size:13.5px;padding:0 4px;height:52px}
  .irdate>div{gap:8px;padding:0 9px;height:52px}
  .irdic svg{width:20px;height:20px}
  .irdd b{font-size:16px}.irdd small{font-size:10.5px}
  .irst{gap:6px;padding:5px 10px 5px 6px;font-size:12px}
  .irst svg{width:17px;height:17px}
}
@media(max-width:400px){.irdic{display:none}.irst{padding:5px 8px 5px 5px;font-size:11.5px}}
@media print{.irdaylist th{background:#eee;color:#000}.irdaylist td,.irdate>div{background:none}.irdaylist{border-spacing:0}
  .irdaylist td{height:auto;padding:3px 6px;border-bottom:1px solid #ccc;border-radius:0!important}.irdate>div{height:auto;padding:0}}
.irdd small i{font-style:normal}
@media(max-width:760px){
  .irown{padding:14px 10px}
  .irdd small i{display:none}
  .irdaylist td.irstc{padding:0 4px 0 2px}
  .irst{white-space:normal}
  /* the missed punches: one punch a block, so nothing runs off the side of a phone */
  .mqpanel .mqtable,.mqpanel .mqtable tbody{display:block}
  .mqpanel .mqtable tr:first-child{display:none}
  .mqpanel .mqtable tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;border-top:1px solid #eef3f0}
  .mqpanel .mqtable td{display:block;padding:0;border:0}
  .mqpanel .mqtable td:nth-child(1){flex:1 0 100%;font-weight:700;color:#164647}
  .mqpanel .mqtable td:nth-child(4){flex:1 0 100%;margin-top:4px}
}

/* Students: the way to Who can edit, under the class badges */
.sywho{display:flex;justify-content:flex-end;margin:-2px 0 12px}
.sywho a{background:#eceae6;color:#2b2b2b;border-radius:9px;padding:9px 18px;font-size:13px;font-weight:600;text-decoration:none}
.sywho a:hover{background:#e0ddd7}
/* each dashboard group keeps its own colour whichever groups a person is shown (Payroll is not shown to all) */
.dgroup.g-a-blue{color:#2c854c}.dgroup.g-a-teal{color:#06ae95}.dgroup.g-a-purple{color:#8956e7}
.dgroup.g-a-maroon{color:#d94665}.dgroup.g-a-green{color:#309c3c}.dgroup.g-a-orange{color:#dc7e03}
/* an event that is not for this reader: named, not opened */
.foldermain.closed{cursor:default}
.foldermain.closed:hover .foldername{text-decoration:none}

/* ---- School Details: what the Strategic Plan 2025-2030 sets out ---- */
.sdhero{position:relative;flex-wrap:wrap}
.sdplan{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:#ffffff24;color:#fff;
  border:1px solid #ffffff55;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;white-space:nowrap}
.sdvm h2,.sdch h3{display:flex;align-items:center;gap:8px}
.sdvm h2 .ic{color:#1f766d}
.sdvm .sdvision{font-size:15px;line-height:1.65;color:#1c2a23}
.sdvals{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.sdval{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border-radius:12px;background:#f1faf5;
  border:1px solid #dcefe4;color:#17633a}
.sdval b{font-size:14px;color:#0f3d24}
.sdcaps{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sdcaps li{position:relative;padding-left:26px;font-size:13.5px;color:#28323d}
.sdcaps li:before{content:"";position:absolute;left:2px;top:3px;width:14px;height:14px;border-radius:50%;background:#2f9a55}
.sdcaps li:after{content:"";position:absolute;left:6.5px;top:6px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg)}
.sdprin{display:flex;flex-direction:column;align-items:center;gap:2px;margin:4px auto 16px;padding:12px 26px;width:max-content;
  max-width:100%;border-radius:12px;background:linear-gradient(115deg,#0b2f6b,#17529c);color:#fff}
.sdprin b{font-size:17px}.sdprin .sdrole{color:#cfe0f7}
.sdrole{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7a8d}
.sdorg{display:grid;grid-template-columns:minmax(200px,1fr) 3fr;gap:18px;align-items:start}
.sdorg h3{margin:0 0 8px;font-size:13px;color:#12325c;border-bottom:2px solid #e3e9f3;padding-bottom:6px}
.sdleads{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sdlead{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border:1px solid #e3e9f3;border-radius:11px;background:#fafcfe}
.sdlead b{font-size:14px;color:#12325c}
.sdlead .sdwhat{font-size:12.5px;color:#28323d}
.sdlead .sddept{font-size:12px;color:#1f766d;font-weight:600}
.sdlead details,.sdteam{margin-top:6px;font-size:12px}
.sdlead summary,.sdteam summary{cursor:pointer;color:#5a6b80}
.sdlead ul,.sdteam ul{margin:6px 0 0;padding-left:17px;color:#3a4653;line-height:1.55}
.sdkras{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.sdkra{border-radius:13px;border:1px solid #e7e5e0;overflow:hidden;background:#fff}
.sdkrah{display:flex;align-items:center;gap:10px;padding:11px 13px;color:#fff}
.sdkrah span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#ffffff2e;flex:none}
.sdkrah small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;opacity:.9}
.sdkrah b{display:block;font-size:14px;line-height:1.25}
.sdkra ol{margin:0;padding:11px 13px 13px 32px;font-size:13px;line-height:1.7;color:#28323d}
.sdkra.k1 .sdkrah{background:#c22727}.sdkra.k2 .sdkrah{background:#5a7a2e}
.sdkra.k3 .sdkrah{background:#6f3fa8}.sdkra.k4 .sdkrah{background:#9a3535}
.sdobj{border:1px solid #e7e5e0;border-radius:11px;margin-bottom:9px;background:#fff}
.sdobj summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:13.5px;color:#12325c}
.sdobj summary span{font-weight:500;font-size:12px;color:#8a95a2;margin-left:8px}
.sdob{display:flex;gap:12px;padding:10px 14px;border-top:1px solid #f0eeea}
.sdobn{flex:none;align-self:flex-start;background:#e9f1fb;color:#17529c;font-weight:700;font-size:11.5px;border-radius:7px;padding:3px 8px}
.sdob b{font-size:13.5px;color:#1d2a3a}
.sdob ul{margin:5px 0 0;padding-left:18px;font-size:12.5px;color:#4a5562;line-height:1.6}
.sdtarget{margin-top:14px}
.sdtarget h3{margin:0 0 8px;font-size:13.5px;color:#12325c}
.sdchs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.sdch{border:1px solid #e7e5e0;border-radius:12px;padding:13px 15px;background:#fbfcfd}
.sdch h3{margin:0 0 7px;font-size:14px;color:#12325c}
.sdch h3 .ic{color:#1f766d}
.sdch ul{margin:0;padding-left:18px;font-size:13px;line-height:1.65;color:#3a4653}
.sdmoe p{margin:0 0 8px;font-size:13.5px;line-height:1.65;color:#3a4653}
.sdpage>section.card{margin-bottom:16px}
@media(max-width:860px){.sdorg{grid-template-columns:1fr}.sdplan{margin-left:0}}

/* ---- Payroll > Overtime: the Overtime sheet drawn as Google Sheets shows it. Every size inside is a multiple of
   --u, one pixel of the sheet (--w is how many of them wide it is), so the whole sheet scales as one drawing:
   a person's report (otfit) is never wider than the screen, and on paper any sheet is as wide as the paper. ---- */
.otwrap{container-type:inline-size}
.otgrid{--u:1px;table-layout:fixed;border-collapse:separate;border-spacing:0;background:#fff;color:#000;
  width:calc(var(--u)*var(--w));font:400 calc(var(--u)*13.333)/1.2 Arial,"Segoe UI",sans-serif;
  border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.otgrid td{padding:calc(var(--u)*1) calc(var(--u)*3);border:0 solid #e2e2e2;border-right-width:1px;border-bottom-width:1px;
  background:#fff;white-space:nowrap;overflow:hidden;vertical-align:bottom;line-height:1.2}
.otgrid td.otw{white-space:pre-wrap}
.otgrid td.ofu{font-family:"Unica One","Arial Narrow",Arial,sans-serif}
.otgrid td.ofm{font-family:"M PLUS Rounded 1c",Arial,sans-serif}
.otgrid td.ofl{font-family:Lexend,Arial,sans-serif}
.otgrid td.oft{font-family:"Trebuchet MS",Arial,sans-serif}
.otwrap.otfitw{overflow:hidden;max-height:none}
.otgrid.otfit{--u:min(1px,calc((100cqw - 1px)/var(--w)));border-collapse:collapse}
/* (a report's lines are the sheet's own and no others: with the lines of neighbouring cells drawn as one, a
   faint line of the grid would otherwise take the place of the sheet's line below or beside it) */
.otgrid.otfit{border-style:none}
.otgrid.otfit td{border-style:none}
.otgrid td.otgap{border:0 none !important;padding:0;height:calc(var(--u)*2);background:none}
.otgrid td.otfc{z-index:2}.otgrid td.otfr{z-index:3}.otgrid td.otfc.otfr{z-index:4}
.otgrid td.otfcl{box-shadow:3px 0 0 #b9b9b9}
.otgrid td.otfrl{box-shadow:0 3px 0 #b9b9b9}
.otgrid td.otfcl.otfrl{box-shadow:3px 0 0 #b9b9b9,0 3px 0 #b9b9b9}
.otwho{display:flex;align-items:center;gap:calc(var(--u)*8);text-align:left;white-space:nowrap;font-size:calc(var(--u)*12.67)}
.otwho a{color:#203247;font-weight:600;text-decoration:none}
.otwho a:hover{text-decoration:underline}
.otwho .asface{width:calc(var(--u)*22);height:calc(var(--u)*22);font-size:calc(var(--u)*9)}
.otlogo{display:block;margin:calc(var(--u)*2) auto 0;max-height:calc(var(--u)*46);max-width:90%}
.otlogot{display:block;text-align:center;font:700 calc(var(--u)*7.3)/1.3 Arial,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#17633a;white-space:nowrap}
/* the Details of Work of each overtime: the person's own to write on My Overtime */
.otgrid td.otdcell{white-space:normal;vertical-align:middle;padding:0}
.otdet{min-height:calc(var(--u)*19);padding:calc(var(--u)*3) calc(var(--u)*4);font-size:calc(var(--u)*12);line-height:1.15;
  white-space:normal;overflow-wrap:anywhere;text-align:start;outline:0}
.otdet.can{cursor:text;background:#fffdf0}
.otdet.can:hover{background:#fff6cf}
.otdet.can:focus{background:#fff;box-shadow:inset 0 0 0 2px #3766f9}
.otdet.can:empty::before{content:"Write the details of the work";color:#9aa3ad}
.otdet.saving{opacity:.55}
.otdet.bad{box-shadow:inset 0 0 0 2px #c0392b}
.otdlg{position:fixed;inset:0;z-index:300;background:rgba(15,25,45,.45);display:flex;align-items:flex-end;justify-content:center}
.otdlg>div{background:#fff;width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:16px 16px 20px;box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.otdlg h3{margin:0 0 2px;font-size:16px;color:#192a55}
.otdlg p{margin:0 0 10px;font-size:13px;color:#5b6675}
.otdlg textarea{width:100%;min-height:96px;font-family:inherit;font-size:16px;line-height:1.4;padding:10px;border:1px solid #c9ccd2;border-radius:10px;box-sizing:border-box;resize:vertical}
.otdlg .row{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
@media(min-width:700px){.otdlg{align-items:center}.otdlg>div{border-radius:16px}}

/* ---- Printing from Payroll: the page is the paper - no menu, no Payroll heading, no tabs - and the Overtime sheet
   prints as the sheet alone: about a page wide it fills the paper's width, far wider it is shrunk to fit. No
   paper size is set anywhere here, so the print window keeps its own Portrait / Landscape choice. ---- */
@media print{
  body:has(.payhead) .content{display:block}
  body:has(.payhead) .app main{max-width:none;width:auto;padding:0;margin:0}
  .payhead,.paytabs,.paywho{display:none !important}
  body:has(.payhead) .panel{border:0;box-shadow:none;padding:0;margin:0 0 6mm;border-radius:0}
  .otpanel>h2,.otpanel>.sub,.otpanel .asbar{display:none !important}
}

/* ---- Payroll > Overtime > Departments: the two pay frameworks side by side ---- */
.dpcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:16px;align-items:start}
.dpcard{padding:0;overflow:hidden}
.dphead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;color:#fff}
.dphead h2{margin:0;font-size:17px;color:#fff}
.dphead p{margin:2px 0 0;font-size:12.5px;opacity:.9}
.dptotal{text-align:right}
.dptotal span{display:block;font-size:11px;opacity:.9}
.dptotal b{font-size:16px;font-variant-numeric:tabular-nums}
.dp-new .dphead{background:linear-gradient(100deg,#4b1230,#6a1d47)}
.dp-old .dphead{background:linear-gradient(100deg,#1f5c1a,#38761d)}
.dptable{margin:0}
.dptable td{vertical-align:middle;padding:7px 10px}
.dptable td.dpnet{text-align:right;font-variant-numeric:tabular-nums}
.dptable form{margin:0}
.dptable .sgwho b{font-size:13px}
@media(max-width:560px){.dpcols{grid-template-columns:1fr}}
/* ---- The Overtime sheet on paper: the same drawing at the paper's width (and, for a report, no wider than lets
   one of its pages fit the paper's height), each part of a report on a page of its own, only the sheet's own
   lines drawn - and drawn over the fills, so no cell's colour can hide its neighbour's line. ---- */
@media print{
  body:has(.otpanel) .app main{max-width:none;width:auto;padding:0;margin:0}
  .panel.otpanel{border:0;box-shadow:none;padding:0;margin:0;border-radius:0;background:none}
  .otpanel .otwrap{border:0;border-radius:0;overflow:visible !important;max-height:none;margin:0 auto;
    max-width:calc(96vh*var(--w)/var(--hs))}
  .otgrid,.otgrid.otfit{--u:calc(100cqw/var(--w));border-collapse:collapse;border-style:none}
  .otgrid tr{break-inside:avoid}
  .otgrid tr.otbreak{break-before:page}
  .otgrid td{position:static !important;box-shadow:none !important;border-style:none;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .otdet.can{background:none !important;box-shadow:none !important}
  .otdet.can:empty::before{content:none}
  .otpanel .xscroll,.otdlg{display:none !important}
}
@media(max-width:700px){.panel.otpanel{padding-left:8px;padding-right:8px}.otpanel>h2,.otpanel>.sub,.otpanel>.asbar{margin-left:6px;margin-right:6px}}

/* ---- Fonts: the library, each font drawn in itself ---- */
.fsay{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-top:10px}
.fsay label{flex:1 1 320px;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#5b6675}
.fsay input{font-family:"EG Thaana","Segoe UI",sans-serif}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:14px}
.fcard{background:#fff;border:1px solid #d9dde3;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.fcard.on{border-color:#2f7d4e;box-shadow:0 0 0 2px #cfe8d7}
.fname{display:flex;flex-direction:column;gap:2px}
.fname b{font-size:13.5px;color:#192a55}
.fname code{font-size:11px;color:#6b7684;word-break:break-all}
.fsample{font-size:28px;line-height:1.5;min-height:48px;color:#111;overflow-wrap:anywhere}
.fsample.dv{direction:rtl;text-align:right}
.fpick{min-height:24px}.fpick form{margin:0}
.fcur{font-size:12px;font-weight:700;color:#2f7d4e}
/* ---- On a phone or a small tablet the names move with the rest of a wide sheet: a column of names held in
   place takes half the screen and hides the days behind it (asked for by the school). ---- */
@media(max-width:900px){
  .astable td.asname{position:static;min-width:150px;box-shadow:none}
  .otgrid td.otfc{position:static !important;left:auto !important}
  .otgrid td.otfcl{box-shadow:none !important}
}
/* ---- A wide sheet on a phone: a bar of big buttons to move and size it, and a window of its own to move in ---- */
.sheetbar{display:none}
@media(max-width:900px){
  .sheetbar{display:flex;gap:6px;align-items:center;position:sticky;top:0;z-index:30;background:#fff;padding:6px 4px;border:1px solid #d9dde3;border-radius:10px 10px 0 0}
  .sheetbar span{flex:0 0 4px}
  .sheetbar{flex-wrap:nowrap}
  .sheetbar button{flex:1 1 0;min-width:0;height:40px;border:1px solid #cfd6e4;border-radius:10px;background:#f4f6fb;color:#192a55;font-size:15px;font-weight:700;padding:0 10px}
  .sheetbar button:active{background:#192a55;color:#fff}
  .slistwrap.sheetwrap{max-height:72vh;overflow:auto;overscroll-behavior:contain;touch-action:none;border-radius:0 0 8px 8px}
}
@media print{.sheetbar{display:none !important}}
.fdl{align-self:flex-start;text-decoration:none}
/* the summary of the year under the Academic Calendar, on a phone: the whole table at the screen's width, its
   headings wrapping, sizes following the screen (pinch to read closer) */
@media(max-width:760px){
  .calsum{overflow:visible}
  .sheettab.ssummary{width:100%;table-layout:auto;font-size:2vw;line-height:1.2}
  .sheettab.ssummary td{font-size:2vw;padding:.9vw .5vw;white-space:normal;overflow-wrap:normal;word-break:normal}
  .sheettab.stermbox{font-size:3vw}
}

/* aSc: a free teacher who teaches the class is green in the lesson's period; once chosen, red. Both carry a + */
.sbb td.lp.own,.sbb tr.sbt:hover td.lp.own{background:#b5e61d}
.sbb tr.chosen td.lp{background:#f51e14}
.sbb td.lp{position:relative;font-size:10px;line-height:1;color:#333;text-align:right;vertical-align:top;padding:1px 2px}
.sbb tr.cls td.gone{background:#f51e14}
.sbb td{font-size:10px;line-height:1;color:#333;text-align:right;vertical-align:top;padding:1px 2px}

/* the JPG: soft grey rounded boxes, as on screen - the black lines looked harsh once posted to Viber */
.jpgsheet .repbox{border:1.5px solid #c8ccd2 !important;border-radius:10px !important;padding:10px 18px !important}
.jpgsheet .repbox h3{border:2px solid #b9bec6 !important;border-radius:8px !important;font-size:22px !important;
  padding:4px 12px !important;margin:0 0 8px !important;background:#fff !important}
.sbb td.busy.lp.own,.sbb tr.chosen td.lp.own{background:#b5e61d}
/* every page uses the full width of the screen - no empty band on the right of a wide monitor */
.app main{max-width:none}

/* ==== Dashboard, the new look (Oct 2026): every card tinted in its own colour, glossy symbols,
   group headers in a soft band with a decoration, links as white tiles with a coloured symbol and arrow ==== */
.dhero{position:relative;overflow:hidden;border-radius:22px;padding:30px 34px;border:1px solid #cfeedd;
  background:radial-gradient(120% 140% at 0% 0%,#d9f5e4 0%,transparent 55%),linear-gradient(100deg,#e9f8ef 0%,#dcf5e6 60%,#bfeccf 100%)}
.dhero:before,.dhero:after{content:"";position:absolute;pointer-events:none;border-radius:0 100% 0 100%;
  background:linear-gradient(140deg,#7fd6a0,#2fb36a);opacity:.35}
.dhero:before{width:90px;height:150px;left:-30px;top:-40px;transform:rotate(-25deg)}
.dhero:after{width:120px;height:210px;right:-20px;bottom:-60px;transform:rotate(30deg);opacity:.45}
.dhero>*{position:relative;z-index:1}
.dhero h1,.dwho h1{font-size:34px}
.dface{width:92px;height:92px;border:4px solid #fff}
.hdate{background:rgba(255,255,255,.88);border-radius:16px;padding:16px 26px;box-shadow:0 6px 18px rgba(15,63,33,.08)}
.hdate b{font-size:20px}

.actions .acard{border-radius:18px;background:linear-gradient(135deg,#fff 0%,var(--tc) 160%);border-color:color-mix(in srgb,var(--tc) 70%,#e2e8ef)}
.actions .acard .ic{border-radius:18px;box-shadow:0 8px 18px var(--ts),inset 0 1px 0 rgba(255,255,255,.45)}
.actions .acard:after{background:color-mix(in srgb,var(--tc) 80%,#fff)}

.dstat{border-radius:18px;border:1px solid var(--sb,#e2eee6);background:linear-gradient(135deg,#fff 0%,var(--sc,#f3faf6) 150%)}
.dstat .dsicon{width:66px;height:66px;border-radius:16px}
.dstat .dsicon .ic{width:30px;height:30px}
.dstat b{font-size:28px}
.dstat:nth-child(1){--sc:#e3f6ea;--sb:#d6efdf}.dstat:nth-child(2){--sc:#dff5f3;--sb:#d2ece9}
.dstat:nth-child(3){--sc:#efe9fd;--sb:#e4dcfa}.dstat:nth-child(4){--sc:#fef1d8;--sb:#f7e4bd}
.dstat:nth-child(5){--sc:#fde8ec;--sb:#f8d7de}

.dgroup{--g:#2563eb;--g1:#5b8cff;--g2:#1d4ed8;--gt:#e7efff;--gb:#d6e3fb;
  border-radius:20px;border:1px solid var(--gb);background:#fff;box-shadow:0 2px 10px rgba(20,30,50,.05)}
.dgroup.g-a-blue{--g:#2563eb;--g1:#4f8bff;--g2:#1747c9;--gt:#e6efff;--gb:#d3e1fb}
.dgroup.g-a-teal{--g:#0d9488;--g1:#2dd4bf;--g2:#0b7c70;--gt:#e0f6f2;--gb:#cdece6}
.dgroup.g-a-purple{--g:#7c3aed;--g1:#a678ff;--g2:#6326cf;--gt:#efe8fd;--gb:#e1d6fa}
.dgroup.g-a-maroon{--g:#e11d48;--g1:#fb6b8a;--g2:#c0153b;--gt:#fde7ec;--gb:#f8d3dc}
.dgroup.g-a-green{--g:#16a34a;--g1:#4cc97a;--g2:#0f7d37;--gt:#e3f6e9;--gb:#d0ecd9}
.dgroup.g-a-orange{--g:#f59e0b;--g1:#fbbf3c;--g2:#d97706;--gt:#fef3dc;--gb:#f7e3bb}
.dgroup{color:var(--g)!important}
.dgroup .dghead{position:relative;overflow:hidden;margin:-1px -1px 0;padding:18px 20px;border-radius:20px 20px 0 0;
  background:linear-gradient(100deg,var(--gt) 0%,color-mix(in srgb,var(--gt) 40%,#fff) 100%)}
.dgroup .dghead:after{content:"";position:absolute;right:18px;top:50%;width:84px;height:84px;transform:translateY(-50%) rotate(12deg);
  border-radius:22px;background:linear-gradient(150deg,var(--g1),var(--g2));opacity:.22;box-shadow:-26px 18px 0 -10px color-mix(in srgb,var(--g1) 60%,#fff)}
.dgroup .dghead>*{position:relative;z-index:1}
.dgroup .dgicon{width:62px;height:62px;border-radius:16px;background:linear-gradient(160deg,var(--g1),var(--g2))!important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--g) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.dgroup .dghead h2{font-size:22px}
.dgroup .dlinks{padding:12px 12px 14px;gap:10px}
.dgroup .dlink{background:#fff;border:1px solid #e8ecf1;border-radius:14px;padding:10px 12px;gap:12px;min-height:56px;
  box-shadow:0 1px 3px rgba(20,30,50,.04)}
.dgroup .dlink:hover{background:color-mix(in srgb,var(--gt) 45%,#fff);border-color:var(--gb)}
.dgroup .dlink .ic{width:38px;height:38px;padding:8px;box-sizing:border-box;border-radius:11px;flex:none;
  background:var(--gt);color:var(--g)}
.dgroup .dlink:not(.off):after{width:28px;height:28px;margin:0 0 0 auto;border:0;transform:none;border-radius:50%;
  background:var(--gt) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 7l5 5-5 5' fill='none' stroke='%23334155' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat}
.dgroup .dlink.off{background:#fafbfc}
.dgroup .dlink.off .ic{background:#f0f2f5;color:#9aa3ad}
.dgroup .dlink.off:after{padding:4px 10px;border-radius:8px;background:#eef1f4;font-size:11px}
.dgroup{padding:0!important}
.dgroup:before{display:none!important}
.dgroup .dghead{margin:0;border-bottom:1px solid var(--gb)}
.dgroup .dlinks{padding:14px}
.dgroup .dlink span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.dgroup .dlink{padding:9px 10px}
.dgroup .dlinks{grid-template-columns:repeat(2,minmax(0,1fr))}
.dgroup .dlink{min-width:0}
.dgroup .dlink span{white-space:normal;line-height:1.25;flex:1;min-width:0}
.dgroup .dlink span{overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;hyphens:none}
.dgroup .dlink .ic{width:34px;height:34px;padding:7px}
.dgroup .dlink{gap:10px}

/* ==== Report Cards: the workbooks as read from Drive ==== */
.rcstate{font-size:13px;color:#5b6b7a;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rcinl{display:inline}.rcbad{color:#c0392b;font-weight:600}
.rcset{margin-top:6px}.rcset summary{cursor:pointer;font-weight:600;color:#1d4ed8;font-size:13px}
.rcset form{display:grid;gap:8px;max-width:640px;margin-top:8px}.rcset input{width:100%}
.rctotal{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}.rctotal b{font-size:30px;color:#0f3d24}.rctotal span{color:#5b6b7a}
.rctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.rctile{position:relative;display:block;background:linear-gradient(135deg,#fff,#f6f9fd);border:1px solid #e3e9f1;border-radius:16px;
  padding:14px 16px;color:#1d2a3a;text-decoration:none;box-shadow:0 1px 4px rgba(20,30,50,.05);transition:box-shadow .12s,transform .12s}
.rctile:hover{box-shadow:0 8px 20px rgba(20,30,50,.12);transform:translateY(-1px)}
.rcth{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.rcth b{font-size:17px}.rcth span{font-size:12px;color:#6b7a8d}
.rcrow{display:flex;justify-content:space-between;font-size:12.5px;color:#4b5563;margin-top:8px}.rcrow em{font-style:normal;font-weight:700;color:#111}
.rcsm{display:block;font-size:11.5px;color:#6b7a8d;margin-top:3px}
.rcbar{display:block;height:8px;border-radius:99px;background:#eef1f5;overflow:hidden;margin-top:4px}
.rcbar.sm{height:6px;width:110px;display:inline-block;vertical-align:middle;margin:0 6px 0 0}
.rcbar i{display:block;height:100%;border-radius:99px}
.rcg{background:#16a34a}.rca{background:#f59e0b}.rcr{background:#e5484d}
.rcdist{display:flex;height:8px;border-radius:99px;overflow:hidden;background:#eef1f5;margin-top:4px;min-width:90px}
.rcdist i{display:block;height:100%}.rcdist.none{background:none;height:auto;font-size:11.5px;color:#9aa3ad;display:block}
.rcfa{background:#16a34a}.rcma{background:#60a5fa}.rcac{background:#f59e0b}
.rclegend{display:block;font-size:10.5px;color:#6b7a8d;margin-top:2px}
.rcwarn{position:absolute;top:12px;right:52px;font-size:10.5px;font-weight:700;color:#b45309;background:#fef3c7;border-radius:99px;padding:1px 8px}
.rcmines{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rcmine{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 14px;border:1px solid #f3d0d0;background:#fff8f8;border-radius:12px;
  color:#1d2a3a;text-decoration:none}.rcmine.done{border-color:#cdeccf;background:#f5fcf6}
.rcmine b{font-size:14px}.rcmine span{grid-column:1;font-size:12px;color:#6b7a8d}.rcmine .rcbar{grid-column:1}.rcmine em{grid-row:1/4;grid-column:2;align-self:center;font-style:normal;font-weight:800;font-size:18px}
.rcminep h2 small{font-size:13px;color:#6b7a8d;font-weight:500;margin-left:8px}
.rcsens{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.rcsen{display:block;padding:9px 12px;border:1px solid #e3e9f1;border-radius:10px;color:#1d2a3a;text-decoration:none}
.rcsen span{display:block;font-size:12px;color:#6b7a8d}
.rcprob ul{margin:0;padding-left:18px}.rcprob li{margin:4px 0}.rcprob li ul li{font-size:13px;color:#7c4a03}
.rcfigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.rcfigs div{background:#f6f9fd;border:1px solid #e3e9f1;border-radius:12px;padding:10px 14px}
.rcfigs b{display:block;font-size:22px}.rcfigs span{font-size:12px;color:#6b7a8d}
.rctablewrap{overflow-x:auto}.rctable{width:100%;border-collapse:collapse;font-size:13px}
.rctable th{text-align:left;font-size:12px;color:#5b6b7a;border-bottom:1px solid #e3e9f1;padding:6px 8px;white-space:nowrap}
.rctable td{border-bottom:1px solid #f0f2f5;padding:7px 8px;vertical-align:middle}.rctable td small{font-size:11.5px;color:#5b6b7a}
.rcwho{max-width:240px;font-size:12.5px}
.rcwks{display:flex;gap:6px;align-items:flex-end;overflow-x:auto;padding-bottom:4px}
.rcwk{display:flex;flex-direction:column;align-items:center;width:52px;flex:none}
.rcwk i{display:block;width:26px;border-radius:6px 6px 0 0;min-height:3px}
.rcwk{height:150px;justify-content:flex-end}.rcwk span{font-size:10.5px;color:#6b7a8d;margin-top:4px;white-space:nowrap}.rcwk em{font-style:normal;font-size:11px;font-weight:700}
.rcabs{columns:2;font-size:13px}.rcabs b{color:#b42318;font-weight:600}
@media(max-width:700px){.rcabs{columns:1}.rcwarn{right:14px;top:auto;bottom:10px}}
.rcwarn{position:static!important;display:inline-block;margin-top:10px}
.rcpdlink{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fffbeb;border-color:#fde68a}
.rcpdlink span{color:#6b5a1d;font-size:13px}
.rcpd td{font-size:12.5px}.rcold{color:#b42318;text-decoration:line-through;text-decoration-color:#f3a3a3}.rcnew{color:#067647;font-weight:600}

/* ==== Report-card books (/rcb): the class's sheets on the left, the sheet entered in place ==== */
.rbook{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.rbnav{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;background:linear-gradient(180deg,#1b2a55,#22336b);
  border-radius:16px;padding:12px 10px;color:#dfe6f7}
.rbhead{padding:6px 8px 12px;border-bottom:1px solid #ffffff22;margin-bottom:6px}.rbhead b{display:block;font-size:16px;color:#fff}
.rbhead small{color:#9fb0d6;font-size:11.5px}
.rbns{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8ea0c8;margin:12px 8px 4px}
.rbn{display:block;padding:7px 10px;border-radius:9px;color:#dfe6f7;text-decoration:none;font-size:13.5px}
.rbn:hover{background:#ffffff14}.rbn.on{background:#3b5bdb;color:#fff;font-weight:600}.rbn.in{padding-left:26px;font-size:12.5px}
.rbsub summary{list-style:none;cursor:pointer;padding:7px 10px;border-radius:9px;font-size:13.5px}
.rbsub summary::-webkit-details-marker{display:none}.rbsub summary:hover{background:#ffffff14}
.rbsub summary.on{color:#fff;font-weight:600}
.rbmain{min-width:0}
.rbtop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e3e9f1;
  border-radius:14px;padding:12px 16px;margin-bottom:12px}
.rbtop h2{margin:0;font-size:21px}.rbtop small{color:#6b7a8d}
.rbtools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rbtools select{width:auto}
.rbterms{display:inline-flex;background:#eef2fb;border-radius:99px;padding:3px}
a.rbt{padding:5px 12px;border-radius:99px;color:#33415c;text-decoration:none;font-weight:600;font-size:12.5px}
a.rbt.on{background:#3b5bdb;color:#fff}
.rbcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:12px}
.rbcards div{background:linear-gradient(135deg,#fff,#eef3ff);border:1px solid #dfe6f5;border-radius:14px;padding:14px 16px}
.rbcards b{display:block;font-size:26px;color:#1b2a55}.rbcards span{font-size:12px;color:#6b7a8d}
.rbpanel{background:#fff;border:1px solid #e3e9f1;border-radius:14px;padding:14px 16px;margin-bottom:12px}
.rbpanel h3{margin:0 0 10px;font-size:16px}
.rbqs{display:flex;gap:8px;flex-wrap:wrap}.rbq{padding:8px 14px;border:1px solid #e3e9f1;border-radius:10px;color:#1d2a3a;text-decoration:none;background:#f7f9fc}
.rbq:hover{background:#eef3ff}
.rbinfo{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rbinfo span{display:block;font-size:11.5px;color:#6b7a8d;text-transform:uppercase;letter-spacing:.04em}
.rbwrap{overflow:auto;max-height:calc(100vh - 210px);background:#fff;border:1px solid #e3e9f1;border-radius:14px}
table.rbt{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.rbt th{position:sticky;top:0;z-index:2;background:#f3f6fb;color:#33415c;font-size:11.5px;font-weight:700;padding:7px 6px;
  border-bottom:1px solid #dde4ef;text-align:center;white-space:nowrap}
table.rbt td{padding:4px 6px;border-bottom:1px solid #eef1f5;text-align:center;vertical-align:middle}
table.rbt td.rbname{text-align:left;white-space:nowrap;font-weight:600;position:sticky;left:0;background:#fff;z-index:1}
table.rbt th small{display:block;font-weight:500;color:#7b879a;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.rbgrid td{min-width:58px}
.rbs{width:auto;min-width:54px;padding:3px 4px;border-radius:7px;font-size:12px;border:1px solid #d7deea;background:#fff}
.rbs.fa{background:#dcfce7;border-color:#86efac}.rbs.ma{background:#fef9c3;border-color:#fde047}.rbs.ac{background:#ffedd5;border-color:#fdba74}
.rbs.pr{background:#dcfce7}.rbs.lt{background:#fef9c3}.rbs.ab{background:#fee2e2}.rbs.ho{background:#e5e7eb}
.rbv.fa{color:#15803d;font-weight:700}.rbv.ma{color:#a16207;font-weight:700}.rbv.ac{color:#c2410c;font-weight:700}
.rbi{width:100%;min-width:60px;padding:4px 6px;font-size:12.5px;border:1px solid #d7deea;border-radius:7px}
textarea.rbi{min-width:220px;min-height:46px}.rbn5{width:64px!important;min-width:0!important}
.rbok1{box-shadow:0 0 0 2px #22c55e;transition:box-shadow .9s}.rbbad1{box-shadow:0 0 0 2px #ef4444}
.rbcnt{font-weight:700}.rbgr{font-weight:800;color:#3b5bdb}
.rbrot2{vertical-align:bottom!important;height:150px}
.rbrot2 span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:normal;max-height:140px;display:inline-block;font-size:11px;font-weight:600;text-align:left}
.rbrot{vertical-align:bottom!important;height:150px}.rbrot span{writing-mode:vertical-rl;max-height:140px;font-size:11px;display:inline-block}
.rbterm{display:block;margin:4px auto 0;font-size:10.5px;padding:1px 2px;width:auto}
th.rbo{min-width:70px}th.rbo b{display:block}
.rbtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.rbtab{padding:6px 12px;border-radius:99px;background:#e9eefb;color:#1b2a55;text-decoration:none;font-size:12.5px;font-weight:600}
.rbtab.on{background:#1b2a55;color:#fff}
.rbweek{display:flex;gap:6px;align-items:center;margin-bottom:8px}.rbweek select{width:auto}
.rbpray td.rbpr{font-size:12px;color:#3b5bdb;text-align:left}.rbpray tr.rbfirst td{border-top:2px solid #dbe3f3}
.rbfa{background:#f0fdf4}.rbma{background:#fefce8}.rbac{background:#fff7ed}
.rbrisk{background:#fee2e2;color:#b91c1c;border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:700}
.rbok{background:#dcfce7;color:#15803d;border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:700}
.rblow{color:#b91c1c;font-weight:700}.rbsm{font-size:11.5px;max-width:160px}
.rbpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.rbpl{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:0 10px;align-items:center;padding:10px 12px;
  border:1px solid #e3e9f1;border-radius:12px;background:#fff;color:#1d2a3a;text-decoration:none}
.rbpl:hover{background:#eef3ff}
.rbav{grid-row:1/3;width:34px;height:34px;border-radius:50%;background:#3b5bdb;color:#fff;display:grid;place-items:center;font-weight:700}
.rbpl small{color:#6b7a8d;font-size:11.5px}.rbpl i{grid-row:1/3;grid-column:3;font-style:normal}
.rbks h2 small{font-size:13px;font-weight:500;color:#6b7a8d;margin-left:8px}
.rbkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.rbk{display:block;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#1b2a55,#3b5bdb);color:#fff;text-decoration:none}
.rbk b{display:block;font-size:16px}.rbk span{font-size:12px;opacity:.85}.rbk small{display:block;font-size:11.5px;opacity:.75;margin-top:4px}
.rbtot{margin-top:12px}.rbtot summary{cursor:pointer;font-weight:600;color:#1d4ed8}
@media(max-width:900px){.rbook{grid-template-columns:1fr}.rbnav{position:static;max-height:none}}
@media print{.rbnav,.rbtools,.rbweek,.rbtabs,.hint{display:none!important}.rbook{display:block}.rbwrap{max-height:none;overflow:visible;border:0}}

/* ==== Report-card books, the green look (Oct 2026): a white class-workspace menu with line icons, a large header,
   tinted figure cards and a white table card with pill selects. Overrides the first look above. ==== */
.rbook{grid-template-columns:220px minmax(0,1fr);gap:20px;--g:#15803d;--g2:#166534;--gt:#e7f6ec;--gb:#cfead8}
.rbnav{background:#fff;color:#1f2937;border:1px solid #e5ece8;border-radius:16px;padding:14px 10px;box-shadow:0 1px 4px rgba(15,40,25,.05)}
.rbnt{font-weight:800;font-size:15px;color:#0f2a1c;padding:4px 10px 10px}
.rbns{color:#6b7c72;font-weight:700;font-size:11px;letter-spacing:.08em;margin:16px 10px 6px}
.rbn{display:flex;align-items:center;gap:11px;color:#1f2937;padding:8px 10px;border-radius:10px;font-size:14px}
.rbn svg{flex:none;color:#4b5b52}.rbn:hover{background:#f2f8f4}
.rbn.on{background:var(--gt);color:var(--g2);font-weight:700}.rbn.on svg{color:var(--g)}
.rbn.in{padding-left:34px;font-size:13px}.rbn em{font-style:normal;color:var(--g);font-size:11px;margin-left:4px}
.rbsub summary.rbn{display:flex}.rbsub summary.rbn:after{content:"";margin-left:auto;width:6px;height:6px;border-right:1.6px solid #9aa7a0;
  border-bottom:1.6px solid #9aa7a0;transform:rotate(-45deg);transition:transform .15s}
.rbsub[open] summary.rbn:after{transform:rotate(45deg)}
.rbtop{background:none;border:0;padding:0 0 4px;align-items:flex-start}
.rbtop h1{margin:0;font:800 30px/1.15 inherit;color:#0f2a1c}.rbtop p{margin:4px 0 0;color:#5b6b62;font-size:15px}
.rbtools{gap:10px}
.rbcls{border:1px solid #dfe7e2;border-radius:12px;padding:9px 34px 9px 14px;background:#fff;font-weight:600;color:#1f2937}
.rbterms{background:#eef6f1;border:1px solid #dfece4;border-radius:12px;padding:3px;gap:2px}
a.rbt{border-radius:9px;padding:8px 20px;color:#1f3b2c;font-size:14px}
a.rbt.on{background:var(--g);color:#fff}
.rbprev{display:inline-flex;align-items:center;gap:8px;border:1px solid #dfe7e2;background:#fff;border-radius:12px;padding:9px 16px;
  color:#1f2937;text-decoration:none;font-weight:600;font-size:14px}.rbprev:hover{background:#f2f8f4}
.rbstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:12px 0 16px}
.rbst{display:flex;align-items:center;gap:16px;border-radius:16px;padding:16px 18px;border:1px solid}
.rbst i{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none}
.rbst b{display:block;font-size:28px;line-height:1.05;color:#0f2a1c}.rbst span{display:block;font-weight:700;font-size:14px}
.rbst small{color:#6b7c72;font-size:12.5px}
.rbst.g{background:linear-gradient(135deg,#f4fbf6,#eaf6ee);border-color:#d9eedf}.rbst.g i{background:#d7f0df;color:#15803d}
.rbst.t{background:linear-gradient(135deg,#effaf7,#e3f5f0);border-color:#d2ece5}.rbst.t i{background:#1e9f84;color:#fff}
.rbst.r{background:linear-gradient(135deg,#fff5f5,#fdecec);border-color:#f7d9d9}.rbst.r i{background:#fbd5d5;color:#c0392b}
.rbst.y{background:linear-gradient(135deg,#fffaf0,#fff3dc);border-color:#f6e6c2}.rbst.y i{background:#fde7b0;color:#b7791f}
.rbcard{background:#fff;border:1px solid #e5ece8;border-radius:18px;padding:18px 18px 12px;box-shadow:0 1px 4px rgba(15,40,25,.05)}
.rbcardh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rbcardh h3{margin:0;font-size:21px;color:#0f2a1c}.rbcardh p{margin:2px 0 0;color:#6b7c72;font-size:14px}
.rbcardh>div:first-child{margin-right:auto}
.rbwk{display:flex;align-items:center;gap:6px}.rbwk select{border:1px solid #dfe7e2;border-radius:10px;padding:8px 30px 8px 12px;width:auto;font-weight:600}
.rbarrow{width:34px;height:36px;display:grid;place-items:center;border:1px solid #dfe7e2;border-radius:10px;color:#1f2937;text-decoration:none;font-size:20px;background:#fff}
.rbsearch{display:flex;align-items:center;gap:8px;border:1px solid #dfe7e2;border-radius:10px;padding:0 12px;color:#6b7c72;background:#fff}
.rbsearch input{border:0;outline:0;padding:9px 0;min-width:170px;background:none}
.rbseg{display:inline-flex;border:1px solid #dfe7e2;border-radius:10px;padding:3px;background:#f6faf7}
.rbseg a{padding:6px 16px;border-radius:8px;color:#1f3b2c;text-decoration:none;font-weight:600;font-size:13.5px}.rbseg a.on{background:var(--g);color:#fff}
.rbgo{display:inline-flex;align-items:center;gap:8px;background:var(--g);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}
.rbgo:hover{background:var(--g2)}
.rbcard .rbwrap{border:1px solid #e8eeea;border-radius:12px;max-height:calc(100vh - 330px)}
table.rbatt th{background:#f6f9f7;color:#1f2937;font-size:13px;font-weight:700;padding:9px 8px;text-transform:none}
table.rbatt th small{display:block;font-weight:500;color:#6b7c72;font-size:12px;max-width:none}
table.rbatt td{padding:7px 8px;border-bottom:1px solid #eef3f0}
table.rbatt th.rbtoday,table.rbatt td.rbtoday{background:#eef8f1}
table.rbatt td.rbname{background:inherit;font-weight:500}
.rbno{color:#6b7c72;width:36px}
.rbtot3{min-width:110px}.rbtot3 span{display:flex;justify-content:space-around;margin-top:3px}
.rbtp{color:#15803d}.rbta{color:#c0392b}.rbtl{color:#b7791f}
table.rbatt td.rbtp,table.rbatt td.rbta,table.rbatt td.rbtl{color:#1f2937;font-weight:500;min-width:30px}
select.rbpill{min-width:118px;border-radius:9px;padding:6px 26px 6px 26px;font-weight:600;font-size:13px;border:1px solid #e3e9e5;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4.5' fill='%23cbd5d0'/></svg>") 10px center no-repeat}
select.rbpill.pr{background-color:#e8f7ee;border-color:#c6ebd3;color:#166534;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4.5' fill='%2316a34a'/></svg>")}
select.rbpill.ab{background-color:#fdecec;border-color:#f6cccc;color:#b42318;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4.5' fill='%23ef4444'/></svg>")}
select.rbpill.lt{background-color:#fff6df;border-color:#f6e2ae;color:#92610a;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4.5' fill='%23f5b324'/></svg>")}
select.rbpill.ho{background-color:#f1f3f5;color:#6b7280;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4.5' fill='%239ca3af'/></svg>")}
span.rbpill{display:inline-block;padding:5px 12px;border-radius:9px;font-weight:600;font-size:13px;background:#f3f6f4}
span.rbpill.pr{background:#e8f7ee;color:#166534}span.rbpill.ab{background:#fdecec;color:#b42318}span.rbpill.lt{background:#fff6df;color:#92610a}
.rbfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 4px 2px;color:#4b5b52;font-size:13.5px}
.rbleg i{display:inline-block;width:12px;height:12px;border-radius:50%;margin:0 6px 0 14px;vertical-align:-1px}
.rbleg i:first-child{margin-left:0}
.rbleg i.pr{background:#16a34a}.rbleg i.ab{background:#f28b8b}.rbleg i.lt{background:#f5c34b}.rbleg i.un{background:#cbd5d0}.rbleg i.ho{background:#9ca3af}
.rbsaved{color:#15803d;font-weight:600}.rbsaved.busy{color:#b7791f}
/* the other sheets in the same green */
.rbpanel,.rbwrap{border-color:#e5ece8}.rbcards div{background:linear-gradient(135deg,#f4fbf6,#eaf6ee);border-color:#d9eedf}
.rbcards b{color:#0f2a1c}
table.rbt th{background:#f6f9f7;color:#1f2937}
.rbtab{background:#eef6f1;color:#1f3b2c}.rbtab.on{background:var(--g,#15803d);color:#fff}
.rbq{background:#f6faf7;border-color:#e3ece6}.rbq:hover{background:#e7f6ec}
.rbav{background:#15803d}.rbk{background:linear-gradient(135deg,#166534,#22a35a)}
.rbweek .btn{background:#fff;color:#1f2937;border:1px solid #dfe7e2}
@media(max-width:900px){.rbtop h1{font-size:24px}.rbsearch input{min-width:110px}}
select.rbpill{width:128px;min-width:0;text-overflow:ellipsis}
table.rbatt td{padding:6px 5px}table.rbatt th.rbname,table.rbatt td.rbname{min-width:170px}
select.rbpill,select.rbpill.pr,select.rbpill.ab,select.rbpill.lt,select.rbpill.ho{background-repeat:no-repeat!important;background-position:10px center!important;background-size:10px 10px!important}

/* ==== Report-card books: the class workspace as a bar across the top (4 Oct 2026) ==== */
.rbook.rbtopnav{display:block}
.rbtopnav .rbnav{position:sticky;top:0;z-index:20;max-height:none;overflow:visible;display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  background:#fff;border:1px solid #e5ece8;border-radius:16px;padding:8px;margin-bottom:16px;box-shadow:0 2px 8px rgba(15,40,25,.06)}
.rbtopnav .rbn{padding:8px 13px;border-radius:10px;font-size:14px;white-space:nowrap}
.rbtopnav .rbn.in{padding:7px 12px;font-size:13px}
.rbdd{position:relative}
.rbdd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px}
.rbdd>summary::-webkit-details-marker{display:none}
.rbdd>summary:after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.6px solid #7b8a82;border-bottom:1.6px solid #7b8a82;
  transform:rotate(45deg) translateY(-2px)}
.rbdd>summary.rbn.on,.rbdd>summary.rbn.on span{color:#166534}
.rbddm{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:#fff;border:1px solid #e5ece8;border-radius:14px;padding:8px;
  min-width:230px;box-shadow:0 12px 30px rgba(15,40,25,.16)}
.rbddm .rbn{display:flex}
.rbddsub{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));width:min(720px,calc(100vw - 80px));gap:4px}
.rbddrow{border:1px solid #eef3f0;border-radius:10px;padding:6px}
.rbddrow b{display:block;font-size:13.5px;color:#0f2a1c;padding:2px 6px 4px}.rbddrow b em{font-style:normal;color:#15803d}
.rbtopnav .rbmain{min-width:0}
/* the open subject's name stays readable (it was white on light green) */
.rbsub summary.rbn.on,.rbsub summary.rbn.on span{color:#166534}
/* tabs in normal letters, as the Lesson Planner has them */
.tttabs a{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600}
/* outcome and competency headings: the whole text in a box, wrapped, in the school's Dhivehi font where it is Dhivehi */
table.rbt th{text-transform:none;letter-spacing:0}
table.rbt th.rbo{min-width:168px;max-width:190px;white-space:normal;vertical-align:top;padding:8px 6px}
.rboh{background:#fde8ef;border:1px solid #f8d2df;border-radius:10px;padding:8px 9px;font-size:12.5px;line-height:1.55;font-weight:500;color:#1f2937;text-align:start;max-height:168px;overflow:auto;word-break:break-word}
.rboh b{color:#9d174d;font-weight:700}
.rboh[dir=rtl],.rboh:dir(rtl){font-size:14px;line-height:1.8}
.rboh.rbkc{background:#eef6f1;border-color:#d6eadc}
.rboh{max-height:230px}
/* Dhivehi has no bold in Faruma: a faked bold runs the fili together into a line, so colour marks the heading instead */
.rboh:dir(rtl) b,.rboh[dir=rtl] b{font-weight:400;display:block;margin-bottom:4px;color:#9d174d}
.rboh b{display:block;margin-bottom:3px}

/* ==================== School Results (O level & SSC), a tab of Teachers Resources ====================
   Blue carries "passed" everywhere on the page (one ramp, pale to deep); grey carries the grades below C. */
.srpage{--s1:#2a78d6;--s2:#eb6834;--srink:#1d1d1f;--srmut:#6b6b6b;--srline:#e6e4df}
.srtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin:0 0 6px}
.srtools .hint{margin:0 auto 0 0}.srtools .btn{text-decoration:none}
.srh{margin:6px 0 10px;font-size:15px}
.srtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.srtile{background:#fff;border:1px solid #eae7e2;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.srtile>span:first-child{font-size:12px;color:var(--srmut)}
.srtile b{font-size:28px;line-height:1.15;color:var(--srink);font-variant-numeric:tabular-nums}
.srdelta{font-size:12px;font-weight:600}.srdelta.up{color:#0b6b2f}.srdelta.down{color:#b3261e}
.srnote{font-size:12px;color:var(--srmut)}
.srcard{margin-bottom:16px}.srcard h3{margin:0 0 4px;font-size:16px}.srcard>.hint{margin:0 0 12px}
.srplot{position:relative;max-width:860px}
.srchart{display:block;width:100%;height:auto;overflow:visible}
.srgrid{stroke:var(--srline);stroke-width:1}
.srtick{font-size:11px;fill:var(--srmut)}
.srline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.srline.s1{stroke:var(--s1)}.srline.s2{stroke:var(--s2)}
.srdot{stroke:#fff;stroke-width:2}.srdot.s1{fill:var(--s1)}.srdot.s2{fill:var(--s2)}
.srend{font-size:12px;font-weight:600;fill:var(--srink)}
.srbval{font-size:10px;font-weight:600;fill:var(--srink);pointer-events:none}.srbval.in{fill:#fff}
.srval{font-size:9.5px;font-weight:600;fill:var(--s2);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.srhit{fill:transparent}
.srcross{stroke:#9a9890;stroke-width:1;opacity:0;pointer-events:none}
.srtip{position:absolute;top:6px;background:#fff;border:1px solid #dcd9d3;border-radius:10px;padding:8px 11px;
 box-shadow:0 4px 14px #0002;font-size:12.5px;pointer-events:none;white-space:nowrap}
.srtip b{display:block;margin-bottom:3px}.srtip span{display:block;padding-left:14px;position:relative}
.srtip span::before{content:"";position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:50%;background:var(--s1)}
.srtip span:last-child::before{background:var(--s2)}
.srscroll{overflow-x:auto}
.srheat,.srsubj,.srstud{border-collapse:separate;border-spacing:2px;font-size:12.5px;font-variant-numeric:tabular-nums}
.srheat th,.srsubj th,.srstud th{font-weight:600;text-align:left;white-space:nowrap;padding:5px 8px}
.srheat thead th{font-size:11.5px;text-align:center;padding:4px 3px}.srheat thead th a{color:#0b2f6b;text-decoration:none}
.srheat thead th a:hover{text-decoration:underline}
.srheat td{min-width:38px;height:28px;text-align:center;border-radius:4px}
.srheat tbody td:empty{background:#f6f5f2}
.srheat tfoot td,.srheat tfoot th{color:var(--srmut);font-weight:400;border-top:1px solid var(--srline)}
.srheat .h0{background:#e8f1fd}.srheat .h1{background:#cde2fb}.srheat .h2{background:#b7d3f6}.srheat .h3{background:#9ec5f4}
.srheat .h4{background:#6da7ec}.srheat .h5{background:#3987e5;color:#fff}.srheat .h6{background:#256abf;color:#fff}
.srheat .h7{background:#104281;color:#fff}
.sryears{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.sryears a{padding:5px 12px;border-radius:999px;background:#fff;border:1px solid #dcd9d3;color:#333;text-decoration:none;
 font-size:12.5px;font-weight:600}
.sryears a.on{background:#0b2f6b;border-color:#0b2f6b;color:#fff}
.srfacts{margin:2px 0 12px;font-size:13.5px;color:#333}
.srsubj{border-spacing:0;width:100%;max-width:860px}
.srsubj thead th{font-size:11.5px;color:var(--srmut);border-bottom:1px solid var(--srline)}
.srsubj td,.srsubj tbody th{padding:6px 8px;border-bottom:1px solid #f1efeb;vertical-align:middle}
.srsubj tbody th small{display:block;font-weight:400;color:var(--srmut);font-size:11.5px}
.srnum{text-align:right;white-space:nowrap}
.srbarc{width:34%;min-width:120px}.srdistc{width:26%;min-width:110px}
.srbar{height:12px;background:#f1efeb;border-radius:0 4px 4px 0}
.srbar i{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0}
.srdist{display:flex;gap:2px;height:12px}.srdist i{display:block;min-width:2px}
.srdist i:first-child{border-radius:3px 0 0 3px}.srdist i:last-child{border-radius:0 3px 3px 0}
.g0{background:#104281}.g1{background:#256abf}.g2{background:#3987e5}.g3{background:#86b6ef}
.g4{background:#dcdad4}.g5{background:#c3c2b7}.g6{background:#a3a29a}.g7{background:#84837c}.g8{background:#52514e}
.srkey{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;font-size:11.5px;color:var(--srmut)}
.srkey span{display:inline-flex;align-items:center;gap:4px}.srkey i{width:10px;height:10px;border-radius:2px;display:inline-block}
.srstud{border-spacing:0}
.srstud thead th{font-size:11.5px;color:var(--srmut);border-bottom:1px solid var(--srline);text-align:center}
.srstud thead th:nth-child(2){text-align:left}
.srstud td,.srstud tbody th{padding:4px 8px;border-bottom:1px solid #f1efeb;text-align:center}
.srstud tbody th{text-align:left;font-weight:500}
.srg{display:inline-block;min-width:26px;padding:2px 0;border-radius:4px;font-weight:600;font-size:12px;color:#fff}
.srg.g3,.srg.g4,.srg.g5{color:#1d1d1f}
.srrank,.srbtec{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;margin-left:4px}
.srrank{background:#fdf1d6;color:#7a5200}.srbtec{background:#e6f0fd;color:#184f95}
@media print{.srtools,.sryears{display:none}}
/* School Results: the trend and the one-subject bars sit side by side where there is room */
.srpair{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
@media(min-width:1180px){.srpair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.srpick{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between}
.srpick label{margin:0;font-size:12px;color:var(--srmut);display:flex;align-items:center;gap:6px}
.srpick select{font-size:13px;padding:4px 8px;max-width:100%}
.srcol{fill:var(--s1)}
.srbysubj .srtip span::before{display:none}.srbysubj .srtip span{padding-left:0}
.srplot[hidden]{display:none}
.srbysubj .srcross{display:none}
/* dashboard group links: a tile is never narrower than its name needs - two a row when there is room, else one */
.dgroup .dlinks{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
.dgroup .dlink span{min-width:0;overflow-wrap:normal;word-break:normal}

/* ==== Report Cards page, the school's design (5 Oct 2026): green, white cards, tinted figures ==== */
.rv{--g:#15803d;--g2:#166534;--ink:#0f2a1c;--mut:#5b6b62;--line:#e3ebe6;color:#1f2937}
.rv h2{margin:0;font-size:18px;color:var(--ink)}.rv h2 small{font-size:13px;font-weight:500;color:var(--mut);margin-left:8px}
.rvhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:2px 4px 14px}
.rvhead h1{margin:0;font:800 30px/1.15 inherit;color:var(--ink)}.rvhead p{margin:4px 0 0;color:var(--mut);font-size:15px}
.rvsel{display:flex;gap:12px}.rvsel label{font-size:12.5px;color:var(--mut);display:grid;gap:4px}
.rvsel select{border:1px solid var(--line);border-radius:10px;padding:8px 30px 8px 12px;background:#fff;font-weight:600;color:#1f2937;opacity:1;min-width:110px}
.rvcard,.rvdrive{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;box-shadow:0 1px 4px rgba(15,40,25,.04)}
.rvdrive{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rvds b{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--ink)}.rvds small{display:block;color:var(--mut);font-size:12.5px}
.rvtick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--g);color:#fff;flex:none}
.rvsep{width:1px;align-self:stretch;background:var(--line)}
.rvbtn{display:inline-flex;align-items:center;gap:7px;background:var(--g);color:#fff;border:1px solid var(--g);border-radius:10px;padding:8px 14px;
  font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;white-space:nowrap}.rvbtn:hover{background:var(--g2)}
.rvbtn.ghost{background:#fff;color:#1d4ed8;border-color:#bfd3f5}.rvbtn.ghost:hover{background:#f1f6ff}.rvbtn.sm{padding:5px 11px;font-size:12.5px}
.rvset summary{cursor:pointer;color:#1d4ed8;font-weight:600;font-size:13px}.rvset form{display:grid;gap:8px;min-width:min(560px,80vw);margin-top:8px}.rvset input{width:100%}
.rvnote{margin-left:auto;display:flex;align-items:center;gap:10px;background:#f1f6fd;border:1px solid #dbe7f8;border-radius:12px;padding:9px 13px;
  color:#3b5278;font-size:12.5px;max-width:330px}.rvnote svg{flex:none;color:#3b82f6}
.rvbanner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#edf9f0;border:1px solid #bfe6c9;border-radius:12px;padding:10px 16px;margin-bottom:14px;font-size:13.5px}
.rvbanner b{color:var(--ink)}.rvbanner span{color:var(--mut);font-size:12.5px}
.rvbanner.warn{background:#fffaeb;border-color:#f5e0a6;color:#92610a}.rvbanner.warn .rvbtn{margin-left:auto}
.rvstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:14px}
.rvstat{display:flex;align-items:center;gap:16px;border-radius:16px;padding:16px 18px;border:1px solid}
.rvstat i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none}
.rvstat b{display:block;font-size:28px;line-height:1.05}.rvstat span{display:block;font-weight:700;font-size:14.5px;color:var(--ink)}.rvstat small{color:var(--mut);font-size:12.5px}
.rvstat.g{background:linear-gradient(135deg,#f3fbf5,#e6f6eb);border-color:#d3ecd9}.rvstat.g i{background:#d3f0db;color:#15803d}.rvstat.g b{color:#14532d}
.rvstat.b{background:linear-gradient(135deg,#f3f7ff,#e8f0fe);border-color:#d6e3fb}.rvstat.b i{background:#d9e6fd;color:#2563eb}.rvstat.b b{color:#1e40af}
.rvstat.y{background:linear-gradient(135deg,#fffaf0,#fff2d9);border-color:#f6e3ba}.rvstat.y i{background:#fde5ac;color:#d97706}.rvstat.y b{color:#c2590a}
.rvbks{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-top:14px}
.rvbk{display:block;background:linear-gradient(135deg,#f2fbf5,#e4f5ea);border:1px solid #d3ecd9;border-radius:12px;padding:11px 13px;color:var(--ink);text-decoration:none;transition:box-shadow .12s,transform .12s}
.rvbk:hover{box-shadow:0 6px 16px rgba(21,128,61,.16);transform:translateY(-1px)}
.rvbk b{display:block;font-size:15px}.rvbk span{display:flex;align-items:center;gap:5px;color:var(--mut);font-size:12.5px;margin:5px 0 8px}.rvbk span svg{color:var(--g)}
.rvbk em{font-style:normal;color:var(--g);font-weight:700;font-size:12.5px}
.rvminep{background:linear-gradient(135deg,#fffdf5,#fff8e6);border-color:#f6e7bf;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rvmh{display:flex;align-items:center;gap:12px}.rvmh i{color:#d97706}.rvmh p{margin:2px 0 0;color:var(--mut);font-size:13px}
.rvmines{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.rvmine{display:grid;grid-template-columns:1fr auto;gap:2px 16px;min-width:270px;padding:10px 14px;border:1px solid #f6cfd3;background:#fff5f6;border-radius:12px;color:#1f2937;text-decoration:none}
.rvmine.done{border-color:#cdeccf;background:#f5fcf6}.rvmine b{font-size:14px}.rvmine span{grid-column:1;font-size:12px;color:var(--mut)}.rvmine .rcbar{grid-column:1}
.rvmine em{grid-row:1/4;grid-column:2;align-self:center;font-style:normal;font-weight:800;font-size:19px}
.rvph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.rvph>div{margin-right:auto}.rvph p{margin:2px 0 0;color:var(--mut);font-size:13px}
.rvpi{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e4e7fb;color:#4f46e5;flex:none}
.rvpi.p{background:#ede3fb;color:#7c3aed}.rvpi.y{background:#fde5ac;color:#d97706}
.rvsearch{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:0 11px;color:var(--mut);background:#fff}
.rvsearch input{border:0;outline:0;padding:8px 0;min-width:130px;background:none}
.rvseg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:#f6faf7}
.rvseg a{padding:6px 13px;border-radius:8px;color:#1f3b2c;text-decoration:none;font-weight:600;font-size:13px}.rvseg a.on{background:var(--g);color:#fff}
.rvcls{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:12px}
.rvcl{border:1px solid var(--line);border-radius:14px;padding:13px 15px;background:#fff}
.rvclh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.rvclh b{font-size:17px;color:var(--ink)}.rvclh span{font-size:12px;color:var(--mut)}
.rvrow{display:flex;justify-content:space-between;font-size:12.5px;color:#4b5563;margin-top:9px}.rvrow em{font-style:normal;font-weight:700;color:#111}
.rvteal{background:#14a38b}
.rvclf{display:flex;justify-content:space-between;align-items:center;margin-top:11px}.rvclf a{color:#1d4ed8;text-decoration:none;font-weight:600;font-size:12.5px}
.rvpill{display:inline-flex;align-items:center;gap:5px;background:#fef0cd;color:#b45309;border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:700}
.rvcount{margin:12px 2px 0;color:var(--mut);font-size:13px}.rvpc{display:inline-block;min-width:38px;font-weight:700}
.rvtwo{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;align-items:start}
.rvsen td{padding:10px 8px}.rvbad{background:#fde8e8;color:#b42318;border-radius:99px;padding:3px 11px;font-size:12px;font-weight:600;white-space:nowrap}
.rvok{background:#e8f7ee;color:#166534;border-radius:99px;padding:3px 11px;font-size:12px;font-weight:600;white-space:nowrap}
.rvissues{background:linear-gradient(135deg,#fffdf6,#fff9ea);border-color:#f6e7bf}
.rvis{background:#fff;border:1px solid #f1e3bd;border-radius:11px;padding:0 13px;margin-bottom:8px}
.rvis summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:10px 0;color:#b45309}.rvis summary::-webkit-details-marker{display:none}
.rvis summary b{color:var(--ink);margin-right:auto}.rvis summary:after{content:"";width:7px;height:7px;border-right:2px solid #6b7280;border-bottom:2px solid #6b7280;transform:rotate(45deg);margin-left:4px}
.rvis[open] summary:after{transform:rotate(-135deg)}
.rvis ul{margin:0 0 10px;padding:10px 12px 10px 28px;background:#fafafa;border-radius:9px;font-size:12.5px;color:#4b5563}.rvis li{margin:3px 0}.rvis li::marker{color:#ef4444}
.rvis>a{margin:0 0 11px;float:right}.rvis:after{content:"";display:block;clear:both}
.rvprint{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.rvprint>i{color:var(--g)}.rvprint>div{margin-right:auto}.rvprint p{margin:2px 0 0;color:var(--mut);font-size:13px}
.rvprint label{font-size:12.5px;color:var(--mut);display:grid;gap:4px}.rvprint select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:170px}
.rvprint .rvbtn{padding:10px 18px}
.rvold{margin:4px 4px 0}.rvold summary{cursor:pointer;color:var(--mut);font-size:13px}
@media(max-width:700px){.rvnote{margin-left:0;max-width:none}.rvsep{display:none}.rvhead h1{font-size:24px}}
.rvsen td:nth-child(2){white-space:nowrap}

/* ==== Class overview of a report-card book, the school's design (5 Oct 2026) ==== */
.rbtermsel{background:#e7f6ec;border-color:#9fd6b1;color:#14532d;font-weight:700}
.rbprev{background:#15803d;border-color:#15803d;color:#fff;padding:10px 18px}.rbprev:hover{background:#166534}
.rbst.bl{background:linear-gradient(135deg,#f2f6ff,#e6eefe);border-color:#d5e2fb}.rbst.bl i{background:#d5e3fd;color:#2563eb}
.rbst.pu{background:linear-gradient(135deg,#f7f3ff,#eee6fd);border-color:#e2d6fa}.rbst.pu i{background:#e2d5fb;color:#7c3aed}
.rbst.t i{background:#bfeee6;color:#0d9488}
.rbst i{width:64px;height:64px}.rbst b{font-size:30px}
.rbq{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #e3ebe6;border-radius:10px;padding:9px 16px;font-weight:500}
.rbq svg{color:#374151}.rbq.pu svg{color:#7c3aed}.rbq.bl svg{color:#2563eb}.rbq.ye svg{color:#eab308;fill:#facc15}.rbq.re svg{color:#e11d48}.rbq.gr svg{color:#16a34a}
table.rbsubs td{padding:7px 8px;font-size:14px}table.rbsubs th{font-size:13px;background:#f6f9f7}
table.rbsubs td a{color:#1d4ed8;text-decoration:none}table.rbsubs td a:hover{text-decoration:underline}
.rbfab{display:flex;align-items:center;gap:14px;justify-content:center}.rbfab em{font-style:normal;min-width:52px;text-align:left;font-size:13.5px}
.rbfabar{display:block;width:min(440px,60%);height:9px;border-radius:99px;background:#e9edf0;overflow:hidden}
.rbfabar i{display:block;height:100%;border-radius:99px}.rbfabar i.g{background:#16a34a}.rbfabar i.o{background:#f59e0b}.rbfabar i.r{background:#ef4444}
.rbnodata{display:inline-block;background:#eef0f2;color:#6b7280;border-radius:99px;padding:2px 22px;font-size:12px}
.rbflds{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.rbfld{flex:1;min-width:170px;display:block}.rbfld>span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6b7c72;margin-bottom:5px}
.rbfld>div{display:flex;align-items:center;gap:9px;border:1px solid #dfe7e2;border-radius:9px;padding:0 11px;background:#fff;color:#6b7280}
.rbfld .rbi{border:0;outline:0;padding:8px 0;background:none;min-width:0}.rbfld .rbv{padding:8px 0;color:#1f2937}
.rbfsep{width:1px;align-self:stretch;background:#e3ebe6}

/* ==== Report-card books, second set of the school's designs (5 Oct 2026) ==== */
/* Dhivehi: never a faked bold (it runs the fili into a line), and room between the lines */
html{font-synthesis-weight:none}
.rboh[dir=rtl],.rboh:dir(rtl){font-size:14.5px;line-height:2.15;font-weight:400}
.rbook textarea.rbi,.rbook input.rbi,.rbsm,.rbkh div:dir(rtl){line-height:1.9}
/* header: Term 1 / Term 2 buttons, white Preview */
.rbprev{background:#fff;border-color:#dfe7e2;color:#1f2937}.rbprev:hover{background:#f2f8f4}
/* Subjects menu: a search box and a tinted card for each subject */
.rbddsub{display:block;width:min(680px,calc(100vw - 60px));padding:12px}
.rbsubq{margin-bottom:10px}.rbsubq input{flex:1}
.rbscs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px;max-height:60vh;overflow:auto}
.rbsc{display:flex;gap:12px;align-items:center;border-radius:12px;padding:11px 12px;background:var(--bg);border:1px solid var(--bd)}
.rbsc i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--ib);color:var(--ic)}
.rbsc b{display:block;font-size:14.5px;color:var(--tx,#0f2a1c);margin-bottom:3px}.rbsc b em{font-style:normal;color:#15803d;font-size:11px}
.rbsc a{display:block;color:#1d4ed8;text-decoration:none;font-size:12.5px;line-height:1.5}.rbsc a:hover{text-decoration:underline}
.rbsc.c0{--bg:#fdeef0;--bd:#f9d7dc;--ib:#f9c6cd;--ic:#be123c}.rbsc.c1{--bg:#eef7f0;--bd:#d6ebdb;--ib:#cfe8d5;--ic:#166534}
.rbsc.c2{--bg:#eef4fd;--bd:#d6e4fa;--ib:#cfe0fb;--ic:#1d4ed8}.rbsc.c3{--bg:#e9f8f1;--bd:#cdeedd;--ib:#bfe9d3;--ic:#047857}
.rbsc.c4{--bg:#fff7e6;--bd:#f8e6bd;--ib:#fbdf9f;--ic:#b45309;--tx:#92400e}.rbsc.c5{--bg:#e8f7f7;--bd:#cbebeb;--ib:#bde6e6;--ic:#0f766e}
.rbsc.c6{--bg:#eaf2fe;--bd:#d2e2fb;--ib:#c6dcfb;--ic:#1e40af}.rbsc.c7{--bg:#f3edfd;--bd:#e2d6fa;--ib:#dccbf9;--ic:#6d28d9}
.rbsc.c8{--bg:#feefe9;--bd:#fad9cc;--ib:#f9cbb9;--ic:#c2410c;--tx:#9a3412}
/* Reports menu */
.rbddrep{width:min(430px,calc(100vw - 60px));padding:10px;display:grid;gap:8px}
.rbrc{display:flex;align-items:center;gap:14px;border-radius:12px;padding:11px 12px;text-decoration:none;color:#1f2937;background:var(--bg);border:1px solid transparent}
.rbrc:hover,.rbrc.on{border-color:var(--ic)}
.rbrc i{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--ib);color:var(--ic)}
.rbrc div{flex:1}.rbrc b{display:block;font-size:14.5px;color:#0f2a1c}.rbrc span{display:block;font-size:12.5px;color:#5b6b62;line-height:1.4}
.rbrc.g{--bg:#ecf8f1;--ib:#c9eeda;--ic:#059669}.rbrc.b{--bg:#edf3fe;--ib:#cfe0fc;--ic:#2563eb}
.rbrc.p{--bg:#f3eefd;--ib:#dccdfa;--ic:#6d28d9}.rbrc.y{--bg:#fff7e6;--ib:#fbdf9f;--ic:#b45309}
/* attendance: Unmarked */
.rbst.n{background:linear-gradient(135deg,#f6f8fa,#eef1f4);border-color:#e1e6eb}.rbst.n i{background:#dfe4ea;color:#475569}
.rbstats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
select.rbpill{color:#4b5563}
/* key competencies */
.rbktop{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}.rbktop .rbtabs{flex:1;min-width:300px;margin:0}
.rbtab{padding:8px 16px;font-size:13.5px;font-weight:500}
.rbkleg{background:#f1f8f3;border:1px solid #dcefe2;border-radius:12px;padding:10px 16px;display:grid;gap:5px;font-size:13.5px}
.rbkleg i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px}
.rbkleg i.ce{background:#15803d}.rbkleg i.me{background:#4cc9d8}.rbkleg i.oe{background:#f5b324}.rbkleg b{display:inline-block;min-width:26px}
.rbkprog{background:#f1f8f3;border:1px solid #dcefe2;border-radius:12px;padding:12px 18px;min-width:300px}
.rbkprog b{display:block;font-size:13px}.rbkprog>span{font-size:14px}.rbkprog div{display:flex;align-items:center;gap:12px}.rbkprog .rcbar{flex:1}.rbkprog em{font-style:normal;font-size:13px}
.rbkctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}.rbkctl .hint{margin:0 auto 0 0}
th.rbkh{min-width:210px;max-width:250px;white-space:normal!important;text-align:left!important;vertical-align:top!important;font-weight:500!important;line-height:1.45}
th.rbkh div{font-size:12.5px;color:#374151}
select.rbcomp{width:100%;min-width:170px;border-radius:9px;padding:7px 10px;font-size:13px;color:#4b5563;background:#fff;border:1px solid #dfe5e1}
select.rbcomp.fa{background:#e8f7ee;border-color:#bfe6cb;color:#166534;font-weight:600}select.rbcomp.ma{background:#e5f7fa;border-color:#b9e6ee;color:#0e7490;font-weight:600}
select.rbcomp.ac{background:#fff6df;border-color:#f6e2ae;color:#92610a;font-weight:600}
table.rbkc td input.rbi{min-width:200px;padding:7px 10px;border-radius:9px}
/* class list: the list, and the pupil chosen */
.rbcl2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.rbpick tr[data-p]{cursor:pointer}.rbpick td{padding:11px 8px!important;text-align:left!important}.rbpick th{text-align:left!important}
.rbpick tr.on td{background:#e7f6ec!important;font-weight:600}.rbpick tr.on td:first-child{box-shadow:inset 3px 0 0 #15803d}
.rbpick tr[data-p]:hover td{background:#f3faf5}
.rbpane{position:relative}.rbpane>.rbsaved{position:absolute;right:20px;top:20px;font-size:13px}
.rbpdh h3{margin:0;font-size:24px;color:#0f2a1c}.rbpdh p{margin:2px 0 12px;font-size:15px;color:#374151}
.rbstrip{display:flex;flex-wrap:wrap;background:#f4f8f5;border-radius:12px;padding:12px 6px}
.rbstrip div{flex:1;min-width:120px;padding:0 14px;border-right:1px solid #dfe7e2}.rbstrip div:last-child{border:0}
.rbstrip span,.rbdet span{display:block;font-size:12.5px;color:#5b6b62}.rbstrip b,.rbdet b{font-weight:500;font-size:14.5px;color:#111}
.rbinfo2{background:#eef4fd;border-radius:10px;padding:9px 14px;margin:10px 0;font-size:12.5px;color:#334155}
.rbptabs{display:flex;gap:4px;border-bottom:1px solid #e3ebe6}
.rbptabs a{display:flex;align-items:center;gap:8px;padding:10px 18px;color:#4b5563;text-decoration:none;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.rbptabs a.on{color:#15803d;border-color:#15803d}
.rbpt{border:1px solid #e3ebe6;border-top:0;border-radius:0 0 12px 12px;padding:16px}
.rbpt label{display:block;font-size:13.5px;font-weight:600;color:#1f2937;margin-bottom:12px}.rbpt .rbi{display:block;margin-top:6px;padding:8px 11px;border-radius:9px;font-weight:400;font-size:14px}
.rbpt textarea.rbi{min-height:58px;width:100%}.two2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rbdet{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
/* print report cards */
.rbpr{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(280px,1fr);gap:16px;align-items:start}
.rbprbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}.rbprbar .rbsearch{flex:1;min-width:200px}.rbprbar .rbsearch input{flex:1}
.rball{display:flex;align-items:center;gap:8px;font-size:14px}.rball input,.rbpc>input{width:20px;height:20px;accent-color:#15803d}
.rbseln{font-size:13.5px}
.rbbtn{display:inline-flex;align-items:center;gap:9px;background:#15803d;color:#fff;border:1px solid #15803d;border-radius:11px;padding:11px 20px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none}
.rbbtn:hover{background:#166534}.rbbtn.ghost{background:#fff;color:#15803d;border-color:#9fd6b1}.rbbtn.ghost:hover{background:#f1f9f4}
.rbbtn:disabled{opacity:.45;cursor:not-allowed}
.rbpcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.rbpc{display:flex;align-items:center;gap:12px;border:1px solid #e3ebe6;border-radius:14px;padding:14px;background:#fff}
.rbpc .rbav{width:46px;height:46px;font-size:16px;flex:none;grid-row:auto}
.rbpcn{flex:1;min-width:0}.rbpcn b{display:block;font-size:14.5px;color:#0f2a1c}.rbpcn small{color:#6b7c72;font-size:12.5px}
.rbpcb{display:grid;gap:6px}.rbpcb a{display:flex;align-items:center;gap:7px;background:#e7f6ec;color:#15803d;border-radius:8px;padding:5px 12px;font-size:12.5px;font-weight:600;text-decoration:none}
.rbpcb a:hover{background:#d5efdd}
.rbpv h3{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:16px}
.rbpv iframe{width:100%;height:70vh;border:1px solid #e3ebe6;border-radius:12px;background:#e9edf3}
.rbpve{background:linear-gradient(160deg,#f1f8f3,#e6f3ea);border-radius:14px;padding:60px 26px;text-align:center;color:#4b5b52}
.rbpve b{display:block;font-size:16px;color:#0f2a1c;margin-bottom:8px}.rbpve p{font-size:13.5px;margin:0}
.rbprfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}.rbprfoot>div{margin-right:auto}.rbprfoot p{margin:2px 0 0;color:#5b6b62;font-size:13px}
@media(max-width:1000px){.rbcl2,.rbpr{grid-template-columns:1fr}}
.rbddrep{left:auto;right:0}.rbddsub{width:min(680px,60vw)}

/* ==== Class overview: "Subjects this term" as the school's design (5 Oct 2026) ==== */
.rbsp{padding:20px}
.rbsph{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.rbspi{width:52px;height:52px;border-radius:12px;background:#12a070;color:#fff;display:grid;place-items:center;flex:none}
.rbspt{margin-right:auto}.rbspt h3{margin:0;font-size:24px;color:#0f2a1c}.rbspt p{margin:2px 0 0;color:#5b6b62;font-size:14px}
.rbchip{display:flex;align-items:center;gap:11px;background:#eef8f2;border-radius:12px;padding:9px 16px 9px 11px}
.rbchip i{width:38px;height:38px;border-radius:9px;background:#cdeedd;color:#0f9d6b;display:grid;place-items:center}
.rbchip b{display:block;font-size:19px;line-height:1.1;color:#0f2a1c}.rbchip span{font-size:12.5px;color:#5b6b62}
.rbsp .rbsearch input{min-width:170px;padding:11px 0}
.rbsubwrap{border:1px solid #e3ebe6;border-radius:14px;overflow:auto}
table.rbsubs2{width:100%;border-collapse:collapse;font-size:15px}
table.rbsubs2 th{background:#ecf7f1;text-align:left;padding:15px 12px;font-size:14.5px;font-weight:700;color:#0f2a1c;text-transform:none;letter-spacing:0}
table.rbsubs2 td{padding:9px 12px;border-top:1px solid #eef3f0;vertical-align:middle}
table.rbsubs2 tr[data-name]{cursor:pointer}table.rbsubs2 tr[data-name]:nth-child(odd) td{background:#fafcfb}table.rbsubs2 tr[data-name]:hover td{background:#f0f8f3}
table.rbsubs2 td:first-child{width:64px;padding-left:22px}table.rbsubs2 th:nth-child(3),table.rbsubs2 td:nth-child(3),table.rbsubs2 th:nth-child(5),table.rbsubs2 td:nth-child(5){text-align:center}
.rbsn{font-weight:600;color:#0f2a1c}
.rbsi{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--ib);color:var(--ic)}
.rbsi.c0{--ib:#f9c6cd;--ic:#be123c}.rbsi.c1{--ib:#cfe8d5;--ic:#166534}.rbsi.c2{--ib:#cfe0fb;--ic:#1d4ed8}.rbsi.c3{--ib:#bfe9d3;--ic:#047857}
.rbsi.c4{--ib:#fbdf9f;--ic:#b45309}.rbsi.c5{--ib:#bde6e6;--ic:#0f766e}.rbsi.c6{--ib:#c6dcfb;--ic:#1e40af}.rbsi.c7{--ib:#dccbf9;--ic:#6d28d9}.rbsi.c8{--ib:#f9cbb9;--ic:#c2410c}
.rbcount{display:inline-block;min-width:52px;background:#e9f6ef;border-radius:99px;padding:5px 14px;font-weight:700;color:#0f2a1c;text-align:center}
table.rbsubs2 .rbfab{justify-content:flex-start;gap:22px}
table.rbsubs2 .rbfabar{width:250px;height:14px;background:#e3f1ea}
table.rbsubs2 .rbfabar i.g{background:#12a070}
.rbfabar.nd{background:#eceff1;position:relative;overflow:visible}
.rbfabar.nd i{position:absolute;left:0;top:-4px;height:22px;line-height:22px;background:#e3e7ea;color:#6b7280;border-radius:99px;padding:0 22px;font-style:normal;font-size:12.5px}
.rbgoarr{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e4f5ec;color:#0f7a55;text-decoration:none;font-size:17px}
.rbspnote{display:flex;gap:28px;flex-wrap:wrap;margin:14px 2px 0;color:#5b6b62;font-size:13.5px}

/* ==== Outcomes and Marks & conduct in the Key competencies design (5 Oct 2026) ==== */
.rbkleg.row{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;flex:1}.rbkleg.row>b{min-width:0;margin-right:4px}
.rbktop>.rbkleg:first-child:not(.row){margin-right:auto}
.rbout select.rbcomp{min-width:150px}
.rbchipn{display:inline-block;min-width:34px;border-radius:99px;padding:4px 10px;font-weight:700;font-size:13px}
.rbchipn.fa{background:#e3f6ea;color:#166534}.rbchipn.ma{background:#e0f5f8;color:#0e7490}.rbchipn.ac{background:#fff3d6;color:#92610a}
.rbout textarea.rbi{min-width:260px}
table.rbmk th{white-space:normal;vertical-align:bottom}table.rbmk th small{display:block;font-weight:500;color:#6b7c72}
th.rbgh{background:#e4f5ec!important;color:#14532d!important;font-size:13px!important;border-left:3px solid #fff}
th.rbgh.r{background:#e8f0fe!important;color:#1e40af!important}th.rbgh.c{background:#fff3d6!important;color:#92400e!important}
th.rbch{max-width:96px;min-width:84px;font-size:11.5px!important;font-weight:600!important;line-height:1.3}
table.rbmk input.rbn5{width:70px!important;padding:7px 8px;border-radius:9px;text-align:center}
table.rbmk input.rbexam{background:#f1f6ff;border-color:#c9daf8;font-weight:700}
.rbgrade{display:inline-block;min-width:38px;border-radius:9px;padding:5px 9px;background:#e3f6ea;color:#166534;font-weight:800}
.rbgrade[data-g=""]{background:none}.rbgrade[data-g=C],.rbgrade[data-g=D]{background:#fff3d6;color:#92610a}
.rbgrade[data-g=E],.rbgrade[data-g=F]{background:#fde8e8;color:#b42318}.rbgrade[data-g=B]{background:#e0f5f8;color:#0e7490}
select.rbcd{min-width:58px;border-radius:9px;padding:6px 6px;font-weight:700;text-align:center;background:#fff;border:1px solid #dfe5e1}
.cdE{background:#e3f6ea!important;color:#166534;border-color:#bfe6cb!important}.cdV{background:#e0f5f8!important;color:#0e7490;border-color:#b9e6ee!important}
.cdG{background:#eef0fd!important;color:#3730a3;border-color:#d3d7f8!important}.cdS{background:#fff3d6!important;color:#92610a;border-color:#f6e2ae!important}
.cdN{background:#fde8e8!important;color:#b42318;border-color:#f6cccc!important}
.rbkleg i.cdE{background:#16a34a!important}.rbkleg i.cdV{background:#22b8cf!important}.rbkleg i.cdG{background:#6366f1!important}
.rbkleg i.cdS{background:#f5b324!important}.rbkleg i.cdN{background:#ef4444!important}
/* class list: one card, the list and the pupil side by side */
.rbcl2{gap:0;padding:0}.rbcl2a{padding:18px}.rbpane{padding:18px 20px;border-left:1px solid #e3ebe6}
.rbpt[hidden],.rbpd[hidden]{display:none!important}
@media(max-width:1000px){.rbpane{border-left:0;border-top:1px solid #e3ebe6}}
.rbfld .rbi,.rbfld .rbi:focus{border:0!important;box-shadow:none!important;outline:0!important;width:100%;background:none}
.rbfld select.rbi{padding:8px 0;font-size:14px;cursor:pointer}
.rbfld>div:focus-within{border-color:#15803d;box-shadow:0 0 0 3px #d9f0e1}
.rbfld.tt>div{background:#f4f8f5}
/* class list as one sheet */
.rbcl1 td{text-align:left!important;vertical-align:top!important;padding:8px!important}.rbcl1 th{text-align:left!important}
.rbcl1 textarea.rbi{min-width:230px;min-height:54px;width:100%;border-radius:9px;padding:7px 9px}.rbcl1 input.rbn5{width:74px!important;border-radius:9px;padding:7px 8px}
.rbmore{color:#0f2a1c;text-decoration:none;font-weight:600}.rbmore:after{content:" \25BE";color:#15803d;font-size:11px}.rbmore.open:after{content:" \25B4"}
.rbrec td{background:#f7fbf8!important;padding:6px 12px 12px!important}.rbrec[hidden]{display:none}
.rbkprog.sm{min-width:230px;padding:8px 14px}
/* subject sheets: the subject teacher's box, and rows tight enough to see the whole class at once */
.rbsubt{flex:0 0 auto;min-width:230px;max-width:340px;margin-right:auto}.rbsubt .rbv{white-space:normal;line-height:1.3;padding:6px 0}
.rbktop>.rbsubt+.rbkleg:not(.row){margin-right:0}
.rbout td,.rbmk td,.rbkc td{padding:2px 5px!important}
.rbout select.rbcomp,.rbkc select.rbcomp{padding:3px 8px;font-size:12.5px;min-width:140px}
.rbout .rbchipn{padding:2px 8px;font-size:12px}.rbout textarea.rbi{min-height:28px;height:28px;padding:4px 8px;min-width:220px}
.rbout textarea.rbi:focus{height:90px;position:relative;z-index:3}
.rbout .rbname,.rbmk .rbname,.rbkc .rbname{font-size:13px}
.rbout th.rbo{padding:5px 4px}.rbout .rboh{max-height:92px;font-size:12px;line-height:1.4;padding:6px 8px}
.rbout .rboh[dir=rtl]{max-height:104px;font-size:13.5px;line-height:1.9}
.rbmk input.rbn5{padding:3px 6px!important;width:62px!important}.rbmk select.rbcd{padding:3px 4px}.rbmk .rbgrade,.rbmk .rbcount{padding:2px 9px}
.rbkc td input.rbi{padding:4px 9px!important}th.rbkh div{font-size:12px}
.rbcard .rbwrap{max-height:none}
.rbbook-fit{}
.rbout td,.rbmk td,.rbkc td{padding:1px 4px!important}
.rbout textarea.rbi{min-height:24px;height:24px;padding:2px 8px;line-height:1.4!important}
.rbout select.rbcomp,.rbkc select.rbcomp{padding:2px 6px}
.rbktop{margin-bottom:6px}.rbktop .rbkleg{padding:6px 14px;gap:2px;font-size:12.5px}.rbktop .rbkprog{padding:7px 14px}.rbkctl{margin-bottom:6px}
.rbcard .rbcardh{margin-bottom:8px}.rbout .rboh{max-height:76px}
/* Compact view of a subject sheet: only the sheet, as many pupils as the screen holds */
.rbcompactbtn{background:#fff;border:1px solid #9fd6b1;color:#15803d;border-radius:9px;padding:6px 13px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.rbcompactbtn:hover{background:#f1f9f4}
body.rbcompact .tbar,body.rbcompact .rbtop,body.rbcompact .rbktop,body.rbcompact .rbcardh,body.rbcompact .msg,body.rbcompact main>footer,
body.rbcompact .rbkctl .hint,body.rbcompact .rbtabs{display:none!important}
body.rbcompact .rbcompactbtn{background:#15803d;color:#fff;border-color:#15803d}
body.rbcompact main{padding-top:6px!important;padding-bottom:6px!important}
body.rbcompact .rbtopnav .rbnav{margin-bottom:6px;padding:3px}body.rbcompact .rbtopnav .rbn{padding:5px 11px;font-size:13px}
body.rbcompact .rbcard{padding:8px 10px}body.rbcompact .rbkctl{margin-bottom:5px;justify-content:flex-end}
body.rbcompact .rbout .rboh{max-height:38px;font-size:11.5px;padding:3px 7px;line-height:1.35}
body.rbcompact .rbout .rboh[dir=rtl]{max-height:48px;font-size:12.5px;line-height:1.7}
body.rbcompact .rbterm{display:none}
body.rbcompact th.rbkh div{max-height:36px;overflow:auto}body.rbcompact th.rbch{font-size:10.5px!important}
body.rbcompact .rbout td,body.rbcompact .rbmk td,body.rbcompact .rbkc td{padding:0 4px!important}
body.rbcompact .rbout select.rbcomp,body.rbcompact .rbkc select.rbcomp{padding:1px 6px;font-size:12px}
body.rbcompact .rbout textarea.rbi{min-height:22px;height:22px}
body.rbcompact .rbmk input.rbn5{padding:1px 6px!important}body.rbcompact .rbmk select.rbcd{padding:1px 4px}
body.rbcompact table.rbt th{padding:4px 5px}
/* Compact view on Attendance and the Class list too: the card's own bar stays (search, week, buttons), its title goes */
body.rbcompact .rbcardh{display:flex!important;margin-bottom:5px}
body.rbcompact .rbcardh>div:first-child,body.rbcompact .rbcardh .rbkprog,body.rbcompact .rbstats,body.rbcompact .rbinfo2{display:none!important}
body.rbcompact .rbcardh{justify-content:flex-end}
body.rbcompact table.rbatt td{padding:1px 5px!important}
body.rbcompact select.rbpill{padding-top:2px;padding-bottom:2px;font-size:12.5px}
body.rbcompact .rbcl1 textarea.rbi{min-height:24px;height:24px;padding:2px 8px}
body.rbcompact .rbcl1 textarea.rbi:focus{height:84px;position:relative;z-index:3}
body.rbcompact .rbcl1 input.rbn5{padding:2px 6px!important}
body.rbcompact .rbfoot{padding-top:5px}
body.rbcompact .rbcl1 td{padding:1px 6px!important;white-space:nowrap;vertical-align:middle!important}
.rbddsub{max-width:calc(100vw - 24px)}.rbddrep{max-width:calc(100vw - 24px)}
/* SEN book: adding a subject / an outcome, removing an outcome, the pupils' tabs */
.rbaddsub,.rbaddout{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px dashed #9fd6b1;border-radius:12px;background:#f6fbf8}
.rbaddsub input,.rbaddout input{flex:1;min-width:150px;padding:8px 11px;border:1px solid #dfe7e2;border-radius:9px}
.rbaddout input[name=code]{flex:0 0 130px;min-width:0}.rbaddsub .rbbtn,.rbaddout .rbbtn{padding:8px 16px;font-size:13px}
.rbdelout{display:inline}.rbdelout button{border:0;background:#fde8e8;color:#b42318;border-radius:50%;width:20px;height:20px;line-height:18px;cursor:pointer;font-weight:700;margin-left:4px}
.rbppl{margin-bottom:8px}body.rbcompact .rbppl{display:flex!important}body.rbcompact .rbaddout{display:none}

/* SEN: subjects to choose from, and a subject's outcomes to choose from (5 Oct 2026) */
.rbsenpick{display:block}.rbsenpick .hint{display:block;margin:2px 0 8px;font-size:12.5px}
.rbsenpick div{display:flex;flex-wrap:wrap;gap:8px}
.rbsenpick button{background:#fff;border:1px solid #cfe6d8;border-radius:999px;padding:8px 16px;font:inherit;font-weight:600;font-size:13.5px;color:#14532d;cursor:pointer}
.rbsenpick button:hover{background:#e7f6ec;border-color:#15803d}
.rbaddout select.rbsenout{flex:1 1 100%;min-width:0;max-width:100%;padding:8px 11px;border:1px solid #dfe7e2;border-radius:9px;background:#fff;font:inherit}

/* Subjects menu: add and delete a subject from lists (5 Oct 2026) */
.rbaddsub select{flex:1;min-width:180px;padding:8px 11px;border:1px solid #dfe7e2;border-radius:9px;background:#fff;font:inherit}
.rbdelsub{border-color:#f3b8b8;background:#fff7f7}.rbaddsub .rbbtn.rbdel{background:#dc2626;border-color:#dc2626;color:#fff}
.rbaddsub .rbbtn.rbdel:hover{background:#b91c1c}

/* SEN: the subjects of each pupil (5 Oct 2026) */
.rbtakelink{display:flex;align-items:center;gap:12px;margin-top:12px;padding:11px 14px;border:1px solid #cfe6d8;border-radius:12px;background:#e7f6ec;color:#14532d;text-decoration:none}
.rbtakelink:hover{background:#d8f0e0}.rbtakelink span{flex:1;font-size:12.5px;color:#35604c}.rbtakelink b{display:block;font-size:14.5px;color:#14532d}.rbtakelink em{font-style:normal;font-size:18px}
.rbtakes th.rbtkh{min-width:92px;max-width:120px;white-space:normal;font-size:12.5px;line-height:1.25;vertical-align:bottom;text-align:center}
.rbtakes th.rbtkh span{display:block}.rbtakes th.rbtkh label{display:block;margin-top:5px;font-weight:400;font-size:11.5px;color:#6b7280;cursor:pointer}
.rbtakes td.rbtk{text-align:center}.rbtakes td.rbtk input{width:19px;height:19px;accent-color:#15803d;cursor:pointer}
.rbtakes td.rbname{white-space:nowrap}.rbtkn{color:#15803d}
.rbtksave{display:flex;align-items:center;gap:14px;margin-top:14px}
.rbnone{padding:34px 20px;text-align:center;border:1px dashed #cfe6d8;border-radius:14px;background:#f6fbf8}.rbnone p{color:#4b5b52;margin:8px 0 16px}
.rbtab.rbtabmore{background:none!important;border:1px dashed #9fd6b1!important;color:#15803d!important}

/* Compact view on Prayer, Qaumiyyathu and the reports (5 Oct 2026) */
body.rbcompact .rbcard>p.hint,body.rbcompact .rbcard>.rbwrap+p.hint{display:none}
body.rbcompact table.rbgrid td,body.rbcompact table.rbwide td,body.rbcompact table.rbpray td{padding:1px 5px!important}
body.rbcompact table.rbpray select,body.rbcompact table.rbwide input{padding-top:1px!important;padding-bottom:1px!important;font-size:12.5px}
body.rbcompact .rbweek{margin-bottom:5px}

/* Qaumiyyathu: the sheet's own columns and headings (5 Oct 2026) */
table.rbqaum th.rbqt{min-width:170px;white-space:normal;line-height:1.7;vertical-align:bottom}
table.rbqaum th.rbqs{min-width:74px;max-width:96px;white-space:normal;line-height:1.7;font-size:12px;vertical-align:bottom}
table.rbqaum textarea.rbi{min-height:44px;min-width:160px}
body.rbcompact table.rbqaum textarea.rbi{min-height:24px;height:24px}body.rbcompact table.rbqaum textarea.rbi:focus{height:84px}

/* Conduct headings: the Dhivehi meaning on hover (5 Oct 2026) */
th.rbhastip{cursor:help}table.rbt th.rbhastip:hover,table.rbt th.rbhastip:focus{z-index:6}
th.rbhastip .rbtip{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:40;width:230px;
  background:#14532d;color:#e9f7ee;border-radius:12px;padding:10px 13px;text-align:right;white-space:normal;
  font-family:"EG Thaana",Faruma,"MV Boli",sans-serif;font-size:14px;font-weight:400;line-height:1.9;box-shadow:0 8px 22px rgba(15,40,25,.28)}
th.rbhastip .rbtip b{display:block;color:#fff;font-size:15.5px;font-weight:400;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:4px;margin-bottom:5px}
th.rbhastip .rbtip::before{content:"";position:absolute;bottom:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom-color:#14532d}
th.rbhastip:hover .rbtip,th.rbhastip:focus .rbtip{display:block}
th.rbhastip:hover{background:#fdf1d0}
th.rbhastip:last-of-type .rbtip,th.rbhastip:nth-last-of-type(2) .rbtip{left:auto;right:0;transform:none}
th.rbhastip:last-of-type .rbtip::before,th.rbhastip:nth-last-of-type(2) .rbtip::before{left:auto;right:26px}

/* Prefect rules (5 Oct 2026) */
.rbprules{border:1px solid #d9ecdf;background:#f6fbf8;border-radius:14px;padding:14px 16px;margin-bottom:12px}
.rbprh{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}.rbprh b{font-size:16px;color:#14532d}.rbprh span{font-size:12.5px;color:#4b5b52}
.rbprg{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1.2fr);gap:16px}
.rbpr1{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid #e3ebe6;border-radius:10px;padding:7px 12px;margin-bottom:7px}
.rbpr1 b{display:block;font-size:13.5px}.rbpr1 small{display:block;font-size:11.5px;color:#6b7280}
.rbprn{white-space:nowrap;font-weight:700;color:#15803d}.rbprn input{width:68px;padding:6px 8px;border:1px solid #cfe6d8;border-radius:8px;font:inherit;font-weight:700;text-align:center}
.rbprt{display:block;font-size:13.5px;margin-bottom:6px}
.rbprules textarea{width:100%;box-sizing:border-box;min-height:150px;border:1px solid #dfe7e2;border-radius:10px;padding:9px 12px;font:inherit;font-size:13.5px;line-height:1.6;background:#fff}
.rbprnotes{background:#fff;border:1px solid #e3ebe6;border-radius:10px;padding:9px 12px;font-size:13.5px;line-height:1.7}
.rbprf{margin-top:10px;text-align:right}
@media(max-width:760px){.rbprg{grid-template-columns:1fr}}
body.rbcompact .rbprules{display:none}
@media print{.rbprf,.rbprh span{display:none}}

/* Results Files: a folder for each year (5 Oct 2026) */
.rfcard .rfhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}.rfhead h3{margin:0;display:flex;align-items:center;gap:8px}
.rfhead h3 svg{color:#d97706}.rfsp{flex:1}
.rfyear{display:flex;align-items:center;gap:8px;margin:0}.rfyear label{font-size:13px;color:#4b5563}
.rfyear input{width:86px;padding:7px 9px;border:1px solid #d5dde5;border-radius:9px;font:inherit;margin-left:6px}
.rfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin-top:14px}
.rftile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px 13px;border:1px solid #f1dfb4;border-radius:14px;
  background:linear-gradient(160deg,#fffaf0,#fdf0cf);color:#b45309;text-decoration:none;transition:transform .12s,box-shadow .12s}
.rftile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(180,83,9,.16)}
.rftile b{font-size:19px;color:#1f2937}.rftile small{font-size:12px;color:#92400e}
.rftile.none{background:#f7f8fa;border-color:#e5e9ee;color:#9aa5b1}.rftile.none b{color:#4b5563}.rftile.none small{color:#9aa5b1}
.rflist{list-style:none;margin:12px 0 0;padding:0}
.rflist li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e8edf2;border-radius:12px;margin-bottom:8px;background:#fff}
.rflist li>a:first-of-type{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rflist small{color:#6b7280;white-space:nowrap}.rflist form{margin:0}
.rfic{flex:0 0 44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;background:#64748b}
.rfic.rfp{background:#dc2626}.rfic.rfx{background:#15803d}.rfic.rfd{background:#2563eb}.rfic.rfi{background:#7c3aed}
.btn.rfdel{color:#b91c1c;border-color:#f3c4c4;background:#fff}.btn.rfdel:hover{background:#fdecec}
.rfempty{margin-top:12px;padding:30px 16px;text-align:center;border:1px dashed #d5dde5;border-radius:14px;color:#6b7280;background:#fafbfc}
.rfmsg{margin:8px 0;padding:8px 12px;border-radius:9px;background:#e7f6ec;color:#166534;font-size:13.5px}.rfmsg.bad{background:#fdecec;color:#b91c1c}
@media(max-width:640px){.rflist li{flex-wrap:wrap}.rflist li>a:first-of-type{flex-basis:calc(100% - 60px)}}

/* Parents: a card for each family (5 Oct 2026) - the teal of the Students & Parents tile */
.pfstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:14px 0}
.pfstat{border-radius:16px;padding:14px 16px;border:1px solid var(--b);background:linear-gradient(135deg,#fff,var(--a))}
.pfstat b{display:block;font-size:28px;line-height:1.1;color:var(--c)}.pfstat span{font-size:12.5px;color:#4b5b63}
.pfstat.t{--a:#dff6f1;--b:#c4ebe3;--c:#0b7c70}.pfstat.g{--a:#e6f6ec;--b:#cfecd8;--c:#15803d}.pfstat.p{--a:#efeafd;--b:#ddd3fa;--c:#6d28d9}
.pfstat.o{--a:#fff3d9;--b:#f6e2b3;--c:#b45309}.pfstat.r{--a:#fde9ea;--b:#f6cfd1;--c:#be123c}
.pfbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.pfsp{flex:1}
.pfsearch{display:flex;align-items:center;gap:8px;flex:1 1 320px;max-width:460px;background:#fff;border:1px solid #cfe6e1;border-radius:12px;padding:9px 13px;color:#0b7c70}
.pfsearch input{border:0;outline:0;flex:1;font:inherit;background:none}.pfsearch:focus-within{box-shadow:0 0 0 3px #d5f1ec}
.pfcount{font-size:13px;color:#0b7c70;font-weight:700}
.pfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pfcard{background:#fff;border:1px solid #dcebe8;border-radius:18px;padding:14px 16px 14px;box-shadow:0 1px 4px rgba(11,60,54,.05);border-top:4px solid var(--k);transition:box-shadow .15s,transform .15s}
.pfcard:hover{box-shadow:0 8px 22px rgba(11,60,54,.12);transform:translateY(-2px)}
.pf0{--k:#0d9488;--kb:#dff6f1}.pf1{--k:#0891b2;--kb:#dff3f9}.pf2{--k:#15803d;--kb:#e3f5e9}.pf3{--k:#6d28d9;--kb:#eee8fd}.pf4{--k:#d97706;--kb:#fdf0d5}.pf5{--k:#db2777;--kb:#fde6f0}
.pfcard header{display:flex;align-items:center;gap:12px}.pfcard header>div{flex:1;min-width:0}
.pfav{flex:0 0 48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--k);color:#fff;font-weight:800;font-size:16px;letter-spacing:.5px}
.pfcard h4{margin:0;font-size:15.5px;color:#10302c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfdv{margin:0;font-size:14px;color:#3c5753;text-align:left}.pfid{margin:1px 0 0;font-size:12px;color:#6b7f7b;font-family:ui-monospace,Consolas,monospace}
.pfn{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--kb);color:var(--k);font-weight:800;font-size:14px}
.pfphs{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pfph{display:inline-flex;align-items:center;gap:5px;background:var(--kb);color:var(--k);border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px;text-decoration:none}
.pfph:hover{filter:brightness(.95)}.pfph.none{background:#f1f3f5;color:#8b96a1;font-weight:500}
.pfad{margin:9px 0 0;font-size:12.5px;color:#55676a}
.pfkids{display:grid;gap:6px;margin-top:11px}
.pfkid{display:flex;align-items:center;gap:9px;background:#f6faf9;border:1px solid #e3eeec;border-radius:11px;padding:7px 11px;text-decoration:none;color:#10302c}
.pfkid:hover{background:#e9f6f3;border-color:#bfe3dc}.pfkid i{flex:0 0 10px;height:10px;border-radius:50%}
.pfkid b{flex:1;font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pfkid small{font-size:12px;color:#5d7370;white-space:nowrap}
.pflost{margin-top:16px;border:1px dashed #f0c3c7;border-radius:14px;padding:11px 14px;background:#fffafa}.pflost summary{cursor:pointer;font-weight:700;color:#be123c}
.pflost .pfkids{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pfback{margin:10px 0}
@media print{.pfbar,.pfback{display:none}.pfgrid{grid-template-columns:repeat(2,1fr)}.pfcard{break-inside:avoid;box-shadow:none}}

/* Payroll > Salary Sheet (5 Oct 2026) - the purple of the Payroll tile */
.slhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.slhead h2{margin:0}.slhead form{margin:0}.slsp{flex:1}
.slstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin:16px 0}
.slstat{border-radius:16px;padding:13px 16px;border:1px solid var(--b);background:linear-gradient(135deg,#fff,var(--a))}
.slstat span{display:block;font-size:12.5px;color:#4b5563}.slstat b{display:block;font-size:22px;color:var(--c);line-height:1.3;font-variant-numeric:tabular-nums}
.slstat small{font-size:11.5px;color:#6b7280}
.slstat.s{--a:#f1ebfd;--b:#e0d5fa;--c:#6d28d9}.slstat.g{--a:#e6f6ec;--b:#cfecd8;--c:#15803d}.slstat.r{--a:#fde9ea;--b:#f6cfd1;--c:#be123c}
.slstat.b{--a:#e8f0fe;--b:#d3e1fb;--c:#1d4ed8}.slstat.p{--a:#f6e8fb;--b:#ead0f5;--c:#a21caf}.slstat.o{--a:#fff3d9;--b:#f6e2b3;--c:#b45309}
.slok{background:#e7f6ec;color:#166534;border-radius:10px;padding:8px 13px;font-size:13.5px;margin:0 0 14px}
.slchecks{background:#fff8e6;border:1px solid #f5d98a;border-radius:12px;padding:10px 14px;margin-bottom:14px}.slchecks summary{cursor:pointer;font-weight:700;color:#92400e}
.slchecks ul{margin:8px 0 0 18px;padding:0;font-size:13.5px;line-height:1.7}
.slgrid2{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-bottom:16px}@media(max-width:900px){.slgrid2{grid-template-columns:1fr}}
.slbox{border:1px solid #e9e4f7;border-radius:14px;padding:12px 14px;background:#fcfbff}.slbox h3{margin:0 0 8px;font-size:15px;color:#4c1d95}
.slsum{width:100%;border-collapse:collapse;font-size:13px}.slsum th,.slsum td{padding:5px 8px;text-align:right;border-bottom:1px solid #f0edf8;font-variant-numeric:tabular-nums}
.slsum th:first-child{text-align:left;font-weight:600}.slsum tr:first-child th{color:#6b7280;font-size:11.5px;font-weight:600}
.slbarc{width:90px}.slbarc i{display:block;height:8px;border-radius:5px;background:linear-gradient(90deg,#a78bfa,#6d28d9);min-width:2px}
.slbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.slsearch input{width:340px;max-width:100%;padding:9px 13px;border:1px solid #ddd3fa;border-radius:11px;font:inherit}.slsearch input:focus{outline:0;box-shadow:0 0 0 3px #ece5fd}
.slwrap{overflow:auto;border:1px solid #e9e4f7;border-radius:14px;max-height:calc(100vh - 150px)}
.sltable{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.sltable thead th{position:sticky;top:0;background:#f3effd;color:#4c1d95;font-size:11.5px;padding:9px 8px;text-align:right;white-space:nowrap;z-index:2}
.sltable thead th:nth-child(2){text-align:left}
.sltable td,.sltable tbody th,.sltable tfoot th{padding:7px 8px;text-align:right;border-bottom:1px solid #f1eef8;font-variant-numeric:tabular-nums;white-space:nowrap}
.sltable tbody th,.sltable tfoot th{text-align:left;font-weight:400}.sltable tbody th b{display:block;font-weight:600;color:#1f2937}.sltable tbody th small{color:#6b7280;font-size:11.5px}
.sltable tr.slrow{cursor:pointer}.sltable tr.slrow:hover td,.sltable tr.slrow:hover th{background:#faf8ff}.sltable tr.slrow.open td,.sltable tr.slrow.open th{background:#f3effd}
.sltable td:first-child{color:#9ca3af;text-align:center}.slinc{color:#15803d;font-weight:700}.slnetc{color:#1d4ed8;font-weight:800}
.slmore{color:#a78bfa}.sltable tr.open .slmore{transform:rotate(180deg)}.sldash{color:#cbd5e1}
.sltable tfoot td,.sltable tfoot th{position:sticky;bottom:0;background:#ede7fc;font-weight:700;border-top:2px solid #c4b5fd}
.sldet>td{background:#fbfaff;padding:12px 14px!important;white-space:normal!important}
.slslip{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:14px;text-align:left}@media(max-width:900px){.slslip{grid-template-columns:1fr}}
.slslip>div{background:#fff;border:1px solid #e9e4f7;border-radius:12px;padding:10px 13px}.slslip h4{margin:0 0 6px;font-size:13px;color:#6d28d9}
.slslip p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:3px 0;font-size:13px;border-bottom:1px dashed #f0edf8}.slslip p b{font-weight:600}
.slslip p.sltot{border-bottom:0;border-top:1px solid #ddd3fa;margin-top:4px;font-weight:700}.slslip p.slnet{border:0;background:#e8f0fe;color:#1d4ed8;border-radius:8px;padding:6px 9px;margin-top:6px;font-size:14.5px}
.slslip p.slnet b{font-weight:800}.slbad{color:#be123c}
.slhow,.sllink{margin-top:14px;border:1px solid #e9e4f7;border-radius:12px;padding:10px 14px;background:#fcfbff}.slhow summary,.sllink summary{cursor:pointer;font-weight:700;color:#4c1d95}
.slhow ul{margin:8px 0 0 18px;padding:0;font-size:13.5px;line-height:1.8}.sllink input{padding:7px 10px;border:1px solid #ddd3fa;border-radius:9px;font:inherit;max-width:100%}
@media print{.slbar,.slhead .btn,.slhead form,.sllink,.slhow,.slmore{display:none!important}.slwrap{max-height:none;overflow:visible;border:0}.sltable{font-size:9.5px}.sltable thead th,.sltable tfoot td,.sltable tfoot th{position:static}}

/* Purchase orders (5 Oct 2026) - the green of the Inventory & Resources tile */
.postats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:14px 0}
.postat{border-radius:16px;padding:13px 16px;border:1px solid var(--b);background:linear-gradient(135deg,#fff,var(--a))}
.postat b{display:block;font-size:24px;color:var(--c);font-variant-numeric:tabular-nums}.postat span{font-size:12.5px;color:#4b5563}
.postat.g{--a:#e6f6ec;--b:#cfecd8;--c:#15803d}.postat.b{--a:#e8f0fe;--b:#d3e1fb;--c:#1d4ed8}.postat.o{--a:#fff3d9;--b:#f6e2b3;--c:#b45309}
.postat.p{--a:#f1ebfd;--b:#e0d5fa;--c:#6d28d9}.postat.t{--a:#dff6f1;--b:#c4ebe3;--c:#0b7c70}
.pocard .pohead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.pohead h3{margin:0}.pohead form{margin:0}.posp{flex:1}
.posearch{padding:8px 12px;border:1px solid #cfe6d8;border-radius:10px;font:inherit;width:240px;max-width:100%}
.powrap{overflow:auto;border:1px solid #e3ebe6;border-radius:12px}
.polist{width:100%;border-collapse:collapse;font-size:13.5px}.polist th{background:#eef8f2;color:#14532d;text-align:left;padding:9px 10px;font-size:12px;white-space:nowrap}
.polist td{padding:8px 10px;border-top:1px solid #eef2ef}.polist .num{text-align:right;font-variant-numeric:tabular-nums}.polist tr.pogrand td{font-weight:800;background:#f6fbf8;border-top:2px solid #9fd6b1}
.pochip{display:inline-block;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;white-space:nowrap;background:#eceff1;color:#4b5563}
.pochip.s1{background:#e8f0fe;color:#1d4ed8}.pochip.s2,.pochip.s3{background:#fff3d9;color:#b45309}.pochip.s4,.pochip.s5{background:#f1ebfd;color:#6d28d9}
.pochip.s6{background:#dff6f1;color:#0b7c70}.pochip.s7{background:#dcf5e3;color:#166534}
.poempty{padding:34px 16px;text-align:center;border:1px dashed #cfe6d8;border-radius:14px;color:#4b5b52;background:#f6fbf8}
.pogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 14px;margin-bottom:14px}
.pogrid label,.podocs label{display:block;font-size:12.5px;color:#4b5563;font-weight:600}.pogrid label.powide{grid-column:1/-1}
.pogrid input,.pogrid textarea,.podocs input{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:8px 10px;border:1px solid #d5dfd9;border-radius:9px;font:inherit;font-weight:400}
.posub{margin:16px 0 8px;color:#14532d;font-size:14.5px}
.poitems{width:100%;border-collapse:collapse}.poitems th{background:#eef8f2;color:#14532d;font-size:12px;padding:8px;text-align:left}
.poitems td{padding:3px 4px;border-top:1px solid #eef2ef}.poitems input{width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid transparent;border-radius:7px;font:inherit;background:#f8faf9}
.poitems input:focus{outline:0;border-color:#15803d;background:#fff}.poitems td:nth-child(1) input,.poitems td:nth-child(3) input{text-align:right}
.poitems .pot{text-align:right;font-variant-numeric:tabular-nums;padding-right:10px;white-space:nowrap}.poitems .potl{text-align:right;font-weight:600;color:#4b5563}
.poitems tfoot td{background:#f6fbf8}.poitems tr.pogrand td{font-weight:800;font-size:15px;color:#14532d;border-top:2px solid #9fd6b1}
.porm{border:0;background:none;color:#b91c1c;font-size:18px;cursor:pointer;line-height:1}
.potrack{list-style:none;display:grid;grid-template-columns:repeat(8,1fr);gap:0;margin:8px 0 12px;padding:0}
.potrack li{position:relative;text-align:center;padding:0 4px;font-size:12px;color:#9aa5b1}
.potrack li::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:3px;background:#e3e9e5;z-index:0}.potrack li:first-child::before{display:none}
.potrack li i{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin:0 auto 5px;border-radius:50%;background:#e9eeeb;color:#6b7280;font-style:normal;font-weight:800}
.potrack li b{display:block;font-size:12.5px;color:#6b7280}.potrack li small{display:block;font-size:11px;line-height:1.3}.potrack li em{display:block;font-style:normal;font-size:10.5px;color:#15803d;margin-top:2px}
.potrack li.done i{background:#15803d;color:#fff}.potrack li.done::before,.potrack li.now::before{background:#15803d}.potrack li.done b{color:#14532d}
.potrack li.now i{background:#fff;color:#15803d;box-shadow:0 0 0 3px #15803d}.potrack li.now b{color:#14532d;font-weight:800}
@media(max-width:860px){.potrack{grid-template-columns:repeat(4,1fr);row-gap:14px}.potrack li:nth-child(5)::before{display:none}}
.ponext{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f6fbf8;border:1px solid #d9ecdf;border-radius:12px;padding:10px 13px;margin-bottom:14px}.ponext form{margin:0}
.podone{color:#166534}.btn.podel{color:#b91c1c;border-color:#f3c4c4;background:#fff}
.pocols{display:grid;grid-template-columns:1fr 300px;gap:14px}@media(max-width:900px){.pocols{grid-template-columns:1fr}}
.poinfo{border:1px solid #e3ebe6;border-radius:12px;padding:8px 12px;background:#fff}.poinfo p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:5px 0;border-bottom:1px dashed #eef2ef;font-size:13px}
.poinfo p:last-child{border:0}.poinfo span{color:#6b7280}.poinfo b{font-weight:600;text-align:right}
.podocs{margin-top:10px;display:grid;gap:8px;border:1px solid #e3ebe6;border-radius:12px;padding:10px 12px;background:#fcfdfc}
.pomail{margin-top:14px;border:1px solid #d9ecdf;border-radius:12px;padding:10px 14px;background:#f6fbf8}.pomail summary{cursor:pointer;font-weight:700;color:#14532d}
.pomail textarea{width:100%;box-sizing:border-box;margin-top:8px;border:1px solid #d5dfd9;border-radius:10px;padding:10px 12px;font:13px/1.5 ui-monospace,Consolas,monospace;background:#fff}
.poproc{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.poproc li{display:flex;gap:14px;align-items:flex-start;border:1px solid #e3ebe6;border-radius:14px;padding:12px 14px;background:#fff}
.poproc i{flex:0 0 36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(160deg,#4ade80,#15803d);color:#fff;font-style:normal;font-weight:800}
.poproc b{font-size:15px;color:#14532d}.poproc p{margin:3px 0 0;font-size:13.5px;line-height:1.6;color:#374151}
.porules{border:1px solid #f6e2b3;background:#fffaf0;border-radius:14px;padding:12px 16px}.porules b{color:#92400e}.porules ul{margin:6px 0 0 18px;padding:0;font-size:13.5px;line-height:1.8}

/* School Inventory, Suppliers, Stock Report (5 Oct 2026) */
.invnav{margin-bottom:6px}.invnav+.ttbar{margin-top:0}
.invchips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.invchip{padding:6px 13px;border-radius:999px;border:1px solid #d9ecdf;background:#fff;color:#14532d;font-size:13px;text-decoration:none}
.invchip:hover{background:#f1f9f4}.invchip.on{background:#15803d;border-color:#15803d;color:#fff;font-weight:700}
.invchip.warn{border-color:#f6e2b3;color:#b45309}.invchip.warn.on{background:#d97706;border-color:#d97706;color:#fff}
.invlist td small{display:block;color:#6b7280;font-size:11.5px}.invfind{margin:0}
.invst{display:inline-block;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;white-space:nowrap}
.invst.ok{background:#dcf5e3;color:#166534}.invst.low{background:#fff3d9;color:#b45309}.invst.out{background:#fde9ea;color:#be123c}
.invnew{margin-top:14px;border:1px dashed #9fd6b1;border-radius:12px;padding:10px 14px;background:#f6fbf8}.invnew summary{cursor:pointer;font-weight:700;color:#14532d}
.invform{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;margin-top:10px;align-items:end}
.invform label{display:block;font-size:12.5px;color:#4b5563;font-weight:600}.invform label.w2{grid-column:span 2}
.invform input,.invform select{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:8px 10px;border:1px solid #d5dfd9;border-radius:9px;font:inherit;font-weight:400;background:#fff}
@media(max-width:800px){.invform{grid-template-columns:1fr 1fr}}
.invwait form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0;padding:8px 12px;border:1px solid #f6e2b3;background:#fffaf0;border-radius:10px;font-size:13.5px}
.invwait form .btn{margin-left:auto}
.invtop{display:grid;grid-template-columns:200px 1fr;gap:14px;margin-bottom:6px}@media(max-width:860px){.invtop{grid-template-columns:1fr}}
.invbig{border-radius:16px;background:linear-gradient(150deg,#e6f6ec,#c9ecd6);border:1px solid #bfe3cb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px}
.invbig b{font-size:44px;line-height:1;color:#14532d}.invbig span{color:#35604c;font-size:13.5px;margin-top:4px}.invbig small{color:#b45309;font-size:12px;margin-top:6px}
.invmoves{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media(max-width:1000px){.invmoves{grid-template-columns:1fr}}
.invmove{border:1px solid var(--b);background:var(--a);border-radius:14px;padding:10px 12px;margin:0;display:grid;gap:6px;align-content:start}
.invmove.in{--a:#f1faf4;--b:#cfecd8;--c:#15803d}.invmove.out{--a:#f3f0fd;--b:#ddd3fa;--c:#6d28d9}.invmove.adj{--a:#fffaf0;--b:#f6e2b3;--c:#b45309}
.invmove h4{margin:0;color:var(--c);font-size:14.5px}.invmove label{font-size:12px;color:#4b5563;font-weight:600}
.invmove input{display:block;width:100%;box-sizing:border-box;margin-top:2px;padding:6px 9px;border:1px solid #d5dfd9;border-radius:8px;font:inherit;font-weight:400;background:#fff}
.invmove .btn{justify-self:start;margin-top:2px}
.invmv{display:inline-block;border-radius:7px;padding:2px 9px;font-size:12px;font-weight:700}.invmv.in{background:#dcf5e3;color:#166534}.invmv.out{background:#ece5fd;color:#6d28d9}.invmv.adj{background:#fff3d9;color:#b45309}
.supnum{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px;padding-top:9px;border-top:1px dashed #e3eeec;font-size:12.5px;color:#55676a}.supnum b{color:#10302c}
.supact{display:flex;align-items:center;gap:7px;margin-top:10px}.supact form{margin:0}
.invperiod{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}.invperiod input{padding:6px 8px;border:1px solid #d5dfd9;border-radius:8px;font:inherit}
.invrep tr.invcat td{background:#eef8f2;color:#14532d;font-weight:800;font-size:12.5px;letter-spacing:.2px}.invrep tr.invlowrow td:first-child{box-shadow:inset 3px 0 0 #d97706}
.invrep2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}@media(max-width:800px){.invrep2{grid-template-columns:1fr}}
@media print{.invnav,.postats{display:none!important}.powrap{overflow:visible;border:0}.invrep{font-size:10px}}

/* Events: share with specific people (5 Oct 2026) */
.pilltag.a-person{background:#e6eefc;color:#1d4ed8}
.evppl{border:1px dashed #b9cdf6;border-radius:10px;padding:6px 9px;background:#f6f9ff;margin:4px 0;min-width:200px}
.evppl summary{cursor:pointer;font-size:12.5px;font-weight:700;color:#1d4ed8}.evppl summary b{background:#1d4ed8;color:#fff;border-radius:999px;padding:0 7px;font-size:11.5px}
.evppl input[type=search]{width:100%;box-sizing:border-box;margin:6px 0 4px;padding:6px 9px;border:1px solid #cdd9f3;border-radius:8px;font:inherit;font-size:13px}
.evppll{max-height:190px;overflow:auto;display:grid;gap:1px}
.evppll label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:400;padding:3px 4px;border-radius:6px;cursor:pointer}
.evppll label:hover{background:#e6eefc}.evppll label input{width:auto;margin:0}
.evppll label[hidden]{display:none!important}

/* Event marking sheets - the Quran competition (5 Oct 2026) */
.embox{margin-top:16px}.emrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid #d9ecdf;border-radius:12px;background:#f6fbf8;text-decoration:none;color:#14532d;margin-bottom:8px}
.emrow:hover{background:#e9f6ee}.emrow b{font-size:15px}.emrow small{color:#4b5b52;flex:1}.emrow em{font-style:normal;font-weight:700}.emico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#15803d;color:#fff}
.emnew{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.emtop{display:flex;align-items:center;gap:10px}.emtop h2{margin:0}
.emtabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px;padding:6px;background:#f3f7f5;border-radius:14px}
.emtab{padding:7px 13px;border-radius:10px;background:#fff;border:1px solid #e3ebe6;color:#1f2937;text-decoration:none;font-family:"EG Thaana",Faruma,"MV Boli",sans-serif;font-size:14.5px;line-height:1.7;white-space:nowrap}
.emtab small{font-family:system-ui,sans-serif;font-size:11px;background:#eef2f0;border-radius:999px;padding:1px 7px;margin:0 6px 0 0;color:#4b5563}
.emtab:hover{background:#eef8f2}.emtab.on{background:#15803d;border-color:#15803d;color:#fff}.emtab.on small{background:rgba(255,255,255,.25);color:#fff}
.emtab.x{font-family:inherit;font-size:13.5px;font-weight:700;background:#e8f0fe;border-color:#d3e1fb;color:#1d4ed8}.emtab.x.on{background:#1d4ed8;color:#fff}
.emtab.s{font-family:inherit;font-size:13.5px;background:#fff8e6;border-color:#f5d98a;color:#92400e}.emtab.s.on{background:#d97706;color:#fff}
.emhead{text-align:center;font-family:"EG Thaana",Faruma,"MV Boli",sans-serif;margin-bottom:10px}.emhead p{margin:0;font-size:16px;line-height:1.9}
.emhead h3{margin:4px 0 0;font-size:19px;color:#14532d;font-weight:400}
.emwrap{overflow:auto;border:1px solid #cfe6d8;border-radius:12px}
.emtable{width:100%;border-collapse:collapse;font-family:"EG Thaana",Faruma,"MV Boli",sans-serif;font-size:15px}
.emtable th{background:#dcefe2;color:#14532d;padding:8px 10px;font-weight:400;border:1px solid #c3e0cd;line-height:1.7;white-space:nowrap}
.emtable th small{display:block;font-family:system-ui,sans-serif;font-size:12px;font-weight:700;color:#35604c}
.emtable td{border:1px solid #e1ece5;padding:5px 10px;text-align:center;line-height:1.9}
.emtable td.emname{text-align:right;white-space:nowrap}.emtable td.emhouse{white-space:nowrap}.emtable td.emno{color:#6b7280;font-family:system-ui,sans-serif;font-size:13px}
.emdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:7px;vertical-align:1px}
.emin{width:74px;padding:6px 8px;border:1px solid #cfdcd4;border-radius:8px;font:600 14px system-ui,sans-serif;text-align:center;background:#fbfdfc}
.emin:focus{outline:0;border-color:#15803d;box-shadow:0 0 0 3px #d5f0de;background:#fff}.emin.bad{border-color:#dc2626;background:#fdecec}
.emtot{font:800 15px system-ui,sans-serif;color:#14532d}.emrank{font:800 15px system-ui,sans-serif}
.emrank.r1{background:#fff3c4;color:#92400e}.emrank.r2{background:#eceff1;color:#374151}.emrank.r3{background:#fbe3d0;color:#9a3412}
.emx form{margin:0}.emx button{border:0;background:none;color:#b91c1c;font-size:18px;cursor:pointer}
.emadd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px dashed #9fd6b1;border-radius:12px;background:#f6fbf8;font-family:"EG Thaana",Faruma,"MV Boli",sans-serif}
.emadd b{font-weight:400;color:#14532d}.emadd input,.emadd select{padding:7px 10px;border:1px solid #d5dfd9;border-radius:9px;font:inherit;background:#fff}.emadd input{flex:1;min-width:240px}
.emres{margin-top:14px;break-inside:avoid}.emres h4{margin:0 0 5px;font-family:"EG Thaana",Faruma,"MV Boli",sans-serif;font-weight:400;font-size:17px;color:#14532d}
.emnone{color:#9aa5b1}
.emsetg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 14px}.emsetup label{display:block;font-size:12.5px;font-weight:600;color:#4b5563}
.emsetup input,.emsetup select{display:block;width:100%;box-sizing:border-box;margin-top:3px;padding:7px 10px;border:1px solid #d5dfd9;border-radius:9px;font:inherit;font-weight:400}
.emsetup input[dir=auto]{font-family:"EG Thaana",Faruma,"MV Boli",system-ui,sans-serif;font-size:15px}
.emsetcols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:8px}@media(max-width:860px){.emsetcols{grid-template-columns:1fr}}
.emsett{width:100%;border-collapse:collapse}.emsett th{text-align:left;font-size:12px;color:#6b7280;padding:4px}.emsett td{padding:3px 4px}.emsett td:nth-child(2){width:90px;text-align:center}
.emdel{margin-top:18px;padding-top:12px;border-top:1px dashed #f3c4c4}.emdel .btn{color:#b91c1c;border-color:#f3c4c4;background:#fff}
@media print{.empanel{border:0;box-shadow:none;padding:0}.emwrap{overflow:visible;border:0}.emin{border:0;background:none;width:auto;padding:0}.emtable th{background:#eee!important}}

/* Salary Sheet: the workbook's tabs under it (5 Oct 2026) */
.salnav{flex-wrap:wrap;gap:4px;margin:10px 0 12px}.salnav .ztab.on{background:#6d28d9;color:#fff}

/* Payroll: compact view on every tab (5 Oct 2026) */
.paytabs{align-items:center}.paysp{flex:1}
.paycompactbtn{background:#fff;border:1px solid #c4b5fd;color:#6d28d9;border-radius:9px;padding:6px 13px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;margin-bottom:4px}
.paycompactbtn:hover{background:#f5f1fe}body.paycompact .paycompactbtn{background:#6d28d9;color:#fff;border-color:#6d28d9}
body.paycompact .tbar,body.paycompact .payhead,body.paycompact .msg,body.paycompact main>footer,body.paycompact .panel>p.sub,body.paycompact .panel>p.hint,
body.paycompact .panel>h2,body.paycompact .slhead p.sub,body.paycompact .slstats,body.paycompact .slgrid2,body.paycompact .slhow,body.paycompact .sllink,
body.paycompact .slok,body.paycompact .back,body.paycompact a.backlink{display:none!important}
body.paycompact main{padding-top:6px!important;padding-bottom:6px!important}
body.paycompact .paytabs{margin-bottom:4px}body.paycompact .paytabs .ztab{padding-top:5px;padding-bottom:5px;font-size:13px}
body.paycompact .panel{padding:8px 10px;margin-bottom:8px}body.paycompact .znav.sub{margin:4px 0 6px}
body.paycompact .asbar{margin-bottom:5px}body.paycompact .slwrap{max-height:calc(100vh - 120px)}
body.paycompact .sltable td,body.paycompact .sltable tbody th{padding:3px 8px}body.paycompact .sltable tbody th small{display:none}
@media print{.paycompactbtn{display:none}}

/* Payroll Reports and the salary slip generator (5 Oct 2026) */
.prrep{border:1px solid #e9e4f7;border-radius:14px;background:#fcfbff;margin-bottom:10px}
.prrep summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none}.prrep summary::-webkit-details-marker{display:none}
.prrep summary b{color:#4c1d95;font-size:15px;white-space:nowrap}.prrep summary span{flex:1;font-size:13px;color:#6b7280}
.prrep summary em{font-style:normal;font-weight:700;font-size:12.5px;background:#ede7fc;color:#6d28d9;border-radius:999px;padding:3px 12px;white-space:nowrap}
.prrep[open] summary{border-bottom:1px solid #e9e4f7}.prbody{padding:12px 16px;overflow:auto}.prbody h4{margin:14px 0 4px;color:#4c1d95;font-size:14px}
.prbody .slsum td,.prbody .slsum th{white-space:nowrap}.prbody tr.sltotrow th,.prbody tr.sltotrow td{font-weight:800;border-top:2px solid #c4b5fd;background:#f3effd}
.prgen{margin-top:16px}.prcols{display:grid;grid-template-columns:1fr 320px;gap:16px;margin-top:10px}@media(max-width:900px){.prcols{grid-template-columns:1fr}}
.prbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.prlist{max-height:380px;overflow:auto;border:1px solid #e9e4f7;border-radius:12px;background:#fff}
.prp{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid #f3f0fa;cursor:pointer}.prp[hidden]{display:none}.prp:hover{background:#faf8ff}
.prp input{width:17px;height:17px;accent-color:#6d28d9}.prp span{flex:1;min-width:0}.prp b{display:block;font-size:13.5px}.prp small{color:#6b7280;font-size:11.5px}
.prp em{font-style:normal;font-weight:700;color:#1d4ed8;font-variant-numeric:tabular-nums;font-size:13px}.prp a{font-size:12.5px;white-space:nowrap}
.prright{display:grid;gap:10px;align-content:start;border:1px solid #e9e4f7;border-radius:14px;padding:14px;background:#fcfbff}
.prright label{font-size:12.5px;font-weight:600;color:#4b5563}.prright label input:not([type=checkbox]){display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:8px 10px;border:1px solid #ddd3fa;border-radius:9px;font:inherit}
.prright label.prchk{display:flex;align-items:center;gap:8px;font-weight:400;font-size:13.5px}.prright .btn{justify-content:center;text-align:center}
.btn.prgo{background:#6d28d9;border-color:#6d28d9}
.prframe{width:100%;height:1160px;border:1px solid #d5d9e0;border-radius:12px;margin-top:14px;background:#dfe3e8}
body.paycompact .prgen .sub{display:none}
@media print{body.prone .tbar,body.prone .payhead,body.prone .paytabs,body.prone .prgen,body.prone .slstats,body.prone .slhead p,body.prone .prrep:not(.prthis){display:none!important}
  body.prone .prrep{border:0}body.prone .prrep summary span,body.prone .prrep summary em{display:none}body.prone .prbody{overflow:visible;padding:0}}

/* phone: a sheet moved by the finger itself (nav.js pan) - taller, and nothing in it selected while dragging (5 Oct 2026) */
@media(max-width:900px){.slistwrap.sheetwrap{max-height:78vh;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .slistwrap.sheetwrap input,.slistwrap.sheetwrap select,.slistwrap.sheetwrap textarea{-webkit-user-select:auto;user-select:auto}}

/* Salary slips by e-mail (5 Oct 2026) */
.prsend{margin-top:16px;border:1px solid #cfe6d8;background:#f6fbf8;border-radius:14px;padding:14px 16px}
.prsendh{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.prsendh>div{flex:1;min-width:260px}.prsendh b{display:block;color:#14532d;font-size:15.5px}.prsendh span{font-size:13px;color:#4b5b52}
.prsend .prchk{display:flex;align-items:center;gap:7px;font-size:13px}.btn.prsendbtn{background:#15803d;border-color:#15803d;padding:10px 20px}.btn.prsendbtn[disabled]{opacity:.5;cursor:not-allowed}
.prwarn{background:#fff8e6;border:1px solid #f5d98a;color:#92400e;border-radius:9px;padding:7px 12px;font-size:13px;margin:10px 0 0}
.prbarp{height:10px;border-radius:6px;background:#dcefe4;overflow:hidden;margin-top:12px}.prbarp i{display:block;height:100%;width:0;background:#15803d;transition:width .4s}
#prTxt{font-size:13.5px;font-weight:700;color:#14532d;margin:6px 0}#prRes td.prok{color:#15803d;font-weight:700}#prRes td.prbad{color:#b45309}
.prmail{margin-top:12px;border-top:1px dashed #cfe6d8;padding-top:10px}.prmail summary{cursor:pointer;font-weight:700;color:#14532d;font-size:13.5px}
.prmailf{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:8px}.prmailf label{font-size:12.5px;font-weight:600;color:#4b5563}
.prmailf input{display:block;margin-top:3px;padding:8px 10px;border:1px solid #d5dfd9;border-radius:9px;font:inherit;min-width:250px}

.prwho{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:8px}.prwho label{display:flex;align-items:center;gap:7px;font-size:13.5px}
.prmail summary small{font-weight:400;color:#4b5b52}

.prsend .prchk input{width:auto!important;flex:0 0 auto;margin:0}.prsend .prchk{max-width:260px}
.prsendh>div>b:first-child{display:block;margin-bottom:3px}.prsendh>div span b{display:inline}

/* Marking sheet drawn like the school's Google Sheet (5 Oct 2026) */
/* the judges: their name beside Judge on the Setup page (green = a staff member who can enter marks), and under
   the printed sheet with a line to sign (8 Oct 2026) */
.emsett input.emjok{border-color:#3fbf5f;background:#f0fbf3}
.emjlist{position:absolute;z-index:80;max-height:260px;overflow:auto;background:#fff;border:1px solid #c9ced8;border-radius:8px;box-shadow:0 8px 24px #0002;padding:4px}
.emsett select{min-width:86px}
.emjo{padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px}.emjo:hover{background:#eef2fb}
.emjnone{padding:6px 10px;font-size:12px;color:#6b7280}
.qjudges{display:flex;flex-wrap:wrap;gap:12px 48px;margin:22px 6px 0;font-size:14px}
.qjsign{display:flex;align-items:flex-end;gap:8px}.qjsign span{margin-right:16px}
.qjsign i{display:inline-block;width:150px;height:18px;border-bottom:1px solid #333}
.qsheet{background:#fff;padding:6px 0 10px;font-family:"EG Thaana",Faruma,"MV Boli",Arial,sans-serif}
.qhead{text-align:center;margin:0 0 8px}.qhead p{margin:0;line-height:1.8}.qhead .q1{font-size:13px}.qhead .q2{font-size:20px}.qhead .q3{font-size:20px}
.qwrap{overflow:auto}
.qtable{border-collapse:collapse;margin:0 auto;background:#fff;color:#000;font-size:15px}
.qtable th,.qtable td{border:1px solid #000;padding:3px 7px;text-align:center;vertical-align:middle;line-height:1.7}
.qtable th{font-weight:400;background:#fff}
.qtable th.qres{font-size:17px}.qtable th.qjudge{font-size:13px;font-weight:700}.qtable th.qtoth{font-size:12px;width:62px}.qtable th.qrankh{font-size:13px;width:44px}
.qtable th.qcrit{font-size:22px;font-weight:700;min-width:58px;height:110px;white-space:nowrap}
.qtable th.qmax{background:#ffff00;font:400 19px Arial,sans-serif}.qtable th.qfull{font:700 17px Arial,sans-serif}
.qtable th.qno,.qtable th.qname,.qtable th.qhouse{font-size:17px}.qtable th.qno{font-family:Arial,sans-serif;font-size:18px}
.qtable td.qno{font:15px Arial,sans-serif;width:34px}.qtable td.qname{text-align:right;min-width:210px;white-space:nowrap;position:relative}
.qtable td.qhouse{min-width:80px;white-space:nowrap}
.qtable td.qm{font:15px Arial,sans-serif;width:58px;padding:2px}.qtable td.qtot{background:#d6e3bc;font:700 15px Arial,sans-serif;width:62px}
.qtable td.qrank{background:#d6e3bc;font:15px Arial,sans-serif;width:44px}.qtable td.qrank.r1,.qtable td.qrank.r2,.qtable td.qrank.r3{color:#cc0000;font-weight:700}
.qtable tr.qempty td{height:26px}
.qtable .emin{width:50px;border:0;background:transparent;text-align:center;font:15px Arial,sans-serif;padding:2px 0;border-radius:4px}
.qtable .emin:focus{outline:2px solid #1a73e8;background:#e8f0fe}.qtable .emin.bad{background:#fdecec;outline:2px solid #dc2626}
.qdel{position:absolute;left:3px;top:50%;transform:translateY(-50%);margin:0;opacity:0}.qtable tr:hover .qdel{opacity:1}
.emconf{position:absolute;z-index:90;background:#fff;border:1px solid #e5c7c7;border-radius:10px;box-shadow:0 10px 28px #0003;padding:10px 12px;max-width:320px;font-size:13px}
.emconf p{margin:0 0 8px;color:#333}.emconf div{display:flex;gap:6px;justify-content:flex-end}.emconf .emcyes{background:#b91c1c;color:#fff;border-color:#b91c1c}
.qdel button{border:0;background:none;color:#b91c1c;font-size:16px;cursor:pointer}
.qresgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px 22px}.qresbox .q3,.qhousebox .q3{text-align:center;font-size:18px;margin:0 0 4px}
.qtable.qsmall{width:100%;font-size:15px}.qtable.qsmall th{font-weight:700;background:#f3f3f3}.qtable.qsmall th small{display:block;font:11px Arial,sans-serif}
.qtable.qsum{width:auto;margin-bottom:6px}.qhouses{display:grid;grid-template-columns:repeat(auto-fill,minmax(560px,1fr));gap:18px;margin-top:14px}
.qhousebox .q3{padding:3px;border:1px solid #000;border-bottom:0}.qtable td.qcat{font-size:13px;white-space:nowrap}
@media print{@page{size:A4 portrait;margin:10mm}.qwrap{overflow:visible}.qtable .emin{width:auto}.qtable th.qcrit{height:90px}}

/* My page > Salary (5 Oct 2026) */
.myslips{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:12px}
.myslip{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:16px;border:1px solid #e0d5fa;background:linear-gradient(140deg,#fff,#f3effd);text-decoration:none;color:#1f2937;transition:transform .12s,box-shadow .12s}
.myslip:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(76,29,149,.13)}.myslip.new{border-color:#a78bfa;background:linear-gradient(140deg,#fff,#ede7fc)}
.myslipm{font-weight:800;color:#4c1d95;font-size:15px}.myslip b{font-size:26px;color:#1d4ed8;font-variant-numeric:tabular-nums;margin-top:6px}.myslip small{color:#6b7280;font-size:12px}
.myslipd{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:#4b5563;margin-top:8px}.myslip em{font-style:normal;font-weight:700;color:#6d28d9;font-size:13px;margin-top:8px}
.prpub{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding:12px 16px;border:1px solid #e0d5fa;background:#faf8ff;border-radius:14px}
.prpub>div{flex:1;min-width:260px}.prpub b{display:block;color:#4c1d95;font-size:14.5px}.prpub span{font-size:13px;color:#4b5563}.prpub span b{display:inline;color:inherit;font-size:inherit}

/* Students: tabs with a green underline, and the class filter in its own box (5 Oct 2026) */
.znav.sttop{border-bottom:1px solid #e3ebe6;gap:4px;margin-bottom:14px}
.znav.sttop .ztab{background:none!important;border:0!important;border-radius:10px 10px 0 0!important;color:#1f2937!important;font-size:15px;padding:10px 20px!important;box-shadow:none!important}
.znav.sttop .ztab:hover{background:#f1f8f4!important}
.znav.sttop .ztab.on{background:#e7f5ec!important;color:#15603d!important;font-weight:700;box-shadow:inset 0 -3px 0 #1e7a4c!important}
.znav.sttop .ztab .zc{background:#eceff1;color:#374151;border-radius:999px;padding:1px 9px;font-size:12.5px}
.stfilter{border:1px solid #dcebe2;background:#f6faf7;border-radius:16px;padding:16px 20px 18px;margin-bottom:16px}
.stfh{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.stfi{color:#1e6a4a;margin-top:2px}
.stfh b{display:block;font-size:17px;color:#14332a}.stfh span span,.stfh div>span{font-size:13.5px;color:#5b6b63}
.znav.stchips{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0 0 14px;padding:0}
.znav.stchips .ztab{display:inline-flex;align-items:center;gap:10px;background:#fff!important;border:1px solid #dfe5e1!important;border-radius:10px!important;
  padding:9px 16px!important;color:#1f2937!important;font-weight:500;font-size:14.5px;box-shadow:0 1px 2px rgba(0,0,0,.03)!important}
.znav.stchips .ztab:hover{border-color:#9fd0b4!important;background:#f3faf6!important}
.znav.stchips .ztab .zc{background:#eef1ef;color:#374151;border-radius:999px;padding:2px 9px;font-size:12.5px;font-weight:600}
.znav.stchips .ztab.on{background:#1e7a4c!important;border-color:#1e7a4c!important;color:#fff!important;font-weight:700}
.znav.stchips .ztab.on .zc{background:rgba(255,255,255,.22);color:#fff}
.znav.stchips .ztab.sen{background:#efedfd!important;border-color:#d9d3fa!important;color:#4c3aa8!important}
.znav.stchips .ztab.sen.on{background:#5b47c4!important;border-color:#5b47c4!important;color:#fff!important}
.stfilter .zfind{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.stfilter .zfind input[name=q]{flex:0 1 620px;min-width:240px;padding:11px 14px 11px 40px;border:1px solid #dfe5e1;border-radius:10px;font-size:15px;background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 13px center}
.stfilter .zfind input[name=q]:focus{outline:0;border-color:#1e7a4c;box-shadow:0 0 0 3px #d6efe0}
.stfilter .zfind .btn{background:#1e6a4a!important;border-color:#1e6a4a!important;color:#fff!important;padding:11px 44px!important;font-size:15px;border-radius:10px}
.stfilter .zfind .linkbtn{color:#1e6a4a;font-weight:500;margin-left:10px}

/* My Overtime, redesigned (5 Oct 2026) */
.myot{margin-top:6px}.myothead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.myothead h1{margin:0;font-size:30px;color:#14332a}.myothead p{margin:2px 0 0;color:#5b6b63;font-size:14.5px}
.myotbtns{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.myotbtns>div{display:flex;gap:10px}.myotbtns>span{font-size:12.5px;color:#6b7280}
.myot .btn.ghost{background:#fff;border:1px solid #cfdcd4;color:#1f2937}.myot .btn.mygreen{background:#1e7a4c;border-color:#1e7a4c;color:#fff}
.myotinfo{display:grid;grid-template-columns:repeat(3,1fr);background:#eef6f1;border:1px solid #dcebe2;border-radius:14px;padding:12px 20px;margin-bottom:14px}
.myotinfo>div{padding:0 16px;border-left:1px solid #cfe0d6}.myotinfo>div:first-child{border-left:0;padding-left:0}
.myotinfo span{display:block;font-size:12.5px;color:#5b6b63}.myotinfo b{font-size:16px;color:#14332a}
.myotgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}@media(max-width:1000px){.myotgrid{grid-template-columns:1fr}.myotinfo{grid-template-columns:1fr}.myotinfo>div{border:0;padding:4px 0}}
.mycard{background:#fff;border:1px solid #e3ebe6;border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px rgba(15,40,25,.04)}
.mycard h3{margin:0;font-size:17px;color:#14332a}.mycard .sub{margin:3px 0 12px;font-size:13px;color:#5b6b63}
.myrephead{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}.myrephead h3{flex:1}
.mypages{display:flex;border:1px solid #cfdcd4;border-radius:9px;overflow:hidden}.mypages button{border:0;background:#fff;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;color:#374151}
.mypages button.on{background:#1e7a4c;color:#fff;font-weight:700}
.myrep tr.myhide{display:none}
.myinfo{margin:12px 0 0;background:#eaf2fd;border:1px solid #d3e3fb;color:#1e3a8a;border-radius:10px;padding:9px 13px;font-size:13px}
.myside{display:grid;gap:14px}
.mydet{background:#eef6f1;border-color:#d4e8db}
.mydetg{display:grid;grid-template-columns:1fr 130px;gap:10px;margin-bottom:10px}
.mydet label{display:block;font-size:12.5px;font-weight:600;color:#374151}
.mydet select,.mydet textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:9px 11px;border:1px solid #cfdcd4;border-radius:9px;font:inherit;font-weight:400;background:#fff}
.mydet textarea{min-height:76px;border:2px solid #2e8b57;resize:vertical}.mydet textarea:focus{outline:0;box-shadow:0 0 0 3px #d6efe0}
.mytime{display:block;margin-top:5px;padding:9px 11px;border-radius:9px;background:#e6eefc;font-weight:400;color:#1f2937;white-space:nowrap}
.myfine{margin:6px 0 0;font-size:12px;color:#6b7280}.myfine.ok{color:#15803d}.myfine.bad{color:#b91c1c}
.mywarn{background:#fff8e6;border-color:#f5d98a}.mywarn h3 span{color:#d97706}.mywarn ul{margin:0 0 10px;padding:0;list-style:none;font-size:13.5px;line-height:1.9}
.myact{background:#eef3fd;border-color:#d3e1fb}.myact h3{margin-bottom:10px}
.myrow{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 14px;margin-top:8px;border:1px solid #d5dfee;border-radius:10px;background:#fff;font:inherit;font-size:14px;cursor:pointer;color:#1f2937}
.myrow:hover{background:#f6f9ff}.myrow b{color:#6b7280}
.myside .myinfo{margin:0}
@media print{.myothead,.myotinfo,.myside,.myrephead,.myinfo,.metabs,.mehero,.mestats,.mebox{display:none!important}.myotgrid{display:block}.mycard{border:0;padding:0;box-shadow:none}.myrep tr.myhide{display:table-row!important}}
/* conduct heading tip: above the heading (rcbook.js places it) */
th.rbhastip .rbtip.up{position:fixed;transform:none;right:auto;z-index:1000}
th.rbhastip .rbtip.up::before{bottom:auto;top:100%;left:var(--ax,50%)!important;right:auto!important;margin-left:-7px;border-bottom-color:transparent;border-top-color:#14532d}
/* marks: typed or picked; the "out of" written in the heading (5 Oct 2026) */
input.rbpick{text-align:center}
.rbmk th small input.rbmax{width:40px;padding:1px 3px;border:1px dashed #9fd6b1;border-radius:6px;background:#fff;font:inherit;font-size:12px;text-align:center;color:#15603d}
.rbmk th small input.rbmax:focus{outline:0;border-style:solid;border-color:#15803d}.rbmk th small input.rbmax.bad{border-color:#dc2626;background:#fdecec}
/* School Results: the school's colours - pass rates red < 50%, blue 50-65%, green > 65%; grades C and up green, D and below red (5 Oct 2026) */
.srpage{--srR:#dc3b3b;--srB:#2f74d0;--srG:#1f9d55}
.srheat td.pr{background:#f8d4d4;color:#9b1c1c}.srheat td.pb{background:#d3e3fa;color:#1e4f9a}.srheat td.pg{background:#cdeedb;color:#14653a}
.srheat td.pr,.srheat td.pb,.srheat td.pg{font-weight:700}
.srcol.pr{fill:var(--srR)}.srcol.pb{fill:var(--srB)}.srcol.pg{fill:var(--srG)}
.srbar i.pr{background:var(--srR)}.srbar i.pb{background:var(--srB)}.srbar i.pg{background:var(--srG)}
.srpct.pr{color:var(--srR);font-weight:700}.srpct.pb{color:var(--srB);font-weight:700}.srpct.pg{color:var(--srG);font-weight:700}
.srtile b.pr{color:var(--srR)}.srtile b.pb{color:var(--srB)}.srtile b.pg{color:var(--srG)}
.srpage .g0{background:#14532d}.srpage .g1{background:#15803d}.srpage .g2{background:#22a35a}.srpage .g3{background:#5ccf8a}
.srpage .g4{background:#f6b2b2}.srpage .g5{background:#ee8080}.srpage .g6{background:#e35454}.srpage .g7{background:#cf2f2f}.srpage .g8{background:#8f1a1a}
.srpage .srg{color:#fff}.srpage .srg.g3,.srpage .srg.g4{color:#1d1d1f}.srpage .srg.g5{color:#fff}

/* Salary Sheet: a row's typed-in figures, changed from EduGulhun (5 Oct 2026) */
.sledit{margin-top:12px;border:1px solid #e0d5fa;border-radius:12px;background:#fff;padding:10px 13px;text-align:left}
.sledit h4{margin:0 0 8px;font-size:13px;color:#6d28d9}.sledit h4 small{display:block;font-weight:400;color:#6b7280;font-size:12px;margin-top:2px}
.sleditg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 12px}
.sleditg label{display:block;font-size:11.5px;color:#4b5563}.sleditg label span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sleditg input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #ddd3fa;border-radius:7px;font:inherit;font-size:13px;font-variant-numeric:tabular-nums}
.sleditg input:focus{outline:0;border-color:#6d28d9;box-shadow:0 0 0 3px #ede7fc}
.slsaved{margin:6px 0 0;font-size:12.5px;color:#15803d}.slsaved.bad{color:#b91c1c}

/* School Results: teachers under the years, and the two average rings (5 Oct 2026) */
.srteach{font-size:9.5px;fill:#4b5563}
.srdonuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:14px}
.srdonut{margin:0;display:flex;align-items:center;gap:14px;border:1px solid var(--srline,#e6e4df);border-radius:14px;padding:12px 14px;background:#fff}
.srdonut svg{width:150px;height:150px;flex:0 0 150px}
.srdf{fill:none;stroke:#dc3b3b}.srdp{fill:none;stroke:#1f9d55}
.srdbig{font-size:30px;font-weight:800;fill:#14332a}.srdsm{font-size:12px;fill:#6b7280}
.srdl rect{stroke:#fff;stroke-width:2}.srdl.g rect{fill:#14653a}.srdl.r rect{fill:#9b1c1c}.srdl text{fill:#fff;font-size:12px;font-weight:700}
.srdonut figcaption b{display:block;font-size:14px;color:#14332a}.srdonut figcaption span{display:block;font-size:12px;color:#6b7280;margin-top:3px}
.srdkey i{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 8px;vertical-align:-1px}.srdkey i:first-child{margin-left:0}
.srdkey i.g{background:#1f9d55}.srdkey i.r{background:#dc3b3b}

/* past months: the pay period chooser (5 Oct 2026) */
.slmonth{display:flex;justify-content:flex-end;margin:6px 0 8px}.slmonth label{font-size:13px;font-weight:600;color:#4c1d95;display:flex;align-items:center;gap:8px}
.slmonth select{padding:8px 12px;border:1px solid #c4b5fd;border-radius:10px;font:inherit;font-weight:700;background:#fff;min-width:300px}
.slper{font-size:13px;font-weight:600;color:#6d28d9;background:#f3effd;border-radius:999px;padding:3px 11px;margin-left:6px;vertical-align:3px}

/* Assets register (5 Oct 2026) */
.astab tr.asgrp{cursor:pointer}.astab tr.asgrp td{background:#f9fbfa}.astab tr.asgrp:hover td{background:#eef8f2}.astab tr.asgrp.open td{background:#e7f6ec}
.astab tr.asgrp small,.invcat small{font-weight:400;color:#6b7280;margin-left:6px}.astab td small{display:block;color:#6b7280;font-size:11.5px}
.astab td.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;white-space:nowrap}.invchip small{opacity:.7;margin-left:3px}
@media print{.astab tr.asrow{display:table-row!important}}

/* Salary Sheet tabs: changing a cell (5 Oct 2026) */
.saledit td[data-a]{cursor:cell}.saledit td[data-a]:hover{outline:2px solid #2563eb;outline-offset:-2px}
.saledit td.saleon{outline:2px solid #1d4ed8;outline-offset:-2px}.saledit td.salsaved{box-shadow:inset 0 0 0 2px #16a34a}
.salpop{position:fixed;z-index:9999;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px 10px;width:310px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.salpop b{width:100%;font-size:12px;color:#192a55}.salpop input{flex:1;min-width:0;padding:6px 8px;border:1px solid #94a3b8;border-radius:6px;font-size:14px}
.salpop .hint{width:100%;font-size:12px;color:#b91c1c}
.salpop{width:340px}.salsw{width:100%;display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding-top:4px;border-top:1px solid #eef1f5}
.salsw button{width:22px;height:22px;border-radius:5px;border:1px solid #cbd5e1;cursor:pointer;padding:0}.salsw button:hover{outline:2px solid #1d4ed8}.salsw button.on{outline:3px solid #1d4ed8;outline-offset:1px}
.salsw .salnone{background:#fff;color:#b91c1c;font-size:12px;font-weight:700}.salsw input[type=color]{width:30px;height:24px;flex:none;padding:0;border:1px solid #cbd5e1;border-radius:5px;cursor:pointer}
.salcnt{flex:1;font-size:12.5px;color:#334155}
@media print{.salpop{display:none}}

/* Marking sheet: pick a pupil of any grade (5 Oct 2026) */
.empick{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 0 14px;padding:12px 14px;border:1px solid #d6e4dc;border-radius:12px;background:#f3f8f5}
.empick>b{width:100%;color:#14532d}
.empick label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#475569}
.empick select,.empick input{padding:6px 8px;border:1px solid #94a3b8;border-radius:6px;font-size:14px;min-width:150px}
.empick .empu{min-width:260px}.empick output{display:block;padding:7px 10px;border-radius:6px;background:#fff;border:1px dashed #94a3b8;min-width:110px;font-size:14px}

.emwho{align-self:center;font-size:12.5px;color:#7c2d12;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:6px 10px;max-width:100%}

/* My page > Buffer Time Request (6 Oct 2026) */
.bfhero{display:flex;align-items:center;gap:16px;background:#2f6b55;color:#fff;border-radius:12px;padding:16px 22px;margin:0 0 16px}
.bfhero h2{margin:0;color:#fff;font-size:20px}.bfhero p{margin:3px 0 0;color:#e6f4ee;font-size:14px}
.bfclock{display:grid;place-items:center;width:46px;height:46px;border:3px solid #fff;border-radius:50%;font-size:24px;flex:0 0 46px}
.bfgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:16px;align-items:start}
@media(max-width:900px){.bfgrid{grid-template-columns:1fr}}
.bfform{padding:18px 20px}.bfform h2,.bfside h2,.bfhist h2{margin:0 0 12px;font-size:19px;color:#14284b}
.bfrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:600px){.bfrow{grid-template-columns:1fr}}
.bfl{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:13.5px;color:#1f2937;margin-bottom:14px}
.bfl input{font-weight:400;padding:9px 12px;border:1px solid #cfd6dd;border-radius:7px;font-size:15px}
.bfl input[readonly]{background:#f1f3f5;color:#374151}
.bfopts{display:flex;flex-wrap:wrap;gap:10px;font-weight:400}
.bfopt{display:flex;align-items:center;gap:9px;padding:9px 18px;border:1px solid #cfd6dd;border-radius:7px;cursor:pointer;font-size:14.5px;min-width:96px}
.bfopt input{accent-color:#2f6b55;width:17px;height:17px;margin:0}
.bfopt:has(input:checked),.bfopt.on{background:#e6f2ec;border-color:#b8d8c7}
.bfnum{display:flex;align-items:stretch;border:1px solid #cfd6dd;border-radius:7px;overflow:hidden}
.bfnum input{width:110px;border:0;padding:9px 12px;font-size:15px}.bfnum span{background:#f1f3f5;padding:9px 14px;color:#4b5563;font-size:14px;border-left:1px solid #cfd6dd}
.bfnote{background:#f4f6f8;border-radius:8px;padding:10px 14px;font-size:14px;margin:0 0 12px}.bfnote.warn{background:#fdf3e2;color:#7a4b0b}.bfnote.ok{background:#e9f6ee;color:#1f6b3f}
.bfinfo{background:#e6f2ec;color:#1d4e3b;border-radius:7px;padding:10px 14px;font-size:14px;margin:0 0 14px}
.bffoot{display:flex;gap:12px}.bfsend{background:#1f3266;padding:10px 28px}.bfsend[disabled]{opacity:.45;cursor:not-allowed}
.bfside{display:grid;gap:16px}.bfside .panel{padding:18px 20px}
.bfth{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}.bfth span{color:#4b5563;font-size:14px}
.bfline{list-style:none;margin:8px 0 0;padding:0 0 0 6px;border-left:2px solid #cfe5d8}
.bfline li{position:relative;display:grid;grid-template-columns:1fr auto;padding:8px 0 8px 22px}.bfline li i{position:absolute;left:-8px;top:12px;width:14px;height:14px;border-radius:50%}
.bfline span{color:#374151;font-size:14px}.bfline b{grid-column:1;font-size:17px;color:#14284b}
.bflate{grid-column:2;grid-row:1/3;align-self:center;background:#fde8b8;color:#8a5a00;font-style:normal;font-weight:700;border-radius:20px;padding:5px 12px;font-size:13px}
.bfsum dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0 0 12px;font-size:14.5px}.bfsum dt{color:#374151}.bfsum dd{margin:0;color:#111827}
.bfhist{margin-top:16px;padding:18px 20px}.bfchips{display:flex;gap:8px}
.bfchip{border:0;background:#eef1f4;border-radius:20px;padding:6px 14px;cursor:pointer;font-size:13px}.bfchip.on{background:#2f6b55;color:#fff}
.bfp{display:inline-block;border-radius:20px;padding:4px 12px;font-weight:700;font-size:13px}.bfp.wait{background:#fdecc2;color:#8a5a00}.bfp.ok{background:#dcf2e3;color:#1f6b3f}.bfp.no{background:#fde2e2;color:#b42318}
.bftag{display:inline-block;margin-top:4px;background:#e6f2ec;color:#1d4e3b;border-radius:10px;padding:2px 8px;font-size:11.5px;font-weight:700}

/* Website visitors (7 Oct 2026) */
.vstiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:14px 0}
.vstile{border:1px solid #e3ebe6;border-radius:16px;padding:16px 18px;background:#fff}.vstile b{display:block;font-size:34px;color:#14532d;line-height:1.1}
.vstile span{font-weight:700;color:#374151}.vstile small{display:block;color:#6b7280;margin-top:4px;font-size:12.5px}
.vstile.live{background:#ecfdf3;border-color:#bbf7d0}.vstile.live b{color:#15803d}
.vsgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}@media(max-width:800px){.vsgrid{grid-template-columns:1fr}}
.vsbox{border:1px solid #e3ebe6;border-radius:16px;padding:14px 16px;background:#fff}.vsbox h3{margin:0 0 10px;font-size:16px}
.vschart{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:6px}
.vsbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.vsbar i{display:block;width:100%;background:#22a05a;border-radius:4px 4px 0 0}.vsbar span{font-size:10px;color:#6b7280;margin-top:3px}
.vsbox td.c,.vsbox th{text-align:center}.vsbox td:first-child,.vsbox th:first-child{text-align:left}

/* My day (7 Oct 2026): the greeting card carries the lesson on now and the next one; today's periods run left to
   right in one line under it; the section tabs come after */
.mdhero{flex-wrap:nowrap}
.mdhero .dwho{flex:0 1 auto}
.mdnow{flex:1 1 360px;max-width:460px;background:#fff;border:1px solid #d6eadb;border-radius:16px;padding:14px 16px;
  box-shadow:0 6px 18px rgba(15,63,33,.08);margin-left:auto}
.mdhead{display:flex;align-items:center;gap:8px;color:#5b7163;font-size:13px}
.mdhead>.ic{color:#0b9c3c;flex:none}
.mdhead>span:first-of-type{flex:1;min-width:0}
.mdleft{display:inline-flex;align-items:center;gap:5px;background:#e3f6e8;color:#0f7a37;border-radius:99px;padding:4px 10px;
  font-size:12.5px;white-space:nowrap}
.mdleft b{font-variant-numeric:tabular-nums}
.mdwhat{display:block;font-size:20px;color:#0f3d24;margin:8px 0 8px}
.mdwhat small{font-size:13px;color:#c2620c;font-weight:600}
.mdbar{height:7px;border-radius:9px;background:#e4efe7;overflow:hidden;margin-bottom:10px}
.mdbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22b455,#0b9c3c);border-radius:9px;transition:width 1s linear}
.mdnext{display:flex;align-items:center;gap:6px;margin:0;color:#4a5d52;font-size:13px;flex-wrap:wrap}
.mdnext>.ic{color:#2563eb}
.mdnext em{font-style:normal;font-weight:600}
.mdok{color:#0b9c3c}.mdno{color:#d97706}
.mdscene{flex:0 0 230px;width:230px;height:auto;align-self:flex-end;margin:-10px -20px -32px 0}

.mdday{background:#fff;border:1px solid #e3e9f3;border-radius:18px;padding:16px 18px;margin:16px 0;box-shadow:0 2px 10px rgba(18,50,92,.05)}
.mdtop{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.mdtop h2{margin:0;font-size:18px;color:#0f3d24}
.mdtop span{color:#6b7a8d;font-size:13px}
.mdrow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.mdt{position:relative;border-radius:12px;padding:8px 4px 12px;text-align:center;border:1.5px solid transparent;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}
.mdt>*{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdn{font-size:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);margin-bottom:2px}
.mdtm{font-size:11px;color:#6b7a8d}
.mds{font-size:15px;letter-spacing:.3px}
.mdc{font-size:11.5px;color:#4a5d52}
.mdles{background:#eef4ff;color:#1d4ed8}
.mdcov{background:#fff3e2;color:#c2620c}
.mdcvd{background:#f3f4f6;color:#6b7280;text-decoration:line-through}
.mdfree{background:#fff;border:1.5px dashed #d4dbe6;color:#9aa5b5}
.mdcur{background:#0b9c3c;color:#fff;box-shadow:0 6px 16px rgba(11,156,60,.3)}
.mdcur .mdtm,.mdcur .mdc{color:#e3f6e8}
.mdcur .mdn{background:#fff;color:#0b9c3c}
.mdnx{border-color:#2563eb}
.mddone{opacity:.45}
.mddot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#0b9c3c}
.mdt .mddot{position:absolute;bottom:4px;left:50%;margin-left:-4px}
.mddot.no{background:#f59e0b}
.mdcur .mddot{box-shadow:0 0 0 2px #fff}
.mdkey{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0 0;font-size:12px;color:#6b7a8d}
.mdkey span{display:inline-flex;align-items:center;gap:6px}
.mdkc{color:#c2620c}
.mdbtns{display:flex;gap:10px;margin-top:14px}
.mdb{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px;border-radius:12px;
  font-weight:600;font-size:14px;text-decoration:none;border:1.5px solid transparent;white-space:nowrap}
.mdb.g{background:#0b9c3c;color:#fff}
.mdb.b{background:#2563eb;color:#fff}
.mdb.w{background:#fff;color:#0f3d24;border-color:#cfdcd3}
.mdb:hover{filter:brightness(1.06)}
@media(max-width:900px){
  .mdhero{flex-wrap:wrap}
  .mdhero .dwho{flex:1 1 0}
  .mdnow{flex:1 1 100%;max-width:none;order:3}
  .mdscene{position:absolute;right:-10px;top:-6px;width:150px;margin:0;opacity:.55;z-index:0}
}
@media(max-width:560px){
  .mdday{padding:12px 10px}
  .mdrow{gap:4px}
  .mdt{padding:6px 1px 11px;border-radius:9px}
  .mdn{width:18px;height:18px;font-size:10.5px}
  .mdtm{font-size:9px}
  .mds{font-size:11.5px;letter-spacing:0}
  .mdc{font-size:9.5px}
  .mdwhat{font-size:17px}
  .mdb{font-size:12.5px;padding:10px 6px;gap:5px}
  .mdb .ic{width:15px;height:15px}
}
@media(max-width:760px){
  .dhero.mdhero{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;padding:18px 16px;gap:12px}
  .mdhero .dface{width:58px;height:58px;margin:0;border-width:3px}
  .mdhero .dface .initials{font-size:19px}
  .mdhero .dwho{flex:1 1 0;padding:0;margin:0;text-align:left}
  .mdhero .dwho h1{font-size:22px;margin:0 0 2px}
  .mdhero .dwelcome{font-size:13px;margin:0}
  .mdhero .hrole{font-size:11.5px}
  .mdnow{padding:12px 13px}
  .mdscene{width:120px;right:-8px;top:-4px}
}
@media(max-width:560px){.mdt{padding-bottom:14px}.mdt .mddot{bottom:3px}}
/* the tiles sit at the foot of the dashboard now (7 Oct 2026) */
.dgroups+.actions{margin-top:20px}
.tilesw{margin:-10px 0 16px;text-align:right;font-size:12.5px}
.tilesw a{color:#0b7a37;text-decoration:none}

/* Today strip, second look (7 Oct 2026): each subject its own soft colour, free periods pink, the period on now
   solid green; nothing faded */
.mdday{position:relative;overflow:hidden;border-radius:18px;padding:16px 16px 14px;border:1px solid #e6edf2;
  box-shadow:0 8px 24px rgba(18,50,92,.07)}
.mdday:after{content:"";position:absolute;right:-24px;top:-30px;width:150px;height:80px;pointer-events:none;
  border-radius:0 100% 0 100%;background:linear-gradient(140deg,#d4f1dd,#a8e2bb);opacity:.55;transform:rotate(18deg)}
.mdday>*{position:relative;z-index:1}
.mdtop{align-items:center;gap:0;margin:2px 4px 14px}
.mdtop h2{font-size:19px;font-weight:800;color:#12263f;padding-right:16px;margin-right:16px;border-right:1px solid #e3e8ee}
.mdtop span{font-size:12.5px;color:#5c6b7e}
.mdrow{gap:6px}
.mdt{border:1px solid;border-radius:9px;padding:10px 4px 9px;gap:3px;opacity:1}
.mdt.mddone{opacity:1}
.mdn{width:24px;height:24px;font-size:13px;font-weight:700;color:#fff;margin-bottom:3px;background:#94a3b8}
.mdtm{font-size:12px;color:#1f2937}
.mds{font-size:15px;font-weight:800;letter-spacing:0}
.mdc{font-size:11.5px;color:#4b5563}
.mdt .mddot{position:static;margin:3px 0 0;width:10px;height:10px}
.mddot{background:#1f9d55}
.mddot.no{background:#f7b10f}
.mdp0{background:#e9f4fd;border-color:#a8d3f4}.mdp0 .mdn{background:#1690e6}.mdp0 .mds{color:#1687d9}
.mdp1{background:#e8f6ee;border-color:#a9dcbc}.mdp1 .mdn{background:#1f9d55}.mdp1 .mds{color:#1f9d55}
.mdp2{background:#fff8e5;border-color:#f5dc96}.mdp2 .mdn{background:#f6ab0c}.mdp2 .mds{color:#f3a10b}
.mdp3{background:#f3eefd;border-color:#cfbdf3}.mdp3 .mdn{background:#7c4ddb}.mdp3 .mds{color:#7044d4}
.mdp4{background:#e6f7f6;border-color:#9fdcd6}.mdp4 .mdn{background:#14a39a}.mdp4 .mds{color:#0f948c}
.mdfree{background:#fdf0f5;border:1px solid #f4bdd2;color:#374151}
.mdfree .mdn{background:#ec4f8b}
.mdfree .mds{font-size:13px;font-weight:400;color:#374151}
.mdfree .mdc{font-size:14.5px;color:#374151}
.mdcov{background:#fff3e2;border-color:#f6c98d}.mdcov .mdn{background:#f08c12}.mdcov .mds{color:#e07b06}
.mdcvd{background:#f3f4f6;border-color:#d8dde3}.mdcvd .mdn{background:#9ca3af}
.mdt.mdcur{background:#1f9d55;border-color:#1f9d55;box-shadow:0 8px 18px rgba(31,157,85,.32)}
.mdcur .mdn{background:#fff;color:#1f9d55}
.mdcur .mdtm,.mdcur .mds,.mdcur .mdc{color:#fff}
.mdcur .mddot{box-shadow:none}
.mdkey{gap:22px;margin:14px 4px 0;font-size:12px;color:#374151}
.mdkey .mddot{width:10px;height:10px}
.mdkc{color:#f3a10b;font-weight:700}
@media(max-width:560px){
  .mdrow{gap:3px}
  .mdt{padding:7px 1px 7px;border-radius:8px;gap:1px}
  .mdn{width:18px;height:18px;font-size:10.5px}
  .mdtm{font-size:9.5px}
  .mds{font-size:11.5px}
  .mdc{font-size:9px}
  .mdfree .mdc{font-size:10px}
  .mdt .mddot{width:7px;height:7px;margin-top:2px}
  .mdtop h2{font-size:17px;padding-right:10px;margin-right:10px}
}

/* the day's three buttons, second look: soft gradients with a wave in the corner */
.mdbtns{gap:8px;margin-top:16px}
.mdb{position:relative;overflow:hidden;min-height:46px;border-radius:12px;font-size:16px;font-weight:700;gap:12px;
  letter-spacing:.1px;transition:transform .15s,box-shadow .15s}
.mdb>*{position:relative;z-index:1}
.mdb:after{content:"";position:absolute;right:-26px;bottom:-34px;width:110px;height:70px;border-radius:60% 40% 0 0;
  transform:rotate(-28deg);pointer-events:none}
.mdb.g{background:linear-gradient(100deg,#54cf83 0%,#36ad62 45%,#249449 100%);color:#fff;
  box-shadow:0 8px 20px rgba(36,148,73,.25)}
.mdb.g:before{content:"";position:absolute;left:-30px;top:-40px;width:120px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.10);pointer-events:none}
.mdb.g:after{background:rgba(255,255,255,.06)}
.mdb.b{background:linear-gradient(100deg,#4d9ef6 0%,#4382f2 50%,#3c66ec 100%);color:#fff;
  box-shadow:0 8px 20px rgba(60,102,236,.25)}
.mdb.b:after{background:rgba(255,255,255,.14)}
.mdb.w{background:linear-gradient(100deg,#fff 0%,#f6fbf8 100%);color:#123b29;border:1px solid #b9dcc6;
  box-shadow:0 6px 16px rgba(18,59,41,.06)}
.mdb.w:after{background:linear-gradient(140deg,#c8eed6,#9fdfb7);opacity:.6}
.mdb.w .ic{color:#1f8a4c}
.mdb:hover{filter:none;transform:translateY(-1px)}
@media(max-width:560px){
  .mdb{min-height:40px;font-size:13px;gap:6px;border-radius:10px}
  .mdb:after{width:70px;height:46px;right:-20px;bottom:-26px}
}
.mdday:after{width:110px;height:58px;right:-18px;top:-22px;opacity:.45}.mdb.g,.mdb.b{border-color:transparent}

/* the back arrow at the top left of every page but the dashboard (7 Oct 2026) */
.tback{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#192a55;
  color:#fff;text-decoration:none;box-shadow:0 3px 10px rgba(25,42,85,.22);margin-right:-4px}
.tback:hover{background:#22386e}
.tback:active{transform:scale(.94)}
@media(max-width:560px){.tback{width:36px;height:36px;border-radius:10px}}
@media print{.tback{display:none}}

/* ===== 7 Oct 2026: the bell at the top right, the navy bar along the bottom of a phone, and the menu it opens ===== */
.tbell{position:relative;margin-left:auto;flex:none}
.tbell+.tright{margin-left:0}
.tbell>summary{list-style:none;cursor:pointer;position:relative;display:block}
.tbell>summary::-webkit-details-marker{display:none}
.tbico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#192a55;color:#4ea8f5;
  box-shadow:0 3px 10px rgba(25,42,85,.25)}
.tbell[open] .tbico{background:#22386e}
.tbadge{position:absolute;top:-5px;right:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#f5c518;
  color:#12263f;font-size:11.5px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;line-height:1}
.tnpanel{position:absolute;right:0;top:52px;width:min(340px,calc(100vw - 24px));background:#fff;border-radius:16px;
  box-shadow:0 18px 40px rgba(18,38,63,.22);border:1px solid #e4e9f0;padding:8px;z-index:80}
.tnhead{font-weight:800;color:#12263f;font-size:15px;padding:8px 10px 10px}
.tnrow{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;color:#26364d;text-decoration:none;font-size:13.5px}
.tnrow:hover{background:#f2f6fb}
.tnrow.tnnew{background:#fff4f4}.tnrow.tnnew:hover{background:#ffe9e9}   /* new since the bell was last opened */
.tnrow b{color:#12263f}
.tnrow i{margin-left:auto;font-style:normal;color:#8a97a8;font-size:18px}
.tnic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e9f2fd;color:#1d6fd1}
.tnnone{margin:4px 10px 12px;color:#6b7a8d;font-size:13px}
@media print{.tbell{display:none}}

@media(max-width:980px){
  .tbell{margin-left:auto}
  .tbico{width:40px;height:40px}
  .tnpanel{position:fixed;right:12px;top:62px}

  /* the bar: navy, white icons and words, Home raised in a dark circle in the middle */
  .bnav{background:#27406a;border-top:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(12,24,48,.18);align-items:flex-end}
  .bnav a,.bnav .bmore{color:#fff;font-size:11.5px;font-weight:500;gap:4px;padding:5px 0 2px}
  .bnav a.on{color:#f5c518;font-weight:600}
  .bnav .ic{stroke-width:2}
  .bnav .bmid{position:relative;padding-top:0}
  .bnav .bmid:before{content:"";position:absolute;top:-30px;left:50%;width:76px;height:76px;margin-left:-38px;
    border-radius:50%;background:#27406a;z-index:0}
  .bnav .bmid i{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin-top:-24px;
    border-radius:50%;background:#0f1a2e;color:#f5c518;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .bnav .bmid span{position:relative;z-index:1}
  .bnav .bmid.on{color:#fff}

  /* the menu it opens: dark navy, each page a rounded card, the headings as plain titles */
  .side{background:#1b2a47;width:290px;padding:18px 14px 20px;gap:16px}
  .side .snav{gap:8px}
  .side .navgrp{display:flex;flex-direction:column;gap:8px}
  .side .navgrp>summary{list-style:none;pointer-events:none;color:#fff;font-size:16px;font-weight:600;
    padding:12px 6px 2px;background:none}
  .side .navgrp>summary::-webkit-details-marker{display:none}
  .side .navgrp>summary::after,.side .navgrp>summary .ic{display:none}
  .side .snav a,.side .navgrp>a{background:#283f66;color:#fff;border-radius:10px;padding:13px 14px;font-size:15px;
    font-weight:500;gap:14px;opacity:1;padding-left:14px}
  .side .snav a .ic{width:22px;height:22px;opacity:1}
  .side .snav a.on{background:#34507f;box-shadow:inset 3px 0 0 #f5c518}
  .side .sout{border-top:1px solid #ffffff1c;padding-top:14px;display:flex;align-items:center;gap:10px}
}
@media(min-width:981px){.tbell{order:9;margin-left:12px}.tbell+.tright{margin-left:auto}}

/* ===== 7 Oct 2026, second look: the bell and the phone's bottom bar in the dashboard's greens ===== */
.tbar{background:radial-gradient(160px 70px at 82% -10%,#dff3e6 0%,transparent 70%),
  radial-gradient(140px 80px at 92% 120%,#e3f5ea 0%,transparent 70%),#fbfdfc}
.burger{color:#14633a}
.twho b{color:#0f3d24}
.tbico{background:#eaf7ef;color:#17834a;border:3px solid #fff;box-shadow:0 4px 14px rgba(23,131,74,.18)}
.tbell[open] .tbico{background:#dcf2e4}
.tbadge{background:#f0466e;color:#fff;border:2px solid #fff;top:-4px;right:-6px}
.tnic{background:#e8f6ee;color:#17834a}
.tnrow:hover{background:#f1f8f3}
@media(max-width:980px){
  .tbico{width:44px;height:44px}
  .bnav{background:#f7fbf8;border-top:1px solid #dcebe2;box-shadow:0 -6px 22px rgba(23,100,60,.10);
    border-radius:22px 22px 0 0;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
  .bnav a,.bnav .bmore{color:#5b6573;font-size:11.5px;font-weight:500;gap:3px}
  .bnav a>.ic,.bnav .bmore>.ic{box-sizing:content-box;padding:9px;border-radius:50%;background:#eaf5ee;color:#17633a;
    width:22px;height:22px}
  .bnav a.on{color:#17834a;font-weight:700}
  .bnav a.on>.ic{background:#d6efdf}
  .bnav .bmid:before{background:#f7fbf8;top:-26px;width:80px;height:80px;margin-left:-40px;
    border-top:1px solid #dcebe2;box-shadow:0 -6px 14px rgba(23,100,60,.08)}
  .bnav .bmid i{background:linear-gradient(160deg,#36b56c,#1b8a4c);color:#fff;width:58px;height:58px;margin-top:-26px;
    box-shadow:0 0 0 6px #d9f1e2,0 8px 18px rgba(27,138,76,.35)}
  .bnav .bmid i .ic{padding:0;background:none;color:#fff}
  .bnav .bmid span{color:#17834a;font-weight:700}
  .bnav .bmid.on{color:#17834a}
}
.tback{background:linear-gradient(160deg,#36b56c,#1b8a4c);box-shadow:0 3px 10px rgba(27,138,76,.28)}.tback:hover{background:#1b8a4c}

/* ================= Service Charter (public site, /public/service-charter) - 7 Oct 2026 =================
   one layout for both languages: the Dhivehi page is the same drawn right to left */
.chpage{--chg:#1f6f3f;--chg2:#5a9a2f;--chtint:#eef6ea;--chline:#dbe8d5;--chink:#1e3a26;--chmuted:#5f7266}
.chpage .chi{flex:none}
.chrtl{font-family:"EG Thaana","Segoe UI",system-ui,"Faruma","MV Faseyha",sans-serif}
.chrtl p,.chrtl li,.chrtl blockquote,.chrtl .chtile p{font-size:16.5px;line-height:2}
.chrtl h1,.chrtl h2,.chrtl h3,.chrtl h4,.chrtl b,.chrtl summary{font-family:"EG Thaana","Segoe UI",system-ui,"Faruma",sans-serif}
.chpage a[href^="mailto:"],.chpage a[href^="tel:"],.chpage a[href^="http"]{unicode-bidi:isolate}

/* the banner */
.chhero{position:relative;overflow:hidden;display:flex;gap:24px;align-items:flex-start;justify-content:space-between;
  background:radial-gradient(500px 220px at 85% -20%,rgba(255,255,255,.18),transparent 70%),
  linear-gradient(120deg,#1f6f3f 0%,#2f8a46 55%,#5a9a2f 100%);color:#fff;border-radius:22px;padding:34px 38px;
  box-shadow:0 14px 34px rgba(31,111,63,.22);margin-bottom:22px}
.chhero:after{content:"";position:absolute;inset-inline-end:-60px;bottom:-90px;width:300px;height:300px;border-radius:50%;
  border:40px solid rgba(255,255,255,.07);pointer-events:none}
.chherotext{position:relative;z-index:1;max-width:720px}
.chkick{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 12px;border-radius:99px;
  background:rgba(255,255,255,.16);font-size:13px;font-weight:600;letter-spacing:.02em}
.chhero h1{margin:0 0 10px;font-size:40px;line-height:1.15;letter-spacing:-.01em}
.chsub{margin:0 0 18px;font-size:16px;opacity:.95;max-width:640px}
.chmeta{display:flex;flex-wrap:wrap;gap:8px}
.chmeta span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:6px 12px;
  font-size:13px}
.chmeta b{margin-inline-start:4px}
.chlang{position:relative;z-index:1;display:flex;background:rgba(0,0,0,.18);border-radius:14px;padding:4px;flex:none}
.chlang a{padding:9px 18px;border-radius:11px;color:#fff;text-decoration:none;font-weight:600;font-size:14.5px}
.chlang a[lang=dv]{font-family:"EG Thaana","Faruma",sans-serif;font-size:16px}
.chlang a[lang=en]{font-family:"Segoe UI",system-ui,sans-serif}
.chlang a.on{background:#fff;color:var(--chg)}

/* contents down the side, the sections beside it */
.chgrid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}
.chtoc{position:sticky;top:96px;background:#fff;border:1px solid var(--chline);border-radius:18px;padding:16px 12px;
  box-shadow:0 4px 14px rgba(31,111,63,.06)}
.chtoc h3{margin:0 8px 10px;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--chmuted)}
.chrtl .chtoc h3{text-transform:none;letter-spacing:0;font-size:15px}
.chtoc nav{display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 230px);overflow:auto}
.chtoc nav a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;text-decoration:none;color:var(--chink);
  font-size:13.5px;line-height:1.3}
.chrtl .chtoc nav a{font-size:15px}
.chtoc nav a:hover{background:var(--chtint)}
.chtoc nav b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--chtint);
  color:var(--chg);font-size:12px}
.chtocdl{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--chg);
  color:#fff !important;text-decoration:none;font-weight:600;font-size:13.5px}
.chmain{display:flex;flex-direction:column;gap:16px;min-width:0}

/* a section */
.chcard{background:#fff;border:1px solid var(--chline);border-radius:18px;padding:22px 24px;scroll-margin-top:96px;
  box-shadow:0 4px 14px rgba(31,111,63,.05)}
.chcard h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:19px;color:var(--chink)}
.chico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--chtint);color:var(--chg);flex:none}
.chnum{font-size:13px;color:var(--chmuted);font-weight:600;min-width:16px}
.chcard p{margin:0 0 8px;color:#33473a}
.chcard p:last-child{margin-bottom:0}
.chcard a{color:var(--chg);font-weight:600;text-decoration:none;border-bottom:1px dashed rgba(31,111,63,.4)}
.chvm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chquote{background:linear-gradient(160deg,#fff 0%,#f3f9ef 100%)}
.chquote blockquote{margin:4px 0 0;padding-inline-start:18px;border-inline-start:4px solid var(--chg2);
  font-size:17px;line-height:1.6;color:var(--chink);font-weight:500}
.chvalues{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.chvalues span{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;background:var(--chtint);color:var(--chg)}
.chvalues b{color:var(--chink);font-size:15.5px}
.chinfo,.chchan{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.chchan{margin-top:12px}
.chtile{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--chline);border-radius:14px;background:#fbfdfa}
.chtic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#fff;border:1px solid var(--chline);
  color:var(--chg);flex:none}
.chtile small{display:block;color:var(--chmuted);font-size:12px;margin-bottom:2px}
.chrtl .chtile small{font-size:14px}
.chtile p{margin:0;font-size:14.5px;color:var(--chink);word-break:break-word}
.chlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chlist li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#f8fbf6}
.chlist li .chi{margin-top:2px;color:var(--chg)}
.chlist.warm li .chi{color:#d97706}
.chlist.you li .chi{color:#2563eb}
.chremark{font-size:13.5px;color:var(--chmuted) !important;background:var(--chtint);border-radius:10px;padding:8px 12px}

/* the services, each opening to its three columns */
.chsvs{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.chsv{border:1px solid var(--chline);border-radius:14px;background:#fff;overflow:hidden}
.chsv[open]{box-shadow:0 8px 20px rgba(31,111,63,.08);border-color:#c5dcbd}
.chsv summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px}
.chsv summary::-webkit-details-marker{display:none}
.chsv summary:hover{background:#f8fbf6}
.chno{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--chg);color:#fff;font-size:13px}
.chsvt{flex:1;min-width:0;font-weight:600;color:var(--chink);font-size:15.5px}
.chrtl .chsvt{font-size:16.5px}
.chbadge{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:#fff7e6;
  color:#b45309;font-size:12.5px;font-weight:600;white-space:nowrap}
.chchev{flex:none;display:grid;place-items:center;color:var(--chmuted);transition:transform .2s}
.chrtl .chchev{transform:scaleX(-1)}
.chsv[open] .chchev{transform:rotate(90deg)}
.chsvbody{display:grid;grid-template-columns:1.3fr 1.2fr 1fr;gap:12px;padding:4px 16px 16px}
.chcol{border-radius:12px;padding:12px 14px;background:#f8fbf6;font-size:14px}
.chcol.time{background:#fffaf0}
.chcol h4{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--chmuted)}
.chrtl .chcol h4{text-transform:none;letter-spacing:0;font-size:14px}
.chcol ul{margin:0;padding-inline-start:18px}
.chcol li{margin:3px 0}
.chcol p{font-size:14px}
.chrtl .chcol p,.chrtl .chcol li{font-size:15.5px}
.chnone{color:var(--chmuted) !important}

/* complaints handled: the steps */
.chsteps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.chsteps li{display:flex;gap:14px;align-items:flex-start}
.chsteps b{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--chg2);color:#fff}
.chsteps p{padding-top:4px}
.chlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chlinks a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;background:var(--chtint);border:0 !important}

/* downloads */
.chfiles{background:linear-gradient(140deg,#f3f9ef,#fff)}
.chdls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.chdl{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--chline) !important;
  background:#fff;text-decoration:none;color:var(--chink) !important}
.chdl .chi{color:var(--chg)}
.chdl span{display:flex;flex-direction:column;line-height:1.25}
.chdl small{color:var(--chmuted);font-weight:600;font-size:11.5px}
.chdl.on{border-color:var(--chg2) !important;box-shadow:0 0 0 2px rgba(90,154,47,.18)}
.chdl:hover{background:#f8fbf6}
.chnote{margin-top:10px !important;font-size:13px;color:var(--chmuted) !important}

@media(max-width:980px){
  .chgrid{grid-template-columns:1fr}
  .chtoc{position:static;padding:12px}
  .chtoc nav{flex-direction:row;overflow-x:auto;max-height:none;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .chtoc nav a{flex:none;background:var(--chtint);white-space:nowrap}
  .chtocdl{display:none}
  .chsvbody{grid-template-columns:1fr}
}
@media(max-width:640px){
  .chhero{flex-direction:column;padding:24px 20px;border-radius:18px}
  .chhero h1{font-size:30px}
  .chvm{grid-template-columns:1fr}
  .chcard{padding:18px 16px}
  .chcard h2{font-size:17px}
  .chsv summary{flex-wrap:wrap;padding:12px}
  .chbadge{margin-inline-start:42px}
  .chchev{display:none}
}
@media print{.chtoc,.chlang,.chfiles{display:none}.chgrid{grid-template-columns:1fr}.chsv{break-inside:avoid}}

/* ================= School Details, redesigned 7 Oct 2026 (sx-) ================= */
.sxpage{--ink:#10302b;--muted:#5f716c;--line:#e1ebe6;--teal:#0f5c63;--green:#2e9e4f;--gold:#f2b134;max-width:1180px}
.sxpage h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:18.5px;color:var(--ink)}
.sxpage .sub{margin:-6px 0 12px;color:var(--muted);font-size:13.5px}
.sxhero{position:relative;overflow:hidden;border-radius:24px;padding:30px 32px 22px;color:#fff;margin-bottom:18px;
  background:radial-gradient(420px 260px at 92% -10%,rgba(242,177,52,.35),transparent 70%),
  radial-gradient(500px 300px at -5% 120%,rgba(46,158,79,.55),transparent 70%),
  linear-gradient(120deg,#0b3446 0%,#0f5c63 50%,#1d7d55 100%);box-shadow:0 18px 40px rgba(11,52,70,.28)}
.sxhero:after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;
  border:46px solid rgba(255,255,255,.06)}
.sxheroin{position:relative;z-index:1;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.sxlogowrap{flex:none;width:112px;height:112px;border-radius:26px;background:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.22);border:4px solid rgba(242,177,52,.85)}
.sxlogo{width:92px;height:92px;object-fit:contain}
.sxname{flex:1;min-width:260px}
.sxdv{margin:0;font-family:"EG Thaana","Faruma",sans-serif;font-size:19px;opacity:.9}
.sxname h1{margin:2px 0 6px;font-size:38px;letter-spacing:-.02em;color:#fff}
.sxmotto{margin:0;font-size:18px;font-style:italic;color:#ffe3a3}
.sxstrap{margin:4px 0 12px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.sxchips{display:flex;flex-wrap:wrap;gap:8px}
.sxchips span{padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:12.5px}
.sxlinks{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.sxlinks a{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:12px;background:#fff;color:var(--teal);
  font-weight:600;font-size:13.5px;text-decoration:none}
.sxlinks a:first-child{background:var(--gold);color:#3b2a05}
.sxlinks a:hover{filter:brightness(1.05)}

.sxstats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
.sxstat{position:relative;overflow:hidden;border-radius:18px;padding:16px 16px 14px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 14px rgba(16,48,43,.05)}
.sxstat:after{content:"";position:absolute;right:-24px;bottom:-24px;width:80px;height:80px;border-radius:50%;background:var(--c);opacity:.09}
.sxsi{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c);color:#fff;margin-bottom:8px}
.sxstat b{font-size:28px;line-height:1.1;color:var(--ink)}
.sxstat em{font-style:normal;font-weight:600;color:var(--ink);font-size:13.5px}
.sxstat small{color:var(--muted);font-size:12px}
.sxstat.s1{--c:#2e9e4f}.sxstat.s2{--c:#0f7b8a}.sxstat.s3{--c:#6d5bd0}.sxstat.s4{--c:#e07a2f}.sxstat.s5{--c:#d4a017}.sxstat.s6{--c:#c2416b}

.sxcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;margin-bottom:18px;box-shadow:0 4px 14px rgba(16,48,43,.05)}
.sxtwo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sxtwo>.sxcard{margin-bottom:18px}
.sxvm{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;margin-bottom:18px}
.sxvm .sxcard{margin:0}
.sxvm small{display:inline-flex;align-items:center;gap:6px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.sxvm p{margin:10px 0 0;font-size:19px;line-height:1.55;font-weight:500}
.sxvision{background:linear-gradient(150deg,#0f5c63,#16806f);color:#fff;border:0}
.sxvision small{color:#ffe3a3}
.sxvision p{font-size:24px;font-weight:600}
.sxdvq{font-family:"EG Thaana","Faruma",sans-serif;font-size:17px !important;font-weight:400 !important;opacity:.85;direction:rtl;text-align:right}
.sxmission{background:linear-gradient(150deg,#fff8e8,#fff);border-color:#f3e2b5}
.sxmission small{color:#a6740b}
.sxmission p{color:#3a2f12;font-size:17.5px}
.sxvals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sxval{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:16px;color:#fff;text-align:center}
.sxval b{font-size:14.5px}
.sxval.v0{background:linear-gradient(150deg,#2e9e4f,#1d7d55)}.sxval.v1{background:linear-gradient(150deg,#0f7b8a,#0f5c63)}
.sxval.v2{background:linear-gradient(150deg,#7b6be0,#5a48c2)}.sxval.v3{background:linear-gradient(150deg,#e9a23b,#d4801f)}
.sxcaps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sxcap{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#f3f8f5;font-size:13.5px;color:var(--ink)}
.sxcap span{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:12px}
.sxpill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:#e8f6ee;color:#1d7d55}
.sxcls{display:flex;flex-direction:column;gap:7px}
.sxcl{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:10px;font-size:13px}
.sxcl span{color:var(--muted);white-space:nowrap}
.sxcl div{height:12px;border-radius:99px;background:#eef3f1;overflow:hidden}
.sxcl i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2e9e4f,#0f7b8a)}
.sxcl b{text-align:right;color:var(--ink)}
.sxgrow{display:flex;align-items:flex-end;gap:14px;height:220px;padding:10px 4px 0}
.sxbar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.sxbar i{display:block;width:100%;max-width:64px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#f2b134,#e07a2f)}
.sxbar:last-child i{background:linear-gradient(180deg,#2e9e4f,#0f5c63)}
.sxbar b{font-size:14px;color:var(--ink)}
.sxbar span{font-size:12.5px;color:var(--muted)}
.sxmore{margin-left:auto;font-size:13px;font-weight:600;color:var(--teal);text-decoration:none}
.sxres{display:grid;grid-template-columns:1fr 56px;gap:4px 12px;align-items:center;margin-bottom:12px}
.sxresbar{height:14px;border-radius:99px;background:#f1efe8;overflow:hidden}
.sxresbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f2b134,#d4a017)}
.sxres b{font-size:16px;color:var(--ink);text-align:right}
.sxres span{grid-column:1/-1;font-size:12.5px;color:var(--muted)}

.sxprin{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:linear-gradient(120deg,#0f5c63,#1d7d55);color:#fff;margin-bottom:16px}
.sxprin small{display:block;opacity:.8;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.sxprin b{font-size:19px}
.sxav{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e8f6ee;color:#1d7d55;font-weight:700;font-size:14px}
.sxav.big{width:54px;height:54px;background:#fff;color:#0f5c63;font-size:18px;border:3px solid var(--gold)}
.sxav.adm{background:#efeafd;color:#5a48c2}
.sxorg{display:grid;grid-template-columns:1fr 2fr;gap:20px}
.sxorg h3,.sxh3{margin:4px 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.sxh3{margin-top:22px}
.sxleads{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.sxlead{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fbfdfc}
.sxlead small{display:block;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.sxlead b{display:block;color:var(--ink);font-size:15px}
.sxlead span{display:block;font-size:12.5px;color:var(--ink)}
.sxlead .sxdept{color:#a6740b;font-weight:600}
.sxlead details,.sxteam{margin-top:6px;font-size:12.5px}
.sxlead summary,.sxteam summary{cursor:pointer;color:var(--teal);font-weight:600}
.sxlead ul,.sxteam ul{margin:6px 0 0;padding-left:18px;columns:2;column-gap:16px}
.sxkras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sxkra{border-radius:16px;padding:14px;color:#fff}
.sxkra.k1{background:linear-gradient(160deg,#2e9e4f,#1d6f42)}.sxkra.k2{background:linear-gradient(160deg,#0f7b8a,#0b4f5b)}
.sxkra.k3{background:linear-gradient(160deg,#7b6be0,#4f3fb0)}.sxkra.k4{background:linear-gradient(160deg,#e9a23b,#c66f16)}
.sxkrah{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.sxkrah>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.2)}
.sxkrah small{display:block;opacity:.85;font-size:11.5px;letter-spacing:.1em}
.sxkrah b{font-size:14.5px;line-height:1.25}
.sxkra ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7;opacity:.95}
.sxobj{border:1px solid var(--line);border-radius:14px;margin-bottom:8px;background:#fbfdfc}
.sxobj summary{cursor:pointer;padding:12px 14px;font-weight:600;color:var(--ink)}
.sxobj summary span{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:6px}
.sxob{display:flex;gap:12px;padding:8px 14px 12px}
.sxob>span{flex:none;padding:2px 8px;height:fit-content;border-radius:8px;background:#e8f6ee;color:#1d7d55;font-size:12px;font-weight:700}
.sxob b{font-size:13.5px;color:var(--ink)}
.sxob ul{margin:4px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.sxtarget h3{font-size:14px;margin:14px 0 8px;color:var(--ink)}

.sxcharter{background:linear-gradient(160deg,#fff,#f4faf6)}
.sxcharterhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.sxbtn{display:inline-flex;align-items:center;padding:9px 16px;border-radius:12px;background:var(--teal);color:#fff;font-weight:600;font-size:13.5px;text-decoration:none}
.sxpromise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:6px}
.sxpromise div{padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.sxpromise b{display:block;font-size:20px;color:var(--teal)}
.sxpromise span{font-size:12.5px;color:var(--muted)}
.sxchs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.sxch{padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.sxch h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:14.5px;color:var(--teal)}
.sxch ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink);line-height:1.6}
.sxcts{display:flex;flex-direction:column;gap:8px}
.sxct{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#f6faf8}
.sxct>span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--teal);border:1px solid var(--line)}
.sxct small{display:block;color:var(--muted);font-size:11.5px}
.sxct b{font-size:13.5px;color:var(--ink);font-weight:600}
.sxct a{color:var(--teal);text-decoration:none}
.sxstory{list-style:none;margin:0;padding:0 0 0 14px;border-left:3px solid #d9ece2}
.sxstory li{position:relative;padding:0 0 14px 16px}
.sxstory li:before{content:"";position:absolute;left:-23px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 2px #e7c46b}
.sxstory span{font-weight:700;color:var(--teal);font-size:13px}
.sxstory p{margin:2px 0 0;font-size:13.5px;color:var(--ink)}
.sxfacs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sxfac{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#f3f8f5;color:var(--teal);font-weight:600;font-size:13.5px}
.sxfac span{color:var(--ink)}
.sxmoe{background:#f7f9fb}
.sxmoe p{margin:0;font-size:13.5px;color:var(--ink);line-height:1.6}
.sxmoe p b{display:block;color:var(--teal);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:1100px){.sxstats{grid-template-columns:repeat(3,minmax(0,1fr))}.sxkras,.sxpromise,.sxfacs{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .sxhero{padding:22px 18px 16px;border-radius:20px}.sxname h1{font-size:28px}.sxlogowrap{width:84px;height:84px;border-radius:20px}.sxlogo{width:68px;height:68px}
  .sxstats{grid-template-columns:1fr 1fr}.sxtwo,.sxvm,.sxorg{grid-template-columns:1fr}.sxvals{grid-template-columns:1fr 1fr}
  .sxcaps{grid-template-columns:1fr}.sxcard{padding:18px 16px}.sxvision p{font-size:20px}.sxgrow{height:170px;gap:8px}
  .sxlead ul,.sxteam ul{columns:1}}

/* coordination: each teacher fills in their timetable lines right in the table (7 Oct 2026) */
.cloinl{display:flex;flex-direction:column;gap:6px;min-width:260px}
.cloinl input,.cloinl textarea{width:100%;box-sizing:border-box;border:1px solid #d7dfe8;border-radius:8px;padding:6px 9px;font:inherit;font-size:13px}
.cloinl2{display:grid;grid-template-columns:86px 1fr;gap:6px}
.cloinl .btn{align-self:flex-start}
.clome{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:#e8f6ee;color:#1d7d55;font-size:10.5px;letter-spacing:0;vertical-align:middle}
.clorow:not(.cloextra){grid-template-columns:150px minmax(0,1fr) 80px minmax(0,1.6fr) minmax(0,1.6fr) auto}
/* coordination observations: the lesson they are of, picked from the timetable (7 Oct 2026) */
.cobs4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:8px 0}
.cobs4 label,.cobsf .c2 label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#5b6470}
.cobs4 input,.cobs4 select{font:inherit;font-size:13.5px;padding:7px 9px;border:1px solid #d7dbe2;border-radius:7px;min-width:0}
.cobsn{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cobsn textarea,.cobsn input{font:inherit;font-size:13px;padding:6px 9px;border:1px solid #d7dbe2;border-radius:7px}
@media(max-width:760px){.cobs4{grid-template-columns:1fr 1fr}}

/* ===== Side menu, green theme (7 Oct 2026): Ahmed's palette - sidebar #134E3B, hover #176B4F, selected #22C55E
   (hover on it #34D399), the open group #0F3D2E, text #F8FDFC / #D1E7DD, icons #E6F4EE, arrows #B7D9CB,
   dividers #166534. It replaces the navy menu everywhere, the phone drawer included. ===== */
.side{background:#134E3B!important;color:#F8FDFC}
.side .sbrand,.side .sbrand b{color:#F8FDFC}
.side .sbrand span{color:#D1E7DD}
.snav a,.snav summary{color:#F8FDFC!important}
.snav .ic{color:#E6F4EE;opacity:1}
.snav a:hover,.snav summary:hover{background:#176B4F!important;color:#fff!important}
.snav a.on{background:#22C55E!important;color:#fff!important;font-weight:700;box-shadow:0 6px 16px rgba(34,197,94,.28)!important}
.snav a.on:hover{background:#34D399!important}
.snav a.on .ic{color:#fff}
.snav .navgrp>a{color:#D1E7DD!important}
.snav .navgrp>a:hover{color:#fff!important}
.snav .navgrp>a.on{color:#fff!important}
.snav .navgrp>summary::after{border-color:#B7D9CB!important}
.snav .navgrp>summary::-webkit-details-marker{color:#B7D9CB}
.snav .navgrp>summary::marker{color:#B7D9CB}
/* the group holding the page that is open sits on its own darker panel */
.snav .navgrp:has(a.on){background:#0F3D2E;border-radius:12px;padding:2px 0 6px}
.sfoot,.sme{border-top-color:#166534!important}
.sme b{color:#F8FDFC}
.sfoot b{color:#F8FDFC}.sfoot span{color:#B7D9CB}
.sout a,.sout button{background:#176B4F;color:#F8FDFC}
.sout a:hover,.sout button:hover{background:#22C55E;color:#fff}
@media(max-width:980px){
  .side{background:#134E3B!important}
  .side .navgrp>summary{color:#F8FDFC!important}
  .side .snav a,.side .navgrp>a{background:#0F3D2E!important;color:#F8FDFC!important}
  .side .snav a:hover{background:#176B4F!important}
  .side .snav a.on{background:#22C55E!important;color:#fff!important;box-shadow:0 6px 16px rgba(34,197,94,.3)!important}
  .side .snav .navgrp:has(a.on){background:none;padding:0}
  .side .sout{border-top-color:#166534}
}

/* ===== Staff profile, new colours (7 Oct 2026): page #F5F8F7, card #FFF, header #EEF7F3, tabs #E8EEF4 /
   active #42649D / hover #DCE7F5, section heading #1E7D6E, table header #DDF2E8, rows #FFF / #F7FAF9,
   borders #DCE6E2, primary button #2E9B7A, secondary #42649D ===== */
.vwrap{background:#FFFFFF;border:1px solid #DCE6E2;border-radius:18px;font-size:13px;color:#24363a;box-shadow:0 6px 20px rgba(30,125,110,.07)}
.vhead{background:#EEF7F3;border-bottom:1px solid #DCE6E2;padding:18px 22px;align-items:flex-start}
.vid{gap:20px}
.vid .avatar{width:112px;height:120px;border-radius:14px;border:3px solid #fff;box-shadow:0 4px 14px rgba(16,48,43,.15);object-fit:cover}
.vid h1{font-size:22px;color:#10302b;letter-spacing:.3px}
.vid div div{font-size:14px;color:#4b5f5a}
.syncbtn{background:#2E9B7A;border-radius:10px;padding:8px 16px;font-size:13.5px;font-weight:600;margin-top:12px;margin-right:6px;box-shadow:0 3px 10px rgba(46,155,122,.25)}
.syncbtn[href*="edit=1"]{background:#42649D;box-shadow:0 3px 10px rgba(66,100,157,.25)}
.vid .chphoto .btn{border-radius:10px;padding:8px 14px;background:#fff;border:1px solid #DCE6E2;color:#24363a;margin-top:12px}
.vkv{font-size:12.5px;background:#fff;border:1px solid #DCE6E2;border-radius:14px;padding:10px 16px;border-collapse:separate}
.vkv td{padding:2px 0 2px 14px}.vkv td:first-child{color:#5f716c}.vkv td:last-child{color:#1E7D6E;font-weight:600}
.vtabs{background:#F5F8F7;gap:6px;padding:12px 16px;border-bottom:1px solid #DCE6E2}
.vtabs a{background:#E8EEF4;color:#33465e;border:0;border-radius:9px;padding:7px 14px;font-size:12.5px;font-weight:500;text-decoration:none}
.vtabs a:hover{background:#DCE7F5;color:#24364f}
.vtabs a.on{background:#42649D;color:#fff;box-shadow:0 3px 10px rgba(66,100,157,.3)}
.vbody{padding:18px 22px 26px;background:#F5F8F7}
.vsec{color:#1E7D6E;font-size:15px;font-weight:700;margin:20px 0 0;padding:11px 16px;background:#EEF7F3;border:1px solid #DCE6E2;
  border-bottom:0;border-radius:14px 14px 0 0;align-items:center}
.vsec .dv{color:#1E7D6E}
table.vt{font-size:13px;background:#fff;border:1px solid #DCE6E2;border-radius:0 0 14px 14px;border-collapse:separate;border-spacing:0;overflow:hidden}
.vbody>table.vt:first-child{border-radius:14px}
table.vt td{background:#FFFFFF;border-top:0;border-bottom:1px solid #DCE6E2;padding:9px 14px}
table.vt tr:nth-child(even) td{background:#F7FAF9}
table.vt tr:last-child td{border-bottom:0}
table.vt td.l{color:#5f716c}
table.vt td.v{color:#1f2d2b}
.vbody table th{background:#DDF2E8;color:#1E7D6E;font-weight:700;border-color:#DCE6E2}
.vbody table:not(.vt) td{border-color:#DCE6E2}
.vbody table:not(.vt) tr:nth-child(even) td{background:#F7FAF9}
@media(max-width:760px){.vhead{flex-direction:column}.vkv{width:100%}}

/* ===== Administration > Staff (7 Oct 2026): Active Staff and the two staff registers ===== */
.stpage{max-width:1240px}
.sthead h1{margin:0 0 4px;font-size:26px;color:#10302b}
.sttabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 16px}
.sttab{padding:8px 14px;border-radius:10px;background:#E8EEF4;color:#33465e;text-decoration:none;font-weight:600;font-size:13.5px}
.sttab:hover{background:#DCE7F5}.sttab.on{background:#42649D;color:#fff}
.sttiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.sttile{background:#fff;border:1px solid #DCE6E2;border-radius:16px;padding:14px 16px}
.sttile b{display:block;font-size:28px;color:#1E7D6E}.sttile span{color:#5f716c;font-size:13px}
.stbar{margin:6px 0 12px}.stbar input{width:100%;max-width:420px;padding:9px 12px;border:1px solid #DCE6E2;border-radius:10px;font:inherit}
.stwrap{overflow-x:auto;border:1px solid #DCE6E2;border-radius:14px;background:#fff}
.sttable{width:100%;border-collapse:collapse;font-size:13px}
.sttable th{background:#DDF2E8;color:#1E7D6E;text-align:left;padding:9px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sttable td{padding:8px 10px;border-top:1px solid #E7EEEA;vertical-align:top}
.sttable tr:nth-child(even) td{background:#F7FAF9}
.sttable .c{color:#8a9a95;width:36px}.strl .role{margin:1px 2px}
.stregtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.stregtop h2{margin:0;font-family:"EG Thaana","Faruma",sans-serif;font-size:22px;color:#1E7D6E}
.stregtop span{color:#5f716c;font-size:13px}
.stcard{background:#fff;border:1px solid #DCE6E2;border-radius:14px;margin-bottom:8px;overflow:hidden}
.stcard summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:11px 16px;direction:rtl}
.stcard summary::-webkit-details-marker{display:none}
.stcard summary:hover{background:#F5F8F7}
.stcard[open] summary{background:#EEF7F3;border-bottom:1px solid #DCE6E2}
.stnm{font-family:"EG Thaana","Faruma",sans-serif;font-size:16.5px;color:#10302b;font-weight:600;flex:1}
.stpost{font-family:"EG Thaana","Faruma",sans-serif;color:#1E7D6E;font-size:14.5px}
.stid{font-family:ui-monospace,Consolas,monospace;color:#5f716c;font-size:12.5px;direction:ltr}
.stleft{background:#fde8e8;color:#b42318;border-radius:99px;padding:2px 9px;font-size:11.5px;direction:ltr}
.stcard.left .stnm{color:#5f716c}
.streg{padding:14px 16px 16px;background:#F5F8F7}
.stregh{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-bottom:10px;font-family:"EG Thaana","Faruma",sans-serif;font-size:15px;color:#24363a}
.stregh>b{color:#1E7D6E;font-size:16px;width:100%}
.stregh b{font-family:"EG Thaana","Segoe UI",sans-serif}
.stsheet{width:100%;border-collapse:collapse;font-family:"EG Thaana","Segoe UI",sans-serif;font-size:14px}
.stsheet th{background:#DDF2E8;color:#1E7D6E;padding:8px;border:1px solid #DCE6E2;font-weight:600;direction:rtl;min-width:70px}
.stsheet td{padding:7px 8px;border:1px solid #DCE6E2;direction:rtl;text-align:right;vertical-align:top;background:#fff}
.stsheet tr:nth-child(even) td{background:#F7FAF9}
.stsheet td:first-child{min-width:240px}
.stgone{margin:22px 0 8px;color:#5f716c;font-size:15px}
.stempty{background:#fff;border:1px dashed #DCE6E2;border-radius:16px;padding:22px}
.stempty h2{font-family:"EG Thaana","Faruma",sans-serif;color:#1E7D6E;margin:0 0 6px}
@media(max-width:760px){.sttiles{grid-template-columns:1fr 1fr 1fr}.sttile b{font-size:22px}.stcard summary{flex-wrap:wrap}}

/* date-and-time picker: Confirm / Cancel bar along the bottom (7 Oct 2026) - the box stays open until one is pressed */
.dtpanel{flex-wrap:wrap}
.dtok{flex-basis:100%;display:flex;justify-content:flex-end;gap:8px;padding:8px 12px;border-top:1px solid #e6e9ee;background:#f8fafc;border-radius:0 0 10px 10px}
.dtok button{border-radius:8px;font-size:13px;font-weight:600;padding:6px 16px;cursor:pointer}
.dtok .dtcancel{background:#fff;border:1px solid #cbd5e1;color:#334155}
.dtok .dtcancel:hover{background:#f1f5f9}
.dtok .dtconfirm{background:#22C55E;border:1px solid #16a34a;color:#fff}
.dtok .dtconfirm:hover{background:#16a34a}

/* ===== Staff registers: editing (7 Oct 2026) - Edit on each person, every part in a box; edit rights per register ===== */
.stwhos{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.stwho{padding:8px 14px;border-radius:10px;background:#E8EEF4;color:#2c3e50;text-decoration:none;font-size:13px;font-weight:600}
.stwho:hover{background:#DCE7F5}
.stwho.on{background:#42649D;color:#fff}
.stview{position:relative}
.stedb{float:left;margin:0 0 8px 0;background:#42649D!important;color:#fff!important;border:0}
.stby{font-size:12px;color:#5f716c;margin:8px 0 0;text-align:left}
.stedit{display:block}
.stedit[hidden]{display:none}
.stedith{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;align-items:end;margin-bottom:10px}
.stedith label{display:flex;flex-direction:column;gap:4px;font-family:"EG Thaana","Faruma",sans-serif;font-size:13px;color:#1E7D6E}
.stedith input{padding:7px 9px;border:1px solid #DCE6E2;border-radius:8px;font:inherit;font-size:14px;color:#1f2d2a;background:#fff}
.stedith .stlefq{flex-direction:row;align-items:center;gap:6px;font-family:inherit;color:#8a4b14;white-space:nowrap}
.stedtab th,.stedtab td{padding:3px!important;vertical-align:top}
.stedtab textarea{width:100%;min-width:90px;box-sizing:border-box;border:1px solid #DCE6E2;border-radius:6px;padding:5px 6px;
  font-family:"EG Thaana","Faruma",system-ui,sans-serif;font-size:13px;resize:vertical;background:#fff;color:#1f2d2a}
.stedtab thead textarea{background:#DDF2E8;font-weight:600}
.stedtab textarea:focus,.stedith input:focus{outline:2px solid #2E9B7A;border-color:#2E9B7A}
.stedtab .stx{width:28px;text-align:center;vertical-align:middle}
.strm{border:0;background:#fdeaea;color:#c0392b;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:16px;line-height:1}
.strm:hover{background:#c0392b;color:#fff}
.stedf{display:flex;gap:8px;align-items:center;margin-top:10px;direction:ltr}
.stedf .stsp{flex:1}
@media(max-width:760px){.stedith{grid-template-columns:1fr 1fr}}

/* ===== Staff registers as the sheet: one person's page at a time, their names as tabs along the bottom (7 Oct 2026) ===== */
.stpages{padding-bottom:12px;min-height:50vh}
.stpages .stcard[hidden]{display:none}
.stcardh{display:flex;align-items:center;gap:14px;padding:11px 16px;direction:rtl;background:#EEF7F3;border-bottom:1px solid #DCE6E2}
.sttabsbar{position:fixed;left:232px;right:0;bottom:0;z-index:25;display:flex;align-items:stretch;gap:0;
  background:#F1F3F4;border-top:1px solid #DADCE0;box-shadow:0 -2px 8px rgba(0,0,0,.06);height:44px}
.sttabq{width:170px;border:0;border-left:1px solid #DADCE0;background:#fff;padding:0 10px;font-size:13px;outline:none}
.sttabmv{border:0;background:#F1F3F4;width:30px;font-size:20px;color:#5f6368;cursor:pointer}
.sttabmv:hover{background:#E3E5E8}
.sttabs2{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;gap:0;align-items:stretch}
.sttabn{flex:none;border:0;border-left:1px solid #DADCE0;background:#F1F3F4;padding:0 16px;cursor:pointer;white-space:nowrap;
  font-family:"EG Thaana","Faruma",sans-serif;font-size:14px;color:#3c4043}
.sttabn:hover{background:#E8EAED}
.sttabn.on{background:#fff;color:#1E7D6E;font-weight:700;box-shadow:inset 0 -3px 0 #1E7D6E}
.sttabn.left{color:#8a8f94}
.sttabn[hidden]{display:none}
.sttabsep{flex:none;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:700;color:#8a4b14;background:#FFF4E5;
  border-left:1px solid #DADCE0;white-space:nowrap}
@media(max-width:980px){.sttabsbar{left:0;bottom:calc(64px + env(safe-area-inset-bottom))}.sttabq{width:110px}}
.stpages{padding-bottom:60px}

/* Active Staff: names as on the Users page - photo, name, @ID card - each opening the profile (7 Oct 2026) */
#stact .urow{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
#stact .urow .uname{font-size:13px}
#stact a.urow:hover .uname{color:#1E7D6E;text-decoration:underline}
.stdel{background:#fdeaea!important;color:#c0392b!important;border:1px solid #f3c4c4!important}.stdel:hover{background:#c0392b!important;color:#fff!important}
.stcard.left .stnm{color:inherit}
/* the page's message after a save, when the page came back to where it was rather than to the top (8 Oct 2026) */
.egtoast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;margin:0;max-width:min(560px,92vw);
 box-shadow:0 10px 30px #0003;transition:opacity .5s}
.egtoast.gone{opacity:0}
@media print{.egtoast{display:none}}
/* Teachers Resources > Logos (8 Oct 2026) */
.lgh{margin:18px 0 8px;font-size:15px;color:#134e3b}
.lggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.lgcard{margin:0;background:#fff;border:1px solid #e3e8ee;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.lgimg{display:flex;align-items:center;justify-content:center;height:150px;border-radius:8px;
 background:repeating-conic-gradient(#f3f4f6 0 25%,#fff 0 50%) 0 0/16px 16px}
.lgimg img{max-width:100%;max-height:140px;object-fit:contain}
.lgcard figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px}
.lgcard figcaption span{font-family:"EG Thaana",Faruma,"MV Boli",sans-serif;color:#374151}
.lgcard figcaption small{color:#9ca3af;font-size:11px}.lgcard .btn{align-self:flex-start;margin-top:4px}
/* the marking sheet's heading: the school's logo and a second one (the club's) either side */
.qheadwrap{display:grid;grid-template-columns:110px 1fr 110px;align-items:center;gap:10px}
.qheadwrap img{max-width:100px;max-height:90px;object-fit:contain;justify-self:center}
.invlist tr.invcat td{background:#eef8f2;color:#14532d;font-weight:800;font-size:13px;padding:8px 10px}
/* the meeting's attendance: a tick or a cross for each, one Save below (8 Oct 2026) */
.cattick{display:flex;align-items:center;gap:6px;margin-top:6px}
.ctk{display:inline-flex;cursor:pointer}.ctk input{position:absolute;opacity:0;width:0;height:0}
.ctk span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;border-radius:8px;border:1.5px solid #d1d5db;
 background:#fff;color:#9ca3af;font-size:15px;font-weight:700;transition:.15s}
.ctk.ok input:checked+span{background:#16a34a;border-color:#16a34a;color:#fff}
.ctk.no input:checked+span{background:#dc2626;border-color:#dc2626;color:#fff}
.ctk input:focus-visible+span{outline:2px solid #2563eb;outline-offset:1px}
.catrs{flex:1;min-width:0;max-width:200px;height:30px;padding:3px 8px;font-size:12.5px}
.cattick:not(:has(.no input:checked)) .catrs{visibility:hidden}
.catsave{position:sticky;bottom:0;background:#fff;padding:10px 0 4px;margin-top:8px;border-top:1px solid #e5e7eb;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.invstate{margin:0}.invstate select{font:inherit;font-size:12px;font-weight:700;text-transform:none;padding:3px 6px;border-radius:6px;border:1px solid #cfd8d3;background:#fff;color:#14532d;width:auto}
/* Students > Transfer and Transferred (8 Oct 2026) */
.sttrff{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 14px;max-width:760px}
.sttrff label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:#4b5563}.sttrff .wide,.sttrff p{grid-column:1/-1}
.sttrh,.sttr summary{display:grid;grid-template-columns:2.2fr .8fr 1fr 1.1fr 1.8fr;gap:10px;align-items:center;padding:9px 12px}
.sttrh{font-size:11.5px;font-weight:700;color:#6b7280;text-transform:uppercase;border-bottom:1px solid #e5e7eb}
.sttr{border-bottom:1px solid #eef0f3}.sttr summary{cursor:pointer;list-style:none;font-size:13.5px}.sttr summary::-webkit-details-marker{display:none}
.sttr summary:hover{background:#f7faf8}.sttr[open] summary{background:#eef8f2}
.sttrd{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 16px;padding:10px 14px 4px}
.sttrd div{display:flex;flex-direction:column}.sttrd small{color:#6b7280;font-size:11px}.sttrd .wide{grid-column:1/-1}
.sttrb{padding:6px 14px 12px}
.spact.move{color:#7c3aed}

/* Today strip, third look (8 Oct 2026, from the Super Admin's picture): big number, big time, the subject in a
   badge (solid for the period on now) with its name and class under it, Free in a pink badge */
.mdrow{gap:10px}
.mdt{border:1.5px solid;border-radius:16px;padding:14px 6px 14px;gap:8px;display:flex;flex-direction:column;align-items:center}
.mdt>*{white-space:normal}
.mdn{width:42px;height:42px;font-size:22px;font-weight:800;margin:0;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.mdtm{font-size:26px;font-weight:800;color:#111827;letter-spacing:-.4px;line-height:1.1}
.mds{font-size:21px;font-weight:800;line-height:1.1;padding:7px 14px;border-radius:12px;background:rgba(255,255,255,.75);min-width:64px}
.mdsub{font-size:14px;line-height:1.3;color:#374151;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mdt .mdc{font-size:13px;color:#4b5563;margin-top:-6px}
.mdp0 .mds{background:#d6e9fb}.mdp1 .mds{background:#d3eedd}.mdp2 .mds{background:#fdeec4}.mdp3 .mds{background:#e6dcfb}.mdp4 .mds{background:#cdeeeb}
.mdfree{background:#fdf0f4;border-color:#f6c5d4}
.mdfree .mdn{background:#e0457b}
.mdfree .mds{background:none;font-size:24px;color:#374151;padding:2px 0;min-width:0}
.mdfp{display:inline-block;padding:8px 18px;border-radius:12px;background:#fbd9e5;color:#c8235f;font-size:17px;font-weight:800;margin-top:4px}
/* the period on now: light green tile, dark green number, solid green badge */
.mdt.mdcur{background:#e9f8ee;border:2px solid #22a85a;box-shadow:0 8px 20px rgba(31,157,85,.25)}
.mdcur .mdn{background:#14653a;color:#fff}
.mdcur .mdtm{color:#111827}
.mdcur .mds{background:#22b55e;color:#fff}
.mdcur .mdsub,.mdcur .mdc{color:#1f2937}
.mdt .mddot{margin:0}
@media(max-width:760px){
  .mdrow{display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .mdt{flex:0 0 104px;scroll-snap-align:start;padding:12px 4px;gap:6px;border-radius:14px}
  .mdn{width:36px;height:36px;font-size:19px}
  .mdtm{font-size:21px}
  .mds{font-size:17px;padding:6px 10px;min-width:52px}
  .mdsub{font-size:12.5px}
  .mdt .mdc{font-size:12px}
  .mdfree .mds{font-size:20px}
  .mdfp{font-size:15px;padding:7px 14px}
}
/* less empty room inside each tile, the contents the same size (8 Oct 2026) */
.mdrow{gap:8px;align-items:stretch}
.mdt{padding:8px 4px 8px;gap:5px;justify-content:center}
.mdt .mdc{margin-top:-4px}
.mdfp{margin-top:0}
@media(max-width:760px){.mdt{padding:7px 3px;gap:4px}}
/* the tiles share the card's whole width on a computer (8 Oct 2026: "fit this area") */
@media(min-width:761px){.mdrow{grid-template-columns:repeat(var(--n),minmax(0,1fr));justify-content:stretch}}
/* a free period on now: green border, but its dash stays a dash and Free stays pink */
.mdfree.mdcur{background:#fdf0f4}
.mdfree.mdcur .mds{background:none;color:#374151}
.mdfree.mdcur .mdn{background:#14653a}
/* on a phone every period is seen at once: two rows of four, smaller but still bold (8 Oct 2026) */
@media(max-width:760px){
  .mdrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;gap:6px;padding-bottom:0}
  .mdt{flex:none;padding:6px 2px;gap:3px;border-radius:12px}
  .mdn{width:28px;height:28px;font-size:15px}
  .mdtm{font-size:17px;letter-spacing:-.3px}
  .mds{font-size:14px;padding:4px 7px;min-width:0;border-radius:9px}
  .mdfree .mds{font-size:15px;padding:0}
  .mdsub{font-size:11px;line-height:1.2}
  .mdt .mdc{font-size:10.5px;margin-top:-2px}
  .mdfp{font-size:12.5px;padding:4px 10px;border-radius:9px}
  .mdt .mddot{width:7px;height:7px}
}
@media(max-width:360px){.mdtm{font-size:15px}.mdn{width:24px;height:24px;font-size:13px}}
/* on a phone: all periods in one line (8 Oct 2026, "in one line not two lines") - small but bold; the subject's
   full name is left to the badge's title, the class stays */
@media(max-width:760px){
  .mdrow{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px}
  .mdt{padding:5px 1px 6px;gap:3px;border-radius:9px;border-width:1px}
  .mdt.mdcur{border-width:1.5px}
  .mdn{width:21px;height:21px;font-size:11.5px;box-shadow:none}
  .mdtm{font-size:11px;letter-spacing:-.4px;font-weight:800}
  .mds{font-size:10.5px;padding:2px 3px;border-radius:6px;letter-spacing:-.2px}
  .mdfree .mds{font-size:11px;padding:0}
  .mdsub{display:none}
  .mdt .mdc{font-size:8.5px;margin-top:0;line-height:1.1}
  .mdfp{font-size:9.5px;padding:2px 4px;border-radius:6px;font-weight:800}
  .mdt .mddot{width:6px;height:6px}
}
@media(max-width:360px){.mdtm{font-size:10px}.mdn{width:19px;height:19px;font-size:10.5px}.mdfp{font-size:8.5px;padding:2px 3px}}
@media(max-width:760px){
  .mdday{padding:12px 8px 12px}
  .mdrow{gap:2px}
  .mdt{padding:5px 0 6px}
  .mdt>*{overflow:visible;text-overflow:clip}
  .mdtm{font-size:10.5px;letter-spacing:-.5px}
  .mdfp{font-size:9px;padding:2px 3px;letter-spacing:-.2px}
  .mds{max-width:100%;overflow:hidden}
  .mdt .mdc{white-space:nowrap;letter-spacing:-.3px}
}
/* the box in the greeting during a free period (8 Oct 2026, from the Super Admin's picture) */
.mdnow.mdfreebox{position:relative;overflow:hidden;background:linear-gradient(120deg,#fff1f5 0%,#fde3ec 100%);border:1px solid #f6c4d4;
  box-shadow:0 8px 22px rgba(214,72,116,.14);padding:16px 120px 16px 20px;min-height:132px}
.mdfreebox:before{content:"";position:absolute;right:-60px;top:-50px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0 55%,transparent 56%);pointer-events:none}
.mdfreebox .mdhead{color:#6b5a62;font-size:15px}
.mdfreebox .mdhead>.ic{color:#e8577f;width:24px;height:24px}
.mdfreebox .mdwhat{font-size:34px;font-weight:800;color:#8a1538;letter-spacing:-.5px;line-height:1.1;margin:8px 0 6px}
.mdfreebox .mdnext{font-size:17px;color:#55505a}
.mdfreebox .mdnext>.ic{display:none}
.mdfbadge{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:88px;height:88px;border-radius:50%;
  background:rgba(255,255,255,.65);display:grid;place-items:center;color:#e8577f;box-shadow:0 4px 14px rgba(232,87,127,.15)}
@media(max-width:560px){
  .mdnow.mdfreebox{padding:14px 96px 14px 16px;min-height:112px}
  .mdfreebox .mdwhat{font-size:27px}
  .mdfreebox .mdnext{font-size:15px}
  .mdfreebox .mdhead{font-size:13.5px}
  .mdfbadge{width:70px;height:70px;right:14px}.mdfbadge svg{width:38px;height:38px}
}
/* the small lines of the greeting card and the Today strip in dark black (8 Oct 2026) */
.dhero .dwelcome,.dhero .hrole,.dhero .dprof,.mdhead,.mdhead>span,.mdnext,.mdtop span,
.mdfreebox .mdhead,.mdfreebox .mdnext{color:#111!important}
.dhero .dprof{font-weight:700}
/* the greeting card, third look (8 Oct 2026): the school from the air on the right fading into green, a big photo
   of the person, a sun by the greeting, My profile as a button; the box of the period on now stays */
.dhero.dph{min-height:240px;padding:30px 34px;background:linear-gradient(115deg,#d7f0df 0%,#eef9f1 30%,#f5fbf6 52%,#eaf7ee 100%);
  border:1px solid #d3ecdb;box-shadow:0 10px 30px rgba(15,63,33,.08)}
.dhero.dph:before{width:340px;height:340px;left:-150px;top:auto;bottom:-190px;border-radius:50%;transform:none;opacity:.55;
  background:radial-gradient(circle,#9fd9b1 0,#c4e8cf 45%,transparent 70%)}
.dhero.dph:after{left:47%;right:0;top:0;bottom:0;width:auto;height:auto;transform:none;border-radius:0;opacity:1;
  background:url(/static/public/campus.jpg) 62% 55%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 18%,#000 34%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 18%,#000 34%);z-index:0}
.dph .dface{width:132px;height:132px;border:6px solid #fff;box-shadow:0 8px 24px rgba(15,63,33,.18);background:#d5ecdb}
.dph .dface .initials{font-size:40px}
.dph .dwho{flex:0 1 auto;max-width:520px}
.dph .dwelcome{display:flex;align-items:center;gap:10px;font-size:21px;color:#374151!important;margin:0}
.dph .dsun{color:#1f6f3f;flex:none}
.dph h1{font-size:44px!important;font-weight:800;color:#0f3d24!important;letter-spacing:-.6px;line-height:1.1;margin:6px 0 8px!important}
.dph .hrole{font-size:17px!important;color:#374151!important;margin:0 0 14px!important}
.dph .dprof{display:inline-flex;align-items:center;gap:12px;padding:10px 22px 10px 18px;border-radius:999px;background:#d9f1e1;
  color:#0f3d24!important;font-size:18px;font-weight:800;text-decoration:none;box-shadow:inset 0 0 0 1px #bfe5cc;margin:0}
.dph .dprof:hover{background:#c9ebd5;text-decoration:none}
.dph .mdnow{margin-left:auto;align-self:center;position:relative;z-index:2}
.dph .mdnow:not(.mdfreebox){background:rgba(255,255,255,.94);backdrop-filter:blur(4px)}
@media(max-width:1100px){.dph h1{font-size:36px!important}.dph .dface{width:110px;height:110px}}
@media(max-width:760px){
  .dhero.dph{min-height:0;padding:18px 16px 16px}
  .dhero.dph:after{left:0;top:0;bottom:auto;height:150px;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.6) 55%,transparent 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.6) 55%,transparent 100%);opacity:.5}
  .dph .dface{width:72px;height:72px;border-width:4px}
  .dph .dwelcome{font-size:15px;gap:6px}.dph .dsun{width:20px;height:20px}
  .dph h1{font-size:25px!important;margin:2px 0 4px!important}
  .dph .hrole{font-size:12.5px!important;margin:0 0 8px!important}
  .dph .dprof{font-size:14px;padding:7px 14px 7px 12px;gap:8px}.dph .dprof svg{width:18px;height:18px}
  .dph .mdnow{margin-left:0}
}
@media(max-width:560px){
  .mdnow.mdfreebox{padding:14px 74px 14px 16px;min-height:0}
  .mdfreebox:before{width:130px;height:130px;right:-50px;top:-30px}
  .mdfbadge{width:54px;height:54px;right:12px}.mdfbadge svg{width:30px;height:30px}
  .mdfreebox .mdwhat{font-size:26px;white-space:nowrap}
}
/* the greeting card, fourth look (8 Oct 2026): curved bands on the green side, more of the school in the photo,
   and the period box small at the top right over the sea so the school stays in view */
.dhero.dph{min-height:270px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' preserveAspectRatio='none'><path d='M0 300 C120 210 230 250 330 170 C420 100 520 120 620 40 L800 -20 L800 300Z' fill='%23ffffff' fill-opacity='.0'/><path d='M-20 120 C80 60 200 40 330 70 C440 95 520 60 600 0' fill='none' stroke='%23ffffff' stroke-opacity='.85' stroke-width='22'/><path d='M-20 175 C110 120 240 130 360 165 C470 198 560 170 660 110' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='14'/><path d='M-20 300 C90 230 210 215 330 245 C430 270 520 255 600 210 L600 300Z' fill='%2387cfa0' fill-opacity='.45'/><path d='M-20 300 C70 260 170 250 260 270 C330 285 400 280 460 260 L460 300Z' fill='%2357b97d' fill-opacity='.35'/><path d='M0 0 L0 140 C60 90 130 50 220 30 C300 12 360 8 420 0Z' fill='%23bfe7cd' fill-opacity='.55'/></svg>") left bottom/80% 100% no-repeat,
  linear-gradient(115deg,#cfeeda 0%,#ecf8f0 34%,#f6fbf7 55%,#eaf7ee 100%)}
.dhero.dph:before{display:none}
.dhero.dph:after{left:42%;background:url(/static/public/campus.jpg) 50% 62%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.65) 12%,#000 26%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.65) 12%,#000 26%)}
@media(min-width:761px){
  .dph .mdnow{position:absolute;top:16px;right:16px;margin:0;width:350px;max-width:34%;padding:12px 16px;min-height:0;
    box-shadow:0 10px 26px rgba(10,40,60,.22)}
  .dph .mdnow.mdfreebox{padding:12px 84px 12px 16px}
  .dph .mdfreebox .mdwhat{font-size:27px;margin:4px 0 2px}
  .dph .mdfreebox .mdnext{font-size:15px}
  .dph .mdfreebox .mdhead{font-size:13.5px}
  .dph .mdfbadge{width:62px;height:62px;right:12px}.dph .mdfbadge svg{width:34px;height:34px}
  .dph .mdfreebox:before{width:150px;height:150px;right:-55px;top:-40px}
}
.dhero.dph{justify-content:flex-start}
.dph .dwho{flex:0 1 auto;max-width:44%}
@media(max-width:760px){.dph .dwho{max-width:none;flex:1 1 0}.dhero.dph{background-size:140% 100%,auto}}
@media(max-width:760px){
  .dhero.dph{padding-top:120px}
  .dhero.dph:after{left:0;right:0;top:0;bottom:auto;height:150px;opacity:1;background-position:50% 60%;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%)}
  .dph .dface{margin-top:-30px}
}
/* on a phone the card keeps its old compact size (8 Oct 2026): the school photo sits in the top right corner,
   where the drawn sun and school were, fading away to the left and down */
@media(max-width:760px){
  .dhero.dph{padding:16px 14px 14px;min-height:0}
  .dhero.dph:after{left:46%;right:0;top:0;bottom:auto;height:118px;opacity:1;background-position:55% 55%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(180deg,#000 45%,transparent 100%);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(180deg,#000 45%,transparent 100%);
    mask-composite:intersect}
  .dph .dface{width:60px;height:60px;border-width:3px;margin-top:0}
  .dph .dwelcome{font-size:13.5px}.dph .dsun{width:17px;height:17px}
  .dph h1{font-size:22px!important;margin:0 0 2px!important}
  .dph .hrole{font-size:11.5px!important;margin:0 0 6px!important}
  .dph .dprof{font-size:13px;padding:5px 12px 5px 10px;gap:6px}.dph .dprof svg{width:16px;height:16px}
  .dph .mdnow.mdfreebox{padding:12px 64px 12px 14px}
  .dph .mdfreebox .mdwhat{font-size:21px;margin:4px 0 2px}
  .dph .mdfreebox .mdnext{font-size:13.5px}
  .dph .mdfreebox .mdhead{font-size:12.5px}.dph .mdfreebox .mdhead>.ic{width:18px;height:18px}
  .dph .mdfbadge{width:46px;height:46px;right:10px}.dph .mdfbadge svg{width:26px;height:26px}
  .dph .mdfreebox:before{width:110px;height:110px;right:-45px;top:-30px}
}
/* the curves of the Super Admin's picture, drawn plainly (8 Oct 2026): a white crescent and green sweeps on the
   left and white lines running on over the photo - laid over the photo, under the words */
.dhero.dph{background:linear-gradient(115deg,#c6ebd3 0%,#e9f7ee 38%,#f4fbf6 55%,#eaf7ee 100%)}
.dhero.dph:before{display:block;content:"";position:absolute;left:0;top:0;right:0;bottom:0;width:auto;height:auto;border-radius:0;
  transform:none;opacity:1;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path d='M0 300 L0 170 C120 215 250 250 420 245 C560 240 640 270 700 300Z' fill='%2379c795' fill-opacity='.75'/><path d='M0 300 L0 230 C150 255 300 290 470 300Z' fill='%234fb072' fill-opacity='.55'/><path d='M0 0 L0 120 C140 60 300 150 430 215 C520 260 600 255 640 245 C560 240 470 215 390 160 C290 90 170 10 120 0Z' fill='%23ffffff' fill-opacity='.85'/><path d='M0 0 L0 70 C90 30 180 12 280 0Z' fill='%23a9dfbb' fill-opacity='.7'/><path d='M300 300 C480 250 640 230 800 175 C880 147 950 120 1000 95' fill='none' stroke='%23ffffff' stroke-width='5' stroke-opacity='.9'/><path d='M380 300 C540 270 700 255 860 210 C920 192 965 175 1000 160' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='.75'/></svg>") 0 0/100% 100% no-repeat;z-index:1;pointer-events:none}
.dhero.dph:after{z-index:0}
.dhero.dph>*{z-index:2}

/* ---- Stock Requests (8 Oct 2026): teal for "from the store", purple for "to be bought", orange for the step on now ---- */
.sqtop h1{margin:0;font-size:26px;color:#0f3d24}.sqtop p{margin:4px 0 14px;color:#374151}
.sqtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.sqtabs a{padding:9px 16px;border-radius:999px;background:#f1f5f3;color:#1f2937;text-decoration:none;font-weight:700;font-size:14px;border:1px solid #e3ebe6}
.sqtabs a.on{background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(20,184,166,.3)}
.sqtabs a:hover:not(.on){background:#e6f4ef}
.sqstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.sqstat{border-radius:16px;padding:14px 18px;color:#fff;display:flex;flex-direction:column}
.sqstat b{font-size:28px;line-height:1}.sqstat span{font-size:13px;opacity:.95;margin-top:4px}
.sqstat.s1{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.sqstat.s2{background:linear-gradient(135deg,#f97316,#f59e0b)}
.sqstat.s3{background:linear-gradient(135deg,#a855f7,#7c3aed)}.sqstat.s4{background:linear-gradient(135deg,#16a34a,#0f766e)}
.sqcard{background:#fff;border:1px solid #e3ebe6;border-radius:18px;padding:18px 20px;box-shadow:0 6px 20px rgba(15,63,33,.06);margin-bottom:16px}
.sqcard h2{margin:0 0 6px;font-size:20px;color:#0f3d24;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sqlist{display:flex;flex-direction:column;gap:8px}
.sqrow{display:grid;grid-template-columns:110px 170px 1fr auto auto auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;
  border:1px solid #edf1ef;text-decoration:none;color:#111;background:#fbfdfc;transition:.15s}
.sqrow:hover{border-color:#99e0d2;background:#f2fbf8;transform:translateY(-1px)}
.sqrow.sqturn{border-color:#fdba74;background:#fff8f1}
.sqref{font-weight:800;color:#0f766e}.sqby b{display:block}.sqby small,.sqitems small{display:block;color:#6b7280;font-size:12px}
.sqitems{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.sqpath{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.sqpath.sqteal{background:#ccfbf1;color:#0f766e}.sqpath.sqpurple{background:#f3e8ff;color:#7e22ce}.sqpath.sqgrey{background:#f1f5f9;color:#64748b}
.sqpath.big{font-size:14px;padding:7px 14px}
.sqchip{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.sqc-wait{background:#e0f2fe;color:#0369a1}.sqc-on{background:#ffedd5;color:#c2410c}.sqc-done{background:#dcfce7;color:#15803d}.sqc-bad{background:#fee2e2;color:#b91c1c}
.sqyou{font-size:12px;font-weight:800;color:#fff;background:#f97316;padding:4px 10px;border-radius:999px}
.sqempty{color:#6b7280;text-align:center;padding:30px}
.sqform{display:flex;flex-direction:column;gap:12px;max-width:820px}
.sqform label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:13.5px;color:#1f2937}.sqhalf{max-width:260px}
.sqlines{display:flex;flex-direction:column;gap:8px}
.sqline{display:grid;grid-template-columns:1fr 130px 150px 36px;gap:8px;align-items:center}
.sqx{border:0;background:#fee2e2;color:#b91c1c;border-radius:10px;height:36px;font-size:20px;cursor:pointer}
.btn.sqbig{padding:12px 26px;font-size:16px}
.sqhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.sqhead p{margin:0;color:#374151}
.sqstep{list-style:none;display:flex;gap:0;padding:0;margin:18px 0 20px;overflow-x:auto}
.sqstep li{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;text-align:center;font-size:12.5px;font-weight:700;color:#94a3b8}
.sqstep li:before{content:"";position:absolute;top:17px;left:-50%;right:50%;height:4px;background:#e2e8f0;z-index:0}
.sqstep li:first-child:before{display:none}
.sqstep li i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:#e2e8f0;color:#64748b;z-index:1}
.sqstep li.done{color:#15803d}.sqstep li.done i{background:#22c55e;color:#fff}.sqstep li.done:before{background:#22c55e}
.sqstep li.now{color:#c2410c}.sqstep li.now i{background:#f97316;color:#fff;box-shadow:0 0 0 6px #ffedd5}.sqstep li.now:before{background:#22c55e}
.sqcols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
.sqt{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:12px}
.sqt th{background:#f0fdf9;color:#0f766e;text-align:left;padding:8px;font-size:12.5px}.sqt td{padding:8px;border-bottom:1px solid #eef2f0}
.sqt .num{text-align:right}.sqt input,.sqt select{width:100%}.sqhave{color:#0f766e;font-weight:700;white-space:nowrap}
.sqfacts{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:14px;margin:6px 0 12px}.sqfacts dt{color:#6b7280}.sqfacts dd{margin:0;font-weight:700}
.sqact{background:linear-gradient(135deg,#fff7ed,#fff);border:1px solid #fed7aa;border-radius:16px;padding:14px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.sqact h3{margin:0;color:#9a3412;font-size:17px}.sqact label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700}
.sqgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sqbtns{display:flex;gap:8px;flex-wrap:wrap}
.btn.sqgo-teal{background:#0d9488;border-color:#0d9488;color:#fff}.btn.sqgo-purple{background:#9333ea;border-color:#9333ea;color:#fff}
.btn.sqgo-green{background:#16a34a;border-color:#16a34a;color:#fff}
.sqchoice{display:flex;gap:10px}.sqchoice label{flex-direction:row;cursor:pointer}.sqchoice input{position:absolute;opacity:0}
.sqchoice span{padding:12px 26px;border-radius:12px;border:2px solid #e9d5ff;font-weight:800;color:#7e22ce;background:#fff}
.sqchoice input:checked+span{background:#9333ea;color:#fff;border-color:#9333ea}
.sqqs{display:flex;flex-direction:column;gap:6px}.sqq{display:grid!important;grid-template-columns:22px 1fr auto;gap:4px 10px;align-items:center;
  padding:10px 12px;border:1px solid #e9d5ff;border-radius:12px;background:#faf5ff;cursor:pointer}.sqq small{grid-column:2/4;color:#6b7280;font-weight:400}
.sqwaitbox{background:#f0f9ff;border:1px dashed #7dd3fc;border-radius:14px;padding:12px 14px;margin-bottom:12px;color:#075985}
.sqprints{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}.sqprints b{margin-right:4px}
.sqprint{padding:7px 12px;border-radius:10px;background:#eef2ff;color:#3730a3;text-decoration:none;font-weight:700;font-size:13px}
.sqprint:hover{background:#e0e7ff}
.sqlogh{margin:10px 0 6px;color:#0f3d24}.sqlog{list-style:none;padding:0;margin:0;border-left:3px solid #ccfbf1}
.sqlog li{padding:4px 0 8px 14px;position:relative;display:flex;flex-direction:column}.sqlog li:before{content:"";position:absolute;left:-7px;top:9px;width:11px;height:11px;border-radius:50%;background:#14b8a6}
.sqlog small{color:#6b7280}.sqcancel{margin-top:10px}
.sqflow{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.sqflow ol{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.sqflow li{flex:1;min-width:150px;padding:12px 14px;border-radius:14px;display:flex;flex-direction:column;gap:3px;position:relative}
.sqflow li span{font-weight:800}.sqflow li small{font-size:12px;opacity:.85}
.sqcommon li{background:linear-gradient(135deg,#e0f2fe,#f0f9ff);color:#075985}
.sqlanes{display:grid;grid-template-columns:1fr 2fr;gap:14px}.sqlane b{display:block;margin-bottom:8px;font-size:16px}
.sqlane.sqteal li{background:#ccfbf1;color:#115e59}.sqlane.sqteal b{color:#0f766e}
.sqlane.sqpurple li{background:#f3e8ff;color:#6b21a8}.sqlane.sqpurple b{color:#7e22ce}
.sqwhos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sqwho{border-radius:16px;padding:14px;border:1px solid #e3ebe6}.sqwho h3{margin:0 0 4px}
.sqrole-stock{background:#f0fdfa}.sqrole-finance{background:#faf5ff}.sqrole-approve{background:#f0fdf4}
.sqboxes{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow:auto;font-size:13.5px}
@media(max-width:900px){.sqrow{grid-template-columns:1fr auto;grid-template-areas:none}.sqrow .sqitems{grid-column:1/-1}
  .sqcols,.sqlanes,.sqwhos{grid-template-columns:1fr}.sqstats{grid-template-columns:repeat(2,1fr)}.sqline{grid-template-columns:1fr 80px 36px}
  .sqline input[name=iunit]{display:none}.sqgrid{grid-template-columns:1fr}}
/* on a phone the corner photo shows the school itself (the hall and the field), strong and clear (8 Oct 2026) */
@media(max-width:760px){
  .dhero.dph:after{left:42%;height:128px;background-size:auto 175%;background-position:22% 100%;filter:saturate(1.15) contrast(1.05);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,#000 70%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,#000 70%,transparent 100%)}
  .dph .dwho{position:relative}
  .dph .hrole{text-shadow:0 0 6px #fff,0 0 2px #fff}
  .dph h1{text-shadow:0 0 10px rgba(255,255,255,.9)}
}
/* the whole school shows in the photo - the hall and the main field - with nothing drawn across it (8 Oct 2026) */
@media(min-width:761px){
  .dhero.dph:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path d='M0 300 L0 170 C110 215 230 250 360 248 C430 247 470 262 500 300Z' fill='%2379c795' fill-opacity='.75'/><path d='M0 300 L0 230 C130 255 260 288 400 300Z' fill='%234fb072' fill-opacity='.55'/><path d='M0 0 L0 120 C130 60 270 140 380 205 C430 235 470 248 500 250 C450 238 400 210 350 160 C260 85 160 10 115 0Z' fill='%23ffffff' fill-opacity='.85'/><path d='M0 0 L0 70 C90 30 180 12 280 0Z' fill='%23a9dfbb' fill-opacity='.7'/><path d='M250 300 C330 270 400 255 470 235' fill='none' stroke='%23ffffff' stroke-width='5' stroke-opacity='.9'/></svg>")}
  .dhero.dph:after{background-position:38% 96%;background-size:cover}
}
/* clearer small lines in the greeting card (8 Oct 2026): darker and a little bolder, no glow; the role line sits on
   a clean white strip where it meets the photo; a bigger photo of the person */
.dph .hrole{color:#0b0f0d!important;font-weight:600;text-shadow:none!important;display:inline-block;
  background:rgba(255,255,255,.88);padding:3px 10px;border-radius:8px;margin-left:-10px!important}
.dph .dwelcome{color:#0b0f0d!important;font-weight:600}
.mdhead,.mdhead>span{color:#0b0f0d!important;font-weight:600}
.mdnext,.mdfreebox .mdnext{color:#0b0f0d!important;font-weight:600}
.dph h1{text-shadow:none!important}
.dph .dface{width:152px;height:152px}
@media(max-width:1100px){.dph .dface{width:124px;height:124px}}
@media(max-width:760px){.dph .dface{width:76px;height:76px}.dph .hrole{padding:2px 7px;margin-left:-7px!important}}
@media(max-width:760px){
  .dhero.dph:after{left:62%;height:auto;bottom:0;background-size:cover;background-position:30% 90%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%);mask-image:linear-gradient(90deg,transparent 0,#000 35%)}
  .dph .dwho{max-width:62%;flex:1 1 auto}
  .dph h1{font-size:21px!important}
  .dph .hrole{background:none;padding:0;margin-left:0!important}
  .dph .mdnow{position:relative;z-index:3}
}
/* pure black for the small lines everywhere, computer and phone (8 Oct 2026) */
.dhero .dwelcome,.dhero .hrole,.dph .hrole,.dph .dwelcome,.mdhead,.mdhead>span,.mdnext,.mdfreebox .mdnext,.mdfreebox .mdhead,.mdtop span{color:#000!important}
.dph .hrole,.dph .dwelcome,.mdhead>span,.mdnext{font-weight:600}
/* the role line now sits under the My profile button (8 Oct 2026) */
.dph .dprof{margin:2px 0 10px!important}
.dph .hrole{margin:0!important;display:table}
@media(max-width:760px){.dph .dprof{margin:2px 0 6px!important}}
/* on a phone (8 Oct 2026, the Super Admin's crop): the school itself - the hall and the field - fills the right of the
   card, and the period box is half as wide, without its badge, so the school shows beside it */
@media(max-width:760px){
  .dhero.dph:after{left:48%;right:0;top:0;bottom:0;height:auto;background:url(/static/public/campus-school.jpg) 35% 50%/cover no-repeat;
    filter:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
  .dph .dwho{max-width:58%}
  .dph .mdnow.mdfreebox,.dph .mdnow{flex:0 0 auto;width:auto;max-width:58%;padding:10px 14px;margin-left:0;min-height:0}
  .dph .mdfbadge,.dph .mdfreebox:before{display:none}
  .dph .mdfreebox .mdwhat{font-size:21px;white-space:nowrap}
  .dph .mdfreebox .mdnext{font-size:13px}
  .dph .mdnow:not(.mdfreebox){max-width:100%}
}
@media(max-width:760px){
  .dhero.dph:after{left:38%;top:auto;bottom:0;height:56%;background-position:30% 55%;background-size:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 24%);
    mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 24%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .dph .dwho{max-width:none}
  .dph .mdnow.mdfreebox,.dph .mdnow{max-width:50%}
  .dph .mdfreebox .mdhead{font-size:12px;white-space:nowrap}
  .dph .mdfreebox .mdwhat{font-size:20px}
  .dph .mdfreebox .mdnext{font-size:12px}
}
/* phone, final shape (8 Oct 2026): the name on top; under it two tiles of one size - the period box on the left and
   a framed photo of the school (the hall and the field) on the right */
@media(max-width:760px){
  .dhero.dph{padding:14px 14px 14px}
  .dph .dwho{flex:1 1 0;min-width:0;max-width:none}
  .dhero.dph:after{left:auto;right:14px;top:auto;bottom:14px;width:calc(50% - 20px);height:100px;border-radius:14px;
    background:url(/static/public/campus-school.jpg) 30% 60%/cover no-repeat;-webkit-mask-image:none;mask-image:none;
    box-shadow:0 6px 16px rgba(15,63,33,.22);border:2px solid #fff;z-index:1}
  .dph .mdnow.mdfreebox,.dph .mdnow{width:calc(50% - 6px);max-width:none;height:100px;box-sizing:border-box;padding:10px 12px;
    display:flex;flex-direction:column;justify-content:center;margin:0}
  .dph .mdfreebox .mdhead{font-size:11.5px}.dph .mdfreebox .mdhead>.ic{width:15px;height:15px}
  .dph .mdfreebox .mdwhat{font-size:19px;white-space:nowrap;margin:3px 0 1px}
  .dph .mdfreebox .mdnext{font-size:11.5px;line-height:1.25}
}
@media(max-width:760px){
  .dhero.dph.mdhero,.dhero.dph{display:grid!important;grid-template-columns:76px minmax(0,1fr);column-gap:12px;row-gap:12px;align-items:center}
  .dph .dface{grid-column:1;grid-row:1}
  .dph .dwho{grid-column:2;grid-row:1}
  .dph .mdnow,.dph .mdnow.mdfreebox{grid-column:1/-1;grid-row:2;justify-self:start}
}
/* each on its own line: greeting, name, the role line, and the My profile button under it (8 Oct 2026) */
.dph .dwho{display:flex;flex-direction:column;align-items:flex-start}
.dph .dwelcome{order:1}.dph h1{order:2}
.dph .hrole{order:3;display:inline-block;margin:0 0 10px!important}
.dph .dprof{order:4;margin:0!important}
@media(max-width:760px){.dph .hrole{margin:0 0 6px!important}}
/* manual entries: Edit opens a line under the entry (8 Oct 2026) */
.btn.medbtn{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.medrow td{background:#f0f9ff}
.medform{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.medform label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:700;color:#334155}
.medform input,.medform select{min-width:0}
/* phone (8 Oct 2026): the whole school picture the Super Admin chose - the hall, the field and the blocks - as its own
   strip under the period box, at the picture's own shape so nothing is cut off */
@media(max-width:760px){
  .dhero.dph:after{position:static;grid-column:1/-1;grid-row:3;display:block;width:100%;height:auto;aspect-ratio:1045/245;
    left:auto;right:auto;top:auto;bottom:auto;background:url(/static/public/campus-wide.jpg) center/100% 100% no-repeat;
    border-radius:14px;border:2px solid #fff;box-sizing:border-box;box-shadow:0 6px 16px rgba(15,63,33,.22);
    -webkit-mask-image:none;mask-image:none;filter:none;opacity:1;transform:none}
  /* the period box stays as it was: half the width (the Super Admin did not ask for it to change) */
}
/* the panel's own OK / Cancel box, in place of the browser's pop-up (egask.js, 8 Oct 2026) */
.egask{position:fixed;inset:0;z-index:10000;background:rgba(15,23,42,.38);display:flex;align-items:center;justify-content:center;padding:16px;
  animation:egaskin .12s ease-out}
.egaskbox{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.28);padding:22px 22px 18px;width:min(420px,100%);
  border-top:5px solid #134E3B}
.egaskbox p{margin:0 0 18px;font-size:15.5px;font-weight:600;color:#0f172a;white-space:pre-line;line-height:1.45}
.egaskbtn{display:flex;justify-content:flex-end;gap:10px}
.egaskbtn .btn{min-width:92px}
@keyframes egaskin{from{opacity:0}to{opacity:1}}
/* phone: the school strip without the white frame or shadow, so it sits in the card like the picture itself (8 Oct 2026) */
@media(max-width:760px){.dhero.dph:after{border:0;box-shadow:none;border-radius:14px}}
/* phone (8 Oct 2026, the Super Admin's picture): the period box on the left and the school photo on the right, side
   by side at one height, no frame; a smaller face and name above them */
@media(max-width:760px){
  .dhero.dph.mdhero,.dhero.dph{grid-template-columns:64px minmax(0,1fr);column-gap:12px;row-gap:12px;padding:14px}
  .dph .dface{width:64px;height:64px}
  .dph .dface img,.dph .dface>*{width:64px;height:64px}
  .dph h1{font-size:22px;line-height:1.15}
  .dhero.dph:after{grid-row:2;grid-column:1/-1;justify-self:end;align-self:stretch;width:calc(46% - 6px);height:100px;
    aspect-ratio:auto;background:url(/static/public/campus-wide.jpg) 28% 50%/cover no-repeat;border:0;box-shadow:none;border-radius:14px}
  .dph .mdnow,.dph .mdnow.mdfreebox{grid-row:2;width:calc(54% - 6px);height:100px;justify-self:start;padding:10px 11px}
  .dph .mdfreebox .mdhead{font-size:11px;white-space:nowrap}.dph .mdfreebox .mdwhat{font-size:19px}
  .dph .mdfreebox .mdnext{font-size:11.5px}
}
/* phone (8 Oct 2026): the period box and the school photo joined as one piece - no gap, no frame; the pink fades
   into the picture so the join is not seen */
@media(max-width:760px){
  .dhero.dph:after{width:60%;border-radius:0 16px 16px 0;-webkit-mask-image:none;mask-image:none;background-position:6% 50%}
  .dph .mdnow,.dph .mdnow.mdfreebox{width:50%;border:0;border-radius:16px 0 0 16px;box-shadow:none;position:relative;z-index:2;
    width:56%;background:linear-gradient(90deg,#fff1f5 0%,#fde3ec 64%,rgba(253,227,236,.8) 80%,rgba(253,227,236,0) 100%)}
  .dph .mdfreebox:before{display:none}
}
/* the same text sizes on Android as on an iPhone, and no double-tap zoom (8 Oct 2026) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
/* phone (8 Oct 2026): staff without a timetable get the date box in the same place and look as the pink box -
   joined to the school photo, one height */
@media(max-width:760px){
  .dhero.dph:not(.mdhero){display:grid!important;grid-template-columns:64px minmax(0,1fr);column-gap:12px;row-gap:12px;align-items:center}
  .dph .hdate{grid-row:2;grid-column:1/-1;justify-self:start;width:56%;height:100px;box-sizing:border-box;margin:0;min-width:0;
    padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:left;border:0;border-radius:16px 0 0 16px;box-shadow:none;
    position:relative;z-index:2;background:linear-gradient(90deg,#fff1f5 0%,#fde3ec 64%,rgba(253,227,236,.8) 80%,rgba(253,227,236,0) 100%)}
  .dph .hdate>.ic{color:#e8577f}
  .dph .hdate span{font-size:11.5px;color:#6b5a62}
  .dph .hdate b{font-size:19px;font-weight:800;color:#8a1538;white-space:nowrap;margin:1px 0}
}
/* the Android app page (8 Oct 2026) */
.okc{color:#15803d}.oldc{color:#b45309}

/* SEN pull-out pupils on a teacher's timetable (11 Oct 2026) */
.ttl .ttpup{font-size:10px;line-height:1.25;color:#3b2f00;font-weight:700;text-align:left;margin-top:3px;white-space:normal;background:#fff3a3;border-radius:5px;padding:1px 4px}

/* Library (13 Oct 2026) */
.dgicon.a-lib{background:linear-gradient(160deg,#c084fc,#7e22ce)}.a-lib{background:#7e22ce}