/* E-Monitoring dashboard — theme tokens */
:root {
  --bg: #F1F2F5;
  --panel: #FFFFFF;
  --text: #111827;
  --muted: #4B5563;
  --muted-2: #6B7280;
  --line: #DDE1E7;
  --line-2: #CDD3DB;
  --zebra: #F8F9FB;
  --chip: #F3F4F6;
  --hover: #E9EBEF;
  --primary: #2353D8;
  --primary-2: #2F6BF0;
  --primary-soft: #E8EFFE;
  --primary-ink: #1E40AF;
  --btn: #2353D8;
  --ok-bg: #E8EFFE;   --ok-fg: #1E40AF;
  --watch-bg: #FEF3C7; --watch-fg: #8A4B00; --watch-fill: #D98A0B;
  --over-bg: #FDE3E1;  --over-fg: #B42318;  --over-fill: #B42318;
  --off-bg: #F3F4F6;   --off-fg: #4B5563;  --off-fill: #9CA3AF;
  --good: #15803D;
  --track: #E5E7EB;
  --area: #E0E9FD;
  --grid: #EEF0F3;
  --shadow: 0 1px 3px rgba(17, 24, 39, .06);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1220;
  --panel: #111A2B;
  --text: #E5E7EB;
  --muted: #A7B0BF;
  --muted-2: #8C96A8;
  --line: #2C3A52;
  --line-2: #3B4B68;
  --zebra: #152036;
  --chip: #1A2438;
  --hover: #1C2740;
  --primary: #7EA3F5;
  --primary-2: #6E9BF5;
  --primary-soft: #1B2B4F;
  --primary-ink: #BFD0FA;
  --btn: #2F5FD8;
  --ok-bg: #1B2B4F;   --ok-fg: #BFD0FA;
  --watch-bg: #3A2A08; --watch-fg: #F5C76A; --watch-fill: #E09B22;
  --over-bg: #3B1512;  --over-fg: #F8A79E;  --over-fill: #E5574A;
  --off-bg: #1F2937;   --off-fg: #B5BDC9;  --off-fill: #6B7280;
  --good: #4ADE80;
  --track: #26334A;
  --area: #1B2B4F;
  --grid: #1F2A3D;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', 'Noto Sans Thai Looped', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--primary); }
a:hover { color: var(--primary-ink); }
h1, h2, h3 { margin: 0; }
svg { flex: 0 0 auto; }
.muted { color: var(--muted); font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.app { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar {
  flex: 0 0 248px; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  padding: 18px 14px 24px; display: flex; flex-direction: column; gap: 4px; background: var(--bg);
}
.panel {
  flex: 1 1 auto; min-width: 0; margin: 8px 8px 8px 0;
  background: var(--panel); border-radius: 20px; box-shadow: var(--shadow);
}

/* ---------- sidebar ---------- */
.brand { display: flex; align-items: center; gap: 8px; padding: 0 2px 16px; min-width: 0; }
.brand-name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer;
}
.icon-btn:hover { background: var(--hover); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { margin: 14px 14px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; color: var(--text); text-decoration: none;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item > span:first-of-type { flex: 1; }
.nav-item.is-active { background: var(--panel); color: var(--primary); font-weight: 600; box-shadow: var(--shadow); }
.nav-end { font-size: 12px; color: var(--muted-2); }
.badge { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); }
.badge.is-alert { background: var(--over-bg); color: var(--over-fg); }

/* ---------- header ---------- */
.page-head { padding: 26px clamp(16px, 2.6vw, 32px) 18px; display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--line); }
.head-row { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: flex-start; }
.head-title { display: flex; align-items: center; gap: 8px; }
.page-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.menu-mobile { display: none; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.select-box {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px; font-size: 12px; color: var(--muted-2); background: var(--panel);
}
.select-box select {
  min-height: 40px; min-width: 170px; max-width: 280px; border: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer;
}
.select-box select option, .select-box select optgroup { color: #111827; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--chip); font-size: 13px; color: var(--muted);
}
.pill svg { width: 14px; height: 14px; fill: none; stroke: var(--primary); stroke-width: 2; }
.pill strong { color: var(--text); font-weight: 600; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--chip); }
.seg button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer;
}
.seg button svg, .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seg button[aria-pressed="true"] { background: var(--btn); color: #fff; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--text);
  font: inherit; font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--hover); }
.btn-primary { background: var(--btn); border-color: var(--btn); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #1C45B8; }
.btn.is-busy svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.load-error { margin: 16px clamp(16px, 2.6vw, 32px) 0; padding: 12px 16px; border-radius: 10px; background: var(--over-bg); color: var(--over-fg); font-size: 14px; }

/* ---------- overview ---------- */
.overview { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.ov-main { flex: 999 1 560px; min-width: 0; padding: 24px clamp(16px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 24px; }
.ov-side { flex: 1 1 280px; min-width: 0; padding: 28px clamp(16px, 2.4vw, 28px); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.block-head { display: flex; flex-direction: column; }
.block-head h2 { font-size: 17px; font-weight: 700; }
.block-head .h-lg { font-size: 19px; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.grid-cards > * { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin: 0 -1px -1px 0; }
.kpi { display: flex; flex-direction: column; gap: 8px; padding: 20px; color: var(--text); text-decoration: none; }
.kpi:hover { background: var(--hover); color: var(--text); }
.kpi-label { font-size: 15px; font-weight: 600; }
.date-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
  border-radius: 999px; background: var(--primary-soft); font-size: 12px; font-weight: 500; color: var(--primary-ink);
}
.date-pill svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.kpi-value { font-size: 34px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi-value small, .mcard-val small { font-size: 15px; font-weight: 400; color: var(--muted); }
.kpi-delta { font-size: 14px; font-weight: 600; }
.kpi-delta.k-ok { color: var(--good); }
.kpi-delta.k-watch { color: var(--watch-fg); }
.kpi-delta.k-over { color: var(--over-fg); }
.kpi-delta.k-off { color: var(--muted); }
.kpi-desc { font-size: 13px; color: var(--muted); }

.ov-row { display: flex; flex-wrap: wrap; gap: 24px; }
.map-col { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.events-col { flex: 2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.map { height: 460px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); z-index: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.legend-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.legend-break { flex-basis: 100%; height: 0; }
.legend-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.legend-btn[aria-pressed="false"] { opacity: .45; }
.legend-btn .n { color: var(--muted); }
.legend-btn .dot { width: 10px; height: 10px; border-radius: 50%; }

.events { list-style: none; margin: 0; padding: 0; }
.events li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ev-time { flex: 0 0 auto; font-size: 13px; color: var(--muted); padding-top: 1px; font-variant-numeric: tabular-nums; }
.ev-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 14px; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mod-tag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); }

.indicators { display: flex; flex-direction: column; gap: 22px; }
.ind { display: flex; flex-direction: column; gap: 6px; }
.ind-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ind-label { font-size: 14px; font-weight: 600; }
.ind-value { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ind-value small { font-size: 14px; color: var(--muted); }
.ind-note { font-size: 12px; color: var(--muted); }
.src-note { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--chip); font-size: 13px; color: var(--muted); }
.src-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: 0 0 auto; }

/* bars */
.bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 3px; background: var(--primary-2); }
.fill-watch { background: var(--watch-fill) !important; }
.fill-over { background: var(--over-fill) !important; }
.fill-off { background: var(--off-fill) !important; }

/* status chip */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-ok { background: var(--ok-bg); color: var(--ok-fg); }
.st-watch { background: var(--watch-bg); color: var(--watch-fg); }
.st-over { background: var(--over-bg); color: var(--over-fg); }
.st-off { background: var(--off-bg); color: var(--off-fg); }

/* ---------- module sections ---------- */
.section { padding: 28px clamp(16px, 2.6vw, 32px); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 8px; }
.sec-head { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: flex-end; }
.sec-head > div { display: flex; flex-direction: column; gap: 6px; }
.sec-head h2 { font-size: 22px; font-weight: 700; }
.sec-head p { margin: 0; max-width: 760px; font-size: 14px; }
.tag { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); }
.mcard { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.mcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mcard-name { font-size: 15px; font-weight: 600; }
.mcard-full { font-size: 12px; color: var(--muted); text-align: right; }
.mcard-val { font-size: 30px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mcard-val.is-over { color: var(--over-fg); }
.mcard-note { font-size: 12px; color: var(--muted); }
.mcard-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--muted); font-size: 14px; }

.sec-body { display: flex; flex-wrap: wrap; gap: 24px; }
.sec-body > .table-wrap { flex: 3 1 540px; }
.chart { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.chart h3 { font-size: 16px; font-weight: 700; }
.chart-x { display: flex; justify-content: space-between; padding-left: 40px; font-size: 12px; color: var(--muted); }
.chart-x span:last-child { font-weight: 600; color: var(--text); }
.chart svg text { fill: var(--muted); font-family: 'Poppins', sans-serif; }
.chart .std-line { stroke: var(--over-fill); }
.chart .std-text { fill: var(--over-fg); }
.vbars { position: relative; height: 190px; display: flex; align-items: flex-end; gap: 14px; border-bottom: 1px solid var(--line-2); }
.vbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--muted); }
.vbar > span:last-child { width: 100%; max-width: 30px; border-radius: 6px 6px 0 0; background: var(--primary-2); }
.vbar.is-last > span:last-child { background: var(--primary); }
.std-mark { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--over-fill); }
.std-label { position: absolute; right: 0; transform: translateY(-2px); font-size: 12px; color: var(--over-fg); background: var(--panel); padding: 0 4px; }
.vbar-x { display: flex; gap: 14px; }
.vbar-x span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
.hbar { display: flex; align-items: center; gap: 10px; }
.hbar-code { flex: 0 0 56px; font-size: 13px; font-weight: 600; }
.hbar-track { flex: 1; position: relative; height: 14px; background: var(--grid); border-radius: 7px; }
.hbar-track > span { display: block; height: 14px; border-radius: 7px; background: var(--primary-2); }
.hbar-limit { position: absolute; top: -4px; bottom: -4px; border-left: 2px solid var(--text); }
.hbar-val { flex: 0 0 76px; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* tables */
.table-wrap { min-width: 0; overflow-x: auto; border: 1px solid var(--line-2); border-radius: 12px; }
.table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; padding: 11px 14px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; background: var(--chip); border-bottom: 1px solid var(--line-2); }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: 0; }
.table .t-code { font-weight: 600; display: block; }
.table .t-loc { font-size: 12px; color: var(--muted); display: block; white-space: normal; }
.table .v-watch { color: var(--watch-fg); font-weight: 700; }
.table .v-over { color: var(--over-fg); font-weight: 700; }
.table .t-wrap { white-space: normal; }
.search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; min-width: 260px; }
.search svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); min-height: 40px; }
.search:focus-within { border-color: var(--primary); }

.foot { padding: 22px clamp(16px, 2.6vw, 32px) 28px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }

/* ---------- map markers & popups ---------- */
.leaflet-container { font-family: inherit; background: var(--grid); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.5; }
.leaflet-popup-content strong { display: block; font-size: 14px; color: #111827; }
.leaflet-tooltip { font-family: inherit; font-size: 12px; }
.mk { width: 18px; height: 18px; border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(17,24,39,.35), 0 2px 4px rgba(17,24,39,.25); }
.mk-circle { border-radius: 50%; }
.mk-square { border-radius: 4px; }
.mk-diamond { border-radius: 3px; transform: rotate(45deg) scale(.9); }
.legend-btn .mk { width: 12px; height: 12px; border-width: 0; box-shadow: none; }
.st-pop table { border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.st-pop td { padding: 2px 8px 2px 0; white-space: nowrap; }
.st-pop td.v { font-weight: 600; color: #111827; }
.st-pop td.s { color: #6B7280; }
.st-pop .chip { margin-top: 6px; }
.st-pop .p-ok { background: #E8EFFE; color: #1E40AF; }
.st-pop .p-watch { background: #FEF3C7; color: #8A4B00; }
.st-pop .p-over { background: #FDE3E1; color: #B42318; }
.st-pop .p-off { background: #F3F4F6; color: #4B5563; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- responsive ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 900; }
@media (max-width: 900px) {
  .sidebar {
    position: fixed; z-index: 1000; left: 0; top: 0; bottom: 0; max-height: none; width: 270px;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow);
  }
  body.menu-open .sidebar { transform: none; }
  .panel { margin: 0; border-radius: 0; }
  .menu-mobile { display: inline-flex; }
  .page-head h1 { font-size: 22px; }
  .ov-side { border-left: 0; border-top: 1px solid var(--line); }
  .map { height: 380px; }
  .search { min-width: 0; width: 100%; }
}

/* ---------- print ---------- */
@media print {
  .sidebar, .controls, .toolbar, .legend, .scrim, .leaflet-control-container, .menu-mobile { display: none !important; }
  body { background: #fff; }
  .panel { margin: 0; box-shadow: none; border-radius: 0; }
  .section, .overview { break-inside: avoid-page; }
}

/* data-source tags */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-live { background: #DCFCE7; color: #14532D; }
.tag-sample { background: var(--watch-bg); color: var(--watch-fg); }
:root[data-theme="dark"] .tag-live { background: #12341F; color: #86EFAC; }
.hbar-code-wide { flex-basis: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* long tables scroll inside their box with a sticky header */
.table-wrap.scroll { max-height: 560px; overflow: auto; }
.table-wrap.scroll thead th { position: sticky; top: 0; z-index: 1; }
.table .t-vals { font-size: 13px; line-height: 1.6; min-width: 260px; }

/* ---------- per-system colours (match the map markers) ---------- */
[data-mod="AQMS"] { --mod: #15803D; --mod-2: #22A35A; --mod-soft: #DCFCE7; --mod-ink: #14532D; }
[data-mod="WQMS"] { --mod: #0E7490; --mod-2: #0891B2; --mod-soft: #CFFAFE; --mod-ink: #155E75; }
[data-mod="CEMS"] { --mod: #6D28D9; --mod-2: #7C3AED; --mod-soft: #EDE9FE; --mod-ink: #4C1D95; }
:root[data-theme="dark"] [data-mod="AQMS"] { --mod: #4ADE80; --mod-2: #22C55E; --mod-soft: #12341F; --mod-ink: #86EFAC; }
:root[data-theme="dark"] [data-mod="WQMS"] { --mod: #22D3EE; --mod-2: #06B6D4; --mod-soft: #0B3440; --mod-ink: #A5F3FC; }
:root[data-theme="dark"] [data-mod="CEMS"] { --mod: #A78BFA; --mod-2: #8B5CF6; --mod-soft: #2A1E4F; --mod-ink: #DDD6FE; }

.kpi[data-mod] { box-shadow: inset 0 4px 0 var(--mod); }
.kpi[data-mod] .kpi-label { color: var(--mod-ink); }
.kpi[data-mod] .date-pill { background: var(--mod-soft); color: var(--mod-ink); }
.kpi[data-mod] .kpi-delta.k-ok { color: var(--mod); }
.section[data-mod] { box-shadow: inset 0 3px 0 var(--mod); }
.section[data-mod] .tag-mod { display: inline-flex; align-items: center; gap: 6px; background: var(--mod-soft); color: var(--mod-ink); }
.section[data-mod] .tag-mod .mk { width: 10px; height: 10px; border: 0; box-shadow: none; background: var(--mod); }
.section[data-mod] .sec-head h2 { color: var(--mod-ink); }
.section[data-mod] .grid-cards { border-color: var(--mod-soft); }
.section[data-mod] .mcard-name { color: var(--mod-ink); }
.section[data-mod] .bar > span.fill-ok,
.section[data-mod] .hbar-track > span.fill-ok,
.kpi[data-mod] .bar > span { background: var(--mod-2); }
.section[data-mod] .st-ok { background: var(--mod-soft); color: var(--mod-ink); }
.section[data-mod] .table th { background: var(--mod-soft); color: var(--mod-ink); }
.section[data-mod] .table-wrap { border-color: var(--mod-soft); }
.mod-tag[data-mod] { background: var(--mod-soft); color: var(--mod-ink); }
.nav-item[href="#aqms"] svg { stroke: #15803D; }
.nav-item[href="#wqms"] svg { stroke: #0891B2; }
.nav-item[href="#cems"] svg { stroke: #7C3AED; }

/* ---------- map: boundaries, parcels, measure ---------- */
.sw-bound { width: 14px; height: 10px; border: 1.5px dashed #374151; background: rgba(55, 65, 81, .08); border-radius: 2px; }
.sw-parcel { width: 14px; height: 10px; border: 1px solid #475569; background: rgba(148, 163, 184, .3); border-radius: 2px; }
.leaflet-tooltip.bound-tip { font-weight: 600; }
.map-hint { background: rgba(255, 255, 255, .92); padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #374151; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.map-hint[hidden] { display: none; }
.measure-ctl { display: flex; align-items: flex-start; gap: 0; background: #fff; }
.measure-ctl .m-toggle { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: #fff; cursor: pointer; border-radius: 4px; color: #111827; }
.measure-ctl .m-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.measure-ctl .m-toggle[aria-pressed="true"] { background: #2353D8; color: #fff; }
.measure-ctl .m-panel { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; font-size: 12.5px; color: #111827; white-space: nowrap; }
.measure-ctl .m-panel[hidden] { display: none; }
.measure-ctl .m-panel button { min-height: 28px; padding: 0 10px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.measure-ctl .m-panel .m-done { background: #2353D8; border-color: #2353D8; color: #fff; }
.map.is-measuring, .map.is-measuring .leaflet-interactive { cursor: crosshair !important; }
.m-label span { display: inline-block; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 999px; background: #111827; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.m-name span { display: inline-block; transform: translate(8px, -50%); padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.92); color: #111827; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pop-near { margin-top: 8px; padding-top: 6px; border-top: 1px solid #E5E7EB; font-size: 12px; }
.pop-near ol { margin: 4px 0 0; padding-left: 18px; }
.pop-near li { margin: 2px 0; }
.pop-near .s { color: #6B7280; }
.pop-link { border: 0; padding: 0; background: none; color: #2353D8; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- clearer separation between blocks ---------- */
#sections { border-top: 12px solid var(--bg); }
#sections .section + .section { border-top: 12px solid var(--bg); }
.section, .overview { border-bottom: 0; }
#criteria { border-top: 12px solid var(--bg); }
.ov-side { border-left: 1px solid var(--line-2); }
.ov-row > .events-col { border-left: 1px solid var(--line-2); padding-left: 24px; }
.events li { border-bottom: 1px solid var(--line-2); }
.ind + .ind { border-top: 1px solid var(--line); padding-top: 18px; }
.grid-cards { border-width: 1px; border-radius: 8px; }
.grid-cards > * { border-right-color: var(--line-2); border-bottom-color: var(--line-2); }
.table td { border-bottom: 1px solid var(--line); }
.table tbody tr:nth-child(even) td { background: var(--zebra); }
.table tbody tr:hover td { background: var(--hover); }
.table th { border-bottom: 1px solid var(--line-2); }
.table-wrap { border-color: var(--line-2); }
.section[data-mod] .table th { border-bottom-color: var(--mod-2); }
.section[data-mod] .grid-cards { border-color: var(--mod-2); }
.hbar + .hbar { border-top: 1px dashed var(--line); padding-top: 8px; }
.page-head { border-bottom: 1px solid var(--line-2); }
@media (max-width: 900px) { .ov-row > .events-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 16px; } }

/* ---------- pin markers (AQMS + estates) ---------- */
.mk.mk-pin { position: relative; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.mk.mk-pin::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; }
.mk.mk-estate { width: 16px; height: 16px; border-width: 2px; }
.legend-btn .mk.mk-pin { width: 12px; height: 12px; transform: rotate(-45deg) translate(1px, -1px); }
.legend-btn .mk.mk-pin::after { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
.section[data-mod] .tag-mod .mk.mk-pin { transform: rotate(-45deg); }

/* station-count cards */
.kpi-count .kpi-label { display: inline-flex; align-items: center; gap: 8px; }
.kpi-count .kpi-label .mk { width: 12px; height: 12px; border: 0; box-shadow: none; background: var(--mod); }
.kpi-count .kpi-label .mk.mk-pin { transform: rotate(-45deg); }
.kpi-count .kpi-label .mk.mk-diamond { transform: rotate(45deg) scale(.85); }
.kpi-count .kpi-value { font-size: 40px; color: var(--mod-ink); }

/* long page title */
.head-title { flex: 1 1 520px; min-width: 0; }
.page-head h1 { font-size: clamp(20px, 2vw, 26px); text-wrap: balance; }

/* ---------- thicker, darker dividers ---------- */
:root { --line: #C9D0D9; --line-2: #AEB7C3; }
:root[data-theme="dark"] { --line: #3A4A66; --line-2: #4E6080; }
.table td { border-bottom: 1.5px solid var(--line); border-right: 1px solid var(--line); }
.table th { border-bottom: 2px solid var(--line-2); border-right: 1px solid var(--line); }
.table td:last-child, .table th:last-child { border-right: 0; }
.table-wrap { border-width: 1.5px; }
.grid-cards { border-width: 2px; }
.grid-cards > * { border-right-width: 2px; border-bottom-width: 2px; margin: 0 -2px -2px 0; }
.section[data-mod] .table th { border-bottom-width: 2px; }
.ov-side { border-left-width: 2px; }
.ind + .ind { border-top-width: 1.5px; }
.hbar + .hbar { border-top: 1px solid var(--line); }
.page-head { border-bottom-width: 2px; }
.map { border-width: 1.5px; border-color: var(--line-2); }

/* ---------- cards as separate boxes with a strong outline ---------- */
.grid-cards { border: 0; border-radius: 0; overflow: visible; gap: 14px; }
.grid-cards > * {
  margin: 0; border: 2px solid var(--line-2); border-radius: 12px; background: var(--panel);
}
.grid-cards > .kpi[data-mod] { border-color: var(--mod-2); box-shadow: inset 0 5px 0 var(--mod); }
.section[data-mod] .grid-cards { border: 0; }
.section[data-mod] .grid-cards > * { border-color: var(--line-2); box-shadow: inset 0 3px 0 var(--mod-2); }
.table-wrap { border-width: 2px; }
.table td { border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ===================== PRINT (A4 แนวนอน) ===================== */
.print-only { display: none; }
body.printing .map { height: 420px; }
@page { size: A4 landscape; margin: 10mm 12mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; font-size: 11px; }
  :root { --panel: #fff; }
  .app { display: block; min-height: 0; }
  .sidebar, .controls, .toolbar, .legend, .scrim, .menu-mobile, .load-error, #viewStations,
  .leaflet-control-container, .map-hint, .measure-ctl { display: none !important; }
  .print-only { display: block; }
  .panel { margin: 0; border-radius: 0; box-shadow: none; }
  a { color: inherit; text-decoration: none; }

  /* header */
  .page-head { padding: 0 0 6px; gap: 6px; border-bottom: 2px solid #111827; }
  .page-head h1 { font-size: 17px; }
  .chips .pill { padding: 1px 8px; font-size: 11px; }

  /* overview: การ์ด 3 ใบ → แผนที่ → ตัวชี้วัด 4 ช่องเรียงแถวเดียว */
  .overview { display: block; break-after: page; }
  .ov-main { padding: 8px 0; gap: 10px; }
  .ov-side { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 8px 0 0; border: 0 !important; }
  .ov-side .block-head { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .ind + .ind { border-top: 0; padding-top: 0; }
  .ind { border: 1.5px solid #AEB7C3; border-radius: 8px; padding: 8px 10px; break-inside: avoid; }
  .ind-value { font-size: 18px; }
  .ov-row { display: block; }
  .map-col { gap: 4px; }
  .map { height: 105mm !important; border: 1.5px solid #AEB7C3; break-inside: avoid; }
  .block-head h2 { font-size: 13px; }
  .kpis.grid-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .kpi { padding: 10px 12px; break-inside: avoid; }
  .kpi-count .kpi-value { font-size: 26px; }

  /* แต่ละระบบขึ้นหน้าใหม่ */
  #sections { border: 0 !important; }
  .section { break-before: page; padding: 0 !important; gap: 10px; border: 0 !important; box-shadow: none !important; }
  #sections .section:first-child { break-before: auto; }
  #criteria { break-before: page; border: 0 !important; }
  .sec-head { gap: 4px 16px; }
  .sec-head h2 { font-size: 16px; }
  .sec-head p { font-size: 11px; }
  .section .grid-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 8px; }
  .mcard { padding: 8px 10px; gap: 4px; break-inside: avoid; }
  .mcard-val { font-size: 18px; }
  .sec-body { display: block; }
  .chart { margin-top: 10px; break-inside: avoid; }
  .hbar { gap: 6px; }
  .hbar + .hbar { padding-top: 4px; }

  /* ตาราง: แสดงทุกแถว ไม่เลื่อน หัวตารางซ้ำทุกหน้า */
  .table-wrap, .table-wrap.scroll { max-height: none !important; overflow: visible !important; border: 1.5px solid #AEB7C3; }
  .table { min-width: 0 !important; font-size: 9.5px; }
  .table thead { display: table-header-group; }
  .table thead th { position: static !important; padding: 5px 6px; }
  .table td { padding: 4px 6px; }
  .table tr { break-inside: avoid; }
  .table .t-vals { min-width: 0; font-size: 9px; }
  .table tbody tr:hover td { background: inherit; }

  .foot { padding: 6px 0 0; font-size: 10px; }
}
.more-n { display: none; color: var(--muted); }
@media print {
  .section, .overview { break-inside: auto !important; }
  .ov-side { display: block; }
  .ov-side .block-head { margin-bottom: 6px; }
  #indicators { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .map { height: 92mm !important; }
  .sec-body { display: flex !important; flex-direction: column; gap: 10px; }
  .sec-body > .chart { order: -1; margin-top: 0; }
  .sec-body > .table-wrap { flex: none; }
  .t-vals .more { display: none; }
  .t-vals .more-n { display: inline; }
}
@media print {
  .table .t-wrap { white-space: nowrap; }
  .table .t-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85mm; }
  .table td.t-vals { white-space: normal; }
  .hbar { min-height: 0; }
  .hbar-track, .hbar-track > span { height: 9px; }
  .hbar + .hbar { padding-top: 2px; }
  .chart .block-head h3 { font-size: 12px; }
}
@media print {
  .chart { break-inside: auto !important; }
  .chart .block-head { break-after: avoid; }
  .hbar { break-inside: avoid; }
}

/* ---------- map search ---------- */
.map-head { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: flex-end; }
.map-search { position: relative; flex: 0 1 380px; min-width: 240px; z-index: 1100; }
.map-search .search { min-width: 0; width: 100%; background: var(--panel); border-width: 1.5px; }
.search-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  max-height: 340px; overflow-y: auto; background: var(--panel); border: 1.5px solid var(--line-2);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(17, 24, 39, .15);
}
.search-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; min-height: 44px; }
.search-list li[aria-selected="true"], .search-list li:hover { background: var(--primary-soft); }
.search-list li .mk { width: 12px; height: 12px; flex: 0 0 auto; border-width: 0; box-shadow: none; }
.search-list li .mk.mk-diamond { transform: rotate(45deg) scale(.85); }
.search-list .sl-text { display: flex; flex-direction: column; min-width: 0; }
.search-list .sl-text b { font-weight: 600; font-size: 14px; }
.search-list .sl-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-list .sl-empty { color: var(--muted); cursor: default; }
@media print { .map-search { display: none !important; } }