/* House showcase design system — lean white SaaS component layer
 * โทนขาวล้วน · hairline · ไม่ถมดำ · flat SaaS ที่ "เนียน"
 * ฟอนต์: Bai Jamjuree (display) + Anuphan (body) — รองรับไทยเต็ม
 * สีเป็น channel "R G B" เพื่อให้ Tailwind/CSS alpha ทำงาน
 * accent เปลี่ยนได้ทั้งระบบผ่าน --c-accent (theme.js เป็นคนกำหนดตอนโหลด)
 * ค่า :root ด้านล่างเป็น fallback เท่านั้น — theme.js override เสมอ
 */
:root {
  --c-ink: 15 23 42;        /* near-black text (slate) */
  --c-muted: 90 100 118;    /* secondary text */
  --c-faint: 148 158 172;   /* tertiary */
  --c-line: 15 23 42;       /* hairline base (ใช้กับ alpha ต่ำ) */
  --c-surface: 248 250 252; /* page bg (off-white) */
  --c-card: 255 255 255;    /* card bg */
  --c-accent: 37 99 235;    /* เส้นเดียว — ใช้น้อยมาก (active/link) */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 1px rgb(15 23 42 / 0.03);
  --shadow-md: 0 4px 14px -4px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.05);
}
html { scroll-behavior: smooth; }
/* พื้นเรียบ ไม่มี gradient — แอปที่ใช้ทำงานจริงไม่มีพื้นหลังไล่สี */
body {
  font-family: "Anuphan", system-ui, sans-serif;
  background-color: rgb(var(--c-surface));
}
.font-display { font-family: "Bai Jamjuree", "Anuphan", system-ui, sans-serif; letter-spacing: -0.01em; }
input[type="color"] { -webkit-appearance: none; appearance: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* hairline helper */
.hair { border: 1px solid rgb(var(--c-line) / 0.10); }
.hair-t { border-top: 1px solid rgb(var(--c-line) / 0.10); }
.hair-b { border-bottom: 1px solid rgb(var(--c-line) / 0.10); }
.hair-r { border-right: 1px solid rgb(var(--c-line) / 0.10); }

/* card */
.cf-card { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s, transform .2s; }
a.cf-card:hover, .cf-card-hover:hover { box-shadow: var(--shadow-md); border-color: rgb(var(--c-line) / 0.18); }

/* stat card */
.cf-stat { position: relative; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; }
a.cf-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: rgb(var(--c-line) / 0.18); }
.cf-stat-top { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: rgb(var(--c-muted)); }
.cf-stat-num { font-family: "Bai Jamjuree"; font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; margin-top: 0.35rem; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.cf-stat-num small { font-size: 0.9rem; font-weight: 500; color: rgb(var(--c-faint)); }
.cf-stat-foot { font-size: 0.72rem; margin-top: 0.3rem; }
.cf-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: transparent; }
.cf-stat-safe::before { background: rgb(22 128 92 / 0.85); }
.cf-stat-warn::before { background: rgb(202 138 4 / 0.85); }
.cf-stat-bad::before  { background: rgb(220 70 60 / 0.85); }
.cf-stat-ink::before  { background: rgb(var(--c-ink) / 0.55); }

/* logo / icon box — outline ไม่ถม */
.cf-mark { border: 1.5px solid rgb(var(--c-ink)); border-radius: 0.7rem; display: grid; place-items: center; color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }
.cf-iconbox { border: 1px solid rgb(var(--c-line) / 0.16); border-radius: 0.7rem; display: grid; place-items: center; color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }

/* eyebrow */
.cf-eyebrow { font-family: "Bai Jamjuree"; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c-accent)); font-weight: 600; }

/* chips */
.cf-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; padding: 0.24rem 0.62rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.14); color: rgb(var(--c-muted)); background: rgb(var(--c-card)); }
.cf-chip-ink { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink) / 0.32); }

/* buttons — CTA หลักได้หน้าละ 1 ปุ่ม (cf-btn-primary) */
.cf-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; padding: 0.52rem 1rem; border-radius: 0.7rem; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); transition: .15s; box-shadow: var(--shadow-sm); }
.cf-btn:hover { border-color: rgb(var(--c-ink) / 0.32); box-shadow: var(--shadow-md); }
.cf-btn-primary { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }
.cf-btn-primary:hover { background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }

/* step list (ใช้กับหน้า journey) */
.cf-step { position: relative; padding-left: 3.2rem; }
.cf-step::before { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: -1.1rem; width: 1.5px; background: rgb(var(--c-line) / 0.12); }
.cf-step:last-child::before { display: none; }
.cf-step-num { position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; display: grid; place-items: center; font-family: "Bai Jamjuree"; font-weight: 600; font-size: 0.85rem; color: rgb(var(--c-accent)); border: 1.5px solid rgb(var(--c-accent) / 0.4); background: rgb(var(--c-accent) / 0.05); }

/* callouts */
.cf-good, .cf-warn, .cf-bad, .cf-info { border-radius: 0.8rem; padding: 0.8rem 1rem; font-size: 0.875rem; display: flex; gap: 0.6rem; border: 1px solid; align-items: flex-start; }
.cf-good { background: rgb(16 185 129 / 0.05); border-color: rgb(16 185 129 / 0.26); color: #0f766e; }
.cf-warn { background: rgb(234 179 8 / 0.06);  border-color: rgb(234 179 8 / 0.32); color: #92660b; }
.cf-bad  { background: rgb(239 68 68 / 0.045); border-color: rgb(239 68 68 / 0.26); color: #b1453a; }
.cf-info { background: rgb(var(--c-ink) / 0.025);  border-color: rgb(var(--c-ink) / 0.12); color: rgb(var(--c-ink)); }

/* screen mock */
.cf-screen { border: 1px solid rgb(var(--c-line) / 0.12); border-radius: 1rem; overflow: hidden; background: rgb(var(--c-card)); box-shadow: var(--shadow-md); }
.cf-screen-bar { height: 2.2rem; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.8rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); background: rgb(var(--c-surface)); }
.cf-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.22); }

/* phone frame (LIFF / mobile mock) */
.cf-phone { width: 100%; max-width: 320px; border: 1px solid rgb(var(--c-line) / 0.14); border-radius: 1.9rem; padding: 0.55rem; background: rgb(var(--c-card)); box-shadow: var(--shadow-md); }
.cf-phone-screen { border-radius: 1.4rem; overflow: hidden; border: 1px solid rgb(var(--c-line) / 0.08); background: rgb(var(--c-surface)); }

/* zone / status pills */
.cf-zone { font-size: 0.7rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 9999px; border: 1px solid; display: inline-flex; align-items: center; gap: 0.3rem; }
.cf-zone-danger  { color: #b1453a; border-color: rgb(239 68 68 / 0.38);  background: rgb(239 68 68 / 0.05); }
.cf-zone-caution { color: #92660b; border-color: rgb(234 179 8 / 0.42); background: rgb(234 179 8 / 0.06); }
.cf-zone-safe    { color: #0f766e; border-color: rgb(16 185 129 / 0.38); background: rgb(16 185 129 / 0.05); }
.cf-zone-free    { color: #1d4ed8; border-color: rgb(59 130 246 / 0.38); background: rgb(59 130 246 / 0.05); }
.cf-zone-mute    { color: rgb(var(--c-muted)); border-color: rgb(var(--c-line) / 0.18); background: rgb(var(--c-line) / 0.03); }

/* traffic light dot */
.cf-light { width: 0.7rem; height: 0.7rem; border-radius: 9999px; display: inline-block; }
.cf-light-green  { background: #10b981; box-shadow: 0 0 0 3px rgb(16 185 129 / 0.14); }
.cf-light-yellow { background: #eab308; box-shadow: 0 0 0 3px rgb(234 179 8 / 0.14); }
.cf-light-red    { background: #ef4444; box-shadow: 0 0 0 3px rgb(239 68 68 / 0.14); }

/* progress bar */
.cf-bar { height: 0.5rem; border-radius: 9999px; background: rgb(var(--c-line) / 0.08); overflow: hidden; }
.cf-bar > span { display: block; height: 100%; border-radius: 9999px; background: rgb(var(--c-accent)); }
.cf-bar-safe > span { background: #10b981; }
.cf-bar-warn > span { background: #eab308; }
.cf-bar-bad > span  { background: #ef4444; }

/* form inputs */
.cf-label { display:block; font-size:0.75rem; color:rgb(var(--c-muted)); margin-bottom:0.3rem; }
.cf-input { width:100%; border:1px solid rgb(var(--c-line) / 0.16); border-radius:0.7rem; padding:0.55rem 0.75rem; font-size:0.875rem; background:#fff; color:rgb(var(--c-ink)); transition:.15s; font-family:inherit; }
.cf-input::placeholder { color:rgb(var(--c-faint)); }
.cf-input:focus { outline:none; border-color:rgb(var(--c-accent)); box-shadow:0 0 0 3px rgb(var(--c-accent) / 0.12); }
select.cf-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6676' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.6rem center; padding-right:1.8rem; cursor:pointer; }
.cf-input-affix { position:relative; }
.cf-input-affix > .suffix { position:absolute; right:0.7rem; top:50%; transform:translateY(-50%); font-size:0.8rem; color:rgb(var(--c-faint)); pointer-events:none; }

/* code chip */
.cf-code { font-family:"Bai Jamjuree"; font-weight:700; letter-spacing:0.26em; font-size:1.5rem; color:rgb(var(--c-ink)); }

/* toast (theme.js เด้งให้เมื่อกดปุ่ม data-toast) */
.cf-toast { position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem); background:rgb(var(--c-ink)); color:#fff; font-size:0.85rem; padding:0.7rem 1.15rem; border-radius:0.8rem; display:flex; align-items:center; gap:0.5rem; opacity:0; pointer-events:none; transition:.25s; z-index:80; box-shadow:0 10px 30px rgb(15 23 42 / 0.22); }
.cf-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* data table */
.cf-table { width: 100%; border-collapse: collapse; font-size: 0.825rem; }
.cf-table th { text-align: left; font-weight: 500; color: rgb(var(--c-muted)); padding: 0.6rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cf-table td { padding: 0.7rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.07); color: rgb(var(--c-ink)); }
.cf-table tbody tr { transition: background .12s; }
.cf-table tbody tr:hover { background: rgb(var(--c-accent) / 0.025); }
.cf-table tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

/* avatar */
.cf-ava { width:2.25rem; height:2.25rem; border-radius:9999px; display:grid; place-items:center; font-family:"Bai Jamjuree"; font-weight:600; font-size:0.8rem; background:rgb(var(--c-accent) / 0.08); border:1px solid rgb(var(--c-accent) / 0.16); color:rgb(var(--c-accent)); }

/* divider list */
.cf-divide > * + * { border-top: 1px solid rgb(var(--c-line) / 0.08); }

/* ไม่มีอนิเมชันตอนโหลดหน้า — แอปจริงขึ้นเนื้อหาทันที ไม่ไล่เฟด */

/* ══════════ ชั้นหน้าตาแบบแอปจริง ══════════
 * ทับค่าเดิมให้แน่นขึ้น เหลี่ยมขึ้น เงาบางลง — ระบบที่นั่งใช้ทั้งวันไม่ฟุ้ง
 */
/* ลูกของ grid/flex ต้องยุบได้ ไม่งั้นตารางกว้างดันการ์ดจนล้นขอบแทนที่จะเลื่อนในตัวเอง */
.grid > *, .flex > * { min-width: 0; }
.cf-card, .cf-stat { border-radius: 0.6rem; box-shadow: none; }
.cf-card { transition: border-color .15s; }
a.cf-card:hover, .cf-card-hover:hover { box-shadow: var(--shadow-sm); }
a.cf-stat:hover { box-shadow: none; transform: none; border-color: rgb(var(--c-line) / 0.22); }
.cf-btn { border-radius: 0.5rem; box-shadow: none; padding: 0.45rem 0.85rem; }
.cf-btn:hover { box-shadow: none; background: rgb(var(--c-line) / 0.03); }
.cf-btn-primary:hover { background: rgb(var(--c-accent)); }
.cf-input { border-radius: 0.5rem; padding: 0.45rem 0.65rem; }
.cf-iconbox { border-radius: 0.5rem; }

/* แถบสรุปด้านบน — เตี้ยลง อ่านเป็นแถบเดียว ไม่ใช่การ์ดโฆษณา */
.cf-stat { padding: 0.7rem 0.85rem; }
.cf-stat-num { font-size: 1.35rem; margin-top: 0.2rem; }
.cf-stat-num small { font-size: 0.75rem; }
.cf-stat-foot { font-size: 0.7rem; margin-top: 0.15rem; }
.cf-stat::before { height: 2px; }

/* หัวหน้าจอ — แถบเดียวจบ ชื่อหน้า + ปุ่มลงมือ */
.cf-pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding-bottom: 0.85rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); }
.cf-pagehead h1 { font-family: "Bai Jamjuree"; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.25; }
.cf-crumb { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: rgb(var(--c-faint)); margin-bottom: 0.2rem; }
.cf-crumb a:hover { color: rgb(var(--c-accent)); }

/* แถบเครื่องมือเหนือตาราง — ค้นหา · ตัวกรอง · ส่งออก */
.cf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.85rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); background: rgb(var(--c-surface) / 0.6); }
.cf-toolbar .cf-input { width: auto; min-width: 8.5rem; }
.cf-toolbar .cf-search { position: relative; flex: 1 1 15rem; min-width: 11rem; }
.cf-toolbar .cf-search .cf-input { width: 100%; padding-left: 2rem; }
.cf-toolbar .cf-search > svg { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 0.95rem; height: 0.95rem; color: rgb(var(--c-faint)); pointer-events: none; }
.cf-toolbar .cf-spacer { flex: 1 1 auto; }

/* ท้ายตาราง — แสดง 1–20 จาก 612 + เปลี่ยนหน้า */
.cf-tablefoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.6rem 0.85rem; border-top: 1px solid rgb(var(--c-line) / 0.1); font-size: 0.78rem; color: rgb(var(--c-muted)); }
.cf-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem;
  padding: 0 0.45rem; border-radius: 0.4rem; border: 1px solid rgb(var(--c-line) / 0.14); background: rgb(var(--c-card));
  font-size: 0.78rem; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.cf-page-btn:hover { border-color: rgb(var(--c-ink) / 0.3); }
.cf-page-btn[aria-current="page"] { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }
.cf-page-btn[disabled] { opacity: .4; pointer-events: none; }

/* แถบที่โผล่เมื่อติ๊กเลือกหลายแถว */
.cf-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.85rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1);
  background: rgb(var(--c-accent) / 0.05); font-size: 0.8rem; color: rgb(var(--c-ink)); }
.cf-check { width: 0.95rem; height: 0.95rem; accent-color: rgb(var(--c-accent)); cursor: pointer; vertical-align: middle; }

/* ตาราง — หัวติดบน แถวเตี้ย กดทั้งแถวได้ */
.cf-table th { position: sticky; top: 0; z-index: 1; background: rgb(var(--c-card));
  text-transform: none; letter-spacing: 0; font-size: 0.74rem; padding: 0.5rem 0.7rem; white-space: nowrap; }
.cf-table td { padding: 0.5rem 0.7rem; }
.cf-table tbody tr.cf-row-link { cursor: pointer; }
.cf-table tbody tr.cf-row-link:hover { background: rgb(var(--c-accent) / 0.04); }
.cf-table td.cf-cell-open { text-align: right; white-space: nowrap; }
.cf-table td.cf-cell-open a { color: rgb(var(--c-faint)); }
.cf-table tbody tr:hover td.cf-cell-open a { color: rgb(var(--c-accent)); }

/* สวิตช์เปิด/ปิด — ใช้กับตารางกฎในหน้าตั้งค่า */
.cf-switch { position: relative; display: inline-block; width: 2.1rem; height: 1.15rem; flex: none; }
.cf-switch > input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.cf-switch > span { position: absolute; inset: 0; border-radius: 9999px; background: rgb(var(--c-line) / 0.18); transition: .15s; }
.cf-switch > span::after { content: ""; position: absolute; left: 0.12rem; top: 0.12rem; width: 0.91rem; height: 0.91rem;
  border-radius: 9999px; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgb(15 23 42 / 0.2); }
.cf-switch > input:checked + span { background: rgb(var(--c-accent)); }
.cf-switch > input:checked + span::after { transform: translateX(0.95rem); }

/* แท็บในหน้ารายละเอียด */
.cf-tabs { display: flex; gap: 0.15rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); overflow-x: auto; }
.cf-tab { padding: 0.5rem 0.85rem; font-size: 0.85rem; color: rgb(var(--c-muted)); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cf-tab:hover { color: rgb(var(--c-ink)); }
.cf-tab[aria-selected="true"] { color: rgb(var(--c-ink)); font-weight: 500; border-bottom-color: rgb(var(--c-accent)); }

/* ช่องข้อมูลในหน้ารายละเอียด — ป้ายบน ค่าล่าง */
.cf-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.9rem 1.2rem; }
.cf-field > dt { font-size: 0.72rem; color: rgb(var(--c-faint)); margin-bottom: 0.15rem; }
.cf-field > dd { font-size: 0.875rem; color: rgb(var(--c-ink)); }

/* เส้นเวลาของเอกสารใบนี้ — ไม่ใช่บล็อกสอนขั้นตอน */
.cf-track { position: relative; padding-left: 1.5rem; }
.cf-track > li { position: relative; padding-bottom: 0.9rem; }
.cf-track > li::before { content: ""; position: absolute; left: -1.5rem; top: 0.32rem; width: 0.6rem; height: 0.6rem;
  border-radius: 9999px; border: 1.5px solid rgb(var(--c-line) / 0.3); background: rgb(var(--c-card)); }
.cf-track > li::after { content: ""; position: absolute; left: -1.22rem; top: 1rem; bottom: -0.1rem; width: 1.5px; background: rgb(var(--c-line) / 0.12); }
.cf-track > li:last-child { padding-bottom: 0; }
.cf-track > li:last-child::after { display: none; }
.cf-track > li.done::before { border-color: rgb(var(--c-accent)); background: rgb(var(--c-accent)); }
.cf-track > li.now::before { border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.15); }