:root{font-family:Tahoma,Arial,sans-serif;color:#203f38;background:#f6f8f5;line-height:1.7;font-synthesis:none;--green:#164d40;--muted:#72817b;--line:#e4eae3}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ccab52;outline-offset:4px}button{border:0}a{color:inherit}.sidebar{position:fixed;right:0;top:0;bottom:0;width:250px;background:#123d35;color:white;padding:38px 26px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:34px;font-weight:700}.logo{width:52px;height:52px;border:1px solid #91ac98;border-radius:18px;text-align:center;background:#285346}.brand small{display:block;font-size:10px;font-weight:400;color:#b6cbc0;margin-top:-3px}.nav-label{font-size:11px;color:#9cb6aa;margin:55px 16px 17px}.nav{display:flex;align-items:center;gap:15px;width:100%;text-align:right;color:#c2d3ca;background:none;padding:14px 17px;border-radius:12px;margin:7px 0}.nav.active{background:#34594b;color:#fff}.sidebar-bottom{margin-top:auto;display:flex;align-items:center;gap:12px;border-top:1px solid #426154;padding-top:23px;font-size:13px}.sidebar-bottom small{display:block;color:#a6beb0;font-size:10px}.avatar{display:inline-grid;place-items:center;background:#e8efe5;color:#385f49;border-radius:50%;width:44px;height:44px;font-weight:700}.main{margin-right:250px}header{height:88px;padding:0 46px;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px}.breadcrumb{color:var(--muted)}.breadcrumb span{margin:0 13px}.breadcrumb strong{color:#244437}.badge{background:#f4edda;color:#8a702f;border:1px solid #eadfbf;border-radius:30px;font-size:11px;padding:5px 13px}main{max-width:1240px;margin:auto;padding:40px 46px}h1{font-size:31px;margin:0 0 5px;letter-spacing:-1px}h2{font-size:18px;margin:0}h3{font-size:17px;margin:0}.sub{color:var(--muted);font-size:13px;margin:0}.title-row{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:27px}.date{font-size:12px;color:var(--muted)}.hero{background:#e9f0e5;border:1px solid #dbe5d5;border-radius:20px;display:flex;justify-content:space-between;align-items:center;padding:25px 30px;gap:20px;margin-bottom:24px}.hero h2{font-size:21px;margin-bottom:6px}.hero p{font-size:12px;color:#60765d;margin:0}.hero-mark{font-size:45px;color:#587454;border:1px solid #b6c7ac;border-radius:50%;width:79px;height:79px;display:grid;place-items:center;flex-shrink:0}.demo-note{border-right:3px solid #c8a754;padding:10px 14px;background:#fcfaf2;font-size:12px;color:#746647;margin:0 0 22px;border-radius:5px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}.stat{background:white;border:1px solid var(--line);padding:17px 23px;border-radius:13px;display:flex;align-items:center;justify-content:space-between}.stat strong{font-size:26px}.stat span{font-size:12px;color:var(--muted)}.section-title{display:flex;justify-content:space-between;align-items:center;margin:22px 0 14px}.section-title small{font-size:11px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}.student-head{display:flex;gap:13px;align-items:center}.student-head .avatar{width:52px;height:52px;font-size:23px;border-radius:16px;background:#eff0e1}.student-head .sub{font-size:11px}.student-head .status{margin-right:auto}.status{font-size:10px;border-radius:20px;padding:4px 11px;background:#f0f3ee;color:#677460}.status.completed{background:#e8f3ec;color:#276346}.status.called,.status.departed,.status.received{background:#f9eed9;color:#906a20}.details{display:flex;gap:15px;font-size:11px;color:#7b877f;border-bottom:1px solid var(--line);padding:17px 0;margin-bottom:17px}.steps{display:flex;justify-content:space-between;gap:6px;margin:20px 0}.step{flex:1;text-align:center;font-size:9px;color:#8b978e}.step i{display:block;margin:0 auto 6px;background:#edf0e9;border-radius:50%;width:25px;height:25px;line-height:25px;font-style:normal}.step.done{color:#31644d}.step.done i{background:#dcebdc;color:#31644d}.buttons{display:flex;gap:9px;flex-wrap:wrap}.primary,.secondary,.quiet{border-radius:9px;padding:10px 17px;font-size:12px;min-height:42px}.primary{background:var(--green);color:white}.secondary{background:white;border:1px solid #d6dfd4;color:#345341}.quiet{background:#edf2ea;color:#365a41}.card .primary{flex:1}.hint{font-size:11px;color:var(--muted);margin:12px 0 0}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:17px 21px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:20px;font-size:12px}select{border:1px solid #d5ded3;border-radius:7px;background:#fff;color:#345443;padding:6px 10px;max-width:100%}.controls label{display:flex;gap:8px;align-items:center}.lower{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin-top:24px}.mini-map{background:#edf0e7;position:relative;overflow:hidden;height:130px;border-radius:12px;display:grid;place-items:center;margin:15px 0}.mini-map:before,.mini-map:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(28deg,transparent 0 38px,#fff9 39px 49px,transparent 50px 100px)}.mini-map:after{transform:rotate(65deg)}.map-pin{z-index:1;padding:10px 19px;border:1px solid #9cac8e;background:#fff;border-radius:30px;font-size:12px;box-shadow:0 3px 20px #62725820}.notice{font-size:12px;border-bottom:1px solid var(--line);padding:12px 0}.notice:last-child{border:0}.notice small{display:block;color:var(--muted);font-size:10px}.empty{padding:24px 0;color:var(--muted);font-size:12px}.event{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.event .dot{width:9px;height:9px;border-radius:50%;background:#709174;margin-top:10px;flex-shrink:0}.event.failure .dot{background:#bc7545}.event small{color:var(--muted);display:block}.guide{display:grid;gap:20px}.guide p,.guide li{font-size:13px;color:#657769}.watch{margin-top:15px;padding:12px;border-radius:10px;background:#eff4ed;font-size:12px}.watch strong{display:block}.school-list{display:grid;gap:16px}.school-list .card{display:grid;grid-template-columns:1fr 1fr;gap:15px}.school-list .steps{grid-column:1/-1;margin:5px 0}.school-list .buttons{justify-content:flex-end;align-items:center}footer{border-top:1px solid var(--line);padding:22px 46px;font-size:10px;color:#829084;display:flex;justify-content:space-between}#toast{position:fixed;bottom:25px;left:25px;right:275px;background:#173f35;color:#fff;padding:15px 21px;border-radius:12px;box-shadow:0 8px 35px #123d3530;z-index:20;font-size:13px}dialog{border:1px solid var(--line);border-radius:17px;max-width:450px;padding:28px;color:#254638}dialog::backdrop{background:#123d3566}dialog p{font-size:13px}
.school-context{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.school-account{display:flex;gap:12px;align-items:center;font-size:13px}.school-account small{display:block;font-size:11px;color:var(--muted)}.school-session{font-size:11px;color:#54715c;background:#e9efe6;padding:6px 13px;border-radius:20px}.school-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:25px 0}.school-stat{text-align:right;background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;display:flex;flex-direction:column;color:#284c3a;transition:border-color .15s}.school-stat:hover,.school-stat.selected{border-color:#779d7b;background:#f1f6ee}.school-stat span{font-size:12px}.school-stat strong{font-size:30px;line-height:1.4;margin:9px 0}.school-stat small{font-size:10px;color:var(--muted)}.school-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:21px;align-items:start}.school-queue,.school-feed{background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px;min-width:0}.school-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}.school-section-heading h2{font-size:17px}.school-section-heading .sub{font-size:10px;margin-top:4px}.school-count{white-space:nowrap;font-size:10px;border:1px solid var(--line);padding:5px 11px;border-radius:20px;color:var(--muted)}.school-search label{font-size:11px;color:#708375;display:block;margin-bottom:5px}.school-search>div{display:flex;align-items:center;background:#f8faf6;border:1px solid var(--line);border-radius:10px;padding:3px 12px;gap:8px}.school-search input{border:0;background:transparent;min-width:0;flex:1;padding:10px 0;font:inherit;font-size:12px;color:#294a39}.school-search input:focus{outline:0}.school-search>div:focus-within{outline:2px solid #72936d;outline-offset:2px}.school-search .quiet{padding:4px 10px;min-height:30px;font-size:10px}.school-filters{display:flex;gap:6px;flex-wrap:wrap;margin:17px 0 20px}.school-filter{background:#f3f6f0;color:#70806e;border-radius:7px;padding:6px 10px;font-size:10px;border:1px solid transparent}.school-filter.active{background:#e4efde;color:#315a39;border-color:#c8d9c0}.school-results{display:grid;gap:14px}.school-student{border:1px solid var(--line);border-radius:13px;padding:18px}.school-student.needs-action{border-right:3px solid #789765}.school-student-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.school-identity{display:flex;gap:11px;align-items:center;min-width:0}.school-identity h3{font-size:15px}.school-identity .sub{font-size:10px}.school-identity .avatar{width:42px;height:42px;border-radius:12px;flex-shrink:0}.school-next{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:15px}.school-next p{font-size:11px;color:#687c69;max-width:290px;margin:0}.school-next button{white-space:nowrap;padding:9px 14px;font-size:11px;display:flex;gap:16px;align-items:center}.school-wait{font-size:10px;color:#98a391;white-space:nowrap}.school-wait.finished{color:#4c7b4e}.school-student-meta{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#8a9785;padding:15px 0 0;margin-top:13px;border-top:1px solid #edf1e9}.watch-indicator{color:#6c8b61;white-space:nowrap}.watch-indicator.offline{color:#a77936}.school-detail{font-size:10px;color:#77866f;margin-top:12px}.school-detail summary,.school-demo-settings summary{cursor:pointer}.school-detail[open] summary{color:#325d3b}.school-watch-settings{padding-top:8px;border-top:1px solid var(--line)}.school-watch-settings label{display:flex;justify-content:space-between;align-items:center;gap:12px}.school-watch-settings select{font-size:10px}.school-detail .steps{margin:15px 0}.school-detail .watch{font-size:10px}.school-notification{display:flex;gap:11px;border-bottom:1px solid var(--line);padding:15px 0}.school-notification p{font-size:11px;margin:0;color:#506e52}.school-notification time{font-size:9px;color:#91a08b;display:block;margin-top:6px}.notification-dot{height:7px;width:7px;border-radius:50%;background:#9baa7e;flex-shrink:0;margin-top:7px}.school-reminder{border-radius:12px;background:#f4f6ed;padding:15px;margin-top:19px}.school-reminder strong{font-size:11px}.school-reminder p{font-size:10px;color:#879176;margin:6px 0 0}.school-demo-settings{font-size:11px;color:#6b7d63;background:#edf2e8;border:1px solid #dce5d4;border-radius:12px;padding:15px 20px;margin-top:23px}.school-demo-settings select{font-size:11px;margin:13px 10px 0}.school-attention{display:flex;gap:13px;align-items:center;border:1px solid #ecd9ab;background:#fff8e8;border-radius:12px;padding:12px 18px;margin-bottom:22px;color:#8c702e}.school-attention p{margin:0;font-size:12px}.school-attention small{display:block;font-size:10px}.school-alert-inline{font-size:10px;padding:8px 10px;background:#fcf6e9;color:#927640;border-radius:7px;margin-top:12px}.school-empty{text-align:center;padding:35px 15px}.school-empty>span{font-size:32px;color:#aab79f}.school-empty h3{font-size:14px;margin-top:7px}.school-empty p{font-size:11px;color:var(--muted)}
@media(max-width:1200px){.school-layout{grid-template-columns:1fr}.school-feed{display:block}.school-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){.sidebar{width:210px;padding:30px 20px}.main{margin-right:210px}main{padding:30px 25px}header{padding:0 25px}.grid{grid-template-columns:1fr}.lower{grid-template-columns:1fr}#toast{right:235px}.student-head .status{font-size:9px}}
@media(max-width:650px){.school-session{display:none}.school-stat{padding:14px}.school-stat strong{font-size:25px}.school-stat small{font-size:9px}.school-queue,.school-feed{padding:17px}.school-student{padding:14px}.school-student-top{align-items:flex-start}.school-student-top .status{font-size:9px;padding:4px 8px}.school-identity h3{font-size:13px}.school-identity .avatar{width:34px;height:34px}.school-next{align-items:flex-start;flex-direction:column;gap:10px}.school-next button{width:100%;justify-content:space-between}.school-student-meta{flex-direction:column;gap:5px}.school-filters{gap:5px}.school-filter{font-size:9px;padding:7px 8px}.school-section-heading h2{font-size:15px}.school-section-heading .sub{font-size:9px}.school-watch-settings label{align-items:flex-start;flex-direction:column}.school-demo-settings label{display:block;margin-top:10px}.school-demo-settings select{margin-right:0}}
@media(max-width:650px){.sidebar{position:static;width:auto;padding:18px 20px 9px}.brand{font-size:25px}.logo{width:39px;height:39px;border-radius:12px}.brand small{font-size:9px}.nav-label,.sidebar-bottom{display:none}nav{display:flex;margin-top:15px;gap:5px}.nav{font-size:10px;justify-content:center;padding:9px 5px;gap:4px;margin:0}.main{margin:0}header{height:60px;padding:0 20px}.breadcrumb{font-size:10px}.breadcrumb span{margin:0 5px}.badge{font-size:9px;padding:4px 8px}main{padding:24px 18px}h1{font-size:25px}.date{display:none}.hero{padding:20px}.hero h2{font-size:18px}.hero-mark{width:54px;height:54px;font-size:30px}.stats{gap:8px}.stat{padding:12px;display:block}.stat strong{display:block;font-size:22px}.stat span{font-size:10px}.card{padding:19px}.student-head h3{font-size:15px}.controls label{width:100%;justify-content:space-between}.school-list .card{grid-template-columns:1fr}.school-list .buttons{justify-content:flex-start}.school-list .steps{grid-column:auto}footer{padding:18px;display:block}footer span{display:block}#toast{right:18px;left:18px;bottom:18px}.steps{gap:3px}.step{font-size:8px}}

@font-face{font-family:Tajawal;src:url('assets/Tajawal-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url('assets/Tajawal-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{font-family:Tajawal,Tahoma,Arial,sans-serif;font-size:16px;line-height:1.8}
.brand{gap:14px;font-size:38px;line-height:1.3}.brand-logo{display:block;width:58px;height:58px;flex-shrink:0}.brand small{font-size:12px;line-height:1.6;margin-top:4px}.nav{font-size:16px}.nav-label{font-size:12px}
h1{font-size:34px;letter-spacing:0;line-height:1.5}h2{font-size:21px}h3{font-size:19px}.sub{font-size:15px}.primary,.secondary,.quiet{font-size:15px}.hint{font-size:13px}.demo-note{font-size:13px}.status{font-size:12px}.details{font-size:13px}.step{font-size:12px}.student-head .sub{font-size:13px}.controls{font-size:14px}.badge{font-size:13px}.breadcrumb{font-size:14px}.notice{font-size:14px}.notice small{font-size:12px}.guide p,.guide li{font-size:16px}.school-section-heading h2{font-size:20px}.school-section-heading .sub{font-size:13px}.school-identity h3{font-size:18px}.school-identity .sub{font-size:13px}.school-next p,.school-next button{font-size:14px}.school-filter{font-size:13px}.school-search label,.school-search input{font-size:14px}.school-stat span{font-size:15px}.school-stat small{font-size:12px}.school-student-meta,.school-detail,.school-notification time{font-size:12px}.school-notification p{font-size:14px}.school-reminder strong,.school-reminder p{font-size:13px}.school-wait{font-size:13px}.school-count{font-size:12px}.school-demo-settings,.school-demo-settings select{font-size:14px}
@media(max-width:650px){.brand{font-size:30px}.brand-logo{width:47px;height:47px}.brand small{font-size:11px}.nav{font-size:12px;gap:5px;padding:10px 5px}h1{font-size:28px}.breadcrumb{font-size:12px}.badge{font-size:11px}.step{font-size:10px}.school-filter{font-size:12px}.school-stat span{font-size:14px}.school-stat small{font-size:11px}.school-identity h3{font-size:16px}.school-student-top .status{font-size:11px}.school-section-heading h2{font-size:18px}.school-section-heading .sub{font-size:12px}.school-student-meta{font-size:11px}.student-head .status{font-size:11px}}