@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-400.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-500.ttf") format("truetype"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-600.ttf") format("truetype"); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-700.ttf") format("truetype"); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-800.ttf") format("truetype"); font-style:normal; font-weight:800; font-display:swap; }
@font-face { font-family:"Material Symbols Rounded"; src:url("../fonts/material-symbols-rounded.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:block; }

:root {
  --font-ui: "Montserrat", "Segoe UI", Arial, sans-serif;
  --forest: #173f32;
  --forest-deep: #0d2b22;
  --moss: #52765b;
  --sage: #8fa88e;
  --fern: #2f6952;
  --cream: #f3f0e7;
  --paper: #fbfaf5;
  --ink: #24342c;
  --muted: #708078;
  --line: #d9ded2;
  --gold: #b69a5c;
  --clay: #ae6d57;
  --red: #a6544d;
  --navy: var(--forest-deep);
  --blue: var(--forest);
  --teal: var(--fern);
  --orange: var(--gold);
  --shadow: 0 18px 50px rgba(27, 51, 39, .075);
  --shadow-soft: 0 7px 24px rgba(27, 51, 39, .055);
}

* { box-sizing: border-box; }
.material-symbols-rounded,
.nav .icon,
.portal-choice-icon,
.quality-icon.material-symbols-rounded,
.workspace-step .step-icon,
.button-icon-symbol {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.button-icon-symbol { margin-right:6px; vertical-align:-.16em; }
.material-symbols-rounded[aria-hidden="true"] { user-select:none; }
.quality-icon.material-symbols-rounded {
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:25px;
  line-height:1;
}
.nav .icon,
.nav-logout-button .icon {
  display:inline-grid;
  flex:0 0 20px;
  place-items:center;
  overflow:visible;
  font-size:20px;
  line-height:1;
}
.portal-choice-icon { display:grid; place-items:center; font-size:25px; }
html { background: var(--cream); }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 8%, rgba(143,168,142,.16), transparent 27rem),
    radial-gradient(circle at 16% 92%, rgba(182,154,92,.09), transparent 25rem),
    var(--cream);
}
a { color: inherit; text-decoration: none; }
.layout { min-height: 100vh; display: grid; grid-template-columns: 264px 1fr; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 30px 22px;
  overflow: hidden;
  color: #f7f5ec;
  background:
    radial-gradient(circle at 0 0, rgba(143,168,142,.22), transparent 18rem),
    linear-gradient(165deg, #204f3e, var(--forest-deep) 76%);
  border-right: 1px solid rgba(255,255,255,.08);
}
.sidebar::after {
  content: "";
  position: absolute;
  right: -88px;
  bottom: 80px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 65% 35% 58% 42%;
  transform: rotate(24deg);
  pointer-events: none;
}
.brand { display: flex; gap: 13px; align-items: center; margin-bottom: 40px; }
.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50% 42% 50% 45%;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .5px;
  background: linear-gradient(145deg, #d3bd82, var(--gold));
  color: var(--forest-deep);
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
}
.brand strong { display: block; font-family: var(--font-ui); font-size: 17px; letter-spacing: .15px; }
.brand small { display: block; margin-top: 3px; color: #b9cbbf; font-size: 11px; letter-spacing: .35px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 6px 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #c5d4ca;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav a:hover { color: white; background: rgba(255,255,255,.07); transform: translateX(2px); }
.nav a.active {
  color: #18382d;
  background: linear-gradient(135deg, #e9e5d5, #d9dfce);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.nav .icon { width: 22px; font-size: 17px; text-align: center; }
.sidebar-note {
  position: absolute;
  z-index: 1;
  bottom: 25px;
  left: 22px;
  right: 22px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: #b9cbbf;
  background: rgba(255,255,255,.045);
  font-size: 11px;
  line-height: 1.6;
  backdrop-filter: blur(8px);
}

main { min-width: 0; padding: 38px 42px 60px; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.topbar-actions form { margin: 0; }
h1 {
  margin: 0 0 6px;
  color: var(--forest-deep);
  font-family: var(--font-ui);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -.65px;
}
.subtitle { margin: 0; color: var(--muted); line-height: 1.5; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: #fff;
  background: linear-gradient(135deg, var(--fern), var(--forest));
  box-shadow: 0 7px 18px rgba(23,63,50,.15);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(23,63,50,.2); }
.btn.secondary { color: var(--forest); border-color: #d8ded2; background: #eef0e7; box-shadow: none; }
.btn.danger { background: linear-gradient(135deg, #bb655c, var(--red)); }
.btn.small { padding: 7px 11px; border-radius: 9px; font-size: 12px; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-bottom: 24px; }
.card, .panel {
  background: rgba(251,250,245,.94);
  border: 1px solid rgba(74,105,83,.13);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.card { position: relative; overflow: hidden; padding: 23px; }
.card::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  right: -26px;
  top: -28px;
  border-radius: 50%;
  background: rgba(82,118,91,.1);
}
.card:nth-child(2)::after { background: rgba(143,168,142,.18); }
.card:nth-child(3)::after { background: rgba(182,154,92,.16); }
.card:nth-child(4)::after { background: rgba(174,109,87,.13); }
.card span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .65px; }
.card strong { display: block; margin: 10px 0 3px; color: var(--forest-deep); font-family: var(--font-ui); font-size: 34px; font-weight: 700; }
.card small { color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; }
.panel { padding: 23px; margin-bottom: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel h2 { margin: 0; color: var(--forest-deep); font-family: var(--font-ui); font-size: 20px; font-weight: 700; }

.filters { display: grid; grid-template-columns: 2fr repeat(3, minmax(130px, 1fr)) auto; gap: 10px; margin-bottom: 18px; }
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d3dbcf;
  border-radius: 11px;
  background: #fffef9;
  color: var(--ink);
  font: inherit;
  transition: border .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--sage); box-shadow: 0 0 0 4px rgba(82,118,91,.11); }
input[type="file"] { padding: 8px; background: #f7f5ee; }
label { display: block; margin-bottom: 7px; color: var(--forest); font-size: 12px; font-weight: 700; letter-spacing: .25px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-grid .wide { grid-column: 1 / -1; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th {
  padding: 12px 11px;
  text-align: left;
  color: #596c61;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .75px;
  border-bottom: 1px solid #d4ddd1;
  background: #eef1e8;
}
.sortable-column { position:relative; padding-right:26px; cursor:pointer; user-select:none; touch-action:manipulation; }
.sortable-column::after { content:"↕"; position:absolute; right:9px; color:#8a999b; font-size:12px; opacity:.65; }
.sortable-column[data-sort-direction="asc"]::after { content:"↑"; color:var(--fern); opacity:1; }
.sortable-column[data-sort-direction="desc"]::after { content:"↓"; color:var(--fern); opacity:1; }
.sortable-column:hover { color:var(--forest); background:#e5eeec; }
.sortable-column:focus-visible { outline:2px solid var(--fern); outline-offset:-3px; }
.table-sort-link { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px; color:inherit; font:inherit; letter-spacing:inherit; }
.table-sort-link span { flex:0 0 auto; color:#7b8d90; font-size:13px; }
.table-sort-link:hover,.table-sort-link.active { color:var(--forest); }
.table-sort-link.active span { color:var(--fern); font-weight:800; }
td { padding: 13px 11px; border-bottom: 1px solid #e4e7df; vertical-align: top; background: rgba(255,255,255,.25); }
tbody tr:last-child td { border-bottom: 0; }
tr:hover td { background: #f4f5ed; }
.school-name { font-weight: 700; color: var(--forest); }
.school-name:hover { color: var(--gold); }
.muted { color: var(--muted); font-size: 11px; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; background: #dfece2; color: #286048; }
.badge.pending { background: #f2ead3; color: #87692b; }
.badge.issue { background: #f1dfda; color: #8d4943; }
.badge.multiline { max-width:150px; border-radius:10px; line-height:1.35; white-space:normal; }
.validation-form { display:grid; grid-template-columns:minmax(130px,1fr) minmax(150px,1.4fr) auto; gap:6px; min-width:390px; }
.validation-form input,.validation-form select { padding:8px 9px; font-size:12px; }
.multi-edit-panel { margin:14px 0 18px; border-color:#b8d8d4; background:#f6fbfa; box-shadow:none; }
.multi-edit-panel[hidden] { display:none !important; }
.multi-edit-panel label > input[type="checkbox"] { width:auto; margin-right:6px; }
.profile-change-audit { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.profile-change-audit > h2 { margin:0 0 14px; }
.inventory-processing-status { display:grid; gap:5px; min-width:280px; margin-top:14px; padding:12px 14px; border:1px solid #b9dcd8; border-radius:12px; color:var(--forest-deep); background:#f1faf8; font-size:12px; }
.inventory-processing-status span { color:var(--muted); }
.inventory-processing-status i { display:block; width:100%; height:4px; margin-top:4px; overflow:hidden; border-radius:99px; background:#d5ebe8; }
.inventory-processing-status i::after { content:""; display:block; width:38%; height:100%; border-radius:inherit; background:var(--fern); animation:inventory-progress 1s ease-in-out infinite alternate; }
.button-spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.45); border-top-color:currentColor; border-radius:50%; animation:crud-spin .7s linear infinite; }
@keyframes inventory-progress { from { transform:translateX(-15%); } to { transform:translateX(180%); } }

@media (max-width:760px) {
  .participation-monitor-wrap { overflow:visible; border:0; }
  .participation-monitor-table,.participation-monitor-table tbody,
  .participation-monitor-table tr,.participation-monitor-table td { display:block; width:100%; }
  .participation-monitor-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .participation-monitor-table tbody { display:grid; gap:12px; }
  .participation-monitor-table tr { padding:8px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
  .participation-monitor-table td { display:grid; grid-template-columns:minmax(110px,34%) 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
  .participation-monitor-table td:last-child { border-bottom:0; }
  .participation-monitor-table td::before { content:attr(data-label); color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; }
  .validation-form { grid-template-columns:1fr; min-width:0; }
}
.flash { margin-bottom: 20px; padding: 14px 17px; border: 1px solid #c9dfcf; border-radius: 13px; background: #e2eee4; color: #285f47; box-shadow: var(--shadow-soft); }
.flash.error { border-color: #e6cac3; background: #f2e0dc; color: #87453f; }

.bar-row { display: grid; grid-template-columns: 110px 1fr 55px; gap: 11px; align-items: center; margin: 15px 0; font-size: 12px; }
.bar-track { height: 11px; overflow: hidden; border-radius: 99px; background: #e2e7dd; }
.bar-fill { height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, var(--sage), var(--forest)); }
.bar-row.package-type { grid-template-columns: minmax(170px, 260px) 1fr 60px; }
.donut-layout { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; padding: 10px 0; }
.donut-chart { --coverage: 0; width: 172px; height: 172px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--fern) calc(var(--coverage) * 1%), #e1e5dc 0); position: relative; box-shadow: 0 12px 30px rgba(28,60,45,.1); }
.donut-chart.package-mix { background: var(--donut-gradient, #e1e5dc); }
.donut-chart::before { content: ""; position: absolute; width: 116px; height: 116px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.donut-value { position: relative; z-index: 1; text-align: center; color: var(--forest-deep); }
.donut-value strong { display: block; font-family: var(--font-ui); font-size: 28px; font-weight: 700; }
.donut-value span { color: var(--muted); font-size: 10px; }
.legend-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.legend-item:last-child { border-bottom: 0; }
.legend-label { display: flex; align-items: center; gap: 9px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fern); }
.legend-dot.uncovered { background: #e1e5dc; border: 1px solid #cbd4c7; }
.package-chart-grid { display: grid; grid-template-columns: minmax(320px, .72fr) 1.28fr; gap: 34px; align-items: center; }
.package-donut-block { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; }
.empty { padding: 38px 10px; text-align: center; color: var(--muted); }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.table-page-number { min-width:88px; text-align:center; font-weight:700; color:var(--ink); }
.table-pagination button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.table-wrap {
  max-height:min(70vh,720px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.table-wrap thead th {
  position:sticky;
  top:0;
  z-index:6;
  box-shadow:0 1px 0 #dce6e8,0 5px 10px rgba(25,55,61,.045);
}
.upload-progress-track { height:12px; overflow:hidden; border-radius:999px; background:#dfe9e9; }
.upload-progress-track i { display:block; height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#0f8278,#25b9aa); }
.upload-progress-track.compact { width:150px; max-width:100%; height:7px; margin-top:6px; }
.area-progress-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:16px; margin-bottom:20px; }
.area-progress-card { display:grid; gap:13px; padding:20px; border:1px solid var(--modern-line,#d9e4e6); border-radius:18px; background:#fff; box-shadow:var(--modern-shadow,0 8px 24px rgba(20,47,55,.06)); }
.area-progress-card:hover,.area-progress-card.active { border-color:#48a99f; box-shadow:0 10px 28px rgba(15,130,120,.13); }
.area-progress-head,.area-progress-stats { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.area-progress-head strong { color:var(--navy); font-size:18px; }
.area-progress-head b { color:#0f8278; font-size:22px; }
.area-progress-stats { color:var(--muted); font-size:11px; }
.area-progress-stats strong { color:var(--ink); }
.area-progress-card small { color:var(--muted); }
.progress-tone.low { --progress-color:#df5c55; --progress-color-2:#ef8a65; --progress-soft:#fff1ef; }
.progress-tone.developing { --progress-color:#df982e; --progress-color-2:#f2bd4c; --progress-soft:#fff8e8; }
.progress-tone.mid { --progress-color:#2e7bd9; --progress-color-2:#55a6ed; --progress-soft:#edf6ff; }
.progress-tone.high { --progress-color:#7556d8; --progress-color-2:#a06be8; --progress-soft:#f4efff; }
.progress-tone.complete { --progress-color:#168a66; --progress-color-2:#31bf87; --progress-soft:#ebfaf3; }
.area-upload-hero { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:18px; padding:30px 34px; overflow:hidden; border-radius:24px; color:#fff; background:linear-gradient(125deg,#173f45 0%,var(--progress-color) 62%,var(--progress-color-2) 100%); box-shadow:0 18px 42px rgba(8,81,76,.2); }
.area-upload-hero h2 { margin:5px 0 7px; color:#fff; font-size:clamp(24px,3vw,35px); }
.area-upload-hero p { margin:0; color:rgba(255,255,255,.78); }
.area-eyebrow,.area-chart-heading span,.area-section-heading span { font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.area-hero-progress { display:grid; flex:0 0 180px; place-items:center; min-height:112px; border:1px solid rgba(255,255,255,.2); border-radius:20px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); }
.area-hero-progress strong { font-size:38px; line-height:1; }
.area-hero-progress span { margin-top:-24px; color:rgba(255,255,255,.75); font-size:11px; }
.area-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.area-kpi { position:relative; overflow:hidden; min-height:132px; padding:21px 23px; border:1px solid #dbe7e8; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(20,47,55,.06); }
.area-kpi::after { content:""; position:absolute; width:90px; height:90px; top:-45px; right:-35px; border-radius:50%; background:rgba(15,130,120,.09); }
.area-kpi span { display:block; color:#647a80; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.area-kpi strong { display:block; margin:11px 0 5px; color:#123c42; font-size:31px; }
.area-kpi small { color:#829399; }
.area-kpi.uploaded { border-bottom:4px solid #19a899; }.area-kpi.pending { border-bottom:4px solid #e3a245; }.area-kpi.total { border-bottom:4px solid #477fdd; }.area-kpi.areas { border-bottom:4px solid #8258d5; }
.area-chart-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr); gap:18px; margin-bottom:25px; }
.area-chart-panel { padding:24px; border:1px solid #dbe7e8; border-radius:20px; background:#fff; box-shadow:0 8px 26px rgba(20,47,55,.065); }
.area-chart-heading,.area-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.area-chart-heading span,.area-section-heading span { color:#0f8177; }.area-chart-heading h2,.area-section-heading h2 { margin:4px 0 0; color:#163c43; font-size:20px; }.area-chart-heading small,.area-section-heading small { color:#84969b; }
.area-bar-chart { display:grid; gap:13px; }
.area-chart-row { display:grid; grid-template-columns:70px minmax(120px,1fr) 52px 58px; align-items:center; gap:11px; }
.area-chart-row strong { color:#34545a; font-size:12px; }.area-chart-row b { color:var(--progress-color); text-align:right; }.area-chart-row small { color:#87999e; text-align:right; }
.area-chart-track { height:15px; overflow:hidden; border-radius:5px; background:repeating-linear-gradient(90deg,#edf3f3 0,#edf3f3 calc(25% - 1px),#d9e5e6 calc(25% - 1px),#d9e5e6 25%); }
.area-chart-track i { display:block; height:100%; min-width:3px; border-radius:5px; background:linear-gradient(90deg,var(--progress-color),var(--progress-color-2)); box-shadow:0 3px 8px rgba(15,130,120,.18); transition:width .35s ease; }
.area-chart-row:hover .area-chart-track i { filter:saturate(1.25); }
.area-chart-axis { display:flex; justify-content:space-between; margin:12px 122px 0 81px; color:#9aabad; font-size:9px; }
.area-donut-layout { display:grid; grid-template-columns:170px 1fr; align-items:center; gap:22px; min-height:260px; }
.area-donut { --angle:calc(var(--completion) * 3.6); display:grid; width:170px; aspect-ratio:1; place-items:center; border-radius:50%; background:conic-gradient(var(--progress-color) 0 var(--angle),#e6eeee var(--angle) 360deg); box-shadow:inset 0 0 0 1px rgba(15,130,120,.08); }
.area-donut::before { content:""; grid-area:1/1; width:122px; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 0 18px rgba(20,47,55,.08); }
.area-donut div { z-index:1; grid-area:1/1; display:grid; text-align:center; }.area-donut strong { color:#113f43; font-size:30px; }.area-donut span { color:#82969a; font-size:10px; text-transform:uppercase; letter-spacing:.8px; }
.area-chart-legend { display:grid; gap:15px; }.area-chart-legend>div { display:flex; align-items:center; gap:10px; }.area-chart-legend i { width:11px; height:11px; border-radius:3px; }.area-chart-legend i.uploaded { background:var(--progress-color); }.area-chart-legend i.pending { background:#e6eeee; }.area-chart-legend span { display:grid; color:#71868b; font-size:11px; }.area-chart-legend span strong { color:#24484e; font-size:17px; }.area-target-note { margin-top:8px; padding:12px; border-radius:12px; background:var(--progress-soft); }.area-target-note>strong { color:var(--progress-color); font-size:20px; }
.area-section-heading { margin:0 2px 14px; }
.area-progress-grid { grid-template-columns:repeat(4,minmax(220px,1fr)); }
.area-progress-card { gap:15px; min-height:178px; padding:21px; border-top:4px solid var(--progress-color); background:linear-gradient(155deg,#fff 65%,var(--progress-soft)); }
.area-progress-card .upload-progress-track i { background:linear-gradient(90deg,var(--progress-color),var(--progress-color-2)); }
.area-progress-card .area-progress-head b { color:var(--progress-color); }
.area-progress-stats span { display:grid; gap:2px; }.area-progress-stats span>strong { color:#24474d; font-size:15px; }.area-progress-stats span>small { font-size:9px; text-transform:uppercase; }
@media (max-width:1150px) { .area-kpi-grid,.area-progress-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.area-chart-grid { grid-template-columns:1fr; } }
@media (max-width:650px) { .area-upload-hero { align-items:stretch; flex-direction:column; padding:24px; }.area-hero-progress { flex-basis:auto; }.area-kpi-grid,.area-progress-grid { grid-template-columns:1fr; }.area-donut-layout { grid-template-columns:1fr; justify-items:center; }.area-chart-row { grid-template-columns:60px minmax(90px,1fr) 45px; }.area-chart-row small,.area-chart-axis { display:none; }.area-section-heading { align-items:flex-start; flex-direction:column; } }
@media (max-width:600px) {
  .table-pagination { align-items:stretch; flex-direction:column; }
  .table-pagination .actions { justify-content:space-between; }
}
.actions { display: flex; gap: 7px; flex-wrap: wrap; }
.statline { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.statline:last-child { border: 0; }
.tabs { display: inline-flex; gap: 5px; padding: 5px; margin-bottom: 20px; border: 1px solid #d9dfd5; border-radius: 13px; background: #e7ebe2; }
.tabs a { padding: 9px 15px; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
.tabs a.active { color: white; background: var(--forest); box-shadow: 0 5px 14px rgba(23,63,50,.17); }
.portal-section-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.portal-section-tabs a { flex: 0 0 auto; white-space: nowrap; }
.school-portal-app .sidebar { display: flex; flex-direction: column; overflow-y: auto; }
.school-portal-app .brand { flex: 0 0 auto; }
.school-portal-app .nav { flex: 0 0 auto; padding-bottom: 24px; }
.school-portal-app .sidebar-note { position: static; margin-top: auto; }
.receipt-check { width: 20px; height: 20px; margin: 0; accent-color: var(--fern); vertical-align: middle; }
.matrix td, .matrix th { text-align: center; white-space: nowrap; }
.matrix td:nth-child(1), .matrix th:nth-child(1),
.matrix td:nth-child(2), .matrix th:nth-child(2),
.matrix td:nth-child(3), .matrix th:nth-child(3),
.matrix td:nth-child(4), .matrix th:nth-child(4) { text-align: left; }
.package-list { display: grid; gap: 6px; }
.package-item { padding: 8px 10px; border-left: 3px solid var(--sage); border-radius: 7px; background: #eff3eb; }
.package-item strong { color: var(--forest); }
.summary-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.summary-chip { padding: 8px 13px; border: 1px solid #dae0d5; border-radius: 99px; background: #edf0e8; color: var(--forest); font-size: 12px; }
.summary-chip strong { margin-right: 4px; }
.document-list { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.document-list h2 { margin-bottom: 12px; }
.document-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.document-row:last-child { border-bottom: 0; }
.document-links { display: grid; gap: 5px; min-width: 150px; }
.document-links a { color: var(--forest); font-size: 12px; font-weight: 650; }
.document-links a:hover { color: var(--gold); }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.detail-grid > div { padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: #f5f5ed; }
.detail-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .55px; }
.detail-grid strong { color: var(--forest-deep); font-size: 13px; line-height: 1.4; }

.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 18%, rgba(182,154,92,.2), transparent 25rem),
    radial-gradient(circle at 85% 78%, rgba(143,168,142,.22), transparent 28rem),
    linear-gradient(145deg, #12382c, #0b251d);
}
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(100%, 450px);
  padding: 42px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 30px 18px 30px 18px;
  background: rgba(251,250,245,.97);
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
}
.login-emblem {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50% 42% 50% 45%;
  color: var(--forest-deep);
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(145deg, #d8c58f, var(--gold));
  box-shadow: 0 12px 28px rgba(71,58,28,.2);
}
.login-kicker { margin: 0 0 8px; color: var(--fern); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.login-card h1 { font-size: 38px; }
.login-form { display: grid; gap: 17px; margin-top: 28px; text-align: left; }
.login-form .btn { width: 100%; margin-top: 5px; }
.login-footnote { margin: 25px 0 0; color: var(--muted); font-size: 11px; }
.portal-choice-shell { align-items: center; }
.portal-choice-card { width: min(100%, 980px); }
.portal-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
  text-align: left;
}
.portal-choice-panel {
  display: grid;
  align-content: start;
  gap: 13px;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(28,51,42,.08);
}
.portal-choice-panel h2 { margin: 0; color: var(--forest-deep); font-size: 22px; }
.portal-choice-panel .btn { margin-top: 6px; }
.portal-choice-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  font-size: 22px;
  background: linear-gradient(135deg, #10a98f, #087d6c);
  box-shadow: 0 12px 25px rgba(8,125,108,.18);
}
.portal-choice-icon.school { background: linear-gradient(135deg, #d7a33c, #f0b84d); }
.school-login-shell {
  width: 100%;
  max-width: none;
}
.school-login-card {
  display:grid;
  grid-template-columns:minmax(320px,42%) minmax(0,58%);
  width: min(100%, 1180px);
  max-width: none;
  padding:0;
  overflow:hidden;
  text-align:left;
}
.school-login-brand-panel {
  position:relative;
  display:flex;
  min-height:680px;
  padding:58px 54px;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  color:#effcf5;
  background:linear-gradient(145deg,#075b38,#079653);
}
.school-login-brand-panel::before,.school-login-brand-panel::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.05); }
.school-login-brand-panel::before { width:430px; height:430px; top:-210px; right:-170px; }
.school-login-brand-panel::after { width:280px; height:280px; bottom:-150px; left:-100px; }
.school-login-brand-panel > * { position:relative; z-index:1; }
.school-login-brand-panel h2 { margin:12px 0 14px; color:#fff; font-size:38px; }
.school-login-brand-panel p { max-width:430px; color:#d9eee2; font-size:17px; line-height:1.65; }
.school-login-seal { display:grid; width:76px; height:76px; place-items:center; border:2px solid rgba(255,255,255,.65); border-radius:50%; color:#fff; background:rgba(255,255,255,.12); font-size:22px; font-weight:900; }
.school-login-feature-list { display:grid; gap:0; margin-top:34px; }
.school-login-feature-list span { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.14); color:#f4fff8; font-weight:650; }
.school-login-feature-list span { display:flex; gap:10px; align-items:center; }
.school-login-feature-list .material-symbols-rounded { flex:0 0 auto; font-size:21px; }
.school-login-content { padding:46px 54px; align-self:center; text-align:left; }
.school-login-content > .login-emblem,.school-login-content > .login-kicker,.school-login-content > h1,.school-login-content > .subtitle { margin-left:0; text-align:left; }
.school-login-content .school-login-grid { grid-template-columns:1fr; }
.school-admin-login-divider { display:flex; gap:14px; align-items:center; margin:24px 0 14px; color:#8b9994; font-size:11px; font-weight:800; letter-spacing:.09em; }
.school-admin-login-divider::before,.school-admin-login-divider::after { content:""; height:1px; flex:1; background:#dfe6e2; }
.school-admin-login-button { width:100%; justify-content:center; }
.google-school-login-card { margin-top:26px; padding:26px; border:1px solid #a9dbc0; border-radius:18px; background:#f4fcf7; box-shadow:0 12px 30px rgba(20,91,58,.08); }
.google-school-login-label { display:flex; gap:13px; align-items:center; margin-bottom:22px; }
.google-school-login-label > span { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; border-radius:12px; color:#137b4a; background:#e2f5e9; font-size:20px; font-weight:900; }
.google-school-login-label strong,.google-school-login-label small { display:block; }
.google-school-login-label small { margin-top:4px; color:#687a72; line-height:1.4; }
.google-school-login-button { width:100%; min-height:56px; justify-content:center; color:#20332b; border:1px solid #ccd8d2; background:#fff; box-shadow:0 5px 13px rgba(20,50,39,.08); font-size:16px; }
.google-school-login-button:hover { color:#0a623c; border-color:#8ec6a8; background:#fff; }
.google-g { color:#4285f4; font-size:21px; font-weight:900; }
.google-school-login-card > .muted { margin:14px 0 0; text-align:center; }
.school-login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 24px;
  text-align: left;
}
.school-login-panel {
  margin: 0;
  padding: 24px;
}
.school-setup-panel {
  width: min(100%, 520px);
  margin: 26px auto 0;
  padding: 26px;
  text-align: left;
}
.school-login-panel h2 {
  margin: 0 0 4px;
  color: var(--forest-deep);
  font-size: 22px;
}
.school-setup-panel h2 {
  margin: 0 0 8px;
  color: var(--forest-deep);
  font-size: 22px;
}
.school-login-panel .btn {
  width: 100%;
  justify-content: center;
}
.autofill-decoy {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 761px) {
  html:has(body.school-login-page),
  body.school-login-page {
    height: 100%;
    overflow: hidden;
  }
  .school-login-page .school-login-shell {
    height: 100dvh;
    min-height: 0;
    padding: clamp(10px, 2vh, 24px);
  }
  .school-login-page .school-login-card {
    height: min(680px, calc(100dvh - 20px));
    max-height: calc(100dvh - 20px);
  }
  .school-login-page .school-login-brand-panel {
    height: 100%;
    min-height: 0;
    padding-block: clamp(28px, 5vh, 58px);
  }
  .school-login-page .school-login-content {
    max-height: 100%;
    padding-block: clamp(24px, 4vh, 46px);
    overflow: hidden;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .school-login-brand-panel h2 { font-size: 34px; }
  .school-login-brand-panel p { font-size: 15px; line-height: 1.55; }
  .school-login-seal { width: 66px; height: 66px; }
  .school-login-feature-list { margin-top: 20px; }
  .school-login-feature-list span { padding: 10px 0; }
  .school-login-content > .login-emblem { width: 58px; height: 58px; margin-bottom: 14px; }
  .google-school-login-card { margin-top: 18px; padding: 20px; }
  .google-school-login-label { margin-bottom: 16px; }
  .google-school-login-button { min-height: 50px; }
  .school-admin-login-divider { margin: 16px 0 10px; }
  .login-footnote { margin-top: 18px; }
}

@media (max-width: 1100px) {
  .layout { grid-template-columns: 230px 1fr; }
  main { padding: 32px 28px 50px; }
  .cards { grid-template-columns: repeat(2,1fr); }
  .grid-2, .package-chart-grid { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .layout { display: block; }
  .sidebar { position: static; height: auto; padding: 18px; }
  .sidebar::after, .sidebar-note { display: none; }
  .brand { margin-bottom: 15px; }
  .nav { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; white-space: nowrap; }
  main { padding: 24px 14px 40px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card, .panel { border-radius: 16px; }
  .card { padding: 17px; }
  .card strong { font-size: 27px; }
  .topbar { align-items: start; flex-direction: column; }
  .topbar-actions { width: 100%; }
  .form-grid, .filters { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .portal-choice-grid { grid-template-columns: 1fr; }
  .school-login-grid { grid-template-columns: 1fr; }
  .school-login-card { display:block; }
  .school-login-brand-panel { min-height:auto; padding:34px 26px; }
  .school-login-brand-panel h2 { font-size:29px; }
  .school-login-feature-list { display:none; }
  .school-login-content { padding:34px 24px; }
  .donut-layout, .package-donut-block { grid-template-columns: 1fr; justify-items: center; }
  .bar-row.package-type { grid-template-columns: 110px 1fr 42px; }
  .panel-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 430px) {
  .cards { grid-template-columns: 1fr; }
  h1 { font-size: 29px; }
  .login-card { padding: 30px 22px; border-radius: 24px 15px; }
}
.card-link{color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card-link:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(25,55,43,.12);border-color:rgba(55,105,79,.28)}
.card-link:focus-visible{outline:3px solid rgba(55,105,79,.3);outline-offset:3px}

/* Modern control-panel presentation */
:root {
  --forest: #0f766e;
  --forest-deep: #102a2a;
  --moss: #4b706a;
  --sage: #2dd4bf;
  --fern: #0d9488;
  --cream: #f3f6f7;
  --paper: #ffffff;
  --ink: #172323;
  --muted: #6f7f82;
  --line: #e3eaeb;
  --gold: #e6a84a;
  --shadow: 0 8px 30px rgba(22, 42, 43, .055);
  --shadow-soft: 0 4px 16px rgba(22, 42, 43, .05);
}
html, body { background: #f3f6f7; }
body {
  background:
    radial-gradient(circle at 92% 0, rgba(45,212,191,.065), transparent 28rem),
    #f3f6f7;
}
.layout { grid-template-columns: 224px minmax(0,1fr); }
.sidebar {
  padding: 22px 14px;
  background: linear-gradient(180deg,#101a1d 0%,#132526 58%,#10201f 100%);
  border-right: 1px solid rgba(255,255,255,.055);
}
.sidebar::after { display: none; }
.brand { gap: 11px; margin: 2px 7px 28px; }
.brand-mark {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: #073b37;
  background: linear-gradient(145deg,#5eead4,#14b8a6);
  box-shadow: 0 8px 24px rgba(20,184,166,.2);
}
.brand strong { font-family: var(--font-ui); font-size: 14px; font-weight: 700; }
.brand small { margin-top: 2px; color: #7f9897; font-size: 10px; }
.nav { display: grid; gap: 3px; }
.nav a {
  margin: 0;
  padding: 10px 11px;
  border-radius: 8px;
  color: #91a5a4;
  font-size: 12px;
  font-weight: 600;
}
.nav a:hover { color: #eafffc; background: rgba(45,212,191,.075); transform: none; }
.nav a.active {
  color: #dffffa;
  background: rgba(20,184,166,.15);
  border-color: rgba(94,234,212,.13);
  box-shadow: inset 3px 0 #2dd4bf;
}
.nav .icon { width: 18px; color: #5eead4; font-size: 13px; }
.sidebar-note {
  left: 14px;
  right: 14px;
  bottom: 16px;
  padding: 12px;
  border-radius: 9px;
  color: #79918f;
  background: rgba(255,255,255,.025);
  font-size: 10px;
}
main { padding: 26px 30px 52px; }
.topbar {
  position: relative;
  align-items: center;
  margin: -26px -30px 24px;
  padding: 21px 30px;
  border-bottom: 1px solid #e5ebec;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px);
}
h1 {
  margin-bottom: 3px;
  font-family: var(--font-ui);
  font-size: clamp(23px,2.3vw,31px);
  font-weight: 750;
  letter-spacing: -.7px;
}
.subtitle { font-size: 12px; }
.btn {
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 12px;
  background: #0f766e;
  box-shadow: 0 5px 14px rgba(15,118,110,.15);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,118,110,.2); }
.btn.secondary { color: #315452; border-color: #dce6e5; background: #f7fafa; }
.btn.danger { background: #c65353; }
.btn.small { padding: 6px 9px; border-radius: 6px; }
.cards { grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); gap: 13px; margin-bottom: 18px; }
.card,.panel {
  border: 1px solid #e3eaeb;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}
.card { min-height: 126px; padding: 18px; }
.card::after {
  width: 48px;
  height: 48px;
  right: -16px;
  top: -15px;
  background: rgba(20,184,166,.095);
}
.card span { font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.card strong {
  margin: 9px 0 4px;
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -.7px;
}
.card small { font-size: 10px; line-height: 1.45; }
.card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(13,148,136,.3);
  box-shadow: 0 12px 28px rgba(22,42,43,.09);
}
.panel { padding: 19px; margin-bottom: 16px; }
.panel-head { margin-bottom: 15px; }
.panel h2 {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.2px;
}
.grid-2 { gap: 15px; }
.filters { gap: 8px; margin-bottom: 14px; }
input,select,textarea {
  padding: 9px 10px;
  border-color: #dce5e5;
  border-radius: 7px;
  background: #fbfdfd;
  font-size: 12px;
}
input:focus,select:focus,textarea:focus { border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45,212,191,.12); }
label { margin-bottom: 5px; color: #536a69; font-size: 10px; letter-spacing: .45px; text-transform: uppercase; }
.form-grid { gap: 12px; }
.table-wrap { border-color: #e1e8e9; border-radius: 9px; background: #fff; }
table { font-size: 12px; }
th {
  padding: 10px;
  color: #738284;
  font-size: 9px;
  background: #f5f8f8;
  border-bottom-color: #e1e8e9;
}
td { padding: 11px 10px; border-bottom-color: #edf1f2; background: #fff; }
tr:hover td { background: #f7fbfa; }
.school-name { color: #087c72; }
.school-name:hover { color: #0d9488; }
.badge { padding: 4px 8px; font-size: 9px; background: #dff8f1; color: #087064; }
.badge.pending { background: #fff4d7; color: #966b18; }
.badge.issue { background: #fee9e7; color: #a5403a; }
.summary-strip { gap: 7px; margin-bottom: 14px; }
.summary-chip { padding: 6px 10px; border-color: #e0e8e8; border-radius: 7px; background: #f6f9f9; font-size: 10px; }
.detail-grid { gap: 8px; }
.detail-grid > div { padding: 10px 11px; border-color: #e6ecec; border-radius: 8px; background: #f8fafa; }
.detail-grid strong { font-size: 12px; }
.bar-track { height: 7px; background: #e7eeee; }
.bar-fill { background: linear-gradient(90deg,#2dd4bf,#0f766e); }
.bar-row { margin: 12px 0; }
.donut-chart { width: 150px; height: 150px; box-shadow: none; background: conic-gradient(#14b8a6 calc(var(--coverage)*1%),#e5ecec 0); }
.donut-chart::before { width: 104px; height: 104px; background: #fff; }
.donut-value strong { font-family: var(--font-ui); font-size: 24px; font-weight: 700; }
.flash { padding: 11px 14px; border-radius: 8px; font-size: 12px; }
.login-card { border-radius: 16px; }
.login-emblem { border-radius: 12px; font-family: var(--font-ui); background: linear-gradient(145deg,#5eead4,#14b8a6); }
.login-card h1 { font-family: var(--font-ui); font-size: 32px; font-weight: 700; }

@media (max-width:1100px) {
  .layout { grid-template-columns: 205px minmax(0,1fr); }
  main { padding: 24px 22px 46px; }
  .topbar { margin: -24px -22px 20px; padding: 18px 22px; }
}
@media (max-width:760px) {
  .sidebar { padding: 12px; }
  .brand { margin: 0 4px 10px; }
  .nav { display: flex; }
  main { padding: 18px 12px 36px; }
  .topbar { margin: -18px -12px 16px; padding: 15px 12px; }
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Light framed dashboard variant */
html { background: #dfe3ea; }
body {
  padding: 0;
  background: linear-gradient(145deg,#e6e9ef,#d9dee7);
}
.layout {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  grid-template-columns: 230px minmax(0,1fr);
  border: 0;
  border-radius: 0;
  background: #f5f7fb;
  box-shadow: none;
}
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 230px;
  height: 100vh;
  padding: 28px 18px;
  color: #313640;
  background: #fff;
  border-right: 1px solid #edf0f4;
}
.brand { margin: 0 8px 32px; }
.brand-mark {
  color: #fff;
  background: linear-gradient(145deg,#18b89d,#0f8f7c);
  box-shadow: 0 8px 20px rgba(15,143,124,.2);
}
.brand strong { color: #272c35; }
.brand small { color: #9aa1ab; }
.nav { position: relative; gap: 4px; }
.nav a {
  position: relative;
  color: #626974;
  background: transparent;
}
.nav a:hover { color: #0f8f7c; background: #f4faf8; }
.nav a.active {
  color: #0b7e6c;
  border-color: transparent;
  background: #edf9f6;
  box-shadow: none;
}
.nav a.active::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 7px;
  bottom: 7px;
  width: 4px;
  border-radius: 0 5px 5px 0;
  background: #14b89e;
}
.nav .icon { color: #14a890; }
.sidebar-note {
  color: #8b939d;
  border-color: #eef1f4;
  background: #f8fafb;
}
main { grid-column: 2; background: #f5f7fb; }
.topbar {
  min-height: 86px;
  border-bottom-color: #eef1f5;
  background: rgba(255,255,255,.96);
}
.topbar::before {
  content: "☰";
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border-radius: 8px;
  color: #a2a8af;
  background: #f7f8fa;
  font-size: 15px;
}
.topbar > div:first-child { flex: 1; }
.panel,.card { border-color: #edf0f4; box-shadow: 0 8px 25px rgba(45,54,68,.055); }
main > .cards > .card {
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px rgba(54,67,88,.13);
}
main > .cards > .card span,
main > .cards > .card strong,
main > .cards > .card small { color: #fff; }
main > .cards > .card::after { background: rgba(255,255,255,.13); }
main > .cards > .card:nth-child(1) { background: linear-gradient(135deg,#7446df,#9a55df); }
main > .cards > .card:nth-child(2) { background: linear-gradient(135deg,#2d72eb,#39a0f4); }
main > .cards > .card:nth-child(3) { background: linear-gradient(135deg,#18af9d,#35c7bf); }
main > .cards > .card:nth-child(4) { background: linear-gradient(135deg,#ff9b34,#ff7043); }
main > .cards > .card:nth-child(5) { background: linear-gradient(135deg,#e63f87,#a74fd6); }
main > .cards > .card:hover { border-color: transparent; box-shadow: 0 14px 30px rgba(54,67,88,.2); }
.panel .card { background: #fff; }
.panel .card:nth-child(1)::after { background: rgba(116,70,223,.12); }
.panel .card:nth-child(2)::after { background: rgba(45,114,235,.11); }
.panel .card:nth-child(3)::after { background: rgba(255,155,52,.13); }
.panel .card:nth-child(4)::after { background: rgba(230,63,135,.1); }
.panel { background: #fff; }
.table-wrap { box-shadow: inset 0 1px 0 #fff; }
.btn { background: linear-gradient(135deg,#10a98f,#087d6c); }
.btn.secondary { background: #f5f7f9; }
.donut-chart { background: conic-gradient(#7446df calc(var(--coverage)*1%),#e9edf3 0); }
.bar-fill { background: linear-gradient(90deg,#7648de,#23b4c7); }
.login-page { padding: 0; }

@media (max-width:760px) {
  body { padding: 0; }
  .layout { width: 100%; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .sidebar { position: static; width: auto; height: auto; }
  main { grid-column: auto; }
  .nav a.active::before { left: -12px; }
  .topbar::before { display: none; }
}

/* Dashboard icons and chart */
.dashboard-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.dashboard-kpis .card {
  position: relative;
  display: flex;
  min-height: 150px;
  flex-direction: column;
  justify-content: flex-end;
  padding-right: 20px;
  overflow: hidden;
}
.dashboard-kpis { grid-template-columns: repeat(5,minmax(0,1fr)); }
.dashboard-kpis .card::before {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -35px;
  width: 116px;
  height: 116px;
  border: 18px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.dashboard-kpis .card-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 13px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 7px 16px rgba(45,44,80,.12);
  backdrop-filter: blur(8px);
}
.dashboard-kpis .card-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-kpis .card > span:not(.card-icon) { padding-right: 48px; }
.dashboard-kpis .card strong { position: relative; z-index: 1; }
.dashboard-kpis .card small { position: relative; z-index: 1; }

/* Personnel and connectivity snapshots */
.dashboard-kpis + .panel,
.dashboard-kpis + .panel + .panel { padding: 25px; }
.dashboard-kpis + .panel .panel-head,
.dashboard-kpis + .panel + .panel .panel-head { margin-bottom: 20px; }
.dashboard-kpis + .panel .panel-head h2,
.dashboard-kpis + .panel + .panel .panel-head h2 { font-size: 19px; }
.dashboard-kpis + .panel .panel-head .subtitle,
.dashboard-kpis + .panel + .panel .panel-head .subtitle { margin-top: 4px; font-size: 12px; }
.dashboard-kpis + .panel > .cards,
.dashboard-kpis + .panel + .panel > .cards {
  gap: 14px;
  margin-bottom: 0;
}
.dashboard-kpis + .panel > .cards { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dashboard-kpis + .panel + .panel > .cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dashboard-kpis + .panel > .cards .card,
.dashboard-kpis + .panel + .panel > .cards .card {
  --snapshot-color: #7657dd;
  --snapshot-soft: #f0ebff;
  min-height: 144px;
  padding: 22px 20px 20px;
  border-color: #e8ebf0;
  border-radius: 15px;
  box-shadow: 0 7px 20px rgba(45,54,68,.045);
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.dashboard-kpis + .panel > .cards .card::before,
.dashboard-kpis + .panel + .panel > .cards .card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: var(--snapshot-color);
  opacity: .82;
}
.dashboard-kpis + .panel > .cards .card::after,
.dashboard-kpis + .panel + .panel > .cards .card::after {
  width: 62px;
  height: 62px;
  top: -24px;
  right: -22px;
  background: var(--snapshot-soft);
}
.dashboard-kpis + .panel > .cards .card:nth-child(2) { --snapshot-color: #4383e8; --snapshot-soft: #eaf2ff; }
.dashboard-kpis + .panel > .cards .card:nth-child(3) { --snapshot-color: #ef983e; --snapshot-soft: #fff1e3; }
.dashboard-kpis + .panel > .cards .card:nth-child(4) { --snapshot-color: #e25e68; --snapshot-soft: #ffebed; }
.dashboard-kpis + .panel + .panel > .cards .card:nth-child(1) { --snapshot-color: #20aa94; --snapshot-soft: #e5f8f4; }
.dashboard-kpis + .panel + .panel > .cards .card:nth-child(2) { --snapshot-color: #ef9b38; --snapshot-soft: #fff4e3; }
.dashboard-kpis + .panel + .panel > .cards .card:nth-child(3) { --snapshot-color: #e25e68; --snapshot-soft: #ffebed; }
.dashboard-kpis + .panel > .cards .card:hover,
.dashboard-kpis + .panel + .panel > .cards .card:hover {
  transform: translateY(-3px);
  border-color: var(--snapshot-color);
  box-shadow: 0 13px 28px rgba(45,54,68,.1);
}
.dashboard-kpis + .panel > .cards .card:focus-visible,
.dashboard-kpis + .panel + .panel > .cards .card:focus-visible { outline: 3px solid #cfc4f8; outline-offset: 3px; }
.dashboard-kpis + .panel > .cards .card > span,
.dashboard-kpis + .panel + .panel > .cards .card > span { color: #607080; font-size: 10px; font-weight: 750; letter-spacing: .8px; }
.dashboard-kpis + .panel > .cards .card strong,
.dashboard-kpis + .panel + .panel > .cards .card strong {
  margin: 12px 0 7px;
  color: #122c38;
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 760;
  letter-spacing: -.7px;
}
.dashboard-kpis + .panel > .cards .card small,
.dashboard-kpis + .panel + .panel > .cards .card small { display: block; color: #74818e; font-size: 10px; line-height: 1.5; }
.dashboard-kpis + .panel > .cards .card::marker,
.dashboard-kpis + .panel + .panel > .cards .card::marker { color: var(--snapshot-color); }

@media (max-width:1350px) {
  .dashboard-kpis { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .dashboard-kpis .card { grid-column: span 2; }
  .dashboard-kpis .card:nth-child(n+4) { grid-column: span 3; }
}

@media (max-width:960px) {
  .dashboard-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-kpis .card { grid-column: span 1; }
  .dashboard-kpis .card:nth-child(n+4) { grid-column: span 1; }
  .dashboard-kpis .card:nth-child(5) { grid-column: 1 / -1; }
  .dashboard-kpis + .panel > .cards,
  .dashboard-kpis + .panel + .panel > .cards { grid-template-columns: 1fr; }
}
.year-bar-chart {
  display: flex;
  min-height: 260px;
  align-items: stretch;
  gap: clamp(8px,2vw,22px);
  padding: 18px 10px 4px;
  border-bottom: 1px solid #e9edf3;
  background-image: repeating-linear-gradient(to top,transparent 0,transparent 51px,#edf0f4 52px);
}
.year-bar-column {
  display: grid;
  min-width: 40px;
  flex: 1;
  grid-template-rows: 24px 1fr 27px;
  align-items: end;
  text-align: center;
}
.year-bar-column > strong { color: #3c4654; font-size: 11px; }
.year-bar-column > span { align-self: center; color: #7d8590; font-size: 10px; font-weight: 700; }
.year-bar-rail { position: relative; height: 100%; }
.year-bar {
  position: absolute;
  right: 12%;
  bottom: 0;
  left: 12%;
  height: var(--bar-height);
  min-height: 8px;
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(180deg,#8c5bec,#5b7cf1);
  box-shadow: 0 8px 16px rgba(101,92,220,.22);
  transition: height .5s ease,filter .2s ease;
}
.year-bar-column:nth-child(3n+2) .year-bar { background: linear-gradient(180deg,#35c9c0,#17a8b8); box-shadow-color: rgba(23,168,184,.22); }
.year-bar-column:nth-child(3n) .year-bar { background: linear-gradient(180deg,#ffad43,#ff774b); box-shadow-color: rgba(255,119,75,.22); }
.year-bar-column:hover .year-bar { filter: brightness(1.07); }
.chart-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-top: 13px;
  color: #7d8590;
  font-size: 10px;
}
.chart-caption span { width: 9px; height: 9px; border-radius: 3px; background: #765ee8; }

/* Ranked package-program footprint */
.program-footprint { padding: 27px 29px; }
.program-footprint .panel-head { align-items: flex-end; margin-bottom: 23px; }
.panel-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #8b949f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.program-footprint .subtitle { max-width: 650px; margin-top: 6px; }
.program-footprint-list { display: grid; gap: 5px; }
.program-footprint-row {
  --project-color: #188f83;
  display: grid;
  grid-template-columns: minmax(190px,280px) minmax(220px,1fr) minmax(145px,auto);
  gap: 20px;
  align-items: center;
  min-height: 54px;
  padding: 7px 8px;
  border-radius: 10px;
  transition: background .18s ease,transform .18s ease;
}
.program-footprint-row:hover { background: #f7fafb; transform: translateX(2px); }
.program-footprint-label,.program-footprint-value { min-width: 0; }
.program-footprint-label strong {
  display: block;
  overflow: hidden;
  color: #283846;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.program-footprint-label small,.program-footprint-value small {
  display: block;
  margin-top: 3px;
  color: #8b959e;
  font-size: 9px;
  font-weight: 650;
}
.program-footprint-track {
  height: 11px;
  overflow: hidden;
  border-radius: 99px;
  background: #eaf0f1;
  box-shadow: inset 0 1px 2px rgba(35,55,65,.04);
}
.program-footprint-bar {
  display: block;
  width: var(--project-width);
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--project-color);
  box-shadow: 0 4px 10px color-mix(in srgb,var(--project-color) 25%,transparent);
  transition: width .55s ease,filter .18s ease;
}
.program-footprint-row:hover .program-footprint-bar { filter: brightness(1.08); }
.program-footprint-value { text-align: right; }
.program-footprint-value strong { color: #45515b; font-size: 11px; font-weight: 800; white-space: nowrap; }

@media (max-width:900px) {
  .program-footprint-row { grid-template-columns: minmax(145px,210px) 1fr; gap: 11px 16px; }
  .program-footprint-value { grid-column: 2; text-align: left; }
  .program-footprint-value small { display: inline; margin-left: 5px; }
}

@media (max-width:760px) {
  .dashboard-kpis .card { min-height: 154px; }
  .dashboard-kpis + .panel,
  .dashboard-kpis + .panel + .panel { padding: 18px; }
  .dashboard-kpis + .panel > .cards,
  .dashboard-kpis + .panel + .panel > .cards { grid-template-columns: 1fr; }
  .dashboard-kpis + .panel > .cards .card,
  .dashboard-kpis + .panel + .panel > .cards .card { min-height: 132px; }
  .year-bar-chart { gap: 7px; padding-right: 2px; padding-left: 2px; }
  .year-bar { right: 8%; left: 8%; }
  .year-bar-column > strong { font-size: 9px; }
  .year-bar-column > span { font-size: 9px; transform: rotate(-35deg); }
  .program-footprint { padding: 20px 16px; }
  .program-footprint .panel-head { align-items: flex-start; }
  .program-footprint-row { grid-template-columns: 1fr; gap: 7px; padding: 10px 6px; }
  .program-footprint-value { grid-column: 1; text-align: left; }
}

/* Barcode asset scanning */
.asset-mode-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.asset-mode {
  position: relative;
  display: flex;
  min-height: 82px;
  padding: 16px 18px 16px 58px;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #e0e7e7;
  border-radius: 12px;
  color: #53615f;
  background: #fff;
  box-shadow: 0 7px 20px rgba(43,63,61,.05);
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.asset-mode::before { position: absolute; left: 18px; display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; content: "1"; color: #0b7e70; background: #e4f8f4; font-weight: 800; }
.asset-mode:nth-child(2)::before { content: "∞"; color: #6844c7; background: #eee8ff; font-size: 17px; }
.asset-mode strong { font-size: 13px; }
.asset-mode span { margin-top: 3px; color: #8b9492; font-size: 10px; }
.asset-mode.active { color: #087466; border-color: #29aa98; background: linear-gradient(135deg,#f0fbf8,#fff); box-shadow: 0 8px 22px rgba(18,142,124,.1); }
.asset-mode.active::after { position: absolute; top: 0; right: 18px; left: 18px; height: 3px; border-radius: 0 0 4px 4px; content: ""; background: #19a990; }
.school-id-entry { border: 2px solid #27a995; font-size: 14px; font-weight: 700; letter-spacing: .35px; box-shadow: 0 0 0 4px rgba(39,169,149,.07); }
.school-name-display { color: #31504c; background: #f3f7f6; font-weight: 700; }
.field-hint { display: block; margin-top: 5px; color: #87918f; font-size: 10px; }
.check-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  margin: 12px 0 0;
  color: #1f3431;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.check-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #089884;
  flex: 0 0 auto;
}
.scanner-panel { border-top: 3px solid #14a890; }
.scan-workspace {
  display: grid;
  grid-template-columns: minmax(0,1.8fr) minmax(150px,.55fr);
  gap: 14px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #dce9e7;
  border-radius: 12px;
  background: linear-gradient(135deg,#f3fbf9,#f8f8fd);
}
.scan-entry label { color: #0c796c; font-size: 11px; font-weight: 800; }
.scan-input-row { display: flex; gap: 8px; }
.scan-input-row input,
.scan-input-row textarea {
  flex: 1;
  border: 2px solid #26aa98;
  background: #fff;
  font-size: 15px;
  box-shadow: 0 0 0 4px rgba(38,170,152,.08);
}
.scan-input-row textarea { min-height: 88px; resize: vertical; }
.scan-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg,#7650df,#3989ed);
  box-shadow: 0 9px 22px rgba(75,81,207,.18);
}
.scan-counter strong { font-size: 30px; line-height: 1; }
.scan-counter span { margin-top: 7px; font-size: 10px; }
.scan-list-wrap { grid-column: 1/-1; }
.scan-list { display: flex; min-height: 55px; flex-wrap: wrap; gap: 7px; align-content: flex-start; }
.scan-chip { display: flex; align-items: center; gap: 7px; padding: 7px 8px 7px 11px; border: 1px solid #dce6e5; border-radius: 20px; color: #32504d; background: #fff; font-size: 11px; box-shadow: 0 3px 9px rgba(40,63,61,.05); }
.scan-chip button { display: grid; width: 19px; height: 19px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #9a4c4c; background: #feecec; cursor: pointer; }
.scan-serial-storage { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }

@media (max-width:760px) {
  .asset-mode-switch { grid-template-columns: 1fr; }
  .scan-workspace { grid-template-columns: 1fr; padding: 13px; }
  .scan-counter { min-height: 90px; }
  .scan-list-wrap { grid-column: auto; }
  .scan-input-row { align-items: stretch; flex-direction: column; }
}

/* Personnel district totals */
.personnel-total-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0 18px; }
.personnel-total-card { position: relative; min-height: 118px; padding: 18px; overflow: hidden; border: 1px solid #e4e9eb; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(45,54,68,.055); }
.personnel-total-card::after { position: absolute; right: -20px; top: -20px; width: 76px; height: 76px; border-radius: 50%; content: ""; background: rgba(48,151,139,.09); }
.personnel-total-card span { display: block; color: #72807e; font-size: 10px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.personnel-total-card strong { display: block; margin: 10px 0 4px; color: #123b36; font-size: 30px; line-height: 1; }
.personnel-total-card small { color: #84908e; font-size: 10px; }
.personnel-total-card.primary { border: 0; color: #fff; background: linear-gradient(135deg,#117f70,#26b39e); }
.personnel-total-card.primary span,.personnel-total-card.primary strong,.personnel-total-card.primary small { color: #fff; }
.personnel-total-card.primary::after { background: rgba(255,255,255,.12); }
.personnel-filters { grid-template-columns: minmax(220px,1.35fr) repeat(5,minmax(120px,.72fr)) auto auto; }
.personnel-tabs { flex-wrap: wrap; }
.district-teacher-panel { margin: 18px 0; padding: 17px; border: 1px solid #e4e9eb; border-radius: 12px; background: #f8fafb; }
.district-teacher-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); gap: 9px; }
.district-teacher-card { display: grid; min-height: 92px; padding: 13px 14px; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #e0e7e7; border-radius: 10px; color: #52615f; background: #fff; transition: .18s ease; }
.district-teacher-card span { grid-column: 1/-1; overflow: hidden; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.district-teacher-card strong { color: #126f64; font-size: 22px; }
.district-teacher-card small { color: #87918f; font-size: 9px; text-align: right; }
.district-teacher-card:hover,.district-teacher-card.active { border-color: #28aa97; transform: translateY(-1px); box-shadow: 0 7px 17px rgba(20,132,116,.1); }
.district-teacher-card.active { background: #eaf8f5; }

/* Package recipient directory */
.package-recipient-filters { grid-template-columns: minmax(240px,1.6fr) minmax(210px,1.4fr) repeat(4,minmax(125px,1fr)); align-items: end; }
.package-recipient-filters .actions { grid-column: 1 / -1; }
.package-recipient-summary { grid-template-columns: repeat(5,minmax(0,1fr)); }
.package-recipient-name { font-size: 18px !important; line-height: 1.25; }

/* Explainable next-batch allocation planner */
.allocation-planner-filters { grid-template-columns: minmax(230px,1.5fr) repeat(2,minmax(110px,.55fr)) minmax(210px,1.2fr) repeat(4,minmax(120px,.7fr)); align-items: end; }
.allocation-planner-filters .actions { grid-column: 1 / -1; }
.allocation-summary-cards { grid-template-columns: repeat(5,minmax(0,1fr)); }
.allocation-method-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.allocation-method-grid > div { min-height: 92px; padding: 15px; border: 1px solid #dfe8e7; border-radius: 11px; background: linear-gradient(145deg,#f8fbfb,#f0f7f6); }
.allocation-method-grid strong { display: block; margin-bottom: 7px; color: #0f766e; font-size: 20px; }
.allocation-method-grid span { color: #6c7b7b; font-size: 11px; line-height: 1.45; }
.allocation-save-bar { display: grid; grid-template-columns: minmax(220px,1fr) minmax(280px,1.5fr) auto auto; gap: 12px; align-items: end; margin-bottom: 16px; padding: 14px; border: 1px solid #dfe8e7; border-radius: 12px; background: #f7faf9; }
.allocation-selected-counter { min-width: 110px; padding: 9px 12px; border-radius: 10px; text-align: center; background: #e6f7f4; }
.allocation-selected-counter strong { display: block; color: #0f766e; font-size: 24px; line-height: 1; }
.allocation-selected-counter span { display: block; margin-top: 4px; color: #69807d; font-size: 9px; }
.allocation-selected-counter.issue { background: #ffeded; }
.allocation-selected-counter.issue strong { color: #c54b54; }
.allocation-score { display: inline-grid; min-width: 43px; height: 27px; padding: 0 7px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg,#7650df,#3989ed); font-weight: 800; box-shadow: 0 5px 12px rgba(75,81,207,.16); }
.allocation-school-check { width: 19px; height: 19px; accent-color: #0d9488; }
.allocation-recommended-row { background: #f2fbf9; }
.allocation-status-form { margin-bottom: 4px; }
.allocation-saved-plan { border-top: 3px solid #20aa94; }

/* Data quality center */
.quality-filters { grid-template-columns: minmax(240px,1.5fr) repeat(2,minmax(150px,.8fr)) auto auto; align-items: end; }
.quality-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.quality-overview > div { min-height: 108px; padding: 17px; border: 1px solid #e0e8e7; border-radius: 13px; background: linear-gradient(145deg,#fff,#f6faf9); box-shadow: 0 7px 20px rgba(43,70,65,.05); }
.quality-overview span { display: block; color: #758481; font-size: 10px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.quality-overview strong { display: block; margin: 9px 0 4px; color: #123b36; font-size: 28px; line-height: 1; }
.quality-overview small { color: #82908e; font-size: 10px; }
.quality-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(225px,1fr)); gap: 12px; margin: 18px 0; }
.quality-card { display: grid; min-height: 118px; padding: 16px; grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; border: 1px solid #e0e7e6; border-radius: 13px; color: #354a47; background: #fff; box-shadow: 0 7px 19px rgba(43,70,65,.045); transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.quality-card:hover,.quality-card.active { border-color: #27aa97; transform: translateY(-2px); box-shadow: 0 11px 25px rgba(20,132,116,.11); }
.quality-card.active { background: linear-gradient(145deg,#f3fbf9,#fff); }
.quality-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; color: #0c796c; background: #e4f7f3; font-size: 21px; font-weight: 800; }
.quality-card > div > span { display: block; color: #566b67; font-size: 11px; font-weight: 800; line-height: 1.25; }
.quality-card strong { display: block; margin: 5px 0 4px; color: #123b36; font-size: 27px; line-height: 1; }
.quality-card small { display: block; color: #879390; font-size: 9px; line-height: 1.35; }
.quality-guide { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.quality-guide > div { min-height: 100px; padding: 16px; border: 1px solid #e1e8e6; border-radius: 12px; background: #f8faf9; }
.quality-guide strong { display: block; margin-bottom: 7px; color: #146f64; font-size: 12px; }
.quality-guide span { color: #6f7d7a; font-size: 10px; line-height: 1.5; }

/* Embedded map on the school profile */
.school-profile-map { margin-top: 14px; overflow: hidden; border: 1px solid #dce6e2; border-radius: 13px; background: #f7faf9; }
.school-profile-map iframe { display: block; width: 100%; height: 260px; border: 0; background: #e7ece8; }
.school-profile-map-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; }
.school-profile-map-actions > span { color: #6f7d7a; font-size: 10px; }
.school-profile-map-empty { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 16px; border: 1px dashed #bfcfca; border-radius: 13px; background: #f8faf9; }
.school-profile-map-empty > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #0d8576; background: #e3f6f2; font-size: 25px; }
.school-profile-map-empty > div { flex: 1; }
.school-profile-map-empty p { margin: 3px 0 0; }

/* School coordinate map picker */
.form-section-heading { margin-top: 8px; padding-top: 17px; border-top: 1px solid #e3e9e5; }
.form-section-heading h3 { margin: 0 0 4px; color: var(--forest-deep); font-family: var(--font-ui); font-size: 17px; }
.form-section-heading .subtitle { margin: 0; }
.school-coordinate-editor { padding: 17px; border: 1px solid #dfe7e2; border-radius: 14px; background: linear-gradient(135deg,#f8fbf8,#f4f7f3); }
.coordinate-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.coordinate-heading label { margin-bottom: 3px; font-size: 13px; }
.coordinate-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.school-map-dialog { width: min(1040px,calc(100vw - 40px)); max-width: none; padding: 0; overflow: hidden; border: 1px solid #dce5e0; border-radius: 20px; background: #fbfcfa; box-shadow: 0 28px 85px rgba(17,49,43,.28); }
.school-map-dialog::backdrop { background: rgba(13,36,33,.62); backdrop-filter: blur(3px); }
.school-map-dialog-head,.map-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.school-map-dialog-head { border-bottom: 1px solid #e3e9e5; }
.school-map-dialog-head h2 { margin: 0; color: var(--forest-deep); font-family: var(--font-ui); }
.map-dialog-close { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid #dce4df; border-radius: 50%; color: #39534f; background: #fff; font-size: 24px; cursor: pointer; }
.school-map-toolbar { display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-bottom: 1px solid #e8ece9; background: #f6f8f5; }
.map-coordinate-readout { margin-left: auto; color: #1b6f63; font-size: 12px; font-weight: 750; }
#school-location-map { width: 100%; height: min(58vh,560px); min-height: 390px; background: #e7ece8; }
.map-dialog-foot { border-top: 1px solid #e3e9e5; }
.map-dialog-foot .subtitle { margin: 0; }

/* Official identity assets */
.login-emblem.system-login-logo,
.school-login-seal.system-login-logo {
  padding: 4px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16,48,36,.2);
}
.system-login-logo img,
.system-logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.brand-mark.system-logo-mark {
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.google-school-login-label > .google-logo-tile {
  padding: 9px;
  border: 1px solid #dfe6e2;
  background: #fff;
}
.google-logo-tile img,
.google-g-logo {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.google-g-logo { flex: 0 0 auto; }

@media (max-width:760px) {
  .coordinate-heading,.school-map-dialog-head,.map-dialog-foot { align-items: stretch; flex-direction: column; }
  .coordinate-inputs { grid-template-columns: 1fr; }
  .school-map-toolbar { align-items: stretch; flex-direction: column; }
  .map-coordinate-readout { margin-left: 0; }
  #school-location-map { min-height: 350px; }
}

@media (max-width:900px) {
  .personnel-filters { grid-template-columns: 1fr 1fr; }
  .package-recipient-filters { grid-template-columns: 1fr 1fr; }
  .package-recipient-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .allocation-planner-filters { grid-template-columns: 1fr 1fr; }
  .allocation-summary-cards,.allocation-method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .allocation-save-bar { grid-template-columns: 1fr 1fr; }
  .quality-filters,.quality-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quality-guide { grid-template-columns: 1fr; }
}
@media (max-width:760px) {
  .personnel-total-cards { grid-template-columns: 1fr; }
  .personnel-filters { grid-template-columns: 1fr; }
  .district-teacher-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .package-recipient-filters,.package-recipient-summary { grid-template-columns: 1fr; }
  .allocation-planner-filters,.allocation-summary-cards,.allocation-method-grid,.allocation-save-bar { grid-template-columns: 1fr; }
  .quality-filters,.quality-overview,.quality-grid { grid-template-columns: 1fr; }
  .school-profile-map-actions,.school-profile-map-empty { align-items: stretch; flex-direction: column; }
  .school-profile-map iframe { height: 225px; }
}

@media (max-width:520px) {
  .dashboard-kpis { grid-template-columns: 1fr; }
  .dashboard-kpis .card,
  .dashboard-kpis .card:nth-child(n+4),
  .dashboard-kpis .card:nth-child(5) { grid-column: 1; }
}

/* Direct-entry school inventory workspace. */
.school-workspace-hero { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:28px; align-items:center; margin-bottom:18px; padding:26px 28px; border:1px solid #cfe0d5; border-radius:22px; color:#f7fff9; background:linear-gradient(135deg,#183e36,#2b6857); box-shadow:0 16px 35px rgba(21,64,53,.16); }
.school-workspace-hero h2 { margin:12px 0 8px; color:#fff; font-size:clamp(22px,3vw,32px); }
.school-workspace-hero p { max-width:760px; margin:0; color:#dcebe4; line-height:1.65; }
.workspace-progress { padding:18px; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:rgba(255,255,255,.1); text-align:center; }
.workspace-progress strong { display:block; color:#fff; font-size:34px; }
.workspace-progress span { color:#dcebe4; font-size:13px; }
.workspace-progress-track { height:8px; margin-top:12px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.18); }
.workspace-progress-track i { display:block; height:100%; border-radius:inherit; background:#efd071; }
.workspace-step-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.workspace-step { display:flex; gap:12px; align-items:center; min-height:82px; padding:14px; border:1px solid #dde6e0; border-radius:15px; color:inherit; background:#fff; text-decoration:none; transition:.18s ease; }
.workspace-step:hover { transform:translateY(-2px); border-color:#86af9e; box-shadow:0 10px 24px rgba(21,64,53,.1); }
.workspace-step > span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:#6e7d77; font-weight:800; }
.workspace-step.complete > span { background:#218568; }
.workspace-step strong,.workspace-step small { display:block; }
.workspace-step small { margin-top:4px; color:#6b7a75; line-height:1.35; }
.school-portal-app .quality-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.school-portal-app .quality-card { min-height:132px; }
.school-portal-app .nav-group { margin-bottom:15px; }
.school-portal-app .nav-group-label { display:block; padding:4px 12px 7px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.nav-logout-form { margin:0; }
.nav-logout-button { display:flex; width:100%; gap:12px; align-items:center; padding:10px 12px; border:0; border-radius:10px; color:#f2c7bf; background:transparent; font:inherit; font-weight:700; text-align:left; cursor:pointer; }
.nav-logout-button:hover { color:#fff; background:rgba(190,68,55,.2); }
.nav-logout-button .icon { width:20px; color:#df9a8c; text-align:center; }
@media (max-width:1000px) { .workspace-step-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .school-workspace-hero { grid-template-columns:1fr; padding:20px; } .workspace-progress { text-align:left; } .workspace-step-grid,.school-portal-app .quality-grid { grid-template-columns:1fr; } }

/* Shared add, edit, and delete modal layer. */
.crud-dialog { width:min(920px,calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 32px); padding:0; overflow:hidden; border:1px solid #dce5e0; border-radius:20px; background:#fbfcfa; box-shadow:0 28px 85px rgba(17,49,43,.28); }
.crud-dialog::backdrop { background:rgba(13,36,33,.62); backdrop-filter:blur(3px); }
.crud-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid #e3e9e5; }
.crud-dialog-head h2,.crud-dialog-head p { margin:0; }
.crud-dialog-close { display:grid; width:38px; height:38px; padding:0; flex:0 0 auto; place-items:center; border:1px solid #dce4df; border-radius:50%; color:#39534f; background:#fff; font-size:24px; cursor:pointer; }
.crud-dialog-body { max-height:calc(100vh - 125px); padding:20px; overflow:auto; }
.crud-dialog-body > .panel,.crud-dialog-body > form.panel { margin:0; box-shadow:none; }
.crud-confirm-message { margin:0 0 20px; font-size:17px; line-height:1.6; }
.crud-dialog-frame { display:block; width:100%; height:min(720px,calc(100vh - 170px)); border:0; border-radius:12px; background:#fff; }
.crud-frame-shell { position:relative; min-height:min(720px,calc(100vh - 170px)); border-radius:12px; background:#fff; }
.crud-preload-dock { position:fixed; left:-10000px; top:0; width:1px; height:1px; overflow:hidden; visibility:hidden; pointer-events:none; }
.crud-frame-loader { position:absolute; inset:0; z-index:2; display:none; align-content:center; justify-items:center; gap:9px; padding:30px; border-radius:12px; color:var(--forest-deep); text-align:center; background:linear-gradient(145deg,#f7fbfa,#eef6f5); }
.crud-frame-shell.is-loading .crud-frame-loader,
.crud-frame-shell.has-error .crud-frame-loader { display:grid; }
.crud-frame-shell.is-loading .crud-dialog-frame { visibility:hidden; }
.crud-frame-loader small { color:var(--muted); }
.crud-frame-loader .btn { margin-top:10px; }
.crud-spinner { width:38px; height:38px; border:4px solid #cae4e1; border-top-color:var(--fern); border-radius:50%; animation:crud-spin .75s linear infinite; }
@keyframes crud-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .crud-spinner { animation-duration:1.8s; } }
.admin-modal-page { min-height:100vh; background:#fff; }
.admin-modal-page .layout { display:block; min-height:0; }
.admin-modal-page .sidebar,
.admin-modal-page .topbar,
.admin-modal-page main > .flash { display:none !important; }
.admin-modal-page .layout > main { width:100%; margin:0 !important; padding:0 !important; }
.admin-modal-page main > .panel { margin:0; padding:4px; border:0; border-radius:0; box-shadow:none; background:#fff; }
.admin-modal-page main > .panel > .panel-head { margin-bottom:18px; }
.admin-modal-page main > .panel > .panel-head > div > h2 { display:none; }
.admin-modal-page main > .panel > .panel-head > div > .subtitle { color:var(--muted); }
.admin-modal-page main > .panel form .actions { position:sticky; bottom:0; margin-inline:-4px; padding:14px 4px 2px; background:linear-gradient(to bottom,rgba(255,255,255,.88),#fff 35%); }
@media (max-width:700px) { .crud-dialog { width:calc(100vw - 16px); max-height:calc(100vh - 16px); } .crud-dialog-head,.crud-dialog-body { padding:14px; } }

/* Asset bulk editor opens as a modal after multiple rows are selected. */
#admin-asset-bulk-form,#school-asset-bulk-form {
  display: none;
  position: fixed;
  z-index: 1200;
  top: 50%;
  left: 50%;
  width: min(980px,calc(100vw - 36px));
  max-height: calc(100vh - 48px);
  margin: 0;
  overflow: auto;
  transform: translate(-50%,-50%);
  border: 1px solid #cbded8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(10,42,36,.38);
}
.asset-bulk-modal-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #d5e1dd;
  border-radius: 50%;
  color: #31514b;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.device-count-track { height: 8px; margin: -4px 0 12px; overflow: hidden; border-radius: 99px; background: #edf3f1; }
.device-count-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#16a58e,#50c4b1); }
@media (max-width:760px) {
  #admin-asset-bulk-form,#school-asset-bulk-form { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
}

/* Admin navigation groups and organized dashboard — 2026-08 */
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 22px 17px 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.brand { flex: 0 0 auto; margin-bottom: 22px; padding: 0 5px; }
.nav { display: grid; flex: 0 0 auto; gap: 14px; }
.nav-group { display: grid; gap: 2px; }
.nav-group-label {
  display: block;
  padding: 0 13px 5px;
  color: rgba(220,232,224,.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.nav-group a {
  min-height: 38px;
  margin: 0;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 12.5px;
}
.nav-group a.active { box-shadow: 0 6px 16px rgba(0,0,0,.11); }
.nav-group .icon { width: 20px; font-size: 15px; }
.sidebar-note {
  position: static;
  margin-top: 18px;
  padding: 11px 12px;
  font-size: 10px;
}
.dashboard-jump-nav {
  position: sticky;
  top: 10px;
  z-index: 12;
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid #e4e9ec;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(35,55,68,.07);
  backdrop-filter: blur(12px);
}
.dashboard-jump-nav a {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 9px;
  color: #61717a;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-jump-nav a:hover { color: #0c6f61; background: #eaf7f3; }
.dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 18px;
  align-items: start;
}
.dashboard-shell > * { margin: 0; }
.dashboard-shell .dashboard-kpis { grid-column: 1 / -1; order: 1; }
.dashboard-shell .dashboard-coverage { grid-column: 1 / -1; order: 2; margin: 0; }
.dashboard-shell .dashboard-personnel { grid-column: 1; order: 3; }
.dashboard-shell .dashboard-connectivity { grid-column: 2; order: 4; }
.dashboard-shell .dashboard-projects { grid-column: 1; order: 5; }
.dashboard-shell .dashboard-devices { grid-column: 2; order: 6; }
.dashboard-shell .dashboard-package-mix { grid-column: 1 / -1; order: 7; }
.dashboard-shell .dashboard-latest { grid-column: 1 / -1; order: 8; }
.dashboard-shell .dashboard-snapshot-panel .cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.dashboard-shell .dashboard-personnel .cards .card:first-child { grid-column: 1 / -1; }
.dashboard-shell .dashboard-connectivity .cards { grid-template-columns: 1fr !important; }
.dashboard-shell .dashboard-snapshot-panel .cards .card {
  min-height: 112px !important;
  padding: 17px 18px !important;
}
.dashboard-shell .dashboard-snapshot-panel .cards .card strong {
  margin: 7px 0 4px !important;
  font-size: 25px !important;
}
.dashboard-shell .dashboard-snapshot-panel .panel-head { margin-bottom: 14px !important; }
.dashboard-shell .dashboard-snapshot-panel .panel-head h2 { font-size: 18px; }
.dashboard-shell section[id], .dashboard-shell div[id] { scroll-margin-top: 78px; }

@media (max-width: 1180px) {
  .dashboard-shell { grid-template-columns: 1fr; }
  .dashboard-shell > * { grid-column: 1 !important; }
}
@media (max-width: 760px) {
  .sidebar { overflow: visible; }
  .nav { grid-template-columns: 1fr 1fr; align-items: start; }
  .nav-group-label { padding-left: 8px; }
  .dashboard-jump-nav { top: 4px; margin-inline: -4px; }
  .dashboard-shell .dashboard-snapshot-panel .cards { grid-template-columns: 1fr !important; }
  .dashboard-shell .dashboard-personnel .cards .card:first-child { grid-column: 1; }
}
@media (max-width: 480px) {
  .nav { grid-template-columns: 1fr; }
}
/* Organic luxury green surface palette — reduced white */
:root {
  --ui-canvas: #e7ece4;
  --ui-canvas-deep: #dce5dc;
  --ui-ivory: #f8f6ed;
  --ui-sage: #edf4ec;
  --ui-mint: #e7f3ee;
  --ui-gold-wash: #f5efdd;
  --ui-line: #d2ddd0;
  --ui-forest: #123d32;
  --ui-forest-soft: #1d5948;
}
html, body { background: var(--ui-canvas); }
body {
  background:
    radial-gradient(circle at 88% 4%, rgba(83,125,94,.18), transparent 30rem),
    radial-gradient(circle at 8% 92%, rgba(182,154,92,.13), transparent 28rem),
    linear-gradient(145deg,var(--ui-canvas),var(--ui-canvas-deep));
}
.layout { background: transparent; }
main {
  background:
    linear-gradient(135deg,rgba(255,255,255,.2),transparent 42%),
    transparent;
}
.sidebar {
  color: #eef5ef;
  background:
    radial-gradient(circle at 0 0,rgba(143,168,142,.24),transparent 18rem),
    linear-gradient(180deg,#173f34 0%,#102f28 58%,#0c2821 100%);
  border-right-color: rgba(225,237,228,.12);
  box-shadow: 12px 0 32px rgba(14,46,37,.12);
}
.brand strong { color: #f7f4e8; }
.brand small { color: #a9c0b1; }
.brand-mark {
  color: #143a2f;
  background: linear-gradient(145deg,#d9c688,#a98c50);
  box-shadow: 0 8px 22px rgba(7,29,23,.28);
}
.nav-group-label { color: rgba(202,220,207,.62); }
.nav-group a { color: #bad0c1; }
.nav-group a:hover { color: #fffdf5; background: rgba(230,239,227,.09); }
.nav-group a.active {
  color: #173c31;
  background: linear-gradient(135deg,#eee9d7,#dce6d6);
  box-shadow: inset 3px 0 #b69a5c,0 7px 17px rgba(5,25,19,.18);
}
.nav-group a.active::before { display: none; }
.nav-group .icon { color: #c8b170; }
.sidebar-note {
  color: #a9beb0;
  border-color: rgba(226,237,228,.12);
  background: rgba(242,244,230,.055);
}
.topbar {
  border-bottom-color: #d4dfd3;
  background: rgba(246,244,234,.9);
  box-shadow: 0 8px 26px rgba(31,66,51,.06);
}
.topbar::before { color: #557266; background: #e5ece3; }
.card,.panel {
  border-color: var(--ui-line);
  background: rgba(248,246,237,.94);
  box-shadow: 0 9px 26px rgba(30,63,47,.07);
}
.panel .card {
  border-color: #d7e1d5;
  background: linear-gradient(145deg,#f7f9f3,#edf3eb);
}
.table-wrap {
  border-color: #d5dfd4;
  background: #f8f7f0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
th { color: #5c7469; background: #e6eee5; border-bottom-color: #d2ddd1; }
td { background: #faf9f3; border-bottom-color: #e3e8df; }
tr:nth-child(even) td { background: #f4f6ef; }
tr:hover td { background: #eaf3e9; }
input,select,textarea { border-color: #cedacf; background: #f7f8f1; }
.detail-grid > div,.summary-chip { border-color: #d3dfd3; background: #edf3e9; }
.btn.secondary { color: #31594a; border-color: #cbd9cf; background: #edf3ea; }
.dashboard-jump-nav {
  border-color: #ccdacf;
  background: rgba(239,244,235,.93);
  box-shadow: 0 8px 24px rgba(31,68,51,.09);
}
.dashboard-jump-nav a { color: #48675a; }
.dashboard-jump-nav a:hover { color: #143f32; background: #dcebdd; }
.dashboard-shell .dashboard-kpis .card {
  color: #fffdf5;
  border: 0;
  box-shadow: 0 12px 26px rgba(23,63,50,.16);
}
.dashboard-shell .dashboard-kpis .card span,
.dashboard-shell .dashboard-kpis .card strong,
.dashboard-shell .dashboard-kpis .card small { color: inherit; }
.dashboard-shell .dashboard-kpis .card:nth-child(1) { background: linear-gradient(135deg,#173f32,#286a51); }
.dashboard-shell .dashboard-kpis .card:nth-child(2) { background: linear-gradient(135deg,#52765b,#7f9a72); }
.dashboard-shell .dashboard-kpis .card:nth-child(3) { background: linear-gradient(135deg,#9b7d3f,#c1a45e); }
.dashboard-shell .dashboard-kpis .card:nth-child(4) { background: linear-gradient(135deg,#9b5f50,#bc7b64); }
.dashboard-shell .dashboard-kpis .card:nth-child(5) { background: linear-gradient(135deg,#244f43,#477a66); }
.dashboard-shell .dashboard-kpis .card-icon {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.13);
}
.dashboard-shell .dashboard-coverage > .panel:first-child { background: linear-gradient(145deg,#f4f7ee,#e8f1e8); }
.dashboard-shell .dashboard-coverage > .panel:last-child { background: linear-gradient(145deg,#f7f3e7,#eee6ce); }
.dashboard-shell .dashboard-personnel { background: linear-gradient(145deg,#f4f6ec,#e8f0e5); }
.dashboard-shell .dashboard-connectivity { background: linear-gradient(145deg,#eef6f0,#dfeee7); }
.dashboard-shell .dashboard-projects { background: linear-gradient(145deg,#f7f2e4,#eee5cd); }
.dashboard-shell .dashboard-devices { background: linear-gradient(145deg,#edf4ec,#dfece3); }
.dashboard-shell .dashboard-package-mix { background: linear-gradient(145deg,#f6f3e9,#e9eee1); }
.dashboard-shell .dashboard-latest { background: linear-gradient(145deg,#f6f5ed,#ebf0e7); }
.dashboard-shell .dashboard-snapshot-panel .cards .card { background: rgba(252,251,244,.66); }
.donut-chart::before { background: #f5f3e8; }
.bar-track,.device-count-track { background: #dbe5da; }

/* ============================================================
   Modern unified product interface — 2026 refresh
   ============================================================ */
:root {
  --modern-canvas: #f3f6f8;
  --modern-surface: #ffffff;
  --modern-surface-soft: #f8fafb;
  --modern-ink: #14282d;
  --modern-muted: #52686e;
  --modern-line: #dfe7ea;
  --modern-brand: #0f766e;
  --modern-brand-strong: #0a4f4b;
  --modern-brand-deep: #082f2e;
  --modern-accent: #d6aa52;
  --modern-danger: #c24b43;
  --modern-shadow-sm: 0 2px 8px rgba(15,42,48,.05);
  --modern-shadow: 0 12px 32px rgba(15,42,48,.08);
  --modern-shadow-lg: 0 24px 70px rgba(10,38,43,.16);
  --modern-radius-sm: 10px;
  --modern-radius: 16px;
  --modern-radius-lg: 22px;
}

html, body {
  color: var(--modern-ink);
  background: var(--modern-canvas);
}
body {
  background:
    radial-gradient(circle at 92% 2%, rgba(15,118,110,.07), transparent 28rem),
    linear-gradient(180deg,#f7f9fa 0,#f2f5f7 100%);
}
a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.layout {
  display:block;
  min-height: 100vh;
  background: transparent;
}
.sidebar {
  position: fixed;
  top: 0;
  left:0;
  z-index:50;
  width:252px;
  height: 100vh;
  padding: 22px 16px 18px;
  color: #eaf5f3;
  border-right: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 15% 0,rgba(45,212,191,.14),transparent 18rem),
    linear-gradient(180deg,#0b3c3a 0%,#082f2e 54%,#062725 100%);
  box-shadow: 12px 0 40px rgba(8,47,46,.13);
}
.brand {
  min-height: 58px;
  margin: 0 5px 26px;
  padding: 5px;
  gap: 12px;
}
.brand-mark.system-logo-mark { width: 46px; height: 46px; flex: 0 0 46px; padding: 2px; }
.brand strong { color:#fff; font-size:14px; font-weight:700; line-height:1.25; }
.brand small { margin-top:4px; color:#8fb5b1; font-size:10px; }
.nav { gap: 17px; }
.nav-group { gap: 3px; }
.nav-group-label {
  padding: 0 12px 7px;
  color: #729b97;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.35px;
}
.nav-group a,
.nav-logout-button {
  min-height: 42px;
  padding: 10px 11px;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #b8d0cd;
  font-size: 12px;
  font-weight: 600;
}
.nav-group a:hover,
.nav-logout-button:hover { color:#fff; background:rgba(255,255,255,.07); }
.nav-group a.active {
  color:#073c38;
  border-color:rgba(255,255,255,.7);
  background:#f7fbfa;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.nav-group a.active::before { display:none; }
.nav-group .icon,
.nav-logout-button .icon { color:#d6b76f; font-size:15px; }
.nav-group a.active .icon { color:#0f766e; }
.image-quality-icon { overflow:hidden; border:1px solid #dfe8ea; background:#f5f8f9; box-shadow:none; }
.image-quality-icon img { display:block; width:33px; height:33px; object-fit:contain; }
.button-icon { display:inline-block; width:16px; height:16px; margin-right:7px; object-fit:contain; vertical-align:-3px; }
.sidebar-note {
  margin-top:auto;
  padding:13px 14px;
  color:#9dbbb8;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:rgba(255,255,255,.045);
  line-height:1.55;
}
.sidebar-note strong { color:#e9f4f2; }

.layout > main {
  min-width:0;
  margin-left:252px;
  padding:28px 32px 60px;
  background:transparent;
}
.topbar {
  position:sticky;
  top:0;
  z-index:30;
  min-height:90px;
  margin:-28px -32px 26px;
  padding:20px 32px;
  border-bottom:1px solid rgba(213,224,228,.9);
  background:rgba(255,255,255,.88);
  box-shadow:0 7px 25px rgba(20,47,55,.055);
  backdrop-filter:blur(18px);
}
.topbar::before {
  width:40px;
  height:40px;
  border:1px solid #dfe8e7;
  border-radius:12px;
  color:var(--modern-brand);
  background:#f0f7f6;
}
.topbar h1 { color:#102a2f; font-size:28px; font-weight:750; letter-spacing:-.55px; }
.topbar .subtitle { max-width:900px; margin-top:4px; color:#718287; font-size:11px; line-height:1.55; }
.topbar-actions { gap:9px; }

.cards { gap:14px; margin-bottom:18px; }
.card,
.panel {
  color:var(--modern-ink);
  border:1px solid var(--modern-line);
  background:var(--modern-surface);
  box-shadow:var(--modern-shadow-sm);
}
.card { position:relative; padding:20px; border-radius:var(--modern-radius); overflow:hidden; }
.card:hover { border-color:#c9dadc; box-shadow:var(--modern-shadow); transform:translateY(-2px); }
.card > span { color:#6f8186; font-size:10px; font-weight:750; letter-spacing:.8px; }
.card strong { margin:9px 0 4px; color:#173238; font-size:30px; font-weight:750; letter-spacing:-.7px; }
.card small { color:#77898e; line-height:1.5; }
.panel { margin-bottom:18px; padding:22px; border-radius:var(--modern-radius-lg); box-shadow:var(--modern-shadow-sm); }
.panel .panel { background:var(--modern-surface-soft); box-shadow:none; }
.panel-head { gap:16px; margin-bottom:18px; }
.panel h2,
.panel-head h2 { color:#142e34; font-size:18px; font-weight:750; letter-spacing:-.2px; }
.panel h3 { color:#18353a; font-size:15px; font-weight:700; }
.subtitle,.muted { color:var(--modern-muted); }

.school-workspace-hero {
  min-height:210px;
  margin-bottom:18px;
  padding:30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  color:#effcfb;
  background:
    radial-gradient(circle at 88% 0,rgba(94,234,212,.2),transparent 18rem),
    linear-gradient(135deg,#0a4f4b,#0f766e 62%,#168980);
  box-shadow:0 20px 45px rgba(15,92,86,.18);
}
.school-workspace-hero h2 { max-width:760px; color:#fff; font-size:31px; font-weight:750; letter-spacing:-.7px; line-height:1.18; }
.school-workspace-hero p { max-width:760px; color:#cce7e4; line-height:1.65; }
.school-workspace-hero .badge { color:#0b5c56; background:#e8f8f5; }
.workspace-progress {
  min-width:220px;
  padding:22px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.workspace-progress strong { font-size:30px; font-weight:750; }
.workspace-progress-track { background:rgba(255,255,255,.2); }
.workspace-progress-track i { background:#f0c86c; }

.school-portal-app .school-workspace-hero + .cards .card {
  min-height:124px;
  color:var(--modern-ink);
  border-top:3px solid var(--modern-brand);
  background:#fff;
}
.school-portal-app .school-workspace-hero + .cards .card > span { color:#6f8186; }
.school-portal-app .school-workspace-hero + .cards .card > strong { color:#173238; }
.school-portal-app .school-workspace-hero + .cards .card > small { color:#77898e; }
.school-portal-app .school-workspace-hero + .cards .card:nth-child(2) { border-top-color:#3c82c6; }
.school-portal-app .school-workspace-hero + .cards .card:nth-child(3) { border-top-color:#a779c7; }
.school-portal-app .school-workspace-hero + .cards .card:nth-child(4) { border-top-color:#d6aa52; }
.school-portal-app .school-workspace-hero + .cards .card::after {
  content:"";
  position:absolute;
  top:18px;
  right:18px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:currentColor;
  opacity:.16;
  box-shadow:0 0 0 7px currentColor;
}
.school-portal-app main > .cards .card {
  color:var(--modern-ink);
  border:1px solid var(--modern-line);
  border-top:3px solid var(--modern-brand);
  background:#fff;
  box-shadow:var(--modern-shadow-sm);
}
.school-portal-app main > .cards .card:nth-child(2) { border-top-color:#3c82c6; }
.school-portal-app main > .cards .card:nth-child(3) { border-top-color:#9b75bd; }
.school-portal-app main > .cards .card:nth-child(4) { border-top-color:#d6aa52; }
.school-portal-app main > .cards .card > span { color:#6f8186; }
.school-portal-app main > .cards .card > strong { color:#173238; }
.school-portal-app main > .cards .card > small { color:#77898e; }

.workspace-step-grid { gap:12px; }
.workspace-step {
  min-height:90px;
  padding:16px;
  border:1px solid var(--modern-line);
  border-radius:14px;
  background:#fff;
}
.workspace-step:hover { border-color:#9fc9c5; background:#f5fbfa; transform:translateY(-2px); box-shadow:var(--modern-shadow-sm); }
.workspace-step > span { background:#e8eeef; color:#52686d; }
.workspace-step.complete > span { color:#fff; background:var(--modern-brand); }
.workspace-step strong { color:#19353a; }
.workspace-step small { color:#74868b; }

.quality-grid { gap:12px; }
.quality-card {
  min-height:116px;
  padding:17px;
  border:1px solid var(--modern-line);
  border-radius:15px;
  background:#fff;
  box-shadow:none;
}
.quality-card:hover { border-color:#9fc9c5; background:#f7fbfb; box-shadow:var(--modern-shadow-sm); transform:translateY(-2px); }
.quality-icon { color:#fff; background:linear-gradient(145deg,#159187,#0f766e); box-shadow:0 8px 18px rgba(15,118,110,.18); }
.quality-icon.image-quality-icon {
  border:1px solid #d2e4e2;
  background:linear-gradient(145deg,#f5faf9,#e9f4f2);
  box-shadow:0 6px 15px rgba(15,80,75,.08);
}
.quality-icon.image-quality-icon img {
  width:30px;
  height:30px;
  filter:grayscale(1) sepia(.65) saturate(4.2) hue-rotate(118deg) brightness(.72) contrast(1.08);
  opacity:.92;
}
.quality-card:hover .quality-icon.image-quality-icon { border-color:#abd0cb; background:#e4f2f0; }
.quality-card strong { color:#173238; }
.quality-card > div > span,.quality-card small { color:#708287; }

.btn {
  min-height:40px;
  padding:9px 15px;
  border:1px solid var(--modern-brand);
  border-radius:10px;
  color:#fff;
  background:linear-gradient(180deg,#13867d,#0f716a);
  box-shadow:0 5px 14px rgba(15,118,110,.16);
  font-size:11px;
  font-weight:700;
}
.btn:hover { color:#fff; border-color:#0b625c; background:#0d6962; box-shadow:0 8px 20px rgba(15,118,110,.2); transform:translateY(-1px); }
.btn.secondary {
  color:#36575c;
  border-color:#d6e1e3;
  background:#fff;
  box-shadow:0 2px 7px rgba(20,47,55,.04);
}
.btn.secondary:hover { color:#0d625d; border-color:#9fc9c5; background:#f4faf9; }
.btn.danger { color:#fff; border-color:#b94039; background:#c64e46; }
.btn.small { min-height:32px; padding:6px 10px; border-radius:8px; font-size:10px; }

label { color:#405b61; font-size:10px; font-weight:750; letter-spacing:.45px; }
input,select,textarea {
  min-height:43px;
  padding:10px 12px;
  color:#173238;
  border:1px solid #d5e0e3;
  border-radius:10px;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(18,50,57,.025);
}
input[type="checkbox"],
input[type="radio"] {
  width:18px;
  height:18px;
  min-height:18px;
  padding:0;
  border-radius:5px;
  box-shadow:none;
  accent-color:var(--modern-brand);
}
input[type="radio"] { border-radius:50%; }
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { display:flex; gap:8px; align-items:center; min-height:22px; }
textarea { min-height:96px; line-height:1.55; }
input:hover,select:hover,textarea:hover { border-color:#b8cdd0; }
input:focus,select:focus,textarea:focus {
  border-color:#4ba59d;
  background:#fff;
  box-shadow:0 0 0 3px rgba(15,118,110,.11);
  outline:none;
}
.form-grid { gap:15px; }
.actions { gap:8px; }

.table-wrap {
  border:1px solid var(--modern-line);
  border-radius:15px;
  background:#fff;
  box-shadow:none;
}
table { background:#fff; }
th {
  padding:12px 13px;
  color:#60747a;
  border-bottom:1px solid #dce6e8;
  background:#f4f7f8;
  font-size:9px;
  font-weight:800;
  letter-spacing:.75px;
}
td { padding:13px; color:#29444a; border-bottom:1px solid #edf1f2; background:#fff; line-height:1.48; }
tr:nth-child(even) td { background:#fbfcfc; }
tr:hover td { background:#f3faf9; }
tbody tr:last-child td { border-bottom:0; }
.badge,
.summary-chip {
  padding:6px 9px;
  border:1px solid #cde8e3;
  border-radius:999px;
  color:#0c6b63;
  background:#eaf8f5;
  font-size:9px;
  font-weight:750;
}
.badge.pending { color:#8a6415; border-color:#ecdcae; background:#fff7df; }
.badge.issue { color:#a33e37; border-color:#efc9c5; background:#fff0ef; }
.detail-grid { gap:11px; }
.detail-grid > div {
  padding:14px;
  border:1px solid var(--modern-line);
  border-radius:12px;
  background:#f8fafb;
}
.detail-grid span { color:#728489; }
.detail-grid strong { color:#173238; }
.flash { border:1px solid #bde2d8; border-radius:12px; background:#eaf8f3; box-shadow:var(--modern-shadow-sm); }
.flash.error { border-color:#efc5c2; background:#fff0ef; }

.dashboard-jump-nav {
  top:94px;
  padding:7px;
  border:1px solid var(--modern-line);
  border-radius:13px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--modern-shadow-sm);
}
.dashboard-jump-nav a { color:#60757a; border-radius:8px; }
.dashboard-jump-nav a:hover { color:#0d655f; background:#eaf7f5; }
.dashboard-shell { gap:16px; }
.dashboard-shell > *,
.dashboard-shell .program-footprint,
.dashboard-shell .program-footprint-list { min-width:0; max-width:100%; }
.dashboard-shell .program-footprint { overflow:hidden; }
.dashboard-shell .program-footprint .panel-head > div { min-width:0; }
.dashboard-shell .program-footprint .subtitle { max-width:100%; overflow-wrap:anywhere; }
.dashboard-shell .program-footprint-row {
  width:100%;
  max-width:100%;
  grid-template-columns:minmax(0,1.15fr) minmax(90px,1fr) minmax(90px,.68fr);
  gap:12px;
}
.dashboard-shell .program-footprint-value small { overflow-wrap:anywhere; }
.dashboard-shell .dashboard-kpis .card {
  color:#18363b;
  border:1px solid var(--modern-line);
  border-top:3px solid var(--modern-brand);
  background:#fff !important;
  box-shadow:var(--modern-shadow-sm);
}
.dashboard-shell .dashboard-kpis .card span,
.dashboard-shell .dashboard-kpis .card small { color:#6c8085; }
.dashboard-shell .dashboard-kpis .card strong { color:#163238; }
.dashboard-shell .dashboard-kpis .card:nth-child(2) { border-top-color:#3d83c6; }
.dashboard-shell .dashboard-kpis .card:nth-child(3) { border-top-color:#9b75bd; }
.dashboard-shell .dashboard-kpis .card:nth-child(4) { border-top-color:#d2a64d; }
.dashboard-shell .dashboard-kpis .card:nth-child(5) { border-top-color:#d06b61; }
.dashboard-shell .dashboard-coverage > .panel,
.dashboard-shell .dashboard-personnel,
.dashboard-shell .dashboard-connectivity,
.dashboard-shell .dashboard-projects,
.dashboard-shell .dashboard-devices,
.dashboard-shell .dashboard-package-mix,
.dashboard-shell .dashboard-latest { background:#fff; }
.dashboard-shell .dashboard-snapshot-panel .cards .card { background:#f8fafb !important; }
.donut-chart::before { background:#fff; }
.bar-track,.device-count-track { background:#e7eef0; }

@media (max-width:1650px) {
  .dashboard-shell { grid-template-columns:minmax(0,1fr); }
  .dashboard-shell > * { grid-column:1 !important; }
  .dashboard-shell .program-footprint-row {
    grid-template-columns:minmax(180px,1.05fr) minmax(180px,1fr) minmax(125px,.55fr);
    gap:16px;
  }
}

@media (max-width:900px) {
  .dashboard-shell .program-footprint-row { grid-template-columns:minmax(145px,210px) minmax(0,1fr); gap:11px 16px; }
  .dashboard-shell .program-footprint-value { grid-column:2; text-align:left; }
}

@media (max-width:600px) {
  .dashboard-shell .program-footprint-row { grid-template-columns:minmax(0,1fr); gap:7px; }
  .dashboard-shell .program-footprint-value { grid-column:1; }
}

.crud-dialog,
#admin-asset-bulk-form,
#school-asset-bulk-form {
  border:1px solid #d8e3e5;
  border-radius:20px;
  background:#fff;
  box-shadow:var(--modern-shadow-lg);
}
.crud-dialog-head { border-bottom:1px solid #e4ebed; background:#f8fafb; }
.crud-dialog-close,.asset-bulk-modal-close { border-color:#d8e3e5; background:#fff; }
.crud-dialog .crud-dialog-close {
  color:#4c666b;
  border:1px solid #d8e3e5;
  background:#fff;
  box-shadow:none;
}
.crud-dialog .crud-dialog-close:hover { color:#0f766e; border-color:#9fc9c5; background:#f2f9f8; }
.crud-dialog-body > .panel > h3:first-child { display:none; }

.school-login-page .school-login-card,
.login-card { border-color:rgba(255,255,255,.5); background:#fff; box-shadow:0 28px 80px rgba(6,41,40,.25); }
.school-login-brand-panel { background:linear-gradient(145deg,#0b514c,#0f8a7f); }
.google-school-login-card { border-color:#c8e2de; background:#f6fbfa; }

/* Keep identity artwork proportional and maintain readable text contrast. */
.login-emblem.system-login-logo,
.school-login-seal.system-login-logo,
.brand-mark.system-logo-mark {
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.login-emblem.system-login-logo,
.school-login-seal.system-login-logo { min-width:66px; min-height:66px; }
.school-login-seal.system-login-logo { min-width:76px; min-height:76px; }
.system-login-logo img,
.system-logo-mark img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* Accessible contrast defaults shared by the admin and school portals. */
.subtitle,.muted,.card small,.workspace-step small,.quality-card small,
.quality-card > div > span,.detail-grid span { color:#52686e; }
.topbar .subtitle,.card > span,.school-portal-app main > .cards .card > span,
.school-portal-app main > .cards .card > small,
.dashboard-shell .dashboard-kpis .card span,
.dashboard-shell .dashboard-kpis .card small { color:#52686e; }
.nav-group a,.nav-logout-button { color:#d0e2df; }
.nav-group-label { color:#9fc0bc; }
.brand small,.sidebar-note { color:#b8d0cd; }
.school-login-brand-panel p { color:#e5f4ef; }
.school-login-feature-list span { color:#fff; }
.school-login-content > .subtitle,
.google-school-login-label small,
.google-school-login-card > .muted,
.login-footnote { color:#526860; }
th { color:#4e656b; }
label { color:#344f55; }

/* District directory */
.district-summary-cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
.level-legend { display:flex; gap:16px; flex-wrap:wrap; color:var(--modern-muted); font-size:11px; font-weight:700; }
.level-legend span { display:flex; gap:7px; align-items:center; }
.level-dot { display:block; width:10px; height:10px; border-radius:50%; }
.level-dot.elementary,.level-bar.elementary { background:#0f8177; }
.level-dot.high-school,.level-bar.high-school { background:#3d83c6; }
.district-level-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.district-level-card { padding:17px; border:1px solid var(--modern-line); border-radius:14px; background:#f9fbfb; }
.district-level-title { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }
.district-level-title strong { color:#173238; }
.district-level-title span { color:var(--modern-muted); font-size:11px; }
.level-bar-row { display:grid; grid-template-columns:82px minmax(0,1fr) 34px; gap:10px; align-items:center; margin-top:9px; color:#52686e; font-size:10px; }
.level-bar-row > strong { color:#173238; text-align:right; }
.level-bar-track { height:8px; overflow:hidden; border-radius:999px; background:#e7eef0; }
.level-bar { display:block; height:100%; min-width:2px; border-radius:inherit; }
@media (max-width:900px) { .district-summary-cards,.district-level-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .district-summary-cards,.district-level-grid { grid-template-columns:1fr; } }

/* Final navigation layout guard: older responsive rules must not collapse the
   fixed desktop sidebar into an empty rail. */
@media (min-width:761px) {
  .layout > .sidebar {
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    width:252px;
    height:100vh;
    padding:22px 16px 18px;
    flex-direction:column;
    visibility:visible;
    opacity:1;
    overflow-x:hidden;
    overflow-y:auto;
    transform:none;
  }
  .layout > main {
    width:auto;
    margin-left:252px;
  }
  .topbar::before { display:none; }
}

@media (max-width:760px) {
  .layout > .sidebar {
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    padding:12px;
    overflow:visible;
    transform:none;
  }
  .layout > .sidebar .brand { display:flex; }
  .layout > .sidebar .nav {
    display:flex;
    width:100%;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .layout > .sidebar .nav-group { display:flex; flex:0 0 auto; }
  .layout > .sidebar .nav-group a { display:flex; }
  .layout > main { width:100%; margin-left:0; }
}

@media (max-width:1100px) {
  .sidebar { width:220px; }
  .layout > main { margin-left:220px; }
  .layout > main { padding:24px 22px 50px; }
  .topbar { margin:-24px -22px 22px; padding:18px 22px; }
}
@media (max-width:760px) {
  .layout { display:block; }
  .sidebar { position:static; width:auto; height:auto; padding:14px; border-right:0; }
  .brand { min-height:auto; margin-bottom:12px; }
  .nav { display:flex; gap:7px; overflow-x:auto; }
  .nav-group { display:flex; gap:5px; }
  .layout .nav-group-label,.school-portal-app .nav-group-label,.sidebar-note { display:none !important; }
  .nav-group a,.nav-logout-button { min-height:38px; flex:0 0 auto; white-space:nowrap; }
  .layout > main { margin-left:0; padding:18px 12px 38px; }
  .topbar { position:relative; min-height:auto; margin:-18px -12px 18px; padding:16px 13px; }
  .topbar h1 { font-size:24px; }
  .topbar-actions { flex-wrap:wrap; }
  .school-workspace-hero { min-height:0; padding:22px; border-radius:19px; }
  .school-workspace-hero h2 { font-size:25px; }
  .workspace-progress { width:100%; min-width:0; }
  .panel { padding:17px; border-radius:17px; }
  .cards { grid-template-columns:1fr 1fr; }
  .dashboard-shell,.dashboard-shell > *,
  .dashboard-shell .dashboard-kpis { width:100%; min-width:0; }
  .dashboard-shell .dashboard-kpis { grid-template-columns:1fr !important; }
  .dashboard-shell .dashboard-kpis .card { width:100%; min-width:0; }
  .table-wrap { border-radius:12px; }
}
@media (max-width:480px) {
  .cards { grid-template-columns:1fr; }
  .topbar-actions,.topbar-actions .btn,.topbar-actions form { width:100%; }
  .topbar-actions .btn { justify-content:center; }
}

@media (max-width:760px) {
  .received-packages-wrap { overflow:visible; border:0; }
  .received-packages-table, .received-packages-table tbody,
  .received-packages-table tr, .received-packages-table td { display:block; width:100%; }
  .received-packages-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .received-packages-table tbody { display:grid; gap:12px; }
  .received-packages-table tr { padding:8px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow-soft); }
  .received-packages-table td { display:grid; grid-template-columns:minmax(105px,36%) 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
  .received-packages-table td:last-child { border-bottom:0; }
  .received-packages-table td::before { content:attr(data-label); color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.55px; text-transform:uppercase; }
  .received-packages-table td[data-label="Package"] { font-size:15px; }
  .received-packages-table .badge { white-space:normal; line-height:1.35; }
  .received-packages-table .actions .btn { min-height:40px; }
}

@media (max-width:430px) {
  .received-packages-table td { grid-template-columns:1fr; gap:5px; }
  .received-packages-table .actions,
  .received-packages-table .actions .btn,
  .received-packages-table .actions form { width:100%; }
}

.personnel-assignments { margin-top:8px; }
.personnel-assignments summary {
  width:max-content;
  max-width:100%;
  color:var(--primary,#0f8278);
  font-weight:700;
  cursor:pointer;
  user-select:none;
}
.assignment-list {
  display:grid;
  gap:6px;
  min-width:min(420px,70vw);
  margin-top:9px;
  padding:10px;
  border:1px solid var(--line,#dce7e8);
  border-radius:12px;
  background:#f8fbfb;
}
.assignment-list a {
  display:grid;
  gap:2px;
  padding:8px 10px;
  border-radius:8px;
  color:inherit;
  text-decoration:none;
}
.assignment-list a:hover { background:#eaf6f4; }
.assignment-list span { color:var(--muted,#6a8085); font-size:12px; }
@media (max-width:760px) { .assignment-list { min-width:0; width:100%; } }
.excel-upload-progress { display:grid; gap:11px; margin-top:18px; padding:17px 18px; border:1px solid #b9ddd9; border-radius:15px; background:#f1faf9; box-shadow:0 8px 22px rgba(15,130,120,.08); }
.excel-upload-progress-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.excel-upload-progress-head>div { display:grid; gap:3px; }
.excel-upload-progress-head strong { color:#174c4a; }
.excel-upload-progress-head span,.excel-upload-progress small { color:#70878a; font-size:11px; }
.excel-upload-progress-head b { color:#0f8177; font-size:20px; }
.excel-upload-progress-track { height:12px; overflow:hidden; border-radius:999px; background:#d9e9e7; }
.excel-upload-progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0f8177,#24c8b7); transition:width .18s ease; }
.excel-upload-progress.is-processing .excel-upload-progress-track i { width:100%!important; background:linear-gradient(90deg,#0f8177,#50dacc,#0f8177); background-size:200% 100%; animation:excel-progress-processing 1.2s linear infinite; }
.excel-upload-progress.has-error { border-color:#e2aaa3; background:#fff4f2; }
.excel-upload-progress.has-error .excel-upload-progress-head b { color:#a4453c; }
.excel-upload-selection { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:10px; padding:11px 13px; border:1px solid #c8e4e1; border-radius:11px; background:#eff9f8; }
.excel-upload-selection strong { color:#0d7169; font-size:12px; }.excel-upload-selection span { color:#70878a; font-size:10px; text-align:right; }
.fast-import-options { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-top:16px; padding:15px 17px; border:1px solid #d7e5e6; border-radius:14px; background:#f7fafb; }
.fast-import-options>div { display:grid; gap:4px; }.fast-import-options>div strong { color:#17464b; }.fast-import-options>div span { color:#74898e; font-size:11px; }.fast-import-options label { min-width:260px; margin:0; }.batch-result-panel { margin-top:22px; padding:20px; border:1px solid #cfe2e3; border-radius:17px; background:#fff; }.batch-result-panel .table-wrap { margin-top:16px; }
.fast-batch-live { border-color:#98d4ce; background:linear-gradient(135deg,#f5fcfb,#eef9f8); }.fast-batch-live [data-batch-percent] { color:#0f8177; font-size:28px; }.fast-batch-live .excel-upload-progress-track i { background:linear-gradient(90deg,#0f8177,#35cbbb); transition:width .35s ease; }.fast-batch-live.has-error { border-color:#e2aaa3; background:#fff4f2; }

/* Area progress visibility safeguards. These explicit fallbacks keep the
   dashboard readable if a cached stylesheet misses a progress-tone variable. */
.area-upload-hero {
  color:#fff;
  background:linear-gradient(125deg,#0b3f46 0%,#0f766e 58%,#15998d 100%);
  box-shadow:0 18px 42px rgba(8,81,76,.22);
}
.area-upload-hero .area-eyebrow { color:#d9f7f2; }
.area-upload-hero h2 { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.12); }
.area-upload-hero p { color:#e0f3f0; }
.area-hero-progress { border-color:rgba(255,255,255,.3); background:rgba(0,43,42,.2); }
.area-hero-progress strong { color:#fff; }
.area-hero-progress span { color:#d9eeeb; }

.area-chart-track { background:repeating-linear-gradient(90deg,#e8eff0 0,#e8eff0 calc(25% - 1px),#cbdadd calc(25% - 1px),#cbdadd 25%); }
.area-chart-track i,
.area-progress-card .upload-progress-track i {
  background:linear-gradient(90deg,var(--progress-color,#0f8177),var(--progress-color-2,#35cbbb));
  opacity:1;
}
.area-donut {
  background:conic-gradient(var(--progress-color,#0f8177) 0 var(--angle,0deg),#dfe9ea var(--angle,0deg) 360deg);
}
.area-chart-row b,
.area-progress-card .area-progress-head b { color:var(--progress-color,#0f766e); }
.area-chart-row strong,.area-chart-row small,.area-chart-heading small,
.area-section-heading small,.area-progress-card small { color:#52686e; }
.area-chart-row > strong,.area-chart-heading h2,.area-section-heading h2,
.area-progress-head strong,.area-progress-stats strong { color:#16363c; }
.area-kpi span { color:#4f686e; }
.area-kpi strong { color:#102f35; }
.area-kpi small { color:#5e747a; }
.area-donut strong,.area-chart-legend span strong { color:#12383e; }
.area-donut span,.area-chart-legend span { color:#52686e; }
@media(max-width:650px){.fast-import-options{align-items:stretch;flex-direction:column}.fast-import-options label{min-width:0;width:100%}}
@keyframes excel-progress-processing { to { background-position:-200% 0; } }
.activity-school-search { display:grid; grid-template-columns:minmax(240px,1fr) auto auto; gap:10px; margin-bottom:15px; }
@media(max-width:600px){.activity-school-search{grid-template-columns:1fr}.activity-school-search .btn{width:100%}}

/* Modern bottom pagination */
.modern-pagination {
  min-height:64px;
  padding:16px 4px 0;
  border-top:1px solid var(--line);
}
.pagination-summary,
.pagination-summary label,
.pagination-pages { display:flex; align-items:center; }
.pagination-summary { gap:16px; flex-wrap:wrap; }
.pagination-summary label { gap:8px; margin:0; color:var(--muted); font-size:12px; text-transform:none; letter-spacing:0; }
.pagination-summary select { width:auto; min-width:62px; padding:7px 28px 7px 10px; border-radius:99px; font-size:12px; font-weight:700; }
.pagination-all-label { padding:6px 10px; border:1px solid var(--line); border-radius:99px; background:#edf3ea; color:var(--forest); font-weight:700; }
.pagination-pages { justify-content:flex-end; gap:5px; }
.pagination-page,
.pagination-arrow {
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:50%;
  color:var(--forest);
  background:transparent;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.pagination-page:hover,
.pagination-arrow:hover { border-color:#cad8cd; background:#edf3ea; }
.pagination-page.active { color:#fff; background:var(--forest); box-shadow:0 6px 16px rgba(23,63,50,.2); }
.pagination-arrow.disabled,
.pagination-arrow:disabled { opacity:.35; pointer-events:none; cursor:default; }
.pagination-ellipsis { min-width:24px; text-align:center; color:var(--muted); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:760px) {
  .modern-pagination { align-items:flex-start; flex-direction:column; }
  .pagination-pages { width:100%; justify-content:center; flex-wrap:wrap; }
}
/* School ID copy control */
.school-id-copy { display:inline-grid; grid-template-columns:7ch 34px; align-items:center; gap:8px; white-space:nowrap; position:relative; }
.school-id-copy > span:first-child { font-variant-numeric:tabular-nums; }
.school-id-copy > .school-id-copy-button { width:34px; min-width:34px; height:34px; min-height:34px; padding:0; margin:0; box-sizing:border-box; }
.school-id-copy-button {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  position:relative;
  z-index:2;
  border:1px solid #b9cbc2;
  border-radius:8px;
  color:var(--forest);
  background:#fff;
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  pointer-events:auto !important;
  user-select:none;
  transition:color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.school-id-copy-button:hover { border-color:var(--fern); background:#edf3ea; transform:translateY(-1px); }
.school-id-copy-button:focus-visible { outline:3px solid rgba(20,142,119,.22); outline-offset:2px; }
.school-id-copy-button .button-icon-symbol { margin:0; font-size:16px; pointer-events:none; }
.school-id-copy-button.copied { color:#fff; border-color:var(--forest); background:var(--forest); }
.school-id-copy-button.copy-error { color:#fff; border-color:var(--red); background:var(--red); }

/* ============================================================
   DCP Portal — Enterprise workspace design system
   Shared visual layer; preserves existing PHP and JavaScript hooks.
   ============================================================ */
:root {
  color-scheme:light;
  --admin-bg:#f8fafc;
  --admin-surface:#ffffff;
  --admin-surface-alt:#f1f3f6;
  --admin-border:#e2e5eb;
  --admin-border-strong:#cbd2dc;
  --admin-text:#0f172a;
  --admin-muted:#475569;
  --admin-faint:#7a8494;
  --admin-primary:#2563eb;
  --admin-primary-hover:#1d4ed8;
  --admin-primary-soft:#eff6ff;
  --admin-success:#147a54;
  --admin-success-soft:#e3f7ee;
  --admin-warning:#946006;
  --admin-warning-soft:#fdf1de;
  --admin-danger:#c83232;
  --admin-danger-soft:#fbe9e9;
  --admin-info:#176f9e;
  --admin-info-soft:#e6f4fb;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --shadow-sticky:0 1px 3px rgba(16,24,40,.06);
  --shadow-dropdown:0 4px 12px rgba(16,24,40,.10);
  --shadow-modal:0 12px 32px rgba(16,24,40,.16);
  --shadow-toast:0 6px 20px rgba(16,24,40,.14);
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --modern-canvas:var(--admin-bg);
  --modern-surface:var(--admin-surface);
  --modern-surface-soft:var(--admin-surface-alt);
  --modern-ink:var(--admin-text);
  --modern-muted:var(--admin-muted);
  --modern-line:var(--admin-border);
  --modern-brand:var(--admin-primary);
  --modern-brand-strong:var(--admin-primary-hover);
  --modern-brand-deep:#19489f;
  --modern-accent:var(--admin-info);
  --modern-danger:var(--admin-danger);
  --modern-shadow-sm:var(--shadow-sticky);
  --modern-shadow:none;
  --modern-shadow-lg:var(--shadow-modal);
  --cream:var(--admin-bg);
  --paper:var(--admin-surface);
  --ink:var(--admin-text);
  --muted:var(--admin-muted);
  --line:var(--admin-border);
  --forest:var(--admin-primary);
  --forest-deep:#19489f;
  --fern:var(--admin-success);
  --gold:var(--admin-warning);
  --red:var(--admin-danger);
  --shadow:none;
  --shadow-soft:var(--shadow-sticky);
}

html { scrollbar-gutter:stable; }
html,body { min-height:100%; color:var(--admin-text); background:var(--admin-bg); font-family:var(--font-ui); font-size:16px; }
body { background-image:none!important; }
a { color:#245fcf; text-decoration-thickness:1px; text-underline-offset:2px; }
h1,h2,h3,h4,.brand strong { color:var(--admin-text); letter-spacing:-.018em; }
h1 { font-size:clamp(1.5rem,2.2vw,2rem); font-weight:700; }
h2 { font-size:1.125rem; font-weight:650; }
h3 { font-size:1rem; font-weight:650; }
.subtitle,.muted,small,.help-text,.empty-state { color:var(--admin-muted)!important; }
small,.metadata,time { font-size:.8125rem; }
label { color:var(--admin-muted); font-size:.875rem; font-weight:600; }

/* Flat application shell */
.layout,.main,.content,.main-content,.page-shell,.school-portal-app { background:var(--admin-bg)!important; }
.sidebar {
  color:var(--admin-text); background:#fff!important; border:0!important; border-right:1px solid var(--admin-border)!important; box-shadow:none!important;
}
.brand { border-color:var(--admin-border)!important; }
.brand strong { color:var(--admin-text)!important; }
.brand small,.sidebar .nav-group-label,.sidebar-note { color:var(--admin-muted)!important; }
.brand-mark,.system-logo-mark { background:#fff!important; border:0!important; box-shadow:none!important; overflow:hidden; }
.brand-mark img,.system-logo-mark img,.system-login-logo img { width:100%; height:100%; object-fit:contain; aspect-ratio:1; }
.nav a,.nav button,.nav-logout-button {
  position:relative; min-height:44px; color:var(--admin-muted)!important; background:transparent!important; border:0!important;
  border-radius:var(--radius-md)!important; box-shadow:none!important; transition:background-color .15s ease,color .15s ease;
}
.nav a:hover,.nav button:hover,.nav-logout-button:hover { color:var(--admin-text)!important; background:#f1f5f9!important; transform:none!important; }
.nav a.active,.nav button.active { color:#1d4ed8!important; background:#eff6ff!important; box-shadow:none!important; }
.nav a.active::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:#fff; }
.nav .icon,.material-symbols-outlined,.material-symbols-rounded,.button-icon-symbol { color:currentColor; }
.sidebar-note { background:#f8fafc!important; border:1px solid var(--admin-border)!important; border-radius:var(--radius-md); box-shadow:none!important; }
.topbar {
  color:var(--admin-text); background:rgba(255,255,255,.97)!important; border:0!important; border-bottom:1px solid var(--admin-border)!important;
  box-shadow:var(--shadow-sticky)!important; backdrop-filter:none!important;
}
.mobile-menu-button,.sidebar-toggle,.menu-toggle { color:var(--admin-text)!important; background:var(--admin-surface)!important; border:1px solid var(--admin-border-strong)!important; box-shadow:none!important; }

/* Panels and cards stay flat */
.panel,.card,.dashboard-card,.stat-card,.metric-card,.chart-card,.table-card,.form-card,.content-card,
.school-workspace-hero,.workspace-checklist,.school-profile-hero,.google-school-login-card,.login-card,
.area-card,.monitor-card,.report-card,.summary-panel {
  color:var(--admin-text); background:var(--admin-surface)!important; border:1px solid var(--admin-border)!important;
  border-radius:var(--radius-md)!important; box-shadow:none!important; backdrop-filter:none!important;
}
.card,.metric-card,.stat-card,.area-card,.workspace-step { transition:border-color .15s ease,background-color .15s ease,transform .15s ease; }
a.card:hover,.card-link:hover,a.area-card:hover,.workspace-step:hover { border-color:var(--admin-border-strong)!important; background:#fbfcff!important; transform:translateY(-1px); box-shadow:none!important; }
.cards { gap:16px; }
.card>span,.summary-label,.eyebrow { color:var(--admin-muted); font-size:.8125rem; font-weight:600; }
.card>strong,.stat-value { color:var(--admin-text)!important; font-size:clamp(1.75rem,3vw,2.25rem); font-weight:750; }

/* Predictable controls */
.btn,button[type="submit"],input[type="button"],input[type="submit"],.button,.action-button {
  min-height:40px; color:#fff!important; background:var(--admin-primary)!important; border:1px solid var(--admin-primary)!important;
  border-radius:var(--radius-md)!important; box-shadow:none!important; font-family:var(--font-ui); font-weight:600;
  letter-spacing:0; text-transform:none; transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.btn:hover,button[type="submit"]:hover,.button:hover { color:#fff!important; background:var(--admin-primary-hover)!important; border-color:var(--admin-primary-hover)!important; transform:none; box-shadow:none!important; }
.btn:active,button:not(.swal2-close):active,.button:active { transform:translateY(1px); }
.btn.secondary,.btn.ghost,button.secondary,.button.secondary,.nav-logout-button {
  color:var(--admin-text)!important; background:var(--admin-surface)!important; border:1px solid var(--admin-border-strong)!important; box-shadow:none!important;
}
.btn.secondary:hover,.btn.ghost:hover,button.secondary:hover { color:var(--admin-text)!important; background:var(--admin-surface-alt)!important; border-color:#aeb8c6!important; }
.btn.danger,.destructive { color:#fff!important; background:var(--admin-danger)!important; border-color:var(--admin-danger)!important; }
.btn.small,button.small { min-height:36px; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--admin-primary)!important; outline-offset:2px; box-shadow:0 0 0 3px var(--admin-primary-soft)!important;
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.search-box,.filter-input {
  min-height:42px; color:var(--admin-text)!important; background:var(--admin-surface)!important;
  border:1px solid var(--admin-border-strong)!important; border-radius:var(--radius-md)!important; box-shadow:none!important;
  font-family:var(--font-ui); font-size:.9375rem; transition:border-color .15s ease,box-shadow .15s ease;
}
textarea { min-height:104px; }
input:hover,select:hover,textarea:hover { border-color:#aeb8c6!important; }
input::placeholder,textarea::placeholder { color:var(--admin-faint)!important; opacity:1; }
input:disabled,select:disabled,textarea:disabled { color:#697386!important; background:var(--admin-surface-alt)!important; opacity:1; cursor:not-allowed; }
select option { color:var(--admin-text); background:#fff; }
input[type="checkbox"],input[type="radio"] { width:18px; height:18px; accent-color:var(--admin-primary); }
.form-grid { gap:16px; }
.filters {
  background:var(--admin-surface)!important; border:1px solid var(--admin-border)!important; border-radius:var(--radius-md)!important;
  box-shadow:none!important; padding:12px!important;
}
.field-error,.validation-error { color:var(--admin-danger)!important; font-size:.8125rem; font-weight:600; }

/* Reusable data-table component: .table-wrap + shared sort/pagination JS */
.table-wrap,.table-responsive,.data-table-wrap {
  position:relative; background:var(--admin-surface)!important; border:1px solid var(--admin-border)!important;
  border-radius:var(--radius-md)!important; box-shadow:none!important; overflow:auto; max-width:100%;
}
table { width:100%; color:var(--admin-text)!important; background:var(--admin-surface)!important; border-collapse:separate!important; border-spacing:0!important; font-size:.875rem; isolation:isolate; }
/* Keep row buttons/badges below the sticky header while the table scrolls. */
.table-wrap thead { position:relative; z-index:20; }
.table-wrap tbody { position:relative; z-index:0; }
th {
  position:sticky; top:0; z-index:21; color:var(--admin-muted)!important; background:#f4f6f9!important;
  border:0!important; border-bottom:1px solid var(--admin-border-strong)!important; box-shadow:var(--shadow-sticky);
  font-size:.8125rem!important; font-weight:600!important; letter-spacing:0; text-transform:none; white-space:nowrap;
}
td { color:var(--admin-text)!important; background:var(--admin-surface)!important; border:0!important; border-bottom:1px solid var(--admin-border)!important; font-size:.875rem; line-height:1.45; }
tbody tr:nth-child(even) td { background:#fff!important; }
tbody tr:hover td { background:var(--admin-primary-soft)!important; }
tbody tr:last-child td { border-bottom:0!important; }
td.school-name,td strong { font-weight:500; }
.sortable-column { cursor:pointer; user-select:none; padding-right:28px!important; }
.sortable-column::after { content:"unfold_more"; position:absolute; right:8px; font-family:"Material Symbols Rounded"; font-size:16px; font-weight:400; color:#8490a2; text-transform:none; }
.sortable-column[data-sort-direction="asc"]::after { content:"arrow_upward"; color:var(--admin-primary); }
.sortable-column[data-sort-direction="desc"]::after { content:"arrow_downward"; color:var(--admin-primary); }
.table-wrap .empty,.empty-state { min-height:96px; padding:32px!important; color:var(--admin-muted)!important; text-align:center; background:var(--admin-surface)!important; }
.table-wrap .empty::before,.empty-state::before { content:"inventory_2"; display:block; margin-bottom:6px; color:#8390a4; font-family:"Material Symbols Rounded"; font-size:26px; }
.table-sort-link { color:inherit; text-decoration:none; }
.table-sort-link.active { color:var(--admin-primary); }

/* Pagination belongs to the table component */
.table-pagination,.modern-pagination { color:var(--admin-muted); background:var(--admin-surface)!important; border:1px solid var(--admin-border)!important; border-top:0!important; border-radius:0 0 var(--radius-md) var(--radius-md)!important; box-shadow:none!important; }
.pagination button,.pagination-page,.pagination-arrow { min-width:40px; min-height:40px; color:var(--admin-text)!important; background:#fff!important; border:1px solid var(--admin-border)!important; }
.pagination button.active,.pagination-page.active { color:#fff!important; background:var(--admin-primary)!important; border-color:var(--admin-primary)!important; }

/* Consistent status vocabulary */
.badge,.pill,.tag,.summary-chip,.status-badge { display:inline-flex; align-items:center; gap:5px; color:var(--admin-info)!important; background:var(--admin-info-soft)!important; border:1px solid #bcddec!important; border-radius:var(--radius-sm)!important; box-shadow:none!important; font-size:.75rem; font-weight:650; }
.success,.approved,.complete,[data-status="approved"] { color:var(--admin-success)!important; background:var(--admin-success-soft)!important; border-color:#b8e8d4!important; }
.warning,.pending,[data-status="pending"] { color:var(--admin-warning)!important; background:var(--admin-warning-soft)!important; border-color:#ecd7ae!important; }
.error,.danger,.rejected,.issue,[data-status="rejected"] { color:var(--admin-danger)!important; background:var(--admin-danger-soft)!important; border-color:#efc5c5!important; }
.flash,.alert,.notice { color:var(--admin-info)!important; background:var(--admin-info-soft)!important; border:1px solid #bcddec!important; border-left:4px solid var(--admin-info)!important; border-radius:var(--radius-md)!important; box-shadow:none!important; }
.flash.error,.alert-danger { color:var(--admin-danger)!important; background:var(--admin-danger-soft)!important; border-color:#efc5c5!important; border-left-color:var(--admin-danger)!important; }

/* Dashboard hierarchy without decoration */
.school-workspace-hero,.dashboard-hero,.hero-panel { color:#fff!important; background:#19489f!important; border:0!important; border-radius:var(--radius-lg)!important; box-shadow:none!important; overflow:hidden; }
.school-workspace-hero h2,.school-workspace-hero p,.dashboard-hero h1,.dashboard-hero h2,.dashboard-hero p,.hero-panel h1,.hero-panel h2,.hero-panel p { color:#fff!important; text-shadow:none; }
.workspace-progress { background:rgba(255,255,255,.12)!important; border:1px solid rgba(255,255,255,.3)!important; box-shadow:none!important; }
.workspace-progress>strong,.workspace-progress>span { color:#fff!important; }
.workspace-progress-track,.progress-track,.progress-bar-wrap { background:#dfe5ef!important; border-radius:999px!important; overflow:hidden; box-shadow:none!important; }
.workspace-progress-track i,.progress-bar,.progress-fill { background:var(--admin-primary)!important; box-shadow:none!important; }
.workspace-step { background:var(--admin-surface)!important; border:1px solid var(--admin-border)!important; border-radius:var(--radius-md)!important; box-shadow:none!important; }
.workspace-step.complete .step-icon { color:#fff!important; background:var(--admin-success)!important; box-shadow:none!important; }
.icon-box,.icon-housing,.feature-icon,.record-section-icon,.school-record-section-icon { color:var(--admin-primary)!important; background:var(--admin-primary-soft)!important; border:0!important; border-radius:var(--radius-md)!important; box-shadow:none!important; }

/* Authentication */
.login-page { min-height:100vh; color:var(--admin-text); background:#eef2f7!important; }
.login-shell { padding:clamp(20px,5vw,64px); }
.login-card { max-width:1080px; background:var(--admin-surface)!important; border:1px solid var(--admin-border)!important; border-radius:var(--radius-lg)!important; box-shadow:0 12px 32px rgba(16,24,40,.12)!important; }
.login-kicker { color:var(--admin-primary)!important; font-size:.8125rem; font-weight:700; }
.login-emblem,.school-login-seal { background:#fff!important; border:1px solid var(--admin-border)!important; box-shadow:none!important; overflow:hidden; }
.school-login-brand-panel { color:#fff!important; background:#19489f!important; border:0!important; border-radius:var(--radius-md)!important; box-shadow:none!important; }
.school-login-brand-panel h1,.school-login-brand-panel p,.school-login-brand-panel span { color:#fff!important; }
.school-login-feature-list span { border-color:rgba(255,255,255,.22)!important; }
.google-school-login-card { background:#f8fafc!important; }
.google-logo-tile { background:#fff!important; border:1px solid var(--admin-border)!important; box-shadow:none!important; }
.school-admin-login-divider::before,.school-admin-login-divider::after { background:var(--admin-border)!important; }

/* Only genuinely elevated surfaces receive shadows */
.modal,.dialog-backdrop,.modal-backdrop { background:rgba(15,23,42,.44)!important; backdrop-filter:none!important; }
.modal-content,.modal-card,.dialog { color:var(--admin-text); background:#fff!important; border:1px solid var(--admin-border)!important; border-radius:var(--radius-lg)!important; box-shadow:var(--shadow-modal)!important; }
.modal-header,.modal-footer { border-color:var(--admin-border)!important; }
.dropdown-menu,.popover { background:#fff!important; border:1px solid var(--admin-border)!important; box-shadow:var(--shadow-dropdown)!important; }

@media (max-width:900px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .sidebar { box-shadow:var(--shadow-modal)!important; }
  .table-wrap { -webkit-overflow-scrolling:touch; }
}
/* A single desktop rail width prevents page content and scrollbar changes from
   triggering mismatched legacy 252px/220px sidebar breakpoints. */
@media (min-width:761px) {
  .layout { --app-sidebar-width:240px; }
  .layout > .sidebar {
    width:var(--app-sidebar-width)!important;
    min-width:var(--app-sidebar-width)!important;
    max-width:var(--app-sidebar-width)!important;
  }
  .layout > main {
    width:calc(100% - var(--app-sidebar-width))!important;
    margin-left:var(--app-sidebar-width)!important;
  }
}
@media (max-width:640px) {
  .cards { grid-template-columns:1fr; }
  .btn,button,input[type="button"],input[type="submit"],.button { min-height:44px; }
  .topbar-actions .btn,.form-actions .btn { width:100%; }
  .form-grid { grid-template-columns:1fr!important; }
  table.responsive-table tbody tr { background:#fff!important; border:1px solid var(--admin-border); border-radius:var(--radius-md); margin-bottom:12px; }
  table.responsive-table tbody tr:nth-child(even) { background:#f8f9fb!important; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition-duration:.01ms!important; }
  .card:hover,.metric-card:hover,.stat-card:hover,.area-card:hover,.workspace-step:hover,.btn:active,button:active { transform:none!important; }
}
@media print {
  @page { margin:14mm; }
  body,html,.main,.content,.panel,.card,.table-wrap,table,th,td { color:#111!important; background:#fff!important; box-shadow:none!important; }
  .sidebar,.topbar-actions,.actions,.filters,.pagination,.btn,button,.mobile-menu-button { display:none!important; }
  .layout { display:block!important; }
  .main,.content { margin:0!important; padding:0!important; width:100%!important; }
  .panel,.card,.table-wrap { border-color:#bbb!important; break-inside:avoid; }
  thead { display:table-header-group; }
  th { position:static!important; color:#111!important; border-bottom:1px solid #777!important; }
  td { border-bottom:1px solid #ddd!important; }
  a { color:#111!important; text-decoration:none!important; }
}

/* Shared navigation and form feedback; existing data stays visible while loading. */
.portal-feedback { position:fixed; bottom:24px; right:24px; z-index:10000; width:min(340px,calc(100vw - 32px)); padding:16px 18px; border:1px solid #dce2ea; border-radius:12px; background:#fff; color:#243247; box-shadow:0 8px 28px #14263d26; font-size:14px; }
.portal-feedback[hidden] { display:none; }
.portal-feedback-skeleton { display:block; height:8px; margin-top:12px; border-radius:6px; background:linear-gradient(90deg,#e9edf2 25%,#f8fafc 50%,#e9edf2 75%); background-size:200% 100%; animation:portal-skeleton 1.4s linear infinite; }
[data-portal-pending] { opacity:.7; cursor:progress; }
@keyframes portal-skeleton { to { background-position:-200% 0; } }
@media(prefers-reduced-motion:reduce) { .portal-feedback-skeleton { animation:none; } }

/* Workspace components — shared by admin and school pages. */
:root { --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; }
.material-symbols-outlined,.material-symbols-rounded,.button-icon-symbol,.nav .icon { font-family:"Material Symbols Rounded"; font-weight:400; font-style:normal; font-feature-settings:"liga"; letter-spacing:normal; text-transform:none; }
.layout { display:block!important; overflow:visible; }
.layout > .sidebar { position:fixed!important; top:0; left:0; bottom:0; height:100dvh; overflow-y:auto; padding:24px 14px; box-shadow:none!important; }
.layout > main { min-width:0; padding:28px 32px 56px!important; }
.brand { display:flex; align-items:center; gap:10px; margin:0 4px 24px; padding-bottom:20px; border-bottom:1px solid var(--admin-border); }
.brand strong { font-size:14px; line-height:1.4; font-weight:650; }
.brand small { display:block; font-size:11px; margin-top:3px; }
.brand-mark,.system-logo-mark { width:38px; height:38px; min-width:38px; padding:0; border-radius:0; }
.nav-group { margin:0 0 16px; }
.nav-group-label { display:block; padding:0 10px; margin:0 0 7px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.nav a,.nav button { display:flex; align-items:center; gap:10px; min-height:38px; padding:9px 10px; margin:2px 0; font-size:13px; line-height:1.35; font-weight:500; }
.nav a.active { font-weight:600; }
.nav a.active::before { display:none; }
.nav .icon { flex:0 0 19px; width:19px; font-size:19px; }
.sidebar-note { padding:12px; font-size:11px; line-height:1.6; margin-top:24px; }
.topbar { position:relative!important; inset:auto!important; min-height:0; margin:0 0 28px!important; padding:0 0 22px!important; background:transparent!important; align-items:center; box-shadow:none!important; gap:20px; border-bottom:1px solid var(--admin-border)!important; }
.topbar::before { display:none!important; }
.topbar h1 { margin:0 0 5px; font-size:28px; line-height:1.2; font-weight:650; letter-spacing:-.035em; }
.topbar .subtitle { margin:0; max-width:720px; font-size:14px; line-height:1.5; }
.topbar-actions { flex-shrink:0; }
.panel { padding:24px; margin-bottom:24px; }
.panel .panel { padding:16px; box-shadow:none; }
.panel-head { gap:16px; align-items:flex-start; margin-bottom:20px; }
.panel-head h2 { margin:0 0 6px; font-size:18px; font-weight:600; }
.panel-head .subtitle { font-size:13px; max-width:72ch; line-height:1.6; }
.cards { gap:16px; margin-bottom:24px; }
.card { padding:20px; }
.card::before,.card::after { display:none!important; }
main > .cards > .card span,main > .cards > .card small { color:var(--admin-muted)!important; }
.card > strong { font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.card > small { line-height:1.5; }
.card > span { text-transform:none; letter-spacing:0; }
.summary-strip { gap:8px; margin:16px 0; }
.summary-chip { color:var(--admin-muted)!important; background:#f8fafc!important; border:1px solid var(--admin-border)!important; padding:6px 10px; font-weight:400; font-size:12px; }
.summary-chip strong { color:var(--admin-text); font-weight:600; }
.btn,.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; font-size:13px; line-height:1.4; text-decoration:none; border-radius:8px!important; }
.btn.secondary,.btn.ghost { font-weight:500; }
button:disabled,.btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
label { display:block; margin-bottom:6px; text-transform:none!important; letter-spacing:0; color:#334155; font-size:13px; font-weight:500; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea { padding:10px 12px; border-radius:8px!important; }
.form-grid { gap:20px 24px; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px!important; background:#f8fafc!important; margin-bottom:16px; }
.filters > input,.filters > select { flex:1 1 160px; min-width:0; }
.filters > input[type="hidden"] { display:none; }
th,td { padding:13px 16px; vertical-align:middle; }
th { background:#f8fafc!important; box-shadow:none; }
td { font-variant-numeric:tabular-nums; }
td .school-name,td > a:not(.btn) { color:#1e40af; font-weight:500; line-height:1.5; }
td .muted { font-size:12px; margin-top:4px; }
.school-id-copy { grid-template-columns:7ch 32px; gap:10px; }
.school-id-copy > .school-id-copy-button { width:32px; min-width:32px; height:32px; min-height:32px; padding:0; color:#475569!important; background:#fff!important; border:1px solid #cbd5e1!important; border-radius:7px!important; }
.school-id-copy-button:hover { color:#1d4ed8!important; border-color:#2563eb!important; }
.school-id-copy-button.copied { color:#15803d!important; background:#f0fdf4!important; }
.portal-table-tools { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:12px 0 8px; }
.portal-table-tools label { margin:0; color:#64748b; font-size:12px; }
.portal-table-tools select { width:auto; min-height:32px; padding:5px 28px 5px 8px; font-size:12px; }
.table-wrap[data-density="compact"] td { padding-top:7px; padding-bottom:7px; }
.crud-dialog { padding:0; border:1px solid var(--admin-border); border-radius:14px; box-shadow:var(--shadow-modal); }
.crud-dialog::backdrop { background:rgb(15 23 42 / .4); backdrop-filter:none; }
.crud-dialog-head { padding:20px 24px; background:#fff; border-bottom:1px solid var(--admin-border); }
.crud-dialog-body { padding:24px; }
.crud-dialog-close { color:#475569; background:#f1f5f9; border:0; border-radius:8px; width:36px; height:36px; }
.dashboard-hero,.school-workspace-hero,.hero-panel { background:#fff!important; color:var(--admin-text)!important; border:1px solid var(--admin-border)!important; padding:24px!important; }
.dashboard-hero h1,.dashboard-hero h2,.dashboard-hero p,.school-workspace-hero h2,.school-workspace-hero p,.hero-panel h1,.hero-panel h2,.hero-panel p { color:var(--admin-text)!important; }
.workspace-progress { background:#f8fafc!important; border-color:var(--admin-border)!important; }
.workspace-progress > strong,.workspace-progress > span { color:var(--admin-text)!important; }
.login-page { background:#f8fafc!important; }
.login-shell { padding:32px 20px!important; background:transparent!important; }
.login-card { padding:36px; border-radius:16px!important; box-shadow:0 8px 32px #0f172a08!important; }
.login-card h1 { font-family:var(--font-ui); font-size:30px; font-weight:650; letter-spacing:-.035em; }
.login-card .subtitle { font-size:14px; line-height:1.65; }
.login-kicker { text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; }
.login-emblem,.school-login-seal { width:64px; height:64px; border:0!important; border-radius:0; padding:0; }
.login-footnote { font-size:12px; line-height:1.6; margin-top:18px; }
.login-form { gap:20px; }
.portal-password { position:relative; }
.portal-password input { width:100%; padding-right:68px!important; }
.portal-password-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); padding:6px 9px; min-height:30px; background:transparent; color:#475569; border:0; font:500 12px var(--font-ui); border-radius:5px; }
.school-login-brand-panel { background:#eff6ff!important; padding:32px!important; border:1px solid #dbeafe!important; }
.school-login-brand-panel h1,.school-login-brand-panel h2,.school-login-brand-panel p,.school-login-brand-panel span { color:#1e3a8a!important; }
.school-login-feature-list span { border-color:#bfdbfe!important; }
.portal-skip { position:fixed; left:12px; top:-60px; z-index:1100; padding:12px 18px; background:#fff; color:#1d4ed8; border-radius:8px; }
.portal-skip:focus { top:12px; }
.portal-menu-button,.portal-menu-close,.portal-menu-shade { display:none; }
@media(min-width:901px) { .layout > main { width:calc(100% - 240px)!important; margin-left:240px!important; } .layout > .sidebar { width:240px!important; min-width:240px!important; max-width:240px!important; } }
@media(max-width:1100px) { .topbar { flex-wrap:wrap; }.topbar-actions { flex-shrink:1; }.layout > main { padding:24px!important; } }
@media(max-width:900px) {
 .layout > main { margin:0!important; width:100%!important; padding:20px!important; }
 .layout > .sidebar { width:260px!important; min-width:260px!important; max-width:260px!important; z-index:1002!important; transform:translateX(-100%); visibility:hidden; transition:transform .18s ease; }
 .portal-nav-open .layout > .sidebar { transform:translateX(0); visibility:visible; }
 body.portal-nav-open { overflow:hidden; }
 .portal-menu-button,.portal-menu-close { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 12px; background:#fff; border:1px solid #cbd5e1; color:#334155; border-radius:8px; font:500 13px var(--font-ui); margin-bottom:20px; }
 .portal-menu-close { width:100%; }
 .portal-menu-shade:not([hidden]) { display:block; position:fixed; inset:0; background:rgb(15 23 42 / .4); z-index:1001; }
 .topbar { align-items:flex-start; gap:16px; }.topbar h1 { font-size:25px; }
 .topbar-actions { width:100%; }.topbar-actions .btn { width:auto; }
 .panel { padding:20px; }.panel-head { flex-wrap:wrap; }
}
@media(max-width:600px) { .layout > main { padding:16px!important; }.panel { padding:16px; }.login-card { padding:24px; }.school-login-brand-panel { padding:24px!important; }.filters > input,.filters > select { flex-basis:100%; }.form-grid { grid-template-columns:1fr!important; }.actions { flex-wrap:wrap; }.btn { min-height:44px; }.portal-password-toggle { min-height:36px; } }
@media print { .portal-menu-button,.portal-menu-close,.portal-menu-shade,.portal-table-tools,.portal-feedback,.portal-skip { display:none!important; }.layout > main { width:100%!important; margin:0!important; padding:0!important; }.table-wrap { max-height:none!important; overflow:visible!important; } }
/* Contain dashboard grids without clipping labels or horizontal table scrolling. */
.dashboard-coverage { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.dashboard-coverage > .panel { min-width:0; width:100%; }
.dashboard-coverage .donut-layout { display:flex; flex-wrap:wrap; gap:20px; }
.dashboard-coverage .donut-layout > * { min-width:0; }
.dashboard-jump-nav { position:static; box-shadow:none; background:#fff; border-radius:10px; margin-bottom:20px; }
.dashboard-jump-nav a { font-weight:500; color:#475569; }
.dashboard-kpis .card { border-top:1px solid var(--admin-border)!important; }
.dashboard-kpis .card .dashboard-card-icon { box-shadow:none; background:#eff6ff; color:#2563eb; }
.area-upload-hero { background:#fff!important; color:var(--admin-text); padding:24px; box-shadow:none; border:1px solid var(--admin-border); border-radius:12px; }
.area-upload-hero h2,.area-upload-hero p,.area-upload-hero .area-eyebrow { color:var(--admin-text); text-shadow:none; }
.area-hero-progress { border:1px solid #dbeafe; background:#eff6ff; }
.area-hero-progress strong,.area-hero-progress span { color:#1e40af; }
@media(max-width:1100px) { .dashboard-coverage { grid-template-columns:minmax(0,1fr); } }
@media(max-width:640px) { .topbar-actions { flex-direction:row!important; align-items:center!important; }.topbar-actions form { width:auto!important; }.topbar-actions .btn { width:auto!important; } }
@media(max-width:900px) { body:not(.portal-ui-ready) .layout > .sidebar { position:relative!important; width:100%!important; max-width:100%!important; height:auto; transform:none; visibility:visible; } }
.grid-2 { grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
.grid-2 > * { min-width:0; max-width:100%; }
.year-bar-chart { overflow-x:auto; max-width:100%; padding-bottom:10px; }
@media(max-width:760px) {
 .grid-2 { grid-template-columns:minmax(0,1fr); }
 .school-login-brand-panel { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px!important; margin-bottom:20px; }
 .school-login-brand-panel .school-login-seal { width:40px; height:40px; margin:0; flex:0 0 40px; }
 .school-login-brand-panel .login-kicker { margin:0; font-size:12px; }
 .school-login-brand-panel h2 { font-size:20px; margin:0; width:100%; }
 .school-login-brand-panel > p:not(.login-kicker),.school-login-feature-list { display:none; }
 .school-login-card > .login-emblem { display:none; }
 .school-login-card .login-card-main,.school-login-main { padding:0; }
}
@media(max-width:900px) {
 .layout > .sidebar .nav { display:block; width:100%; overflow:visible; }
 .layout > .sidebar .nav-group { display:block; margin-bottom:18px; }
 .layout > .sidebar .nav-group-label { display:block!important; }
 .layout > .sidebar .nav a,.layout > .sidebar .nav button { white-space:normal; width:100%; }
}

/* Data workspace: quiet header, generous identity columns, restrained actions. */
.workspace-table { border:0!important; border-top:1px solid #e8edf3!important; border-bottom:1px solid #e8edf3!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; }
.workspace-table table { table-layout:auto!important; width:100%; font-family:var(--font-ui); }
.workspace-table th { padding:13px 18px!important; height:44px; background:#fff!important; color:#64748b!important; font-size:12px!important; font-weight:500!important; letter-spacing:0!important; text-transform:none!important; border-bottom:1px solid #e8edf3!important; box-shadow:none!important; }
.workspace-table td { padding:17px 18px!important; min-width:96px; color:#475569!important; font-size:13px; line-height:1.5; border-bottom:1px solid #f0f3f7!important; background:#fff!important; box-shadow:none!important; }
.workspace-table tbody tr:nth-child(even) td { background:#fff!important; }
.workspace-table tbody tr:hover td { background:#f8fafc!important; }
.workspace-table tbody tr:last-child td { border-bottom:0!important; }
.workspace-table [hidden] { display:none!important; }
.workspace-table [data-column-kind="identity"] { min-width:250px; max-width:350px; }
.workspace-table td[data-column-kind="identity"] { color:#0f172a!important; }
.workspace-table td[data-column-kind="identity"] > strong,.workspace-table .school-name { display:block; font-size:13px; font-weight:600!important; color:#172b4d!important; text-decoration:none; line-height:1.5; letter-spacing:-.01em; }
.workspace-table a.school-name:hover { color:#2563eb!important; text-decoration:underline; text-underline-offset:3px; }
.workspace-table [data-column-kind="identifier"] { min-width:130px; white-space:nowrap; }
.workspace-table [data-column-kind="number"] { min-width:86px; text-align:right; font-variant-numeric:tabular-nums; }
.workspace-table td[data-column-kind="number"] { color:#334155!important; font-weight:500; }
.workspace-table [data-column-kind="date"] { min-width:132px; white-space:nowrap; }
.workspace-table [data-column-kind="actions"] { width:1%; min-width:90px; text-align:right; white-space:nowrap; }
.workspace-table td .muted { font-size:11px; line-height:1.5; font-weight:400; color:#64748b!important; margin-top:4px; max-width:260px; overflow-wrap:anywhere; }
.workspace-table td > a:not(.btn):not(.school-name) { color:#475569; font-weight:400; }
.workspace-table td strong { font-weight:500; }
.workspace-table .sortable-column { padding-right:30px!important; }
.workspace-table .sortable-column::after { opacity:0; font-size:14px; }
.workspace-table .sortable-column:hover::after,.workspace-table .sortable-column:focus-visible::after,.workspace-table .sortable-column[data-sort-direction]::after { opacity:1; }
.workspace-table .badge { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border:0!important; border-radius:5px!important; font-size:11px; line-height:1.6; font-weight:500; background:#f1f5f9!important; color:#475569!important; white-space:nowrap; }
.workspace-table .badge[data-table-status="positive"] { color:#166534!important; background:#f0fdf4!important; }
.workspace-table .badge[data-table-status="pending"] { color:#92400e!important; background:#fffbeb!important; }
.workspace-table .badge[data-table-status="negative"] { color:#b91c1c!important; background:#fef2f2!important; }
.workspace-table .badge[data-table-status]:not([data-table-status="neutral"])::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.workspace-table td .btn { min-height:30px!important; padding:4px 9px; color:#475569!important; background:transparent!important; border:1px solid transparent!important; border-radius:6px!important; font-size:12px; font-weight:500; box-shadow:none!important; }
.workspace-table td .btn:hover { background:#fff!important; border-color:#cbd5e1!important; color:#1d4ed8!important; }
.workspace-table td .btn.danger { color:#b91c1c!important; }
.workspace-table[data-density="compact"] td { padding-top:9px!important; padding-bottom:9px!important; }
.workspace-table-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0 0; padding:14px 0; border-top:1px solid #e8edf3; }
.workspace-table-caption { display:flex; align-items:center; gap:10px; margin-right:auto; }
.workspace-table-caption strong { font-size:14px; font-weight:600; color:#0f172a; }
.workspace-table-caption span { font-size:11px; color:#64748b; background:#f1f5f9; padding:3px 7px; border-radius:5px; }
.workspace-table-toolbar select { min-height:32px; padding:5px 28px 5px 9px; border:1px solid #e2e8f0!important; font-size:12px; }
.workspace-columns { position:relative; }
.workspace-columns summary,.workspace-filters summary { display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; padding:7px 11px; border:1px solid #e2e8f0; border-radius:7px; background:#fff; color:#475569; font-size:12px; font-weight:500; min-height:32px; }
.workspace-columns summary::-webkit-details-marker,.workspace-filters summary::-webkit-details-marker { display:none; }
.workspace-columns summary::before { content:"▥"; color:#64748b; }
.workspace-filters summary::before { content:"☷"; color:#64748b; }
.workspace-columns[open] summary,.workspace-filters[open] summary { color:#1d4ed8; border-color:#93c5fd; }
.workspace-column-options { position:absolute; right:0; top:calc(100% + 7px); z-index:80; width:240px; max-width:calc(100vw - 40px); max-height:320px; overflow:auto; background:#fff; padding:14px; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 8px 28px #0f172a14; }
.workspace-column-options > strong { display:block; padding:0 5px 10px; font-size:12px; color:#334155; }
.workspace-column-options label { display:flex; align-items:center; gap:9px; margin:0; padding:7px 5px; color:#475569; font-size:12px; cursor:pointer; }
.workspace-column-options input { width:15px; height:15px; }
.workspace-table + .pagination { border:0!important; background:#fff!important; border-radius:0!important; padding:16px 0; gap:14px; }
.workspace-table + .pagination .pagination-summary { font-size:12px; color:#64748b; }
.workspace-table + .pagination .pagination-page,.workspace-table + .pagination .pagination-arrow { min-width:30px; width:auto; height:30px; min-height:30px!important; padding:4px 8px; border:0!important; border-radius:6px!important; background:transparent!important; color:#64748b!important; font-size:12px; box-shadow:none!important; }
.workspace-table + .pagination .pagination-page.active { color:#1d4ed8!important; background:#eff6ff!important; font-weight:600; }
.workspace-table + .pagination .pagination-arrow.disabled { opacity:.35; }
.filters:has(.workspace-filters) { border:0!important; background:transparent!important; border-radius:0!important; padding:0!important; gap:10px; }
.filters:has(.workspace-filters) > input:not([type="hidden"]) { flex:1 1 280px; max-width:480px; min-height:38px; font-size:13px; }
.workspace-filters { flex:0 0 auto; }
.workspace-filters summary { min-height:38px; }
.workspace-filters[open] { flex:1 0 100%; order:5; }
.workspace-filters[open] summary { width:fit-content; }
.workspace-filter-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; padding:16px; margin-top:10px; background:#f8fafc; border:1px solid #e8edf3; border-radius:8px; }
.workspace-filter-fields label { min-width:0; margin:0; }
.workspace-filter-fields label > span { display:block; color:#64748b; font-size:11px; margin-bottom:6px; }
.workspace-filter-fields select { width:100%; min-width:0; font-size:12px; min-height:36px; }
@media(max-width:640px) { .workspace-table-toolbar { gap:8px; }.workspace-table-caption { flex-basis:100%; }.workspace-table td { padding:14px 14px!important; }.workspace-table [data-column-kind="identity"] { min-width:220px; }.workspace-filter-fields { grid-template-columns:1fr; }.filters:has(.workspace-filters) > input:not([type="hidden"]) { flex-basis:100%; max-width:none; } }
@media print { .workspace-table-toolbar,.workspace-filters { display:none!important; }.workspace-table { overflow:visible!important; }.workspace-table td,.workspace-table th { padding:7px!important; min-width:0; }.workspace-table [hidden] { display:table-cell!important; } }
.workspace-table .table-sort-link { display:inline-flex; align-items:center; gap:8px; color:#64748b; font-weight:500; }
.workspace-table .table-sort-link .button-icon-symbol { opacity:0; font-size:14px; }
.workspace-table .table-sort-link:hover .button-icon-symbol,.workspace-table .table-sort-link:focus-visible .button-icon-symbol,.workspace-table .table-sort-link.active .button-icon-symbol { opacity:1; }
.workspace-table .table-sort-link.active { color:#334155; }
/* Keep the record and its actions available while wide tables scroll. */
.workspace-table td[data-pinned-column="identity"] { position:sticky; left:0; z-index:2; }
.workspace-table th[data-pinned-column="identity"] { position:sticky; left:0; z-index:24; }
.workspace-table td[data-column-kind="actions"] { position:sticky; right:0; z-index:3; }
.workspace-table th[data-column-kind="actions"] { position:sticky; right:0; z-index:25; }
@media(max-width:640px) { .workspace-table td[data-pinned-column="identity"],.workspace-table th[data-pinned-column="identity"] { position:static; } }
@media print { .workspace-table td[data-pinned-column],.workspace-table th[data-pinned-column],.workspace-table [data-column-kind="actions"] { position:static; } }

/* Authentication must grow with its content, including zoom and short screens. */
html:has(body.school-login-page),body.school-login-page { height:auto!important; min-height:100%; overflow:auto!important; }
.school-login-page .school-login-shell { height:auto!important; min-height:100dvh!important; padding:32px 20px!important; }
.school-login-page .school-login-card { height:auto!important; max-height:none!important; width:min(100%,1080px); padding:0!important; overflow:visible!important; align-items:stretch; }
.school-login-page .school-login-brand-panel { height:auto!important; min-height:0!important; overflow:visible!important; margin:0; padding:36px!important; justify-content:flex-start; border-radius:16px 0 0 16px!important; }
.school-login-page .school-login-content { height:auto!important; max-height:none!important; overflow:visible!important; padding:36px!important; min-width:0; }
.school-login-brand-panel::before,.school-login-brand-panel::after { display:none; }
.school-login-brand-panel .school-login-seal { flex-shrink:0; margin:0 0 18px; }
.school-login-brand-panel h2 { font-size:30px; line-height:1.2; }
.school-login-brand-panel p { font-size:15px; line-height:1.6; }
.school-login-feature-list { margin-top:24px; }
.school-login-content > .login-emblem { display:none; }
@media(max-width:760px) { .school-login-page .school-login-card { display:block; }.school-login-page .school-login-brand-panel { border-radius:16px 16px 0 0!important; padding:24px!important; }.school-login-page .school-login-content { padding:24px!important; }.school-login-brand-panel .school-login-seal { margin:0; } }