/* ============================================================
   bmaxsdg-ui.css — มาตรฐาน GUI เดียวกันทั้งเว็บ Bangkok SDG (โหลดท้ายสุดทุกหน้า: assets/UiAsset, ลงทะเบียนใน layouts/main)
   ฟอนต์ · สี · มุมโค้ง · การ์ด · รายการ · ตาราง · ฟอร์ม/ตัวกรอง · ปุ่มสลับมุมมอง · หัวเรื่องหน้า
   ขอบเขตเนื้อหาแต่ละหน้า: .sdp/#page-p3 (หน้าแรก), .bxs (SDG Profile / แผน 9 ดี / มุมมองเดิม), .vlr (VLR #69), .pt (ระบบขับเคลื่อนแผน)
   ============================================================ */

/* ---------- 1) โทเคนกลาง ---------- */
.pv2 {
  --ui-sans: 'Sarabun', sans-serif;
  --ui-serif: 'Taviraj', serif;
  --ui-mono: 'IBM Plex Mono', monospace;
  --ui-fs: 15px;                 /* ขนาดตัวอักษรเนื้อหา */
  --ui-fs-sm: 13px;
  --ui-r: 6px;                   /* มุมการ์ด/กล่อง */
  --ui-r-sm: 4px;                /* มุมช่องกรอก/ปุ่ม */
  --ui-border: var(--rule, #CFDACB);
  --ui-border-soft: var(--rule-soft, #E3EAE0);
  --ui-surface: var(--card, #fff);
  --ui-head: #F1F5EE;            /* หัวตาราง / แถบหัวการ์ด */
  --ui-hover: #F5F8F2;
  --ui-accent: var(--bma-green, #00703C);
  --ui-accent-deep: var(--green-deep, #123B27);
  --ui-accent-tint: var(--green-tint, #E4F0E8);
  --ui-focus: 0 0 0 3px rgba(0, 112, 60, .16);
  --ui-shadow: 0 1px 2px rgba(23, 37, 28, .05);
  --ui-shadow-h: 0 6px 18px rgba(23, 37, 28, .10);
  --ui-ctl-h: 38px;
}

/* ---------- 2) ตัวแปรของแต่ละหน้า → โทเคนกลาง ---------- */
.pv2 .bxs, .pv2 #page-p3 {
  --white: var(--ui-surface); --off-white: var(--paper, #FAF9F4); --light-gray: var(--ui-head); --border: var(--ui-border);
  --text-dark: var(--ink, #17251C); --text-mid: var(--ink-soft, #4B5B4F); --text-soft: var(--ink-faint, #8A9389);
  --accent-blue: var(--ui-accent); --accent-blue-light: var(--ui-accent-tint);
  --shadow-sm: var(--ui-shadow); --shadow-md: var(--ui-shadow-h); --shadow-lg: 0 12px 30px rgba(23, 37, 28, .14);
  --radius: var(--ui-r); --radius-sm: var(--ui-r-sm);
}
.pv2 .vlr {
  --paper: var(--ui-surface); --paper2: var(--ui-head); --ink: var(--ink, #17251C); --ink-soft: var(--ink-soft, #4B5B4F);
  --line: var(--ui-border); --blue: var(--ui-accent-deep); --blue-soft: var(--ui-accent-tint);
}
.pv2 .pt { --r: var(--ui-r); --accent: var(--ui-accent-deep); }

/* ---------- 3) ฟอนต์ ---------- */
.pv2 .bxs, .pv2 .vlr, .pv2 .pt, .pv2 .sdp { font-family: var(--ui-sans); font-size: var(--ui-fs); line-height: 1.6; color: var(--ink, #17251C); background: transparent; }
.pv2 .bxs.bx-embed { font-size: 14px; }       /* หน้าข้อมูลหนาแน่น 5–6 คอลัมน์ */
.pv2 :is(.bxs, .vlr, .pt, .sdp) :is(input, select, textarea, button) { font-family: var(--ui-sans); }
.pv2 :is(.bxs, .vlr, .pt, .sdp, #page-p3) :is(.mono, .stat-value, .sdg-num, .ind-code, .ind-value) { font-family: var(--ui-mono); }

/* ---------- 4) หัวเรื่องหน้า (eyebrow · ชื่อหน้า · คำอธิบาย) ---------- */
.pv2 .ui-eyebrow, .pv2 .vlr header.top .eyebrow, .pv2 .pv2-eyebrow {
  font: 600 12px/1.4 var(--ui-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft, #4B5B4F);
}
.pv2 .ui-title, .pv2 .bxs .hero-title, .pv2 .vlr header.top h1, .pv2 h1.pv2-title {
  font: 600 30px/1.3 var(--ui-serif); color: var(--ui-accent-deep); margin: 6px 0 6px; letter-spacing: 0;
}
.pv2 .ui-lead, .pv2 .bxs .hero-sub, .pv2 .vlr header.top .sub, .pv2 .pv2-lede { font-size: 15px; line-height: 1.7; color: var(--ink-soft, #4B5B4F); max-width: 860px; }
.pv2 .vlr header.top { background: transparent; border: 0; padding: 0 0 18px; margin: 0 0 6px; border-bottom: 1px solid var(--ui-border); }
.pv2 .vlr main { padding-left: 0; padding-right: 0; max-width: none; }
.pv2 .vlr footer { border-top: 1px solid var(--ui-border); color: var(--ink-faint, #8A9389); font-size: 12.5px; padding: 18px 0 0; text-align: left; }

/* หัวข้อส่วน */
.pv2 .ui-section, .pv2 .bxs .section-title, .pv2 .vlr .section-label, .pv2 #page-p3 .section-title {
  font: 700 14px/1.5 var(--ui-sans); color: var(--ui-accent-deep); letter-spacing: .01em; text-transform: none;
  margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--ui-border);
}
.pv2 .vlr .section-label::after { display: none; }

/* หน้าแรก: แถบหัวสีเขียว กทม. (เดิมสีน้ำเงิน) */
.pv2 .sdp-hero { border-radius: var(--ui-r);
  background: radial-gradient(circle at 85% 15%, rgba(242, 194, 48, .22), transparent 45%), linear-gradient(135deg, #005A30 0%, #00703C 55%, #1F6D45 100%);
  box-shadow: 0 10px 28px rgba(0, 90, 48, .18); }
.pv2 .sdp-hero h1 { font-family: var(--ui-serif); font-weight: 600; }
.pv2 .sdp-btn { border-radius: var(--ui-r-sm); color: var(--ui-accent-deep) !important; }
.pv2 .sdp-btn:hover { background: var(--ui-accent-tint); }
.pv2 .sdp-btn.ghost { color: #fff !important; }
.pv2 .sdp-btn.ghost:hover { background: rgba(255, 255, 255, .12); }
.pv2 .sdp-m, .pv2 .sdp-links a { border-radius: var(--ui-r); border-color: var(--ui-border); }
.pv2 .sdp-mn { background: var(--ui-accent); }

/* ---------- 5) การ์ด ---------- */
.pv2 .ui-card,
.pv2 .bxs :is(.stat-card, .sdg-card, .survey-card, .sidebar-card, .detail-panel, .issue-card, .chart-card, .card),
.pv2 .vlr :is(.stat-chip, .proj-card, .vp-card),
.pv2 .pt :is(.card, .sc, .dh, .pi-item),
.pv2 #page-p3 :is(.sxo-bars, .sxo-dh, .sxo-strat) {
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r); box-shadow: var(--ui-shadow);
}
.pv2 .bxs :is(.stat-card, .sdg-card, .issue-card):hover,
.pv2 .vlr :is(.proj-card, .vp-card):hover,
.pv2 .pt :is(.sc, .pi-item):hover { box-shadow: var(--ui-shadow-h); border-color: var(--b2, #B7C8B2); transform: translateY(-1px); }
.pv2 .bxs .stat-card.active, .pv2 .bxs .sdg-card.active { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-tint); }
.pv2 .pt .sc { box-shadow: var(--ui-shadow); }
/* KPI: ตัวเลข mono */
.pv2 .bxs .stat-value, .pv2 .vlr .stat-chip b, .pv2 .pt .kv, .pv2 #page-p3 .stat-value { font-family: var(--ui-mono); font-weight: 600; }

/* ---------- 6) รายการ (list rows) ---------- */
.pv2 .ui-row,
.pv2 .vlr .proj-card,
.pv2 .pt .okr,
.pv2 #page-p3 .sxo-okr { border-radius: var(--ui-r); border: 1px solid var(--ui-border); }
.pv2 .vlr .proj-card { border-left-width: 4px; padding: 12px 16px; margin-bottom: 8px; gap: 14px; }
.pv2 .vlr .proj-card .pname { font-weight: 600; font-size: 15px; color: var(--ink, #17251C); }
.pv2 .vlr .proj-card .pmeta { font-size: 12.5px; color: var(--ink-soft, #4B5B4F); }
.pv2 .vlr .proj-goalbadge { border-radius: var(--ui-r-sm); font-family: var(--ui-mono); }
.pv2 :is(.pt .okr, #page-p3 .sxo-okr):hover { border-color: var(--ui-accent); background: var(--ui-hover); }

/* ---------- 7) ตาราง ---------- */
.pv2 .ui-table-wrap, .pv2 .pt .proj-scroll, .pv2 #page-p3 .sxo-table {
  border: 1px solid var(--ui-border); border-radius: var(--ui-r); background: var(--ui-surface); overflow: auto;
}
.pv2 table.ui-table, .pv2 .pt .tbl, .pv2 #page-p3 .sxo-table table, .pv2 table.pv2-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px; font-family: var(--ui-sans);
}
.pv2 table.ui-table th, .pv2 .pt .tbl th, .pv2 #page-p3 .sxo-table th, .pv2 table.pv2-table th {
  background: var(--ui-head); color: var(--ui-accent-deep); font: 700 12.5px/1.4 var(--ui-sans); letter-spacing: .01em; text-transform: none;
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ui-border); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.pv2 table.ui-table td, .pv2 .pt .tbl td, .pv2 #page-p3 .sxo-table td, .pv2 table.pv2-table td {
  padding: 9px 12px; border-top: 0; border-bottom: 1px solid var(--ui-border-soft); vertical-align: top;
}
.pv2 table.ui-table tbody tr:hover td, .pv2 .pt .tbl tr:hover td, .pv2 #page-p3 .sxo-table tr:hover td, .pv2 table.pv2-table tbody tr:hover td { background: var(--ui-hover); }
.pv2 table.ui-table tbody tr:last-child td, .pv2 .pt .tbl tr:last-child td { border-bottom: 0; }
.pv2 table.ui-table td.num, .pv2 table.ui-table th.num { text-align: right; font-family: var(--ui-mono); white-space: nowrap; }
.pv2 table.ui-table tr.clickable { cursor: pointer; }
.pv2 .pt .tbl.sm, .pv2 .pt .tbl.sm th { font-size: 12.5px; }

/* ---------- 8) ฟอร์ม / แถบตัวกรอง ---------- */
/* :not(#_) = เพิ่มน้ำหนัก selector ให้ชนะสไตล์เฉพาะหน้า (staff-v2 / plantrack / vlr69 / sdg-drive) โดยไม่ต้องใช้ !important */
.pv2:not(#_) :is(.bxs, .vlr, .pt, .sdp, .ui-form) :is(input[type=text], input[type=search], input[type=number], input[type=email], input[type=date], input:not([type]), select, textarea) {
  height: var(--ui-ctl-h); padding: 0 12px; font: 400 14px/1.4 var(--ui-sans); color: var(--ink, #17251C);
  background-color: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); box-shadow: none;
  transition: border-color .15s, box-shadow .15s; outline: none; margin: 0;
}
.pv2:not(#_) :is(.bxs, .vlr, .pt, .sdp, .ui-form) textarea { height: auto; min-height: 90px; padding: 9px 12px; }
.pv2:not(#_) :is(.bxs, .vlr, .pt, .sdp, .ui-form) select { padding-right: 30px; cursor: pointer; }
.pv2:not(#_) :is(.bxs, .vlr, .pt, .sdp, .ui-form) :is(input, select, textarea):focus { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.pv2:not(#_) :is(.bxs, .vlr, .pt, .sdp, .ui-form) :is(input, textarea)::placeholder { color: var(--ink-faint, #8A9389); }

/* แถบตัวกรอง: ช่องค้นหายืดเต็ม, ตัวเลือกกว้างพอดี, ปุ่มต่อท้าย — แถวเดียวบนจอกว้าง */
.pv2:not(#_) :is(.ui-toolbar, .vlr .controls, #page-p3 .sxo-tools) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pv2:not(#_) :is(.ui-toolbar, .vlr .controls, #page-p3 .sxo-tools) :is(input[type=text], input[type=search]) { flex: 1 1 260px; width: auto; min-width: 0; }
.pv2:not(#_) :is(.ui-toolbar, .vlr .controls, #page-p3 .sxo-tools) select { flex: 0 1 260px; width: auto; min-width: 0; }
.pv2 .vlr .controls { background: #FAF9F4; padding: 12px 0; margin-bottom: 4px; }   /* สีพื้นหน้า (ธีม pv2) — แถบติดบนเมื่อเลื่อน */
.pv2 .vlr .controls.stuck { box-shadow: 0 6px 10px -8px rgba(23, 37, 28, .25); }

/* ปุ่ม: หลัก / รอง / ชิปตัวกรอง */
.pv2 .ui-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--ui-ctl-h); padding: 0 16px; border-radius: var(--ui-r-sm);
  border: 1px solid var(--ui-accent); background: var(--ui-accent); color: #fff; font: 600 14px var(--ui-sans); cursor: pointer; text-decoration: none; }
.pv2 .ui-btn:hover { background: var(--bma-green-dark, #005A30); color: #fff; }
.pv2 .ui-btn.ghost { background: var(--ui-surface); color: var(--ui-accent-deep); border-color: var(--ui-border); }
.pv2 .ui-btn.ghost:hover { border-color: var(--ui-accent); background: var(--ui-hover); }
.pv2:not(#_) :is(.ui-chip, .vlr .pill-btn, .pt .fpill, #page-p3 .sxo-btn) {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ink-soft, #4B5B4F);
  font: 600 13px/1 var(--ui-sans); letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.pv2:not(#_) :is(.ui-chip, .vlr .pill-btn, .pt .fpill, #page-p3 .sxo-btn):hover { border-color: var(--ui-accent); color: var(--ui-accent-deep); }
.pv2:not(#_) :is(.ui-chip.on, .ui-chip[aria-pressed="true"], .vlr .pill-btn.active, .pt .fpill.on, .pt .fpill.active, #page-p3 .sxo-btn.on) {
  background: var(--ui-accent); border-color: var(--ui-accent); color: #fff;
}

/* ---------- 9) ปุ่มสลับมุมมอง การ์ด / รายการ / ตาราง ---------- */
.pv2:not(#_) :is(.ui-vsw, .pt .pt-vsw) { display: inline-flex; border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); background: var(--ui-surface); overflow: hidden; flex-shrink: 0; }
.pv2:not(#_) :is(.ui-vsw, .pt .pt-vsw) button { border: 0; background: none; height: 32px; padding: 0 12px; font: 600 13px var(--ui-sans); color: var(--ink-soft, #4B5B4F); cursor: pointer; letter-spacing: 0; text-transform: none; }
.pv2:not(#_) :is(.ui-vsw, .pt .pt-vsw) button + button { border-left: 1px solid var(--ui-border); }
.pv2:not(#_) :is(.ui-vsw, .pt .pt-vsw) button:hover { background: var(--ui-hover); color: var(--ui-accent-deep); }
.pv2:not(#_) :is(.ui-vsw, .pt .pt-vsw) button[aria-pressed="true"] { background: var(--ui-accent); color: #fff; }
.pv2 .ui-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pv2 .ui-listhead { margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ui-border); }
.pv2 .ui-listhead > .ui-section, .pv2 .vlr .ui-listhead > .section-label { flex: 1; margin: 0; padding: 0; border: 0; }

/* ---------- 10) แท็บในหน้า ---------- */
.pv2 .ui-tabs, .pv2 .pt .nav { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--ui-border); margin: 0 0 18px; }
.pv2 .ui-tabs button, .pv2 .pt .nb { padding: 10px 18px; border: 0; border-bottom: 3px solid transparent; background: none; font: 600 15px var(--ui-sans); color: var(--ink-soft, #4B5B4F); cursor: pointer; margin-bottom: -1px; }
.pv2 .ui-tabs button:hover, .pv2 .pt .nb:hover { color: var(--ui-accent-deep); }
.pv2 .ui-tabs button.active, .pv2 .pt .nb.on { color: var(--ui-accent-deep); border-bottom-color: var(--ui-accent); }

/* ---------- 11) VLR: มุมมองการ์ด / ตาราง ---------- */
.pv2 .vlr .vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pv2 .vlr .vp-card { padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--sdg, #888); transition: box-shadow .15s, transform .15s, border-color .15s; }
.pv2 .vlr .vp-card .pname { font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--ink, #17251C); }
.pv2 .vlr .vp-card .pmeta { font-size: 12.5px; color: var(--ink-soft, #4B5B4F); line-height: 1.5; }
.pv2 .vlr .vp-card .vp-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-faint, #8A9389); }
.pv2 .vlr .vp-badge { display: inline-block; padding: 2px 8px; border-radius: var(--ui-r-sm); color: #fff; font: 600 11.5px var(--ui-mono); white-space: nowrap; align-self: flex-start; }
.pv2 .vlr .ui-table td .pname { font-weight: 600; }

/* ---------- 12) มุมมองเดิม (/dashboard): แท็บในเทมเพลตหลัก ---------- */
.pv2 .bx-dash-tabs { margin-top: 0; }
.pv2 .bx-dash .page-wrap { padding: 0; max-width: none; }

@media (max-width: 640px) {
  .pv2 .ui-title, .pv2 .bxs .hero-title, .pv2 .vlr header.top h1, .pv2 h1.pv2-title { font-size: 24px; }
  .pv2:not(#_) :is(.ui-toolbar, .vlr .controls, #page-p3 .sxo-tools) select { flex: 1 1 100%; }
  .pv2 .ui-tabs button, .pv2 .pt .nb { padding: 8px 12px; font-size: 14px; }
}

/* ---------- 13) SDG Profile ฉบับเต็ม (/sdg-report, .bsg — คัดลอกจาก watch/backend) ---------- */
.pv2 .bsg .card { border-color: var(--ui-border); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); }
.pv2 .bsg .bsg-tabs .nav-link { font-family: var(--ui-sans); font-weight: 600; color: var(--ink-soft, #4B5B4F); }
.pv2 .bsg .bsg-tabs .nav-link:hover { color: var(--ui-accent-deep); }
.pv2 .bsg .bsg-tabs .nav-link.active { color: var(--ui-accent-deep); border-bottom: 3px solid var(--ui-accent); }
.pv2 .bsg .pp-stat-value, .pv2 .bsg .bsg-num { font-family: var(--ui-mono); font-weight: 600; }
.pv2:not(#_) .bsg :is(input[type=text], input[type=search], select) { height: var(--ui-ctl-h); font: 400 14px var(--ui-sans); border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); }
.pv2:not(#_) .bsg :is(input, select):focus { border-color: var(--ui-accent); box-shadow: var(--ui-focus); outline: none; }
.pv2 .bsg .bsg-goal-head, .pv2 .bsg a.bsg-gcard { border-top-color: var(--sdg); }