/* SMS v4 dashboard look: white workspace, navy navigation, royal-blue actions, purple and green accents. */
:root{--navy:#0f2557;--royal:#2856d9;--purple:#6b3fd4;--green:#179a62;--ink:#0f2557;--acc:#2bb673;--bg:#f4f6fb;--card:#fff;--line:#e2e6ef;--txt:#14203a;--mut:#5b6680;--ok:#167a50;--bad:#c2341f;--warn:#a66300;--shadow:0 1px 2px rgba(15,37,87,.06),0 6px 20px rgba(15,37,87,.06);--r:14px}
:root[data-theme="blue"]{--ink:#0f2557;--acc:#2bb673}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:#0d1424;--card:#151f36;--line:#27365a;--txt:#e8ecf4;--mut:#9eabc5;--ink:#0a1020}}
:root[data-theme="dark"]{--shadow:0 1px 2px #0006,0 8px 24px #0005;--royal:#5b83f0}
body{font-family:"Atkinson Hyperlegible","Bricolage Grotesque",system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand,.stat b,.auth-h,.resbig{font-family:"Bricolage Grotesque",system-ui,sans-serif}
h1{font-size:28px;letter-spacing:-.4px;color:var(--txt)}h2{font-size:17px}h3{font-size:15px;margin:14px 0 6px}
main{max-width:1180px;padding:26px 28px 60px}
@media (min-width:761px){.app{grid-template-columns:240px 1fr}}
nav{background:linear-gradient(175deg,#0f2557 0%,#13306f 55%,#2a1f6b 100%);box-shadow:4px 0 24px rgba(15,37,87,.12)}
:root[data-theme="green"] nav{background:linear-gradient(175deg,#0f3b26,#14532d 60%,#1e3a5f)}
:root[data-theme="purple"] nav{background:linear-gradient(175deg,#2e1065,#4c1d95 60%,#1e2a6b)}
:root[data-theme="dark"] nav{background:#0a1020}
.brand img{border-radius:14px;box-shadow:0 8px 20px #0004}
nav button{border-radius:10px;transition:background .15s,transform .15s}
nav button:hover{transform:translateX(2px)}
nav button.on{background:#ffffff1f;box-shadow:inset 3px 0 0 var(--acc)}
.ni{border-radius:9px;box-shadow:inset 0 -2px 0 #0002}
.ng{color:#aab8dd}
.sync{display:inline-flex;align-items:center;gap:6px}.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:#94a3b8;flex:none}
.sync.ok::before{background:#34d399}.sync.busy::before,.sync.warn::before{background:#fbbf24;animation:pulse 1s infinite}.sync.err::before{background:#f87171}
@keyframes pulse{50%{opacity:.3}}
.card{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow);padding:18px}
.stat{border-radius:var(--r);border:1px solid var(--line);border-left:0;box-shadow:var(--shadow);position:relative;overflow:hidden;padding:14px 16px 14px 20px;transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--royal),var(--purple))}
.grid .stat:nth-child(2)::before{background:linear-gradient(180deg,var(--green),#0ea5a4)}
.grid .stat:nth-child(3)::before{background:linear-gradient(180deg,#0ea5e9,var(--royal))}
.grid .stat:nth-child(4)::before{background:linear-gradient(180deg,#f59e0b,#ef4444)}
.grid .stat:nth-child(5)::before{background:linear-gradient(180deg,var(--purple),#ec4899)}
.stat:hover{transform:perspective(600px) rotateX(3deg) translateY(-2px);box-shadow:0 14px 30px rgba(15,37,87,.12)}
.stat b{font-size:30px;letter-spacing:-.5px}
.btn{border-radius:10px;background:linear-gradient(180deg,#3463e6,var(--royal));border-color:var(--royal);box-shadow:0 1px 0 #ffffff33 inset,0 2px 6px rgba(40,86,217,.25);transition:transform .12s,box-shadow .12s,filter .12s;padding:9px 14px;line-height:1.2}
.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:var(--card);color:var(--txt);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--royal);color:var(--royal)}
.btn.wa{background:linear-gradient(180deg,#22b35e,#179a62);border-color:#179a62;box-shadow:0 2px 6px #179a6240}
input,select,textarea{border-radius:10px;border-color:var(--line);padding:9px 11px}
input:focus,select:focus,textarea:focus{border-color:var(--royal)}
:focus-visible{outline:3px solid #6b9bff!important;outline-offset:2px}
table th{text-transform:none;font-size:12.5px;letter-spacing:.2px}
tr:hover td{background:#2856d905}
.pill{font-weight:700}.pill.ok{background:#16a34a1f;color:var(--ok)}.pill.bad{background:#dc26261a;color:var(--bad)}.pill.warn{background:#f59e0b26;color:var(--warn)}
.seg button{padding:7px 12px}
.seg button.on{background:var(--royal)}
/* view entrance: one short orchestrated reveal when the page changes */
main.enter>*{animation:rise .42s cubic-bezier(.2,.7,.2,1) both}
main.enter>*:nth-child(2){animation-delay:.03s}main.enter>*:nth-child(3){animation-delay:.06s}main.enter>*:nth-child(4){animation-delay:.09s}main.enter>*:nth-child(n+5){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* loading bar */
#ldbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:90;pointer-events:none;background:linear-gradient(90deg,transparent,var(--royal),var(--purple),var(--green),transparent);background-size:50% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .2s}
#ldbar.on{opacity:1;animation:ld 1.1s linear infinite}
@keyframes ld{from{background-position:-50% 0}to{background-position:150% 0}}
/* toasts */
.toast{display:flex;gap:10px;align-items:center;max-width:min(560px,calc(100vw - 32px));border-radius:12px;padding:12px 16px;box-shadow:0 12px 32px rgba(15,37,87,.25);background:#14203a;font-weight:600;transform:translate(-50%,10px);transition:opacity .2s,transform .2s;z-index:95}
.toast.show{transform:translate(-50%,0)}
.toast .ti{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffffff26;flex:none;font-size:13px}
.toast.ok{background:#0f6b45}.toast.err{background:#a3271a}.toast.info{background:#1e3a8a}
/* forms */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.fl{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mut);font-weight:600}
.fl input,.fl select,.fl textarea{color:var(--txt);font-weight:400;font-size:15px}
.fl b{color:var(--txt);font-size:15px;padding:9px 0}
.chk{display:flex;gap:8px;align-items:center;margin:8px 0;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--royal)}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.pick{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:14px}
.pick:has(input:checked){border-color:var(--royal);background:#2856d914;color:var(--royal)}
.cbox{border:1px dashed var(--line);border-radius:12px;padding:8px 12px;margin:12px 0}
.bad-note,.ok-note{border-radius:12px;padding:12px 14px;margin-bottom:14px}
.bad-note{background:#dc26261a;border:1px solid #dc262640;color:var(--bad)}.ok-note{background:#16a34a14;border:1px solid #16a34a40}
.code{font:700 16px/1 ui-monospace,Consolas,monospace;letter-spacing:1px;background:#6b3fd41a;color:var(--purple);padding:4px 8px;border-radius:8px}
.pwf{position:relative;display:flex;flex:1;min-width:200px}.pwf input{flex:1;padding-right:64px;width:100%}
.pwt{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--royal);font:600 13px inherit;cursor:pointer;padding:6px}
/* sign-in */
body.locked{background:radial-gradient(1200px 600px at 10% -10%,#2856d924,transparent 60%),radial-gradient(900px 500px at 110% 10%,#6b3fd41f,transparent 60%),radial-gradient(800px 500px at 50% 120%,#179a621a,transparent 60%),var(--bg)}
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px}
.auth-back{align-self:flex-start;color:var(--royal);text-decoration:none;font-weight:600;margin:0 0 18px;max-width:440px;width:100%;margin-inline:auto}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 28px;box-shadow:0 30px 60px -20px rgba(15,37,87,.25);animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.auth-mark{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:conic-gradient(from 200deg,var(--navy),var(--royal),var(--purple),var(--green),var(--navy));box-shadow:0 12px 26px -8px #2856d980;transform:rotate(-6deg);margin-bottom:14px}
.auth-mark span{background:#fff;color:var(--navy);font:800 15px "Bricolage Grotesque",sans-serif;padding:6px 8px;border-radius:9px;transform:rotate(6deg)}
.auth-h{font-size:14px;color:var(--mut);margin:0 0 4px;font-weight:600;letter-spacing:.2px}
.auth h2{font-size:24px;margin:0 0 6px}
.auth .sub{margin:0 0 14px}
.stack{display:flex;flex-direction:column;gap:10px}.stack .btn{width:100%;justify-content:center;padding:11px}
.auth-err{color:var(--bad);min-height:20px;margin:12px 0 0;font-weight:600}
.auth-note{background:#f59e0b1f;border-radius:10px;padding:9px 12px;color:var(--warn);font-weight:600}
.auth-foot{color:var(--mut);font-size:13px;margin-top:18px;text-align:center;max-width:440px}
.rcode{font:800 26px/1 ui-monospace,Consolas,monospace;letter-spacing:3px;text-align:center;padding:18px;background:#6b3fd414;color:var(--purple);border-radius:14px;margin:6px 0 16px;user-select:all}
/* scanning */
.scan-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.scanf{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
#scanin{font:700 22px ui-monospace,Consolas,monospace;letter-spacing:1px;padding:16px;border:2px dashed var(--royal);background:#2856d908;text-transform:uppercase}
#scanin:focus{border-style:solid;box-shadow:0 0 0 5px #2856d922}
.camwrap{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3;max-height:360px}
.camwrap video{width:100%;height:100%;object-fit:cover;display:block}
.camframe{position:absolute;inset:18% 22%;border:3px solid #ffffffd0;border-radius:18px;box-shadow:0 0 0 999px #0006}
.res{transition:border-color .2s}.res-ok{border-color:#16a34a;background:linear-gradient(180deg,#16a34a12,var(--card) 60%)}.res-warn{border-color:#f59e0b;background:linear-gradient(180deg,#f59e0b14,var(--card) 60%)}.res-bad{border-color:#dc2626;background:linear-gradient(180deg,#dc262612,var(--card) 60%)}
.res.pop{animation:pop .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{0%{transform:scale(.97)}100%{transform:none}}
.resrow{display:flex;gap:14px;align-items:center}
.resimg{width:84px;height:84px;border-radius:16px;object-fit:cover;flex:none;background:#2856d91a;display:grid;place-items:center;font:800 26px "Bricolage Grotesque",system-ui,sans-serif;color:var(--royal)}
.resbig{font-size:22px;font-weight:800;margin-bottom:2px}
.res-ok .resbig{color:var(--ok)}.res-warn .resbig{color:var(--warn)}.res-bad .resbig{color:var(--bad)}
.resname{font-size:19px}
/* lesson plans */
.tinfo{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;background:linear-gradient(90deg,#2856d90f,#6b3fd40f)}
.filt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.filt input[type=text],.filt #lpq{flex:1;min-width:200px}
.lpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.lpc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;border-top:4px solid var(--royal)}
.lpc h3{margin:6px 0 0;font-size:17px}.lph{display:flex;justify-content:space-between;align-items:center}
.lpo{margin:6px 0;color:var(--txt);flex:1}
.wkgrid{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:10px;overflow-x:auto}
.wkday,.moday{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:120px}
.wkday.today,.moday.today{border-color:var(--royal);box-shadow:0 0 0 2px #2856d933}
.mogrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mohd{font-size:12px;color:var(--mut);font-weight:700;padding:0 4px}
.moday{min-height:92px;padding:6px;font-size:12px}.moday.out{opacity:.45}.moday>span:first-child{font-weight:700}
.lpchip{border:0;text-align:left;background:#2856d914;color:var(--royal);border-radius:8px;padding:5px 7px;font:600 12px inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpchip:hover{background:#2856d926}
.lpmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:12px 0}
.lpmeta div{background:var(--bg);border-radius:10px;padding:8px 10px}.lpmeta dt{font-size:12px;color:var(--mut)}.lpmeta dd{margin:0;font-weight:700}
.pre{white-space:pre-wrap;margin:0}
.modal{position:fixed;inset:0;background:#0b1530a6;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:4vh 14px;overflow:auto;animation:fade .2s both}
.modal-card{background:var(--card);border-radius:20px;padding:22px;max-width:760px;width:100%;box-shadow:0 30px 70px #0006;animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
.modal-card textarea{min-height:84px}
@keyframes fade{from{opacity:0}}
@media (max-width:900px){.scan-wrap{grid-template-columns:1fr}}
@media (max-width:760px){
  main{padding:16px 14px 70px}
  nav{background:linear-gradient(90deg,#0f2557,#2a1f6b);box-shadow:0 4px 14px rgba(15,37,87,.18)}
  nav button:hover{transform:none}
  nav button{flex:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1{font-size:23px}
  .card{padding:14px}
  .wkgrid{grid-template-columns:repeat(6,minmax(150px,1fr))}
  .mogrid{grid-template-columns:repeat(7,minmax(42px,1fr))}.lpchip{font-size:10px;padding:3px 4px}
  .tw table{font-size:14px}
  .resimg{width:64px;height:64px}
  .auth-card{padding:24px 18px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.stat:hover{transform:none}}
@media print{#ldbar,.toast{display:none!important}.card{box-shadow:none}}
h1 .czb{font-size:14px;vertical-align:middle;padding:6px 12px;margin-left:12px}
[hidden]{display:none!important}
.idc-vert:has(.idc-qr) .idc-ph{width:15mm!important;height:18mm!important}.idc-vert:has(.idc-qr) .idc-b{gap:.6mm!important;padding-top:1.2mm!important}
/* school branding */
.brand{padding:6px 8px 16px}
.brand img{height:104px!important;width:auto;max-width:100%;object-fit:contain;background:none!important;padding:0!important;box-shadow:none!important;filter:drop-shadow(0 6px 14px #0006);margin-bottom:10px}
.brand .bn{display:block;font-size:15px;line-height:1.25;letter-spacing:.3px}
.brand small{margin-top:4px;font-size:12px;opacity:.8;line-height:1.35}
.auth-brand{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.auth-brand img{height:76px;width:auto;flex:none;filter:drop-shadow(0 6px 12px rgba(15,37,87,.25))}
.auth-brand b{display:block;font:800 17px/1.2 "Bricolage Grotesque",system-ui,sans-serif;color:var(--navy);letter-spacing:.2px}
.auth-brand span{display:block;color:var(--mut);font-size:13.5px;margin-top:3px}
.auth-link{align-self:center;color:var(--royal);font-weight:700;text-decoration:none;padding:6px}
.auth-link:hover{text-decoration:underline}
.dm-h img,.rch img{object-fit:contain}
.mbrand{display:none}
@media (max-width:760px){.mbrand{display:flex;gap:12px;align-items:center;margin:-2px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}.mbrand img{height:52px;width:auto}.mbrand b{display:block;font:800 15px/1.2 "Bricolage Grotesque",system-ui,sans-serif;color:var(--navy)}.mbrand span{font-size:12.5px;color:var(--mut)}:root[data-theme="dark"] .mbrand b{color:var(--txt)}}
@media print{.mbrand{display:none!important}}
/* Parent Access Code Management */
.btn.sm{padding:6px 10px;font-size:.85em;min-height:0}
.btn.danger{color:var(--bad);border-color:#dc262655}.btn.danger:not(.ghost){background:var(--bad);color:#fff;border-color:var(--bad)}
.pctabs .btn{gap:6px}.pctabs .cnt{background:#ffffff33;border-radius:999px;padding:1px 7px;font-size:.8em}.pctabs .btn.ghost .cnt{background:#1d4ed81a}
.pcstats{margin-bottom:12px}
.filt #pcq{flex:1;min-width:220px}
.pcact{margin:0 0 12px}
.pctable td{vertical-align:middle}.pctable .code{font-size:14px;white-space:nowrap}.pctable .code[data-masked]{color:#64748b;background:#64748b1a;letter-spacing:2px}
.pcbtns{white-space:nowrap}.pcbtns .btn{margin:2px 2px 2px 0}
.mfa-setup{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:6px 0 10px}.mfa-qr{width:180px;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:6px}.mfa-qr svg{display:block;width:100%;height:auto}
@media (max-width:760px){
  .pctable table,.pctable tbody,.pctable tr,.pctable td{display:block;width:100%}
  .pctable thead{display:none}
  .pctable tr{border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:8px 10px;margin-bottom:10px;background:var(--card,#fff)}
  .pctable td{border:0;padding:3px 0}
  .pctable td[data-l]::before{content:attr(data-l) ": ";color:#64748b;font-size:.85em}
  .pcbtns{white-space:normal}
}
/* Behaviour & Progress */
.prtabs{margin:0 0 14px;display:inline-flex;flex-wrap:wrap}
.fl.sm{min-width:150px}.fl.grow{flex:1;min-width:200px}
.prhead .prwho{display:flex;gap:14px;align-items:center;margin-bottom:12px}.prhead h2{margin:0}
.prwho img,.prav{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}
.prav{display:grid;place-items:center;background:#1d4ed81a;color:var(--royal);font:800 22px/1 system-ui}
.prkpi{margin:0 0 12px}.pradd{margin:0}
.rchip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#64748b1a;color:#334155;white-space:nowrap}
.r-e{background:#16a34a1f;color:#15803d}.r-g{background:#2563eb1a;color:#1d4ed8}.r-s{background:#f59e0b26;color:#b45309}.r-n{background:#dc26261a;color:#b91c1c}.r-l{background:#7c3aed1a;color:#6d28d9}
.prtl{display:flex;flex-direction:column;gap:14px}
.prday h3{margin:4px 0 8px;font-size:14px;color:var(--mut,#64748b);text-transform:uppercase;letter-spacing:.4px}
.prcard{background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-left:5px solid #94a3b8;border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:0 2px 10px #0f255710}
.prcard.k-beh{border-left-color:#f59e0b}.prcard.k-hw{border-left-color:#2563eb}.prcard.k-day{border-left-color:#16a34a}
.prcard header{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px}.prk{font-weight:800}
.prcard footer{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;border-top:1px dashed var(--line,#e2e8f0);padding-top:8px}
.prcard footer .btn{margin-left:4px}
.prrates{display:flex;flex-wrap:wrap;gap:8px 14px;margin:4px 0 6px}.prr{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.prr small{font-size:11px;color:var(--mut,#64748b)}
.prf{margin:4px 0}.prf b{display:block;font-size:12px;color:var(--mut,#64748b)}.pre{white-space:pre-wrap}
.prfiles{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.prfile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:92px;padding:5px;border:1px solid var(--line,#e2e8f0);border-radius:10px;background:var(--bg,#f8fafc);text-decoration:none;color:inherit}
.prfile img{width:80px;height:60px;object-fit:cover;border-radius:6px}.prfile>span{font-size:34px;line-height:60px}.prfile small{font-size:10.5px;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prfile button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:0;background:var(--bad);color:#fff;cursor:pointer;line-height:1}
.prgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px 16px;margin-bottom:8px}
.prarea{display:flex;flex-direction:column;gap:4px;margin:4px 0}.prarea>span{font-weight:700;font-size:13.5px}
.prseg{display:flex;flex-wrap:wrap;gap:4px}.prseg button{font-size:12.5px;padding:6px 10px}
.prseg button.on.r-e{background:#16a34a;color:#fff}.prseg button.on.r-g{background:#2563eb;color:#fff}.prseg button.on.r-s{background:#d97706;color:#fff}.prseg button.on.r-n{background:#dc2626;color:#fff}.prseg button.on.r-l{background:#7c3aed;color:#fff}
.fgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.prhist{padding-left:18px}.prhist li{margin-bottom:10px}.prhist ul{margin:4px 0 0;padding-left:16px;font-size:13.5px}
.prpre{border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--bg,#f8fafc)}
.prct td{vertical-align:middle}.prct select,.prct input{width:100%;min-width:110px}
/* printable report */
.prrep{color:#0f172a}
.rp-h{display:flex;align-items:center;gap:12px;border-bottom:3px solid #1d4ed8;padding-bottom:10px;margin-bottom:12px}.rp-h img{height:54px;width:auto}
.rp-h>div{display:flex;flex-direction:column}.rp-h b{font-size:17px;color:#0b2a6b}.rp-h span{font-size:12px;color:#475569}.rp-t{margin-left:auto;text-align:right}.rp-t b{font-size:14px;color:#1d4ed8}
.rp-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0 0 12px}.rp-who div{background:#f1f5ff;border-radius:8px;padding:6px 9px}.rp-who dt{font-size:11px;color:#64748b}.rp-who dd{margin:0;font-weight:700}
.rp-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:10px}.rp-k div{border:1px solid #dbe4f5;border-radius:10px;padding:8px 10px}.rp-k b{display:block;font-size:20px;color:#0b2a6b}.rp-k span{font-size:12px;color:#475569}
.prrep h3{margin:14px 0 6px;color:#0b2a6b;font-size:15px}
.rp-tb{width:100%;border-collapse:collapse;font-size:12.5px}.rp-tb th{background:#0f2557;color:#fff;text-align:left;padding:5px 6px}.rp-tb td{border-bottom:1px solid #e2e8f0;padding:5px 6px;vertical-align:top}
.rp-key{font-size:11px;color:#64748b;margin:4px 0 0}
.rp-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.prrep ul{margin:0;padding-left:18px;font-size:13px}
.rp-sig{display:flex;justify-content:space-between;gap:20px;margin-top:38px}.rp-sig span{flex:1;border-top:1px solid #94a3b8;padding-top:4px;font-size:12px;color:#475569}
.rp-foot{font-size:11px;color:#64748b;margin-top:12px}
@media print{.prrep .noprint{display:none}.rp-tb{font-size:10.5px}.prrep{box-shadow:none;border:0}}
@media (max-width:760px){
  .fgrid.three{grid-template-columns:1fr 1fr 1fr}
  .prct table,.prct tbody,.prct tr,.prct td{display:block;width:100%}.prct thead{display:none}
  .prct tr{border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:8px 10px;margin-bottom:8px}.prct td{border:0;padding:3px 0}
  .prct td[data-l]::before{content:attr(data-l);display:block;color:#64748b;font-size:.8em}
  .rp-2{grid-template-columns:1fr}.prrep{overflow-x:auto}
  .prcard footer .btn{margin:2px 4px 2px 0}
}
/* Scan Student ID / live attendance */
.camwrap:not(.on) video{display:none}.camwrap:not(.on) .camframe{display:none}
.camoff{position:absolute;inset:0;display:grid;place-items:center;color:#cbd5e1;text-align:center;padding:18px;font-size:14.5px;background:radial-gradient(circle at 50% 40%,#1e293b,#020617)}
.camframe i{position:absolute;left:6%;right:6%;top:50%;height:2px;background:#22c55e;box-shadow:0 0 12px #22c55e;animation:scanline 2.2s ease-in-out infinite}
@keyframes scanline{0%,100%{top:12%}50%{top:88%}}
.camwrap.hit .camframe{border-color:#22c55e;box-shadow:0 0 0 999px #16a34a55}
@media (prefers-reduced-motion:reduce){.camframe i{animation:none}}
.camctl{margin:10px 0 4px}.btn.big{font-size:16px;padding:12px 20px}
.scanalt{margin:8px 0}.scanalt summary{cursor:pointer;color:var(--royal);font-weight:700;padding:4px 0}
.res-late{border-color:#f59e0b;background:linear-gradient(180deg,#f59e0b1c,var(--card) 60%)}.res-late .resbig{color:#b45309}
.resdl{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:6px 12px;margin:8px 0}.resdl dt{font-size:11.5px;color:var(--mut,#64748b)}.resdl dd{margin:0;font-weight:700}
.nmsg{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--bg,#f1f5f9);font-size:14px}.nmsg.bad{background:#dc26261a;color:var(--bad)}
button.stat{text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}button.stat.sel{outline:3px solid var(--royal);outline-offset:-3px}
.adstats .stat.ok b{color:var(--ok)}.adstats .stat.warn b{color:#b45309}.adstats .stat.bad b{color:var(--bad)}
.live-dot{color:#16a34a;font-weight:800;font-size:13px;animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.4}}
.adbars{display:flex;align-items:flex-end;gap:3px;height:120px;margin:6px 0 14px;padding-bottom:16px;overflow-x:auto}.adbars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:16px;height:100%}.adbars i{display:block;width:12px;background:#f59e0b;border-radius:3px 3px 0 0}.adbars span{font-size:10px;color:var(--mut,#64748b)}
@media (max-width:760px){
  .adt,.adt tbody,.adt tr,.adt td{display:block;width:100%}.adt tr:first-child{display:none}
  .adt tr{border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:8px 10px;margin-bottom:8px}.adt td{border:0;padding:2px 0}
  .adt td[data-l]::before{content:attr(data-l) ": ";color:#64748b;font-size:.85em}
  .camwrap{max-height:58vh;aspect-ratio:1/1}
}
/* Teacher Account Management */
.tacred{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:10px 0}.tacred div{background:#fff;border-radius:10px;padding:8px 10px}.tacred dt{font-size:12px;color:var(--mut,#64748b)}.tacred dd{margin:0;font-weight:700;word-break:break-all}
@media (max-width:760px){.tatable,.tatable tbody,.tatable tr,.tatable td{display:block;width:100%}.tatable tr:first-child{display:none}.tatable tr{border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:8px 10px;margin-bottom:8px}.tatable td{border:0;padding:3px 0}.tatable td[data-l]::before{content:attr(data-l) ": ";color:#64748b;font-size:.85em}}
.ttgrid th small{display:block;font-weight:400;color:var(--mut,#64748b);font-size:11px}.ttgrid td{vertical-align:top;min-width:90px}.ttc{background:#2563eb12;border-radius:8px;padding:4px 6px;margin:2px 0}.ttc small{display:block;color:var(--mut,#64748b);font-size:11px}
.secrow{margin:4px 0}.tatable input,.tatable select{min-width:120px;width:100%}
/* ---- v7: dashboard, leave, teacher attendance and reviews ---- */
.olddash>h1,.olddash>.sub:first-of-type,.olddash>.grid.dg{display:none}
.dhero{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;margin-bottom:16px;color:#fff;background:linear-gradient(120deg,#0f2557,#2856d9 60%,#6b3fd4);box-shadow:0 14px 34px #2856d933;position:relative;overflow:hidden;animation:kin .5s cubic-bezier(.2,.8,.2,1) both}
.dhero::after{content:"";position:absolute;right:-60px;top:-70px;width:240px;height:240px;border-radius:50%;background:#ffffff12}
.dhero img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:16px;padding:6px;flex:none}
.dhero h1{color:#fff;font-size:24px;margin:2px 0}.dhero p{margin:0;color:#dbe5ff;font-weight:700}.dhero span{color:#c7d5ff;font-size:14px}
.dsec{margin:18px 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:10px}.kpis.sm{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.kpi{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--royal);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);cursor:pointer;transition:transform .18s,box-shadow .18s;animation:kin .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms)}
div.kpi{cursor:default}.kpi:hover{transform:translateY(-3px);box-shadow:0 12px 26px #0f255722}.kpi:focus-visible{outline:3px solid #6b9bff}
.kpi span{font-size:13px;color:var(--mut);font-weight:700}.kpi b{font:800 30px/1.1 "Bricolage Grotesque",system-ui;color:var(--txt)}.kpi small{color:var(--mut);font-size:12.5px}
.kpi.ok{border-left-color:#16a34a}.kpi.bad{border-left-color:#dc2626}.kpi.warn{border-left-color:#f59e0b}.kpi.info{border-left-color:#0891b2}
@keyframes kin{from{opacity:0;transform:translateY(10px)}}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.chart{width:100%;height:auto;display:block}.chart .gl{stroke:var(--line);stroke-dasharray:3 4}.chart .gt,.chart .xt{font-size:11px;fill:var(--mut)}.chart .xt{text-anchor:middle}.chart .vt{font-size:11px;font-weight:700;fill:var(--txt);text-anchor:middle}
.chart rect{transform-box:fill-box;transform-origin:bottom;animation:colup .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*45ms)}
.chart g.col{--i:0}.chart rect.good{fill:#16a34a}.chart rect.mid{fill:#f59e0b}.chart rect.low{fill:#dc2626}.chart rect.none{fill:var(--line)}
@keyframes colup{from{transform:scaleY(0)}}
.act{list-style:none;margin:0;padding:0}.act li{padding:8px 0;border-bottom:1px solid var(--line)}.act li:last-child{border:0}.act small{display:block;color:var(--mut);font-size:12.5px}
.pill.info{background:#0891b21f;color:#0e7490}
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.tcard{margin:0;animation:kin .4s both;animation-delay:calc(var(--i,0)*35ms)}.tch{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.tch b{display:block}.tch .sub{font-size:13px}
.tseg{display:grid!important;grid-template-columns:repeat(4,1fr);gap:5px;margin:8px 0}.tseg button{min-height:40px}
.tseg button.on.P{background:#16a34a;color:#fff}.tseg button.on.A{background:#dc2626;color:#fff}.tseg button.on.V{background:#0e7490;color:#fff}.tseg button.on.L{background:#d97706;color:#fff}
.tcard details summary{cursor:pointer;color:var(--royal);font-weight:700;margin-top:6px}
.arin{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}.arin input{padding:6px 8px;border:1px solid var(--line);border-radius:8px;max-width:180px}
.empty{text-align:center;color:var(--mut);padding:10px}.empty span{font-size:34px;display:block}
.skel{height:14px;border-radius:8px;margin:12px 0;background:linear-gradient(90deg,var(--line) 25%,var(--bg) 50%,var(--line) 75%);background-size:200% 100%;animation:sk 1.2s infinite}.skel.s2{width:60%}
@keyframes sk{to{background-position:-200% 0}}
.card.inner{box-shadow:none;background:var(--bg)}
.rvshow{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:10px 0}.rvshow legend{font-weight:700;padding:0 6px}
.ppgen{margin:6px 0 10px}.ppgen summary{cursor:pointer;color:var(--royal);font-weight:700}
nav button,.prtabs button{transition:background .18s,color .18s,transform .15s}
#main.enter>*{animation:kin .35s cubic-bezier(.2,.8,.2,1) both}
@media (max-width:560px){.dhero{flex-direction:column;align-items:flex-start}.dhero img{width:56px;height:56px}.kpi b{font-size:24px}.tcards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
td.acts{white-space:normal;min-width:150px}td.acts .btn{margin:2px 0}
.xm input.bad{border-color:#dc2626;background:#fef2f2}
#xcard table{width:100%;border-collapse:collapse}#xcard th,#xcard td{border:1px solid var(--line);padding:6px 8px;text-align:left}
/* ---- logo frame: white plate inside a slowly turning gold / royal-blue ring with a soft glow ---- */
.lframe{position:relative;display:inline-grid;place-items:center;border-radius:50%;padding:5px;flex:none;width:var(--fs,110px);height:var(--fs,110px);isolation:isolate}
.lframe .lring{position:absolute;inset:0;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg,#f5c542,#fff6d6 18%,#2856d9 40%,#6b3fd4 62%,#f5c542 85%,#fff6d6);animation:lspin 9s linear infinite;box-shadow:0 0 22px #f5c54255,0 10px 26px #0f255744}
.lframe .lring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed #ffffff55;animation:lspin 24s linear infinite reverse}
.lframe .lplate{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#f4f7ff 70%,#e6ecfb);display:grid;place-items:center;box-shadow:inset 0 0 0 3px #fff,inset 0 2px 10px #0f255722}
.lframe img{width:72%!important;height:78%!important;object-fit:contain!important;margin:0!important;padding:0!important;background:none!important;box-shadow:none!important;filter:drop-shadow(0 3px 6px #0f255733)!important;border-radius:0!important}
.lframe.lg{--fs:112px}.lframe.nav{--fs:118px;margin:0 auto 8px}.lframe.sm{--fs:54px;padding:3px}
.brand .lframe{display:grid}
@keyframes lspin{to{transform:rotate(1turn)}}
/* ---- dashboard header ---- */
.dhero2{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;padding:22px 24px;border-radius:24px;margin-bottom:18px;color:#fff;
  background:linear-gradient(120deg,#0f2557,#1f45b8,#2856d9,#6b3fd4,#0f2557);background-size:320% 320%;animation:dhbg 16s ease-in-out infinite,kin .5s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 18px 40px #2856d93d}
.dhero2::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff1f 1px,transparent 1px);background-size:18px 18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%);pointer-events:none}
@keyframes dhbg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;opacity:.55}
.orb.o1{width:220px;height:220px;right:-50px;top:-80px;background:radial-gradient(circle,#ffffff2e,transparent 70%);animation:float 9s ease-in-out infinite}
.orb.o2{width:140px;height:140px;right:28%;bottom:-70px;background:radial-gradient(circle,#f5c54240,transparent 70%);animation:float 12s ease-in-out infinite reverse}
.orb.o3{width:90px;height:90px;left:38%;top:-40px;background:radial-gradient(circle,#7dd3fc40,transparent 70%);animation:float 10s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,12px)}}
.dh-l{display:flex;align-items:center;gap:18px;position:relative;min-width:0}
.dh-hi{margin:0;color:#dbe5ff;font-weight:700}.dhero2 h1{color:#fff;font-size:26px;margin:3px 0;letter-spacing:-.3px}.dh-sub{margin:0;color:#c7d5ff;font-size:14px}
.dh-r{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dclock{text-align:right}.dclock b{display:block;font:800 30px/1 "Bricolage Grotesque",system-ui;letter-spacing:-.5px}.dclock span{color:#c7d5ff;font-size:13.5px}
.qact{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.qact button{display:inline-flex;align-items:center;gap:6px;border:1px solid #ffffff38;background:#ffffff1c;color:#fff;border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s,transform .15s}
.qact button:hover{background:#ffffff33;transform:translateY(-2px)}
.dsec span{margin-right:4px}
/* ---- KPI cards: icon, counting number, share bar, shine on hover ---- */
.kpis.kx6{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.kpi.kx{position:relative;overflow:hidden;border-left-width:0;border-top:4px solid var(--royal);padding:14px 16px 12px}
.kpi.kx.ok{border-top-color:#16a34a}.kpi.kx.bad{border-top-color:#dc2626}.kpi.kx.warn{border-top-color:#f59e0b}.kpi.kx.info{border-top-color:#0891b2}
.kpi.kx::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff99 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s}
.kpi.kx:hover::after{transform:translateX(120%)}
.kpi.kx:hover{transform:translateY(-4px) scale(1.01)}
.kic{position:absolute;right:12px;top:10px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#2856d914;transition:transform .3s}
.kpi.kx.ok .kic{background:#16a34a17}.kpi.kx.bad .kic{background:#dc262614}.kpi.kx.warn .kic{background:#f59e0b1c}.kpi.kx.info .kic{background:#0891b21a}
.kpi.kx:hover .kic{transform:rotate(-8deg) scale(1.12)}
.kl{display:block;padding-right:44px;min-height:34px}
.kpi.kx b{font-size:32px;margin-top:2px}
.kbar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}.kbar i{display:block;height:100%;width:var(--w);border-radius:99px;background:currentColor;animation:grow 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:.25s}
.kpi.kx .kbar{color:var(--royal)}.kpi.kx.ok .kbar{color:#16a34a}.kpi.kx.bad .kbar{color:#dc2626}.kpi.kx.warn .kbar{color:#f59e0b}.kpi.kx.info .kbar{color:#0891b2}
.kbar.big{height:12px;margin:12px 0;color:var(--royal)}
@keyframes grow{from{width:0}}
.kskel{display:inline-block;width:60px;height:26px;border-radius:8px;background:linear-gradient(90deg,var(--line) 25%,var(--bg) 50%,var(--line) 75%);background-size:200% 100%;animation:sk 1.2s infinite}
/* ---- donuts, big stat, cards ---- */
.dgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:6px}
.dcard{animation:kin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*80ms + 150ms);transition:box-shadow .2s,transform .2s}.dcard:hover{box-shadow:0 14px 30px #0f25571c;transform:translateY(-2px)}
.donut{position:relative;width:170px;height:170px;margin:4px auto 10px}.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:5.2}.donut .dbg{stroke:var(--line)}
.donut .dseg{stroke-linecap:butt;animation:dsweep 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*120ms + 200ms)}
@keyframes dsweep{from{stroke-dasharray:0 100}}
.dcen{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.dcen b{font:800 30px/1 "Bricolage Grotesque",system-ui;color:var(--txt)}.dcen span{font-size:12.5px;color:var(--mut);font-weight:700}
.dleg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:13.5px}.dleg li{display:flex;align-items:center;gap:6px}.dleg i{width:10px;height:10px;border-radius:3px;flex:none}.dleg b{margin-left:auto}
.bigstat{display:flex;flex-direction:column;gap:4px;padding-top:8px}.bigstat>b{font:800 52px/1 "Bricolage Grotesque",system-ui;background:linear-gradient(90deg,#2856d9,#6b3fd4);-webkit-background-clip:text;background-clip:text;color:transparent}.bigstat>span{color:var(--mut)}
.act.tl li{position:relative;padding-left:16px;animation:kin .4s both;animation-delay:calc(var(--i,0)*50ms + 300ms)}.act.tl li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--royal);box-shadow:0 0 0 3px #2856d922}
/* background refreshes do not replay the entrance animations */
.dash-still .dhero2,.dash-still .kpi,.dash-still .dcard,.dash-still .act.tl li,.dash-still .chart rect,.dash-still .dseg,.dash-still .kbar i{animation-name:none!important}
.dash-still .dhero2{animation:dhbg 16s ease-in-out infinite!important}
@media (max-width:760px){.dhero2{padding:18px}.dh-r{align-items:flex-start;width:100%}.dclock{text-align:left}.qact{justify-content:flex-start}.lframe.lg{--fs:84px}.dhero2 h1{font-size:21px}.mbrand .lframe{--fs:52px}}
@media (prefers-reduced-motion:reduce){.lframe .lring,.lframe .lring::after,.dhero2,.orb{animation:none!important}}