/* =====================================================================
 * watch-bridge.css
 * ส่วนเชื่อมธีม watch (css/watch/public-theme-v2.css + staff-v2.css) กับหน้าเดิมของ monitor
 * ที่เขียนด้วย Bootstrap — ปรับสี/มุม/ฟอนต์ของ component Bootstrap ให้เข้ากับธีม pv2
 * โหลดหลัง Bootstrap 5 และธีม watch เสมอ (layouts/main.php)
 * ===================================================================== */

/* ---------- เนื้อหาหลัก ---------- */
.pv2 .pv2-main { padding-top: 22px; }
.pv2 .pv2-main h1,
.pv2 .pv2-main h2,
.pv2 .pv2-main h3 { font-family: 'Taviraj', serif; font-weight: 600; color: var(--green-deep); }
/* :where() ให้ specificity ต่ำ — กฎเฉพาะของแต่ละหน้า override ได้ */
.pv2 .pv2-main a:where(:not(.btn):not(.dropdown-item):not(.page-link):not(.pv2-btn)) { color: var(--green-deep); }
.pv2 .pv2-main img { max-width: 100%; height: auto; }

/* ---------- เมนู dropdown บน header ---------- */
.pv2-navlinks a.active,
.pv2-navlinks .dropdown-toggle.active { color: var(--green-deep); font-weight: 600; }
.pv2-dd { position: relative; }
.pv2-dd > .dropdown-toggle { text-decoration: none; white-space: nowrap; }
.pv2-dd > .dropdown-toggle::after { vertical-align: .2em; border-top-color: currentColor; }
.pv2-dd .dropdown-menu {
    --bs-dropdown-font-size: 13.5px;
    margin-top: 10px;
    min-width: 300px;
    padding: 6px 0;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--green-deep);
    border-radius: 0;
    background: var(--card);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    font-family: 'Sarabun', sans-serif;
}
.pv2-dd .dropdown-item { padding: 7px 16px; color: var(--ink); white-space: normal; }
.pv2-dd .dropdown-item:hover,
.pv2-dd .dropdown-item:focus { background: var(--band); color: var(--green-deep); }
.pv2-dd .dropdown-item.active,
.pv2-dd .dropdown-item:active { background: var(--green-tint); color: var(--green-deep); font-weight: 600; }
@media (max-width: 860px) {
    .pv2-navlinks .pv2-dd > .dropdown-toggle { display: block; padding: 10px 4px; border-top: 1px solid var(--rule-soft); }
    .pv2-navlinks .pv2-dd .dropdown-menu { position: static; margin: 0 0 8px; min-width: 0; box-shadow: none; }
    .pv2-navlinks .pv2-dd .dropdown-item { border-top: 0; padding: 8px 16px; }
    .pv2-navlinks .pv2-nav-cta { text-align: center; margin-top: 8px; }
}

/* ---------- ปุ่ม Bootstrap → โทนเขียว/ทองของ watch ---------- */
.pv2 .btn { border-radius: 0; font-family: 'Sarabun', sans-serif; }
/* public-theme-v2.css มี .pv2 a{color:inherit} ซึ่งชนะสีตัวอักษรของ .btn — คืนค่าสีของ Bootstrap */
.pv2 a.btn { color: var(--bs-btn-color); }
.pv2 a.btn:hover { color: var(--bs-btn-hover-color); }
.pv2 a.btn:active,
.pv2 a.btn.active { color: var(--bs-btn-active-color); }
.pv2 .btn-primary {
    --bs-btn-bg: var(--green-deep); --bs-btn-border-color: var(--green-deep);
    --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green);
    --bs-btn-active-bg: var(--green); --bs-btn-active-border-color: var(--green);
}
.pv2 .btn-outline-primary {
    --bs-btn-color: var(--green-deep); --bs-btn-border-color: var(--green);
    --bs-btn-hover-bg: var(--green-deep); --bs-btn-hover-border-color: var(--green-deep);
    --bs-btn-active-bg: var(--green-deep); --bs-btn-active-border-color: var(--green-deep);
}

/* ---------- card / table / alert / pagination ---------- */
.pv2 .card { border: 1px solid var(--rule); border-radius: 0; background: var(--card); }
.pv2 .card-header { background: var(--band); border-bottom: 1px solid var(--rule); border-radius: 0; }
.pv2 .table { --bs-table-bg: var(--card); --bs-table-hover-bg: var(--band); border-color: var(--rule-soft); }
.pv2 .table > thead th { background: var(--band); color: var(--ink-soft); }
.pv2 .alert { border-radius: 0; }
.pv2 .page-link { border-radius: 0 !important; color: var(--green-deep); }
.pv2 .page-item.active .page-link { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.pv2 .badge { border-radius: 0; }

/* ปุ่ม/ฟอร์ม Bootstrap ภายในกลุ่ม input ไม่ต้องเต็มบรรทัด (กฎ input ของ staff-v2.css ตั้ง display:block; width:100%) */
.pv2 .input-group > .form-control,
.pv2 .input-group > .form-select { display: block; width: 1%; flex: 1 1 auto; }
.pv2 .form-check-input { display: inline-block; width: 1em; }
.pv2 .form-check label,
.pv2 .form-check-label { display: inline; }

/* ---------- รายละเอียดเล็กๆ ให้ดูเรียบร้อย ---------- */
nav.pv2-topnav { box-shadow: 0 1px 0 var(--rule-soft), 0 6px 18px rgba(18, 59, 39, .05); }
.pv2-dd > .dropdown-toggle:focus:not(:focus-visible) { outline: none; }
.pv2 :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 860px) {
    .pv2-navlinks .pv2-dd .dropdown-menu { width: 100%; }
}
.pv2 hr { border-color: var(--rule); opacity: 1; }

/* =====================================================================
 * หน้าแรก (views/site/index.php)
 * ===================================================================== */
.mon-hero { padding: 26px 0 0; }
.mon-hero .pv2-hero-title { max-width: 820px; margin-top: 8px; }
.mon-hero .pv2-hero-sub { max-width: 720px; }
.mon-hero .pv2-btn { white-space: normal; text-align: left; }

/* ลิงก์ด่วน 3 ช่อง (ใช้ .pv2-stat-strip ของ watch แต่ไม่ต้องมี padding ด้านข้าง เพราะอยู่ใน .pv2-wrap แล้ว) */
.pv2-stat-strip.mon-quick { padding: 0; margin: 34px 0 0; max-width: none; }
.mon-quick .pv2-stat-cell { padding: 20px 24px; transition: background-color .15s; }
.mon-quick .pv2-stat-cell:hover { background: var(--band); }
.mon-quick .pv2-stat-cell .s-num { font-size: 30px; line-height: 1.2; }
.mon-quick .pv2-stat-cell .s-label { font-size: 13.5px; }
.pv2 .pv2-main .mon-quick a.pv2-stat-cell { color: inherit; }
@media (max-width: 820px) {
    .pv2-stat-strip.mon-quick { grid-template-columns: 1fr; }
}
.pv2 .pv2-main h2.pv2-section-head { font-size: 22px; }
.pv2-section:first-of-type { margin-top: 44px; }

/* แกลเลอรีภาพ timeline */
.mon-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mon-figure { display: block; width: 100%; font: inherit; text-align: inherit; background: var(--card); border: 1px solid var(--rule); padding: 8px; transition: border-color .15s, box-shadow .15s; }
.mon-figure:hover { border-color: var(--green); box-shadow: 0 8px 22px rgba(18, 59, 39, .10); }
.mon-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .mon-gallery { grid-template-columns: 1fr; } }

/* คณะกรรมการชุดที่ 1-6 (markup .panel/.breadcrumb จาก index_nego.php — จัดรูปด้วย CSS อย่างเดียว) */
.mon-committees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mon-committees > :not(.panel) { grid-column: 1 / -1; }
.mon-committees > .panel { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--green-deep); padding: 16px 20px 18px; }
.mon-committees > .panel:nth-of-type(even) { border-top-color: var(--gold); }
.mon-committees .panel-heading { margin-bottom: 10px; }
.pv2 .pv2-main .mon-committees h3.panel-title { margin: 0; font-size: 17px; text-align: left; }
.mon-committees .glyphicon { display: none; }
.mon-committees .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; background: none; border-radius: 0; }
.mon-committees .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.mon-committees .breadcrumb-item + .breadcrumb-item::before { content: none; }
.pv2 .pv2-main .mon-committees .breadcrumb-item a { display: inline-block; font-size: 12.5px; line-height: 1.5; padding: 3px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.pv2 .pv2-main .mon-committees .breadcrumb-item a:hover { background: var(--green-tint); border-color: var(--green); color: var(--green-deep); }
.mon-committees > img { display: block; width: 100%; height: auto; margin-top: 8px; border: 1px solid var(--rule); background: var(--card); padding: 8px; }
@media (max-width: 860px) { .mon-committees { grid-template-columns: 1fr; } }

/* ปุ่ม <button class="btn"> ให้ใช้สีตัวอักษรของ Bootstrap เหมือน a.btn / ปุ่มสีเขียวและ checkbox ใช้โทนธีม */
.pv2 button.btn { color: var(--bs-btn-color); }
.pv2 button.btn:hover { color: var(--bs-btn-hover-color); }
.pv2 .btn-success {
    --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--green-deep); --bs-btn-hover-border-color: var(--green-deep); --bs-btn-hover-color: #fff;
}
.pv2 .form-check-input:checked { background-color: var(--green); border-color: var(--green); }

/* =====================================================================
 * ฟอนต์ชุดเดียวกันทั้งแอป (ตามหน้า site/index)
 *   เนื้อหา/ฟอร์ม/ตาราง/ปุ่ม = Sarabun · หัวข้อ = Taviraj · ตัวเลขเด่น = IBM Plex Mono
 * ===================================================================== */
:root {
    --app-font: 'Sarabun', 'Noto Sans Thai', Tahoma, sans-serif;
    --app-font-head: 'Taviraj', 'Sarabun', serif;
    --app-font-num: 'IBM Plex Mono', ui-monospace, monospace;
    --bs-font-sans-serif: var(--app-font);
    --bs-body-font-family: var(--app-font);
}
.pv2,
.pv2 :where(button, input, select, textarea, optgroup, table, th, td, label, p, li, small,
            .btn, .form-control, .form-select, .input-group-text, .dropdown-menu, .dropdown-item,
            .nav, .nav-link, .navbar, .breadcrumb, .badge, .alert, .card, .modal, .tooltip, .popover,
            .table, .grid-view, .kv-grid-container, .panel, .panel-title, .pagination, .page-link,
            .lead, .select2-container, .select2-results, .ui-widget) {
    font-family: var(--app-font);
}
/* หัวข้อทุกระดับ (รวม class .h1-.h4 และ .display-*) ใช้ Taviraj เหมือนหน้าแรก */
.pv2 :where(h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
    font-family: var(--app-font-head);
    font-weight: 600;
}
.pv2 :where(h5, h6, .h5, .h6) { font-family: var(--app-font); font-weight: 600; }
/* code/ตัวเลขแบบ monospace */
.pv2 :where(code, kbd, pre, samp) { font-family: var(--app-font-num); }
/* Highcharts กำหนดฟอนต์เป็น inline style บน SVG — ต้องใช้ !important จึงจะชนะ */
.pv2 .highcharts-root,
.pv2 .highcharts-root text,
.pv2 .highcharts-tooltip span,
.pv2 .highcharts-data-label span { font-family: var(--app-font) !important; }

/* ---------- กระดิ่งแจ้งเตือน (views/layouts/_bell.php — สไตล์หลักอยู่ใน watch/public-theme-v2.css) ---------- */
/* ดันกระดิ่ง + เมนูไปชิดขวา โลโก้อยู่ซ้าย เหมือน watch */
nav.pv2-topnav .pv2-bellbtn { margin-left: auto; }
nav.pv2-topnav > .pv2-navlinks { margin-left: 4px; }
@media (max-width: 860px) {
    nav.pv2-topnav .pv2-bellbtn { margin-left: auto; margin-right: 4px; }
}

/* =====================================================================
 * โครงหน้ารายละเอียดที่ใช้ร่วมกัน (.pg) — index99, vwdkrs2569, indexbyid, indexranking, projectview
 * ===================================================================== */
.pg-hero { padding: 4px 0 0; }
.pg-hero .pv2-hero-title { max-width: 900px; margin-top: 8px; }
.pg-hero .pv2-hero-sub { max-width: 820px; }
.pg-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; border-bottom: 1px solid var(--rule); }
.pv2 .pv2-main .pg-tabs a { padding: 9px 14px; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pv2 .pv2-main .pg-tabs a:hover { color: var(--green-deep); background: var(--band); }
.pv2 .pv2-main .pg-tabs a.is-active { color: var(--green-deep); font-weight: 600; border-bottom-color: var(--gold); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pv2 .pg-actions .pv2-btn.ghost { background: var(--card); }
.pv2-stat-strip.pg-stats { padding: 0; margin: 26px 0 0; max-width: none; }
.pg-stats .s-num { font-size: 26px; overflow-wrap: anywhere; }
.pg .pv2-section { margin: 40px 0; }
@media (max-width: 820px) { .pv2-stat-strip.pg-stats { grid-template-columns: repeat(2, 1fr); } }

/* ตารางสรุปการตรวจสอบของ สยป. (views/site/_sed/_summary.php) */
.sed-sum-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--green-deep); }
.sed-sum-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; }
.sed-sum-table th, .sed-sum-table td { padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); }
.sed-sum-table thead th { background: var(--band); font-size: 12px; font-weight: 600; color: var(--ink-soft); text-align: left; }
.sed-sum-table .c { text-align: center; }
.sed-sum-table tbody th { font-weight: 600; text-align: left; }
.sed-code { display: inline-block; min-width: 72px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--gold-deep); }
.pv2 .pv2-main a.sed-n { display: inline-block; min-width: 48px; padding: 4px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.pv2 .pv2-main a.sed-n.t-ok { color: #14532d; background: #E4F0E8; }
.pv2 .pv2-main a.sed-n.t-bad { color: #8a1f14; background: #F8E1DD; }
.pv2 .pv2-main a.sed-n.t-warn { color: #6b4e00; background: #FBF0D0; }
.pv2 .pv2-main a.sed-n.t-muted { color: var(--ink); background: var(--paper); }
.pv2 .pv2-main a.sed-n.is-zero { color: var(--ink-faint); background: none; font-weight: 400; }
.pv2 .pv2-main a.sed-n:hover { border-color: currentColor; }
.sed-total { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--ink-soft); }
.pv2 .pv2-main a.sed-nostep { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--ink-soft); text-decoration: none; }
.pv2 .pv2-main a.sed-nostep.has { color: var(--red); }
.pv2 .pv2-main a.sed-nostep b { font-family: 'IBM Plex Mono', monospace; }
.pg-hero-row { display: flex; align-items: center; gap: 16px; }
.pg-hero-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; flex: none; }

/* สรุปรายกลุ่มเขต (views/site/_kr/_compare.php) */
.kr-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kr-zone { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--green); }
.kr-zone:nth-child(even) { border-top-color: var(--gold); }
.kr-zone-name { font-family: 'Taviraj', serif; font-weight: 600; color: var(--green-deep); }
.kr-zone-pct { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; }
.kr-zone-meta { font-size: 12px; color: var(--ink-soft); }

/* ---------- modal กลาง (ใช้ใน kr2569 และ projectview) ---------- */
.kr-modal { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 24, 16, .55); animation: gl-fade .15s ease-out; }
.kr-modal[hidden] { display: none; }
.kr-modal-card { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card); border-top: 4px solid var(--green-deep); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.kr-modal-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--band); border-bottom: 1px solid var(--rule); }
.kr-modal-code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--gold-deep); }
.pv2 .kr-modal-title { margin: 4px 0 0; font-size: 19px; line-height: 1.45; color: var(--green-deep); }
.kr-modal-close { flex: none; width: 36px; height: 36px; background: var(--card); border: 1px solid var(--rule); color: var(--ink-soft); font-size: 15px; cursor: pointer; }
.kr-modal-close:hover { background: var(--green-deep); color: #fff; }
.kr-modal-body { padding: 18px 22px 22px; }
.kr-info { display: grid; grid-template-columns: 170px 1fr; margin: 0; border: 1px solid var(--rule); }
.kr-info dt { padding: 9px 14px; background: var(--band); color: var(--ink-soft); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--rule); }
.kr-info dd { margin: 0; padding: 9px 14px; font-size: 13.5px; border-bottom: 1px solid var(--rule-soft); white-space: pre-line; }
.kr-info dt:last-of-type, .kr-info dd:last-of-type { border-bottom: 0; }
.kr-target { font-family: 'IBM Plex Mono', monospace; color: var(--green-deep); }
.pv2 .pv2-main a.pg-clear { font-family: 'Sarabun', sans-serif; font-size: 13px; font-weight: 400; color: var(--red); border: 1px solid var(--rule); padding: 1px 8px; text-decoration: none; vertical-align: middle; }
.pv2 .pv2-main a.pg-clear:hover { background: var(--red-tint); }

/* ---------- ค้นหา (views/layouts/_searchbox.php + search/index) ---------- */
nav.pv2-topnav .pv2-searchbtn { margin-left: auto; }
nav.pv2-topnav .pv2-searchbtn ~ .pv2-bellbtn { margin-left: 8px; }
@media (max-width: 860px) { nav.pv2-topnav .pv2-searchbtn ~ .pv2-bellbtn { margin-right: 4px; } }
.sr-form { display: flex; gap: 0; max-width: 760px; margin: 6px 0 4px; border: 1px solid var(--rule); background: var(--card); }
.pv2 .sr-form input[type=search] { flex: 1; width: auto; border: 0; padding: 12px 16px; font-size: 15px; }
.pv2 .sr-form .pv2-btn { border-radius: 0; padding: 0 24px; }
.pv2 .pv2-main h2.sr-head { font-size: 18px; margin: 26px 0 10px; }
.sr-more { margin-top: 10px; }

/* สรุปงบประมาณรายกลุ่ม (views/site/_sum/_summary.php) */
.sum-groups { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--card); border: 1px solid var(--rule); padding: 8px 0; }
.sum-groups.is-long { max-height: 560px; overflow-y: auto; }
.sum-group { display: grid; grid-template-columns: minmax(180px, 280px) 1fr 190px; grid-template-rows: auto auto; column-gap: 16px; padding: 8px 18px; }
.sum-group:hover { background: var(--paper); }
.sum-group-name { grid-row: 1 / span 2; align-self: center; font-weight: 600; font-size: 13.5px; }
.pv2 .pv2-main .sum-group-name a { color: var(--green-deep); text-decoration: none; }
.pv2 .pv2-main .sum-group-name a:hover { text-decoration: underline; }
.sum-group-bar { align-self: center; height: 14px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.sum-group-bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.sum-group-num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.sum-group-num small { color: var(--ink-faint); }
.sum-group-meta { grid-column: 2 / span 2; font-size: 11.5px; color: var(--ink-soft); }
@media (max-width: 760px) {
    .sum-group { grid-template-columns: 1fr auto; }
    .sum-group-name { grid-row: auto; grid-column: 1 / -1; }
    .sum-group-meta { grid-column: 1 / -1; }
}