/* Responsive + overflow สำหรับทุกแดชบอร์ด mockup */

/* มาตรฐานขนาด UI (zoom เดียวกันทุกหน้า d1–d10) — ค่าคงที่ ไม่ใช้ vw/vh */
body[data-dash] {
  --fs-base: 24px;
  --fs-h2: 19px;
  --fs-kpi: 40px;
  --fs-kpi-name: 17px;
  --fs-kpi-unit: 16px;
  --fs-ui: 16px;
  --fs-ui-md: 15px;
  --fs-cap: 14px;
  --fs-trend-legend: 13px;
  --fs-table: 16px;
  --fs-ui-sm: 16px;
  --fs-axis: 16px;
  --fs-chart-lbl: 15px;
  --fs-chart-data: 12px;
  --fs-chrome-h1: 26px;
  --fs-chrome-sub: 18px;
  --fs-chrome-meta: 17px;
  --fs-chrome-org: 15px;
  --fs-filter: 15px;
  --fs-filter-chip: 14px;
  --fs-tip: 20px;
  --fs-period: 16px;
  --dash-chart-h: 280px;
  --dash-chart-h-sm: 220px;
  --dash-chart-h-lg: 340px;
  --dash-map-h: 520px;
}

/* d3 — กราฟแถวคู่สูงกว่ามาตรฐาน (เดิม 400px ใน mockup) */
body[data-dash="3"] {
  --dash-chart-h-lg: 400px;
}

/* d3 — legend เรดาร์ (HTML) จัดกึ่งกลาง 2 แถวสม่ำเสมอ */
body[data-dash="3"] .dash-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 8px 14px;
  margin: 2px 10px 8px;
  padding: 0 4px;
  min-height: 0;
}

body[data-dash="3"] .dash-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: var(--fs-trend-legend, 13px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted, #5b6b7e);
}

body[data-dash="3"] .dash-chart-legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

body[data-dash="3"] .dash-chart-legend-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-dash="3"] .card:has(#cRadar) .chart-box.lg {
  flex: 1 1 auto;
  min-height: 280px;
}

/* d9 — แผนที่ + Top 10 สูงเท่ากัน กะทัดรัด (ไม่ยืด 520px) */
body[data-dash="9"] {
  --dash-map-h: 400px;
}

body[data-dash="9"] .card.mapCard.card--chart-grow,
body[data-dash="9"] .card--rank.card--chart-grow {
  align-self: start;
}

body[data-dash="9"] .card--rank.card--chart-grow {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body[data-dash="9"] .card--rank .chart-box.lg {
  flex: 0 0 auto;
  height: var(--dash-map-h) !important;
  min-height: var(--dash-map-h);
  max-height: var(--dash-map-h);
}

body[data-dash="9"] .card.mapCard #mapEl {
  height: var(--dash-map-h) !important;
  min-height: var(--dash-map-h);
  max-height: var(--dash-map-h);
}

body[data-dash="9"] .card.mapCard .legend-swatch {
  margin-top: 6px;
}

body[data-dash="3"] .card--row-stretch:has(#cRss) .chart-box.lg {
  min-height: 320px;
}

/* d1 — KPI / SVG กราฟ (Executive Overview) */
/* KPI — กันชื่อ/ค่า/หน่วยทับกัน (เช่น การ์ด กลุ่ม · ทั้งหมด · ปี 2568) */
body[data-dash] .kpi .body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 14px !important;
}

body[data-dash] .kpi .name {
  line-height: 1.4 !important;
}

body[data-dash] .kpi .val {
  margin-top: 2px !important;
  line-height: 1.18 !important;
  font-size: clamp(22px, 3.5vw, var(--fs-kpi)) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-dash] .kpi .unit {
  margin-top: 2px !important;
  line-height: 1.35 !important;
}

body[data-dash="1"] .kpi .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.28;
}

body[data-dash="1"] .kpi .val {
  font-size: clamp(28px, 4.2vw, var(--fs-kpi));
  letter-spacing: -0.02em;
}

body[data-dash="1"] #trendChart svg,
body[data-dash="1"] #cagrChart svg,
body[data-dash="1"] #countryChart svg,
body[data-dash="1"] #treemap svg {
  overflow: visible;
}

body[data-dash="1"] #countryChart svg,
body[data-dash="1"] #treemap svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

/* d1 — แนวโน้ม: SVG สูงตามความกว้าง (ไม่ยืดกล่องแล้วเว้นขาวใน SVG) */
body[data-dash="1"] main .card.card--chart-grow > #trendChart {
  flex: 0 0 auto !important;
}

body[data-dash="1"] #trendChart {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 0;
}

body[data-dash="1"] #trendChart svg {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 980 / 300;
}

body[data-dash="1"] #treemap {
  min-height: var(--dash-chart-h) !important;
  height: var(--dash-chart-h) !important;
}

body[data-dash="1"] #treemap svg {
  height: 100% !important;
  max-height: 100% !important;
  overflow: visible;
}

body[data-dash] .dash-page,
body[data-dash]:not(.dash-with-sidebar) {
  font-size: var(--fs-base);
}

/* ไม่แสดงคำอธิบายคลิกกรอง / แคปชันกราฟที่ว่าง */
body[data-dash] .chart-click-hint,
body[data-dash] .card > .cap:empty {
  display: none !important;
}

/* ใน iframe (CleansingConsole) ไม่มี .dash-page wrapper */
body[data-dash]:not(.dash-with-sidebar) .chart-box {
  position: relative;
  width: 100%;
  height: var(--dash-chart-h) !important;
  min-height: var(--dash-chart-h);
  max-height: var(--dash-chart-h);
}

body[data-dash]:not(.dash-with-sidebar) .chart-box.sm {
  height: var(--dash-chart-h-sm) !important;
  min-height: var(--dash-chart-h-sm);
  max-height: var(--dash-chart-h-sm);
}

body[data-dash]:not(.dash-with-sidebar) .chart-box.lg {
  height: var(--dash-chart-h-lg) !important;
  min-height: var(--dash-chart-h-lg);
  max-height: var(--dash-chart-h-lg);
}

body[data-dash="9"]:not(.dash-with-sidebar) .chart-box.lg {
  height: var(--dash-map-h) !important;
  min-height: var(--dash-map-h);
  max-height: var(--dash-map-h);
}

body[data-dash]:not(.dash-with-sidebar) #mapEl {
  height: var(--dash-map-h) !important;
  min-height: var(--dash-map-h);
  max-height: var(--dash-map-h);
}

.dash-page {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: visible;
}

.dash-page main,
.dash-page .kpis {
  min-width: 0;
  max-width: 100%;
}

.dash-page .card {
  min-width: 0;
  overflow: hidden;
  align-self: start;
}

body[data-dash]:not(.dash-with-sidebar) main .card {
  align-self: start;
}

/* การ์ดคู่ในแถวเดียวกัน — สูงเท่ากัน (ตาราง + โดนัท) */
body[data-dash] main .card.card--row-stretch,
body[data-dash]:not(.dash-with-sidebar) main .card.card--row-stretch {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body[data-dash] main .card.card--row-stretch > h2,
body[data-dash] main .card.card--chart-grow > h2,
body[data-dash] main .card:has(.chart-box--donut-fill) > h2 {
  flex: 0 0 auto;
}

body[data-dash] main .card.card--chart-grow > .cap,
body[data-dash] main .card.card--chart-grow > .trendLegend,
body[data-dash] main .card.card--chart-grow > .table-scroll:first-of-type {
  flex: 0 0 auto;
}

/* การ์ด chart-grow เดี่ยว — คงความสูงมาตรฐาน */
body[data-dash] main .card.card--chart-grow:not(.card--row-stretch) .chart-box,
body[data-dash]:not(.dash-with-sidebar) main .card.card--chart-grow:not(.card--row-stretch) .chart-box,
.dash-page .card.card--chart-grow:not(.card--row-stretch) .chart-box {
  flex: 0 0 auto;
}

/* การ์ดคู่แถวเดียวกัน — Chart.js ต้องมีความสูงชัด (height:auto ทำให้ canvas 0px ใน iframe) */
body[data-dash] main .card.card--row-stretch.card--chart-grow .chart-box:not(.chart-box--donut-fill),
body[data-dash]:not(.dash-with-sidebar)
  main
  .card.card--row-stretch.card--chart-grow
  .chart-box:not(.chart-box--donut-fill),
.dash-page .card.card--row-stretch.card--chart-grow .chart-box:not(.chart-box--donut-fill) {
  flex: 0 0 auto !important;
  height: var(--dash-chart-h) !important;
  min-height: var(--dash-chart-h) !important;
  max-height: none !important;
}

body[data-dash] main .card.card--row-stretch.card--chart-grow .chart-box.lg:not(.chart-box--donut-fill),
body[data-dash]:not(.dash-with-sidebar)
  main
  .card.card--row-stretch.card--chart-grow
  .chart-box.lg:not(.chart-box--donut-fill),
.dash-page .card.card--row-stretch.card--chart-grow .chart-box.lg:not(.chart-box--donut-fill) {
  height: var(--dash-chart-h-lg) !important;
  min-height: var(--dash-chart-h-lg);
}

body[data-dash] main .card.card--chart-grow #mapEl,
body[data-dash]:not(.dash-with-sidebar) main .card.card--chart-grow #mapEl,
.dash-page .card.card--chart-grow #mapEl {
  flex: 0 0 auto;
  height: var(--dash-map-h) !important;
  min-height: var(--dash-map-h);
  max-height: var(--dash-map-h);
}

/* โดนัทในการ์ดคู่แถวเดียวกัน — ขยายเต็มใต้หัวข้อ (d10, d2 สัดส่วน ฯลฯ) */
body[data-dash] main .card.card--row-stretch.card--chart-grow .chart-box.chart-box--donut-fill,
body[data-dash]:not(.dash-with-sidebar)
  main
  .card.card--row-stretch.card--chart-grow
  .chart-box.chart-box--donut-fill,
.dash-page .card.card--row-stretch.card--chart-grow .chart-box.chart-box--donut-fill {
  flex: 0 0 auto !important;
  min-height: var(--dash-chart-h-lg) !important;
  height: var(--dash-chart-h-lg) !important;
  max-height: none !important;
}


body[data-dash] main .card.card--chart-grow .quadrant-grid {
  flex: 1 1 0;
  min-height: 160px;
  align-content: stretch;
}

body[data-dash] main .card.card--body-grow > ol,
body[data-dash] main .card.card--body-grow > .card-body-fill {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  min-height: 120px;
  margin-top: 8px;
  margin-bottom: 4px;
}

body[data-dash] main .card.card--body-grow .quadrant-grid {
  flex: 1 1 0;
  min-height: 160px;
  align-content: stretch;
  margin-top: 8px;
}


.dash-page .chart-box {
  position: relative;
  width: 100%;
  height: var(--dash-chart-h) !important;
  min-height: var(--dash-chart-h);
  max-height: var(--dash-chart-h);
}

.dash-page .chart-box.sm {
  height: var(--dash-chart-h-sm) !important;
  min-height: var(--dash-chart-h-sm);
  max-height: var(--dash-chart-h-sm);
}

.dash-page .chart-box.lg {
  height: var(--dash-chart-h-lg) !important;
  min-height: var(--dash-chart-h-lg);
  max-height: var(--dash-chart-h-lg);
}

/* d9: กราฟจัดอันดับ / แผนที่ สูงกว่ามาตรฐาน */
.dash-page .chart-box.lg.tall,
body[data-dash="9"] .dash-page .chart-box.lg {
  height: var(--dash-map-h) !important;
  min-height: var(--dash-map-h);
  max-height: var(--dash-map-h);
}

.dash-page .chart-box canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}

body[data-dash]:not(.dash-with-sidebar) .chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}

/* โดนัท/พาย — จำกัดความกว้างในการ์ดกว้าง ให้วงใหญ่พอดีกับความสูง */
body[data-dash] .chart-box.chart-box--donut {
  height: var(--dash-chart-h) !important;
  min-height: var(--dash-chart-h);
  max-height: var(--dash-chart-h);
  max-width: min(100%, 420px);
  margin-left: auto;
  margin-right: auto;
}

body[data-dash] .chart-box.chart-box--donut.chart-box--compact {
  height: var(--dash-chart-h-sm) !important;
  min-height: var(--dash-chart-h-sm);
  max-height: var(--dash-chart-h-sm);
  max-width: min(100%, 360px);
}

body[data-dash] .chart-box.chart-box--donut.lg {
  height: var(--dash-chart-h-lg) !important;
  min-height: var(--dash-chart-h-lg);
  max-height: var(--dash-chart-h-lg);
  max-width: min(100%, 440px);
}

/* โดนัทเต็มพื้นที่การ์ด (ไม่ย่อกลางการ์ดกว้าง) — d10 คู่ตาราง, d6 แถวเต็ม */
body[data-dash] .chart-box.chart-box--donut.chart-box--donut-fill {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* d6 — โดนัท Tier กลางการ์ด ไม่เต็มความกว้างแถว */
body[data-dash="6"] main .card.card--donut-tier {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body[data-dash="6"] main .card.card--donut-tier .chart-box.chart-box--donut {
  flex: 0 0 auto;
  height: var(--dash-chart-h-lg) !important;
  min-height: var(--dash-chart-h-lg);
  max-height: var(--dash-chart-h-lg) !important;
  max-width: min(100%, 420px);
  margin: 8px auto 4px;
  align-self: center;
}

/* d10 — โดนัทคู่ตาราง: ไม่ยืดเต็มความสูงการ์ด */
body[data-dash="10"] main .card.card--donut-paired {
  display: flex;
  flex-direction: column;
}

body[data-dash="10"] main .card.card--donut-paired > h2 {
  flex: 0 0 auto;
}

body[data-dash="10"] main .card.card--donut-paired .chart-box.chart-box--donut {
  flex: 0 0 auto;
  height: var(--dash-chart-h-lg) !important;
  min-height: var(--dash-chart-h-lg);
  max-height: var(--dash-chart-h-lg) !important;
  max-width: min(100%, 380px);
  margin: auto;
  align-self: center;
}

.dash-page #mapEl {
  height: var(--dash-map-h) !important;
  min-height: var(--dash-map-h);
  max-height: var(--dash-map-h);
}

/* d1 — SVG ให้สูงเท่ากราฟ Chart.js (ยกเว้น trend ใช้ aspect-ratio) */
.dash-page #treemap svg,
.dash-page #cagrChart svg,
.dash-page #countryChart svg {
  height: var(--dash-chart-h) !important;
  max-height: var(--dash-chart-h) !important;
  width: 100% !important;
}

.dash-page .kpis {
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)) !important;
}

.dash-page main {
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

/* ห้ามตั้ง table.data เป็น display:block — แถวจะกว้างแค่เนื้อหา ไม่เต็มการ์ด
   ตารางกว้างเกินให้เลื่อนใน wrapper (.table-scroll หรือ div ที่มี overflow) แทน */
.dash-page .table-scroll,
.dash-page .table-wrap,
body[data-dash] .rss-table-wrap,
body[data-dash] .card > .rss-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* ── ตารางข้อมูล: หัวคอลัมน์จัดแนวตรงข้อมูล + เส้นคั่นหัวข้อ ── */
body[data-dash] .card > h2 {
  font-size: var(--fs-h2);
  line-height: 1.28;
  padding-bottom: 6px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line, #d8e0ea);
}

body[data-dash] .card > h2::before {
  height: 14px;
  width: 3px;
}

body[data-dash] .card > .cap {
  font-size: var(--fs-cap) !important;
  line-height: 1.4;
  margin: 4px 0 8px 13px;
}

body[data-dash] .trendLegend {
  font-size: var(--fs-trend-legend) !important;
  font-weight: 600;
  margin: 2px 0 12px 13px !important;
  padding-bottom: 2px;
}

/* d7 — เลือกผลิตภัณฑ์: ไม่ใช้เส้นคั่นใต้หัวข้อ + ให้รายการค้นหาลอยทับได้ */
body[data-dash] .card:has(.prod-picker),
.dash-page .card:has(.prod-picker) {
  overflow: visible;
}

body[data-dash] .card:has(.prod-picker):focus-within,
.dash-page .card:has(.prod-picker):focus-within {
  z-index: 60;
  position: relative;
}

body[data-dash] .card:has(.prod-picker) > h2 {
  border-bottom: none;
  padding-bottom: 0;
}

body[data-dash] .card > .table-scroll,
body[data-dash] .card > div.table-scroll,
body[data-dash] .card > .rss-table-wrap,
body[data-dash] .card > #productTableWrap,
body[data-dash] .card > #compTableWrap,
body[data-dash] .card > #hsTableWrap {
  margin-top: 12px;
}

/* d2 — ตาราง HS Chapter: เลื่อนในขอบการ์ด ไม่ล้น */
body[data-dash] .table-scroll.table-scroll--hs,
body[data-dash] #hsTableWrap.table-scroll {
  overflow: auto;
  max-width: 100%;
  max-height: min(480px, 62vh);
  border: 1px solid var(--line2, #eaeff4);
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}

body[data-dash] table.data.table-hs {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}

body[data-dash] table.data.table-hs .col-rank { width: 5.5%; }
body[data-dash] table.data.table-hs .col-hs { width: 7%; }
body[data-dash] table.data.table-hs .col-desc { width: 28%; }
body[data-dash] table.data.table-hs .col-grp { width: 9%; }
body[data-dash] table.data.table-hs .col-val { width: 16%; }
body[data-dash] table.data.table-hs .col-cagr { width: 11%; }
body[data-dash] table.data.table-hs .col-trend { width: 12%; }

body[data-dash] table.data.table-hs td.cell-desc,
body[data-dash] table.data.table-hs th:nth-child(3) {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

body[data-dash] table.data.table-hs td.cen .badge {
  white-space: nowrap;
}

body[data-dash] table.data {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--fs-table, var(--fs-ui-md));
  line-height: 1.35;
}

body[data-dash] table.data thead th {
  text-align: left;
  vertical-align: middle;
  font-weight: 700;
  background: #f7f9fc;
  color: var(--muted, #5b6b7e);
  border-bottom: 2px solid var(--line, #d8e0ea);
  border-right: 1px solid var(--line2, #eaeff4);
  padding: 8px 10px;
  white-space: normal;
  line-height: 1.28;
}

body[data-dash] table.data.table-rss {
  min-width: 1120px;
}

body[data-dash] table.data.table-rss thead th.num {
  min-width: 4.8em;
}

body[data-dash] table.data thead th:last-child {
  border-right: none;
}

body[data-dash] table.data tbody td {
  vertical-align: middle;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line2, #eaeff4);
  border-right: 1px solid var(--line2, #eaeff4);
}

body[data-dash] table.data .badge {
  font-size: calc(var(--fs-table, 18px) * 0.88);
  white-space: nowrap;
}

body[data-dash] table.data tbody td:last-child {
  border-right: none;
}

body[data-dash] table.data th.num,
body[data-dash] table.data td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body[data-dash] table.data th.cen,
body[data-dash] table.data td.cen {
  text-align: center;
}

/* ป้าย "ข้อมูลจำลอง" ใต้ชื่อหน่วยงานใน header (ข้อความเต็มอยู่ใน title) */
header .right .dash-mock-badge {
  display: inline-block;
  margin-top: 3px;
  padding: 0 8px;
  border: 1px solid var(--gold, #b7922e);
  border-radius: 4px;
  background: rgba(183, 146, 46, 0.18);
  color: #f3dfa6;
  font-size: var(--fs-chrome-org, 17px);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  cursor: help;
}

/* แถบตัวกรอง → shared/dash-filters.css (โหลดหลังไฟล์นี้) */

/* ── Responsive: tablet / mobile (iframe + standalone .dash-page) ── */
/* เปิด/ปิด sidebar เปลี่ยนแค่ความกว้าง — คง grid 8+4 / 4+5+3 จนกว่าจอเนื้อหาแคบจริง (~1024) */
@media (max-width: 1280px) {
  body[data-dash] {
    --fs-base: 22px;
    --fs-h2: 19px;
    --fs-cap: 14px;
    --fs-trend-legend: 13px;
    --fs-kpi: 34px;
    --fs-kpi-name: 16px;
    --fs-kpi-unit: 15px;
    --fs-ui: 15px;
    --fs-ui-md: 14px;
    --fs-table: 15px;
    --fs-chrome-h1: 22px;
    --fs-chrome-sub: 16px;
    --fs-chrome-meta: 15px;
    --dash-chart-h: 260px;
    --dash-chart-h-lg: 300px;
    --dash-map-h: 420px;
  }

  body[data-dash="9"] {
    --dash-map-h: 360px;
  }
}

/* d1 — KPI 4 คอลัมน์แบบ mockup (ไม่หดเป็น 2 คอลัมน์แค่เพราะมี sidebar) */
body[data-dash="1"] .kpis,
body[data-dash="1"] main > .kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  body[data-dash] main [class*="span"],
  body[data-dash] main .trend,
  body[data-dash] main .treemapCard,
  body[data-dash] main .cagrCard,
  body[data-dash] main .countryCard,
  body[data-dash] main .healthCard,
  .dash-page [class*="span"],
  .dash-page .trend,
  .dash-page .treemapCard,
  .dash-page .cagrCard,
  .dash-page .countryCard,
  .dash-page .healthCard {
    grid-column: span 12 !important;
  }

  body[data-dash] main,
  .dash-page main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 12px;
    min-width: 0;
    overflow-x: hidden;
  }

  body[data-dash="1"] .kpis,
  body[data-dash="1"] main > .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-dash] {
    --dash-sidebar-w: 260px;
    --dash-chart-h-lg: 280px;
    --dash-map-h: 380px;
  }

  body[data-dash="9"] {
    --dash-map-h: 320px;
  }

  body[data-dash] header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px 9px !important;
  }

  body[data-dash] header .brand {
    width: 100%;
    min-width: 0;
  }

  body[data-dash] header h1 {
    font-size: var(--fs-chrome-h1) !important;
    line-height: 1.22;
  }

  body[data-dash] header .sub {
    font-size: var(--fs-chrome-sub) !important;
    line-height: 1.35;
  }

  body[data-dash] header .right {
    text-align: left;
    width: 100%;
  }

  body[data-dash] header .brandLogo {
    width: 40px !important;
    height: 40px !important;
  }

  body[data-dash] main,
  .dash-page main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body[data-dash] .card,
  .dash-page .card {
    padding: 12px 13px 11px !important;
  }

  body[data-dash] .rss-table-wrap,
  body[data-dash] .table-scroll,
  body[data-dash] .table-scroll--hs,
  .dash-page .table-scroll,
  .dash-page .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  body[data-dash] {
    --fs-base: 20px;
    --fs-h2: 17px;
    --fs-cap: 13px;
    --fs-trend-legend: 12px;
    --fs-kpi: 30px;
    --fs-kpi-name: 15px;
    --fs-kpi-unit: 14px;
    --fs-chrome-h1: 19px;
    --fs-chrome-sub: 14px;
    --fs-chrome-meta: 13px;
    --fs-chrome-org: 12px;
    --dash-chart-h: 240px;
    --dash-chart-h-sm: 200px;
    --dash-chart-h-lg: 260px;
    --dash-map-h: 320px;
    --dash-filter-fs: 14px;
    --dash-filter-chip-fs: 13px;
  }

  body[data-dash] .kpis,
  .dash-page .kpis {
    grid-template-columns: 1fr !important;
  }

  body[data-dash] header h1 {
    font-size: 19px !important;
  }

  body[data-dash] .card > h2 {
    flex-wrap: wrap;
    gap: 6px;
  }

  body[data-dash] .filters {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body[data-dash] .static-filters {
    gap: 6px 8px !important;
  }

  body[data-dash] .static-filters span {
    padding-left: 8px !important;
  }

  body[data-dash] #trendChart svg {
    max-height: 240px;
  }
}

@media (max-width: 480px) {
  body[data-dash] {
    --fs-kpi: 28px;
    --dash-chart-h: 220px;
    --dash-chart-h-lg: 240px;
  }

  body[data-dash] .filters .lbl {
    display: none !important;
  }

  body[data-dash] #chips,
  body[data-dash] #regionChips {
    justify-content: flex-start !important;
    width: 100%;
  }
}

/* เปลี่ยนหน้า — fade
   ตอนพักต้องเป็น transform: none — ถ้ามี transform ค้าง position:fixed ข้างใน (tooltip #tip) จะอิงกรอบนี้แทนหน้าจอ
   isolation รักษา stacking context เดิมที่ transform เคยสร้างไว้ */
.dash-page {
  opacity: 1;
  transform: none;
  isolation: isolate;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.dash-page.dash-page-enter {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

/* ระยะเวลาต้องตรงกับ EXIT_MS ใน dash-sidebar.js */
.dash-page.dash-page-exiting {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition-duration: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .dash-page,
  .dash-page.dash-page-exiting,
  .dash-page.dash-page-enter {
    transition: none;
    transform: none;
  }
}