:root{--dash-navy:#062a54;--dash-navy-deep:#031f42;--dash-blue:#126bfa;--dash-bg:#f5f8fd;--dash-border:#e5ebf3;--dash-text:#15213a;--dash-muted:#7d879b}
.portal-body{background:var(--dash-bg);color:var(--dash-text)}
.portal{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,#082f5d 0%,#031f42 100%);padding:18px 8px 14px;color:#fff;z-index:30;display:flex;flex-direction:column;box-shadow:none}
.sidebar .brand{height:52px;padding:0 13px;margin:0 0 8px;gap:11px;font-size:17px}.sidebar .brand-mark{width:43px;height:43px;border-radius:12px;background:transparent;box-shadow:none;transform:none;font-size:29px}.sidebar .brand small{color:#c2d1e3;font-size:9px;letter-spacing:0;margin-top:5px}.sidebar nav{display:flex;flex-direction:column;gap:3px;overflow-y:auto;padding:5px 0}.sidebar nav::-webkit-scrollbar{width:4px}.sidebar nav::-webkit-scrollbar-thumb{background:#ffffff2c;border-radius:9px}.sidebar nav a{min-height:40px;display:flex;align-items:center;color:#e3ecf8;padding:9px 13px;border-radius:7px;font-size:12px;font-weight:600;transition:.2s}.sidebar nav a>i:first-child{width:27px;font-size:15px}.sidebar nav a .nav-arrow{margin-left:auto;font-size:9px;opacity:.7}.sidebar nav a:hover,.sidebar nav a.active{color:#fff;background:#126bfa;box-shadow:0 6px 16px #0068ff4d}.sidebar-help{display:flex;align-items:center;gap:10px;margin:8px 4px;padding:11px;border:1px solid #ffffff12;border-radius:9px;background:#0c3c71}.sidebar-help>i{font-size:26px;color:#3e91ff}.sidebar-help strong,.sidebar-help small{display:block}.sidebar-help strong{font-size:11px}.sidebar-help small{font-size:9px;color:#afc6e0}.sidebar-user{margin:0 4px;padding:10px 12px;border-radius:9px;background:#ffffff0c}.sidebar-user strong{font-size:11px}.sidebar-user small,.sidebar-user a{display:block;color:#b8cce3;font-size:9px;margin-top:2px}.sidebar-user a{color:#fff;margin-top:5px}
.portal-main{margin-left:250px;min-height:100vh;background:var(--dash-bg)}.topbar{height:70px;padding:0 24px;display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--dash-border);box-shadow:0 2px 12px #2639540a;position:sticky;top:0;z-index:20}.icon-btn{display:none;border:0;background:transparent;color:#14213b;font-size:25px}.global-search{position:relative;margin:0 auto 0 0;display:flex;align-items:center;width:min(480px,38vw)}.global-search i{position:absolute;right:15px;color:#14213b}.global-search input{width:100%;height:44px;padding:0 44px 0 15px;border:1px solid #dfe5ee;border-radius:8px;outline:none;font-size:12px;background:#fff}.global-search input:focus{border-color:#2874f0;box-shadow:0 0 0 3px #2874f015}.session-chip{min-width:130px;border:1px solid #e4e9f0;border-radius:8px;padding:6px 30px 6px 12px;position:relative}.session-chip small,.session-chip strong{display:block}.session-chip small{font-size:8px;color:#6c7588}.session-chip strong{font-size:11px}.session-chip i{position:absolute;right:10px;top:13px;font-size:10px}.topbar-tool{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#13213b;position:relative}.topbar-tool:hover{background:#f1f5fb;color:#126bfa}.topbar-tool span{position:absolute;right:7px;top:6px;width:7px;height:7px;border-radius:50%;background:#ef476f;border:1px solid #fff}.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ffbd59,#ef8b3d);color:white;display:grid;place-items:center;font-weight:800}.topbar-user{min-width:95px}.topbar-user strong,.topbar-user small{display:block}.topbar-user strong{font-size:11px}.topbar-user small{font-size:9px;color:#7d879b}.topbar-tool.signout{width:30px}.content{padding:22px 20px 10px;max-width:1640px;margin:auto}
.dashboard-page section{padding:0}
.dashboard-heading{display:none;justify-content:space-between;align-items:end;margin-bottom:16px}.dashboard-heading span,.dashboard-heading small{color:var(--dash-muted);font-size:11px}.dashboard-heading h1{font-size:22px;font-weight:800;margin:2px 0 0}.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-bottom:20px}.kpi-card{height:141px;border-radius:12px;padding:20px 15px;color:#fff;position:relative;overflow:hidden;display:flex;align-items:flex-start;box-shadow:0 8px 16px #2a4a7418}.kpi-blue{background:linear-gradient(135deg,#1763e9,#7165ea)}.kpi-green{background:linear-gradient(135deg,#05a877,#61ca9c)}.kpi-orange{background:linear-gradient(135deg,#f79400,#ffbd4f)}.kpi-pink{background:linear-gradient(135deg,#ba2ca2,#f04e89)}.kpi-cyan{background:linear-gradient(135deg,#1187d4,#48a8ed)}.kpi-card small,.kpi-card strong,.kpi-card span{display:block;position:relative;z-index:2}.kpi-card small{font-size:11px;font-weight:600;margin-bottom:7px}.kpi-card strong{font-size:20px;line-height:1.1}.kpi-card span{font-size:9px;margin-top:8px}.kpi-icon{position:absolute;right:14px;top:21px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:inherit;background:#fff;font-size:21px;box-shadow:0 5px 11px #0002}.kpi-blue .kpi-icon{color:#3567ed}.kpi-green .kpi-icon{color:#0caa79}.kpi-orange .kpi-icon{color:#f29400}.kpi-pink .kpi-icon{color:#d5388c}.spark{position:absolute;inset:auto 0 0;height:35px;display:flex;align-items:end;gap:3px;opacity:.32}.spark i{height:40%;flex:1;background:#fff;clip-path:polygon(0 75%,100% 30%,100% 100%,0 100%)}.spark i:nth-child(2){height:65%}.spark i:nth-child(3){height:48%}.spark i:nth-child(4){height:80%}.spark i:nth-child(5){height:55%}.spark i:nth-child(6){height:88%}.ring{--p:50;position:absolute;right:14px;top:26px;width:67px;height:67px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#fff calc(var(--p)*1%),#ffffff50 0)}.ring:after{content:'';position:absolute;width:51px;height:51px;background:#2b99df;border-radius:50%}.ring b{position:relative;z-index:2;font-size:14px}
.dashboard-grid{display:grid;gap:18px;margin-bottom:18px}.top-grid{grid-template-columns:1.25fr 1fr 1.05fr}.bottom-grid{grid-template-columns:.95fr 1.12fr 1fr}.dash-panel{background:#fff;border:1px solid var(--dash-border);border-radius:10px;padding:16px;box-shadow:0 5px 18px #3047690a;min-width:0}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;min-height:28px}.panel-head>span,.panel-head>div>span{font-size:12px;font-weight:800}.panel-head>a{font-size:9px;color:#126bfa;padding:5px 8px;border-radius:6px;background:#f7faff}.legend{font-size:8px;color:#687389;margin-top:10px}.legend i{width:7px;height:7px;border-radius:50%;display:inline-block;margin:0 3px 0 12px}.legend i:first-child{margin-left:0}.legend .green{background:#36b96e}.legend .orange{background:#f7991c}.chart-wrap{height:196px;margin-top:10px}.attendance-body{height:220px;display:flex;align-items:center;justify-content:center;gap:22px}.donut{width:155px;height:155px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#4dc37a calc(var(--present)*1%),#ef476f 0 calc((var(--present) + 8)*1%),#ffad32 0);position:relative}.donut:after{content:'';position:absolute;width:106px;height:106px;border-radius:50%;background:#fff}.donut div{z-index:2;text-align:center}.donut strong,.donut small{display:block}.donut strong{font-size:20px}.donut small{font-size:9px;color:#7e8798}.attendance-body ul{list-style:none;padding:0;margin:0;display:grid;gap:15px}.attendance-body li{display:flex;gap:9px;align-items:flex-start;font-size:9px}.attendance-body li>i{width:10px;height:10px;border-radius:50%;margin-top:2px}.attendance-body li i.present{background:#4dc37a}.attendance-body li i.absent{background:#ef476f}.attendance-body li i.late{background:#ffad32}.attendance-body li span,.attendance-body li small{display:block}.attendance-body li small{color:#8992a4;margin-top:3px}.notice-list{display:grid;margin-top:10px}.notice-list>a{display:grid;grid-template-columns:39px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:49px;border-bottom:1px solid #edf0f5;color:#17213b;position:relative}.notice-list>a:before{content:'';width:3px;height:34px;border-radius:4px;background:#ef476f;position:absolute;left:-10px}.notice-list>a:nth-child(2):before{background:#2874f0}.notice-list>a:nth-child(3):before{background:#ff9c24}.notice-list>a:nth-child(4):before{background:#c13dc4}.notice-list time{background:#f3f5f8;border-radius:6px;text-align:center;padding:5px;font-size:7px;color:#687389}.notice-list time strong{display:block;font-size:12px;color:#1c273c}.notice-list span{min-width:0}.notice-list span strong,.notice-list span small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notice-list span strong{font-size:9px}.notice-list span small{font-size:8px;color:#7f899d;margin-top:4px}.notice-list em{font-style:normal;font-size:7px;color:#8491a7}.empty-state{height:180px;display:grid;place-items:center;align-content:center;color:#96a0b1;font-size:11px}.empty-state i{font-size:25px}.class-body{height:220px;display:flex;align-items:center;justify-content:center;gap:18px}.class-donut{width:130px;height:130px;border-radius:50%;background:conic-gradient(#2f6bff 0 17%,#4bc087 17% 34%,#ffad32 34% 51%,#8b55e9 51% 68%,#f34e7a 68% 84%,#27a7bd 84%);display:grid;place-items:center;align-content:center;position:relative}.class-donut:after{content:'';position:absolute;width:83px;height:83px;border-radius:50%;background:#fff}.class-donut strong,.class-donut small{z-index:2}.class-donut strong{font-size:17px}.class-donut small{font-size:8px;color:#7d879b}.class-body ul{list-style:none;padding:0;margin:0;min-width:125px;display:grid;gap:8px}.class-body li{display:grid;grid-template-columns:8px 1fr auto;gap:7px;align-items:center;font-size:8px}.class-body li i{width:7px;height:7px;border-radius:50%}.class-body li strong{font-size:8px}.income-totals{display:flex;margin:12px 0 0}.income-totals>div{width:50%}.income-totals small,.income-totals strong{display:block}.income-totals small{font-size:8px;color:#7f899d}.income-totals strong{font-size:14px;margin-top:4px}.income-totals .income{color:#16a34a}.income-totals .expense{color:#ef334f}.income-panel .chart-wrap{height:160px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}.quick-grid a{min-height:85px;border:1px solid #e8ecf2;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#253047;gap:8px;font-size:8px;text-align:center;transition:.2s}.quick-grid a:hover{transform:translateY(-3px);box-shadow:0 8px 18px #3d537119}.quick-grid i{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:16px}.blue{background:#2874f0}.green{background:#18a979}.orange{background:#ff9c24}.purple{background:#924be0}.pink{background:#ef4c86}.cyan{background:#24a7b7}.whatsapp-green{background:#16b43b}
.mini-stats{background:#fff;border:1px solid var(--dash-border);border-radius:10px;min-height:70px;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;padding:10px 16px}.mini-stats>div{display:flex;align-items:center;gap:10px;padding:0 12px;border-right:1px solid #edf0f4}.mini-stats>div:last-child{border:0}.mini-stats i{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;color:#fff;font-size:17px}.mini-stats span,.mini-stats strong{display:block}.mini-stats span{font-size:8px;color:#7c879a}.mini-stats strong{font-size:13px;color:#1c273c;margin-top:3px}.dashboard-footer{min-height:52px;display:flex;justify-content:space-between;align-items:center;color:#7f8999;font-size:8px}.dashboard-reveal{animation:dashboardReveal .55s ease both}.dashboard-reveal:nth-child(2){animation-delay:.06s}.dashboard-reveal:nth-child(3){animation-delay:.12s}.dashboard-reveal:nth-child(4){animation-delay:.18s}.dashboard-reveal:nth-child(5){animation-delay:.24s}@keyframes dashboardReveal{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@media(max-width:1350px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.top-grid,.bottom-grid{grid-template-columns:repeat(2,1fr)}.notice-panel,.quick-panel{grid-column:span 2}.mini-stats{grid-template-columns:repeat(3,1fr);gap:12px}.mini-stats>div:nth-child(3){border:0}}
@media(max-width:991px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.portal-main{margin-left:0}.icon-btn{display:grid;place-items:center}.global-search{width:min(420px,48vw)}.topbar-user,.session-chip{display:none}.content{padding:16px}.dashboard-heading{display:flex}}
@media(max-width:767px){.topbar{padding:0 12px;height:62px}.global-search{width:auto;flex:1}.topbar-tool{display:none}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:12px}.kpi-card{height:128px}.kpi-card:last-child{grid-column:span 2}.top-grid,.bottom-grid{grid-template-columns:1fr}.notice-panel,.quick-panel{grid-column:auto}.mini-stats{grid-template-columns:repeat(2,1fr)}.mini-stats>div{border:0}.dashboard-footer{gap:10px;flex-direction:column;align-items:flex-start;padding:15px 0}.dashboard-heading{display:flex}.attendance-body{gap:12px}.donut{width:135px;height:135px}.donut:after{width:91px;height:91px}}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr}.kpi-card:last-child{grid-column:auto}.quick-grid{grid-template-columns:repeat(2,1fr)}.mini-stats{grid-template-columns:1fr}.class-body{flex-direction:column;height:auto;padding-top:15px}.notice-list em{display:none}}
@media(prefers-reduced-motion:reduce){.dashboard-reveal,.quick-grid a{animation:none;transition:none}}
@media print{.sidebar,.topbar,.dashboard-footer{display:none!important}.portal-main{margin:0}.content{padding:0}.dash-panel,.kpi-card,.mini-stats{box-shadow:none;break-inside:avoid}}