:root{
  --primary:#1E40AF; --primary-2:#3B82F6; --primary-deep:#172b6e;
  --accent:#D97706; --bg:#F4F6FB; --card:#FFFFFF; --ink:#1e293b; --muted:#64748b;
  --line:#E2E8F0; --green:#15803D; --amber:#D97706; --orange:#F97316; --red:#DC2626; --blue:#2563EB;
  --lA:#15803D; --lB:#4ADE80; --lC:#FBBF24; --lD:#F97316; --lE:#DC2626;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.05);
  --shadow-lg:0 12px 28px -8px rgba(15,23,42,.16);
  --radius:16px; --radius-sm:10px; --side-w:264px;
  --ff-head:'Cairo',sans-serif; --ff-body:'Tajawal',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);background:var(--bg);color:var(--ink);line-height:1.75;font-size:15px}
h1,h2,h3,h4,.num{font-family:var(--ff-head)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.app{display:flex;min-height:100vh}
.sidebar{position:fixed;inset-block:0;right:0;width:var(--side-w);background:linear-gradient(180deg,var(--primary-deep),var(--primary));
  color:#fff;padding:22px 16px;display:flex;flex-direction:column;z-index:40;overflow-y:auto}
.brand{display:flex;flex-direction:column;gap:4px;padding:4px 8px 16px;border-bottom:1px solid rgba(255,255,255,.14)}
.brand .logo{display:flex;align-items:center;gap:10px;font-family:var(--ff-head);font-weight:800;font-size:16px}
.brand .logo .ico{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.brand .sub{font-size:11.5px;color:#c7d6ff;line-height:1.5}
.nav{flex:1;margin-top:14px}
.nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;color:#dbe5ff;font-size:14px;font-weight:500;transition:.18s;margin-bottom:3px}
.nav a i{width:19px;height:19px;flex:none}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.nav a.active{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.supervisor-card{margin-top:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:13px;font-size:12px;color:#eef3ff}
.supervisor-card .nm{font-family:var(--ff-head);font-weight:700;font-size:13.5px;color:#fff}
.main{flex:1;margin-right:var(--side-w);display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 28px;display:flex;align-items:center;gap:16px}
.topbar h1{font-size:18px;font-weight:800;color:var(--primary-deep)}
.topbar .crumb{font-size:12.5px;color:var(--muted)}
.topbar .actions{margin-inline-start:auto;display:flex;gap:9px;align-items:center}
.content{flex:1;padding:26px 28px 40px;max-width:1320px;width:100%;margin-inline:auto}
.menu-btn{display:none;background:var(--primary);color:#fff;border:none;border-radius:10px;padding:8px 11px}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;transition:.2s;position:relative;overflow:hidden}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi .k-top{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12.5px;font-weight:500}
.kpi .k-top .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.kpi .k-val{font-size:26px;font-weight:800;color:var(--ink);line-height:1.25}
.kpi .k-sub{font-size:11.5px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card h3{font-size:15.5px;font-weight:800;color:var(--primary-deep);margin-bottom:4px}
.card .desc{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.section-title{font-size:15px;font-weight:800;color:var(--primary-deep);margin:8px 0 4px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.row>.col{flex:1;min-width:300px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:11.5px;font-weight:700}
.pri-high{background:#fee2e2;color:#b91c1c}.pri-mid{background:#fef3c7;color:#b45309}
.pri-low{background:#dcfce7;color:#15803d}.pri-dup{background:#e2e8f0;color:#475569}
.lvl-dot{width:11px;height:11px;border-radius:3px;display:inline-block}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#f1f5f9;color:var(--primary-deep);font-weight:700;text-align:right;padding:10px 12px;border-bottom:2px solid var(--line);font-family:var(--ff-head)}
td{padding:9px 12px;border-bottom:1px solid #eef2f7;text-align:right}
tbody tr:hover{background:#f8fafc}
tr.tot td{background:#eef4ff;font-weight:800;border-top:2px solid var(--line)}
.table-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:11px;padding:10px 16px;font-weight:700;font-size:13.5px;transition:.18s}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-deep)}
.btn-ghost{background:#fff;color:var(--primary);border:1px solid var(--line)}.btn-ghost:hover{border-color:var(--primary);background:#f5f8ff}
.btn-sm{padding:7px 12px;font-size:12.5px}.btn-block{width:100%;justify-content:center}
.alert{display:flex;gap:11px;align-items:flex-start;border-radius:12px;padding:12px 14px;border:1px solid;font-size:13px;margin-bottom:9px}
.alert .emo{font-size:16px;line-height:1.4}
.alert.critical{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert.watch{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert.excellence{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.note-box{border-radius:12px;padding:14px 16px;font-size:13px;border:1px solid var(--line);background:#f8fafc;margin-bottom:12px}
.note-box.warn{background:#fffbeb;border-color:#fde68a}.note-box.crit{background:#fef2f2;border-color:#fecaca}
.insight-box{background:linear-gradient(135deg,#eef4ff,#f5f8ff);border:1px solid #dbe7ff;border-radius:14px;padding:18px 20px;font-size:13.5px}
.insight-box .tag{font-weight:800;color:var(--primary);font-family:var(--ff-head);display:block;margin-bottom:6px}
.list{padding-inline-start:20px;font-size:13.5px}.list li{margin-bottom:7px}.list li b{color:var(--primary-deep)}
.fact{color:var(--primary-deep);font-weight:600}.infer{color:#6d28d9;font-weight:600}
.school-grid{grid-template-columns:repeat(3,1fr)}
.school-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;transition:.2s;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.school-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary-2)}
.school-card .sc-head{display:flex;align-items:center;gap:11px}
.school-card .sc-av{width:44px;height:44px;border-radius:12px;background:var(--primary);color:#fff;display:grid;place-items:center;font-family:var(--ff-head);font-weight:800;font-size:18px;flex:none}
.school-card .sc-name{font-family:var(--ff-head);font-weight:800;font-size:14.5px;color:var(--primary-deep);line-height:1.4}
.school-card .sc-meta{font-size:11px;color:var(--muted)}
.bar{height:9px;border-radius:99px;background:#eef2f7;overflow:hidden;display:flex}.bar>span{height:100%}
.mini-stat{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.mini-stat b{color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.filters select,.filters input{font-family:inherit;font-size:13px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);min-width:160px}
.filters label{font-size:12.5px;color:var(--muted);font-weight:700}
.footer{border-top:1px solid var(--line);background:#fff;padding:20px 28px;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.footer .sup{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--primary-deep)}
.chart-box{position:relative;height:320px}.chart-box.sm{height:260px}.chart-box.lg{height:400px}
.mt{margin-top:16px}.muted{color:var(--muted)}.center{text-align:center}.hidden{display:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade{animation:fadeUp .4s ease}
.skeleton{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 50%,#eef2f7 75%);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:12px;height:320px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:1024px){.kpis{grid-template-columns:repeat(2,1fr)}.school-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .sidebar{transform:translateX(100%);transition:.25s}.sidebar.open{transform:translateX(0)}
  .main{margin-right:0}.menu-btn{display:inline-flex}.topbar{padding:12px 16px}
  .content{padding:18px 16px 32px}.kpis,.school-grid{grid-template-columns:1fr}.row{flex-direction:column}
}
@media print{
  .sidebar,.topbar,.footer,.no-print{display:none!important}
  .main{margin-right:0}.content{padding:0;max-width:none}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  body{background:#fff}
  .print-header{display:block!important}
}
.print-header{display:none;text-align:center;border-bottom:2px solid var(--primary);padding-bottom:12px;margin-bottom:18px}
.print-header h1{font-size:20px;color:var(--primary-deep)}
.print-header .sub{font-size:13px;color:var(--muted)}