/*
 * แถบสถิติ/เมตริกกลางของทั้งเว็บ (แถวกล่องเล็กๆ label บน + ตัวเลขใหญ่ล่าง) — ต้นแบบดึงมาจาก
 * view_pe_valuation.php คู่กับ lib/metric_bar.php
 *
 * 2 แกน อิสระต่อกัน คูณกันได้ 4 แบบ (ดู renderMetricBar($items, $size, $layout)):
 *   layout: 'separate' (ค่าเริ่มต้น, แต่ละกล่องแยกกรอบตัวเอง มีช่องว่างระหว่างกัน) หรือ
 *           'joined' (กรอบเดียวรอบนอก แต่ละกล่องมีแค่เส้นคั่นซ้าย)
 *   size:   'normal' (ค่าเริ่มต้น) หรือ 'large' (ตัวเลขใหญ่ขึ้น สำหรับสถิติที่อยากให้เด่น)
 *
 * padding/font-size ของแต่ละ size ตั้งค่าที่เดียว ใช้ร่วมกันทั้ง 2 layout (สลับ layout แล้วขนาดยังเท่าเดิม
 * เสมอ ไม่ต้องตั้งซ้ำ) — ส่วนที่ต่างกันจริงระหว่าง layout มีแค่ border/background/gap เท่านั้น
 *
 * ต้องมี assets/site-fonts.css โหลดอยู่ด้วย (เรียก renderSiteFontTags() จาก lib/site_fonts.php) เพราะ
 * ไฟล์นี้อ้างตัวแปร var(--font-main) เอง ไม่รับทอด font-family จาก body ของหน้าที่เรียกใช้อีกต่อไป
 *
 * มุมโค้งกล่อง/ระยะห่างล่างอ้าง var(--radius-box)/var(--gap-section) จาก assets/site-theme.css — หน้าที่ยัง
 * ไม่ migrate มา lib/site_theme.php (มี :root ของตัวเองแยกต่างหาก เช่น view_pe_valuation.php ตอนนี้) ต้อง
 * เติม --radius-box: 10px และ --gap-section: 15px ในบล็อก :root ของตัวเองด้วย ไม่งั้นมุมกล่องจะกลายเป็น
 * เหลี่ยม/ระยะห่างล่างหาย (ค่าว่าง ไม่ error)
 */
.metric-bar { display: flex; gap: 14px; margin-bottom: var(--gap-section); flex-wrap: wrap; font-family: var(--font-main); }

/* layout: separate (ค่าเริ่มต้น) — แต่ละกล่องมี border/background ของตัวเอง */
.metric-bar .metric {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-box);
    padding: 15px 16px; min-width: 110px; flex: 1;
}

/* layout: joined — กรอบเดียวรอบนอก แต่ละกล่องมีแค่เส้นคั่นซ้ายบางๆ (ยกเว้นกล่องแรก) เว้นช่องว่างบน-ล่างไว้
ตั้งใจ (ใช้ ::before แทน border-left ธรรมดาที่ยาวเต็มความสูง) เพราะเส้นเต็มความสูงชนขอบกล่องทำให้หน้าตา
เหมือนตารางเกินไป — สั้นแค่ 60% ของความสูง กึ่งกลางแนวตั้ง ดูเป็นตัวคั่นสถิติมากกว่าเส้นตาราง */
.metric-bar.joined {
    gap: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-box);
}
.metric-bar.joined .metric {
    background: transparent; border: none; border-radius: 0; position: relative;
}
.metric-bar.joined .metric:not(:first-child)::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 60%; background: var(--border);
}

/* label/value/subvalue — ขนาดฐาน (size: normal) ใช้ร่วมกันทั้ง 2 layout — scope ด้วย .metric-bar เสมอ
(ห้ามใช้ .metric เปล่าๆ) เพราะเจอบั๊กจริงที่ view_pe_valuation.php: หน้านั้นมี .metric class ของตัวเองใน
.summary-bar (ช่องกรอกราคา/จำนวนหุ้น ที่ renderMetricBar() ไม่รองรับ <input>) ถ้าไม่ scope กฎที่นี่จะไป
ทับ/โดนทับสไตล์ของ .metric ที่ไม่เกี่ยวกับ metric-bar เลยบนหน้าเดียวกัน */
.metric-bar .metric .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.metric-bar .metric .value { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
.metric-bar .metric .subvalue { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* class พิเศษต่อช่อง (ใส่ผ่าน 'class' ใน item) */
.metric-bar .metric.current .value { color: var(--accent); }
.metric-bar .metric.highlight { border-color: var(--accent); }
.metric-bar .metric.highlight .value { color: var(--accent); }

/* class พิเศษเฉพาะตัวเลข (ใส่ผ่าน 'valueClass' ใน item) */
.metric-bar .metric .value.zscore-good { color: var(--good); }
.metric-bar .metric .value.zscore-bad { color: var(--bad); }

/* size: large — ใช้ร่วมกันทั้ง layout separate และ joined (ไม่ต้องตั้ง padding/font-size ซ้ำต่อ layout) */
.metric-bar.large .metric { padding: 16px 16px; }
.metric-bar.large .metric .label { font-size: 12.5px; }
.metric-bar.large .metric .value { font-size: 30px; }

/* layout: joined บนจอแคบ — flex-wrap ธรรมดาทำให้ค่ายาวๆ (เช่น "408.73 พันล้าน") ตัดขึ้นบรรทัดใหม่กลางคำ
เพราะ .metric ยุบแคบเกินไป และเส้นคั่นซ้ายเดิมก็เพี้ยนตอนขึ้นแถวใหม่ (ยึดต้นแบบ .valuation-grid/-cell ที่
เคยเป็น local CSS ของ view_np.php ก่อนย้ายมาไว้กลางที่นี่) — สลับเป็น grid 4 คอลัมน์ (1000px, ดูบล็อกด้านบน)
แล้ว 2 คอลัมน์ (640px) แล้ว 1 คอลัมน์ (480px) แทน ใช้ nth-child เอาเพราะ layout นี้ตั้งใจให้ต่อกันเป็นแถวเท่าๆ
กันเสมอ ไม่ผูกจำนวนช่องทั้งหมดตายตัว (จำนวนคอลัมน์ต่อแถวตายตัวตามเบรกพอยต์ แต่จำนวนช่องรวมยืดหยุ่น) */
/* บาร์ที่มีหลายช่อง (เช่น view_tv_pe_chart.php 8 ช่อง) ใช้ flex-wrap ธรรมดาไม่พอ — ช่องสุดท้ายที่ตกไป
แถวใหม่คนเดียวจะยืดเต็มความกว้างแถว (flex:1 กระจายพื้นที่ว่างทั้งหมดให้ช่องเดียว) ดูแปลกมาก สลับเป็น grid
4 คอลัมน์คงที่แทนตั้งแต่ความกว้างนี้ — คอลัมน์ทุกแถวกว้างเท่ากันเสมอไม่ว่าจะมีกี่ช่องในแถวสุดท้าย (ผลข้างเคียง
ที่ตั้งใจ: บาร์ 4 ช่องพอดี เช่น หน้าแรก view_np.php ก็จะได้ grid 4 คอลัมน์แถวเดียวเหมือน flex เดิมทุกประการ
ไม่กระทบอะไร) */
@media (max-width: 1000px) {
    .metric-bar.joined { display: grid; grid-template-columns: repeat(4, 1fr); }
    .metric-bar.joined .metric:nth-child(4n+1)::before { display: none; }
    .metric-bar.joined .metric:nth-child(n+5)::after {
        content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        height: 1px; width: 60%; background: var(--border);
    }
}
@media (max-width: 640px) {
    .metric-bar.joined { display: grid; grid-template-columns: 1fr 1fr; }
    /* คอลัมน์แรกของแต่ละแถว (nth-child คี่) ไม่มีเส้นคั่นซ้าย แต่แถวตั้งแต่ 2 เป็นต้นไปมีเส้นคั่นบนแทน
    (สั้นแค่ 60% ความกว้าง กึ่งกลางแนวนอน คู่กับเส้นคั่นซ้ายด้านบนที่สั้น 60% ความสูง) */
    .metric-bar.joined .metric:nth-child(odd)::before { display: none; }
    .metric-bar.joined .metric:nth-child(n+3)::after {
        content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        height: 1px; width: 60%; background: var(--border);
    }
}
@media (max-width: 480px) {
    .metric-bar.joined { grid-template-columns: 1fr; }
    .metric-bar.joined .metric::before { display: none; }
    .metric-bar.joined .metric:not(:first-child)::after {
        content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        height: 1px; width: 60%; background: var(--border);
    }
}