/* =====================================================================================================================
   EOT design system (owner's nine panel designs, 24 Oct 2026): Al Huda / ArchitectUI look — white top bar with pastel
   circle buttons, white MENU sidebar with collapsible groups, grey canvas, white shadow cards, colour tiles, square pills.
   Loaded after ui.css in every panel; it changes only the look. Single light look by design (no dark mode).
   ===================================================================================================================== */
:root,:root[data-theme="dark"]{
  --bg:#eef5f3;--card:#ffffff;--fg:#263633;--mut:#667a75;--line:#d6e4df;--line2:#e8f0ed;--hover:#e7f2ee;
  --brand:#00635D;--brand-ink:#ffffff;--brand-soft:#e1f0ee;--brand-gradient:linear-gradient(120deg,#003a36 0%,#00635D 52%,#0b7a72 100%);
  --primary:#00635D;--success:#1e8e3e;--danger:#d92550;--warning:#f7b924;--info:#16aaff;--alt:#794c8a;--dark:#4a4f55;
  --ok:#137a45;--okb:#e7f9ef;--warn:#8a6200;--warnb:#fff3d6;--bad:#b0173f;--badb:#fde2e8;--info-ink:#2a4fb3;--infob:#e1ebff;--neu:#6c757d;--neub:#eef1f5;
  --t-teal:#00635D;--t-green:#1e8e3e;--t-grey:#4b4f54;--t-dark:#4b4f54;--t-red:#e0313f;--t-yellow:#efb81f;--t-sky:#2db4ec;--t-blue:#2db4ec;--t-cyan:#0b7a72;--hero:#00635D;
  --row-taken:#c3f6b4;--row-leave:#c8c2f2;--row-absent:#f9c7cf;--row-remain:#fbfbe0;--row-run:#cfeefd;--row-trial:#ffe7b8;
  --sch-free:#d4e02c;--sch-busy:#9c9a14;--sch-time:#b9b0f5;
  --sans:"Nunito Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;--ar:"Amiri","Traditional Arabic",serif;
  --shadow:0 .46875rem 2.1875rem rgba(4,9,20,.03),0 .9375rem 1.40625rem rgba(4,9,20,.03),0 .25rem .53125rem rgba(4,9,20,.05),0 .125rem .1875rem rgba(4,9,20,.03);
  color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#eef5f3;--card:#ffffff;--fg:#263633;--mut:#667a75;--line:#d6e4df;--hover:#e7f2ee;--brand:#00635D;--brand-ink:#ffffff;--brand-soft:#e1f0ee;--primary:#00635D;--brand-gradient:linear-gradient(120deg,#003a36 0%,#00635D 52%,#0b7a72 100%);
  --ok:#137a45;--okb:#e7f9ef;--warn:#8a6200;--warnb:#fff3d6;--bad:#b0173f;--badb:#fde2e8;--infob:#e1ebff;--neu:#6c757d;--neub:#eef1f5;color-scheme:light}}
[data-a="theme"]{display:none!important}
body{background:var(--bg);color:var(--fg);font:13px/1.45 var(--sans)}
a{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mono{font-family:var(--mono);font-size:11.5px}
.mut{color:var(--mut)}

/* ---------- top bar ---------- */
.top{min-height:60px;background:var(--card);border-bottom:0;box-shadow:0 1px 6px rgba(4,9,20,.06);gap:10px}
.top>b{font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--fg)}
.ib{width:30px;height:30px;border-radius:50%;background:#e1ebff;color:var(--primary)}
.ib svg{width:15px;height:15px}
.ib i{top:-2px;right:-2px;background:var(--danger);font:800 9px var(--sans);padding:0 4px;border:1.5px solid var(--card)}
.top .rel:nth-of-type(6n+1) .ib,.top>.ib:nth-of-type(6n+1){background:#dff7ea;color:#1f9d5a}
.top .rel:nth-of-type(6n+2) .ib,.top>.ib:nth-of-type(6n+2){background:#e1ebff;color:var(--primary)}
.top .rel:nth-of-type(6n+3) .ib,.top>.ib:nth-of-type(6n+3){background:#fde2e8;color:var(--danger)}
.top .rel:nth-of-type(6n+4) .ib,.top>.ib:nth-of-type(6n+4){background:#efe3f5;color:var(--alt)}
.top .rel:nth-of-type(6n+5) .ib,.top>.ib:nth-of-type(6n+5){background:#fff3d6;color:#b07d00}
.top .rel:nth-of-type(6n) .ib,.top>.ib:nth-of-type(6n){background:#dcf3ff;color:#0a83c4}
.top>.hm,.top>.dsk{background:none;color:var(--fg);border-radius:6px}
.top>.hm:hover,.top>.dsk:hover{background:var(--bg)}
.clock{border:1px solid var(--line);border-radius:4px;background:#f6f8fa;font-family:var(--mono);font-size:10.5px}
.who{border-left:1px solid var(--line);padding-left:10px}
.av{background:#2f3338;color:#fff}
.who b{font-size:12px}.who small{font-size:10.5px}
.srch input{border:1px solid var(--line2);border-radius:4px;padding:6px 10px;font-size:12px;width:240px}
.ichips{display:flex;gap:8px;align-items:center}
.bpill,.livebadge{border-radius:4px}
.qbar{background:var(--card);border-bottom:1px solid var(--line)}

/* ---------- sidebar (also restyles the dark Super Admin and pill-style family/teacher sidebars) ---------- */
.sb,.sb.sadark,.sb.famsb{width:250px;background:var(--card);border-right:0;box-shadow:7px 0 30px -12px rgba(4,9,20,.08);color:var(--fg);padding:14px 10px 30px}
.brandrow{margin:2px 6px 14px}
.brandrow b,.sadark .brandrow b{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--fg)}
.brandrow small,.sadark .brandrow small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.sadark .brandrow{border-bottom:0}
.sb h6,.sadark h6,.famsb h6{margin:12px 10px 8px;font-size:11px;color:var(--primary);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sb .mi,.sb .grp,.sadark .mi,.sadark .grp,.famsb .fmi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:7px 10px;border-radius:5px;color:#495057;font-size:12.5px;font-weight:400;margin:0}
.sb .mi svg,.sb .grp svg,.sadark .mi svg,.sadark .grp svg,.famsb .fmi svg{width:16px;height:16px;opacity:.55;color:inherit;flex:none}
.famsb .fmi>span:first-child{color:inherit}
.sb .mi:hover,.sb .grp:hover,.sadark .mi:hover,.sadark .grp:hover,.famsb .fmi:hover{background:#e0f3ff;color:var(--primary)}
.sb .mi.on,.sadark .mi.on,.famsb .fmi.on{background:#e0f3ff;color:var(--primary);font-weight:700}
.sb .mi.on svg,.sadark .mi.on svg{color:var(--primary);opacity:.9}
.sb .sub,.sadark .sub{position:relative;padding:2px 0 6px 18px;margin-left:0;border-left:0}
.sb .sub::before,.sadark .sub::before{content:"";position:absolute;left:17px;top:4px;bottom:8px;width:2px;background:var(--line)}
.sb .sub .mi,.sadark .sub .mi{padding:5px 10px 5px 20px;font-size:12px;color:#6c757d}
.sb .sub .mi.on,.sadark .sub .mi.on{background:#e0f3ff;color:var(--primary);font-weight:700}
.mi .cnt,.sab,.sbb{margin-left:auto;background:var(--warning);color:#5b4500;font-size:10px;font-weight:800;border-radius:10px;padding:0 6px}
.sab.r,.sbb.r{background:var(--danger);color:#fff}.sab.g,.sbb.g{background:#dff7ea;color:#137a45}.sab.y,.sbb.y{background:var(--warning);color:#5b4500}.sbb.p{background:#efe3f5;color:var(--alt)}
.sbt{color:#137a45}
.car{margin-left:auto;font-size:10px;color:var(--mut)}
.sbme,.sadark .sbme{border-top:1px solid var(--line)}
.sadark .sbme b{color:var(--fg)}.sadark .sbme small{color:var(--mut)}.sadark .sbme .ib{color:var(--danger)}
.sbme .av{background:#2f3338}
.qcard{background:#f6f8fa;border-radius:6px}

/* ---------- page title ---------- */
main{padding:18px 18px 40px;max-width:none}
.ph{gap:14px;margin:0 0 18px}
.ph .pi{width:50px;height:50px;border-radius:6px;box-shadow:0 2px 8px rgba(4,9,20,.06);color:var(--t-teal)}
.ph h1{font-size:17px;font-weight:600}
.ph p{font-size:11.5px}
.dhead{border-bottom:0;padding-bottom:0;margin-bottom:18px;align-items:center}
.dhead h1{font-size:17px;font-weight:600;letter-spacing:0}
.dhead p{font-size:11.5px;margin-top:2px}

/* ---------- cards, KPIs, tiles ---------- */
.card,.dcard,.thero,.tkpi,.kpi,.nextc,.mcard,.scard,.dsec,.room,.ktile,.ecard,.lcard,.book{border:0;border-radius:6px;box-shadow:var(--shadow);background:var(--card)}
.card{padding:0 0 2px}
.card>h3{margin:0;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:800;color:var(--fg);letter-spacing:.03em}
.card>:not(h3):not(.tw):not(table){margin-left:16px;margin-right:16px}
.card>h3+*{margin-top:14px}
.card>:last-child{margin-bottom:14px}
.card>.tw{margin:0;padding:0}
.card .tw table th:first-child,.card .tw table td:first-child{padding-left:16px}
.dcard{padding:16px}
.dcard .tw{margin:0 -16px}
.dh3{font-size:12.5px;font-weight:800;letter-spacing:.03em;color:var(--fg)}
.kpi{padding:12px 14px}.kpi span{font-size:11px}.kpi b{font-size:20px}
.kpi.alert b{color:var(--danger)}.kpi.good b{color:var(--success)}
.tkpi>span,.tkh{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:700}
.tkpi>b{font-size:22px;font-weight:800}.tkpi>small{color:var(--mut)}
.tkpi>b.g{color:var(--success)}.tkpi>b.r{color:var(--danger)}.tkpi>b.b{color:var(--primary)}
.tkh i{background:#e1ebff;color:var(--primary);border-radius:6px}
/* colour tiles (Al Huda) */
.tiles8,.ahtiles,.stiles{gap:0;background:var(--card);padding:10px;border-radius:6px;box-shadow:0 2px 8px rgba(4,9,20,.05)}
.tl,.stile{border-radius:0;color:#fff;min-height:58px;font-size:11px;font-weight:600;box-shadow:none}
.stile b,.tl b{font-size:20px;font-weight:800}
.tl.blue,.stile:nth-child(1){background:var(--t-teal)!important}
.tl.green,.stile:nth-child(8){background:var(--t-green)!important}
.tl.dark,.stile:nth-child(2){background:var(--t-grey)!important}
.tl.red,.stile:nth-child(6),.stile:nth-child(9){background:var(--t-red)!important}
.tl.yellow,.stile:nth-child(5),.stile:nth-child(7){background:var(--t-yellow)!important}
.tl.cyan,.stile:nth-child(3){background:var(--t-cyan)!important}
.tl.teal,.stile:nth-child(4){background:var(--t-sky)!important}
.stile:nth-child(10){background:#7f1d1d!important}.stile:nth-child(11){background:var(--alt)!important}.stile:nth-child(12){background:var(--primary)!important}
.stile.sup{background:var(--card)!important;color:var(--fg);border:2px dashed var(--success)}
/* welcome hero (design: teal gradient) */
.thero,.greet,.fhero,.hero{background:var(--brand-gradient)!important;color:#fff;border-radius:8px;border:0}
.thero h1,.thero p,.thero .fh-top,.thero .mut,.greet h2{color:#fff}
.thero .hq{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff}
.thero .gpill,.thero .dbtn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.35)}
.fh-top .ar,.greet .ar,.hq .ar,.ar{font-family:var(--ar)}

/* ---------- buttons ---------- */
.btn{border-radius:4px;padding:6px 12px;font-size:11.5px;font-weight:700;background:var(--primary);color:#fff;border:0}
.btn:hover{filter:brightness(.94)}
.btn.s{padding:3px 8px;font-size:10.5px}
.btn.g{background:#eef1f5;color:#495057}
.btn.o{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn.d,.btn.red{background:var(--danger);color:#fff}
.btn.w{background:var(--warning);color:#4a3600}
.btn.blue{background:var(--primary)}
.dbtn{border-radius:4px;font-size:11.5px;padding:5px 10px}
.dbtn.green{background:var(--success);color:#fff}.dbtn.grey{background:#eef1f5;color:#495057}.dbtn.sky{background:#dcf3ff;color:#0a83c4;border-color:transparent}
.dbtn.skyfill{background:var(--info);color:#fff}.dbtn.yellow{background:var(--warning);color:#4a3600;border-color:transparent}
.dbtn.pink{background:#fde2e8;color:var(--danger);border-color:transparent}.dbtn.outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.lnk,.clink{color:var(--primary)}
.x{color:var(--mut)}

/* ---------- pills / status chips (square, uppercase) ---------- */
.chip,.tchip,.gchip,.gpill,.cchip{border-radius:3px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px}
.c-ok{background:var(--success);color:#fff}.c-bad{background:var(--danger);color:#fff}.c-warn{background:var(--warning);color:#4a3600}
.c-info{background:var(--info);color:#fff}.c-neu{background:#6c757d;color:#fff}.c-brand{background:var(--primary);color:#fff}
.tchip{background:#e7f9ef;color:#137a45}.tchip.r{background:#fde2e8;color:#b0173f}.tchip.y{background:#fff3d6;color:#8a6200}.tchip.b{background:#e1ebff;color:#2a4fb3}.tchip.g{background:#e7f9ef;color:#137a45}.tchip.grey{background:#eef1f5;color:#6c757d}
.gchip{background:#e7f9ef;color:#137a45}
.gpill{background:#e1ebff;color:#2a4fb3;border:0}
.cchip{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600}

/* ---------- tables ---------- */
table{font-size:12px}
th,.dtab th{text-align:left;font-size:11px;font-weight:800;color:#495057;letter-spacing:0;text-transform:none;padding:9px 10px;border-bottom:2px solid var(--line);background:transparent}
td,.dtab td{padding:8px 10px;border-top:0;border-bottom:1px solid var(--line);font-size:12px}
tbody tr:hover td{background:rgba(63,106,216,.04)}
tr.now td,.dtab tr.now td{background:var(--row-run)}
.t2{font-size:10.5px}
.empty{color:var(--mut);padding:30px}

/* ---------- tabs ---------- */
.tabs,.ptabs{gap:4px;border-bottom:0;padding-bottom:0}
.tabs button,.ptabs button:not(.btn),.dseg button,.ttabs button{border:0;background:none;border-radius:4px;padding:6px 12px;font-size:11.5px;color:#6c757d;font-weight:400}
.tabs button.on,.ptabs button.on,.dseg button.on,.ttabs button.on{background:var(--primary)!important;color:#fff!important;font-weight:700}
.dseg{border:1px solid var(--line2);border-radius:5px;padding:2px}
.seg button.on{background:var(--primary);color:#fff}

/* ---------- forms ---------- */
input,select,textarea{border:1px solid #ced4da;border-radius:4px;padding:6px 9px;font-size:12.5px;background:var(--card)}
.form label,.fl{font-size:11.5px;color:#495057;font-weight:400}
.note{background:#fff8e1;border:1px solid #f6d77a;border-left-width:1px;color:#7a4b00;border-radius:6px}
.note.i{background:#e1ebff;border-color:#b9cdf8;color:#2a4fb3}
.note.b{background:#fde2e8;border-color:#f3b4c3;color:#8c1232}
.kv div{background:#f6f8fa;border-radius:5px;padding:8px 10px;border-bottom:0}
.kv span{font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.kv2 div{border-top-color:var(--line)}

/* ---------- modal, drawer, toast, popover ---------- */
.mc{border-radius:8px;border:0;max-width:min(960px,94vw)}
.mc .mt{padding:12px 16px}.mc .mt h5{font-size:14px}
.mc .mb{padding:16px}.mc .mf{padding:10px 16px}
.ov{background:rgba(20,24,30,.45)}
.drawer{background:var(--bg)}
#toast{background:#343a40;color:#fff;border-radius:5px;font-size:12px}
.pop{border:0;border-radius:6px;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.pop .ph2{background:var(--primary);color:#fff}

/* ---------- schedule grids (design lime/olive) ---------- */
.tgc{background:var(--sch-free);color:#4b4f0a;border-radius:0}
.tgc.d{opacity:.6}.tgc.c{background:var(--t-red);color:#fff}
.tt td.duty{background:#f4f8d0}
.slot{background:var(--sch-busy);color:#fff;border-radius:3px}
.slot.c{background:var(--danger)}
.prog i,.prog.big>i,.pitem .prog>i{background:var(--primary)!important}

/* ---------- welcome strip used by several panels ---------- */
.welcome{background:var(--brand-gradient);color:#fff;border-radius:8px;padding:18px 20px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.welcome h2{margin:0;font-size:18px}.welcome .ar{font-family:var(--ar);font-size:22px;direction:rtl}
.welcome p{margin:4px 0 0;opacity:.9;font-size:12px}.welcome .r{margin-left:auto;text-align:right;min-width:0}
.enrollment-workspace{display:block;width:100%;height:calc(100vh - 150px);min-height:680px;border:0;border-radius:8px;background:var(--bg)}
.ms-controls{flex-wrap:wrap}.ms-scroll{max-height:calc(100vh - 300px);overflow:auto}.ms-grid{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}.ms-grid th,.ms-grid td{min-width:170px;text-align:center;vertical-align:top;padding:8px;border-bottom:1px solid var(--line)}.ms-grid thead th{position:sticky;top:0;z-index:3;background:var(--card);box-shadow:0 1px 0 var(--line)}.ms-grid th:first-child,.ms-grid td:first-child{position:sticky;left:0;z-index:2;min-width:132px;background:var(--card);text-align:left}.ms-grid thead th:first-child{z-index:4}.ms-grid .ms-time{font-weight:700;white-space:nowrap}.ms-class{display:flex;flex-direction:column;gap:2px;width:100%;min-width:150px;margin:2px 0;padding:7px 8px;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:7px;background:var(--brand-soft);color:var(--fg);text-align:left;cursor:pointer}.ms-class:hover,.ms-class:focus-visible{outline:2px solid var(--brand);outline-offset:1px}.ms-class b{font-size:12px}.ms-class small{color:var(--mut);font-size:10.5px}.ms-class.completed{border-left-color:var(--success)}.ms-class.cancelled{border-left-color:var(--danger);background:var(--badb)}.ms-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:4px 0 12px}.ms-legend-item{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-size:12px}.ms-swatch{width:13px;height:13px;border-radius:4px;display:inline-block;background:#edf2ff;border-left:4px solid #4268df}.ms-class.ms-type-regular,.ms-swatch.ms-type-regular{background:#edf2ff;border-left-color:#4268df}.ms-class.ms-type-makeup,.ms-swatch.ms-type-makeup{background:#fff3dc;border-left-color:#ed9e0b}.ms-class.ms-type-trial,.ms-swatch.ms-type-trial{background:#f2eaff;border-left-color:#8555cf}.ms-class.ms-type-extra,.ms-swatch.ms-type-extra{background:#e2f7f2;border-left-color:#0c9875}.ms-class.ms-type-substitute,.ms-swatch.ms-type-substitute{background:#ffedf0;border-left-color:#df5869}.ms-empty{display:inline-block;min-width:100%;padding:8px 0;color:var(--mut)}

/* prototype-only bar stays hidden in the live system; review notes off */
.rv{display:none!important}

/* ===== Stage 2: design components (strips, 3x2 tiles, quick circles) ===== */
.strip{display:grid;border-top:1px solid var(--line)}
.strip:first-child{border-top:0}
.stat{border:0;background:none;text-align:left;padding:10px 14px;border-right:1px solid var(--line);cursor:pointer;min-width:0}
.stat:last-child{border-right:0}.stat:hover{background:#f5f9ff}
.stat b{display:block;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card>.strip{margin:0}
.tg2{gap:18px;margin:14px 16px}
.tiles2{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);padding:10px;border-radius:6px;box-shadow:0 2px 8px rgba(4,9,20,.05)}
.tile2{border:0;color:#fff;min-height:46px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-size:11px;font-weight:600}
.tile2:hover{filter:brightness(1.08)}.tile2 svg{width:18px;height:18px}.tile2 b{font-weight:800}
.c-teal{background:var(--t-teal)}.c-green{background:var(--t-green)}.c-grey{background:var(--t-grey)}.c-red{background:var(--t-red)}.c-yellow{background:var(--t-yellow)}.c-sky{background:var(--t-sky)}.c-cyan{background:var(--t-cyan)}
.qa2{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-width:0}
.qbtn{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer}
.qbtn svg{width:15px;height:15px}.qbtn.on{box-shadow:0 0 0 2px var(--primary)}
.qbtn .dot{position:absolute;top:1px;right:1px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:1.5px solid var(--card)}
.q-g{background:#dff7ea;color:#1f9d5a}.q-r{background:#fde2e8;color:var(--danger)}.q-b{background:#e1ebff;color:var(--primary)}.q-y{background:#fff3d6;color:#b07d00}.q-p{background:#efe3f5;color:var(--alt)}.q-s{background:#dcf3ff;color:#0a83c4}
.sa-more>.dhead:first-child{display:none}
@media (max-width:520px){.tiles2{grid-template-columns:repeat(2,1fr)}.strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ===== Stage 2: Management dashboard ===== */
.mgreet{background:linear-gradient(120deg,#123c2c,#1d5c45)!important}
.mdash .kpis{background:var(--card);box-shadow:var(--shadow);border-radius:6px;gap:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mdash .kpis .kpi{box-shadow:none;border-radius:0;border-right:1px solid var(--line)}
.mdash .kpis .kpi:last-child{border-right:0}
.meter{display:grid;grid-template-columns:minmax(90px,150px) 1fr 40px;gap:10px;align-items:center;font-size:12px;padding:5px 16px}
.meter .bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden;display:block;margin:0}
.meter .bar i{display:block;height:100%;border-radius:4px;background:var(--primary)}.meter .bar i.alt{background:var(--danger)}
.mode{display:flex;gap:4px;margin:0 6px 10px;background:#eef1f5;border-radius:5px;padding:2px}
.mode button{flex:1;border:0;background:none;border-radius:4px;padding:5px 6px;font-size:11px;color:#6c757d}
.mode button.on{background:var(--primary);color:#fff;font-weight:700}

/* ===== Stage 3: Enrollment dashboard cards as the design's colour tiles ===== */
.edash .ecards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;background:var(--card);padding:10px;border-radius:6px;box-shadow:0 2px 8px rgba(4,9,20,.05);margin-bottom:18px}
.edash .ecard{border:0!important;border-radius:0!important;box-shadow:none!important;color:#fff!important;min-height:64px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.edash .ecard .ei{background:none!important;color:#fff!important}.edash .ecard .ei svg{width:18px;height:18px}
.edash .ecard small{color:#fff!important;font-size:11px;font-weight:600}.edash .ecard b{color:#fff!important;font-size:18px;font-weight:800}
.edash .ecard em{display:none}
.edash .ecard.bl{background:var(--t-teal)!important}.edash .ecard.yl{background:var(--t-yellow)!important}.edash .ecard.gr{background:var(--t-green)!important}
.edash .ecard.pu{background:var(--t-sky)!important}.edash .ecard.cy{background:var(--t-cyan)!important}.edash .ecard.rd{background:var(--t-red)!important}
.edash .ecard.or{background:var(--t-grey)!important}.edash .ecard:hover{filter:brightness(1.08)}
.edash .tstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:0;margin:0}
.edash .tstrip .ts{border:0;border-right:1px solid var(--line);border-radius:0;background:none;padding:10px 12px;text-align:left}
.edash .tstrip .ts:last-child{border-right:0}.edash .tstrip .ts b{display:block;font-size:18px;font-weight:800}.edash .tstrip .ts small{font-size:10.5px;color:var(--mut)}
@media (max-width:980px){.edash .ecards{grid-template-columns:repeat(3,minmax(0,1fr))}}