/*
 * กราฟแท่ง/เส้น SVG ของกำไรสุทธิรายไตรมาส (Net Profit) — คู่กับ lib/np_chart_svg.php
 * (render_np_bar_chart_svg()/render_np_line_chart_svg() ปล่อย class เหล่านี้ออกมาให้ตรงๆ)
 *
 * ต้นแบบดึงมาจาก view_np.php — ตอนนี้ยังใช้อยู่แค่หน้าเดียว (view_np_dashboard.php ที่เรียก
 * lib/np_chart_svg.php ร่วมกันยังมี CSS ของตัวเองแยกอยู่ ไม่ได้ migrate มาที่นี่ด้วย)
 *
 * ต้องมี assets/site-theme.css (var(--muted)/var(--border)/var(--border-strong)/var(--text-muted)) และ
 * assets/site-fonts.css (var(--font-main)/var(--font-chart)) โหลดอยู่ก่อนเสมอ — badge "9hoon.com" มุมขวาบน
 * (.chart-card .brand-badge) ย้ายหน้าตาไปอยู่ assets/brand-badge.css กลางแล้ว (lib/brand_badge.php
 * renderBrandBadge()) ที่นี่กำหนดแค่ตำแหน่ง (position/top/right/z-index)
 *
 * --np-bar-0..5 (สีแท่งกราฟไล่เฉด ปีเก่าสุด(0)->ปีปัจจุบัน(5)) — lib/np_chart_svg.php เขียน fill เป็น
 * var(--np-bar-N, <ค่า fallback จาก $colors[N]>) เสมอ ดังนั้นแก้สีแท่งกราฟ (รวมถึงเพิ่ม dark override)
 * แก้ตรงนี้ที่เดียวพอ ไม่ต้องแตะ PHP/view_np.php อีกต่อไป
 */
:root {
    --np-bar-0: #d0cece;
    --np-bar-1: #b6cdea;
    --np-bar-2: #9fc1f9;
    --np-bar-3: #5693f5;
    --np-bar-4: #1e72ae;
    --np-bar-5: #ff7f0e;
}
:root[data-theme="dark"] {
    /* พาเลตต์เดิม (ออกแบบไว้บนพื้นขาว) ดูจางเกินไป/แยกแยะยากบนพื้นเข้ม — ปรับให้ทึบ/มีคอนทราสต์กับพื้นมืด
    มากขึ้น ยังคงลำดับเรื่องราวเดิม (เทาปีเก่าสุด -> ไล่ฟ้าเข้มขึ้นเรื่อยๆ -> ส้มเด่นปีปัจจุบัน) */
    --np-bar-0: var(--text-muted);
    --np-bar-1: #5c85b3;
    --np-bar-2: #4f95d6;
    --np-bar-3: #3d84e0;
    --np-bar-4: #2a5f9e;
    --np-bar-5: #ff9142;
}
.chart-card { position: relative; }
.chart-card .brand-badge { position: absolute; top: 16px; right: 18px; z-index: 10; }
/* เว้นขวาไว้กันชนกับ badge "9hoon.com" (position:absolute มุมขวาบนของ .chart-card) — จอแคบชื่อหุ้น
   ยาวๆ (เช่น "HMPRO : กำไรสุทธิรายไตรมาส เทียบ YoY") จะพันไปชนได้ถ้าไม่เว้น */
.chart-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; padding-right: 100px; }
.chart-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
/* จอมือถือแคบกว่า ~700px จะบีบกราฟจนตัวเลข/แท่งชนกันอ่านไม่ออก (ข้อมูลแน่นหลายปีอยู่แล้ว) — ให้เลื่อน
   แนวนอนดูแทนเหมือน .table-scroll ของตารางด้านล่าง ดีกว่าย่อจนอ่านไม่ออก */
#chartDiv, #lineChartDiv { width: 100%; height: 450px; overflow-x: auto; overflow-y: hidden; }
.np-svg-chart { width: 100%; height: 100%; min-width: 700px; display: block; }
/* stroke ใช้ var(--border)/var(--border-strong) กลาง แทน hex ตรงๆ — เดิม hardcode ไว้บนพื้นขาว พอเข้า
   ธีมมืดเลยกลายเป็นเส้นขาวจ้าตัดกับพื้นเข้มมากเกินไป (เกือบขาวสนิทบนพื้นเกือบดำ) ตอนนี้เปลี่ยนตามธีม
   อัตโนมัติเพราะ var(--border)/var(--border-strong) มี dark override อยู่แล้วใน site-theme.css */
.np-gridline { stroke: var(--border); stroke-width: 1; }
.np-gridline.np-baseline { stroke: var(--border-strong); stroke-width: 1.5; }
/* เข้มกว่าเส้นกริดปกติ ให้แยกเส้นแบ่งปีออกจากเส้นกริดทั่วไปได้ชัด — เดิมสีเดียวกันเป๊ะเลยกลืนกัน มองไม่ออก
   ว่าจุดไหนคือรอยต่อปี ใช้เฉดเดียวกับ .year-divider ของ view_financials_table.php */
.np-year-divider { stroke: var(--border-strong); stroke-width: 1; }
.np-axis-label, .np-x-label, .np-legend-label { font-family: var(--font-main); fill: #898781; }
.np-axis-label { font-size: 15px; }
.np-x-label { font-size: 16px; font-weight: 700; fill: #52514e; }
.np-legend-label { font-size: 16px; fill: #52514e; }
/* กราฟแท่ง + กราฟเส้น Net Profit เท่านั้น — เนื้อหาทั้งหมดในทั้ง 2 กราฟนี้เป็นภาษาอังกฤษ/ตัวเลขล้วนแล้ว
   หลังเปลี่ยนหัวข้อเป็น "Net Profit (M.)" เลยใช้ system font stack ได้เลย ไม่ต้องมี Sarabun กันไทยเพี้ยน
   แบบที่เจอกับเมนู เพราะไม่มีอักษรไทยเหลืออยู่ในกราฟพวกนี้แล้ว */
#chartTitle, #lineChartTitle,
#chartDiv .np-axis-label, #chartDiv .np-x-label, #chartDiv .np-legend-label,
#lineChartDiv .np-axis-label, #lineChartDiv .np-x-label, #lineChartDiv .np-legend-label {
    font-family: var(--font-chart);
}
.np-bar { cursor: default; transition: opacity .12s ease; }
.np-bar:hover { opacity: .82; }
.np-point { cursor: default; stroke: #fff; stroke-width: 1.5; }
.np-point:hover { r: 8; }
.np-line-dashed { fill: none; stroke: #8a817c; stroke-width: 3.5; stroke-dasharray: 6 3; }
/* .chart-tooltip ย้ายไปอยู่ assets/chart-tooltip.css กลางแล้ว (ไม่ผูกกับ np โดยเฉพาะ — ดู
lib/chart_tooltip.php) ต้องเรียก renderChartTooltipAssetTag() คู่กับ renderNpChartAssetTag() เสมอ */