:root{
  --bg: #0f2917;           /* deep green */
  --bg2: #10331c;
  --card: #123a1f;         /* card green */
  --muted: #b7d1bf;        /* light desaturated green */
  --text: #eef7f0;         /* off white */
  --accent: #3ecf8e;       /* fresh green */
  --accent2: #f7c948;      /* yellow accent */
  --line: rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial; color:var(--text);
  background:linear-gradient(180deg,var(--bg), var(--bg2) 40%);
}
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(8px); background:rgba(15,41,23,.7); border-bottom:1px solid var(--line)}

/* Agriculture banner strip with subtle SVG graphic */
.agri-banner:after{
  content:""; display:block; height:8px; background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 8"><g fill="%23f7c948" opacity="0.75"><path d="M0 8c6-4 10-8 16-8s10 4 16 8H0z"/><path d="M24 8c6-4 10-8 16-8s10 4 16 8H24z"/><path d="M48 8c6-4 10-8 16-8s10 4 16 8H48z"/><path d="M72 8c6-4 10-8 16-8s10 4 16 8H72z"/><path d="M96 8c6-4 10-8 16-8s8 3 8 8H96z"/></g></svg>') repeat-x center / 180px 8px;
}

.header-main{max-width:1100px; margin:0 auto; padding:16px 20px}
.brand-wrap{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center}
.logo-wrap{display:flex; align-items:center}
#schoolLogo{height:clamp(54px, 7vw, 92px); width:auto; object-fit:contain; image-rendering:auto}
.brand{margin:0; line-height:1.05}
.brand .l1{display:block; font-weight:800; letter-spacing:.2px; font-size:clamp(16px,2.8vw,24px)}
.brand .l2{display:block; font-weight:800; font-size:clamp(18px,3.4vw,28px); color:#e9ffe7}
.brand .l3{display:block; font-weight:700; font-size:clamp(14px,2.4vw,20px); color:var(--accent2)}
.muted{color:var(--muted)}
.small{font-size:12px}
main{max-width:1100px; margin:0 auto; padding:20px}
.section{margin:20px 0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px}
.section-header{display:flex; align-items:center; justify-content:space-between}
.kpi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi{background:rgba(255,255,255,.04); padding:16px; border-radius:12px; border:1px solid var(--line)}
.kpi-label{color:#cfe5d6; font-size:13px}
.kpi-value{font-size:28px; font-weight:800; margin:8px 0}
.kpi-sub{color:#cfe5d6; font-size:12px}
.charts{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:900px){ .charts{grid-template-columns:1fr 1fr} }
figure{margin:0; background:rgba(255,255,255,.04); padding:12px; border-radius:12px; border:1px solid var(--line)}
figcaption{font-size:13px; color:#d9f0df; margin:0 0 6px}
.table-wrap{overflow:auto; border-radius:10px}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{position:sticky; top:0; background:#0f3a20; text-align:left; padding:10px; font-size:13px; color:#e9ffe7}
.table td{padding:10px; border-top:1px solid var(--line)}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.num{text-align:right}
.btn{appearance:none; border:0; background:var(--accent2); color:#17300c; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:800}
.btn.secondary{background:#1d4a2b; color:#eafff1}
.icon-btn{appearance:none; border:0; background:transparent; color:#e7ffe8; font-size:18px; cursor:pointer}
.controls{display:flex; align-items:center; gap:12px}
.toggle input{accent-color:var(--accent)}

/* Drawer */
.drawer{position:fixed; inset:0; display:none;}
.drawer[aria-hidden="false"]{display:block}
.drawer-panel{position:fixed; right:0; top:0; bottom:0; width:min(680px,100%); background:#0c2c18; border-left:1px solid var(--line); box-shadow:-2px 0 12px rgba(0,0,0,.3); display:flex; flex-direction:column}
.drawer-header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line)}
.drawer-body{padding:12px 14px; overflow:auto}
.detail-meta{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:6px 0 16px}
.detail-meta .card{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:10px}
.detail-meta .label{font-size:12px; color:#d1e7d6}
.detail-meta .value{font-weight:800}
.month-block{margin:14px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.month-block summary{cursor:pointer; list-style:none; padding:10px 12px; background:#13592f; color:#eafff1}
.month-block table{width:100%}
.month-block td, .month-block th{padding:8px 10px}

.site-footer{max-width:1100px; margin:0 auto; padding:20px; color:#cfe5d6}

@media (max-width:700px){
  .kpi-grid{grid-template-columns:1fr}
  .brand-wrap{grid-template-columns: auto 1fr}
}