:root{--green:#0D7A4F;--green-dark:#084D31;--gold:#C9A227;--blue:#1D4ED8;--red:#B91C1C;--amber:#B45309;--text:#101828;--muted:#6B7280;--border:#E5E7EB;--bg:#F6F8F7}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Kufi Arabic','Segoe UI',sans-serif;background:var(--bg);color:var(--text)}
header{background:#fff;border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header .mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green-dark));display:grid;place-items:center;color:#fff;font-weight:900}
header h1{font-size:1.05rem;font-weight:800;color:var(--green-dark)}
header .sub{font-size:.74rem;color:var(--muted)}
header .right{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
header select{font-family:inherit;font-size:.82rem;padding:7px 12px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text)}
header a.back{font-size:.8rem;color:var(--muted);text-decoration:none}
header a.back:hover{color:var(--green)}
.wrap{max-width:1280px;margin:0 auto;padding:20px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.kpi .label{font-size:.72rem;color:var(--muted);font-weight:600}
.kpi .value{font-size:1.7rem;font-weight:900;color:var(--green-dark);line-height:1.3}
.kpi .sub{font-size:.68rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:7fr 5fr;gap:14px;margin-bottom:14px}
.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;min-width:0}
.panel h2{font-size:.9rem;font-weight:800;color:var(--green-dark);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.panel h2::before{content:"";width:4px;height:15px;background:var(--green);border-radius:2px;display:inline-block}
#map{height:480px;border-radius:10px}
.charts2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:.78rem}
th{background:var(--green-dark);color:#fff;padding:8px 10px;text-align:left;font-size:.72rem;white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid #F3F4F6;white-space:nowrap}
tbody tr:hover{background:#F9FAFB}
.tbl-scroll{overflow-x:auto}
.legend{display:flex;gap:16px;font-size:.78rem;color:var(--muted);margin-top:10px}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-inline-end:5px;vertical-align:middle}
.loader{padding:70px;text-align:center;color:var(--muted);font-weight:600}
@media(max-width:900px){.grid{grid-template-columns:1fr}.charts2{grid-template-columns:1fr}}

/* Prominent filter bar */
.filters{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;box-shadow:0 2px 10px rgba(13,122,79,.05)}
.filters .filt{display:flex;flex-direction:column;gap:4px;min-width:130px;flex:1 1 130px}
.filters .filt span{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.filters .filt select{font-family:inherit;font-size:.84rem;padding:9px 12px;border:1.5px solid var(--border);border-radius:9px;background:#fff;color:var(--text);cursor:pointer}
.filters .filt select:hover{border-color:var(--green)}
.filters .filt-reset{align-self:stretch;padding:9px 18px;border:1.5px solid var(--green);background:var(--green);color:#fff;border-radius:9px;font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.filters .filt-reset:hover{background:var(--green-dark);border-color:var(--green-dark)}
.filters .filt-count{align-self:center;font-size:.82rem;font-weight:700;color:var(--green-dark);background:#E7F4EE;padding:7px 14px;border-radius:999px;white-space:nowrap}