/* UI refresh v14 — vibrant, calm, accessible, RTL. Does not modify business logic. */
:root{
 --green:#147b78;--deep:#1d415c;--mint:#e8f7f2;--gold:#d4a16a;
 --bg:#f4f7fc;--text:#243951;--muted:#728299;--line:#e5eaf3;
 --red:#c8566b;--shadow:0 15px 45px rgba(40,64,100,.08);
 --v14-main:#157d7a;--v14-main-soft:#e5f7f3;--v14-indigo:#6966c6;
 --v14-blue:#64a8e2;--v14-yellow:#edb762;--v14-pink:#e993b5;
}
:root[data-ui-theme="ocean"]{--v14-main:#367ac4;--green:#367ac4;--v14-main-soft:#e9f2ff;--deep:#25476d;--gold:#cc9d58}
:root[data-ui-theme="plum"]{--v14-main:#8469af;--green:#8469af;--v14-main-soft:#f2eafa;--deep:#4b4675;--gold:#ca9a68}
html{scroll-behavior:smooth}body{background:radial-gradient(ellipse at 92% -8%,rgba(129,192,237,.15),transparent 38%),radial-gradient(ellipse at 5% 75%,rgba(185,167,238,.12),transparent 44%),var(--bg);font-family:'Tajawal','Noto Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;line-height:1.65}
#app{isolation:isolate}
/* Branded introduction */
.intro{background:radial-gradient(circle at 35% 20%,#fff2df 0,transparent 27%),radial-gradient(circle at 78% 72%,#dfecff 0,transparent 32%),linear-gradient(140deg,#f7fcfc,#f6f3ff 50%,#effbf6)}
.intro:before{border:38px solid rgba(148,209,216,.10);width:470px;height:470px;right:-160px;top:-110px;animation:v14-orbit 13s ease-in-out infinite}
.intro:after{border:30px solid rgba(195,168,236,.1);width:590px;height:590px;left:-230px;bottom:-290px;animation:v14-orbit 17s ease-in-out infinite reverse}
.intro .brandmark{border:1px solid rgba(255,255,255,.8);background:linear-gradient(135deg,#fff,#f3fcfb);box-shadow:0 15px 60px rgba(58,110,109,.16);animation:v14-logo 4s ease-in-out infinite}
.intro-content{background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);padding:clamp(24px,4vw,52px);border-radius:38px;box-shadow:0 36px 90px rgba(74,110,151,.06);backdrop-filter:blur(16px)}
.intro h1{color:#26486b}.intro .eyebrow{color:#b88a4f}.progress{height:7px;background:#e6edf7}.progress i{background:linear-gradient(90deg,#8bcfc5,#75a9e5,#c1a7e9,#e7b777)}
.intro-skip{background:#fff;box-shadow:0 8px 25px #2c57721a;border:1px solid #dfe9f0;color:#316077}
/* Navigation */
.shell{grid-template-columns:284px minmax(0,1fr)}
.sidebar{background:linear-gradient(167deg,#1e4060 0%,#1a4d64 38%,#1b655f 100%);padding:24px 16px;box-shadow:-15px 0 45px rgba(20,47,76,.09);scrollbar-width:thin;scrollbar-color:#ffffff38 transparent;z-index:3}
.sidebar:before{content:'';pointer-events:none;position:absolute;inset:0 0 auto;height:190px;background:radial-gradient(circle at 30% 0%,rgba(178,204,255,.14),transparent 70%)}
.side-brand{border-bottom:1px solid #ffffff30;padding:2px 7px 25px;position:relative}
.side-brand .brandmark{background:#fff;border:1px solid #ffffffd9;border-radius:20px;box-shadow:0 6px 20px #0b253050}
.side-brand b{color:#fff;font-size:15px}.side-brand small{color:#bbdfdc}
.nav-title{color:#bdcddb;font-size:10px;font-weight:800;letter-spacing:.4px;padding:20px 16px 7px}
.nav-btn{min-height:47px;border:1px solid transparent;border-radius:14px;color:#e1edf2;padding:10px 11px;margin:3px 0;gap:12px;font-weight:650;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.nav-btn span{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#ffffff13;color:#daeff0;font-size:15px}
.nav-btn span svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-btn.active{color:#fff;background:linear-gradient(100deg,rgba(180,223,229,.22),rgba(255,255,255,.09));border-color:#ffffff35;box-shadow:inset -3px 0 #eac081,0 6px 19px #092b3342}
.nav-btn.active span{background:#ffffffed;color:#246f75;box-shadow:0 4px 12px #0c313441}
.nav-btn:hover{background:#ffffff18;transform:translateX(-3px);color:#fff}.nav-btn:focus-visible{outline:3px solid #f5cd83;outline-offset:2px}
.side-bottom{border-top:1px solid #ffffff28;color:#c8dfdf;background:rgba(255,255,255,.05);border-radius:17px;margin-top:26px;padding:18px;line-height:1.9}
/* Header and content */
.main{background:transparent}.topbar{position:sticky;top:0;z-index:4;padding:15px clamp(18px,3vw,39px);background:rgba(255,255,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #e6ecf7;box-shadow:0 7px 25px rgba(37,65,106,.035)}
.topbar h2{font-size:19px;font-weight:800;color:#27455f}.topbar small{font-size:11px;color:#8190a6}.user-chip{border:1px solid #dfeaf4;background:linear-gradient(135deg,#f4fbfd,#fff);border-radius:13px;padding:9px 14px;color:#31586c;font-weight:700}
.content{max-width:1550px;padding:clamp(18px,2.4vw,35px) clamp(16px,2.4vw,36px)}
.hero-strip{overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.34);background:linear-gradient(115deg,#245978 0%,#278c8c 58%,#65a9a4 100%);border-radius:26px;min-height:180px;box-shadow:0 22px 45px #2d7a9f1e;padding:30px clamp(20px,3vw,38px)}
.hero-strip:before{content:'';position:absolute;width:310px;height:310px;left:-65px;top:-110px;border-radius:50%;border:44px solid rgba(255,255,255,.09);animation:v14-orbit 15s ease-in-out infinite}
.hero-strip:after{content:'';position:absolute;width:200px;height:200px;left:145px;bottom:-140px;border-radius:50%;background:radial-gradient(circle,#ffffff19,transparent 70%);pointer-events:none}
.hero-strip>*{position:relative;z-index:1}.hero-strip h2{font-size:clamp(22px,2.2vw,31px);letter-spacing:-.2px}.hero-strip p{color:#e2f7f7;margin-bottom:0}.hero-strip .eyebrow{background:#ffffff24;border:1px solid #ffffff48;border-radius:999px;padding:9px 16px;color:#fff!important;font-size:12px;letter-spacing:0}
.grid{gap:18px;margin-bottom:24px}
.card{border:1px solid #e8eefa;box-shadow:0 11px 32px rgba(46,71,104,.055);border-radius:21px;padding:23px;background:linear-gradient(180deg,#fff,#fff);transition:box-shadow .2s ease, transform .2s ease,border-color .2s ease}
.card:hover{box-shadow:0 17px 40px #354e7c14;border-color:#dce8f6}
.card.metric{min-height:160px;position:relative;overflow:hidden;border-top:0;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(145deg,#fff,#f6fbfa)}
.card.metric:before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#59bdad,#a8e2d4)}
.card.metric:after{content:'';position:absolute;left:-35px;bottom:-47px;width:120px;height:120px;border-radius:45px;background:#7bc9b310;transform:rotate(35deg)}
.card.metric:nth-child(4n+2){background:linear-gradient(145deg,#fff,#f4f8ff)}.card.metric:nth-child(4n+2):before{background:linear-gradient(90deg,#63a7e9,#adcdf8)}.card.metric:nth-child(4n+2) .v14-metric-icon{background:#e8f3ff;color:#417ec4}
.card.metric:nth-child(4n+3){background:linear-gradient(145deg,#fff,#fffaf0)}.card.metric:nth-child(4n+3):before{background:linear-gradient(90deg,#dba459,#f5d18e)}.card.metric:nth-child(4n+3) .v14-metric-icon{background:#fff0d9;color:#ae7931}
.card.metric:nth-child(4n+4){background:linear-gradient(145deg,#fff,#fcf5fd)}.card.metric:nth-child(4n+4):before{background:linear-gradient(90deg,#ae8bd8,#d9b7eb)}.card.metric:nth-child(4n+4) .v14-metric-icon{background:#f3eafa;color:#9367bc}
.metric small{color:#72829a;font-weight:750}.metric strong{font-size:clamp(27px,3vw,37px);color:#284767;margin:8px 0 6px;line-height:1.25;letter-spacing:.3px}.metric em{color:#8393a8}
.v14-metric-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#e5f7f1;color:#278b73;margin-bottom:12px;font-size:20px;box-shadow:inset 0 0 0 1px #ffffffb5}
.layout2{gap:18px}.heading{margin-bottom:20px}.heading h3{font-size:17px;color:#294967}.sub{color:#8190a3}
.data{border-collapse:separate;border-spacing:0 0}.data th{background:#f1f6fc;color:#536d8c;font-size:12px;font-weight:800;border-top:1px solid #e8eff9;border-bottom:1px solid #e8eff9}.data th:first-child{border-radius:0 12px 12px 0}.data th:last-child{border-radius:12px 0 0 12px}.data td{border-bottom:1px solid #eef2f8;color:#334c62}.data tbody tr:nth-child(even){background:#fbfcff}.data tbody tr:hover{background:#f1f9fb}.table-wrap{border-radius:14px;scrollbar-width:thin;scrollbar-color:#b4cde5 transparent}
.pill{background:#e5f7ed;color:#237855;font-weight:700}.pill.red{background:#ffebee;color:#b94e62}.pill.gold{background:#fff2d9;color:#99703a}
/* Forms, calls to action, actionable blocks */
input,select,textarea{border:1px solid #dce6f2;border-radius:12px;background:#fcfdff;min-height:43px;transition:border-color .2s,box-shadow .2s,background .2s;color:#253e57}
input:focus,select:focus,textarea:focus{border-color:#6cacba;background:#fff;box-shadow:0 0 0 4px #82cad629}
label{color:#536681;font-size:12px;font-weight:800}.btn{border-radius:12px;background:linear-gradient(115deg,#227e83,#2b9a94);box-shadow:0 7px 17px #1c858523;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;padding:11px 16px}
.btn:hover:not(:disabled){filter:brightness(1.035);transform:translateY(-2px);box-shadow:0 11px 22px #1c85852e}.btn.alt{background:#e8f5f6;color:#267b88;box-shadow:none}.btn.light{background:#fff;color:#397e90;border:1px solid #dfeaf3;box-shadow:none}.btn.danger{background:#fff0f1;color:#bf5566;box-shadow:none}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #94cbe6;outline-offset:2px}
.notice{background:#fffaf0;border-color:#f1e3c6;color:#8a7551}.inline-note{background:#eef8f8;border-right-color:#55a9a8;color:#476c77}.file-upload{border:2px dashed #a2c9d4;background:linear-gradient(135deg,#f9fdfd,#f3f8ff);border-radius:15px}.tab{border-radius:11px;background:#ebf1fa;color:#4b6381}.tab.active{background:#267e89;color:#fff}.report-card{border-radius:16px;background:linear-gradient(110deg,#fff,#fafcff);border-color:#e5eef6}
/* Quick action panel on dashboard; only permitted pages are rendered */
.v14-shortcuts{margin:0 0 25px}.v14-shortcut-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:0 3px}
.v14-shortcut-heading strong{color:#304d67;font-size:16px}.v14-shortcut-heading span{font-size:12px;color:#8a9aab}
.v14-shortcuts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.v14-shortcut{width:100%;text-align:right;display:flex;gap:13px;align-items:center;padding:16px 14px;background:#fff;border:1px solid #e6edf8;border-radius:19px;box-shadow:0 9px 25px #3c618a0a;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;color:#334b64;min-width:0}
.v14-shortcut:hover{transform:translateY(-4px);box-shadow:0 18px 30px #316b9530;border-color:#c8deef}.v14-shortcut:focus-visible{outline:3px solid #79b8dd;outline-offset:3px}
.v14-shortcut .v14-shortcut-icon{width:51px;height:51px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:24px;color:#26796e;background:#e6f5ee}
.v14-shortcut:nth-child(4n+2) .v14-shortcut-icon{background:#e9f2ff;color:#517dc2}.v14-shortcut:nth-child(4n+3) .v14-shortcut-icon{background:#fff2e2;color:#b47a32}.v14-shortcut:nth-child(4n+4) .v14-shortcut-icon{background:#f4eafb;color:#8d60c1}
.v14-shortcut strong{display:block;font-size:14px;font-weight:850}.v14-shortcut small{font-size:11px;color:#8494a6}.v14-shortcut .v14-shortcut-arrow{font-size:20px;color:#a1b3c8;margin-right:auto}
/* A small, non-intrusive palette selection in the header */
.v14-theme-tools{display:flex;gap:6px;align-items:center;padding:3px 7px;background:#f4f7fb;border:1px solid #e3eaf5;border-radius:999px}
.v14-theme-tools span{font-size:11px;color:#768ba3;margin-left:4px}
.v14-theme-btn{width:25px;height:25px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #d8e3ed;padding:0;flex:none;transition:transform .2s}
.v14-theme-btn:hover{transform:scale(1.13)}.v14-theme-btn[aria-pressed="true"]{box-shadow:0 0 0 2px #425972;border-color:#fff}
.v14-theme-btn[data-scheme="mint"]{background:linear-gradient(135deg,#147b78,#91d9b3)}.v14-theme-btn[data-scheme="ocean"]{background:linear-gradient(135deg,#316bb7,#a8d5f8)}.v14-theme-btn[data-scheme="plum"]{background:linear-gradient(135deg,#8469af,#cfade8)}
.v14-appear{animation:v14-enter .32s ease both}.v14-appear:nth-child(2){animation-delay:.04s}.v14-appear:nth-child(3){animation-delay:.07s}.v14-appear:nth-child(4){animation-delay:.10s}
@keyframes v14-enter{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}@keyframes v14-orbit{50%{transform:translate(12px,-9px) scale(1.04)}}@keyframes v14-logo{50%{transform:translateY(-6px);box-shadow:0 22px 68px rgba(58,110,109,.22)}}
/* Other modules */
.lp-hero{background:linear-gradient(110deg,#37638d,#328f9a,#87b7af);border-radius:22px;box-shadow:0 16px 34px #38699124}.lp-root{color:#263d5a}
.ag-toolbar{border-radius:17px}.ar-paper-logo b{color:#284b68}
/* Responsive: keep functional tables horizontally scrollable */
@media (max-width:1230px){.v14-shortcuts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v14-theme-tools span{display:none}}
@media(max-width:950px){.shell{grid-template-columns:245px minmax(0,1fr)}.sidebar{padding:18px 10px}.nav-btn{padding:8px}.content{padding:20px}.topbar{padding:14px 19px}}
@media(max-width:820px){.shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative;padding:12px 14px;background:linear-gradient(95deg,#204963,#1d7875)}.sidebar:before{height:85px}.side-brand{padding-bottom:11px}.nav-items{padding:7px 0}.nav-btn{width:auto;min-width:max-content;min-height:38px;padding:6px 9px}.nav-btn span{width:27px;height:27px;flex-basis:27px}.nav-title{display:none}.topbar{position:sticky;top:0}.side-bottom{display:none}.content{padding:17px}.v14-theme-tools{padding:2px 5px}}
@media(max-width:560px){.hero-strip{padding:22px 18px}.hero-strip .eyebrow{display:inline-block;margin-top:15px}.grid{gap:10px}.card.metric{min-height:150px}.card{padding:16px}.v14-shortcuts-grid{gap:9px}.v14-shortcut{padding:11px;gap:8px;border-radius:15px}.v14-shortcut .v14-shortcut-icon{width:39px;height:39px;border-radius:12px;font-size:21px}.v14-shortcut strong{font-size:12px}.v14-shortcut small{font-size:10px}.v14-shortcut .v14-shortcut-arrow{display:none}.topbar h2{font-size:15px}.user-chip{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v14-theme-tools span{display:none}.v14-theme-btn{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro:before,.intro:after,.intro .brandmark,.hero-strip:before,.v14-appear{animation:none!important}.card,.nav-btn,.btn,.v14-shortcut,.v14-theme-btn{transition:none!important}}
@media print{body{background:#fff!important;color:#111}.sidebar,.v14-theme-tools,.v14-shortcuts,.v14-shortcut-heading,.v14-theme-btn{display:none!important}.hero-strip{background:#fff!important;color:#173e47!important;border:0;box-shadow:none;min-height:0}.hero-strip p,.hero-strip h2,.hero-strip small{color:#173e47!important}.hero-strip:before,.hero-strip:after{display:none}.card,.card.metric,.lp-hero{background:#fff!important;box-shadow:none!important;animation:none!important;break-inside:avoid}.metric:before,.metric:after{display:none!important}.data th{color:#111;background:#eee!important}.v14-appear{animation:none!important}}
/* Fine-tuned metric composition and compact header */
@media(min-width:1350px){.grid:has(> .metric:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:820px){.topbar{position:relative;top:auto}}
/* Ensure the existing school-campus image is actually visible beneath the login content. */
.auth .auth-hero{isolation:isolate}
.auth .auth-photo{z-index:0;opacity:1;background:linear-gradient(105deg,rgba(12,47,61,.85),rgba(16,65,75,.62) 58%,rgba(12,49,61,.46)),url('school-campus-art.jpg') center 43% / cover no-repeat}
.auth .auth-photo:after{background:linear-gradient(105deg,rgba(12,47,61,.76),rgba(16,65,75,.55)),url('school-campus-detail.jpg') center / cover no-repeat}
.auth .auth-hero > :not(.auth-photo){position:relative;z-index:1}

.v14-shortcut{text-decoration:none;color:inherit}.v14-shortcut-icon svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}