/* Uttarakhand School Education Data & GIS Dashboard — styles
   Government-style, map-first, responsive from 360px to ultrawide. No external fonts. */

:root{
  --navy:#0b3a5b; --navy2:#12507a; --navy3:#1b6ca8; --saffron:#e8871e; --green:#2e7d32;
  --bg:#eef2f6; --card:#fff; --ink:#16212c; --muted:#5a6878; --line:#dde4ec; --line2:#eef2f6;
  --danger:#b3261e; --warn:#9a6700; --radius:10px;
  --shadow:0 1px 2px rgba(14,38,62,.06), 0 2px 8px rgba(14,38,62,.06);
  --font:"Segoe UI",system-ui,Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font);-webkit-text-size-adjust:100%}
button,select,input{font:inherit;color:inherit}
a{color:var(--navy3)}
code{font-family:var(--mono);font-size:.92em;background:#f1f5f9;padding:1px 4px;border-radius:4px}
.tricolor{height:4px;background:linear-gradient(90deg,#ff9933 33.33%,#fff 33.33% 66.66%,#138808 66.66%)}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9999;border-radius:6px}

header.app{background:var(--navy);color:#fff;padding:11px 18px}
.brand{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;max-width:1760px;margin:0 auto}
.brand h1{margin:0;font-size:18px;line-height:1.2;letter-spacing:.3px;font-weight:700}
.brand p{margin:3px 0 0;font-size:12.5px;color:#c9dcec}
.brand .actions{display:flex;gap:7px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 11px;cursor:pointer;white-space:nowrap;transition:.12s}
.btn:hover:not(:disabled){border-color:var(--navy3);background:#f7fafd}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--saffron);border-color:var(--saffron);color:#fff;font-weight:600}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn.sm{padding:3px 8px;font-size:12.5px}

.filters{background:#fff;border-bottom:1px solid var(--line);padding:9px 18px;position:sticky;top:0;z-index:1200;box-shadow:var(--shadow)}
.filters-inner{max-width:1760px;margin:0 auto}
.filter-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:end}
.filter-grid label{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;font-weight:600}
.filter-grid select,.filter-grid input{width:100%;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff}
.filter-grid select:focus,.filter-grid input:focus{outline:2px solid var(--navy3);outline-offset:-1px}
.filter-toggle{display:none;margin-bottom:6px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.chip{background:#e9f1f8;color:var(--navy);border-radius:999px;padding:3px 10px;font-size:12px;display:inline-flex;gap:6px;align-items:center}
.chip b{cursor:pointer;font-weight:700;opacity:.65}.chip b:hover{opacity:1}
.crumb{font-size:12.5px;color:var(--muted)}
.crumb a{cursor:pointer;text-decoration:underline}

main{padding:14px 18px 44px;max-width:1760px;margin:0 auto}
.kpis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px;border-top:3px solid var(--navy2);min-width:0}
.kpi .l{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-size:21px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .s{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d{font-size:11.5px;font-weight:600;margin-top:1px}
.kpi.na{border-top-color:#c6ced6}.kpi.na .v{color:#93a0ad;font-size:14px;font-weight:600}
.up{color:var(--green)}.down{color:var(--danger)}

.layout{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(310px,1fr);gap:14px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px;min-width:0}
.card h2{font-size:15px;margin:0 0 9px;color:var(--navy)}
.card h3{font-size:13px;margin:12px 0 6px;color:var(--navy)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11.5px}
.na{color:#93a0ad;font-style:italic}

#mapWrap{position:relative;height:600px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
#map{position:absolute;inset:0;background:#dfe7ee}
#mapWrap.expanded{position:fixed;inset:0;height:auto;z-index:4000;border-radius:0}
.map-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.map-toolbar label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.map-toolbar select{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:7px;background:#fff}
.legend{background:rgba(255,255,255,.95);padding:8px 10px;border-radius:7px;box-shadow:var(--shadow);font-size:11.5px;line-height:1.55;max-width:230px;max-height:46vh;overflow:auto}
.legend i{display:inline-block;width:14px;height:12px;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.18)}
.legend hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.district-label{background:transparent;border:0;box-shadow:none;font-weight:700;font-size:11px;color:#0d2d47;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;padding:0}
.district-label:before{display:none}
.leaflet-popup-content{margin:10px 12px;font-size:12.5px;min-width:240px}
.popup h4{margin:0 0 5px;font-size:14px;color:var(--navy)}
.popup table{border-collapse:collapse;width:100%}
.popup td{padding:2px 4px;border-bottom:1px solid var(--line2);vertical-align:top}
.popup td:first-child{color:var(--muted);white-space:nowrap}

.tabs{display:flex;gap:3px;overflow-x:auto;border-bottom:2px solid var(--line);margin:18px 0 12px;-webkit-overflow-scrolling:touch}
.tab{border:0;background:transparent;padding:9px 13px;cursor:pointer;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab:hover{color:var(--navy)}
.tab.active{color:var(--navy);border-bottom-color:var(--saffron)}
.panel{display:none}.panel.active{display:block}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.chart-box{position:relative;height:320px}
.chart-box.tall{height:430px}
.chart-box.short{height:250px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.stat{border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.stat .l{font-size:11.5px;color:var(--muted)}
.stat .v{font-size:17px;font-weight:700;margin-top:1px}
.bar{height:6px;background:#e9eef3;border-radius:4px;margin-top:6px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--green);border-radius:4px}

table.data{border-collapse:collapse;width:100%;font-size:12.5px}
table.data th,table.data td{padding:6px 8px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
table.data th{background:#f5f8fb;position:sticky;top:0;z-index:2;white-space:nowrap;font-weight:600}
table.data th.sortable{cursor:pointer;user-select:none}
table.data th.sortable:hover{background:#eaf1f7}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data tbody tr:hover{background:#f7fafd}
table.data tr.clickable{cursor:pointer}
.table-wrap{overflow:auto;max-height:560px;border:1px solid var(--line);border-radius:8px}
.table-wrap.short{max-height:320px}

.notice{border-left:4px solid var(--saffron);background:#fff8ef;padding:9px 12px;border-radius:6px;margin:8px 0;font-size:12.5px}
.notice.info{border-color:var(--navy3);background:#eef5fb}
.notice.danger{border-color:var(--danger);background:#fdf1f0}
.notice.ok{border-color:var(--green);background:#f0f7f0}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.subtabs{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0}
.subtab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;cursor:pointer;font-size:12.5px}
.subtab:hover{border-color:var(--navy3)}
.subtab.active{background:var(--navy);border-color:var(--navy);color:#fff}

.loading{position:fixed;inset:0;background:rgba(238,242,246,.55);display:none;align-items:center;justify-content:center;z-index:5000}
.loading.show{display:flex}
.spinner{width:42px;height:42px;border:4px solid #ccd7e2;border-top-color:var(--saffron);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#16212c;color:#fff;padding:9px 15px;border-radius:8px;z-index:5500;display:none;max-width:92vw;box-shadow:var(--shadow)}

.profile-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:10px}
.profile-head h2{margin:0;font-size:18px}
#profileMini{height:220px;margin-top:10px;border-radius:8px;border:1px solid var(--line)}
footer{color:var(--muted);font-size:12px;text-align:center;padding:16px;max-width:1100px;margin:0 auto}

@media (max-width:1280px){.filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.layout{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}#mapWrap{height:500px}}
@media (max-width:760px){
  header.app{padding:9px 12px}.brand h1{font-size:14.5px}.brand p{display:none}
  main{padding:10px 10px 36px}.filters{padding:8px 12px}
  .filter-toggle{display:inline-block}
  .filter-grid{display:none;grid-template-columns:1fr 1fr}
  .filters.open .filter-grid{display:grid}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .v{font-size:18px}
  .grid2,.grid3{grid-template-columns:1fr}.map-toolbar{grid-template-columns:1fr}
  #mapWrap{height:400px}.chart-box,.chart-box.tall{height:290px}
  .table-wrap{max-height:430px}
}
@media print{
  header.app,.filters,.kpis,.layout,.tabs,.btn,.pager,footer,.subtabs,.loading,.toast{display:none!important}
  body{background:#fff}.panel{display:none!important}.panel.print-me{display:block!important}
  .card{box-shadow:none;padding:0}.table-wrap{max-height:none;border:0}
}