/* ==========================================================================
   Portal — role dashboards (school, district, state, central, committee, government, education)
   ========================================================================== */
.app{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh;background:var(--bg)}
.side{background:var(--side-bg);color:var(--side-text);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:60;border-right:1px solid var(--side-line)}
.side .brand{display:flex;align-items:center;gap:12px;padding:18px 18px 12px;color:#fff;text-decoration:none!important}
.side .brand b{color:#fff;font-family:var(--font-serif);font-size:1.12rem;letter-spacing:-.01em;line-height:1.1;display:block}
.side .brand small{font-size:.68rem;color:var(--side-dim);display:block;margin-top:2px;line-height:1.25}
.side .who{margin:4px 12px 6px;padding:11px 12px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid var(--side-line);font-size:.78rem;line-height:1.35}
.side .who .r{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff;font-size:.8rem}
.side .who .r::before{content:"";width:7px;height:7px;border-radius:50%;background:#5EE0B0}
.side .who .s{color:var(--side-dim);margin-top:2px}
.side nav{flex:1;overflow:auto;padding:4px 10px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.nav-group{font-size:.7rem;font-weight:650;color:var(--side-dim);padding:16px 12px 6px;letter-spacing:.01em}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--side-text);font-weight:550;font-size:.865rem;position:relative;text-decoration:none!important;transition:background .12s}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.on{background:var(--side-active);color:#fff}
.nav-item.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.nav-item .icon{opacity:.85} .nav-item.on .icon{opacity:1}
.nav-item .count{margin-left:auto}
.side .foot{padding:12px;border-top:1px solid var(--side-line);display:flex;flex-direction:column;gap:2px}
.side .foot .nav-item{font-size:.82rem;padding:8px 12px}
.side .demo-note{font-size:.68rem;color:var(--side-dim);padding:6px 12px 2px;line-height:1.35}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:50;height:62px;display:flex;align-items:center;gap:14px;padding:0 28px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top-search{position:relative;flex:1;max-width:480px}
.top-search .input{height:38px;background:var(--surface);padding-left:38px;padding-right:44px}
.top-search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 .68rem var(--font-sans);color:var(--text-3);border:1px solid var(--line-strong);border-radius:5px;padding:1px 6px;background:var(--surface-2)}
.top-search>.icon{position:absolute;left:12px;top:10px;color:var(--text-3)}
.search-pop{position:absolute;top:46px;left:0;right:0;z-index:120;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);max-height:70vh;overflow:auto;padding:6px}
.search-pop .grp{padding:8px 10px 4px;font-size:.72rem;font-weight:700;color:var(--text-3)}
.search-pop .hit{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;width:100%;text-align:left} .search-pop .hit:hover,.search-pop .hit.on{background:var(--surface-3)}
.search-pop .hit .t{font-weight:600;font-size:.84rem;line-height:1.25} .search-pop .hit .s{font-size:.73rem;color:var(--text-3)}
.top-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.icon-btn{position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--text-2)} .icon-btn:hover{background:var(--surface-3);color:var(--text)}
.icon-btn .dot{position:absolute;top:7px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg);box-sizing:content-box}
.user-btn{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 5px;border-radius:99px;border:1px solid var(--line);background:var(--surface);margin-left:6px} .user-btn:hover{border-color:var(--line-strong)}
.user-btn .n{font-weight:650;font-size:.8rem;line-height:1.15;text-align:left} .user-btn .n small{display:block;font-weight:500;font-size:.68rem;color:var(--text-3)}
.scope-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:99px;background:var(--brand-soft);color:var(--link);font-size:.75rem;font-weight:650;white-space:nowrap}
.menu-btn{display:none}
.notif-pop{width:380px;max-width:calc(100vw - 24px);padding:0}
.notif-pop .h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:650}
.notif-pop .it{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left} .notif-pop .it:hover{background:var(--surface-2)}
.notif-pop .it.unread{background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface))} .notif-pop .it .t{font-weight:650;font-size:.84rem;line-height:1.3} .notif-pop .it .b{font-size:.78rem;color:var(--text-2);margin-top:2px} .notif-pop .it .w{font-size:.7rem;color:var(--text-3);margin-top:3px}

.content{width:100%;max-width:1500px;margin:0 auto;padding:26px 28px 72px}
.page-h{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.page-h h1{font-family:var(--font-serif);font-size:1.8rem;font-weight:600;letter-spacing:-.018em;line-height:1.15}
.page-h p{color:var(--text-2);margin-top:5px;max-width:74ch;font-size:.92rem}
.page-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumbs{display:flex;gap:6px;align-items:center;font-size:.76rem;color:var(--text-3);margin-bottom:7px;flex-wrap:wrap} .crumbs .sep{opacity:.5} .crumbs b{color:var(--text-2);font-weight:600}
.min-0{min-width:0}
.section-gap{margin-top:22px}
.stack-4>*+*{margin-top:16px} .stack-5>*+*{margin-top:22px}

/* dashboard widgets */
.chart-box{position:relative;height:250px} .chart-box.tall{height:300px} .chart-box.short{height:190px}
.legend{display:flex;flex-direction:column;gap:9px;font-size:.82rem} .legend li{display:flex;align-items:center;gap:9px} .legend li i{width:10px;height:10px;border-radius:3px;flex-shrink:0} .legend li span{flex:1;color:var(--text-2)} .legend li b{font-weight:650}
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .donut-wrap .chart-box{width:170px;height:170px;flex-shrink:0}
.alert-list li{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:flex-start;cursor:pointer} .alert-list li:last-child{border-bottom:0} .alert-list li:hover{background:var(--surface-2)}
.alert-list .t{font-weight:650;font-size:.86rem;line-height:1.3} .alert-list .s{font-size:.78rem;color:var(--text-3);margin-top:1px}
.mini-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .mini-kv>div{padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)} .mini-kv span{display:block;font-size:.72rem;color:var(--text-3);font-weight:600} .mini-kv b{font-family:var(--font-serif);font-size:1.3rem;color:var(--brand-strong);font-weight:600;font-variant-numeric:tabular-nums}
.hero-card{background:linear-gradient(135deg,var(--brand-strong) 0,#1B3A9E 100%);color:#fff;border-radius:14px;padding:22px 24px;position:relative;overflow:hidden}
:root[data-theme="dark"] .hero-card{background:linear-gradient(135deg,#16245C,#1B3A9E)}
.hero-card::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(255,255,255,.05) 27px 28px);pointer-events:none}
.hero-card::before{content:"";position:absolute;left:52px;top:0;bottom:0;width:2px;background:var(--accent);opacity:.6;z-index:1}
.hero-card>*{position:relative;z-index:2} .hero-card h2{color:#fff;font-family:var(--font-serif);font-weight:600;font-size:1.35rem;margin:0} .hero-card p{color:#C9D5FF;font-size:.88rem;margin-top:4px}
.hero-card .btn-secondary{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff} .hero-card .btn-secondary:hover{background:rgba(255,255,255,.2)}
.hero-card .btn-light{background:#fff;color:#0E1E5B}
.task{display:flex;gap:13px;padding:13px 18px;border-bottom:1px solid var(--line);align-items:flex-start;cursor:pointer;text-decoration:none!important;color:inherit} .task:last-child{border-bottom:0} .task:hover{background:var(--surface-2)}
.task .t{font-weight:650;font-size:.86rem;line-height:1.3;color:var(--text)} .task .s{font-size:.78rem;color:var(--text-3);margin-top:2px}
.notice-row{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer} .notice-row:last-child{border-bottom:0} .notice-row:hover{background:var(--surface-2)}
.notice-row .t{font-weight:650;line-height:1.35} .notice-row.unread .t::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:8px;vertical-align:1px}
.notice-row .b{font-size:.82rem;color:var(--text-2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.countdown{font-family:var(--font-serif);font-weight:600;font-size:1.3rem;color:var(--accent);font-variant-numeric:tabular-nums}
.prog-row{display:grid;grid-template-columns:minmax(90px,1.2fr) minmax(80px,2fr) 54px;gap:12px;align-items:center;font-size:.82rem;padding:7px 0} .prog-row .n{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.pp{display:flex;align-items:center;gap:11px;padding:9px 18px} .pp .n{font-weight:600;font-size:.86rem;line-height:1.25} .pp .d{font-size:.75rem;color:var(--text-3)}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:9px;transition:border-color .15s,box-shadow .15s} .tile:hover{border-color:var(--brand-line);box-shadow:0 6px 20px -10px rgba(13,26,74,.25)}
.tile h4{font-size:.95rem;color:var(--text);line-height:1.3;letter-spacing:0} .tile .m{font-size:.76rem;color:var(--text-3)}
.thumb{height:92px;border-radius:9px;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c1),var(--c5))}
.thumb.t2{background:linear-gradient(135deg,#0E9384,#1C6CB0)} .thumb.t3{background:linear-gradient(135deg,#B86F0B,#D23F36)} .thumb.t4{background:linear-gradient(135deg,#5A44C6,#1B3A9E)} .thumb.t5{background:linear-gradient(135deg,#0C7F7B,#2B4FC4)}
.thumb::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,transparent 0 17px,rgba(255,255,255,.08) 17px 18px)}
.thumb .icon{position:relative;z-index:1;opacity:.95}
.pdoc{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line)} .pdoc:last-child{border-bottom:0}
.pdoc .g{flex:1;min-width:0} .pdoc .t{font-weight:600;font-size:.87rem} .pdoc .s{font-size:.76rem;color:var(--text-3)}
.rbac{width:100%;font-size:.78rem} .rbac th{font-size:.72rem} .rbac td{text-align:center;padding:9px 8px} .rbac td:first-child,.rbac th:first-child{text-align:left;font-weight:600;position:sticky;left:0;background:var(--surface);z-index:1}
.rbac .cellv{display:inline-block;min-width:60px;padding:3px 7px;border-radius:6px;font-weight:650;font-size:.7rem;background:var(--surface-3);color:var(--text-2)}
.rbac .cellv.A,.rbac .cellv.M{background:var(--brand);color:#fff} .rbac .cellv.S,.rbac .cellv.D{background:var(--brand-soft);color:var(--link)} .rbac .cellv.O,.rbac .cellv.C,.rbac .cellv.G,.rbac .cellv.E,.rbac .cellv.R{background:var(--teal-soft);color:var(--teal)} .rbac .cellv.n{background:transparent;color:var(--text-3);font-weight:500}
.kbd{font:600 .7rem var(--font-sans);border:1px solid var(--line-strong);border-radius:5px;padding:1px 6px;background:var(--surface-2);color:var(--text-2)}
.ov-err{margin-bottom:12px}
.tb-count{font-weight:600;color:var(--text-2);font-size:.82rem}
.page-loading{padding:60px 0;display:grid;place-items:center;color:var(--text-3)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.side-scrim{display:none}

@media (max-width:1080px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:284px;transform:translateX(-100%);transition:transform .2s ease}
  .app.nav-open .side{transform:none;box-shadow:var(--shadow-pop)}
  .app.nav-open .side-scrim{display:block;position:fixed;inset:0;background:var(--overlay);z-index:55}
  .menu-btn{display:grid} .topbar{padding:0 16px} .content{padding:20px 16px 60px} .user-btn .n,.scope-chip{display:none}
}
@media (max-width:720px){.page-h h1{font-size:1.45rem} .top-search kbd{display:none} .donut-wrap{justify-content:center}}
@media print{.side,.topbar,.page-actions,.crumbs,.no-print{display:none!important} .app{display:block} .content{padding:0;max-width:none}}

@media (max-width:720px){.top-search{min-width:0;flex:1 1 auto}.top-search .input{padding-right:12px;text-overflow:ellipsis}.topbar{gap:8px}}