@import "https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap";:root{color:#081d45;font-synthesis:none;background:#f7fbff;font-family:Noto Kufi Arabic,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}.eyebrow{color:#087cf0;margin:0 0 8px;font-size:13px;font-weight:700}.primary-button,.secondary-button{border:1px solid #087cf0;min-height:48px;padding:0 22px;font-weight:700}.primary-button{color:#fff;background:#087cf0}.primary-button:hover{background:#0469d0}.primary-button:disabled{opacity:.55;cursor:wait}.secondary-button{color:#087cf0;background:#fff}.login-shell{background:#fff;grid-template-columns:1.08fr .92fr;min-height:100vh;display:grid}.login-copy{background:linear-gradient(90deg,#0000 0 94%,#cfe8ff 94% 95%,#0000 95%),#eef8ff;flex-direction:column;justify-content:center;padding:clamp(48px,9vw,140px);display:flex}.brand-logo{object-fit:contain;width:min(430px,100%);height:auto;margin-bottom:42px}.login-copy h1{max-width:680px;margin:0;font-size:clamp(35px,4.8vw,72px);line-height:1.45}.login-copy>p:last-child{color:#49617f;max-width:620px;font-size:18px;line-height:2}.login-card{gap:22px;width:min(470px,100% - 48px);margin:auto;display:grid}.login-card h2{margin:0;font-size:34px}.login-card label,.student-form label{color:#284466;gap:9px;font-size:14px;font-weight:600;display:grid}.input-wrap{background:#fff;border:1px solid #b8d7f6;align-items:center;gap:10px;min-height:50px;padding:0 14px;display:flex}.input-wrap input{flex:1;min-width:0;border:0!important;padding:0!important}input,textarea{color:#081d45;background:#fff;border:1px solid #b8d7f6;outline:none;width:100%;padding:13px 14px}input:focus,textarea:focus,.input-wrap:focus-within{border-color:#087cf0;box-shadow:0 0 0 3px #dff0ff}.form-error{color:#a31d25;background:#fff1f2;border-right:3px solid #d52d38;padding:12px}.screen-loader,.state-message{text-align:center;color:#49617f;padding:80px 20px}.dashboard-shell{grid-template-columns:245px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{color:#fff;background:#071d45;flex-direction:column;height:100vh;padding:28px 20px;display:flex;position:sticky;top:0}.sidebar-brand{align-items:center;gap:14px;margin-bottom:48px;display:flex}.sidebar-brand>img{object-fit:contain;background:#fff;width:48px;height:48px}.sidebar-brand div{display:grid}.sidebar-brand strong{font-size:24px}.sidebar-brand small{color:#aacaef}.sidebar nav{gap:8px;display:grid}.sidebar a,.logout-button{color:#c8daf2;background:0 0;border:0;align-items:center;gap:12px;min-height:48px;padding:0 14px;text-decoration:none;display:flex}.active-nav{color:#fff!important;background:#0c3d79!important;border-right:3px solid #4eb0ff!important}.logout-button{width:100%;margin-top:auto}.dashboard-content{padding:40px clamp(24px,5vw,72px) 80px;overflow:hidden}.dashboard-header{justify-content:space-between;align-items:center;gap:24px;display:flex}.dashboard-header h1{margin:0;font-size:40px}.dashboard-header p:last-child{color:#5a6f8b}.add-button{align-items:center;gap:9px;display:flex}.metrics{grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0;display:grid}.metrics article{background:#fff;border:1px solid #d3e7fb;align-items:center;gap:16px;min-height:110px;padding:22px;display:flex}.metrics article div{display:grid}.metrics strong{font-size:28px}.metrics span:last-child{color:#60758f}.blue-icon{color:#087cf0;background:#eaf5ff;place-items:center;width:46px;height:46px;display:grid}.table-panel{background:#fff;border:1px solid #d3e7fb}.table-toolbar{border-bottom:1px solid #d3e7fb;justify-content:space-between;align-items:center;gap:20px;padding:24px;display:flex}.table-toolbar h2{margin:0}.table-toolbar p{color:#60758f;margin:5px 0 0;font-size:13px}.search-box{border:1px solid #b8d7f6;align-items:center;gap:10px;min-width:290px;padding:0 12px;display:flex}.search-box input{border:0}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:right;border-bottom:1px solid #e2eef9;padding:18px 24px}th{color:#49617f;background:#f9fcff;font-size:13px}td strong,td small{display:block}td small{color:#71849d;margin-top:4px}.status{align-items:center;padding:5px 10px;font-size:12px;font-weight:700;display:inline-flex}.status-active{color:#176544;background:#e5f7ef}.status-disabled{color:#a31d25;background:#fff0f1}.status-expired{color:#5a6472;background:#edf1f5}.table-action{color:#087cf0;background:0 0;border:0;font-weight:700}.dialog-backdrop{z-index:20;background:#041530a8;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.dialog{background:#fff;border-top:5px solid #168df6;width:min(820px,100%);max-height:calc(100vh - 48px);padding:34px;position:relative;overflow:auto}.dialog-close{position:absolute;top:18px;left:18px}.icon-button{color:#0a4388;background:#edf6ff;border:0;place-items:center;width:40px;height:40px;display:grid}.dialog-heading{align-items:flex-start;gap:16px;margin-bottom:28px;display:flex}.dialog-heading h2{margin:0;font-size:28px}.dialog-heading p:last-child{color:#60758f;margin-bottom:0}.student-form{grid-template-columns:1fr 1fr;gap:18px;display:grid}.wide-field{grid-column:1/-1}.dialog-actions{justify-content:flex-start;gap:12px;padding-top:8px;display:flex}@media (width<=900px){.login-shell{grid-template-columns:1fr}.login-copy{min-height:42vh;padding:48px 28px}.brand-mark{margin-bottom:24px}.login-copy h1{font-size:38px}.login-card{margin:52px auto}.dashboard-shell{grid-template-columns:1fr}.sidebar{flex-direction:row;align-items:center;height:auto;padding:14px 18px;position:static}.sidebar-brand{margin:0}.sidebar-brand small,.sidebar nav{display:none}.logout-button{width:auto;margin:0 0 0 auto}.metrics{grid-template-columns:1fr}.table-toolbar{flex-direction:column;align-items:stretch}.search-box{min-width:0}}@media (width<=600px){.dashboard-content{padding:28px 16px 64px}.dashboard-header{flex-direction:column;align-items:stretch}.dashboard-header h1{font-size:32px}.metrics{gap:10px;margin:24px 0}.student-form{grid-template-columns:1fr}.wide-field{grid-column:auto}.dialog{padding:28px 18px}}