/*
 * CSS variables (light + dark) กลางของทั้งเว็บ — ยึดตระกูล tv (มี dark mode สมบูรณ์กว่า) เป็นมาตรฐาน
 * ต้นฉบับดึงมาจาก view_pe_valuation.php — ดูรายละเอียดที่มา/เหตุผลที่ lib/site_theme.php
 * แก้ไฟล์นี้ที่เดียว มีผลกับทุกหน้าที่ include ไฟล์นี้ทันที (ไม่ต้องรีสตาร์ทอะไร แค่รีเฟรชหน้า)
 *
 * --good/--bad (สถานะขึ้น/ลง) ไม่ผูกกับธีม ใช้ค่าเดียวกันทั้งสว่าง/มืดโดยตั้งใจ (เหมือนที่
 * view_tv_pe_chart.php ทำไว้เดิม) — ไม่ต้อง override ใน :root[data-theme="dark"]
 *
 * --good-bg (พื้นหลังกล่อง highlight สถานะบวก เช่น .stat-tile.hero-positive) ตรงข้ามกับ --good/--bad
 * ตรงที่ผูกกับธีม (override ใน dark) เพราะเดิม hardcode เป็น hex พื้นอ่อนตายตัว (#f0f9f1) ที่ใช้ได้แค่พื้น
 * หลังสว่างเท่านั้น — ในธีมมืดดูเป็นกล่องสีเขียวมิ้นท์ลอยแปลกตาไม่เข้าธีม เปลี่ยนเป็น rgba ใส (--good) ผสม
 * เข้ากับพื้นตามธีมแทน ปรับ alpha สูงขึ้นในธีมมืด (0.08 -> 0.14) ให้ยังพอมองเห็น tint ชัดเหมือนกัน — เทียบ
 * เคียงคู่กับ --error-bg เดิม (สีเดียวกับ --bad) ที่ใช้แพทเทิร์นนี้อยู่แล้ว ฝั่งลบ (.hero-negative) เลยใช้
 * var(--error-bg) ตรงๆ ได้เลยไม่ต้องเพิ่มตัวแปรใหม่
 *
 * --neutral (ไม่มีข้อมูล เช่น n.a.) อ้างอิง --text-muted ตรงๆ (สีเดียวกับที่ .stat-value.neutral ใช้อยู่
 * ผ่าน var(--muted) เดิม) เลยเปลี่ยนสีตามธีมไปด้วยเหมือน --text-muted
 *
 * --brand-badge-bg/--brand-badge-text (พื้นหลัง/ตัวอักษร badge "9hoon.com" มุมกราฟ) ตั้งใจแยกจาก --accent
 * — คนละสีฟ้ากัน ไม่ผูกกับธีม
 *
 * --radius-box (มุมโค้งกล่อง/การ์ดเล็กๆ เช่น .metric, .chart-container) แยกชื่อจาก --radius (การ์ดใหญ่
 * ขอบนอกสุดของหน้า เช่น .card/.stat-tile — ย้ายมารวมจาก view_np.php ตอนสร้าง assets/site-common.css แล้ว)
 * เพราะมุมโค้ง 2 scale นี้ไม่เท่ากันโดยตั้งใจ (10px กับ 14px) ไม่ผูกกับธีม
 *
 * --gap-section (margin-bottom มาตรฐานระหว่างบล็อก/การ์ดใหญ่ๆ ของหน้า เช่น .metric-bar) ตั้งใจทำเป็นค่ากลาง
 * ไว้ก่อนตั้งแต่ตอนนี้ (ยังใช้แค่จุดเดียวคือ .metric-bar) เผื่อจุดอื่นจะเอาไปใช้ต่อทีหลัง — ไม่ผูกกับธีม
 *
 * --shadow-sm (เงาบางๆ ใต้ input/กล่องเล็กๆ เช่น .search-input) แยกจาก --shadow (เงาลึกกว่า ใต้
 * dropdown/การ์ดลอย เช่น .autocomplete-list) — ดึงมาจาก rgba(11,11,11,0.04) ที่ hardcode ซ้ำอยู่แล้ว
 * ~14 จุดทั่ว repo (ยังไม่ได้ตามไปแก้ทุกจุด แค่ไม่อยาก hardcode ซ้ำเพิ่มตอนสร้าง assets/search-box.css)
 *
 * --table-head-bg (พื้นหลังแถวหัวตาราง เช่น .table-card th) อ้างอิง --autocomplete-hover-bg ตรงๆ
 * (ค่าเดิมที่ view_np.php hardcode #eef1f5 ไว้บังเอิญตรงกับตัวนี้เป๊ะอยู่แล้ว) เปลี่ยนตามธีมไปด้วยอัตโนมัติ
 *
 * --badge-*-bg/--badge-*-text (2026-09-12, คู่กับ lib/badge.php + assets/badge.css) — โทนสี soft-tint
 * (พื้นอ่อน+ตัวหนังสือเข้ม) สำหรับ badge สถานะ/หมวดหมู่ทั่วเว็บ (delisted, ประเภทข่าว, สถานะประกาศงบ ฯลฯ)
 * ยึด pattern เดียวกับ --good-bg/--error-bg ที่มีอยู่แล้ว (ไม่ใช้ solid สีสด+ตัวหนังสือขาวแบบ badge เดิม
 * ของ view_shareholder.php/dividend_helpers.php เพราะพื้นอ่อนเข้าธีม light/dark ได้ธรรมชาติกว่า) —
 * bad/good ไม่ต้องเพิ่มตัวแปรใหม่ ใช้ --error-bg/--error-text กับ --good-bg/--good ตรงๆ ได้เลย (สีเดียวกัน
 * อยู่แล้ว) ส่วน warn ค่าตรงกับที่ view_dividend.php เคย hardcode ไว้เฉพาะหน้า (ยกมาเป็นกลางตรงๆ ไม่ได้คิดใหม่)
 *
 * --accent-light/--good-light (เส้น/จุดของปีที่ยังไม่จบปีงบ ใน mini chart popup ของ view_dividend_screener.php
 * — DPS กับ EPS) เดิมทั้งคู่ใช้สีเทา (--text-muted) เหมือนกัน พอมี 2 เส้นซ้อนกันแยกไม่ออกว่าเส้นไหนเป็นของ
 * อะไร เลยเปลี่ยนเป็นสีเดียวกับเส้นปกติแต่จางลง (rgba ลด alpha) แทน — ไม่ผูกกับธีมเหมือน --good/--bad
 * เพราะ alpha ที่ลดมาแล้วมองเห็นได้ทั้ง 2 ธีมโดยไม่ต้อง override
 */
:root {
    --bg: #f5f6f8;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --border: #e3e5ea;
    --border-strong: #ccd0d9;
    --text-primary: #0b0b0b;
    --text-secondary: #33383f;
    --text-muted: #6b7280;
    --text-faint: #9aa1ab;
    --accent: #2962ff;
    --accent-hover: #1e53e5;
    --autocomplete-hover-bg: #eef1f5;
    --autocomplete-hover-text: #0b0b0b;
    --table-head-bg: var(--autocomplete-hover-bg);
    --error-bg: rgba(239,83,80,0.08);
    --error-border: #ef5350;
    --error-text: #c62828;
    --good: #26a69a;
    --bad: #ef5350;
    --good-bg: rgba(38,166,154,0.08);
    --accent-light: rgba(41,98,255,0.45);
    --good-light: rgba(38,166,154,0.45);
    --neutral: var(--text-muted);
    --brand-badge-bg: #2a78d6;
    --brand-badge-text: #ffffff;
    --rp-axis-text: #565b66;
    --radius-box: 10px;
    --radius: 14px;
    --gap-section: 15px;
    --shadow: rgba(11,11,11,0.12);
    --shadow-sm: rgba(11,11,11,0.04);
    --badge-warn-bg: rgba(255,193,7,0.12);
    --badge-warn-text: #8a6d00;
    --badge-info-bg: rgba(41,98,255,0.08);
    --badge-info-text: #1e53e5;
    --badge-purple-bg: rgba(122,79,196,0.10);
    --badge-purple-text: #6b3fa0;
    --badge-neutral-bg: rgba(107,114,128,0.1);
    --badge-neutral-text: #4b5563;
}
:root[data-theme="dark"] {
    --bg: #0a0e14;
    --card-bg: #131722;
    --input-bg: #0a0e14;
    --border: #242732;
    --border-strong: #363a45;
    --text-primary: #ffffff;
    --text-secondary: #d1d4dc;
    --text-muted: #787b86;
    --text-faint: #555555;
    --autocomplete-hover-bg: #1e222d;
    --autocomplete-hover-text: #ffffff;
    --error-bg: rgba(239,83,80,0.12);
    --error-text: #ef5350;
    --good-bg: rgba(38,166,154,0.14);
    --shadow: rgba(0,0,0,0.4);
    --shadow-sm: rgba(0,0,0,0.15);
    --badge-warn-bg: rgba(255,193,7,0.1);
    --badge-warn-text: #ffc107;
    --badge-info-bg: rgba(41,98,255,0.14);
    --badge-info-text: #6ea8ff;
    --badge-purple-bg: rgba(122,79,196,0.16);
    --badge-purple-text: #b3a4ff;
    --badge-neutral-bg: rgba(120,123,134,0.14);
    --badge-neutral-text: #9aa1ab;
    --rp-axis-text: #93959e;
}
.theme-toggle {
    background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 999px;
    width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary); transition: border-color .15s;
}
.theme-toggle:hover { border-color: var(--accent); }
/* ไอคอนพระอาทิตย์/พระจันทร์แทน emoji — โชว์ทีละอันตาม data-theme ของ <html>, ไม่ต้องพึ่ง JS สลับไอคอน
   (สว่าง = โชว์พระจันทร์ หมายถึงกดแล้วจะไปมืด, มืด = โชว์พระอาทิตย์ หมายถึงกดแล้วจะไปสว่าง) */
.theme-icon { width: 20px; height: 20px; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }

/* สีขึ้น/ลง (เขียว/แดง) กลางของทั้งเว็บ (2026-09-17) — คู่กับ pctChangeClass() ใน lib/format.php ที่คืน
   class 'up'/'down' ตามเครื่องหมายของค่าเปลี่ยนแปลง — สำรวจพบ pattern นี้เขียนซ้ำ (ส่วนใหญ่ hardcode
   #26a69a/#ef5350 ตรงๆ ไม่ผ่าน var) อยู่ ≥6 ไฟล์ (view_top_stocks.php, view_index_overview.php,
   manage_price_alerts.php, view_dr_indicative_price.php, view_rs_score.php, view_price_chart.php)
   รวมเป็นจุดเดียวที่นี่ตามเกณฑ์ "ซ้ำ ≥3 จุด" ของโปรเจกต์
   .data-table-card .up/.down (2 class, specificity สูงกว่า) กันโดน
   ".data-table-card tbody td { color: var(--text-secondary) }" (assets/data-table.css) ทับสีทิ้งเงียบๆ
   เวลาใช้ในตาราง (บั๊กจริงที่เจอตอน migrate view_index_overview.php) — ไม่ต้องเขียน override เฉพาะหน้าอีก
   ต่อไปเหมือน .panel .up (view_top_stocks.php) / .table-container .up (view_index_overview.php) เดิม */
.up { color: var(--good); }
.down { color: var(--bad); }
.data-table-card .up { color: var(--good); }
.data-table-card .down { color: var(--bad); }