/*
 * ตารางกำไรสุทธิ (รายไตรมาสปฏิทิน + TTM) — คู่กับ lib/np_series.php (renderNpProfitTable())
 *
 * รวม 2 ส่วนที่แยกกันไปคนละเรื่อง อยู่ในไฟล์เดียวเพราะใช้คู่กันเสมอ:
 *   1. โครงตาราง (.table-scroll/table/th/td/.eps-sub) — สไตล์ตัวเลขในตาราง
 *   2. .yoy-tip-bubble — tooltip เทียบ YoY บนตัวเลข **คนละกลไกกับ assets/chart-tooltip.js** — อันนี้เป็น
 *      CSS ล้วนๆ (position:absolute ผูกกับ <td> โดยตรงผ่าน :hover) ไม่มี JS/กล่องลอยกลางเหมือนกราฟ
 *      เพราะ tooltip ผูกกับ cell ที่ตำแหน่งคงที่อยู่แล้ว ไม่ต้องตามเมาส์
 *
 * ต้องมี assets/site-theme.css (var(--good)/var(--bad)/var(--muted)/var(--border)/var(--accent)/
 * var(--text-primary)/var(--table-head-bg)) และ assets/site-fonts.css (var(--font-tabular)) โหลดอยู่ก่อน
 */
/* จอแคบ (มือถือ) หลายคอลัมน์ที่ font-size ใหญ่จะกว้างเกินจอเสมอ — ให้เลื่อนแนวนอนได้เฉพาะในกรอบตารางเอง
แทนที่จะดันทั้งหน้าล้นขอบจอ (ตามหลัก: เนื้อหากว้างต้องมี overflow-x ของตัวเอง ไม่ใช่ให้ body เลื่อนแนวนอน) */
.table-scroll { overflow-x: auto; }
.table-card table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 20px; }
.table-card th {
    text-align: right; color: var(--text-primary); font-weight: 700; font-size: 16px; padding: 10px 8px;
    background: var(--table-head-bg); border-bottom: 2px solid var(--accent);
}
.table-card th:first-child { border-radius: 8px 0 0 0; }
.table-card th:last-child { border-radius: 0 8px 0 0; }
.table-card th:first-child, .table-card td:first-child { text-align: left; }
.table-card td {
    text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums; vertical-align: middle;
}
.table-card td.positive { color: var(--good); }
.table-card td.negative { color: var(--bad); }
.table-card td.empty { color: var(--muted); }
.table-card .eps-sub {
    font-family: var(--font-tabular); font-size: 17px; font-weight: 500; color: var(--text-secondary); margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
/* จอมือถือ font-size ใหญ่เดิมกินพื้นที่จนต้องเลื่อนดูเยอะโดยไม่จำเป็น ลดลงให้เหมาะกับจอแคบ */
@media (max-width: 480px) {
    .table-card table { font-size: 15px; }
    .table-card th { font-size: 13px; padding: 6px; }
    .table-card td { padding: 4px 6px; }
    .table-card .eps-sub { font-size: 13px; }
}

/* tooltip เทียบ YoY บนตัวเลขกำไรในตาราง — โผล่ทันทีที่ชี้เม้าส์ (ไม่มี transition delay แบบ title ธรรมดา
ของ browser ที่ต้องรอ ~1 วินาที) ตำแหน่งลอยเหนือเซลล์ตรงกึ่งกลางเป๊ะ พร้อมลูกศรชี้ลงมาที่เซลล์ (::after) ให้
เห็นชัดว่า tooltip นี้อธิบายเลขตัวไหน ไม่ดันเลย์เอาต์ตารางเพราะ position:absolute */
.table-card td.yoy-tip { position: relative; cursor: default; }
.table-card td.yoy-tip .yoy-tip-bubble {
    position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
    margin-bottom: 10px; padding: 6px 10px; border-radius: 6px; background: #2a2a2a;
    font-size: 13px; font-weight: 500; color: #d4d4d4; white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
}
/* ลูกศรสามเหลี่ยมชี้ลง (ปลายชนขอบล่างของ bubble พอดี ต่อเนื่องกับ margin-bottom ด้านบน) */
.table-card td.yoy-tip .yoy-tip-bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #2a2a2a;
}
.table-card td.yoy-tip:hover .yoy-tip-bubble { opacity: 1; visibility: visible; }
.yoy-tip-bubble .tip-pct.positive { color: #4ade80; font-weight: 700; }
.yoy-tip-bubble .tip-pct.negative { color: #f87171; font-weight: 700; }
.yoy-tip-bubble .tip-pct.neutral { color: #b9b9b9; font-weight: 700; }