/* Copyright (c) 2026 Anojed. All rights reserved.
PROPRIETARY AND CONFIDENTIAL.
No copying, distribution, redistribution, sublicensing, resale or publication without prior written approval from Anojed.
Designed and Developed by Anojed. */
:root{font-family:Inter,'Segoe UI',Arial,sans-serif;color:#071d49;background:#f2f8ff;font-size:14px}body{background:radial-gradient(ellipse at 90% 8%,#e3f4ff,transparent 70%),#f2f8ff}small{display:block;color:#5673a2;font-size:12px;line-height:1.6}h2{font-size:17px;letter-spacing:-.4px}button,.btn{background:linear-gradient(145deg,#128cff,#0050ef);box-shadow:0 4px 9px #0866f525;border:1px solid #ffffff40;transition:transform .2s}.premium-top{height:76px;background:#ffffffed;display:flex;align-items:center;gap:22px;padding:10px 24px;position:sticky;top:0;z-index:30;border-bottom:1px solid #e1eeff;backdrop-filter:blur(15px)}.brand{width:227px;flex-shrink:0;position:relative;line-height:1.1;color:#073a91;letter-spacing:-1px;font-size:27px}.brand small{font-size:12px;font-weight:400;margin:4px 0 0 37px;letter-spacing:0}.brand-mark{font-size:34px;color:#0866f5;text-shadow:2px 3px 1px #aacaff}.drawer-toggle{background:none;color:#0866f5;box-shadow:none;font-size:21px;padding:7px}.global-search{display:flex;max-width:570px;flex:1;position:relative}.global-search input{margin:0;padding-right:48px;background:#f9fbff}.global-search button{position:absolute;right:4px;top:4px;padding:4px 10px;box-shadow:none;background:none;color:#0866f5;font-size:22px}.account{margin-left:auto;position:relative}.account summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-weight:650}.account form{position:absolute;right:0;top:55px;background:#fff;padding:16px;border-radius:12px;box-shadow:0 10px 40px #073a9125}.avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,#e2f2ff,#9ec5fa);color:#073a91;font-weight:750;box-shadow:inset 0 1px 2px #fff,0 3px 8px #073a9112}.avatar.large{width:72px;height:80px;border-radius:18px;font-size:26px}.sidebar{width:258px;position:fixed;left:0;top:76px;bottom:0;background:linear-gradient(135deg,#fff,#edf6ff);border-right:1px solid #e4efff;z-index:25;display:flex;flex-direction:column;overflow:auto}.sidebar nav{display:flex;flex-direction:column;align-items:stretch;padding:20px 12px;gap:6px}.sidebar nav a{display:flex;align-items:center;gap:16px;border-radius:11px;padding:13px 17px;color:#113768;min-height:45px}.sidebar nav a span{font-size:21px;width:23px;text-align:center}.sidebar nav a.active,.sidebar nav a:hover{color:#fff;background:linear-gradient(115deg,#0058fa,#176bff);box-shadow:0 5px 10px #0866f519}.sidebar hr{border:0;border-top:1px solid #dce8fa;width:90%;margin:16px auto}.sidebar-bottom{margin-top:auto;text-align:center;padding-bottom:20px;color:#5673a2;font-size:12px}.sidebar-bottom img{width:100%;height:145px;object-fit:contain}.sidebar-bottom b{font-size:24px;color:#0866f5}.sidebar-bottom p{margin:8px}.premium-main{margin-left:258px;padding:12px 20px 0;max-width:1900px;min-width:0}.premium-hero{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(110deg,#073a91,#0866f5 60%,#073a91);min-height:145px;display:flex;align-items:center;justify-content:space-between;padding:22px 32px;margin-bottom:15px;color:white;box-shadow:inset 0 1px 0 #ffffff55,0 6px 20px #0866f517}.premium-hero:after{content:'';position:absolute;width:350px;height:350px;border-radius:80px;background:#ffffff08;transform:rotate(40deg);left:35%;top:-240px;pointer-events:none}.premium-hero>div{z-index:2;max-width:65%;text-shadow:0 1px 4px #003480}.premium-hero h1{font-size:clamp(24px,2.3vw,36px);letter-spacing:-1px;margin:5px 0 9px}.premium-hero p{margin:4px 0;line-height:1.5}.premium-hero .eyebrow{font-size:12px;letter-spacing:.4px;opacity:.8}.premium-hero img{position:absolute;right:0;bottom:-5px;width:40%;height:175px;object-fit:contain;opacity:.85}.premium-hero>.btn{z-index:2;white-space:nowrap}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.kpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}.kpis.five{grid-template-columns:repeat(5,minmax(0,1fr))}.kpi{position:relative;display:flex;gap:18px;align-items:center;background:linear-gradient(120deg,#fff,#ffffffdd);border:1px solid #d7e8ff;border-radius:19px;box-shadow:0 5px 9px #0866f50c,inset 0 2px 0 #fff;min-height:100px;padding:18px;overflow:hidden}.kpi p{margin:0 0 5px;font-size:13px;font-weight:600}.kpi strong{font-size:31px;font-weight:800;line-height:1.1}.kpi>div{z-index:1}.icon-tile{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:57px;height:59px;border-radius:17px;color:#fff;font-size:30px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent,#0866f5),white 20%),var(--accent,#0866f5));box-shadow:inset 0 2px 1px #ffffff70,inset 0 -3px 1px #00408818,0 7px 14px color-mix(in srgb,var(--accent,#0866f5),transparent 80%);border:1px solid #ffffffb3}.spark{position:absolute;right:5px;bottom:4px;width:85px;color:var(--accent);opacity:.13}.panel{background:linear-gradient(140deg,#fff,#ffffffb8);border:1px solid #d6e7fc;border-radius:18px;padding:19px;box-shadow:0 12px 30px #0866f508;margin-bottom:15px;min-width:0}.chart-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px}.panel h2{margin:0 0 20px}.panel h2 a{float:right;font-size:12px;font-weight:500}.panel h2 small{display:inline;font-size:11px;float:right;font-weight:400}.bars{display:flex;align-items:flex-end;justify-content:space-around;height:180px;gap:10px;padding:12px 7px 0;border-bottom:1px solid #dbe7f8;background:repeating-linear-gradient(to top,transparent 0 39px,#eaf1fb 40px 41px)}.bars>div{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}.bars b{font-size:12px}.bars span{width:100%;max-width:40px;min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(#0871ff,#8fc2ff);box-shadow:inset 0 2px 1px #ffffff55;transform-origin:bottom;animation:grow .7s ease-out}.bars small{background:white;width:100%;text-align:center}.ring-row{display:flex;align-items:center;justify-content:space-around;gap:14px;min-height:175px}.ring{background:var(--ring,#edf3fa);border-radius:50%;width:138px;height:138px;flex-shrink:0;padding:13px;box-shadow:inset 2px 2px 6px #073a9115;animation:fade .6s}.ring>div{background:linear-gradient(145deg,#fff,#f2f8ff);height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 5px #073a9114}.ring strong{font-size:27px}.ring-row p{font-size:12px;border-bottom:1px solid #e6effb;padding:7px 0;margin:0}.ring-row p b{margin-left:14px}.dot{display:inline-block;width:10px;height:10px;background:#0866f5;border-radius:50%;margin-right:7px}.dot.green{background:#08bd82}.dot.amber{background:#ff9b16}.legend{max-height:170px;overflow:auto}.quick-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.quick-actions .panel{display:flex;align-items:center;gap:10px;padding:12px;font-size:12px;font-weight:650;transition:.2s}.quick-actions .icon-tile{width:42px;height:48px;font-size:25px}.purple{--accent:#843cf6}.green{--accent:#08bd82}.lower-grid{display:grid;grid-template-columns:1.2fr 1.1fr 1fr;gap:14px}.record{display:flex;align-items:center;gap:10px;padding:12px 0;color:#071d49;font-size:12px}.record>span:nth-child(2){flex:1;min-width:0}.record small{font-size:11px}.mini-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:linear-gradient(135deg,#80caff,#0866f5);color:white;border-radius:50%;font-size:20px;flex-shrink:0;box-shadow:0 4px 8px #0866f51c}.badge{display:inline-block;padding:4px 10px;border-radius:20px;background:#edf3fc;color:#5673a2;font-size:11px;white-space:nowrap}.badge.good{background:#d6f9ec;color:#00814f}.badge.warning{background:#fff0d3;color:#a65c00}.register{padding:0 18px 15px}.tabs{display:flex;align-items:center;gap:8px;border-bottom:1px solid #e2edfc;margin:0 -18px;padding:0 16px;overflow-x:auto}.tabs>a{padding:19px 12px;color:#426197;white-space:nowrap;border-bottom:3px solid transparent;font-weight:550}.tabs>a.selected{border-color:#0866f5;color:#0058f5}.tabs .tab-action{margin-left:auto;font-size:12px;color:#0866f5}.filters{display:flex;gap:10px;align-items:center;padding:15px 0;flex-wrap:wrap}.filters input,.filters select{width:auto;min-width:0;margin:0}.filters>input:not([type=hidden]){flex:1;min-width:180px}.filters label{font-size:11px}.filters label input{display:block;padding:7px}.filters button{padding:10px 18px}table{font-size:12px}thead{background:linear-gradient(110deg,#f3f8ff,#eaf3ff)}th{color:#163b70;font-size:11px;font-weight:650}td,th{padding:12px 10px;border-color:#eaf1fb}.person{display:flex;align-items:center;gap:12px;color:#071d49}.person .avatar{width:38px;height:38px}.person .avatar.large{width:72px;height:80px}.action{display:inline-block;background:#f0f6ff;border:1px solid #dceaff;color:#075bf0;padding:7px 9px;border-radius:9px;font-size:11px;white-space:nowrap;margin:2px}.action:hover,.action.chosen{background:#0866f5;color:#fff}.directory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.profile-card{background:linear-gradient(145deg,#fff,#f7fbff);border:1px solid #cbdfff;border-radius:17px;padding:15px;overflow-wrap:anywhere;transition:transform .2s,box-shadow .2s}.profile-card:hover,.quick-actions .panel:hover,.kpi:hover{transform:translateY(-3px);box-shadow:0 12px 24px #0866f51a}.list-view{display:block}.list-view .profile-card{display:flex;gap:20px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.list-view .profile-card .person{flex:1}.list-view .avatar.large{width:42px;height:42px;font-size:17px}.appeal-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px}.appeal-details .panel{padding:15px;box-shadow:none;background:#fbfdff}.appeal-details h2{font-size:15px}.appeal-details h2 .badge{float:right;font-weight:400}.appeal-details dl{font-size:12px}.appeal-details dt{color:#073a91;margin-top:17px;font-weight:650}.appeal-details dd{margin:5px 0;color:#5673a2;line-height:1.6}.reason{white-space:pre-wrap;overflow-wrap:anywhere;max-height:250px;overflow:auto}.empty{padding:20px 4px;text-align:center;color:#617da2;font-size:13px}.data-note{font-size:11px;color:#617da2;line-height:1.7}.management summary{cursor:pointer;font-weight:650;color:#073a91}.management .grid{margin-top:20px}.management .card{box-shadow:none;border-radius:12px}.pagination{padding:18px 0 0}.pagination nav{display:block}.pagination svg{width:18px;height:18px}.pagination .hidden{display:none}.pagination a,.pagination span[aria-current]{display:inline-block;padding:7px 11px;background:#edf5ff;border:1px solid #d6e6fb;border-radius:8px;margin:3px}.premium-main footer{text-align:center;padding:22px 0;font-size:11px;color:#5673a2}.drawer-shade{position:fixed;inset:76px 0 0;background:#071d4966;z-index:24;border-radius:0}.drawer-shade[hidden]{display:none}:focus-visible{outline:3px solid #ff9b16;outline-offset:3px}@keyframes grow{from{transform:scaleY(.05)}to{transform:scaleY(1)}}@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.panel,.kpi{animation:fade .45s ease-out}@media(min-width:1101px){.nav-collapsed .sidebar{display:none}.nav-collapsed .premium-main{margin-left:0}}@media(max-width:1400px){.ring-row{flex-wrap:wrap}.ring{width:120px;height:120px}.directory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.kpis.five .kpi{padding:12px;gap:8px}.kpis.five .icon-tile{width:40px;height:47px;font-size:25px}.quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1100px){.sidebar{transform:translateX(-100%);transition:transform .2s}.nav-open .sidebar{transform:none}.premium-main{margin-left:0}.premium-top{padding:10px 15px}.brand{width:210px}.chart-grid{grid-template-columns:1.3fr 1fr}.chart-grid>.panel:last-child{grid-column:1/-1}.chart-grid>.panel:last-child .ring-row{justify-content:flex-start;gap:30px}.kpi{gap:10px;padding:13px}.kpi strong{font-size:27px}.lower-grid{grid-template-columns:1fr 1fr}.lower-grid>.panel:last-child{grid-column:1/-1}}@media(max-width:760px){.premium-top{gap:10px;height:68px}.brand{font-size:22px;width:auto;flex:1}.brand small{font-size:10px;margin-left:30px}.brand-mark{font-size:27px}.global-search{display:none}.account summary>span:nth-child(2){display:none}.sidebar{top:68px}.drawer-shade{top:68px}.premium-main{padding:12px}.premium-hero{padding:20px;min-height:155px;align-items:flex-start;flex-direction:column;gap:14px}.premium-hero>div{max-width:83%}.premium-hero img{width:45%;opacity:.35}.premium-hero p{font-size:12px}.premium-hero .btn{font-size:11px}.kpis,.kpis.five,.kpis.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.kpi{min-height:90px;padding:12px;gap:9px}.icon-tile{width:42px;height:47px;font-size:25px;border-radius:14px}.kpi strong{font-size:27px}.kpi p{font-size:11px}.chart-grid,.lower-grid{grid-template-columns:1fr}.chart-grid>.panel:last-child,.lower-grid>.panel:last-child{grid-column:auto}.ring-row{justify-content:center}.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-actions .panel{font-size:11px}.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-card .person{display:block}.profile-card .person .avatar{margin-bottom:10px}.appeal-layout{grid-template-columns:1fr}.appeal-details{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tabs>a{font-size:12px;padding:16px 8px}.tabs .tab-action{margin-left:0}.filters{gap:8px}.filters button{font-size:12px}.filters>input:not([type=hidden]){flex-basis:100%}.register{padding:0 12px 12px}.register .tabs{margin:0 -12px}.panel{padding:16px}.scroll{max-width:100%}.scroll table{min-width:690px}.management .grid{grid-template-columns:1fr}.appeal-details .panel{overflow:hidden}.sidebar-bottom img{height:100px}}@media(max-width:420px){.directory-grid,.appeal-details{grid-template-columns:1fr}.profile-card .person{display:flex}.kpi strong{font-size:24px}.kpi .icon-tile{width:34px;height:41px;font-size:22px}.quick-actions .icon-tile{width:30px;font-size:20px}.premium-main{padding:9px}.premium-hero h1{font-size:26px}.brand{font-size:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.premium-hero{background-image:linear-gradient(90deg,#0643a8 0%,#0866f5c9 40%,#073a9120 67%),url('../images/school-community.png');background-size:cover;background-position:center 47%}.premium-hero>img{display:none}@media(max-width:760px){.premium-hero{background-position:65% 40%;background-image:linear-gradient(90deg,#0643a8f2,#0866f5bb 60%,#073a9166),url('../images/school-community.png')}}
.ui-icon{width:24px;height:24px;display:inline-block;vertical-align:middle}.icon-tile .ui-icon{width:29px;height:29px}.brand-mark .ui-icon{width:33px;height:33px;stroke-width:2.2}.sidebar nav a>span{display:flex;align-items:center;justify-content:center}.notification-link{position:relative;margin-left:auto;color:#073a91}.notification-link b{position:absolute;right:-6px;top:-6px;border:2px solid #fff;background:#f53d58;color:white;border-radius:20px;padding:1px 4px;font-size:9px}.account{margin-left:0}.kpi:after{content:'';position:absolute;right:-20px;bottom:-35px;width:110px;height:100px;border-radius:45%;background:var(--accent);opacity:.06;transform:rotate(-30deg)}.brand-mark{display:inline-flex;vertical-align:middle}.brand{white-space:nowrap}@media(max-width:760px){.notification-link{display:none}}
.brand .brand-mark{color:#0866f5}.premium-hero{background-repeat:no-repeat;background-size:cover,auto 350px;background-position:center,right 44%}@media(max-width:760px){.premium-hero{background-size:cover,auto 260px;background-position:center,right center}}
.appeal-layout>div,.appeal-details{min-width:0}.appeal-details .person{flex-wrap:wrap}.appeal-details .badge{max-width:100%;white-space:normal}@media(max-width:760px){.appeal-layout{grid-template-columns:minmax(0,1fr)}}
.premium-hero{background:linear-gradient(110deg,#073a91,#0866f5 65%,#073a91)}.premium-hero:before{content:'';position:absolute;inset:0 0 0 auto;width:min(60%,600px);background:url('../images/school-community.png') no-repeat right 44%/auto 350px;mask-image:linear-gradient(to right,transparent,#000 40%);pointer-events:none}@media(max-width:760px){.premium-hero:before{width:100%;background-size:auto 280px;background-position:right center;opacity:.45;mask-image:linear-gradient(to right,transparent,#000 45%)}}