/*
 * ตารางรายการข้อมูล (list/data table) กลาง — คู่กับ lib/data_table.php
 *
 * ที่มา (2026-09-16): tb_stocklist.php/tb_warrant.php (lib/tb_stocklist_view.php), tb_stocklist_full.php,
 * tb_dr.php migrate แยกกันคนละรอบ ต่างคนต่างเขียน <style> ของตัวเองที่เหมือนกันเป๊ะ (แก้ให้ตรงกันเองทีหลัง
 * ด้วยมือจนครบ 3 จุด) — ยกมารวมเป็นไฟล์กลางจริงตรงนี้ กัน drift ในอนาคตเวลามีหน้าใหม่ต้องเขียนตารางแบบนี้อีก
 *
 * ตั้งใจแยกจาก assets/np-table.css (ตารางกำไรสุทธิ view_np.php — คนละ "รูปทรง" กันจริง: ตัวเลขชิดขวาทั้งตาราง,
 * หัวตารางหนา+เส้น accent สี, ใช้กับ np_series.php โดยเฉพาะ) — เผื่อสับสนเพราะทั้งคู่ใช้ชื่อคอนเทนเนอร์คล้ายกัน
 * ไฟล์นี้เลยตั้งใจใช้ชื่อคลาส **`.data-table-card`** (ไม่ใช่ `.table-card` ที่ np-table.css ใช้อยู่ก่อนแล้ว)
 * กันชนกันถ้าหน้าไหนดันโหลดทั้งคู่พร้อมกันในอนาคต
 *
 * ต้องมี assets/site-theme.css (var(--card-bg)/var(--radius-box)/var(--shadow)/var(--table-head-bg)/
 * var(--border)/var(--text-secondary)/var(--text-primary)/var(--text-muted)/var(--bg)/var(--accent)/
 * var(--autocomplete-hover-bg)) โหลดอยู่ก่อน — ตัวเลข (.num-cell) ใช้ var(--font-main) เดียวกับทั้งหน้า
 * (2026-09-17 ตัด var(--font-tabular) ออกตามที่ผู้ใช้สั่งให้ทั้งเว็บยึดฟอนต์หลักตัวเดียว ไม่ต้องพึ่ง
 * assets/site-fonts.css เพิ่มสำหรับไฟล์นี้อีกต่อไป)
 *
 * ตรึงหัวตาราง (position:sticky) — ตั้งใจไม่ใส่ overflow-x:auto บน .data-table-card ตอน desktop เพราะ sticky
 * จะไปยึดกับกรอบที่ scroll เอง (ตัว .data-table-card) แทนหน้าเว็บทันทีถ้ามี overflow อื่นนอกจาก visible
 * (รายละเอียดเหตุผลเต็มดู view_dividend_screener.php ที่ทำ pattern นี้ไว้ก่อน) จอแคบกว่า 768px ค่อยเปิด
 * overflow-x:auto กลับมาที่ .data-table-card เอง กันโลโก้/header บนสุดลากตามเวลาตารางกว้างเกินจอ (ยอม sticky
 * ใช้ไม่ได้ตอนจอแคบ แลกกับ UX ที่ดีกว่า)
 */
.data-table-card { background: var(--card-bg); border-radius: var(--radius-box); box-shadow: 0 2px 8px var(--shadow); }
@media (max-width: 768px) { .data-table-card { overflow-x: auto; } }
.data-table-card table { width: 100%; border-collapse: collapse; }
.data-table-card th, .data-table-card td { padding: 10px 12px; text-align: left; font-size: 14px; }
.data-table-card thead th {
    position: sticky; top: 0; z-index: 1; background: var(--table-head-bg); border-bottom: 1px solid var(--border);
    color: var(--text-secondary); font-weight: 500; white-space: nowrap;
}
/* หัวคอลัมน์คลิกเรียงได้ (คลิกหัวคอลัมน์ → sort) — ใช้จริงที่ tb_dr.php ตอนนี้ เตรียมไว้ให้หน้าอื่นเอาไปใช้ต่อได้
เลยเหมือนกัน ไม่ต้องเขียนเอง .arrow เป็น placeholder ตัวเลข/สัญลักษณ์ที่ฝั่ง PHP echo มาเอง (▲/▼/↕ แล้วแต่หน้า) */
.data-table-card th.sortable { cursor: pointer; user-select: none; }
.data-table-card th.sortable:hover { background-color: var(--autocomplete-hover-bg); }
.data-table-card th.sortable .arrow { opacity: .25; margin-left: 2px; }
.data-table-card th.sortable.sorted-asc .arrow, .data-table-card th.sortable.sorted-desc .arrow { opacity: 1; }
.data-table-card tbody tr { border-bottom: 1px solid var(--border); }
.data-table-card tbody tr:hover { background-color: var(--autocomplete-hover-bg); }
.data-table-card tbody td { color: var(--text-secondary); }
/* .symbol-cell ย้ายไปอยู่ assets/symbol-cell.css กลางแล้ว (2026-09-19, ต้นแบบ view_dividend_screener.php) —
หน้าที่ใช้ .data-table-card ต้อง require lib/symbol_cell.php + เรียก renderSymbolCellAssetTag() เองด้วย
(ดู lib/tb_stocklist_view.php/tb_dr.php/tb_stocklist_full.php) ไม่งั้นคอลัมน์ Symbol จะไม่มีสไตล์เลย */
.data-table-card .center-cell { text-align: center; }
/* ต้องเจาะจงกว่า ".data-table-card th"/".data-table-card td" (2 class vs 1 class+1 type — specificity เท่ากัน
ที่ชั้น class แต่ฝั่ง th/td มี type selector เพิ่มมาด้วยเลยชนะ text-align:left ไปก่อนถ้าเขียนแค่ ".num-cell"
เฉยๆ แบบที่เคยพลาดมาแล้วตอน migrate tb_stocklist_full.php/tb_dr.php รอบแรก) ผูกกับ th/td ตรงๆ กันพลาดซ้ำ */
.data-table-card th.num-cell, .data-table-card td.num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.data-table-card .row-no { text-align: center; color: var(--text-muted); }
.data-table-card .empty-row td { padding: 32px; text-align: center; color: var(--text-muted); background: var(--bg); }
.data-table-card .no-data { color: var(--text-muted); }

/* บรรทัดคำอธิบายใต้หัวข้อหน้า (renderPageTitle()) ก่อนตาราง — อยู่นอก .data-table-card แต่ใช้คู่กันเสมอใน
3 หน้าที่ migrate มา เลยรวมไว้ที่นี่แทนแยกไฟล์ใหม่อีกไฟล์สำหรับ 1 บรรทัดเดียว */
.list-subtitle { color: var(--text-muted); font-size: 13.5px; margin: -8px 0 16px; }