/* ============================================================================
   app.css - ชุดรูปแบบหน้าตากลางของทั้งเว็บแอป (Design System)
   ทุกหน้าต้องเรียกใช้ไฟล์นี้ เพื่อให้ฟอนต์ สี ตาราง ปุ่ม และป้ายสถานะ
   หน้าตาเหมือนกันหมดทุกหน้า ไม่ต้องกำหนดสีซ้ำในแต่ละหน้าอีก
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ชุดสีกลาง (Color Palette)
   กำหนดไว้ที่เดียว ทุกหน้าดึงไปใช้ผ่านชื่อตัวแปร ไม่ต้องจำรหัสสี
   --------------------------------------------------------------------------- */
:root {
    /* ฟอนต์เดียวทั้งเว็บ - Noto Sans Thai อ่านภาษาไทยและตัวเลขได้ชัดเจน */
    --font-sans: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* สีหลัก - ใช้กับปุ่มหลัก ลิงก์ และองค์ประกอบที่ต้องการเน้น */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #eff6ff;

    /* สีพื้นหลังและพื้นผิว */
    --color-page: #f1f5f9;      /* พื้นหลังทั้งหน้า */
    --color-surface: #ffffff;    /* พื้นการ์ด/ตาราง */
    --color-surface-alt: #f8fafc; /* แถวสลับสีในตาราง (zebra stripe) */
    --color-header: #f1f5f9;     /* พื้นหัวตาราง */

    /* เส้นขอบ */
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;

    /* ตัวอักษร */
    --color-text: #0f172a;        /* ข้อความหลัก */
    --color-text-soft: #475569;   /* ข้อความรอง */
    --color-text-muted: #94a3b8;  /* ข้อความจาง เช่น คำอธิบายเพิ่มเติม */

    /* สีสื่อความหมาย - ใช้กับป้ายสถานะและข้อความแจ้งเตือน */
    --color-success: #15803d;
    --color-success-bg: #dcfce7;
    --color-success-hover: #166534;   /* พื้นปุ่มเขียวตอน hover (ค่าเดิมที่เคยฝังใน .btn-success) */
    --color-warning: #b45309;     /* เหลือง - ค้างเกิน 30 วัน */
    --color-warning-bg: #fef3c7;
    --color-alert: #c2410c;       /* ส้ม - ค้างเกิน 60 วัน */
    --color-alert-bg: #ffedd5;
    --color-danger: #b91c1c;      /* แดง - ค้างเกิน 90 วัน / ปุ่มลบ */
    --color-danger-bg: #fee2e2;
    --color-danger-soft: #fca5a5; /* ขอบปุ่มอันตรายแบบขอบ (ค่าเดิมที่เคยฝังใน .btn-danger-outline) */
    --color-info: #1d4ed8;
    --color-info-bg: #dbeafe;
    --color-accent: #0f766e;      /* เขียวอมฟ้า - การเคลียร์บางส่วน */
    --color-accent-bg: #ccfbf1;
    --color-neutral: #475569;
    --color-neutral-bg: #e2e8f0;
    --color-text-invert: #ffffff; /* ตัวอักษรบนปุ่มพื้นทึบ (ค่าเดิม #fff ที่เคยฝังในปุ่ม) */

    /* สเกลตัวอักษรกลาง — ค่าตรงกับที่ใช้จริงในหน้าต่างๆ ตอนนี้ (เตรียมไว้ให้งานชุด D
       ไล่แทน font-size ที่เขียน inline อยู่ ~30 จุด มาเกาะสเกลนี้ — ยังไม่มีใครใช้ ไม่กระทบผลตา) */
    --font-xs: 10.5px;   /* ป้ายเล็กใน detail-table */
    --font-sm: 12px;     /* ข้อความรอง/วันที่จาง */
    --font-md: 12.5px;   /* ตารางย่อย/ช่องกรองโต๊ะจับคู่ */
    --font-lg: 13.5px;   /* ตัวอักษรฐานของตาราง */
    --font-xl: 15px;     /* ตัวเลขเด่นในแถบสรุป */

    --radius: 8px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
}

/* ---------------------------------------------------------------------------
   2. ฟอนต์และพื้นฐาน
   บังคับใช้ฟอนต์เดียวกับทุกองค์ประกอบ รวมถึงปุ่มและช่องกรอกข้อมูล
   ที่ปกติเบราว์เซอร์จะใช้ฟอนต์ของตัวเองแยกต่างหาก
   --------------------------------------------------------------------------- */

/* นับ padding และเส้นขอบรวมอยู่ใน width ที่กำหนด
   ถ้าไม่ตั้งค่านี้ ช่องกรอกที่กำหนด width:100% จะกว้างจริงเกินกรอบไปเท่ากับ padding+border
   (ประมาณ 24px) แล้วล้นไปทับปุ่มหรือช่องข้างๆ - เป็นต้นเหตุของอาการช่องซ้อนทับกัน */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body, button, input, select, textarea, table, th, td {
    font-family: var(--font-sans);
}

body {
    background-color: var(--color-page);
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ตัวเลขทั้งหมดใช้ความกว้างเท่ากันทุกหลัก (tabular-nums)
   ทำให้ตัวเลขในแต่ละแถวเรียงตรงกันเป็นคอลัมน์ อ่านเปรียบเทียบง่าย
   โดยไม่ต้องเปลี่ยนไปใช้ฟอนต์ monospace คนละแบบ */
table, .num, input, .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ---------------------------------------------------------------------------
   3. โครงหน้า (Layout)
   --------------------------------------------------------------------------- */
.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}
.page-narrow { max-width: 860px; }

.page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
}
.page-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 20px;
    margin-bottom: 20px;
}
.card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}
.card-desc {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
   4. เมนูหลัก (Navigation) - เหมือนกันทุกหน้า
   --------------------------------------------------------------------------- */
.nav {
    display: flex;
    gap: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 5px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-card);
    flex-wrap: wrap;
}
.nav a {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-soft);
    text-decoration: none;
    transition: background-color .12s, color .12s;
}
.nav a:hover { background: var(--color-surface-alt); color: var(--color-text); }
.nav a.active { background: var(--color-primary); color: #fff; }

/* ---------------------------------------------------------------------------
   แถบผู้ใช้บนแถบเมนู (ชื่อ + สิทธิ์ + ออกจากระบบ) — auth-guard.js แทรกให้ทุกหน้า
   --------------------------------------------------------------------------- */
.user-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.user-bar-name { font-weight: 600; color: var(--color-text); }
.user-bar-roles { color: var(--color-text-muted); font-size: 12px; }
.user-bar-link { font-size: 12.5px; }
/* ปุ่มที่ผู้ใช้ไม่มีสิทธิ์กด — เทาแต่ยังชี้เมาส์อ่าน tooltip ได้ (ด่านจริงอยู่ฝั่งเซิร์ฟเวอร์) */
.is-no-permission { opacity: .45; cursor: not-allowed; }
/* ป้ายสภาพแวดล้อมสนามซ้อม — โผล่เฉพาะเมื่อเซิร์ฟเวอร์ตั้ง GL_ENV_LABEL (env-banner.js)
   ระบบจริงไม่ตั้งค่า -> ไม่มี element/คลาสพวกนี้เกิดขึ้นเลย หน้าตาเหมือนเดิมทุกพิกเซล */
.env-banner {
    background: var(--color-warning);
    color: var(--color-surface);
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 12px;
}
.env-flagged .nav {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
}

/* แถวค้นหา + ตัวกรองเหนือตาราง — จอแคบยุบบรรทัดเองด้วย flex-wrap ไม่ล้นกรอบ */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

/* ช่องติ๊กเลือกสิทธิ์ในฟอร์มผู้ใช้ */
.role-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
.role-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
/* ฟอร์มผู้ใช้แบ่งเป็นชั้น: ข้อมูลคน / สิทธิ์+สถานะ / ปุ่ม — คั่นด้วยเส้นบาง */
.form-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 28px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

/* ⭐ ป้ายสิทธิ์ในตาราง: 4 ช่องตำแหน่งคงที่ กว้างเท่ากันต่อชนิด -> อ่านเทียบข้ามแถวได้
   มีสิทธิ์ = ป้ายสี · ไม่มี = ป้ายจาง (ยังเห็นโครงว่าช่องนี้คือสิทธิ์อะไร) */
.role-badges { display: flex; gap: 6px; flex-wrap: nowrap; }
.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 22px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.role-badge.is-on {
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border-color: var(--color-accent-bg);
}

/* ป้ายสิทธิ์ระดับแพลตฟอร์ม — คนละชนิดกับ 4 ป้ายด้านซ้าย
   4 ป้ายแรกคือ "สิทธิ์ในระบบกระทบยอด" ตำแหน่งคงที่เพื่อกวาดตาเทียบข้ามแถวได้
   ส่วนป้ายนี้คือ "สิทธิ์ระดับองค์กร" ใช้ได้ทุกระบบ จึงแยกด้วยเส้นคั่นและรูปทรงที่ต่างออกไป
   (ไม่ใส่รวมในกริดเดิม เพราะจะทำให้สิทธิ์คนละระดับดูเป็นชนิดเดียวกัน)
   ไม่มีป้ายจางคู่ = แถวที่ไม่ใช่ผู้ดูแลแพลตฟอร์มไม่ต้องจองที่ (มีไม่กี่คนในองค์กร) */
.role-badge-platform {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    margin-left: 10px;
    border-left: 1px solid var(--color-border);
    padding-left: 12px;
    border-radius: 0;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-accent);
}

/* ชื่อ + อีเมล ในเซลล์เดียว (อีเมลบรรทัดล่าง ตัวเล็กสีจาง) */
.people-name { font-weight: 600; white-space: nowrap; }
.people-sub { font-size: 12px; color: var(--color-text-muted); }

/* สถานะ "ยังไม่เปลี่ยนรหัสชั่วคราว" — ใช้สามเหลี่ยมเตือนแทนจุดสี
   เหตุผล: จุดสีส้มอยู่ติดกับจุดสีแดงในตารางเดียวกันแล้วแยกยาก · เปลี่ยนเป็นคนละรูปทรง
   ทำให้กวาดตาแยกออกทันทีโดยไม่ต้องพึ่งสี (ยังมี title กำกับเหมือนเดิม) */
.status-warn-wrap { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.status-warn {
    width: 15px;
    height: 15px;
    display: block;
    color: var(--color-warning);
}

/* ---------------------------------------------------------------------------
   หน้าเข้าสู่ระบบ / เปลี่ยนรหัสผ่าน
   --------------------------------------------------------------------------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--color-page);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .08);
    overflow: hidden;
}
.auth-head {
    background: var(--color-primary);
    color: var(--color-text-invert);
    padding: 20px 24px;
}
.auth-title { font-size: 20px; font-weight: 700; margin: 0; }
.auth-subtitle { font-size: 13px; opacity: .9; margin: 4px 0 0; line-height: 1.6; }
.auth-form { padding: 22px 24px 8px; display: flex; flex-direction: column; gap: 14px; }
.auth-rule { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }
.auth-submit { width: 100%; justify-content: center; }
.auth-note {
    padding: 14px 24px 20px;
    font-size: 12.5px;
    color: var(--color-text-soft);
    line-height: 1.7;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   5. ตารางข้อมูล (Data Table)
   หัวใจของหน้าจอนี้ - เน้นให้อ่านง่าย ไล่สายตาตามแถวได้สะดวก
   --------------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;            /* ตารางคอลัมน์เยอะ เลื่อนแนวนอนได้ ไม่ดันจนหน้าเว็บล้น */
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.card .table-wrap { box-shadow: none; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

/* หัวตาราง: พื้นเข้มกว่าเนื้อหา ตัวหนา และมีเส้นหนาคั่นด้านล่างให้แยกจากข้อมูลชัดเจน */
.table thead th {
    background: var(--color-header);
    color: var(--color-text-soft);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    text-align: left;
    padding: 11px 14px;
    border-bottom: 2px solid var(--color-border-strong);
    white-space: nowrap;
}

/* ช่องข้อมูล: เพิ่มระยะห่างให้ข้อความมีที่หายใจ ไม่อึดอัด */
.table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}

/* สลับสีพื้นหลังแถวคู่-คี่ ช่วยให้ตาไล่ตามแถวยาวๆ ได้ไม่หลง */
.table tbody tr:nth-child(even) { background: var(--color-surface-alt); }
.table tbody tr:hover { background: var(--color-primary-soft); }
.table tbody tr:last-child td { border-bottom: none; }

/* ตารางที่จับกลุ่มสีพื้น "รายชุด" เอง (ประวัติการจับคู่ / ตารางเปรียบเทียบข้อเสนอ)
   ปิด zebra รายแถวของฐาน แล้วให้แต่ละตารางคุมสีพื้นของชุดด้วยคลาสของตัวเอง
   (เดิมกติกานี้ถูกนิยามซ้ำรายตาราง 2 ที่ — ตั้งใจใช้ตัวเลือกชั้นเดียว (ไม่ผูก .table)
    เพื่อคง specificity เดิมเป๊ะ: hover ของฐานยังชนะแถวคี่เหมือนพฤติกรรมเดิม) */
.table-grouped tbody tr { background: transparent; }
.table-grouped tbody tr:nth-child(even) { background: transparent; }

/* แถวสรุปยอดรวมท้ายตาราง - เน้นด้วยเส้นหนาและตัวหนา */
.table tr.row-total td {
    background: var(--color-header);
    font-weight: 700;
    border-top: 2px solid var(--color-border-strong);
    border-bottom: none;
}
.table tbody tr.row-total:hover { background: var(--color-header); }

/* คอลัมน์ตัวเลข (จำนวนเงิน/จำนวนวัน) ชิดขวาเสมอ เพื่อให้หลักหน่วย-สิบ-ร้อย ตรงกันทุกแถว */
.table .num { text-align: right; white-space: nowrap; }
.table .col-doc { white-space: nowrap; font-weight: 500; }
.table .col-date { white-space: nowrap; color: var(--color-text-soft); }
.table .col-check { width: 40px; text-align: center; }
.table .col-action { text-align: right; white-space: nowrap; }

/* คอลัมน์สถานะแบบไอคอน: จุดสีเขียว (ใช้งานอยู่) / แดง (ไม่ได้ใช้งาน)
   ⚠️ ต้องมี title กำกับเสมอ — ห้ามให้ผู้ใช้เดาความหมายจากสีอย่างเดียว */
.table .col-status { text-align: center; width: 70px; }
.status-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }
.status-dot.is-on  { background: var(--color-success); }
.status-dot.is-off { background: var(--color-danger); }

/* ข้อความรายละเอียดยาวๆ ตัดท้ายด้วย ... กันไม่ให้ดันตารางกว้างจนล้นจอ
   (ผู้ใช้ยังเอาเมาส์ชี้เพื่อดูข้อความเต็มได้จาก tooltip) */
.table .col-desc {
    min-width: 200px;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* โหมด "รายละเอียดเต็มไม่ตัด" — หน้างานที่ต้องอ่านคำอธิบายครบทุกตัวอักษร (กันจับคู่ผิด)
   เปิดใช้ด้วยคลาสนี้ที่ <body> ของหน้านั้น (เดิมกติกานี้ถูกนิยามซ้ำเฉพาะหน้า 2 ไฟล์)
   ความกว้าง (min-width) แต่ละหน้า/ตารางยังจูนของตัวเองได้ตามเดิม */
body.tables-full-desc .table .col-desc {
    white-space: normal;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}
.table .cell-muted { color: var(--color-text-muted); }
.table .cell-strong { font-weight: 600; }
.table .cell-empty { color: var(--color-text-muted); }

/* แถบค้นหา/กรองเหนือตาราง (ย้ายจาก style เฉพาะหน้ามาไว้กลาง ให้ทุกหน้าใช้แบบเดียวกัน) */
.table-search { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.table-search .input { max-width: 320px; }
/* จูนระยะเฉพาะจุด (ย้ายจาก inline style เดิม — ค่าเท่าเดิมเป๊ะ) */
.table-search.is-roomy { margin-bottom: 14px; }
.table-search.is-wide-gap { gap: 14px; }

.table-note {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   6. ป้ายสถานะ (Badge)
   ทุกป้ายสูงเท่ากันหมด (22px) มุมโค้งเท่ากัน แถวจึงไม่สูงเตี้ยไม่เท่ากัน
   --------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-alert   { background: var(--color-alert-bg);   color: var(--color-alert); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-accent  { background: var(--color-accent-bg);  color: var(--color-accent); }
/* ระยะ A: ทิศทางรายการ Open — เดบิต (เขียว) / เครดิต (ส้ม) แยกด้วยสี ไม่ใช่แค่เครื่องหมายลบ */
.badge-debit   { background: var(--color-success-bg); color: var(--color-success); }
.badge-credit  { background: var(--color-warning-bg); color: var(--color-warning); }
.row-credit td { background: rgba(234, 88, 12, 0.045); }
.num.is-credit { color: var(--color-warning); }
.oi-filter-btn { background: var(--color-surface-alt, #f1f5f9); color: var(--color-text-soft); border: 1px solid var(--color-border); }
.oi-filter-btn.is-active { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info); font-weight: 600; }

/* ป้ายอายุรายการในตาราง - ชิดขวาให้ตรงกับคอลัมน์ตัวเลขอื่น */
.badge-age { min-width: 62px; }

/* ---------------------------------------------------------------------------
   โต๊ะจับคู่เอง (Manual Matching) - หน้า manual-match.html
   ใช้ชุดสี ฟอนต์ และรูปแบบตารางเดียวกับหน้าอื่นทั้งหมด
   --------------------------------------------------------------------------- */

/* วางสองฝั่งเคียงกัน จอแคบให้ซ้อนกันลงมาแทน */
.match-desk {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .match-desk { grid-template-columns: minmax(0, 1fr); }
}

.match-side .card-title { display: flex; align-items: center; gap: 8px; }

/* แถบตัวกรองของแต่ละฝั่ง */
.match-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 110px;
    gap: 8px;
    margin-bottom: 10px;
}
.match-filters-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.match-filters .input, .match-filters-dates .input { font-size: 12.5px; padding: 6px 9px; }

/* กล่องรายการที่เลื่อนได้ - จำกัดความสูงไว้เพื่อให้แถบสรุปยอดอยู่ในสายตาเสมอ */
.match-list {
    max-height: 460px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}
.match-list .table { margin: 0; }
.match-list .table thead th { position: sticky; top: 0; z-index: 1; }

.match-row-selected { background: var(--color-primary-soft) !important; }

/* แถบเครื่องมือปฏิเสธข้อเสนอที่รอตรวจสอบทีละหลายรายการ */
.match-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
    cursor: pointer;
}
/* ป้ายเตือนในแถว NAV ว่ามีข้อเสนอ pending ผูกอยู่ */
.pending-hint { color: var(--color-accent); font-weight: 500; }

.match-count-note {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   แถบสรุปยอดแบบทันที - ตัวเลขต้องเด่นและอ่านง่ายที่สุดในหน้า
   --------------------------------------------------------------------------- */
.match-summary {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .10);
}
.match-summary.is-balanced { border-color: var(--color-success); background: var(--color-success-bg); }
.match-summary.is-unbalanced { border-color: var(--color-alert); background: var(--color-alert-bg); }

.match-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 720px) {
    .match-figures { grid-template-columns: minmax(0, 1fr); }
}
.match-figure { text-align: center; }
.match-figure-label {
    font-size: 12.5px;
    color: var(--color-text-soft);
    margin-bottom: 4px;
}
.match-figure-value {
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    line-height: 1.25;
}
.match-figure-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.match-summary.is-balanced .match-figure-diff { color: var(--color-success); }
.match-summary.is-unbalanced .match-figure-diff { color: var(--color-alert); }

.match-verdict {
    margin-top: 12px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}
.match-summary.is-balanced .match-verdict { color: var(--color-success); }
.match-summary.is-unbalanced .match-verdict { color: var(--color-alert); }

.match-confirm-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
@media (max-width: 720px) {
    .match-confirm-row { grid-template-columns: minmax(0, 1fr); }
}

/* บรรทัดเล็กใต้ป้ายอายุ บอกว่านับอายุจากวันไหน
   จำเป็นเพราะบางรายการไม่มีวันที่เอกสารในไฟล์ ระบบต้องประมาณจากวันสิ้นงวดที่พบครั้งแรก
   ผู้ใช้จึงควรเห็นได้ทันทีว่าตัวเลขอายุนั้นมาจากวันที่จริงหรือค่าประมาณ */
.aging-origin {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   7. ปุ่ม (Button)
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s, border-color .12s, color .12s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--color-primary); color: var(--color-text-invert); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-secondary { background: var(--color-surface); color: var(--color-text-soft); border-color: var(--color-border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-alt); color: var(--color-text); }

.btn-success { background: var(--color-success); color: var(--color-text-invert); }
.btn-success:hover:not(:disabled) { background: var(--color-success-hover); }

.btn-danger-outline { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger-soft); }
.btn-danger-outline:hover:not(:disabled) { background: var(--color-danger-bg); }

.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* ปุ่มไอคอนในตาราง (แก้ไข = ดินสอ / ลบ = ถังขยะ) — ต้องมี title ทุกปุ่ม
   ขนาด 32px กดง่าย · ไอคอนวาดด้วย currentColor จึงได้สีตามชนิดปุ่มเดิม (ลบ = แดง) */
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* ไอคอนไม่รับคลิกเอง — ให้คลิกตกที่ปุ่มเสมอ (event delegation เดิมหา data-action ที่ปุ่ม) */
.btn-icon .icon { width: 16px; height: 16px; display: block; pointer-events: none; }

/* ปุ่มแบบลิงก์ในตาราง (แก้ไข / ลบ) */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-primary);
}
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--color-danger); }

/* ---------------------------------------------------------------------------
   8. ฟอร์ม (Form)
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-soft);
}
.input, .select {
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    font-size: 13.5px;
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
}
.input:focus, .select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.input-file { font-size: 13px; color: var(--color-text-soft); }

input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    cursor: pointer;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   ช่องค้นหาแบบพิมพ์กรอง (Combobox)
   ใช้แทน dropdown ธรรมดาเมื่อมีตัวเลือกจำนวนมาก เช่น รายชื่อบัญชี GL เกือบ 200 รายการ
   --------------------------------------------------------------------------- */
.combo { position: relative; }

.combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 300px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
}

.combo-option {
    padding: 8px 12px;
    font-size: 13.5px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}
.combo-option:last-child { border-bottom: none; }
.combo-option:hover,
.combo-option.is-active { background: var(--color-primary-soft); }

.combo-option .combo-code { font-weight: 600; font-variant-numeric: tabular-nums; }
.combo-option .combo-name { color: var(--color-text-soft); }
.combo-option .combo-sub { display: block; font-size: 11.5px; color: var(--color-text-muted); }

.combo-empty {
    padding: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}
.combo-more {
    padding: 7px 12px;
    font-size: 11.5px;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    text-align: center;
}

/* ช่องที่เลือกค่าแล้ว - ทำให้เห็นชัดว่ามีค่าที่ถูกต้องอยู่ */
.combo input.is-selected {
    border-color: var(--color-primary);
    font-weight: 500;
}

/* เครื่องหมายถูกสีเขียว แทน checkbox ของรายการที่ยกยอดไปแล้ว */
.check-done {
    color: var(--color-success);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
/* กันไม่ให้ช่องกรอกที่ยืดหยุ่น (flex) ดันจนล้นออกนอกแถว แล้วไปทับปุ่มข้างๆ */
.form-row > .field { min-width: 0; }

/* ฟอร์มแถวเดียวที่มีปุ่มอยู่ท้ายแถว
   ใช้ grid แทน flex เพื่อกำหนดพื้นที่ของแต่ละช่องให้ชัดเจน ปุ่มจึงไม่มีทางถูกช่องกรอกทับ
   คอลัมน์สุดท้าย (auto) = ปุ่ม กว้างพอดีข้อความ, คอลัมน์ 1fr = ช่องที่ยืดได้ */
.inline-form {
    display: grid;
    gap: 12px;
    align-items: end;
}
.inline-form > .field { min-width: 0; }
.inline-form .btn { align-self: end; }

/* จอแคบ: เรียงลงมาเป็นแนวตั้งทั้งหมด ปุ่มกว้างเต็มแถว */
@media (max-width: 640px) {
    .inline-form { grid-template-columns: 1fr !important; }
    .inline-form .btn { width: 100%; }
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

/* ---------------------------------------------------------------------------
   9. ข้อความแจ้งผล / กล่องสรุป
   --------------------------------------------------------------------------- */
.msg { font-size: 13px; margin-top: 8px; }
.msg-error { color: var(--color-danger); }
.msg-success { color: var(--color-success); }
.msg-muted { color: var(--color-text-muted); }
/* กล่องเตือนแบบเด่น (พื้นเหลือง) - ใช้กับแถบเตือนที่ต้องให้ผู้ใช้สังเกตและทำตาม */
.msg-warning {
    color: var(--color-warning);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
}

.summary-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-top: 14px;
    background: var(--color-surface-alt);
}
.summary-box.is-success { border-color: #86efac; background: #f0fdf4; }
.summary-box.is-warning { border-color: #fcd34d; background: #fffbeb; }
.summary-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.summary-label { font-size: 11.5px; color: var(--color-text-muted); }
.summary-value { font-size: 17px; font-weight: 700; margin-top: 1px; }
.summary-value.is-success { color: var(--color-success); }
.summary-value.is-warning { color: var(--color-warning); }

/* กล่องรายการรอตรวจสอบ / ประวัติการเคลียร์ */
.item-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 13px 15px;
    background: var(--color-surface);
}
.item-box + .item-box { margin-top: 10px; }
.item-box-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.item-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.item-text { font-size: 13.5px; color: var(--color-text); margin-top: 6px; }
.item-sub { font-size: 12.5px; color: var(--color-text-soft); }
.evidence-list { margin-top: 5px; padding-left: 0; list-style: none; }
.evidence-list li { font-size: 12px; color: var(--color-text-muted); padding: 1px 0; }

/* รายการเหตุผลที่ระบบใช้ประกอบการเสนอ (แสดงให้ผู้ใช้อ่านก่อนตัดสินใจ) */
.reason-list { margin-top: 5px; padding-left: 0; list-style: none; }
.reason-list li { font-size: 11.5px; color: var(--color-text-soft); padding: 1px 0; }

/* ---------------------------------------------------------------------------
   ฟอร์มส่วนหัวของรอบกระทบยอด
   ใช้ grid ที่แต่ละช่องมีความกว้างขั้นต่ำแน่นอน ป้ายกำกับกับช่องกรอกจึงอยู่ตรงกันเสมอ
   และไม่ล้นออกนอกกรอบการ์ดเมื่อย่อ/ขยายหน้าต่าง
   --------------------------------------------------------------------------- */
.recon-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 18px;
    align-items: start;
}
/* (.recon-form-actions ถูกถอด — ปุ่มบันทึกย้ายไปใต้ช่องสถานะ ปุ่มลบรอบไปมุมขวาบนหัวการ์ด) */
/* กันไม่ให้ input ที่มี width:100% ดันกรอบ grid จนล้น */
.recon-form .field { min-width: 0; }
.recon-form .input, .recon-form .select { max-width: 100%; box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   แถบแจ้งเตือนงวดที่ถูกล็อก
   --------------------------------------------------------------------------- */
/* แถบแดง "ล็อกถาวร" (ระดับ 4) — เกณฑ์ใหม่: ไม่มีปุ่มใดๆ บนแถบนี้ */
.lock-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #fca5a5;
    background: #fef2f2;
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.lock-banner .lock-icon { font-size: 20px; line-height: 1.2; }
.lock-banner .lock-title { font-size: 14px; font-weight: 700; color: var(--color-danger); }
.lock-banner .lock-detail { font-size: 12.5px; color: var(--color-text-soft); margin-top: 3px; line-height: 1.6; }
.lock-banner .lock-actions { margin-left: auto; }

/* ทำให้ทั้งการ์ดเป็นแบบอ่านอย่างเดียวเมื่องวดถูกล็อก */
/* แถบงวดปิดแล้ว (ล็อกระดับ 2 — ยังไม่ถูกยกยอด เปิดงวดกลับมาแก้ได้) — โครงเดียวกับ lock-banner */
.closed-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--color-warning-soft, #fcd34d);
    border-radius: 8px;
    background: var(--color-warning-bg, #fffbeb);
}
.closed-banner .lock-icon { font-size: 20px; line-height: 1.2; }
.closed-banner .lock-title { font-size: 14px; font-weight: 700; color: var(--color-warning); }
.closed-banner .lock-detail { font-size: 12.5px; color: var(--color-text-soft); margin-top: 3px; line-height: 1.6; }
.closed-banner .lock-actions { margin-left: auto; }
.closed-banner .reopen-form { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.closed-banner .reopen-form .input { flex: 1; min-width: 220px; }

/* โหมดอ่านอย่างเดียว 2 ระดับ: readonly-locked (ล็อกถาวร) / readonly-closed (ปิดงวด รอเปิด)
   ปิดปุ่ม/ช่องกรอกที่ "แก้ข้อมูล" — แต่ของที่เป็น "การดู/ตรวจ" ล้วนต้องยังใช้ได้เสมอ:
   ค้นหา · ตัวกรอง · ปุ่มเหตุผล/โหลดเพิ่ม · Export · แท็บ (ไม่ใช่ .btn อยู่แล้ว) */
.readonly-locked input:not([type="checkbox"]):not([type="search"]),
.readonly-locked select,
.readonly-locked textarea,
.readonly-closed input:not([type="checkbox"]):not([type="search"]),
.readonly-closed select,
.readonly-closed textarea {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.readonly-locked .btn { opacity: .5; pointer-events: none; }
.readonly-closed .btn:not(.btn-reopen) { opacity: .5; pointer-events: none; }
.readonly-locked input[type="checkbox"],
.readonly-closed input[type="checkbox"] { pointer-events: none; opacity: .5; }
/* ปุ่มยืนยัน/ยกเลิกการตรวจ (maker-checker) — เป็น metadata ต้องกดได้ทุกระดับงวด
   รวมงวดปิด (readonly-closed) และงวดล็อกถาวร (readonly-locked) */
.readonly-locked .btn-review,
.readonly-closed .btn-review { opacity: 1; pointer-events: auto; }
/* ช่องผู้ตรวจในฟอร์มข้อมูลงวด (อ่านอย่างเดียว — กรอบเดียวกับ input) + ปุ่ม/สถานะใต้ช่อง */
.review-display {
    display: flex;
    align-items: center;
    background: var(--color-surface-alt);
    cursor: default;
}
.review-display.is-empty { color: var(--color-text-muted); }
/* ปุ่ม (บันทึก / ยืนยันการตรวจ) + คำอธิบายสถานะ อยู่แถวเดียวกัน — ล้นแล้วตัดบรรทัดเอง */
.review-actions { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.review-status-line {
    flex: 1 1 auto; min-width: 0;
    font-size: 12.5px; color: var(--color-text-soft); line-height: 1.5;
}
.review-status-line.is-reviewed { color: var(--color-success); font-weight: 600; }
/* ข้อยกเว้น "การดู" — เปิดใช้กลับทั้งสองโหมด */
.readonly-locked a[data-export], .readonly-closed a[data-export],
.readonly-locked .mh-filter-btn, .readonly-closed .mh-filter-btn,
.readonly-locked .mh-who-btn, .readonly-closed .mh-who-btn,
.readonly-locked .oi-filter-btn, .readonly-closed .oi-filter-btn,
.readonly-locked [data-action="toggle-why"], .readonly-closed [data-action="toggle-why"],
.readonly-locked [data-acc-more], .readonly-closed [data-acc-more] {
    opacity: 1;
    pointer-events: auto;
}
/* ช่องเลือกคน/เหตุผลในฟอร์มเปิดงวด ต้องกรอกได้แม้อยู่โหมดอ่านอย่างเดียว
   (ฟอร์มปลดล็อกใน lock-banner ถูกถอดออกแล้ว — แถบล็อกถาวรไม่มีช่องกรอกใดๆ) */
.readonly-closed .closed-banner input,
.readonly-closed .closed-banner select {
    background: var(--color-surface);
    color: var(--color-text);
    cursor: auto;
}

/* ---------------------------------------------------------------------------
   ปรับปรุงยอดยกมาในงวดปัจจุบัน (ฟอร์มแก้/เพิ่ม/ลบ + ประวัติ)
   --------------------------------------------------------------------------- */
.carry-adjust-form {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.carry-adjust-form .ca-form-title { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.carry-adjust-form .ca-form-item { font-size: 13px; color: var(--color-danger); font-weight: 600; margin-bottom: 8px; }
.carry-adjust-form .ca-form-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.carry-adjust-form .ca-form-reason { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.carry-adjust-form .ca-form-reason .input { flex: 1; min-width: 260px; }
.carry-adjust-form .ca-adjuster { font-size: 12.5px; color: var(--color-text-soft); }
.carry-adjust-form .ca-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* แถวใบยกที่ถูกลบผ่านการปรับปรุง — เห็นร่องรอยแต่จางลง ไม่มีปุ่ม */
.row-carry-deleted td { opacity: .55; }
.carry-log-section { margin-top: 10px; font-size: 13px; }
.carry-log-section summary { cursor: pointer; font-weight: 600; color: var(--color-text-soft); }

/* ---------------------------------------------------------------------------
   ผลการตรวจสอบก่อนปิดงวด
   --------------------------------------------------------------------------- */
.check-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 13.5px;
}
.check-item:last-child { border-bottom: none; }
.check-mark { font-weight: 700; line-height: 1.5; }
.check-item.is-pass .check-mark { color: var(--color-success); }
.check-item.is-fail .check-mark { color: var(--color-danger); }
.check-diff {
    margin-top: 6px;
    padding: 9px 12px;
    background: var(--color-danger-bg);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--color-danger);
    line-height: 1.6;
}
.check-diff ul { margin: 4px 0 0; padding-left: 18px; }
.check-diff li { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   คำอธิบายผลต่าง (GL เทียบรายการ Open) — อยู่ในการ์ด "การตรวจสอบ" (โซน 3)
   ตัวเลขทั้งสามย้ายขึ้นแถบหัวหน้า (โซน 1) แล้ว กล่องสรุปเดิมจึงถูกถอดทิ้งทั้งชุด
   (.recon-result / .recon-result-figures / .recon-figure*)
   --------------------------------------------------------------------------- */
.recon-result-msg {
    font-size: 13px;
    color: var(--color-text-soft);
    margin-top: 10px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   แถบตรวจสอบความสมดุลทางบัญชี
   --------------------------------------------------------------------------- */
.balance-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.balance-cell { text-align: right; }
.balance-cell .summary-label { text-align: right; }
.balance-cell .balance-value {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.balance-cell.is-result .balance-value { color: var(--color-primary); }
.balance-cell.is-ok .balance-value { color: var(--color-success); }
.balance-cell.is-diff .balance-value { color: var(--color-alert); }

/* ---------------------------------------------------------------------------
   การ์ดตัวเลือกจับคู่ที่ระบบเสนอ
   แบ่ง 2 คอลัมน์: ซ้าย = เอกสาร/เหตุผล (กว้างกว่า), ขวา = คะแนน/ตัวเลข/ปุ่ม
   --------------------------------------------------------------------------- */
.candidate-list { margin-top: 12px; }
.candidate {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
    overflow: hidden;
}
.candidate + .candidate { margin-top: 10px; }
.candidate.is-top { border-color: var(--color-primary); background: var(--color-primary-soft); }

.candidate-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;  /* ซ้ายยืดหยุ่น ขวากว้างคงที่ */
    gap: 18px;
    padding: 14px 16px;
}
@media (max-width: 780px) {
    .candidate-body { grid-template-columns: 1fr; }
}

/* คอลัมน์ซ้าย: รายการเอกสาร NAV */
.candidate-docs { list-style: none; padding: 0; margin: 0; }
.candidate-docs li {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--color-text);
    padding: 3px 0;
}
.candidate-docs .doc-no { font-weight: 600; }
.candidate-docs .doc-amt { font-variant-numeric: tabular-nums; color: var(--color-text-soft); }

/* ป้ายเหตุผล (chip) เรียงแนวนอน ประหยัดพื้นที่กว่าบูลเล็ตแนวตั้ง */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.chip-support { background: var(--color-success-bg); color: var(--color-success); }
.chip-caution { background: var(--color-warning-bg); color: var(--color-warning); }

/* คอลัมน์ขวา: คะแนน + ตัวเลข + ปุ่ม */
.candidate-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid var(--color-border);
    padding-left: 16px;
}
@media (max-width: 780px) {
    .candidate-side { border-left: none; border-top: 1px solid var(--color-border); padding-left: 0; padding-top: 12px; }
}

/* แถบแสดงระดับความมั่นใจ */
.score-head { display: flex; justify-content: space-between; align-items: baseline; }
.score-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.score-max { font-size: 12px; color: var(--color-text-muted); }
.score-bar {
    height: 7px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
    margin-top: 6px;
}
.score-fill { height: 100%; border-radius: 999px; }
.score-high .score-num { color: var(--color-success); }
.score-high .score-fill { background: var(--color-success); }
.score-mid .score-num { color: var(--color-warning); }
.score-mid .score-fill { background: var(--color-warning); }
.score-low .score-num { color: var(--color-alert); }
.score-low .score-fill { background: var(--color-alert); }

/* แถวตัวเลขสรุป 3 ตัว - ตัวเลขเด่น ชิดขวา ป้ายกำกับเล็กอยู่ด้านบน */
.num-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.num-cell { text-align: right; }
.num-cell .num-label {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.num-cell .num-value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    margin-top: 1px;
}
.num-cell.is-warn .num-value { color: var(--color-alert); }
.num-cell.is-ok .num-value { color: var(--color-success); }

.candidate-actions { display: flex; gap: 8px; }
.candidate-actions .btn { flex: 1; }

/* แถวย่อของตัวเลือกอันดับรองๆ - แสดงข้อมูลสำคัญบรรทัดเดียว คลิกเพื่อขยาย */
.candidate-collapsed {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
}
.candidate-collapsed:hover { background: var(--color-primary-soft); }
.candidate-collapsed .cc-rank { font-weight: 600; color: var(--color-text-soft); white-space: nowrap; }
.candidate-collapsed .cc-score { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.candidate-collapsed .cc-doc {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-soft);
}
.candidate-collapsed .cc-num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.candidate-collapsed .cc-toggle { color: var(--color-primary); font-weight: 600; white-space: nowrap; }
.timeline-entry {
    border-left: 2px solid #86efac;
    padding-left: 11px;
    margin-top: 9px;
}

.empty-state {
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 10px 0;
}

.stack { display: flex; flex-direction: column; gap: 10px; }
.hidden { display: none !important; }