/* Teacher dashboard. Same identity as the board (navy, gold, Cairo, glass cards) but built for a laptop or tablet. */
html{font-size:16px}
html,body.tpage{height:auto;min-height:100%;overflow:auto}
body.tpage{background:radial-gradient(1200px 700px at 85% -10%,rgba(42,99,224,.3),transparent 60%),radial-gradient(900px 650px at -5% 110%,rgba(196,32,45,.2),transparent 60%),linear-gradient(180deg,#081840,#050d26);background-attachment:fixed}
.muted{color:var(--mist)}
.small{font-size:.85rem}
.err{color:#ffb4ab;font-weight:700;min-height:1.2rem;font-size:.95rem}
.ok-t{color:#7de3b0;font-weight:700}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.sp{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stack{display:flex;flex-direction:column;gap:.7rem}

/* sign in */
.login{max-width:24rem;margin:12vh auto;padding:2rem;border-radius:1.4rem;background:var(--glass);border:1px solid var(--line);text-align:center}
.login-logo{height:5rem}
.login h1{font-size:1.6rem;margin:.6rem 0 .2rem}
.login form{display:flex;flex-direction:column;gap:.5rem;text-align:left;margin-top:1rem}

/* controls */
.tb{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.5rem;padding:.4rem 1rem;border-radius:.75rem;border:1px solid var(--line);background:var(--glass);color:var(--ivory);font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;transition:background .15s,transform .1s}
.tb:hover:not(:disabled){background:rgba(255,255,255,.15)}
.tb:active:not(:disabled){transform:scale(.97)}
.tb:disabled{opacity:.4;cursor:not-allowed}
.tb.primary{background:linear-gradient(180deg,#f2c65d,#d29a2a);color:#1b1304;border-color:#f6d57f}
.tb.primary:hover:not(:disabled){background:linear-gradient(180deg,#ffd672,#dca431)}
.tb.danger{background:linear-gradient(180deg,#d92d3b,#9c1522);border-color:#ec6a74}
.tb.ghost{background:transparent}
.tb.sm{min-height:2rem;padding:.2rem .7rem;font-size:.85rem;border-radius:.6rem}
.tb.on{border-color:var(--gold);background:rgba(229,179,72,.18);color:#ffe9b0}
.tb.lg{min-height:3rem;font-size:1.05rem;padding:.5rem 1.4rem}
input[type=text],input[type=password],input[type=number],input[type=search],textarea,select{width:100%;padding:.55rem .8rem;border-radius:.7rem;border:1px solid var(--line);background:rgba(0,0,0,.28);color:#fff;font:inherit;font-size:.95rem}
textarea{min-height:5.5rem;resize:vertical}
select{appearance:auto}
select option{color:#000}
label{display:block;font-weight:700;font-size:.85rem;color:var(--mist);margin:.3rem 0 .2rem}
input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--gold);vertical-align:middle}

/* shell */
.bar{display:flex;align-items:center;gap:1rem;padding:.6rem 1.4rem;border-bottom:1px solid var(--line);background:rgba(5,13,38,.7);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50;flex-wrap:wrap}
.bar .brand img{height:2.2rem}
.bar .brand b{font-size:.7rem}
.bar .ttl{font-weight:800;font-size:1.05rem}
.bar .live{border-color:var(--gold);color:#ffe9b0}
.wrap{max-width:78rem;margin:0 auto;padding:1.2rem 1.4rem 4rem}
h2.sec{font-size:1.3rem;font-weight:800;margin:1.4rem 0 .6rem}
h3.sub{font-size:1.05rem;font-weight:800;margin:1rem 0 .4rem;color:var(--gold)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:1.1rem;padding:1rem 1.2rem}
.card.click{cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.card.click:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(255,255,255,.1)}
.classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem}
.classes .card h3{margin:0;font-size:1.5rem}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 1rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.pill2{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .65rem;border-radius:2rem;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);background:rgba(255,255,255,.07);white-space:nowrap}
.pill2.pilot{border-color:rgba(47,181,119,.7);color:#7de3b0;background:rgba(47,181,119,.12)}
.pill2.soon{border-color:rgba(229,179,72,.6);color:#ffe9b0;background:rgba(229,179,72,.1)}
.pill2.need{border-color:rgba(239,106,91,.7);color:#ffb4ab;background:rgba(239,106,91,.1)}
.pill2.prog{border-color:rgba(42,99,224,.8);color:#b9ceff;background:rgba(42,99,224,.15)}
.pill2.done{border-color:rgba(47,181,119,.7);color:#7de3b0}
.items{display:flex;flex-direction:column;gap:.6rem}
.item{display:flex;gap:1rem;align-items:center;padding:.8rem 1.1rem;border-radius:1rem;background:var(--glass);border:1px solid var(--line)}
.item.click{cursor:pointer}.item.click:hover{border-color:var(--gold)}
.item .t{font-weight:800;font-size:1.05rem}
.item.dimm{opacity:.78}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t th{text-align:left;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);padding:.4rem .6rem;border-bottom:1px solid var(--line)}
table.t td{padding:.5rem .6rem;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.scroll{overflow:auto;max-width:100%}
.empty{padding:2rem;text-align:center;border:2px dashed rgba(255,255,255,.25);border-radius:1.2rem;color:var(--mist)}
.note{padding:.7rem 1rem;border-radius:.9rem;background:rgba(229,179,72,.1);border:1px solid rgba(229,179,72,.45);font-size:.92rem}
.note.bad{background:rgba(239,106,91,.1);border-color:rgba(239,106,91,.6)}
.note.good{background:rgba(47,181,119,.1);border-color:rgba(47,181,119,.5)}

/* modal */
.sheet.tsheet{width:min(40rem,94vw);max-height:92vh;overflow:auto;padding:1.4rem;text-align:left}
.sheet.tsheet.wide{width:min(70rem,96vw)}
.sheet.tsheet h3{margin:0 0 .5rem;font-size:1.3rem}
.sheet.tsheet .btn,.sheet.tsheet .tb{width:auto;margin:0}
#toastHost{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:1100;display:flex;flex-direction:column;gap:.4rem;align-items:center}
.tst{padding:.6rem 1.2rem;border-radius:.9rem;background:#fff;color:#071536;font-weight:800;box-shadow:0 1rem 3rem rgba(0,0,0,.5);animation:rise .3s both}
.tst.bad{background:#ffe0dc;color:#7a0d0d}

/* lesson page */
.sess{display:flex;gap:1rem;align-items:center;padding:1rem 1.2rem;border-radius:1rem;background:var(--glass);border:1px solid var(--line);flex-wrap:wrap}
.guide h4{margin:1rem 0 .3rem;color:var(--gold);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
.guide ul,.guide ol{margin:.2rem 0 .6rem;padding-left:1.3rem}
.guide li{margin:.2rem 0;line-height:1.45}
.guide .tl{display:grid;grid-template-columns:5.5rem 1fr;gap:.6rem 1rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.guide .tl b.time{color:var(--gold)}
.guide .cue b{display:inline-block;min-width:4.4rem;color:var(--mist)}
.arabic{direction:rtl;text-align:right;font-size:1.15rem;line-height:1.9;padding:1rem 1.2rem;border-radius:1rem;background:rgba(255,255,255,.07);border:1px solid var(--line);font-family:Cairo,"Noto Naskh Arabic",Tahoma,"Segoe UI",Arial,sans-serif}
.qcard{padding:.9rem 1.1rem;border-radius:1rem;background:var(--glass);border:1px solid var(--line);margin-bottom:.7rem}
.qcard .qp{font-weight:800}
.qcard .opt2{display:flex;gap:.5rem;align-items:flex-start;margin:.2rem 0;padding:.25rem .5rem;border-radius:.5rem}
.qcard .opt2.right{background:rgba(47,181,119,.18);border:1px solid rgba(47,181,119,.5)}
.keybox{margin-top:.5rem;padding:.7rem .9rem;border-radius:.8rem;background:rgba(0,0,0,.22);border:1px dashed rgba(229,179,72,.5)}
.tokrow{display:flex;gap:.3rem;flex-wrap:wrap;margin:.3rem 0}
.tokrow button{padding:.3rem .6rem;border-radius:.5rem;border:1px solid var(--line);background:var(--glass);color:#fff;font:inherit;cursor:pointer}
.tokrow button.main{background:rgba(42,99,224,.85)}
.tokrow button.helping{background:linear-gradient(180deg,var(--gold),#cf9a27);color:#1b1304}

/* live */
.livegrid{display:grid;grid-template-columns:15rem minmax(0,1fr) 22rem;gap:1rem;align-items:start}
.panel{background:var(--glass);border:1px solid var(--line);border-radius:1.1rem;padding:.9rem 1rem}
.panel h4{margin:0 0 .5rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.stg{display:flex;gap:.5rem;align-items:center;width:100%;text-align:left;padding:.5rem .7rem;border-radius:.7rem;border:1px solid transparent;background:transparent;color:var(--ivory);font:inherit;cursor:pointer;font-size:.92rem}
.stg:hover{background:rgba(255,255,255,.08)}
.stg.now{background:rgba(229,179,72,.18);border-color:var(--gold);font-weight:800}
.stg .n{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:.72rem;font-weight:800}
.stg.vis .n{background:var(--ok);color:#04251a}
.stg small{margin-left:auto;color:var(--mist)}
.timerbox{display:flex;align-items:center;gap:.7rem}
.timerbox .tm{font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.timerbox .tm.warn{color:#ffe9b0}.timerbox .tm.zero{color:#ffb4ab}
.cues{display:grid;gap:.35rem;font-size:.95rem}
.cues b{display:inline-block;min-width:4.6rem;color:var(--mist);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.rost{max-height:16rem;overflow:auto;display:flex;flex-direction:column;gap:.25rem}
.rost .s{display:flex;gap:.4rem;align-items:center;padding:.25rem .5rem;border-radius:.6rem;background:rgba(255,255,255,.05)}
.rost .s.sel{background:rgba(229,179,72,.2);border:1px solid var(--gold)}
.rost .s.abs{opacity:.5}
.rost .s button.nm{flex:1;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:.15rem 0}
.rost .s small{color:var(--mist);white-space:nowrap}
.awards{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.lvl{display:inline-flex;gap:.2rem}
.prev{position:relative;width:100%;aspect-ratio:16/9;border-radius:.8rem;overflow:hidden;border:1px solid var(--line);background:#000}
.prev iframe{position:absolute;left:0;top:0;width:1280px;height:720px;border:0;transform-origin:0 0;pointer-events:none}
.hidden-board{border-color:#ec6a74!important}

@media (max-width:1100px){.livegrid{grid-template-columns:1fr}.grid2,.grid3{grid-template-columns:1fr}}

/* print: only the teacher guide or worksheet, never the board */
#printRoot{display:none}
@media print{
  body.tpage>*:not(#printRoot){display:none!important}
  html,body.tpage{background:#fff!important;color:#000!important}
  #printRoot{display:block!important;color:#000;background:#fff;font-family:Cairo,"Segoe UI",Arial,sans-serif;font-size:11pt;padding:0}
  #printRoot h1{font-size:18pt;margin:0 0 6pt}#printRoot h2{font-size:13pt;margin:12pt 0 4pt;border-bottom:1px solid #999}
  #printRoot .badge{font-size:9pt;border:1px solid #000;padding:1pt 6pt;border-radius:8pt}
  #printRoot .tl{display:grid;grid-template-columns:50pt 1fr;gap:4pt 8pt;padding:4pt 0;border-bottom:1px solid #ddd;page-break-inside:avoid}
  #printRoot .ar{direction:rtl;text-align:right;font-size:13pt;line-height:1.9;border:1px solid #000;padding:8pt;font-family:"Noto Naskh Arabic",Tahoma,Cairo,Arial,sans-serif}
  #printRoot .box{display:inline-block;width:100%;min-height:42pt;border:1px dashed #666;margin:4pt 0 8pt;padding:3pt}
  #printRoot .line{border-bottom:1px solid #666;height:22pt}
}