:root{--navy:#0b1e2e;--navy2:#17364d;--amber:#d97706;--amber2:#f59e0b;--bg:#f4f7fc;--text:#172334;--muted:#718096;--line:#e7edf4;--green:#15803d;--red:#b91c1c;--yellow:#a16207;--shadow:0 22px 55px rgba(11,30,46,.11)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:28px 20px;position:sticky;top:0;height:100vh}.logo{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:800;margin-bottom:38px}.logo-mark{width:46px;height:46px;border-radius:15px;background:var(--amber);display:grid;place-items:center;font-size:22px}.logo small{display:block;color:#ffd99a;font-size:11px;margin-top:3px}.nav{display:grid;gap:9px}.nav a{color:#cbd7df;text-decoration:none;padding:13px 15px;border-radius:14px;display:flex;gap:12px;align-items:center;transition:.2s}.nav a:hover,.nav a.active{background:rgba(255,255,255,.11);color:#fff}.nav a.active{box-shadow:inset -3px 0 var(--amber2)}.sidebar-foot{position:absolute;bottom:28px;right:20px;left:20px;background:rgba(255,255,255,.07);padding:14px;border-radius:15px;font-size:12px;color:#d7e0e6}.main{padding:26px 32px 50px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px}.page-title h1{font-size:28px;color:var(--navy)}.page-title p{color:var(--muted);margin-top:5px;font-size:14px}.user-box{display:flex;align-items:center;gap:12px;background:white;border:1px solid var(--line);padding:8px 10px 8px 16px;border-radius:18px}.avatar{width:42px;height:42px;border-radius:13px;background:#fff4db;color:var(--amber);display:grid;place-items:center}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.stat,.panel{background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:0 8px 24px rgba(11,30,46,.04)}.stat{padding:20px;display:flex;justify-content:space-between;align-items:center}.stat strong{font-size:27px;color:var(--navy);display:block}.stat span{font-size:13px;color:var(--muted)}.stat-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#fff3da;color:var(--amber)}.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.panel{padding:22px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.panel-head h2{font-size:18px;color:var(--navy)}.link{color:var(--amber);font-weight:700;text-decoration:none;font-size:13px}.project-row,.activity-row{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid #edf1f5}.project-row:last-child,.activity-row:last-child{border:0}.project-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#eef4f7;color:var(--navy)}.grow{flex:1}.grow strong{font-size:14px}.meta{color:var(--muted);font-size:12px;margin-top:4px}.amount{font-weight:800;color:var(--navy)}.badge{display:inline-flex;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:800}.badge.new{background:#dcfce7;color:var(--green)}.badge.urgent{background:#fee2e2;color:var(--red)}.badge.progress{background:#fef9c3;color:var(--yellow)}.toolbar{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:20px}.field{position:relative}.field i{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#95a2af}.control{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:11px 14px;outline:none;color:var(--text);min-height:44px}.field .control{padding-right:40px}.control:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.09)}.toolbar .field{flex:1;min-width:210px}.toolbar select{min-width:150px}.btn{border:0;border-radius:14px;padding:11px 17px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--amber);color:#fff;box-shadow:0 7px 16px rgba(217,119,6,.2)}.btn-dark{background:var(--navy);color:#fff}.btn-light{background:#eef2f6;color:var(--navy)}.reports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.report-card{background:#fff;border:1px solid var(--line);border-radius:23px;padding:20px;transition:.2s}.report-card:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(11,30,46,.08)}.report-head,.report-meta,.assignment-summary{display:flex;justify-content:space-between;align-items:center;gap:10px}.report-title{font-size:17px;color:var(--navy)}.report-desc{color:#566575;font-size:14px;line-height:1.7;margin:13px 0;background:#f8fafc;border-right:3px solid var(--amber);padding:10px 13px;border-radius:12px}.report-meta{color:var(--muted);font-size:12px;margin-bottom:15px}.assignment{background:#f7f9fc;border-radius:16px;padding:14px}.assign-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.assigned-person{margin-top:10px;color:#566575;font-size:12px}.assigned-person.success{color:var(--green);font-weight:700}.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)}.modal{position:fixed;inset:0;background:rgba(5,18,29,.55);display:none;place-items:center;padding:20px;z-index:20}.modal.show{display:grid}.modal-card{background:#fff;width:min(680px,100%);border-radius:26px;padding:25px;max-height:92vh;overflow:auto}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.close{width:38px;height:38px;border:0;border-radius:12px;background:#eef2f6}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-group{display:grid;gap:7px}.form-group.full{grid-column:1/-1}.form-group label{font-size:13px;font-weight:700}.form-group .control{width:100%}textarea.control{resize:vertical;min-height:100px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.toast{position:fixed;bottom:24px;left:24px;background:var(--navy);color:#fff;border-right:4px solid var(--amber);padding:13px 18px;border-radius:14px;box-shadow:var(--shadow);transform:translateY(100px);opacity:0;transition:.25s;z-index:40}.toast.show{transform:none;opacity:1}.register-page{min-height:100vh;display:grid;place-items:center;padding:25px}.register-wrap{width:min(1050px,100%);background:#fff;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1fr 1.15fr;box-shadow:var(--shadow)}.register-brand{padding:48px 40px;background:linear-gradient(155deg,var(--navy),var(--navy2));color:#fff}.register-brand h1{font-size:32px;margin:25px 0 12px}.register-brand h1 span{color:#fbbf24}.register-brand p{color:#cbd7df;line-height:1.8}.feature-list{list-style:none;margin-top:30px;display:grid;gap:15px}.feature-list i{color:#fbbf24;margin-left:9px}.register-form{padding:43px 38px}.register-form h2{color:var(--navy);margin-bottom:6px}.register-form>p{color:var(--muted);margin-bottom:24px}.register-form .form-grid{grid-template-columns:1fr 1fr}.register-form .btn{width:100%;margin-top:18px}.back-link{display:inline-block;margin-top:18px;color:var(--amber);text-decoration:none;font-weight:700}.progress-bar{height:7px;background:#edf1f5;border-radius:20px;overflow:hidden;margin-top:9px}.progress-bar span{display:block;height:100%;background:var(--amber);border-radius:20px}.mobile-menu{display:none}.mobile-overlay{display:none}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.reports{grid-template-columns:1fr}.assign-grid{grid-template-columns:1fr 1fr}.assign-grid .btn{grid-column:1/-1}.grid-2{grid-template-columns:1fr}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;right:-280px;width:260px;z-index:30;transition:.25s}.sidebar.open{right:0}.mobile-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}.mobile-menu{display:grid;width:42px;height:42px;place-items:center;border:0;border-radius:13px;background:var(--navy);color:#fff}.main{padding:18px 15px 40px}.topbar{align-items:flex-start}.user-box .user-copy{display:none}.page-title h1{font-size:23px}.register-wrap{grid-template-columns:1fr}.register-brand{display:none}.register-form{padding:30px 22px}.form-grid,.register-form .form-grid{grid-template-columns:1fr}.form-group.full{grid-column:auto}}
@media(max-width:520px){.stats{grid-template-columns:1fr}.report-meta{align-items:flex-start;flex-direction:column}.assign-grid{grid-template-columns:1fr}.toolbar>*{width:100%}.topbar{flex-wrap:wrap}}

/* Premium presentation polish */
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 5%,rgba(245,158,11,.07),transparent 28%),radial-gradient(circle at 15% 90%,rgba(23,54,77,.06),transparent 30%);z-index:-1}.sidebar:before{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.08);border-radius:50%;top:-70px;left:-70px}.stat{position:relative;overflow:hidden;transition:.25s}.stat:after{content:"";position:absolute;inset:auto -25px -35px auto;width:85px;height:85px;border-radius:50%;background:rgba(217,119,6,.035)}.stat:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(11,30,46,.09)}.btn{transition:.2s;text-decoration:none}.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;background:#fff}.login-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#071824,#12364e);padding:48px clamp(30px,6vw,90px);color:#fff;display:flex;flex-direction:column;justify-content:space-between}.login-visual:before,.login-visual:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09)}.login-visual:before{width:480px;height:480px;left:-200px;bottom:-180px}.login-visual:after{width:280px;height:280px;right:-80px;top:12%}.login-logo{position:relative;z-index:1;display:flex;align-items:center;gap:13px;font-size:21px;font-weight:900}.login-copy{position:relative;z-index:1;max-width:600px}.login-kicker{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);border-radius:30px;font-size:12px;color:#fbd38d;margin-bottom:20px}.login-copy h1{font-size:clamp(35px,5vw,66px);line-height:1.15;letter-spacing:-1px}.login-copy h1 span{color:#f6ad36}.login-copy p{color:#c8d6df;line-height:1.9;font-size:16px;margin-top:18px;max-width:540px}.login-metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.login-metric{padding:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border-radius:17px}.login-metric strong{display:block;font-size:23px;color:#f7b84b}.login-metric span{font-size:11px;color:#c8d6df}.login-side{display:grid;place-items:center;padding:35px;background:linear-gradient(180deg,#fff,#f7f9fc)}.login-card{width:min(430px,100%)}.login-card-head{margin-bottom:30px}.login-card-head .mini-logo{display:none}.login-card-head h2{font-size:30px;color:var(--navy);margin-bottom:8px}.login-card-head p{color:var(--muted);line-height:1.7}.input-wrap{position:relative}.input-wrap>i{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#98a5b2}.input-wrap .control{padding-right:45px;width:100%;height:52px}.password-toggle{position:absolute;left:9px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#8795a3;padding:8px}.login-options{display:flex;justify-content:space-between;align-items:center;margin:14px 0 22px;font-size:13px}.remember{display:flex;gap:7px;align-items:center}.login-help{color:var(--amber);text-decoration:none;font-weight:700}.login-submit{width:100%;min-height:52px;font-size:15px}.security-note{display:flex;align-items:center;justify-content:center;gap:7px;color:#8795a3;font-size:11px;margin-top:22px}.demo-note{margin-top:18px;background:#fff7e8;color:#875207;border:1px solid #fde2ae;padding:11px 13px;border-radius:13px;font-size:12px;text-align:center}.login-footer{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#9aa7b3;font-size:11px}
@media(max-width:850px){.login-page{grid-template-columns:1fr}.login-visual{display:none}.login-side{min-height:100vh;padding:25px}.login-card-head .mini-logo{display:flex;margin-bottom:28px;color:var(--navy)}.login-footer{position:static;margin-top:35px}}
.logout-fab{position:fixed;left:22px;top:22px;z-index:18;width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#8b1e1e;box-shadow:0 8px 22px rgba(11,30,46,.1);display:grid;place-items:center;transition:.2s}.logout-fab:hover{background:#fff1f1;transform:translateY(-2px)}
.optional-label{font-size:10px;color:var(--muted);background:#eef2f6;padding:3px 8px;border-radius:20px;margin-right:5px}.note-control{min-height:78px!important}.upload-box{border:2px dashed #d7dee7;border-radius:17px;background:#f9fbfd;padding:20px;display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:var(--navy);cursor:pointer;transition:.2s}.upload-box:hover{border-color:var(--amber);background:#fffaf0}.upload-box i{font-size:27px;color:var(--amber)}.upload-box span{font-size:11px;color:var(--muted);font-weight:400}.image-preview,.report-images{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.preview-item,.report-image{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#e9eef3}.preview-item img,.report-image img{width:100%;height:100%;object-fit:cover;display:block}.preview-item button{position:absolute;top:5px;left:5px;width:25px;height:25px;border:0;border-radius:50%;background:rgba(11,30,46,.82);color:#fff}.report-note{margin:10px 0;padding:10px 12px;border-radius:12px;background:#fffbeb;color:#79540c;font-size:12px;line-height:1.65}.report-note i{color:var(--amber);margin-left:5px}
.analytics-hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#0b1e2e,#17445e);color:#fff;border-radius:28px;padding:26px 30px;margin-bottom:22px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 18px 40px rgba(11,30,46,.16)}.analytics-hero:after{content:"";position:absolute;width:240px;height:240px;border:45px solid rgba(255,255,255,.035);border-radius:50%;left:-70px;top:-90px}.analytics-hero h2{font-size:25px;margin-bottom:7px}.analytics-hero p{color:#cbd8e0;font-size:13px}.live-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);padding:9px 14px;border-radius:30px;font-size:12px}.live-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;box-shadow:0 0 0 6px rgba(34,197,94,.12);animation:pulse 1.8s infinite}@keyframes pulse{50%{box-shadow:0 0 0 11px rgba(34,197,94,0)}}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.kpi-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:19px;position:relative;overflow:hidden}.kpi-top{display:flex;justify-content:space-between;align-items:center}.kpi-label{font-size:12px;color:var(--muted);font-weight:700}.kpi-value{font-size:29px;color:var(--navy);font-weight:900;margin:9px 0 4px}.trend{font-size:11px;font-weight:800}.trend.up{color:#15803d}.trend.down{color:#b91c1c}.spark{position:absolute;left:10px;bottom:4px;width:90px;height:42px;opacity:.65}.analytics-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;margin-bottom:18px}.chart-panel{background:#fff;border:1px solid var(--line);border-radius:23px;padding:21px;min-width:0}.chart-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.chart-head h3{color:var(--navy);font-size:17px}.chart-head p{color:var(--muted);font-size:11px;margin-top:4px}.chart-canvas{width:100%;height:250px;display:block}.donut-wrap{position:relative;width:210px;height:210px;margin:5px auto 12px}.donut{width:100%;height:100%;border-radius:50%;background:conic-gradient(#d97706 0 32%,#17445e 32% 58%,#3b82f6 58% 78%,#22c55e 78% 91%,#cbd5e1 91%);position:relative}.donut:after{content:"";position:absolute;inset:38px;background:#fff;border-radius:50%}.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:1}.donut-center strong{font-size:27px;color:var(--navy)}.donut-center span{font-size:10px;color:var(--muted)}.legend{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:11px}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:8px;height:8px;border-radius:50%}.bottom-analytics{display:grid;grid-template-columns:1.15fr 1fr;gap:18px}.region-row{display:grid;grid-template-columns:62px 1fr 32px;align-items:center;gap:10px;margin:16px 0;font-size:12px}.region-track{height:9px;background:#edf1f5;border-radius:20px;overflow:hidden}.region-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--amber),#fbbf24)}.school-table{width:100%;border-collapse:collapse;font-size:12px}.school-table th{text-align:right;color:var(--muted);padding:0 8px 11px}.school-table td{padding:12px 8px;border-top:1px solid #edf1f5}.rank{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:#fff4dc;color:var(--amber);font-weight:900}.sla-ring{width:92px;height:92px;border-radius:50%;background:conic-gradient(#22c55e 0 87%,#edf1f5 87%);display:grid;place-items:center;position:relative}.sla-ring:after{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%}.sla-ring strong{z-index:1;color:var(--navy)}
@media(max-width:1050px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.analytics-grid,.bottom-analytics{grid-template-columns:1fr}}
@media(max-width:560px){.kpi-grid{grid-template-columns:1fr}.analytics-hero{align-items:flex-start;gap:20px;flex-direction:column}.chart-canvas{height:210px}.legend{grid-template-columns:1fr}}
.command-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:18px}.south-map{min-height:330px;position:relative;overflow:hidden;background:linear-gradient(145deg,#0a1e2c,#163e56);color:#fff}.south-map:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:18px 18px}.map-head{position:relative;z-index:1}.map-head h3{color:#fff}.map-head p{color:#aebfca}.map-stage{position:relative;height:240px;z-index:1}.region-node{position:absolute;width:92px;height:92px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border-radius:26px;display:grid;place-content:center;text-align:center;transition:.25s}.region-node:hover{transform:scale(1.06);background:rgba(217,119,6,.24);border-color:#f4b74f}.region-node strong{font-size:22px;color:#f7b84b}.region-node span{font-size:12px;font-weight:800}.region-node small{font-size:9px;color:#b9c9d2;margin-top:3px}.region-node.asir{right:20%;top:28%}.region-node.jazan{right:43%;top:58%}.region-node.najran{right:63%;top:20%}.region-node.baha{right:3%;top:2%}.map-route{position:absolute;border-top:1px dashed rgba(247,184,75,.45);transform-origin:right}.route-1{width:155px;right:27%;top:62%;transform:rotate(14deg)}.route-2{width:210px;right:30%;top:48%;transform:rotate(-11deg)}.route-3{width:105px;right:9%;top:27%;transform:rotate(34deg)}.supervisor-list{display:grid;gap:10px}.supervisor{display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;padding:11px;border:1px solid #edf1f5;border-radius:15px;transition:.2s}.supervisor:hover{border-color:#f1c574;transform:translateX(-3px)}.medal{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:900;background:#fff4dc;color:#d97706}.supervisor:first-child .medal{background:linear-gradient(145deg,#f8cc65,#d99b19);color:#fff;box-shadow:0 5px 14px rgba(217,155,25,.3)}.supervisor strong{font-size:12px}.supervisor .meta{font-size:10px}.speed{text-align:left}.speed strong{display:block;font-size:14px;color:#15803d}.speed small{font-size:9px;color:var(--muted)}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.insight-card{border-radius:19px;padding:17px;display:flex;gap:12px;align-items:flex-start}.insight-card i{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;flex:none}.insight-card strong{display:block;font-size:12px;margin-bottom:4px}.insight-card p{font-size:10px;line-height:1.6}.insight-card.warning{background:#fff7ed;color:#8a4b0a;border:1px solid #fed7aa}.insight-card.warning i{background:#ffedd5;color:#ea580c}.insight-card.success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}.insight-card.success i{background:#dcfce7;color:#16a34a}.insight-card.info{background:#eff6ff;color:#1e4f91;border:1px solid #bfdbfe}.insight-card.info i{background:#dbeafe;color:#2563eb}.fault-bars{display:grid;gap:13px}.fault-item{display:grid;grid-template-columns:36px 1fr 35px;align-items:center;gap:10px}.fault-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff4dc;color:#d97706}.fault-info{font-size:11px;font-weight:800}.fault-info .region-track{margin-top:6px;height:6px}.fault-count{text-align:left;font-weight:900;color:var(--navy)}
@media(max-width:950px){.command-grid{grid-template-columns:1fr}.insight-grid{grid-template-columns:1fr}}