:root{
  /* ---- โทนพื้นหลัง/พื้นที่แสดงข้อมูล: ขาว-เขียว มืออาชีพ ---- */
  --bg:#f3f8f5; --panel:#ffffff; --panel-2:#eef5f0; --line:#d7e6dd;
  --text:#17281f; --muted:#5c7568;

  /* ---- โทนหัวเว็บ: เขียว กทม. เข้ม ---- */
  --header-bg:#0b5e3c; --header-bg-2:#0a4e32; --header-line:rgba(255,255,255,0.14);
  --header-text:#f3f8f5; --header-muted:#bfe0cd;

  /* ---- สีเน้น (semantic) ---- */
  --teal:#178a54; --amber:#b8860b; --coral:#c0392b; --violet:#8a6d3b; --blue:#2f7d80;
  --gold:#b8860b; --yellow:#c9a227; --jade:#178a54;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 15% 0%, rgba(184,134,11,0.05), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(23,138,84,0.06), transparent 45%),
    var(--bg);
  color:var(--text); font-family:'Sarabun',sans-serif; min-height:100vh;
}
h1,h2,h3{ font-family:'Chakra Petch',sans-serif; letter-spacing:0.01em; }
a{ color:var(--teal); }
.wrap{ max-width:1480px; margin:0 auto; padding:0 28px 80px; }

/* ---- top bar / nav: แถบเขียว กทม. เต็มความกว้าง ---- */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  background:linear-gradient(155deg, var(--header-bg), var(--header-bg-2));
  margin:0 -28px 22px; padding:18px 28px; border-bottom:3px solid var(--gold);
  box-shadow:0 4px 18px rgba(11,94,60,0.18);
}
.brand{ display:flex; flex-direction:column; gap:4px; }
.brandrow{ display:flex; align-items:center; gap:14px; }
.emblem{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(from 200deg, #178a54, #d4af37, #f2c14e, #178a54);
  display:flex; align-items:center; justify-content:center;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:11px; color:#08161f;
  box-shadow:0 0 0 2px var(--header-bg-2), 0 0 14px rgba(212,175,55,0.4);
}
.eyebrow{ color:var(--yellow); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:8px;}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 10px var(--yellow); display:inline-block; animation:pulse 2s infinite;}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.brand h1{ font-size:20px; margin:0; color:#fff; font-weight:700;}
nav.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
nav.tabs a{
  text-decoration:none; color:var(--header-muted); font-family:'Chakra Petch',sans-serif; font-size:13.5px;
  padding:9px 16px; border-radius:8px; border:1px solid transparent; transition:all .15s;
}
nav.tabs a:hover{ color:#fff; border-color:var(--header-line); background:rgba(255,255,255,0.06);}
nav.tabs a.active{ background:rgba(255,255,255,0.14); border-color:var(--yellow); color:#fff; font-weight:600;}

/* ---- global filter bar ---- */
.gfilter{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:16px 0 20px; box-shadow:0 1px 3px rgba(23,40,31,0.05);}
.gfilter form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; width:100%;}
.gfilter label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-right:4px;}
.gfilter select, .gfilter input[type=text]{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:8px 10px; border-radius:7px; font-family:'Sarabun',sans-serif; font-size:13px;
}
.gfilter button{
  background:var(--teal); border:none; color:#fff; font-weight:700; padding:8px 16px;
  border-radius:7px; font-family:'Chakra Petch',sans-serif; font-size:13px; cursor:pointer;
}
.gfilter button:hover{ background:var(--header-bg); }
.gfilter .resetlink{ color:var(--muted); font-size:12.5px; text-decoration:none; border:1px solid var(--line); padding:8px 14px; border-radius:7px;}
.gfilter .resetlink:hover{ border-color:var(--coral); color:var(--coral);}

.chip{ background:rgba(23,138,84,0.1); border:1px solid rgba(23,138,84,0.35); color:var(--teal); font-size:12.5px; padding:4px 10px 4px 12px; border-radius:20px; display:inline-flex; align-items:center; gap:8px;}
.chip a{ color:var(--teal); text-decoration:none; font-size:14px; line-height:1;}
.activechips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:-10px 0 20px; }
.activechips .ftitle{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-right:2px;}

/* ---- kpi cards ---- */
.kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:20px; }
.kpi{ background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--kc,var(--teal)); border-radius:12px; padding:16px 16px 14px; position:relative; overflow:hidden; box-shadow:0 1px 4px rgba(23,40,31,0.05);}
.kpi::after{ content:''; position:absolute; right:-20px; top:-20px; width:70px; height:70px; border-radius:50%; background:var(--kc,var(--teal)); opacity:0.06;}
.kpi .label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px;}
.kpi .value{ font-family:'Chakra Petch',sans-serif; font-size:23px; font-weight:700; color:var(--text); line-height:1;}
.kpi .sub{ font-size:11.5px; color:var(--muted); margin-top:6px;}
.kpi.teal{ --kc:var(--teal);} .kpi.teal .value{color:var(--teal);}
.kpi.amber{ --kc:var(--amber);} .kpi.amber .value{color:var(--amber);}
.kpi.coral{ --kc:var(--coral);} .kpi.coral .value{color:var(--coral);}
.kpi.blue{ --kc:var(--blue);} .kpi.blue .value{color:var(--blue);}
.kpi.violet{ --kc:var(--violet);} .kpi.violet .value{color:var(--violet);}

/* ---- panels / grid ---- */
.grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:16px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 18px 14px; box-shadow:0 1px 4px rgba(23,40,31,0.05);}
.panel h3{ font-size:14.5px; margin:0 0 3px; color:var(--text); font-weight:600;}
.panel .hint{ font-size:11.5px; color:var(--muted); margin-bottom:12px;}
.panel .hint b{ color:var(--teal); font-weight:600;}
.chart-box{ position:relative; height:230px;}
.chart-box.tall{ height:320px;}
#map{ height:380px; border-radius:10px; overflow:hidden; border:1px solid var(--line);}

/* ---- month strip ---- */
.monthstrip{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.mchip{ background:var(--panel); border:1px solid var(--line); color:var(--muted); padding:9px 16px; border-radius:8px; font-size:13px; text-decoration:none; font-family:'Chakra Petch',sans-serif; transition:all .15s; display:inline-block;}
.mchip:hover{ border-color:var(--teal); color:var(--text);}
.mchip.active{ background:rgba(23,138,84,0.1); border-color:var(--teal); color:var(--teal); font-weight:600;}
.mchip .n{ font-size:10.5px; opacity:0.75; margin-left:5px;}

/* ---- tables ---- */
.table-panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 1px 4px rgba(23,40,31,0.05);}
.table-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; flex-wrap:wrap;}
.table-head h3{ margin:0; font-size:16px; color:var(--text);}
.table-head .hint{ font-size:11.5px; color:var(--muted); margin:0;}
table{ width:100%; border-collapse:collapse; font-size:13px;}
thead th{ text-align:left; color:#fff; background:var(--header-bg); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; padding:9px 10px; white-space:nowrap;}
thead th:first-child{ border-radius:6px 0 0 6px;}
thead th:last-child{ border-radius:0 6px 6px 0;}
thead th a{ color:inherit; text-decoration:none;}
thead th a:hover{ color:var(--yellow);}
thead th.sorted a{ color:var(--yellow);}
tbody td{ padding:9px 10px; border-bottom:1px solid var(--line); }
tbody tr:nth-child(even){ background:rgba(23,138,84,0.025);}
tbody tr.linkrow{ cursor:pointer; }
tbody tr.linkrow:hover{ background:rgba(23,138,84,0.06);}
tbody tr.active-row{ background:rgba(23,138,84,0.1);}
.scroll-table{ max-height:460px; overflow-y:auto; border-radius:8px;}
.barcell{ display:flex; align-items:center; gap:8px;}
.barcell .track{ flex:1; height:6px; background:var(--panel-2); border-radius:3px; overflow:hidden; min-width:60px;}
.barcell .fill{ height:100%; background:var(--teal); border-radius:3px;}
.muted-cell{ color:var(--muted);}
.tag{ display:inline-block; padding:3px 9px; border-radius:6px; font-size:11.5px; font-weight:600;}
.tag.finish{ background:rgba(23,138,84,0.12); color:var(--teal);}
.tag.inprogress{ background:rgba(184,134,11,0.12); color:var(--amber);}
.tag.pending{ background:rgba(192,57,43,0.12); color:var(--coral);}
a.rowlink{ text-decoration:none; color:inherit; display:block;}
.drilldown-bar{ display:flex; justify-content:flex-end; margin-bottom:14px;}
.drilldown-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--header-bg); border:1px solid var(--header-bg); color:#fff;
  padding:9px 18px; border-radius:8px; font-family:'Chakra Petch',sans-serif; font-size:13px; font-weight:600;
  transition:all .15s;
}
.drilldown-btn:hover{ background:var(--header-bg-2); }
.rowdetail{ color:var(--muted); text-decoration:none; font-size:12px; border:1px solid var(--line); border-radius:6px; padding:3px 9px; white-space:nowrap;}
.rowdetail:hover{ color:var(--teal); border-color:var(--teal); }

footer{ text-align:center; color:var(--muted); font-size:12px; margin-top:34px; line-height:1.8;}
footer b{ color:var(--teal);}

@media (max-width:1180px){ .kpis{ grid-template-columns:repeat(3,1fr);} .grid,.grid2{ grid-template-columns:1fr;} .grid3{ grid-template-columns:1fr;} }
@media (max-width:640px){ .kpis{ grid-template-columns:repeat(2,1fr);} .topbar{ flex-direction:column; align-items:flex-start;} }

::-webkit-scrollbar{ width:9px; height:9px;}
::-webkit-scrollbar-track{ background:var(--panel-2);}
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px;}
.leaflet-popup-content-wrapper{ background:var(--panel); color:var(--text); border-radius:8px;}
.leaflet-popup-tip{ background:var(--panel);}
.leaflet-popup-content{ font-family:'Sarabun',sans-serif; font-size:12.5px; margin:10px 12px;}
.leaflet-popup-content b{ color:var(--teal);}