/* Fahfa — สไตล์กลางของทั้งสองหน้า
 *
 * ก่อนมีไฟล์นี้ admin.dc.html ไม่มี class= เลยสักตัว: element ที่มีสไตล์ ~400 จุด
 * เขียน style="..." สดทั้งหมด แปลว่าการ์ดขาวถูกพิมพ์ซ้ำ 7 ครั้ง (14 ถ้านับตัวแปรย่อย)
 * ขอบ input ซ้ำ 9 ครั้ง ข้อความ "ไม่พบข้อมูล" ซ้ำ 9 ครั้ง แค่จะทำการ์ดให้มนขึ้น
 * ก็ต้องไล่แก้ 14 จุดในไฟล์ 2791 บรรทัดโดยห้ามพลาดสักจุด
 *
 * ตัวเลขทุกตัวในไฟล์นี้ยกมาจาก style= เดิมตรง ๆ ไม่ได้ปัดหรือปรับ
 * เป้าหมายของ Phase นี้คือหน้าเว็บต้องเหมือนเดิมทุกพิกเซล
 *
 * กฎของไฟล์นี้
 *   1. ห้ามมี selector ที่ยิงใส่ element เปล่า ๆ (button, input, div ฯลฯ)
 *      ทุกกฎต้องเริ่มด้วย .fa- หรือ :root
 *      ข้อยกเว้นเดียวคือ button ด้านล่าง ซึ่งมีเหตุผลเขียนไว้ตรงนั้น
 *   2. เปลี่ยนค่าที่ :root ก่อนเสมอ แก้ที่กฎรายตัวเมื่อจำเป็นจริง ๆ เท่านั้น
 */

/* ─────────────────────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────────────────────── */
:root {
  /* พื้นผิว */
  --fa-bg:      #f4f3f1;   /* พื้นหลังหน้า */
  --fa-surface: #fff;      /* การ์ด */
  --fa-sunken:  #f7f6f4;   /* ช่องกรอก, กล่องใน */
  --fa-chipbg:  #ebe9e5;   /* ป้ายประเภท */
  --fa-tode:    #fff8e8;   /* แถวโต๊ด */

  /* เส้น — สามน้ำหนัก ใช้แยกหน้าที่กันจริง อย่ายุบรวม */
  --fa-line:      #eae8e4;  /* ขอบการ์ดและ input ปกติ (1.5px) */
  --fa-line-soft: #f0efec;  /* เส้นคั่นแถวในลิสต์, รางกราฟแท่ง */
  --fa-line-hard: #e5e3df;  /* input แบบแน่น, ปุ่ม ghost, เส้นประ (1px) */

  /* ตัวอักษร ไล่จากเข้มไปจาง */
  --fa-ink:   #111;
  --fa-ink-2: #6b6b6b;
  --fa-ink-3: #a9a7a2;
  --fa-ink-4: #c9c7c2;

  /* สีสื่อความหมาย */
  --fa-ok:       #2e7d32;  --fa-ok-bg:   #e8f5e9;
  --fa-warn:     #b26a00;  --fa-warn-bg: #fff4e5;
  --fa-warn-line:#f0a500;
  --fa-bad:      #c0392b;  --fa-bad-bg:  #fdecea;
  --fa-win:      #0ca30c;  --fa-win-bg:  #eaf6ea;

  /* ความมน */
  --fa-r-sm:   8px;
  --fa-r-md:  10px;
  --fa-r-lg:  12px;
  --fa-r-xl:  16px;
  --fa-r-pill:99px;

  --fa-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* ─────────────────────────────────────────────────────────────
   ต่อกับ DC runtime
   ───────────────────────────────────────────────────────────── */

/* <dc-import> ทุกตัวถูกครอบด้วย <div class="sc-host"> โดย runtime
 * (support.js:1029-1041) และ BASE_CSS ไม่ได้กำหนด display ให้มันเลย
 * ถ้าปล่อยไว้ พอเอา <dc-import> ไปวางแทนลูกของ flex/grid เดิม
 * ตัว wrapper จะกลายเป็นลูกแทน แล้วเลย์เอาต์เพี้ยนแบบเงียบ ๆ
 * และเราแปะ class ให้ wrapper ไม่ได้ด้วย เพราะ class= บน dc-import
 * ถูกอ่านเป็น prop ชื่อ class ไม่ใช่ class ของ wrapper (support.js:434-436)
 *
 * ต้อง scope เป็น .sc-host .sc-host (host ที่ซ้อนอยู่ข้างใน = ตัวที่มาจาก
 * dc-import เท่านั้น) ห้ามเขียน .sc-host เฉย ๆ เพราะจะไปทับกฎของ runtime
 * ที่ใช้กับ host ตัวราก: #dc-root > .sc-host{height:100%} (support.js:132)
 * และ #dc-root > .sc-host{height:auto} (support.js:122)
 *
 * กฎที่ตามมา: component ทุกตัวต้องมี root element เดียว
 * ถ้ามีสอง มันจะกลายเป็นสองช่องของ grid ตัวแม่ */
.sc-host .sc-host { display: contents; }
/* ยกเว้นตอนพัง เพื่อให้กล่องแดงแจ้ง error ยังวางตำแหน่งตัวเองได้ */
.sc-host .sc-host.sc-has-error { display: block; }

/* ─────────────────────────────────────────────────────────────
   โครงหน้า
   ───────────────────────────────────────────────────────────── */

/* กรอบนอกสุดของหน้า admin */
.fa-page {
  max-width: 1100px; margin: 0 auto; min-height: 100vh;
  background: var(--fa-bg);
  display: flex; flex-direction: column;
  font-family: 'Sarabun', sans-serif;
}

/* แถบหัวสีดำ ใช้ทั้งสองหน้า ต่างกันแค่ระยะขอบซ้ายขวา */
.fa-topbar {
  background: var(--fa-ink); color: #fff;
  padding: 18px 24px;
  position: sticky; top: 0; z-index: 10;
}
.fa-topbar--narrow { padding: 18px 20px; }

/* ─────────────────────────────────────────────────────────────
   เลย์เอาต์
   ───────────────────────────────────────────────────────────── */
/* .fa-flex = display:flex เปล่า ๆ ใช้เมื่อ *ไม่* ต้องการ align-items:center
 * เช่นแถวแท็บที่ปุ่มต้องยืดเต็มความสูงแถว (align-items ดีฟอลต์คือ stretch)
 * การใช้ .fa-row แทนตรงนั้นจะทำให้ปุ่มหดลงมาเท่าเนื้อหา */
.fa-flex    { display: flex; }
.fa-col     { display: flex; flex-direction: column; }
.fa-row     { display: flex; align-items: center; }
.fa-between { display: flex; align-items: center; justify-content: space-between; }
.fa-split   { display: flex; justify-content: space-between; }
.fa-baseline{ align-items: baseline; }
.fa-end     { align-items: flex-end; }
.fa-wrap    { flex-wrap: wrap; }
.fa-grow    { flex: 1; }
.fa-minw0   { min-width: 0; }
.fa-nowrap  { white-space: nowrap; }
.fa-center  { text-align: center; }
.fa-rel     { position: relative; }

/* ระยะห่าง — ตั้งชื่อตามค่าจริงเป็น px ไม่ใช่ลำดับ เพราะหน้าเดิมใช้ค่าที่ไม่ได้
 * เรียงสวย (5, 7, 9 ปนอยู่กับเลขคู่) ชื่อที่เป็นค่าจริงจึงเพิ่มทีหลังได้ไม่งง */
.fa-gap-2  { gap:  2px; }
.fa-gap-4  { gap:  4px; }
.fa-gap-5  { gap:  5px; }
.fa-gap-6  { gap:  6px; }
.fa-gap-7  { gap:  7px; }
.fa-gap-8  { gap:  8px; }
.fa-gap-9  { gap:  9px; }
.fa-gap-10 { gap: 10px; }
.fa-gap-12 { gap: 12px; }
.fa-gap-14 { gap: 14px; }
.fa-gap-16 { gap: 16px; }

/* ไม่ตั้ง gap ในนี้ ให้ประกอบกับ .fa-gap-* เอาเหมือน .fa-card
 * ถ้าตั้งไว้ .fa-gap-* จะทับไม่ได้ เพราะกฎ .fa-grid-* อยู่ล่างกว่าในไฟล์ */
.fa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.fa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }

/* ─────────────────────────────────────────────────────────────
   การ์ด
   .fa-card ให้แค่ผิว (พื้น ความมน เงา ระยะขอบใน) ส่วนทิศทางและระยะห่าง
   ใช้ .fa-col + .fa-g* ประกอบเอา เพราะของเดิมมีทั้ง gap 6/10/12/14/16
   ───────────────────────────────────────────────────────────── */
.fa-card {
  background: var(--fa-surface);
  border-radius: var(--fa-r-xl);
  padding: 18px;
  box-shadow: var(--fa-shadow);
}
.fa-card--lg    { padding: 20px; }
/* ลิสต์ที่แถวชนขอบการ์ด ต้องมี overflow:hidden ไม่งั้นมุมมนโดนแถวทับ */
.fa-card--flush { padding: 0; overflow: hidden; }
.fa-card--tode  { border: 1.5px solid var(--fa-warn-line); }
.fa-card--bad   { border: 1.5px solid var(--fa-bad-bg); }

/* กล่องซ้อนในการ์ด */
.fa-inset        { background: var(--fa-sunken);  border-radius: var(--fa-r-lg); padding: 12px 14px; }
.fa-inset--white { background: var(--fa-surface); border-radius: 9px;            padding:  8px 10px; }
.fa-inset--white-lg { background: var(--fa-surface); border-radius: 9px;         padding: 10px 12px; }
.fa-inset--tode  { background: var(--fa-tode);    border-radius: var(--fa-r-lg); padding: 12px 14px; }
.fa-inset--tight { background: var(--fa-sunken);  border-radius: var(--fa-r-lg); padding: 10px 14px; }
.fa-inset--tile  { background: var(--fa-sunken);  border-radius: var(--fa-r-lg); padding: 12px 16px;
                   flex: 1; min-width: 120px; }

/* ตัวสลับแบบแบ่งช่อง (2 ตัว / 3 ตัว / วิ่ง) รางสีเทา ปุ่มที่เลือกอยู่ลอยขึ้นมา */
.fa-seg { display: flex; background: var(--fa-line-soft);
          border-radius: 9px; padding: 3px; gap: 2px; }

.fa-inset--white-sm { background: var(--fa-sunken); border-radius: 9px; padding: 8px 10px; }
.fa-inset--card  { background: var(--fa-surface); border-radius: var(--fa-r-lg); padding: 10px 12px; }

/* เส้นประคั่นก่อนบล็อกถัดไปในการ์ดเดียวกัน */
.fa-hr-top     { border-top: 1px dashed var(--fa-line-hard); padding-top: 12px; }
.fa-hr-top--14 { padding-top: 14px; }
/* เส้นทึบคั่นรายละเอียดที่กางออกมาในแถวเดียวกัน */
.fa-divider-top     { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fa-line); }
.fa-divider-top--14 { margin-top: 14px; padding-top: 14px; }

/* รูปสลิปย่อ ครอบตัดให้เป็นกรอบเท่ากันทุกใบ กดแล้วเปิด .fa-scrim */
.fa-slip { width: 100%; border-radius: var(--fa-r-lg); object-fit: cover;
           border: 1px solid var(--fa-line); cursor: zoom-in; }

/* ─────────────────────────────────────────────────────────────
   ตัวอักษร
   .fa-sub  = ข้อความรอง  (--fa-ink-2 เข้มกว่า อ่านง่ายกว่า)
   .fa-muted = ข้อความจาง (--fa-ink-3 ใช้กับคำอธิบาย/ค่าว่าง)
   ───────────────────────────────────────────────────────────── */
/* .fa-h0 จงใจไม่กำหนดสี — ที่ใช้จริงมันวางบนแถบดำ (สืบทอดสีขาว) และบนพื้นขาว
 * (สืบทอดสีดำดีฟอลต์ของเบราว์เซอร์ ซึ่งเป็น #000 ไม่ใช่ #111) การใส่สีตรงนี้
 * จะเปลี่ยนหน้าตาทั้งสองที่ */
.fa-h0 { font-size: 16px;   font-weight: 700; }
.fa-h1 { font-size: 15px;   font-weight: 700; color: var(--fa-ink); }
.fa-h2 { font-size: 14px;   font-weight: 700; color: var(--fa-ink); }
.fa-h3 { font-size: 13px;   font-weight: 700; color: var(--fa-ink); }
.fa-h4 { font-size: 13.5px; font-weight: 700; color: var(--fa-ink); }
.fa-h5 { font-size: 12.5px; font-weight: 700; color: var(--fa-ink); }

.fa-label     { font-size: 12.5px; font-weight: 600; color: var(--fa-ink-2); }
.fa-label--lg { font-size: 13px;   font-weight: 600; color: var(--fa-ink-2); }

.fa-sub       { font-size: 12px;   color: var(--fa-ink-2); }
.fa-sub--sm   { font-size: 11.5px; color: var(--fa-ink-2); }
.fa-sub--md   { font-size: 12.5px; color: var(--fa-ink-2); }

.fa-muted     { font-size: 12px;   color: var(--fa-ink-3); }
.fa-muted--md { font-size: 12.5px; color: var(--fa-ink-3); }
.fa-muted--sm { font-size: 11.5px; color: var(--fa-ink-3); }
.fa-muted--xs { font-size: 11px;   color: var(--fa-ink-3); }
.fa-faint     { font-size: 11px;   color: var(--fa-ink-4); }

/* ข้อความเนื้อหาขนาดปกติ ใช้ 11 ที่รวมสองหน้า */
.fa-text      { font-size: 13.5px; color: var(--fa-ink-2); }

.fa-err       { font-size: 12.5px; color: var(--fa-bad); }

.fa-w6 { font-weight: 600; }
.fa-w7 { font-weight: 700; }

.fa-money     { font-size: 14.5px; font-weight: 700; color: var(--fa-ink); }
/* ตัวเลขเด่น หนา 800 ตัวปรับขนาดตั้งชื่อตามค่าจริง ใช้คู่กับ .fa-stat เสมอ */
.fa-stat      { font-size: 26px; font-weight: 800; color: var(--fa-ink); }
.fa-stat--20  { font-size: 20px; }
.fa-stat--19  { font-size: 19px; }
.fa-stat--18  { font-size: 18px; }
.fa-stat--16  { font-size: 16px; }

/* ตัวเลขที่แทง — letter-spacing ทำให้เลข 3 หลักอ่านทีละหลักได้ */
.fa-num       { font-size: 17px; font-weight: 700; letter-spacing: 1px; color: var(--fa-ink); }
.fa-num--16   { font-size: 16px; }
.fa-num--15   { font-size: 15px; }
.fa-num--won  { color: var(--fa-win); }
.fa-minw150   { min-width: 150px; }

/* คู่ ชื่อ-ค่า ในบล็อกสรุปยอด */
.fa-kv     { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--fa-ink-2); }
.fa-kv--13 { font-size: 13px; }
.fa-total { display: flex; justify-content: space-between; align-items: center;
            padding-top: 6px; border-top: 1px solid var(--fa-line); }

.fa-c-ok   { color: var(--fa-ok); }
.fa-c-bad  { color: var(--fa-bad); }
.fa-c-warn { color: var(--fa-warn); }
.fa-c-win  { color: var(--fa-win); }

/* ─────────────────────────────────────────────────────────────
   ช่องกรอก
   ───────────────────────────────────────────────────────────── */
/* .fa-input ให้แค่ผิว ไม่กำหนดความกว้างและไม่กำหนด box-sizing
 * เพราะหน้าเดิมไม่สม่ำเสมอตรงนี้: ช่องกว้าง 100% ใส่ box-sizing:border-box ไว้
 * แต่ช่องความกว้างคงที่ในแท็บพนักงาน (160px, 230px, 70px) ไม่ได้ใส่
 * ซึ่งทำให้ความกว้างจริงต่างกันประมาณ 22px และ runtime ก็ไม่มี reset ให้ด้วย
 * (BASE_CSS ไม่มี *{box-sizing:border-box}) จึงเขียนออกมาตรง ๆ ที่จุดเรียกใช้
 * ให้เห็นความไม่สม่ำเสมอนี้ แทนที่จะซ่อนไว้ในนี้ */
.fa-input {
  background: var(--fa-sunken);
  border: 1.5px solid var(--fa-line);
  border-radius: var(--fa-r-md);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
}
/* แบบแน่น ใช้ในตารางและฟอร์มที่มีหลายช่องเรียงกัน */
.fa-input--sm     { border-width: 1px; border-color: var(--fa-line-hard);
                    border-radius: var(--fa-r-sm); padding: 8px 10px; }
.fa-input--white  { background: var(--fa-surface); }
.fa-input--p9     { padding: 9px 12px; }
.fa-input--center { text-align: center; }
.fa-input--num    { font-size: 16px; font-weight: 700; text-align: center; letter-spacing: 1px; }
.fa-input--num-sm { font-size: 14px; font-weight: 700; text-align: center; }
/* ช่องกรอกผลรางวัล ตัวใหญ่และห่างเพื่อให้ตรวจเลขทีละหลักได้ */
.fa-input--draw   { padding: 12px; font-size: 18px; font-weight: 700;
                    letter-spacing: 2px; text-align: center; }
.fa-input--full   { width: 100%; box-sizing: border-box; }
.fa-bbox          { box-sizing: border-box; }
/* ความกว้างคงที่ — ของเดิมกำหนดเป็น px ติดมากับ style= จึงยกมาเป็น class */
.fa-input--w70  { width:  70px; }
.fa-input--w100 { width: 100px; }
.fa-input--w110 { width: 110px; }
.fa-input--w150 { width: 150px; }
.fa-input--w160 { width: 160px; }
.fa-input--w180 { width: 180px; }
.fa-input--w230 { width: 230px; }

.fa-input:focus-visible {
  outline: 2px solid var(--fa-ink);
  outline-offset: 1px;
  border-color: var(--fa-ink);
}

/* ─────────────────────────────────────────────────────────────
   ปุ่ม
   ───────────────────────────────────────────────────────────── */

/* ข้อยกเว้นเดียวของกฎ "ห้าม selector เปล่า" ในไฟล์นี้
 *
 * เบราว์เซอร์ไม่ให้ <button> สืบทอดฟอนต์จากพ่อแม่ มันใช้ฟอนต์ปุ่มของระบบแทน
 * ปุ่มทั้งแอปมี 78 ตัวและ *ไม่มีตัวไหนเลย* ที่กำหนด font-family ทั้งหมดจึงเป็น
 * ฟอนต์ระบบ ไม่ใช่ Sarabun เหมือนข้อความอื่นทั้งหน้า ภาษาไทยจึงดูคนละแบบกัน
 *
 * ทำไมถึงเป็น button เปล่า ไม่ใช่ .fa-btn:
 * ปุ่มแค่ 34 ตัวที่ใช้ .fa-btn ที่เหลือเป็นปุ่มใน index.dc.html ที่ยังผูกสไตล์
 * ด้วย style="{{ ... }}" ตามสเกลของหน้านั้นเอง ถ้าใส่ที่ .fa-btn จะได้ Sarabun
 * แค่บางปุ่ม แล้วกลายเป็นความไม่สม่ำเสมอ *ใหม่* ที่แย่กว่าเดิม
 * selector เปล่าครอบได้ครบทั้ง 78 ตัวโดยไม่สนว่าแต่ละตัวจัดสไตล์มาแบบไหน
 *
 * ปลอดภัยเพราะไม่มีปุ่มไหนกำหนด font-family ไว้ inline เลย จึงไม่มีอะไรถูกทับ
 * และ inherit จะไล่ขึ้นไปถึง body ที่ตั้ง Sarabun ไว้ในทั้งสองหน้า
 * ช่องกรอกไม่ต้องแก้ ทุกตัวได้ font-family อยู่แล้วจาก .fa-input หรือ style ของตัวเอง */
button { font-family: inherit; }

.fa-btn { font-weight: 700; border: none; cursor: pointer; }

.fa-btn--solid  { background: var(--fa-ink);     color: #fff; }
.fa-btn--ghost  { background: var(--fa-surface); color: var(--fa-ink-2);
                  border: 1px solid var(--fa-line-hard); }
/* ปุ่มที่ยังไม่ถูกเลือกในแถบแท็บและแถบตัวกรอง — เส้นขอบอ่อนกว่า .fa-btn--ghost
 * หนึ่งขั้น (--fa-line ไม่ใช่ --fa-line-hard) ซึ่งเป็นค่าที่หน้าเดิมใช้จริง */
.fa-btn--ghost-soft   { background: var(--fa-surface); color: var(--fa-ink-2);
                        border: 1px solid var(--fa-line); }
/* ปุ่มเลือกประเภทที่ยังไม่ถูกเลือก — พื้นจม ตัวอักษรเข้มกว่า ink-2 */
.fa-btn--ghost-sunken { background: var(--fa-sunken); color: #333;
                        border: 1.5px solid var(--fa-line); }
/* ปุ่มที่กดไม่ได้เพราะฟอร์มยังกรอกไม่ครบ ต่างจาก :disabled ตรงที่ตั้งใจให้เห็น
 * ว่าเป็นสีทึบ ไม่ใช่ปุ่มปกติที่จาง */
.fa-btn--muted  { background: var(--fa-line-hard); color: var(--fa-ink-3); }
.fa-btn--danger { background: var(--fa-surface); color: var(--fa-bad);
                  border: 1.5px solid var(--fa-bad); }
.fa-btn--danger-soft { background: var(--fa-surface); color: var(--fa-bad);
                  border: 1.5px solid var(--fa-bad-bg); }
.fa-btn--bad    { background: var(--fa-bad); color: #fff; }
/* ปุ่มบนแถบหัวสีดำ */
.fa-btn--onink  { background: rgba(255,255,255,0.1);  color: #fff; }

/* ขนาด/ทรง — ประกอบกับสีข้างบน */
.fa-btn--sm  { border-radius: var(--fa-r-sm); padding:  8px 14px; font-size: 12.5px; }
.fa-btn--md  { border-radius: var(--fa-r-md); padding: 10px 16px; font-size: 13px; }
.fa-btn--lg  { border-radius: var(--fa-r-md); padding: 12px 16px; font-size: 13.5px; }
.fa-btn--sq  { border-radius: var(--fa-r-md); padding: 12px;      font-size: 13.5px; }
.fa-btn--sq-sm { border-radius: var(--fa-r-sm); padding: 8px;     font-size: 12.5px; }
.fa-btn--pill{ border-radius: 9px;            padding:  9px 14px; font-size: 12.5px; font-weight: 600; }
.fa-btn--self{ align-self: flex-start; }

/* แท็บและตัวกรอง — ปลายทางของ style string ที่เดิมประกอบใน renderVals */
.fa-tab  { flex: 1; border-radius: var(--fa-r-md); padding: 10px 0; font-size: 13.5px; }
.fa-chip { border-radius: 9px; padding: 8px 14px; font-size: 12.5px; }
.fa-typebtn { width: 100%; box-sizing: border-box; border-radius: var(--fa-r-lg);
              padding: 14px 0; font-size: 14px; }
/* ปุ่มเต็มความกว้างท้ายฟอร์ม */
.fa-btn--block { width: 100%; border-radius: var(--fa-r-md); padding: 13px; font-size: 14px; }

/* ปุ่มที่หน้าตาเป็นลิงก์
 * ไม่ตั้ง padding:0 โดยเจตนา — ของเดิมไม่ได้รีเซ็ต ปุ่มจึงยังมี padding
 * ดีฟอลต์ของเบราว์เซอร์อยู่ ถ้ารีเซ็ตตรงนี้ระยะห่างจะขยับทั้งแอป */
.fa-link         { background: none; border: none; font-weight: 600; cursor: pointer; }
.fa-link--ink    { color: var(--fa-ink);   font-size: 12.5px; }
.fa-link--sub    { color: var(--fa-ink-2); font-size: 13px; }
.fa-link--bad    { color: var(--fa-bad);   font-size: 12.5px; }
.fa-link--warn   { color: var(--fa-warn);  font-size: 12.5px; }
.fa-link--strong { color: var(--fa-ink);   font-size: 12.5px; font-weight: 700;
                   align-self: flex-start; padding: 4px 0; }

.fa-btn:disabled, .fa-link:disabled { opacity: .5; cursor: default; }
.fa-btn--solid:not(:disabled):hover { background: #000; }
.fa-btn--ghost:not(:disabled):hover { border-color: var(--fa-ink-3); }

/* ─────────────────────────────────────────────────────────────
   ป้าย
   ───────────────────────────────────────────────────────────── */
.fa-type {
  font-size: 11.5px; font-weight: 600; color: var(--fa-ink-2);
  background: var(--fa-chipbg); padding: 3px 9px; border-radius: 7px;
}
.fa-type--sm  { font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.fa-type--win { font-size: 11px; font-weight: 700; color: var(--fa-win);
                background: var(--fa-win-bg); }
.fa-type--ok  { font-size: 10.5px; font-weight: 700; color: var(--fa-ok);
                background: #eaf4ea; padding: 2px 7px; border-radius: 6px; }

.fa-status { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--fa-r-sm); }
.fa-status--pending  { background: var(--fa-warn-bg); color: var(--fa-warn); }
.fa-status--approved { background: var(--fa-ok-bg);   color: var(--fa-ok); }
.fa-status--rejected { background: var(--fa-bad-bg);  color: var(--fa-bad); }

/* ─────────────────────────────────────────────────────────────
   ลิสต์และค่าว่าง
   ───────────────────────────────────────────────────────────── */
/* ไม่มีกฎ :last-child ตัดเส้นล่างของแถวสุดท้าย เพราะหน้า admin เดิมไม่ได้ตัด
 * แถวสุดท้ายจึงมีเส้นชนขอบการ์ดอยู่ ถ้าจะตัดควรเป็นการแก้ที่ตั้งใจ
 * (index.dc.html ตัดของมันเองด้วย .fahfa-history-list > div:last-child) */
.fa-listrow { padding: 14px 18px; border-bottom: 1px solid var(--fa-line-soft); }
.fa-listrow--active { background: var(--fa-sunken); }

.fa-empty { padding: 24px; text-align: center; color: var(--fa-ink-3); font-size: 13px; }
.fa-empty--lg    { padding: 32px; }
/* ในการ์ดที่มีระยะขอบในอยู่แล้ว จึงเว้นเฉพาะบนล่าง */
.fa-empty--flush { padding: 24px 0; }

/* แถวของกราฟแท่ง — เส้นคั่นบาง ๆ ระหว่างแถว */
.fa-barrow { padding: 10px 0; border-bottom: 1px solid var(--fa-line-soft); }

.fa-scroll { overflow-y: auto; }
/* กันไม่ให้การสกรอลจนสุดลิสต์ไปลากทั้งหน้าตาม แยกเป็นอีก class เพราะเป็นการ
 * เปลี่ยนพฤติกรรม ไม่ใช่หน้าตา ลิสต์ในหน้า admin เดิมไม่มีอันนี้ ถ้าจะเปิดใช้
 * ควรเป็นการตัดสินใจที่ตั้งใจ ไม่ใช่ผลพลอยได้จากการย้ายมาใช้ class */
.fa-scroll--contain { overscroll-behavior: contain; }
.fa-h360 { max-height: 360px; }
.fa-h420 { max-height: 420px; }
.fa-h520 { max-height: 520px; }
.fa-h560 { max-height: 560px; }
.fa-h640 { max-height: 640px; }

/* ─────────────────────────────────────────────────────────────
   กราฟแท่ง (มอนิเตอร์เลข และสถิติงวด)
   ความกว้างของแท่งเป็นเลขที่คำนวณต่อแถว จึงยังต้องมาทาง style= ตัวเดียว
   ส่วนสีย้ายมาเป็น class ที่นี่
   ───────────────────────────────────────────────────────────── */
.fa-bartrack { height: 6px; background: var(--fa-line-soft);
               border-radius: var(--fa-r-pill); overflow: hidden; }
.fa-bar      { height: 100%; border-radius: var(--fa-r-pill); background: var(--fa-ink); }
/* มอนิเตอร์เลขไล่สีตามสัดส่วน แท่งที่ยังไม่ถึงเกณฑ์เตือนใช้สีอ่อนกว่าค่าปกติ
 * ส่วนสถิติงวดใช้สีเดียวทั้งตาราง (--fa-ink) เพราะมันมีชุดข้อมูลเดียว */
.fa-bar--calm{ background: var(--fa-ink-2); }
.fa-bar--warn{ background: var(--fa-warn); }
.fa-bar--hot { background: var(--fa-bad); }

.fa-share      { font-size: 12.5px; font-weight: 700; min-width: 52px;
                 text-align: right; color: var(--fa-ink-2); }
/* ตารางสถิติงวดมีคอลัมน์แน่นกว่ามอนิเตอร์ จึงจองที่แคบกว่า */
.fa-share--46  { min-width: 46px; }
.fa-share--warn{ color: var(--fa-warn); }
.fa-share--hot { color: var(--fa-bad); }
.fa-rank       { font-size: 11px; font-weight: 700; color: var(--fa-ink-4); min-width: 18px; }

/* ─────────────────────────────────────────────────────────────
   เบ็ดเตล็ด
   ───────────────────────────────────────────────────────────── */
.fa-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.fa-dot--live       { background: #4caf50; }
.fa-dot--connecting { background: var(--fa-warn-line); }
.fa-dot--offline    { background: var(--fa-bad); }

.fa-clickable { cursor: pointer; }

/* จุดแดงเล็ก ๆ เกาะมุมบนขวาของแท็บ บอกว่ามีของรอตรวจ
 * box-shadow เป็นวงแหวนสีพื้นหลัง ให้จุดลอยพ้นขอบปุ่มโดยไม่ต้องเว้นที่ */
.fa-pindot {
  position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: var(--fa-r-pill);
  background: var(--fa-bad);
  box-shadow: 0 0 0 2px var(--fa-bg);
  pointer-events: none;
}

/* เหมือน .fa-pindot แต่มีตัวเลขอยู่ข้างใน เกาะปุ่มกรอง "รอตรวจสอบ"
 * line-height เท่ากับ height เพื่อให้ตัวเลขอยู่กลางพอดีโดยไม่ต้องใช้ flex */
.fa-pinbadge {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; box-sizing: border-box;
  padding: 0 5px; border-radius: var(--fa-r-pill);
  background: var(--fa-bad); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--fa-bg);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   กล่องดูสลิปเต็มจอ
   รูปย่อในหน้าใช้ object-fit:cover จึงถูกครอบตัด ซึ่งเป็นปัญหาพอดีตอนที่
   ตัวเลขที่ต้องอ่านอยู่ริมสลิป กล่องนี้แสดงรูปเต็มไม่ครอบตัด
   ───────────────────────────────────────────────────────────── */
.fa-scrim {
  position: fixed; inset: 0;
  background: rgba(17,17,17,0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 60;
  cursor: zoom-out;
}
.fa-scrim__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--fa-r-sm);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
/* ปุ่มลอยบนกล่อง ทั้งปุ่มปิดและลิงก์เปิดแท็บใหม่ ต่างกันแค่ตำแหน่ง */
.fa-scrim__btn {
  position: absolute;
  background: rgba(255,255,255,0.15); color: #fff;
  border: none; border-radius: var(--fa-r-md);
  font-weight: 700; cursor: pointer;
}
.fa-scrim__btn--close { top: 16px; right: 20px; padding: 10px 16px; font-size: 14px; }
.fa-scrim__btn--open  { bottom: 18px; left: 50%; transform: translateX(-50%);
                        padding: 9px 16px; font-size: 13px; text-decoration: none; }

/* ช่องอัปโหลดสลิป / ที่ว่างของสลิปที่ถูกลบไปแล้ว
 * ไม่กำหนด min-height และ padding เพราะแต่ละที่ใช้ไม่เท่ากัน ปล่อยไว้ที่จุดเรียก */
.fa-dropzone {
  width: 100%; box-sizing: border-box;
  border-radius: var(--fa-r-lg); border: 1px dashed var(--fa-line-hard);
  background: var(--fa-sunken);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
}