/* ═══════════════════════════════════════════════════════════
   OBS — ระบบวางบิล Outsource
   แนวทางออกแบบ: เมนูข้างขาว เนื้อหาเป็นการ์ดบนพื้นเทาอ่อน
   · เมนูข้างถาวรทางซ้าย แถบบนบางไว้เฉพาะสถานะระบบและผู้ใช้
   · ตัวเลขเงินเป็นเนื้อหาหลัก จึงได้ขนาดและน้ำหนักมากที่สุดในหน้า
   · เนื้อหาทั้งหมดใช้มุมเหลี่ยม เฉพาะเมนูข้างที่คงมุมโค้งไว้
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* หมึกและกระดาษ — เทาอมน้ำเงินเข้ากับสีแบรนด์ ไม่ใช่เทากลาง */
  --ink:    #14202F;
  /* พื้นของสิ่งที่ "ถูกเลือกอยู่" — เมนูที่เปิด ตัวกรองที่ใช้ เลขหน้าที่อยู่
     จงใจให้เบากว่าปุ่มที่ให้ลงมือทำ ปุ่มน้ำเงินจะได้เป็นของที่เด่นที่สุดในหน้า
     พื้นเทาอ่อนแบบนี้แยกจากของที่ไม่ถูกเลือกได้ด้วยสามอย่างพร้อมกัน คือ
     พื้นสีเทา ตัวหนังสือหนา และไอคอนสีน้ำเงิน — ถอดอย่างใดอย่างหนึ่งออก
     สถานะ "ถูกเลือก" จะอ่านไม่ออกทันที โดยเฉพาะไอคอนน้ำเงินที่เป็นตัวชี้หลัก */
  --sel:    #EDEFF3;
  --sel-bd: #DDE1E8;
  --ink2:   #41506A;
  --mut:    #77839A;
  --fnt:    #A2AEBF;

  --paper:  #FFFFFF;
  --page:   #FFFFFF;   /* ขาวล้วนตามที่ขอ — เดิมเป็นเทาอ่อนมาก (#F7F8FA) ดูเป็นกระดาษเก่า */
  --sunk:   #FAFBFC;
  --hov:    #F4F6F9;
  --rule:   #E6E9EF;   /* เส้นขอบบางมาก ใช้เท่าที่จำเป็น */
  --hair:   #EFF1F5;

  /* มุมโค้ง — เพิ่มความนุ่มขึ้นจากเดิมทั้งระบบ ให้ได้ฟีลลิ่งแบบแอปยุคใหม่ ไม่ใช่ซอฟต์แวร์องค์กรเดิม */
  --r-card: 18px;   /* การ์ด ตาราง กล่องข้อความ */
  --r-ctl:  12px;   /* ปุ่ม ช่องกรอก ตัวเลือก */
  --r-pill: 999px;  /* ชิป ป้ายสถานะ ปุ่มกรอง */
  --r-side: 12px;   /* รายการเมนูข้าง */

  /* ความสูงกลางของคอนโทรลในแถบเครื่องมือ — ช่องค้นหา ปุ่ม ตัวเลือก ต้องสูงเท่ากันหมด */
  --h-ctl: 40px;
  --h-ctl-sm: 34px;

  /* เมนูข้าง */
  --side-w:  264px;
  --top-h:   68px;

  /* คิวสำหรับ transition ที่นุ่มนวลขึ้น — ใช้แทน ease ธรรมดาในจุดที่มีการขยับ/ยก */
  --ease: cubic-bezier(.2,.8,.2,1);

  /* แบรนด์ iPassion — น้ำเงินสดใช้เป็นสีเน้น */
  /* น้ำเงินโลโก้ iPassion — สงวนไว้ให้ "ปุ่มที่ให้ลงมือทำ" อย่างเดียว
     ในหนึ่งหน้าจอควรมีของสีนี้น้อยที่สุด คนจะได้รู้ทันทีว่าต้องกดอะไร */
  --brand:   #0A78D4;
  /* น้ำเงินกรมท่า — ใช้กับปุ่มหลักและตัวเลขสำคัญ ให้โทนทางการแบบเอกสารองค์กร */
  --brand-h: #0868BD;
  --brand-d: #0A5490;
  /* ฟ้าอ่อนใช้ปิดท้ายไล่สีของปุ่ม/แถบหลัก — สดขึ้นแต่ยังอยู่ในตระกูลเดียวกับ --brand */
  --brand-l: #4FADEE;
  --tint:    #E9F3FC;
  --tint2:   #D3E7F8;
  --bline:   #A9D2F1;
  --sky:     #7CC4F5;
  /* ไล่สีของปุ่ม/แถบหลัก — ใช้ร่วมกันทุกจุดที่อยากให้ดูเด่นเป็นพิเศษ */
  --grad-brand: linear-gradient(135deg, var(--brand-l) 0%, var(--brand) 55%, var(--brand-h) 100%);

  /* สีบอกสถานะ — สดใสน่ารักโทนกลาง (ไม่เข้ม/หม่นแบบเดิมที่ดูแก่) ตามที่ขอ
     "สีเข้มมันดูแก่ ขอสีปานกลางน่ารักๆ สดใสๆ" — สลับจากโทนเข้ม (enterprise) มาเป็นโทนสดของแอปยุคใหม่ */
  --ok: #16A34A; --okb: #ECFDF3; --okl: #A6F4C5;
  --wn: #D97706; --wnb: #FFFAEB; --wnl: #FEDF89;
  --cr: #DC2626; --crb: #FEF3F2; --crl: #FECDCA;
  --lv: #EA580C; --lvb: #FFF6ED; --lvl: #F9DBAF;
  --pr: #7C3AED; --prb: #F4F3FF; --prl: #D9D6FE;
  --pk: #DB2777; --pkb: #FDF2FA; --pkl: #FCCEEE;
  --red: #D92D20;   /* ป้ายตัวเลขแจ้งเตือน */

  /* สีระบบประเภทวัน — ให้ตรงตามชุดสีที่ระบุมาเป๊ะๆ ล่าสุด (27 ส.ค. 69: "สไตล์ โอเคละ") ใช้ทั้งไอคอน
     ปฏิทิน, ป้าย "ประเภท" ในตารางรายละเอียด และตัวเลขในการ์ดสรุปประจำเดือน — จุดเดียวจบ สีเปลี่ยน
     ที่นี่ที่เดียวคือครบทุกที่ที่ใช้ */
  --cal-work: #7CC94D;      /* ทำงาน (จอคอมพิวเตอร์) */
  --cal-weekend: #94A3B8;   /* วันหยุดสุดสัปดาห์ */
  --cal-sick: #FF73C9;      /* ลาป่วย (หน้าป่วย) */
  --cal-personal: #D17EE8;  /* ลากิจ (บัตรประจำตัว) */
  --cal-vacation: #53C0FF;  /* ลาพักร้อน (เครื่องบิน) */
  --cal-holiday: #FF688C;   /* วันหยุดนักขัตฤกษ์ (ป๊อปคอนเฟตตี) */

  /* สี Onsite/WFH (28 ส.ค. 69) — เตรียมไว้ล่วงหน้าตามที่ขอ ยังไม่มีจุดไหนในระบบอ้างถึงตัวแปรนี้
     เพราะระบบยังไม่มีข้อมูลจริงว่าวันไหนเข้าออฟฟิศ/วันไหน WFH — รอมีข้อมูลจริงค่อยเอาไปใช้ */
  --loc-onsite: #4473FF;
  --loc-wfh: #FF751F;

  /* เงาแบบนุ่มหลายชั้น ให้การ์ดดูลอยแบบสะอาด ไม่ใช่ตีกรอบหนัก
     เพิ่ม sh3 (ยกตัวตอนโฮเวอร์) กับ sh-brand (แสงฟุ้งสีแบรนด์ให้ปุ่มหลัก/จุดสำคัญเด่นขึ้น) */
  --sh1: 0 1px 2px rgba(16,24,40,.04);
  --sh2: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  --sh3: 0 16px 32px -12px rgba(16,24,40,.16), 0 4px 10px -4px rgba(16,24,40,.06);
  --sh-brand: 0 8px 20px -6px rgba(10,120,212,.45), 0 2px 5px -1px rgba(10,120,212,.25);

  --wrap: 1420px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); }

/* พื้นหลังทั้งระบบ — แต่งเป็นแสงฟุ้งสีแบรนด์จางๆที่มุมบนแทนพื้นเทาเรียบๆ
   จางมากจนไม่รบกวนการอ่าน แต่ให้ความรู้สึกมีมิติ ไม่แบนเหมือนกระดาษถ่ายเอกสาร */
body {
  background:
    radial-gradient(1100px 560px at 14% -8%, rgba(10,120,212,.07), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(10,120,212,.05), transparent 55%),
    var(--page);
  background-attachment: fixed;
}

/* ซ่อนแถบเลื่อนไปเลย — เดิมโชว์แท่งบางๆ แต่ยังดูเหมือนชิ้นส่วน UI หลุดมาค้างอยู่มุมจอ
   ยังเลื่อนด้วยเมาส์/แทร็กแพด/คีย์บอร์ดได้ตามปกติ แค่ไม่โชว์แท่งให้เห็น */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  /* กลับไปใช้ฟอนต์ระบบเดิมทั้งหมดตามที่ขอ ("เปลี่ยนเป็นฟอนต์เดิมทั้งหมด") — เคยลองเปลี่ยนเป็นฟอนต์
     เว็บ (Prompt แล้วก็ Mitr) มาสองรอบแล้วไม่ถูกใจ เลิกใช้ฟอนต์เว็บไปเลย ไม่ต้องพึ่ง Google Fonts CDN
     อีกต่อไป — ละตินและตัวเลขจากฟอนต์ระบบ (SF Pro บน mac · Segoe UI บน Windows) ตัวไทยตกไปที่ฟอนต์ UI
     ของแต่ละ OS — Sukhumvit Set บน mac · Leelawadee UI บน Windows */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               "Sukhumvit Set", "Leelawadee UI", "Noto Sans Thai", "IBM Plex Sans Thai",
               "Sarabun", "Thonburi", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ซ่อนจากตาแต่ยังอยู่ในโครงหน้า — ใช้กับหัวเรื่องที่พูดซ้ำชื่อเมนูข้าง
   หน้าเว็บจึงยังมี h1 ให้โปรแกรมอ่านหน้าจอไล่ลำดับได้ และตอนจอแคบยังบอกได้ว่าอยู่หน้าไหน */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* จอแคบ เมนูข้างพับเป็นแถบเลื่อน รายการที่เลือกอาจหลุดจอ จึงให้หัวเรื่องกลับมาเห็น */
@media (max-width: 900px) {
  .sr-only {
    position: static; width: auto; height: auto; margin: 0 0 18px; overflow: visible;
    clip: auto; white-space: normal;
    font-size: 22px; font-weight: 600; letter-spacing: -.025em;
  }
}

/* ── ตัวเลข ─────────────────────────────────────────────── */
.n, .num { font-variant-numeric: tabular-nums; letter-spacing: -.005em; }

/* ป้ายกำกับเล็ก */
.ey {
  display: block; font-size: 12px; font-weight: 500;
  letter-spacing: 0; color: var(--mut);
}

.mono {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

svg.i {
  width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
svg.i.sm { width: 13px; height: 13px; }
svg.i.xs { width: 9px; height: 9px; stroke-width: 2; }
/* เส้นบาง+ขนาดเล็กลงตามที่ขอ (28 ส.ค. 69 "เส้นมันหนา ใหญ่เกินไป") — คลาสนี้ตอนนี้ใช้เฉพาะไอคอน
   ปฏิทิน/สรุปประจำเดือน/รายละเอียดวันที่เลือกเท่านั้น ปรับที่นี่จึงกระทบแค่จุดที่ขอ */
svg.i.lg { width: 22px; height: 22px; stroke-width: 1.7; }
svg.i.solid { stroke: none; fill: currentColor; }

/* ═══ โครงหน้า — เมนูข้างถาวร + เนื้อหาเลื่อนได้ ═══ */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }

/* เมนูข้างโทนสว่าง — ขาวนวลไล่สีจางๆ (ไม่ใช่ขาวเรียบแบนสนิท) ให้ยังดูมีมิติแบบพรีเมียม
   แต่ยังคุมโทนสว่างทั้งระบบตามที่ต้องการ ความเด่นของ "ถูกเลือกอยู่" มาจากปุ่มไล่สีเต็มแท่ง
   ด้านล่างแทน ไม่ต้องพึ่งพื้นเข้มมาช่วยคอนทราสต์ */
.side {
  width: var(--side-w); flex: none; position: sticky; top: var(--top-h); z-index: 40;
  height: calc(100vh - var(--top-h));
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%);
  border-right: 1px solid var(--rule);
  box-shadow: 6px 0 24px -18px rgba(16,24,40,.18);
  display: flex; flex-direction: column;
}
.frame { flex: 1; min-width: 0; }

/* ── รายการเมนู ── */
.snav {
  flex: 1; overflow-y: auto; padding: 16px 12px 20px;
  display: flex; flex-direction: column; gap: 3px;
}
.sgrp {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fnt); padding: 18px 14px 8px;
}

.mtab {
  display: flex; align-items: center; gap: 12px; font: inherit; width: 100%;
  font-size: 14px; font-weight: 600; background: none; cursor: pointer;
  padding: 11px 14px; color: var(--ink2); text-align: left;
  border: none; border-radius: var(--r-side); position: relative;
  transition: color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.mtab[hidden] { display: none; }
.mtab > span:first-of-type { flex: 1; }
.mtab:hover { color: var(--ink); background: var(--hov); }
.mtab:active { transform: scale(.985); }
.mtab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.mtab svg.i { color: var(--fnt); transition: color .13s; }
.mtab:hover svg.i { color: var(--mut); }
/* แท็บที่เปิดอยู่ — เติมพื้นเป็นไล่สีแบรนด์เต็มปุ่ม พร้อมแสงฟุ้ง คมชัดกว่าแถบสีเล็กๆแบบเดิมมาก
   เหมือนปุ่มที่ถูกกดอยู่จริงๆ ไม่ใช่แค่ป้ายบอกตำแหน่งจางๆ */
.mtab.on {
  color: #fff; font-weight: 600; background: var(--grad-brand);
  box-shadow: 0 8px 20px -6px rgba(10,120,212,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.mtab.on svg.i { color: #fff; }
.mtab .bdg {
  font-size: 10.5px; font-weight: 600; min-width: 19px; text-align: center;
  padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff;
  font-variant-numeric: tabular-nums; flex: none;
}
/* ป้าย 0 ไม่ควรแดง — ไม่มีงานค้างไม่ใช่เรื่องต้องเตือน */
.mtab .bdg.zero { background: var(--hair); color: var(--fnt); }
.mtab.on .bdg { box-shadow: 0 0 0 2px var(--brand); }
/* ป้าย "ตรวจ Manday" กับ "วางบิล & ร่างอีเมล" ไม่ใช่ตัวนับรวม แต่บอกว่ามีงานใหม่ค้างรอ
   (เข้ามารออนุมัติ/รอตรวจใหม่ล่าสุด) — ไม่มีงานค้างก็ไม่ต้องโชว์เลข 0 เลย ต่างจากตัวเลขสรุปอื่นๆ
   ในหน้าเนื้อหา (เช่นแท็บ "ยืนยันแล้ว/วางบิลแล้ว/ตีกลับ") ที่ยังโชว์ 0 ตามปกติ */
#queueBadge.zero, #cycleBadge.zero { display: none; }


/* เลขขั้นมุมไอคอนถูกตัดออกตามที่ขอ ("ลบเลข 1 2 3 ออก ให้เหลือแค่ไอคอน") — เหลือแค่ไอคอนเปล่าๆ
   ขยายใหญ่ขึ้น+หนาขึ้นแทน ให้เด่นชัดโดยไม่ต้องพึ่งตัวเลขกำกับ */
.mtab svg.i { width: 20px; height: 20px; stroke-width: 2.1; }

/* ── ท้ายเมนูข้าง ── */
/* ปุ่มและป้ายในเมนูข้างคงมุมโค้งไว้ให้เข้ากับรายการเมนู */
.sidetoggle {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 24px);
  margin: 0 12px 14px; padding: 10px 14px; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--mut); background: none; cursor: pointer;
  border: none; border-top: 1px solid var(--hair); border-radius: 0;
  padding-top: 16px;
}
.sidetoggle:hover { color: var(--ink); }
.sidetoggle svg.i { color: var(--fnt); flex: none; }
.sidetoggle:hover svg.i { color: var(--mut); }
.sidetoggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ═══ เมนูหุบ — เหลือแต่ไอคอน ═══
   --side-w คุมแค่ความกว้างเมนูข้าง (.side) เท่านั้น — บล็อกโลโก้บนแถบบน (.topbar .brand)
   ตั้งความกว้างของตัวเองแยกไว้ต่างหาก ไม่ผูกกับตัวแปรนี้ เพราะโลโก้ใหม่เป็นภาพแนวนอนยาว
   ย่อลงมาจะอ่านไม่ออก อยากให้เห็นเต็มเสมอไม่ว่าจะหุบเมนูหรือไม่ */
body.side-collapsed { --side-w: 72px; }

body.side-collapsed .mtab { justify-content: center; padding: 11px 0; gap: 0; }
body.side-collapsed .mtab > span { display: none; }
body.side-collapsed .mtab svg.i { width: 20px; height: 20px; }

/* ป้ายตัวเลขลอยมุมไอคอน — ตอนหุบไม่มีที่ให้วางเป็นแถวเดียวกับตัวหนังสือ */
body.side-collapsed .mtab .bdg {
  display: block; position: absolute; top: 2px; right: 10px;
  min-width: 16px; font-size: 9.5px; padding: 0 4px; line-height: 15px;
  border: 1.5px solid var(--paper);
}
/* display: block ด้านบน (ผ่าน id ที่ specificity สูงกว่า class ล้วนๆ) ทับ [hidden] ของเบราว์เซอร์
   ตอนหุบเมนู ต้องสั่งซ่อนเองไม่งั้นป้ายกระดิ่งค้างเลข 0 ตอนไม่มีเรื่องแจ้งเตือน */
#bellCount[hidden] { display: none; }
body.side-collapsed .mtab .bdg.zero { display: none; }

/* หัวข้อกลุ่มเหลือเป็นเส้นคั่น — ตัวหนังสือไม่มีที่พอและอ่านไม่ออกอยู่ดี */
body.side-collapsed .sgrp {
  font-size: 0; padding: 10px 0 9px; margin: 0 14px;
  border-top: 1px solid var(--hair);
}

body.side-collapsed .sidetoggle { justify-content: center; padding-left: 0; padding-right: 0; }
body.side-collapsed .sidetoggle > span { display: none; }
body.side-collapsed .sidetoggle svg.i { transform: rotate(180deg); }

/* ═══ แถบบน — บางและเงียบ ไว้บอกสถานะระบบเท่านั้น ═══ */
.topbar {
  height: var(--top-h); background: rgba(255,255,255,.86); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 var(--rule), 0 8px 24px -20px rgba(16,24,40,.2);
  display: flex; align-items: center; gap: 16px; padding: 0 28px 0 0;
}
.topbar .gap { flex: 1; }

/* บล็อกโลโก้ตั้งความกว้างคงที่ของตัวเอง (ไม่ผูกกับ --side-w) เห็นโลโก้เต็มเสมอไม่ว่าจะหุบ
   เมนูข้างหรือไม่ — แลกกับที่ตอนหุบเมนู เส้นขอบล่างของบล็อกนี้จะไม่ตรงกับเมนูข้างที่แคบกว่า */
.topbar .brand {
  width: 264px; flex: none; height: 100%;
  display: flex; align-items: center; padding: 0 20px;
}
.topbar .blogo { width: 170px; height: auto; display: block; }

.mast-date {
  font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* สลับภาษา ไทย/อังกฤษ (27 ส.ค. 69) — แทนที่ตำแหน่งวันที่เดิมบนแถบบน */
.langswitch {
  display: flex; align-items: center; background: var(--sunk); border: 1px solid var(--rule);
  border-radius: 999px; padding: 3px; gap: 2px; cursor: pointer; flex: none;
}
.langswitch .opt {
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--mut);
  transition: .15s;
}
.langswitch .opt.on { background: var(--brand); color: #fff; }

/* ชื่อผู้ใช้ต้องไม่ตัดบรรทัด ไม่งั้นแถบบนสูงขึ้นและตัวหนังสือโดนตัดที่ขอบขวา */
.who { position: relative; display: flex; align-items: center; padding-left: 16px; flex: none;
  border-left: 1px solid var(--hair); }
.who .wt b, .who .wt span { white-space: nowrap; }
.who .av {
  width: 32px; height: 32px; border-radius: 50%; background: var(--grad-brand);
  color: #fff; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; flex: none; border: none;
  box-shadow: 0 3px 8px -2px rgba(10,120,212,.5);
}
.who .wt { text-align: left; }
.who .wt b { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ink); }
.who .wt span { display: block; font-size: 10.5px; color: var(--mut); line-height: 1.2; }

/* ทั้งชิปเป็นปุ่มเดียว ไม่ใช่ไอคอนเล็กๆข้างๆ — เดิมมีแต่ไอคอนจางๆที่ไม่บอกว่ากดแล้วได้อะไร
   กดแล้วเปิดเมนูบัญชี (มีปุ่มออกจากระบบ) แทนที่จะเด้ง confirm() ของเบราว์เซอร์ทันที */
.who .whobtn {
  display: flex; align-items: center; gap: 10px; font: inherit; cursor: pointer;
  border: 1px solid transparent; background: none; color: inherit;
  padding: 4px 8px 4px 4px; border-radius: var(--r-ctl);
}
.who .whobtn:hover { background: var(--hov); border-color: var(--rule); }
.who .whobtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.who .whobtn .cv { color: var(--mut); transition: transform .15s ease; }
.who .whobtn[aria-expanded="true"] { background: var(--hov); border-color: var(--rule); }
.who .whobtn[aria-expanded="true"] .cv { transform: rotate(180deg); }

/* เมนูบัญชีใต้ชิป — โครงเดียวกับ .ctxpop (สลับบริษัท) ให้เปิดมาแล้วรู้สึกเป็นชุดเดียวกัน */
.whopop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 216px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--sh2); overflow: hidden; padding: 6px;
}
.whopop[hidden] { display: none; }
.wp-hd { padding: 10px 12px 12px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
.wp-hd b { display: block; font-size: 13px; color: var(--ink); }
.wp-hd span { display: block; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.wp-item {
  display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; border: none; background: none; color: var(--cr);
  padding: 9px 12px; border-radius: var(--r-ctl);
}
.wp-item:hover { background: var(--crb); }
.wp-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.wp-item:disabled { opacity: .6; cursor: default; }

/* ── หน้า login — สองคอลัมน์ ซ้ายภาพประกอบแบรนด์ ขวาฟอร์มจริง ───────── */
.login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--page);
}
/* [hidden] มี specificity สูงกว่า .login-screen เฉยๆ (มีทั้ง class และ attribute) จึงชนะเสมอ
   ถ้าไม่มีบรรทัดนี้ display:grid ข้างบนจะทับกฎ [hidden]{display:none} ของเบราว์เซอร์เอง
   เพราะ CSS จาก author เหนือกว่า user-agent default ไม่ว่า specificity จะเท่ากันหรือไม่ */
.login-screen[hidden] { display: none; }

/* ── คอลัมน์ซ้าย — รูปจริงที่ผู้ใช้สร้างไว้ (public/img/login-emblem.png, 1 ก.ย. 69 เปลี่ยนจาก
   login-orb.png ตามที่ขอ) เต็มคอลัมน์ ไม่ใช่กราฟิกที่วาดเอง — cover ให้เต็มพื้นที่เสมอไม่ว่าจอจะสูง/เตี้ยแค่ไหน
   center เพราะตราสัญลักษณ์อยู่กลางภาพพอดี */
.login-art {
  background: url('/img/login-emblem.png') center / cover no-repeat, #0A5FB0;
}

/* ── คอลัมน์ขวา — ฟอร์มจริง วางตรงกลางบนพื้นขาวเรียบ ไม่ต้องมีการ์ดลอยซ้อนอีกชั้น ── */
.login-panel {
  display: grid; place-items: center; background: var(--paper); padding: 24px;
}
.login-card[hidden] { display: none; }
.login-card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 14px;
  animation: login-pop .35s var(--ease);
}
@keyframes login-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }
.login-card h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.login-card .lc-sub { font-size: 13px; color: var(--mut); margin: -6px 0 6px; line-height: 1.5; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
  font-weight: 600; color: var(--ink2); }
.login-card input {
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); height: 46px; padding: 0 14px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.login-card input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10,120,212,.14);
}
.login-card .btn.pri { justify-content: center; margin-top: 4px; height: 46px; font-size: 14.5px; }
.login-card .lc-err {
  font-size: 12.5px; color: var(--cr); background: var(--crb); border: 1px solid var(--crl);
  border-radius: var(--r-ctl); padding: 8px 11px;
}
.login-card .lc-info {
  font-size: 12.5px; color: var(--brand-d); background: var(--tint); border: 1px solid var(--bline);
  border-radius: var(--r-ctl); padding: 8px 11px;
}

/* ── รหัสผ่านที่มีปุ่มดวงตาโชว์/ซ่อนต่อท้าย — ใช้ทุกช่องกรอกรหัสผ่านในระบบ (31 ส.ค. 69 ตามที่ขอ) ── */
.pwrap { position: relative; display: flex; }
.pwrap input { flex: 1; padding-right: 42px; }
.pwrap .eye {
  position: absolute; top: 0; right: 0; height: 100%; width: 40px;
  display: grid; place-items: center; background: none; border: none; cursor: pointer;
  color: var(--fnt); border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
}
.pwrap .eye:hover { color: var(--mut); }
.pwrap .eye:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ── แถวจดจำฉัน + ลืมรหัสผ่าน บนฟอร์ม login ── */
.lc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -4px; }
.login-card .lc-chk { display: flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.lc-chk input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.lc-link {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand); background: none;
  border: none; padding: 0; cursor: pointer; text-decoration: none;
}
.lc-link:hover { text-decoration: underline; }
.lc-sw { font-size: 12.5px; color: var(--mut); text-align: center; margin: 2px 0 0; }
.lc-sw .lc-link { margin-left: 4px; }

/* ── ปุ่ม "เข้าสู่ระบบ/ลงทะเบียนด้วย Google" — ซ่อนไว้ก่อนจนกว่า /api/auth/config จะบอกว่าเปิดใช้แล้ว ── */
.btn.google { justify-content: center; height: 46px; font-size: 13.5px; }

/* จอแคบ — ตัดภาพประกอบซ้ายออกไปเลย เหลือแต่ฟอร์มเต็มจอ ดีกว่าบีบสองคอลัมน์จนอ่านไม่ออก */
@media (max-width: 820px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-art { display: none; }
}

/* พื้นหลังขาว+เส้นกรอบสี (ไม่ใช่พื้นทึบ) แล้วใช้สวิต on/off แทนจุดกลมเดิม บอกสถานะเชื่อมต่อ
   FlowAccount ชัดเจนกว่า: live = สวิตติด (สีเขียว เลื่อนขวา), sandbox/dry-run = สวิตดับ (เทา เลื่อนซ้าย) */
.env[hidden] { display: none; }
.env {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12px;
  font-weight: 600; padding: 7px 14px 7px 8px; border-radius: var(--r-pill);
  letter-spacing: .01em;
  /* เดิมเป็น <span> อ่านอย่างเดียว ตอนนี้เป็น <button> กดเปิด/ปิดการเชื่อมต่อได้ (28 ส.ค. 69) —
     เดิมแค่กรอบเปล่าพื้นขาว ดูจืดกว่าป้ายสถานะอื่นในระบบ (.tg) เปลี่ยนเป็นพื้นสีอ่อนตามสถานะเข้าชุดกัน
     (4 ก.ย. 69 ตามที่ขอ "ทำให้สวยกว่านี้") รีเซ็ตสไตล์ default ของปุ่มที่ไม่ได้มาจาก .env เอง */
  font-family: inherit; cursor: pointer; transition: box-shadow .15s var(--ease), transform .15s var(--ease);
}
.env:hover:not(:disabled) { box-shadow: var(--sh1); transform: translateY(-1px); }
.env:disabled { cursor: default; opacity: .55; }
.env:disabled:hover { transform: none; }
.env .sw {
  position: relative; width: 30px; height: 17px; border-radius: 999px; flex: none;
  transition: background .15s var(--ease);
  box-shadow: inset 0 1px 2px rgba(16,24,40,.12);
}
.env .sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; transition: left .15s var(--ease);
  box-shadow: 0 1px 3px rgba(16,24,40,.3);
}
.env.dry { color: var(--wn); background: var(--wnb); border: 1.5px solid var(--wnl); }
.env.dry .sw { background: rgba(20,32,47,.14); }
.env.live { color: var(--ok); background: var(--okb); border: 1.5px solid var(--okl); }
.env.live .sw { background: var(--ok); }
.env.live .sw::after { left: 15px; }

/* ── หน้า ───────────────────────────────────────────────── */
.page { padding: 32px 36px 100px; max-width: var(--wrap); }

/* ── มือถือ / จอแคบ — เมนูข้างพับเป็นแถบบน ── */
@media (max-width: 900px) {
  .topbar { padding: 0 16px 0 0; }
  .topbar .brand { width: auto; border-right: none; padding: 0 14px; }
  /* .shell ปกติใช้ align-items:flex-start (ตั้งใจให้เมนูข้างสูงเท่าเนื้อหาจริง ไม่ใช่เต็มจอ
     ตอนเรียงเป็นแถว) แต่พอสลับเป็น flex-direction:column ตอนจอแคบ ค่านี้กลายเป็นแกนขวาง
     ทำให้ .frame หุบตามความกว้าง "เนื้อหา" แทนความกว้างจอ — การ์ด/ตารางที่กว้างสุดในหน้า
     (เช่นตารางที่มี min-width ของมันเอง) จะดันทั้งหน้าให้กว้างเกินจอ เกิดสกรอลแนวนอนทั้งเว็บ
     ต้องบังคับ stretch เฉพาะโหมดจอแคบให้ .side/.frame เต็มความกว้างเสมอ */
  .shell { flex-direction: column; align-items: stretch; }
  .side {
    width: 100%; height: auto; position: static; border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .snav { flex-direction: row; overflow-x: auto; padding: 10px 12px; }
  .sgrp { display: none; }
  .mtab { width: auto; white-space: nowrap; }

  /* จอแคบเมนูกลายเป็นแถบเลื่อนแนวนอนอยู่แล้ว การหุบจึงไม่มีความหมาย
     ต้องล้างสถานะหุบด้วย ไม่งั้นตัวหนังสือในเมนูหายทั้งแถบ */
  .sidetoggle { display: none; }
  body.side-collapsed { --side-w: 100%; }
  body.side-collapsed .mtab > span { display: inline; }
  body.side-collapsed .mtab { justify-content: flex-start; padding: 11px 14px; gap: 12px; }
  body.side-collapsed .mtab .bdg { position: static; border: none; }
}

/* หัวหน้า .phd / .greet กำหนดรวมกันไว้ที่หัวข้อ "หัวหน้าแบบเอกสารทางการ" ด้านล่าง */

/* ── ปุ่ม ───────────────────────────────────────────────── */
.btn[hidden] { display: none; }
.btn {
  font: inherit; font-size: 13.5px; font-weight: 600; border-radius: var(--r-ctl);
  min-height: var(--h-ctl); padding: 0 20px; cursor: pointer; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink2); text-decoration: none;
  box-shadow: var(--sh1);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
    box-shadow .16s var(--ease), transform .16s var(--ease), color .16s var(--ease);
}
.btn:hover:not(:disabled) {
  background: var(--hov); border-color: #D2D7E0; color: var(--ink);
  box-shadow: var(--sh2); transform: translateY(-1px);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--sh1); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* ปุ่มหลัก — ไล่สีแบรนด์ 3 จุดสี + แสงฟุ้ง + ประกายบนขอบด้านในบนๆ (เหมือนผิวเคลือบเงา)
   ให้เด่นเป็นจุดสนใจแรกของหน้าอย่างชัดเจน ตามที่ตั้งใจไว้แต่แรก
   (ทั้งหน้าควรมีปุ่มสีนี้น้อยที่สุด คนจะได้รู้ทันทีว่าต้องกดอะไร) */
.btn.pri {
  background: var(--grad-brand); border: none; color: #fff; font-weight: 600;
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.08);
}
.btn.pri:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand-l) 0%, var(--brand-h) 55%, var(--brand-d) 100%);
  color: #fff;
  box-shadow: 0 14px 30px -8px rgba(10,120,212,.6), 0 3px 8px -1px rgba(10,120,212,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateY(-2px);
}
.btn.pri:active:not(:disabled) { transform: translateY(0); box-shadow: var(--sh-brand); }
.btn.dgr { color: var(--cr); border-color: var(--crl); }
.btn.dgr:hover:not(:disabled) { background: var(--crb); border-color: var(--cr); }
.btn.sm { min-height: var(--h-ctl-sm); padding: 0 13px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover:not(:disabled) { transform: none; } }

/* ── การ์ด ──────────────────────────────────────────────── */
.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--sh1); margin-bottom: 26px; overflow: hidden;
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card > .hd {
  display: flex; align-items: baseline; gap: 14px; padding: 20px 24px 18px;
  border-bottom: 1px solid var(--hair); flex-wrap: wrap;
}
.card > .hd h3 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.015em;
  text-transform: none; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
/* จุดไล่สีแบรนด์เล็กๆหน้าหัวข้อการ์ด — ให้หัวข้อทุกการ์ดมีจุดสะดุดตาเดียวกัน อ่านเป็นชุดเดียวกันทั้งระบบ */
.card > .hd h3::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--grad-brand); box-shadow: 0 0 0 3px var(--tint);
}
.card > .hd .rt { margin-left: auto; font-size: 12px; color: var(--mut); }
/* กลุ่มปุ่ม เปิด/ปิดสัญญา + ไอคอนแก้ไข บนหัวการ์ดบริษัท — ดันไปสุดขวาแทนที่จะติดกับชื่อหัวข้อ */
.card > .hd .rowacts { margin-left: auto; }
.card > .bd { padding: 26px 24px; }
.card > .bd.flush { padding: 0; }

/* แถบปุ่มท้ายการ์ด (เช่น "บันทึกเข้าระบบ") — จัดกลาง ไม่ใช่ปล่อยชิดซ้ายตามค่าเริ่มต้นของ block
   ใส่ gap ไว้เผื่อมีมากกว่าหนึ่งปุ่ม (เช่น ยกเลิก/บันทึก) ไม่งั้นปุ่มจะเบียดกันแน่นจนดูอึดอัด */
.card > .ft {
  display: flex; justify-content: center; align-items: center; gap: 14px; padding: 18px 24px;
  border-top: 1px solid var(--hair);
}
/* แถบปุ่มยืนยันผลที่ AI อ่านได้ — แยกปุ่มรองกับปุ่มหลักให้ชัด ไม่แข่งกันแบบเดิม */
.card > .ft.review-ft {
  justify-content: space-between; background: var(--sunk); gap: 12px; flex-wrap: wrap;
}
.btn.ghost {
  border-color: transparent; background: transparent; box-shadow: none; color: var(--mut);
}
.btn.ghost:hover:not(:disabled) { background: var(--hov); color: var(--cr); border-color: transparent; }
.btn.lg { height: 46px; padding: 0 24px; font-size: 14.5px; }

/* ═══ ตัวกรองแบบ pill + ช่องค้นหา ═══ */
.filterbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--hair);
}
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pbtn {
  font: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; height: var(--h-ctl); padding: 0 16px;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink2);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.pbtn:hover { background: var(--hov); border-color: var(--fnt); }
.pbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pbtn.on {
  background: var(--grad-brand); border-color: var(--brand-h); color: #fff;
  box-shadow: 0 3px 10px -3px rgba(10,120,212,.5);
}
.pbtn .c {
  font-variant-numeric: tabular-nums; margin-left: 7px; font-weight: 600;
  font-size: 12px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--hov); color: var(--mut);
}
.pbtn.on .c { background: rgba(255,255,255,.25); color: #fff; }

.filterbar .gap { flex: 1; min-width: 8px; }

.searchbox {
  display: flex; align-items: center; gap: 9px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-ctl);
  height: var(--h-ctl); padding: 0 16px;
  width: 320px; max-width: 100%; transition: border-color .13s, box-shadow .13s;
}
.searchbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10,120,212,.12); }
.searchbox svg.i { color: var(--fnt); }
.searchbox input {
  border: none; background: none; font: inherit; font-size: 14px;
  color: var(--ink); width: 100%; outline: none;
}
.searchbox input::placeholder { color: var(--fnt); }

.iconbtn {
  width: var(--h-ctl); height: var(--h-ctl); border-radius: var(--r-ctl); flex: none;
  border: 1px solid var(--rule); background: var(--paper);
  display: grid; place-items: center; cursor: pointer; color: var(--ink2);
}
.iconbtn:hover { background: var(--sunk); border-color: var(--fnt); }
.iconbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.iconbtn.on { background: var(--tint); border-color: var(--bline); color: var(--brand-d); }

/* ═══ ตัวเลือกเรียงลำดับ (FILTER: … BY: …) ═══ */
.selectwrap { display: inline-flex; align-items: center; gap: 9px; }
.selectwrap > .lb3 {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--fnt);
}
.selectchip {
  position: relative; display: inline-flex; align-items: center;
  border: 1px solid var(--rule); background: var(--paper); border-radius: var(--r-ctl);
  height: var(--h-ctl);
}
.selectchip:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10,120,212,.12); }
.selectchip select {
  appearance: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--brand-d); background: none; border: none; outline: none;
  height: 100%; padding: 0 34px 0 16px; cursor: pointer; border-radius: var(--r-ctl);
}
.selectchip svg.i {
  position: absolute; right: 12px; pointer-events: none; color: var(--brand);
  width: 14px; height: 14px;
}

/* ═══ ตัวเลือกบริษัท/สัญญาที่กำลังดำเนินการอยู่ (แถบบน) ═══
   ปุ่ม + แผงลอย (ไม่ใช่ <select> ธรรมดา) เพราะรายการของ <select> เป็นเมนูเบราว์เซอร์เอง
   แต่งหน้าตาไม่ได้เลย ส่วนอันนี้เปลี่ยนแล้วกระทบข้อมูลทั้งระบบ ควรเด่นกว่าตัวกรองหน้าเดียวทั่วไป
   โครงเดียวกับเมนูบัญชี (.whobtn/.whopop) ให้กดแล้วรู้สึกเป็นชุดเดียวกันทั้งแอป */
.ctxwrap { position: relative; }
.ctxbtn {
  display: flex; align-items: center; gap: 9px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; height: var(--h-ctl); padding: 0 14px; color: var(--brand-d);
  border: 1.5px solid var(--bline); background: var(--paper); border-radius: var(--r-ctl);
  min-width: 200px; max-width: 280px; transition: background .13s var(--ease), border-color .13s var(--ease);
}
.ctxbtn svg.i:first-child { color: var(--brand); flex: none; }
.ctxbtn .ctx-label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctxbtn .cv { color: var(--brand); flex: none; transition: transform .15s var(--ease); }
.ctxbtn:hover:not(:disabled) { background: var(--tint2); border-color: var(--brand); }
.ctxbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ctxbtn[aria-expanded="true"] .cv { transform: rotate(180deg); }
.ctxbtn:disabled { cursor: default; opacity: .75; }

.ctxpop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; width: 340px; max-width: calc(100vw - 32px);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--sh2); overflow: hidden; padding: 6px; max-height: 60vh; overflow-y: auto;
}
.ctxpop[hidden] { display: none; }
.ctx-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; font: inherit;
  text-align: left; cursor: pointer; border: none; background: none;
  padding: 10px 11px; border-radius: var(--r-ctl);
}
.ctx-item:hover:not(:disabled) { background: var(--hov); }
.ctx-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ctx-item:disabled { cursor: default; opacity: .5; }
.ctx-item + .ctx-item { margin-top: 2px; }
.ctx-item .chk {
  width: 18px; height: 18px; flex: none; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; color: #fff;
}
.ctx-item.on .chk { background: var(--grad-brand); box-shadow: 0 2px 6px -1px rgba(10,120,212,.5); }
.ctx-item .chk svg { width: 11px; height: 11px; }
.ctx-item .tx { min-width: 0; flex: 1; }
.ctx-item .tx b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ctx-item .tx span { display: block; font-size: 11.5px; color: var(--mut); margin-top: 1px; line-height: 1.35; }
.ctx-item.on .tx b { color: var(--brand-d); }
.ctx-item .tg { margin-top: 2px; flex: none; }

/* ═══ ตารางที่กางรายละเอียดในแถว ═══ */
.qtable { width: 100%; border-collapse: collapse; }
.qtable thead th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0; color: var(--fnt); padding: 12px 18px;
  border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--paper);
}
.qrow > td {
  padding: 16px 18px; border-bottom: 1px solid var(--hair);
  font-size: 13.5px; vertical-align: middle; background: var(--paper);
}
.qrow { cursor: pointer; transition: background .1s; }
.qrow:hover > td { background: var(--sunk); }
/* แถวที่กางอยู่ — ยกขึ้นมาเหนือพื้น พร้อมแถบสีซ้าย */
.qrow.open > td {
  background: var(--paper); border-bottom: none;
  box-shadow: 0 -1px 0 var(--rule) inset;
}
.qrow.open > td:first-child { box-shadow: 3px 0 0 var(--brand) inset, 0 -1px 0 var(--rule) inset; }
.qrow.flagged > td:first-child { box-shadow: 3px 0 0 var(--cr) inset; }

.qrow .caret { color: var(--fnt); transition: transform .18s; display: inline-flex; }
.qrow.open .caret { transform: rotate(90deg); color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .qrow .caret { transition: none; } }

.qacts { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.qacts .btn { padding: 7px 15px; font-size: 12.5px; }
.qacts .btn.pri { padding: 7px 19px; }

/* แถวปุ่มไอคอนแก้ไข/ลบท้ายตาราง (พนักงาน, ผู้ใช้ ฯลฯ) */
.rowacts { display: flex; align-items: center; gap: 6px; }

/* แผงรายละเอียดที่กางออก */
.exp > td { padding: 0; border-bottom: 1px solid var(--rule); background: var(--sunk); }
.exp-in { padding: 22px 24px 24px; display: grid; gap: 20px; }

.parties { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 26px; align-items: start; }
@media (max-width: 1080px) { .parties { grid-template-columns: 1fr; } }
.party .ptag {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0; padding: 3px 10px; margin-bottom: 11px;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink2);
}
.party .ptag.sell { background: var(--tint); border-color: var(--bline); color: var(--brand-d); }
.party .ptag.buy { background: var(--okb); border-color: var(--okl); color: var(--ok); }
.party dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px;
  margin: 0; font-size: 12px;
}
.party dt { color: var(--mut); }
.party dd { margin: 0; font-weight: 600; color: var(--ink2); }

/* ตัวติดตามขั้นตอนแนวนอน */
.track { padding-top: 4px; }
.track .row2 { display: flex; align-items: center; }
.track .node {
  width: 22px; height: 22px; flex: none; display: grid;
  place-items: center; background: var(--paper);
  border: 2px solid var(--rule); color: var(--fnt); font-size: 10px; font-weight: 600;
}
.track .node.dn { background: var(--brand); border-color: var(--brand); color: #fff; }
.track .node.cu {
  background: var(--paper); border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 3px var(--tint);
}
.track .seg2 { flex: 1; height: 2px; background: var(--rule); }
.track .seg2.dn { background: var(--brand); }
.track .labels { display: flex; margin-top: 9px; }
.track .labels span {
  flex: 1; font-size: 10.5px; color: var(--mut); text-align: center; line-height: 1.35;
}
.track .labels span:first-child { text-align: left; }
.track .labels span:last-child { text-align: right; }
.track .labels span.on { color: var(--brand-d); font-weight: 600; }

/* บรรทัดรายการในแผงที่กาง */
.lines { background: var(--paper); border: 1px solid var(--rule); overflow: hidden; }
.lines .lh {
  display: grid; grid-template-columns: 1fr 96px 110px 120px; gap: 14px;
  padding: 11px 18px; border-bottom: 1px solid var(--hair);
  font-size: 10px; font-weight: 600; letter-spacing: 0; color: var(--fnt);
}
.lines .lr {
  display: grid; grid-template-columns: 1fr 96px 110px 120px; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--hair);
  font-size: 13px; align-items: center;
}
.lines .lr:last-of-type { border-bottom: none; }
.lines .lr .t1 { font-weight: 600; }
.lines .lr .t2 { display: block; font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.lines .lr .v1, .lines .lr .v2, .lines .lr .v3 {
  font-variant-numeric: tabular-nums; text-align: right;
}
.lines .lr .v3 { font-weight: 600; }
.lines .lr.neg .v3 { color: var(--cr); }
.lines .lfoot {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 16px;
  padding: 16px 18px; background: var(--sunk); border-top: 2px solid var(--rule);
}
.lines .lfoot .fl { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.lines .lfoot .fv {
  font-size: 22px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--brand-d);
}

.exp-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 4px;
}
.exp-foot .gap { flex: 1; }
.linkbtn {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand);
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  display: inline-flex; align-items: center; gap: 6px;
}
.linkbtn:hover { text-decoration: underline; }

/* ═══ กริดการ์ดรายการ ═══ */
.cardgrid {
  display: grid; gap: 20px; padding: 22px;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.rec {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.rec:hover { box-shadow: var(--sh3); border-color: #D2D7E0; transform: translateY(-2px); }
.rec.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.rec.flag { border-color: var(--crl); background: #FFFCFB; }
@media (prefers-reduced-motion: reduce) { .rec { transition: none; } .rec:hover { transform: none; } }

.rec-hd { display: flex; align-items: flex-start; gap: 12px; }
.rec-hd .ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  background: var(--grad-brand); color: #fff; border: none; box-shadow: 0 3px 8px -2px rgba(10,120,212,.5);
}
.rec-hd .ava.g { background: #1E9E72; color: #fff; }
.rec-hd .ava.w { background: var(--wn); color: #fff; }
.rec-hd .ava.c { background: var(--cr); color: #fff; }
.rec-hd .nm2 { font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.rec-hd .mt2 { display: block; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.rec-hd .rt2 { margin-left: auto; text-align: right; flex: none; }

.rec-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.rec-tags .tag {
  font-size: 11.5px; font-weight: 500; padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--hov); color: var(--ink2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rec-tags .tag.lv { background: var(--lvb); color: var(--lv); }
.rec-tags .tag.ok { background: var(--okb); color: var(--ok); }
.rec-when { font-size: 12px; color: var(--fnt); }

/* ตารางย่อยในการ์ด — ตีเส้นเป็นตารางจริง หัวตารางพื้นฟ้าอ่อน */
.minitab {
  border: 1px solid var(--hair); border-radius: var(--r-ctl); overflow: hidden;
}
.minitab .mh2 {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 8px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0;
  color: var(--mut); background: var(--sunk); border-bottom: 1px solid var(--hair);
}
.minitab .mh2 .q, .minitab .mh2 .p { text-align: right; }
.minitab .mr {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 9px 12px; font-size: 12.5px; align-items: baseline;
  border-bottom: 1px solid var(--hair);
}
.minitab .mr:last-child { border-bottom: none; }
.minitab .mr .q, .minitab .mr .p {
  font-variant-numeric: tabular-nums; text-align: right; min-width: 54px;
}
.minitab .mr .p { font-weight: 600; min-width: 84px; }
.minitab .mr.neg { background: var(--crb); }
.minitab .mr.neg .p, .minitab .mr.neg .lb2 { color: var(--cr); }
.minitab .mr .lb2 { color: var(--ink2); }
.minitab .mr .lb2 small { display: block; font-size: 11px; color: var(--mut); }

.rec-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 4px;
}
.rec-total .tl { font-size: 12px; font-weight: 600; color: var(--mut); }
.rec-total .tv {
  font-size: 21px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.rec-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.rec-acts .btn { justify-content: center; }
.rec-acts.one { grid-template-columns: 1fr; }

/* ═══ เลขหน้า ═══ */
.pager {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-top: 1px solid var(--hair); flex-wrap: wrap;
}
.pager .info { font-size: 12.5px; color: var(--mut); }
.pager .gap { flex: 1; }
.pgn { display: flex; gap: 6px; }
.pgn button {
  font: inherit; font-size: 12.5px; min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: var(--r-ctl); border: 1px solid var(--rule); background: var(--paper);
  cursor: pointer; color: var(--ink2); font-variant-numeric: tabular-nums;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.pgn button:hover:not(:disabled) { background: var(--hov); border-color: var(--fnt); }
.pgn button.on {
  background: var(--grad-brand); border-color: var(--brand-h); color: #fff; font-weight: 600;
  box-shadow: 0 3px 10px -3px rgba(10,120,212,.5);
}
.pgn button:disabled { opacity: .4; cursor: default; }

/* ═══ ซ้ายรายการ ขวารายละเอียดค้างไว้ ═══ */
.split2 { display: grid; grid-template-columns: 1fr 1.22fr; gap: 20px; align-items: start; }
.split2 > * { min-width: 0; }   /* ไม่ใส่บรรทัดนี้ บล็อก JSON จะดันคอลัมน์ขวาให้แคบ */
@media (max-width: 1180px) { .split2 { grid-template-columns: 1fr; } }
.split2 .sticky {
  position: sticky; top: calc(var(--top-h) + 20px);
}
@media (max-width: 1180px) { .split2 .sticky { position: static; } }
.split2 .card { margin-bottom: 18px; }
.split2 .card:last-child { margin-bottom: 0; }

/* ── แถบเครื่องมือ ───────────────────────────────────────── */
.tbar {
  display: flex; align-items: center; gap: 10px; padding: 13px 22px;
  border-bottom: 1px solid var(--hair); flex-wrap: wrap;
}
.seg {
  display: flex; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-ctl); overflow: hidden; height: var(--h-ctl);
}
.seg button {
  font: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; padding: 0 16px;
  border: none; background: none; cursor: pointer; color: var(--ink2);
  border-right: 1px solid var(--hair); white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease);
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--sunk); }
.seg button.on { background: var(--tint); color: var(--brand-d); }
.seg button .c {
  font-variant-numeric: tabular-nums; margin-left: 7px; font-weight: 600;
  font-size: 12px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--hov); color: var(--mut);
}
.seg button.on .c { background: var(--tint2); color: var(--brand-d); }
.tbar .gap { flex: 1; }
.tbar .meta { font-size: 12px; color: var(--mut); }

/* ── ตาราง ──────────────────────────────────────────────── */
.tw { overflow-x: auto; }
tr.clk { cursor: pointer; }
tr.clk:hover { background: var(--hov); }
table { border-collapse: collapse; width: 100%; min-width: 820px; }
thead th {
  text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  color: var(--mut); padding: 14px 20px;
  background: linear-gradient(180deg, var(--sunk) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
tbody td {
  padding: 16px 20px; border-bottom: 1px solid var(--hair);
  font-size: 14px; vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.rw { cursor: pointer; transition: background .14s var(--ease); }
tbody tr.rw:hover { background: var(--hov); }
tfoot td {
  padding: 14px 20px; font-size: 13.5px; color: var(--mut);
  background: var(--sunk); border-top: 1px solid var(--rule);
}
.r { text-align: right; }
/* คอลัมน์ตัวเลขเงิน — ให้น้ำหนักมากกว่าข้อความ */
td.r.n, .amt {
  font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 14px; letter-spacing: -.01em;
}
.sub { display: block; color: var(--mut); font-size: 11.5px; margin-top: 2px; font-weight: 400; }
td .nm { font-weight: 600; }
.docid {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--brand-d); letter-spacing: -.005em;
}

/* ── สถานะ ── ขอบสีบางๆ + เงาจางๆ ให้ป้ายดูมีน้ำหนักเป็นชิ้นของจริง ไม่ใช่แค่พื้นสีแบนๆ ── */
.st {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px;
  font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill);
  white-space: nowrap; border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}
.st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.st.ok { color: var(--ok); background: var(--okb); border-color: var(--okl); }
.st.wn { color: var(--wn); background: var(--wnb); border-color: var(--wnl); }
.st.cr { color: var(--cr); background: var(--crb); border-color: var(--crl); }
.st.pr { color: var(--pr); background: var(--prb); border-color: var(--prl); }
.st.mu { color: var(--mut); background: var(--hov); border-color: var(--rule); }

/* ── กล่องสรุปตัวเลข 4 ช่อง (เทียบ HRDD) ── */
/* กล่องสรุปตัวเลข — เดิมไอคอน+ป้ายอยู่แถวบนแล้วตัวเลขใหญ่อยู่ล่าง ทำให้กล่องดูสูงยาว
   ("ไม่ใช่ดูยาว ให้ออกด้านข้างด้วย") เปลี่ยนเป็นไอคอนอยู่ข้าง (ซ้าย) + ตัวเลข/ป้ายซ้อนกันด้านขวา
   แทน กล่องจึงเตี้ยลงและดูสมมาตรกว่าเดิม (ใช้ .sti/.stx คู่ใหม่ — การ์ดเทียบ HRDD ที่ใช้แค่ .stv/.stl
   ตัวเปล่าไม่มีไอคอนไม่กระทบ) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-tile {
  border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 14px 16px;
  background: var(--sunk); display: flex; align-items: center; gap: 12px;
}
.stat-tile .sti { flex: none; display: flex; align-items: center; justify-content: center; }
.stat-tile .stx { display: flex; flex-direction: column; min-width: 0; }
.stat-tile .stv { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.15; }
.stat-tile .stl { margin-top: 2px; font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile.ok .stv { color: var(--ok); }
.stat-tile.wn .stv { color: var(--wn); }
.stat-tile.pr .stv { color: var(--pr); }
.stat-tile.cr .stv { color: var(--cr); }
.stat-tile.pk .stv { color: var(--pk); }
/* ไอคอนในกล่องสรุปใช้สีพาสเทลเดียวกับไอคอนในปฏิทิน ให้เป็นชุดสีเดียวกันทั้งหน้า */
.stat-tile.ok .sti svg.i { color: var(--cal-work); }
.stat-tile.cr .sti svg.i { color: var(--cal-sick); }
.stat-tile.pr .sti svg.i { color: var(--cal-personal); }
/* กล่องสรุปประจำเดือนในแท็บปฏิทิน — ต้อง scope ด้วย .cal-summary เพราะ .stat-tile.ok/.wn/.pr/.cr/.pk
   ถูกใช้ที่หน้าอื่นด้วย (เช่นสรุปผลเทียบ HRDD: ตรงกัน/ประเภทไม่ตรง/ไม่พบ) ซึ่งคนละความหมายกับประเภทวัน
   ในนี้ ห้ามให้สีที่นี่ไปทับที่นั่น (27 ส.ค. 69) — ตัวเลขในนี้ใช้สีเดียวกับไอคอนปฏิทิน/ป้ายประเภทวันเป๊ะ */
/* ไอคอนเสมอกับตัวเลข ไม่ใช่กึ่งกลางบล็อกตัวเลข+label ทั้งก้อน (28 ส.ค. 69 ตามที่ขอ) — เดิม
   align-items:center ของ .stat-tile ดันไอคอนลงมาแบ่งครึ่งกับ label เล็กด้านล่าง ดูไม่เสมอกับตัวเลข */
.stat-tiles.cal-summary .stat-tile { align-items: flex-start; padding: 12px 14px; gap: 10px; }
/* ตัวเลข+ไอคอนเล็กลงให้สมส่วนกับคอลัมน์ที่แคบลง (28 ส.ค. 69 ตามที่ขอ "ลงขนาดตัวเลขให้ดูสมมาตร") —
   22px เดิมมันใหญ่เกินตัวการ์ดแคบๆ นี้ ทำให้ล้นดูไม่สมส่วนกับไอคอน/label ข้างๆ */
.stat-tiles.cal-summary .stat-tile .stv { font-size: 18px; }
.stat-tiles.cal-summary .stat-tile .sti svg.i { width: 19px; height: 19px; stroke-width: 1.9; }
.stat-tiles.cal-summary { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat-tiles.cal-summary .stat-tile.ok .stv { color: var(--cal-work); }
.stat-tiles.cal-summary .stat-tile.cr .stv { color: var(--cal-sick); }
.stat-tiles.cal-summary .stat-tile.pr .stv { color: var(--cal-personal); }
.stat-tiles.cal-summary .stat-tile.wn .stv { color: var(--cal-vacation); }
.stat-tiles.cal-summary .stat-tile.wn .sti svg.i { color: var(--cal-vacation); }
.stat-tiles.cal-summary .stat-tile.pk .stv, .stat-tiles.cal-summary .stat-tile.pk .sti svg.i { color: var(--cal-holiday); }
.stat-tiles.cal-summary .stat-tile.mu .stv, .stat-tiles.cal-summary .stat-tile.mu .sti svg.i { color: var(--cal-weekend); }
.stat-tile.wn .sti svg.i { color: var(--cal-vacation); }

/* ── แถบสีข้างแถวตารางเทียบ HRDD บอกสถานะโดยไม่ต้องอ่านป้ายก็รู้ ── */
.hrdd-row { border-left: 3px solid var(--rule); }
.hrdd-row.ok { border-left-color: var(--ok); }
.hrdd-row.wn { border-left-color: var(--wn); }
.hrdd-row.pr { border-left-color: var(--pr); }
.hrdd-row.cr { border-left-color: var(--cr); }
.hrdd-row .why { display: block; margin-top: 4px; font-size: 12px; color: var(--mut); line-height: 1.6; }

.tg {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.tg.ok { color: var(--ok); background: var(--okb); border-color: var(--okl); }
.tg.wn { color: var(--wn); background: var(--wnb); border-color: var(--wnl); }
.tg.cr { color: var(--cr); background: var(--crb); border-color: var(--crl); }
.tg.mu { color: var(--mut); background: var(--hov); border-color: var(--rule); }
/* ป้ายประเภทวันลา 3 สีแยกกัน (27 ส.ค. 69 ตามที่ขอ) — สีเดียวกับที่ใช้ในปฏิทิน (--cal-sick/personal/
   vacation) เพื่อให้เห็นแล้วรู้ทันทีว่าโทนเดียวกับไอคอนในแท็บปฏิทิน ไม่ใช่ป้ายสถานะทั่วไป */
.tg.lv-sick { color: var(--cal-sick); background: color-mix(in srgb, var(--cal-sick) 12%, white); border-color: color-mix(in srgb, var(--cal-sick) 35%, white); }
.tg.lv-personal { color: var(--cal-personal); background: color-mix(in srgb, var(--cal-personal) 14%, white); border-color: color-mix(in srgb, var(--cal-personal) 40%, white); }
.tg.lv-vacation { color: var(--cal-vacation); background: color-mix(in srgb, var(--cal-vacation) 14%, white); border-color: color-mix(in srgb, var(--cal-vacation) 40%, white); }
.tg.lv-unpaid { color: var(--pk); background: var(--pkb); border-color: color-mix(in srgb, var(--pk) 40%, white); }
/* ป้าย "ทำงาน/วันหยุด/วันหยุดนักขัตฤกษ์" ในตารางรายละเอียด — สีเดียวชุดเดียวกับ .tg.lv-* ด้านบน
   (27 ส.ค. 69) ใช้ตัวแปร --cal-work/weekend/holiday จุดเดียวกับที่ปฏิทินใช้ ไม่แยกชุดสีที่สอง */
.tg.dt-work { color: var(--cal-work); background: color-mix(in srgb, var(--cal-work) 16%, white); border-color: color-mix(in srgb, var(--cal-work) 40%, white); }
.tg.dt-weekend { color: var(--cal-weekend); background: color-mix(in srgb, var(--cal-weekend) 16%, white); border-color: color-mix(in srgb, var(--cal-weekend) 40%, white); }
.tg.dt-holiday { color: var(--cal-holiday); background: color-mix(in srgb, var(--cal-holiday) 14%, white); border-color: color-mix(in srgb, var(--cal-holiday) 40%, white); }

/* ── หน้ารายละเอียด ─────────────────────────────────────── */
.back {
  display: inline-flex; align-items: center; gap: 6px; background: none;
  border: none; font: inherit; font-size: 13px; color: var(--brand);
  cursor: pointer; padding: 0; margin-bottom: 16px; font-weight: 600;
}
.back:hover { text-decoration: underline; }

.prog {
  display: flex; align-items: flex-start; padding: 28px 26px 24px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-card); margin-bottom: 22px;
  overflow-x: auto; box-shadow: var(--sh1);
}
.pstep {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; flex: none; width: 150px;
}
.pstep .cir {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  flex: none; background: var(--sunk); border: 1.5px solid var(--rule); color: var(--fnt);
}
.pstep .cir svg { width: 22px; height: 22px; }
.pstep.dn .cir { background: var(--ok); border-color: var(--ok); color: #fff; }
.pstep.cu .cir {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 0 0 6px var(--tint), 0 10px 20px -8px rgba(10,120,212,.55);
}
.pstep .cap {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fnt);
}
.pstep.dn .cap { color: var(--ok); }
.pstep.cu .cap { color: var(--brand); }
.pstep .pl { font-size: 13px; font-weight: 600; color: var(--mut); line-height: 1.3; }
.pstep.dn .pl { color: var(--ink2); }
.pstep.cu .pl { color: var(--brand-d); }
.pline { flex: 1; min-width: 26px; height: 2px; background: var(--rule); margin: 25px 0 0; }
.pline.dn { background: var(--ok); }

.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--rule);
  margin-bottom: 22px; overflow-x: auto;
}
.tab {
  font: inherit; font-size: 13px; font-weight: 600; background: none; border: none;
  cursor: pointer; padding: 11px 16px; color: var(--mut);
  border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px;
  transition: color .12s;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--brand-d); border-bottom-color: var(--brand); }
.tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.tp { display: none; } .tp.on { display: block; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.g3 { display: grid; grid-template-columns: 1.65fr 1fr; gap: 22px; align-items: start; }
/* แท็บปฏิทินขอคอลัมน์ขวา (สรุปประจำเดือน/รายละเอียดวันที่เลือก) แคบกว่า .g3 ปกติ (28 ส.ค. 69) — แยก
   คลาสเฉพาะ ไม่แก้ .g3 ตรงๆเพราะแท็บภาพรวมก็ใช้ .g3 อยู่ด้วย คนละสัดส่วนที่ต้องการ */
.g3.cal-grid { grid-template-columns: 2.3fr 1fr; }
@media (max-width: 1080px) { .g2, .g3 { grid-template-columns: 1fr; } }

dl.kv {
  display: grid; grid-template-columns: max-content 1fr; gap: 11px 22px;
  margin: 0; font-size: 13px;
}
dl.kv dt { color: var(--mut); }
dl.kv dd { margin: 0; font-weight: 600; }

/* ── กล่องข้อความเตือน ──────────────────────────────────── */
.note {
  display: grid; grid-template-columns: 17px 1fr; gap: 13px; padding: 18px 20px;
  border-radius: var(--r-card); font-size: 13px; line-height: 1.7;
  background: var(--tint); border: none; color: var(--ink2);
  margin-bottom: 16px;
}
.note:last-child { margin-bottom: 0; }
.note svg.i { color: var(--brand); margin-top: 2px; }
.note b, .note strong { color: var(--ink); }
.note.wn { background: var(--wnb); }
.note.wn svg.i { color: var(--wn); }
.note.cr { background: var(--crb); }
.note.cr svg.i { color: var(--cr); }

/* บริษัทใหม่ที่ยังไม่มีโดเมน — accounting พิมพ์โดเมนเองแล้วผูกได้ทันทีจากแท็บ "ดึงจาก Gmail"
   (3 ก.ย. 69 ตามที่ขอ) วางในกรอบเตือนสีเหลืองเดิม ไม่ต้องมีการ์ดแยก */
.gmail-claim { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gmail-claim .dinput { flex: 1 1 260px; background: var(--paper); }
.gmail-claim .btn { flex: none; }

/* ลิงก์ดูรายการอีเมลที่เคยกด "ซ่อน" ไว้ — วางท้ายรายการอีเมลหลัก กดขยายดูเฉพาะตอนต้องการ */
.gmail-dismissed { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.gmail-dismissed > a { font-size: 12.5px; color: var(--brand); }
#gmailDismissedWrap { margin-top: 12px; }
#gmailDismissedWrap .maillist .mq { font-style: normal; color: var(--mut); }

/* ── ปฏิทิน ─────────────────────────────────────────────── */
/* เดิม gap ระหว่างเซลล์ทำให้ดูเป็นการ์ดลอยแยกกัน (โบราณ) — เปลี่ยนมาใช้เทคนิค "gap 1px + สีพื้นหลัง
   คอนเทนเนอร์เป็นสีเส้น" แทน ได้เส้นตารางบางๆคั่นระหว่างเซลล์แบบตารางปกติ เรียบง่าย ทันสมัย ตรงตาม
   ที่ขอ ("ไม่เอาเว้นช่องว่างแบบนี้ ... ขอเป็นเส้นตารางปกติ") ไม่ต้องพึ่ง border ซ้อนกันแบบเดิม */
/* กลับไปเป็นเส้นตารางสีเทาอ่อนบางๆ (28 ส.ค. 69 ตามที่ขอ) แทนการ์ดมนแยกช่องแบบเดิม — ใช้เทคนิค
   เดียวกับตารางปกติ: พื้นคอนเทนเนอร์เป็นสีเส้น (--hair) ส่วนแต่ละเซลล์เว้น gap 1px ให้เห็นเป็นเส้น */
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden;
}
.dw {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; background: var(--paper);
  color: var(--fnt); text-align: center; padding: 10px 0;
}
/* เลขวันที่กับไอคอนป้ายอยู่แถวเดียวกัน (เลขซ้าย ป้ายชิดขวา) — ใช้ flex-wrap แล้วดัน .dbadge ไปชิดขวา
   ด้วย margin-left:auto ส่วนวันหยุดมีแบนเนอร์เต็มความกว้างเพิ่มอีกแถว (.dbanner ตั้ง flex-basis:100%
   บังคับขึ้นบรรทัดใหม่) คลิกได้เพื่อดูรายละเอียดวันนั้น — ring สีฟ้าตอน hover/เลือกอยู่ (27-28 ส.ค. 69) */
.cl {
  min-height: 68px; background: var(--paper); padding: 8px 8px 9px;
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 5px;
  cursor: pointer; transition: box-shadow .15s var(--ease);
}
.cl:not(.vd):hover { box-shadow: inset 0 0 0 1.5px var(--bline); }
.cl.sel { box-shadow: inset 0 0 0 2px var(--brand); background: var(--tint); }
.cl .dn { flex: none; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cl .dbadge { margin-left: auto; }
.cl.vd { background: var(--paper); cursor: default; }
/* พื้นหลังขาวล้วนทุกเซลล์ (28 ส.ค. 69 ตามที่ขอ "เปลี่ยนใจ เอาพื้นขาวหมดเลย") — เลิกไล่สีพื้นหลังตาม
   ประเภทวันแล้ว ให้เลขวันที่/ไอคอนมุมขวาบน/แบนเนอร์วันหยุดเป็นตัวบอกสถานะแทนทั้งหมด */
.cl.weekend .dn { color: var(--cal-weekend); font-weight: 600; }
.cl.holiday .dn { color: var(--cal-holiday); }
/* วันลาแยกสีตามประเภท — เลขวันที่ผูกกับตัวแปร --cal-* ชุดเดียวกับไอคอน/ป้ายประเภทวันในตารางรายละเอียด
   ให้เห็นแล้วรู้ทันทีว่าโทนเดียวกัน (27-28 ส.ค. 69 ตามที่ขอ) */
.cl.lv-sick .dn { color: var(--cal-sick); font-weight: 600; }
.cl.lv-personal .dn { color: var(--cal-personal); font-weight: 600; }
.cl.lv-vacation .dn { color: var(--cal-vacation); font-weight: 600; }
.cl.lv-unpaid .dn { color: var(--pk); font-weight: 600; }

/* ไอคอนต่อวัน — เอาแค่ตัวไอคอนเปล่าๆ ไม่มีพื้นหลัง/ป้ายทึบครอบ สีตรงตามชุดสีที่ระบุมาเป๊ะๆ ใช้ตัวแปรสี
   เฉพาะปฏิทิน (--cal-*) แยกจากสีสถานะทั่วไป เพิ่มความหนา/ขนาดจาก .i.sm ปกติ (28 ส.ค. 69 ตามที่ขอ
   "เพิ่มความหนา") เฉพาะจุดนี้ผ่าน .dbadge โดยตรง ไม่แตะ .i.sm ที่ใช้ร่วมกับที่อื่นทั้งระบบ */
.dbadge {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
}
.dbadge svg.i { width: 15px; height: 15px; stroke-width: 2.1; }
.dbadge.workday { color: var(--cal-work); }
.dbadge.lv-sick { color: var(--cal-sick); }
.dbadge.lv-personal { color: var(--cal-personal); }
.dbadge.lv-vacation { color: var(--cal-vacation); }
.dbadge.lv-unpaid { color: var(--pk); }

/* แบนเนอร์วันหยุด — เต็มความกว้างเซลล์ ใต้เลขวันที่ ใช้ --cal-holiday แทนสีแดงสถานะทั่วไป
   (27 ส.ค. 69) ให้เข้าชุดกับสีวันหยุดนักขัตฤกษ์ที่ใช้ในตารางรายละเอียด/สรุปประจำเดือน */
.dbanner {
  display: flex; align-items: center; gap: 5px; flex-basis: 100%;
  font-size: 9.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px;
  background: var(--cal-holiday); color: #fff; line-height: 1.3;
}

/* แถบคำอธิบายไอคอนใต้ปฏิทิน — ไอคอนอยู่เปล่าๆไม่มีกล่องครอบ (ไม่ใช่ป้ายรวมทึบแบบ .dbadge) ยกเว้น
   วันหยุดที่เป็นป้ายทึบสีล้วน ตัวหนังสือ+ไอคอนใช้สี --cal-* ชุดเดียวกันทั้งคู่ (27 ส.ค. 69 ตามที่ขอ
   สีเดียวกันทั้งระบบ ไม่แยกชุดสีอ่านง่าย/ชุดสีไอคอนเหมือนเดิมอีกต่อไป) */
/* แถบคำอธิบายเล็กลง (28 ส.ค. 69 ตามที่ขอ) — ตัวหนังสือ/ไอคอน/ระยะห่างลดลงจากเดิม ให้เข้าชุดกับ
   ปฏิทินที่เล็กลงด้วย ไม่ใหญ่เกินตัวจนแย่งความสนใจจากตารางเอง */
.cal-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 13px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair);
}
.legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.legend-item svg.i { width: 15px; height: 15px; stroke-width: 2; }
.legend-item.workday { color: var(--cal-work); }
.legend-item.workday svg.i { color: var(--cal-work); }
.legend-item.sick { color: var(--cal-sick); }
.legend-item.sick svg.i { color: var(--cal-sick); }
.legend-item.personal { color: var(--cal-personal); }
.legend-item.personal svg.i { color: var(--cal-personal); }
.legend-item.vacation { color: var(--cal-vacation); }
.legend-item.vacation svg.i { color: var(--cal-vacation); }
.legend-item.holiday {
  padding: 4px 12px; border-radius: var(--r-pill); background: var(--cal-holiday); color: #fff;
}
.cal-legend-mu { font-size: 11.5px; color: var(--mut); }

/* การ์ด "รายละเอียดวันที่เลือก" ข้างปฏิทิน (27 ส.ค. 69 ตามที่ขอ "ทำปฏิทินให้สวยๆ") — โชว์ตอนคลิก
   วันที่ในปฏิทิน ใช้ .kv/.rmk ที่มีอยู่แล้วสำหรับรายการ/หมายเหตุ เพิ่มแค่หัวการ์ด (วันที่ + ป้ายประเภท) */
.ddhd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ddhd-l { display: flex; flex-direction: column; gap: 2px; }
.ddate { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ddow { font-size: 12px; color: var(--mut); }
/* กล่องเวลาเข้า-ออกงานคู่ (28 ส.ค. 69 ตามที่ขอให้ตรงกับดีไซน์อ้างอิง) — สองกล่องเรียงข้างกัน พื้นหลัง
   ฟ้าอ่อนแบรนด์ (--tint) แทนเทาเรียบเดิม ให้ดูมีสีสัน/ทันสมัยขึ้นตามที่ขอ */
.dd-times { display: flex; gap: 10px; margin-bottom: 14px; }
.dd-time-box {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  background: var(--tint); border: 1px solid var(--tint2); border-radius: var(--r-ctl); padding: 10px 14px;
}
.dd-time-box .ic { color: var(--brand); }
.dd-time-box .lbl { font-size: 11.5px; color: var(--brand-d); font-weight: 600; }
.dd-time-box .val { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── สมุดคำนวณ ──────────────────────────────────────────── */
.ldg td { padding: 13px 22px; font-size: 13.5px; }
.ldg td.r { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14.5px; }
.ldg tr.res td {
  border-top: 2px solid var(--rule); border-bottom: none; font-weight: 600;
  padding-top: 16px; padding-bottom: 18px;
}
.ldg tr.res td.r { color: var(--cr); font-size: 19px; letter-spacing: -.02em; }

.cks { list-style: none; margin: 0; padding: 0; }
.cks li {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--hair); align-items: center;
}
.cks li:first-child { padding-top: 0; }
.cks li:last-child { border-bottom: none; padding-bottom: 0; }
.cks .l { font-size: 13px; font-weight: 500; }
.cks .l small { display: block; color: var(--mut); font-size: 11.5px; margin-top: 2px; font-weight: 400; }
.cks .v { font-size: 13px; font-weight: 600; color: var(--ink); text-align: right; }
.cks .v.mu { font-weight: 400; color: var(--mut); }

/* ── เอกสารใบแจ้งหนี้ — ให้ดูเหมือนกระดาษจริง ─────────────── */
.doc {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card);
  overflow: hidden; box-shadow: var(--sh2);
}
.doc .dh {
  padding: 26px 28px 24px; border-bottom: 2px solid var(--ink);
  display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start;
}
.doc .dh .cs { font-size: 18px; font-weight: 600; letter-spacing: -.018em; margin-top: 8px; }
.doc .dh .ti { font-size: 12.5px; color: var(--mut); margin-top: 4px; }
.doc .dh dl.kv { margin-left: auto; font-size: 12.5px; }
.doc thead th { padding-left: 28px; padding-right: 28px; }
.doc tbody td { padding-left: 28px; padding-right: 28px; }
.doc .dfoot { padding: 26px 28px 28px; display: grid; gap: 22px; }

/* บล็อกยอดรวม — จัดขวาเหมือนใบแจ้งหนี้จริง */
.tot { margin-left: auto; width: min(400px, 100%); }
.tot .t {
  display: flex; justify-content: space-between; gap: 22px; padding: 7px 0;
  font-size: 13.5px; color: var(--ink2);
}
.tot .t .v {
  font-variant-numeric: tabular-nums; color: var(--ink);
  font-weight: 600; letter-spacing: -.01em;
}
.tot .t.mi .v { color: var(--cr); }
.tot .t.rl { border-top: 1px solid var(--rule); margin-top: 7px; padding-top: 13px; }
.tot .t.gr { font-weight: 600; color: var(--ink); font-size: 15px; }
.tot .t.gr .v { font-size: 17px; }
.tot .t.py {
  border-top: 2px solid var(--ink); margin-top: 11px; padding-top: 15px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.tot .t.py .v { color: var(--ink); font-weight: 600; font-size: 22px; letter-spacing: -.03em; }

.rmk {
  border-left: 3px solid var(--bline);
  padding: 15px 18px; background: var(--sunk); font-size: 13px;
  line-height: 1.85; white-space: pre-line;
}
.rmk .ey { margin-bottom: 6px; }

pre.code {
  margin: 0; background: #101C29; border-radius: var(--r-card);
  padding: 20px 22px; overflow-x: auto; color: #C6D6E6;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.75;
}

/* ── ร่างอีเมล ──────────────────────────────────────────── */
.cmp { border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.cmp .f {
  display: grid; grid-template-columns: 82px 1fr; gap: 14px; padding: 12px 20px;
  border-bottom: 1px solid var(--hair); font-size: 13px; align-items: baseline;
}
.cmp .f .l { color: var(--mut); font-size: 12.5px; }
.cmp .f.sj { background: var(--sunk); }
.cmp .f.sj span:last-child { font-weight: 600; }
.cmp .f input[type="text"] {
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; width: 100%;
}
.cmp .f input[type="text"]:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.cmp .f .fhint { display: block; margin-top: 6px; }
.cmp .lt {
  padding: 26px 28px; font-size: 13.5px; line-height: 2;
  white-space: pre-line; color: var(--ink2);
}
.cmp .en { padding: 16px 20px; border-top: 1px solid var(--hair); background: var(--sunk); }

.files { display: flex; gap: 10px; flex-wrap: wrap; }
.file {
  display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px;
  border: 1px solid var(--rule); background: var(--paper);
  padding: 8px 14px 8px 10px; color: var(--ink2);
}
.file .pd {
  width: 26px; height: 26px; flex: none; display: grid;
  place-items: center; background: var(--crb); color: var(--cr);
  font-size: 8px; font-weight: 600; border: 1px solid var(--crl);
}
a.file { text-decoration: none; cursor: pointer; transition: background .1s, border-color .1s; }
a.file:hover { background: var(--hov); border-color: var(--brand); color: var(--ink); }

/* ── รายการอีเมล (ดึงจาก Gmail) ─────────────────────────── */
.maillist { list-style: none; }
.maillist li {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--hair);
}
.maillist li:last-child { border-bottom: none; }
.maillist li.done { opacity: .55; }
.maillist li > .tg, .maillist li > button, .maillist li > .mailbtns { flex: none; margin-top: 2px; }
.mailbtns { display: flex; gap: 8px; }
.mi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ms { font-weight: 600; font-size: 14px; color: var(--ink); }
.mf { font-size: 12px; color: var(--mut); }
.mq:empty { display: none; }
.mq { font-size: 12.5px; color: var(--ink2); line-height: 1.6; }
.mi .files { margin-top: 4px; }
.attlist { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.attrow { display: flex; align-items: center; gap: 10px; }
.attrow .file { flex: 1; min-width: 0; }
.attrow .btn { flex: none; }
/* ปุ่มไอคอนล้วน (ดาวน์โหลด) — เป็น <a> จึงต้องบังคับ line-height เองไม่ให้สูงเกินปุ่มข้างๆ */
.btn.icon {
  width: var(--h-ctl-sm); padding: 0; display: inline-grid; place-items: center;
  text-decoration: none;
}

/* ── แถบปุ่มล่าง ────────────────────────────────────────── */
.fbar {
  position: sticky; bottom: 0; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); border-top: 1px solid var(--rule);
  margin: 26px -28px -80px; padding: 16px 28px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; z-index: 20;
  box-shadow: 0 -8px 24px -16px rgba(20,32,47,.22);
}
.fbar .sx { font-size: 13px; color: var(--ink2); }
.fbar .sx b { color: var(--ink); }
.fbar .gap { flex: 1; }

#tst {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(14px);
  display: flex; align-items: center; gap: 11px;
  color: var(--ink); padding: 13px 20px 13px 16px; border-radius: var(--r-card); font-size: 13px;
  font-weight: 500; box-shadow: 0 16px 40px -14px rgba(20,32,47,.35), var(--sh1);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
  z-index: 80; max-width: min(580px, 90vw); line-height: 1.6;
  background: var(--paper); border: 1px solid var(--rule);
}
#tst.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#tst .tst-ic {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--okb); color: var(--ok);
}
#tst .tst-ic svg { width: 13px; height: 13px; }
#tst.err .tst-ic { background: var(--crb); color: var(--cr); }
@media (prefers-reduced-motion: reduce) { #tst { transition: none; } }

/* ── สถานะว่าง / โหลด ───────────────────────────────────── */
.vw { display: none; } .vw.on { display: block; }
.empty { padding: 56px 20px; text-align: center; color: var(--mut); font-size: 13px; }
/* วางไอคอนในป้ายวงกลมไล่สีจางๆ แทนไอคอนลอยเดี่ยวๆ ให้สถานะ "ว่าง" ดูตั้งใจออกแบบ ไม่ใช่ที่เหลือจากเนื้อหา */
.empty svg.i {
  width: 22px; height: 22px; color: var(--brand); margin-bottom: 14px;
  padding: 13px; border-radius: 50%;
  background: linear-gradient(150deg, var(--tint) 0%, var(--tint2) 100%);
}
.loading { padding: 60px; text-align: center; color: var(--mut); font-size: 13px; }

/* ── รายการกิจกรรม ──────────────────────────────────────── */
.acts-l { list-style: none; margin: 0; padding: 0; }
.acts-l li {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--hair); align-items: start;
}
.acts-l li:first-child { padding-top: 0; }
.acts-l li:last-child { border-bottom: none; padding-bottom: 0; }
.acts-l .tx { font-size: 13px; }
.acts-l .tx small { display: block; color: var(--mut); font-size: 11.5px; }
.acts-l .tm { font-size: 11.5px; color: var(--fnt); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ═══ หัวหน้าแบบเอกสารทางการ ═══
   โครงเดียวกับหัวเอกสารราชการ: ป้ายหมวด → ชื่อเรื่อง → บรรทัดอ้างอิง
   ด้านขวาเป็นตารางข้อมูลกำกับเอกสาร คั่นด้วยเส้นเต็มความกว้าง       */
.greet, .phd {
  display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.greet .hi, .phd .ey {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: none; color: var(--mut);
}
.greet h1, .phd h1 {
  margin: 6px 0 0; font-size: 29px; font-weight: 600;
  letter-spacing: -.036em; line-height: 1.15;
}
.greet .sub2, .phd p {
  margin: 9px 0 0; font-size: 14px; color: var(--mut); max-width: 78ch; line-height: 1.6;
}
.greet .tools, .phd .acts {
  margin-left: auto; display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; padding-top: 2px;
}

.ptitle {
  margin: 0 0 12px; font-size: 26px; font-weight: 600;
  letter-spacing: -.035em; line-height: 1.2; color: var(--ink);
}

/* ═══ สวิตช์ ON/OFF — ใช้กับ "สัญญาไหนกำลังดำเนินการอยู่" ในแท็บลูกค้า & สัญญา
   เขียว = ON = ระบบกำลังทำงานให้บริษัทนี้อยู่ตอนนี้ (ดู setActiveContract ฝั่งเซิร์ฟเวอร์) ═══ */
.toggle {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  margin-left: auto;
}
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .tk {
  position: relative; width: 40px; height: 24px; flex: none; border-radius: var(--r-pill);
  background: var(--hair); border: 1px solid var(--rule);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.toggle .tk::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--paper); box-shadow: var(--sh2);
  transition: transform .18s var(--ease);
}
.toggle.on .tk { background: var(--ok); border-color: var(--ok); }
.toggle.on .tk::before { transform: translateX(16px); }
.toggle input:disabled ~ .tk { opacity: .5; cursor: default; }
.toggle input:focus-visible ~ .tk { outline: 2px solid var(--brand); outline-offset: 2px; }
.toggle .tl { font-size: 12.5px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.toggle.on .tl { color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .toggle .tk, .toggle .tk::before { transition: none; } }

/* แถวข้อมูลกำกับเอกสารแบบการ์ด — ใบว่าจ้าง / สัญญา / ข้อมูล ณ วันที่ / ผู้จัดทำ */
.metabar {
  display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap;
  padding: 0; margin-bottom: 30px;
}
.metabar .btn { margin-left: auto; }

.dmeta {
  display: flex; align-items: center; gap: 8px 26px; flex-wrap: wrap; margin: 0;
  font-size: 12.5px;
}
.dmeta dt { color: var(--mut); font-weight: 600; }
.dmeta dd {
  margin: 0 0 0 -18px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.datechip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-ctl);
  padding: 9px 14px; color: var(--ink2);
}
.datechip svg.i { color: var(--fnt); }

/* ═══ แดชบอร์ดแบบ widget mosaic ═══ */
/* การ์ด KPI แบบมี trend */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 26px; }
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .kpis { grid-template-columns: 1fr; } }

.kpi {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: 22px 24px 24px; box-shadow: var(--sh1); position: relative; overflow: hidden;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--rule);
}
.kpi.w::before { background: linear-gradient(90deg, var(--wn), var(--wnl)); }
.kpi.g::before { background: linear-gradient(90deg, var(--ok), var(--okl)); }
.kpi.c::before { background: linear-gradient(90deg, var(--cr), var(--crl)); }
.kpi.a::before { background: linear-gradient(90deg, var(--brand), var(--brand-l)); }
.kpi.a {
  background: linear-gradient(150deg, var(--tint) 0%, var(--paper) 55%);
}
.kpi.act { cursor: pointer; }
.kpi.act:hover { box-shadow: var(--sh3); border-color: #D2D7E0; transform: translateY(-3px); }
.kpi.act:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kpi { transition: none; } .kpi.act:hover { transform: none; } }
.kpi .kh { display: flex; align-items: center; gap: 10px; }
.kpi .ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--grad-brand); color: #fff; border: 1px solid var(--brand-h);
  box-shadow: 0 3px 8px -2px rgba(10,120,212,.45);
}
.kpi .ic svg { width: 17px; height: 17px; }
.kpi .kl { font-size: 13px; font-weight: 500; color: var(--mut); }
.kpi .kv {
  display: block; margin-top: 14px; font-size: 30px; font-weight: 600;
  letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.kpi .kv small { font-size: 13px; font-weight: 500; color: var(--mut); margin-left: 6px; letter-spacing: 0; }
.kpi .kf { display: block; margin-top: 11px; font-size: 12.5px; color: var(--mut); line-height: 1.55; }
.kpi.w .ic { background: var(--wnb); color: var(--wn); border-color: var(--wnl); }
.kpi.w .kv { color: var(--wn); }
.kpi.c .ic { background: var(--crb); color: var(--cr); border-color: var(--crl); }
.kpi.c .kv { color: var(--cr); }
.kpi.g .ic { background: var(--okb); color: var(--ok); border-color: var(--okl); }
.kpi.g .kv { color: var(--ok); }
/* ตัวเลขเด่นของการ์ดหลัก — ไล่สีบนตัวหนังสือ ให้เป็นจุดสะดุดตาที่สุดของแดชบอร์ด
   ใส่ color สำรองไว้ด้วยเผื่อเบราว์เซอร์ไม่รองรับ background-clip:text (จะได้ยังอ่านออก) */
.kpi.a .kv {
  color: var(--brand-d);
  background: linear-gradient(100deg, var(--brand-h) 10%, var(--brand) 55%, var(--brand-l) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* .tg (ป้ายสถานะ) วางไว้ใน .kv ของการ์ด .kpi.a ได้ (หน้ารายละเอียดบริษัทของ role executive)
   ต้องรีเซ็ต fill/clip ที่ไล่ลงมาจากด้านบนก่อน ไม่งั้นตัวหนังสือในป้ายโดน clip เป็นโปร่งใสไปด้วย
   ทั้งที่ป้ายไม่มี background แบบไล่สีให้ clip เกาะ กลายเป็นป้ายว่างไม่มีตัวอักษรเลย */
.kpi.a .kv .tg { -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; }

.pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-ctl); margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.pill.up { color: var(--ok); background: var(--okb); }
.pill.down { color: var(--cr); background: var(--crb); }
.pill.flat { color: var(--mut); background: var(--sunk); }

/* ตะแกรง widget */
.mosaic { display: grid; gap: 18px; margin-bottom: 18px; }
.mosaic.c3 { grid-template-columns: repeat(3, 1fr); }
.mosaic.c2 { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 1180px) { .mosaic.c3 { grid-template-columns: 1fr 1fr; } .mosaic.c2 { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .mosaic.c3 { grid-template-columns: 1fr; } }
.mosaic > .card { margin-bottom: 0; }

/* กราฟแท่ง — วาดด้วย CSS ไม่ใช้ไลบรารี */
.chart { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding: 22px 0 0; }
.chart .col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 9px; height: 100%; min-width: 0;
}
.chart .stack {
  width: 100%; max-width: 52px; flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; position: relative;
}
.chart .plan {
  width: 100%; background: var(--hair); position: relative;
}
.chart .fill {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--brand);
}
/* ตรวจผ่านแต่ยังไม่วางบิล — ใช้สีอ่อนของแบรนด์ ไม่ใช้ลายทาง */
.chart .fill.pend { background: var(--tint2); }
.chart .cap {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 600; color: var(--ink2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chart .xl { font-size: 12px; color: var(--mut); font-weight: 500; }
.chart .col.on .xl { color: var(--ink); font-weight: 600; }
.chart-legend {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink2);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend i { width: 13px; height: 13px; flex: none; }

/* แถบสัดส่วนสถานะ */
/* จุดสีบอกสถานะในรายการนับ — เดิมผูกไว้กับแถบสัดส่วนที่เอาออกแล้ว จุดจึงไม่เคยได้สี */
.legend-rows i.s-billed   { background: var(--ok); }
.legend-rows i.s-ready    { background: #D9A63C; }
.legend-rows i.s-mismatch { background: var(--cr); }
.legend-rows i.s-partial  { background: var(--brand); }
.legend-rows i.s-awaiting { background: #B9C4D2; }

.legend-rows { list-style: none; margin: 0; padding: 0; }
.legend-rows li {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 11px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px;
}
.legend-rows li:last-child { border-bottom: none; padding-bottom: 0; }
.legend-rows i { width: 9px; height: 9px; border-radius: 50%; background: var(--tint2); }
.legend-rows b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* รายการงาน */
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 13px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid var(--hair);
}
.tasks li:first-child { padding-top: 0; }
.tasks li:last-child { border-bottom: none; padding-bottom: 0; }
/* ตราไอคอนบอกระดับความสำคัญ — ใช้ทั้งในการ์ดงานที่ต้องทำและแผงกระดิ่ง
   จึงไม่ผูกไว้กับ .tasks */
.tic {
  width: 30px; height: 30px; border-radius: var(--r-ctl);
  display: grid; place-items: center; flex: none;
}
.tic.cr { background: var(--crb); color: var(--cr); }
.tic.wn { background: var(--wnb); color: var(--wn); }
.tic.info { background: var(--tint); color: var(--brand-d); }
.tic.ok { background: var(--okb); color: var(--ok); }
.tasks .tt { font-size: 13px; font-weight: 600; line-height: 1.4; }
.tasks .td { display: block; font-size: 11.5px; color: var(--mut); margin-top: 2px; line-height: 1.5; }
.tasks .go {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--brand);
  background: none; border: none; cursor: pointer; padding: 4px 2px; white-space: nowrap;
}
.tasks .go:hover { text-decoration: underline; }
/* แถบสัดส่วนสถานะรอบบิล — เดิมมี HTML แต่ไม่เคยมี CSS จึงไม่ขึ้นอะไรเลย */
.split {
  display: flex; height: 12px; overflow: hidden; margin-bottom: 18px; background: var(--hair);
  border-radius: 999px; gap: 2px;
}
.split > span { display: block; min-width: 4px; border-radius: 999px; transition: flex .3s; }

/* ── แถบความคืบหน้าสัญญา ────────────────────────────────── */
.bar {
  height: 8px; background: var(--hair);
  overflow: hidden; margin: 12px 0 8px;
}
.bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), #2FA2EC);
}
.progline {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 12px; color: var(--mut);
}
.progline b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ตัวเลขคู่ในหัวการ์ด */
.pair { display: flex; gap: 28px; flex-wrap: wrap; }
.pair > div { min-width: 128px; }
.pair .pl {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  letter-spacing: 0; color: var(--mut);
}
.pair .pv {
  display: block; margin-top: 5px; font-size: 20px; font-weight: 600;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.pair .pv small { font-size: 12px; font-weight: 400; color: var(--fnt); margin-left: 4px; }
.pair .pv.a { color: var(--brand-d); }
.pair .pv.c { color: var(--cr); }

/* แถวที่ต้องรีบ */
/* พื้นหลังแถวด่วนเปลี่ยนเป็นขาวล้วนตามที่ขอ ("เปลี่ยนพื้นหลัง...เป็นสีขาวทั้งหมด") — ความเร่งด่วน
   ยังเห็นได้จากป้าย "เลยกำหนดวางบิล"/"เกินกำหนด" ในแถวอยู่แล้ว ไม่ต้องพึ่งสีพื้นหลังช่วยอีกชั้น */
tbody tr.urgent:hover { background: var(--hov); }

/* ── มือถือ ─────────────────────────────────────────────── */
@media (max-width: 880px) {
  .mast-in { padding: 0 16px; gap: 12px; }
  .mark .mt span, .mast-date, .langswitch, .who .wt { display: none; }
  .tabbar-in { padding: 0 16px; }
  .page { padding: 22px 16px 80px; }
  .fbar { margin: 22px -16px -80px; padding: 14px 16px; }
}
/* จอแคบมาก (มือถือแนวตั้งทั่วไป) — โลโก้เต็ม + ป้าย FlowAccount + กระดิ่ง + ชิปผู้ใช้
   รวมกันแล้วกว้างเกินจอเสมอ ต้องซ่อนป้ายสถานะที่ไม่ใช่ปุ่ม (ดูซ้ำได้ในหน้าแดชบอร์ด)
   ก่อน ไม่งั้นแถบบนจะดันให้ทั้งหน้าสกรอลแนวนอน */
@media (max-width: 480px) {
  .env:not(.mode) { display: none; }
  .topbar { gap: 10px; padding: 0 12px 0 0; }
  .topbar .brand { padding: 0 10px; }
}

/* เอกสารใบแจ้งหนี้อยู่ในคอลัมน์แคบ จึงบีบระยะขอบเซลล์ให้ชื่อรายการมีที่พอ */
.doc table th, .doc table td { padding: 9px 10px; }
.doc table td .sub { font-size: 11px; line-height: 1.45; }

/* รหัสอ้างอิงและวันที่ — ไม่ให้ตัดบรรทัด เพราะอ่านเป็นชุดเดียว */
td.n, .docid { white-space: nowrap; }


/* ═══ ฟอร์มป้อน Timesheet ด้วยมือ ═══ */
.frm{ display:grid; grid-template-columns:1fr 1fr; gap:13px 16px; }
.frm > label[hidden]{ display:none; }
.frm > label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px;
  font-weight:600; color:var(--ink2); min-width:0; }
.frm > label b{ color:var(--ink); }
.frm input{ font:inherit; font-size:13.5px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:var(--r-ctl); height:var(--h-ctl);
  padding:0 11px; width:100%; }
.frm input:focus{ outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand); }
.frm input[readonly]{ background:var(--sunk); color:var(--mut); cursor:default; }
.frm small{ font-weight:400; color:var(--mut); font-size:11.5px; line-height:1.45; }

/* จัดการระบบ → โดเมนอีเมล — รายชื่อลูกค้าเป็นแถวการ์ด แทนตารางเปล่าๆ ให้เข้าชุดกับการ์ดอื่นในระบบ
   (3 ก.ย. 69 ตามที่ขอ "ทำให้สวยกว่านี้") ป้ายสถานะซ้ายมือบอกทันทีว่าตั้งค่าแล้วหรือยัง ไม่ต้องเพ่งดูว่า
   ช่องกรอกว่างอยู่หรือเปล่า ปุ่มบันทึกกดไม่ได้จนกว่าจะแก้ค่า กันกดซ้ำเปล่าๆทั้งที่ไม่มีอะไรเปลี่ยน */
.domain-list { display: flex; flex-direction: column; }
.domain-row {
  display: flex; align-items: center; gap: 16px; padding: 16px 24px;
  border-bottom: 1px solid var(--hair);
}
.domain-row:last-child { border-bottom: none; }
.domain-row .dname { flex: 1 1 220px; min-width: 0; font-weight: 600; color: var(--ink); }
.domain-row .dname small { display: block; margin-top: 2px; font-weight: 400; }
.domain-row .dfield { position: relative; flex: 1 1 260px; min-width: 0; }
.domain-row .dfield::before {
  content: '@'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--fnt); font-size: 13px; font-weight: 700; pointer-events: none;
}
.dinput {
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); height: var(--h-ctl);
  padding: 0 12px 0 26px; width: 100%;
}
.dinput:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.domain-row [data-save-domain] { flex: none; }
.domain-row [data-save-domain][disabled] { opacity: .4; cursor: default; }
/* ตัวเลือกอยู่ในช่องแคบ (ครึ่งหนึ่งของการ์ด) — ต้องยอมให้ตัดลงบรรทัดใหม่
   ไม่งั้นปุ่มจะทับดรอปดาวน์เมื่อชื่อพนักงานยาว ซึ่งเกิดขึ้นจริงกับรายการที่มีชื่อ+ตำแหน่ง+ลูกค้า */
.fixa-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; align-items: stretch; }
/* ดรอปดาวน์ห่อด้วย .selectchip เหมือนช่องเลือกอื่นในระบบแล้ว — เดิมเป็น select เปล่าที่หน้าตา
   ไม่เข้าพวกกับช่องอื่น และเตี้ยกว่าปุ่มข้างๆจนดูไม่ตรงแถว */
.fixa-picker .selectchip.grow { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow: hidden; }
/* ข้อความในตัวเลือกยาว (ชื่อไทย + ชื่ออังกฤษ + ตำแหน่ง + ลูกค้า) — ถ้าไม่บังคับความกว้าง
   เบราว์เซอร์จะขยาย select ตามตัวเลือกที่ยาวที่สุดจนล้นออกนอกการ์ด */
.fixa-picker .selectchip select {
  font-size: 12.5px; width: 100%; min-width: 0; text-overflow: ellipsis;
}
.fixa-picker button { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
.fixa-picker button:disabled { opacity: .5; cursor: default; }

.fsec{ margin-top:18px; padding-top:14px; border-top:1px solid var(--hair); }
.fsec-h{ display:flex; align-items:center; justify-content:space-between;
  margin-bottom:9px; font-size:13px; color:var(--ink); }
.fhint{ display:block; margin-top:8px; color:var(--mut); font-size:11.5px; }

/* การ์ดเทียบ HRDD — แยกจากส่วนอื่นในฟอร์มด้วยกรอบ+พื้นหลังโทนแบรนด์อ่อนๆ เพราะเป็นขั้นตอนสำคัญ
   (เทียบข้อมูลกับระบบภายนอก) ไม่ใช่แค่เส้นคั่นบางๆเหมือนส่วนอื่น */
.fsec.hrdd{
  margin-top:20px; padding:16px 18px 18px; border:1px solid var(--brand-l);
  border-radius:var(--r-card); background:linear-gradient(180deg, rgba(10,120,212,.06), rgba(10,120,212,.015));
}
.fsec.hrdd .fsec-h{ margin-bottom:12px; flex-wrap:wrap; row-gap:8px; }
.fsec.hrdd .fsec-h b{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--brand-d); }
.fsec.hrdd .fsec-h b svg{ color:var(--brand); flex:none; }
.hrdd-actions{ display:flex; align-items:center; gap:10px; }
.hrddMeta{ font-size:12px; color:var(--mut); }

/* เลือกประเภทหัก ณ ที่จ่าย (27 ส.ค. 69) — อยู่ในหน้าตรวจ Timesheet ระหว่าง "เทียบกับ HRDD" กับ "ลายเซ็น" */
.wht-types{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 16px; }
.wht-type{ border:1.5px solid var(--rule); border-radius:var(--r-ctl); padding:12px 14px; cursor:pointer;
  background:var(--paper); transition:.12s; }
.wht-type:hover{ border-color:var(--brand-l); }
.wht-type.on{ border-color:var(--brand); background:var(--tint); box-shadow:0 0 0 3px var(--tint2); }
.wht-type .nm{ font-weight:700; font-size:13px; color:var(--ink); }
.wht-type.on .nm{ color:var(--brand-d); }
.wht-type .code{ font-size:11.5px; color:var(--mut); margin-top:2px; }
.stepper-row{ display:flex; align-items:center; justify-content:space-between; background:var(--sunk);
  border:1px solid var(--rule); border-radius:var(--r-ctl); padding:14px 18px; margin-bottom:14px; }
.stepper-row .lbl{ font-weight:600; color:var(--ink2); font-size:13.5px; }
.stepper-row .lbl small{ display:block; font-weight:400; color:var(--mut); font-size:11.5px; margin-top:2px; }
.stepper{ display:flex; align-items:center; gap:12px; }
.stepper button{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--rule); background:var(--paper);
  color:var(--brand); font-size:17px; font-weight:700; cursor:pointer; }
.stepper button:hover{ background:var(--tint); }
.stepper .val{ font-size:22px; font-weight:800; min-width:52px; text-align:center; color:var(--ink); }
.wht-result{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
  background:var(--crb); border-radius:var(--r-ctl); border:1px solid var(--crl); }
.wht-result span:first-child{ color:var(--cr); font-weight:600; font-size:13.5px; }
.wht-result span:last-child{ color:var(--cr); font-weight:800; font-size:18px; }

/* แผง "แก้ไข" ในตารางเทียบ HRDD — เลือกจะเอาตาม Timesheet/HRDD/ทางเลือกอื่น + เหตุผลบังคับกรอก */
.hrdd-row.resolved{ opacity:.75; }
.hrddResolvePanel{ padding:12px 4px; }
.hrr-choices{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.hrr-choice{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); cursor:pointer; }
.hrr-choice input[type="radio"]{ margin:0; accent-color:var(--brand); }
.hrr-hint{ color:var(--mut); font-size:12px; }
.hrr-custom-select{ margin-left:4px; padding:4px 8px; font-size:12.5px; border-radius:var(--r-ctl);
  border:1px solid var(--rule); width:auto; }
.hrr-reason-label{ display:block; font-size:12px; font-weight:600; color:var(--mut); margin-bottom:6px; }
.hrr-req{ color:var(--cr); font-weight:700; margin-left:2px; }
.hrr-reason{ width:100%; border:1px solid var(--rule); border-radius:var(--r-ctl); padding:8px 10px;
  font:inherit; font-size:13px; resize:vertical; outline:none; background:var(--paper); color:var(--ink); }
.hrr-reason:focus{ outline:2px solid var(--brand); outline-offset:-1px; }
.hrr-reason.invalid{ border-color:var(--cr); }
.hrr-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }

/* แถววันลา — วันที่ · ประเภท · ปุ่มลบ */
.lrow{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-bottom:8px; }
.lrow input, .lrow select{ font:inherit; font-size:13px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-ctl);
  height:var(--h-ctl-sm); padding:0 10px; min-width:0; }
.lrow input:focus, .lrow select:focus{ outline:2px solid var(--brand); outline-offset:-1px; }
/* กระพริบเน้นแถวที่ปุ่ม "แก้ไข" ของ HRDD พาคนมาดู ให้รู้ว่าใช่แถวนี้ */
.lrow.flash{ animation: lrow-flash 1.6s ease; border-radius: var(--r-ctl); }
@keyframes lrow-flash {
  0%, 100% { background: transparent; }
  15%, 60% { background: var(--wnb); }
}

@media (max-width: 900px){
  .frm{ grid-template-columns:1fr; }
}

/* ═══ ปุ่มแก้ข้อมูลหลักในตาราง ═══ */
/* ปุ่ม "+ ชื่อพ้อง/ตำแหน่งพ้อง" กับ "แก้เรท" (.lk) ไม่เคยมีสไตล์พื้นฐานมาก่อน — เดิมเป็นปุ่ม
   <button> เปล่าๆที่ยืมหน้าตาปุ่มดิบของเบราว์เซอร์มาตรงๆ (ที่มาของความ "โบราณมาก") ทำเป็นกรอบ
   ไม่มีพื้นหลัง เส้นขอบสีฟ้า มุมมนละมุนตามที่ขอ */
.lk {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--brand); background: var(--paper);
  border: 1.5px solid var(--brand); border-radius: var(--r-pill);
  padding: 4px 12px; cursor: pointer; transition: background .13s var(--ease);
}
.lk:hover { background: var(--tint); }
.lk.edrate{ display:inline-flex; margin-top:3px; }

/* แท็กชื่อพ้อง/ตำแหน่งพ้อง — เดิมเป็นสีเทาอ่อนเรียบๆ (.tg.mu) เปลี่ยนเป็นสีพาสเทลแยกชนิดตามที่ขอ:
   ชื่อพ้อง = ฟ้าอ่อน, ตำแหน่งพ้อง = เหลืองอ่อน ให้แยกแยะง่ายและดูสดใสขึ้น */
.tg.alias-name { color: var(--brand-d); background: #DDFEFF; border-color: #B8F3F5; }
.tg.alias-position { color: #8A6D00; background: #FFFDDD; border-color: #F5EFA8; }

.tg.alias{ display:inline-flex; align-items:center; gap:4px; }
.tg.alias .ax{ border:none; background:none; cursor:pointer; padding:0 0 0 2px;
  color:var(--mut); font-size:13px; line-height:1; font-family:inherit; }
.tg.alias .ax:hover{ color:var(--cr); }
/* คลิกที่แท็กเพื่อแก้ไข — ต้องดูรู้ว่ากดได้ ไม่ใช่แค่ป้ายเฉยๆ */
.tg.alias.aliastag{ cursor:pointer; }
.tg.alias.aliastag:hover{ background:var(--sel); }
/* โหมดแก้ไข/เพิ่ม — เปิด input ในหน้าแทน prompt() ของเบราว์เซอร์ */
.tg.editing{ background:var(--paper); border:1px solid var(--brand); padding:2px 4px 2px 8px; }
.aliasInput{ font:inherit; font-size:13px; color:var(--ink); background:transparent;
  border:none; outline:none; min-width:110px; padding:2px 0; }
.tg.editing .save, .tg.editing .cancel{ border:none; background:none; cursor:pointer;
  font-size:13px; line-height:1; font-family:inherit; padding:0 3px; }
.tg.editing .save{ color:var(--ok); font-weight:600; }
.tg.editing .cancel{ color:var(--mut); }
.tg.editing .save:hover{ color:var(--brand); }
.tg.editing .cancel:hover{ color:var(--cr); }
.arow{ display:flex; gap:10px; margin-top:6px; }

/* แก้เรทต่อเดือน — input ตัวเลขในหน้าแทน prompt() เหมือนกัน */
.rateEditRow{ display:inline-flex; align-items:center; gap:4px; background:var(--paper);
  border:1px solid var(--brand); border-radius:var(--r-ctl); padding:2px 4px 2px 8px; }
.rateInput{ font:inherit; font-size:13px; color:var(--ink); background:transparent;
  border:none; outline:none; width:100px; padding:2px 0; text-align:right; }
.rateEditRow .save, .rateEditRow .cancel{ border:none; background:none; cursor:pointer;
  font-size:13px; line-height:1; font-family:inherit; padding:0 3px; }
.rateEditRow .save{ color:var(--ok); font-weight:600; }
.rateEditRow .cancel{ color:var(--mut); }
.rateEditRow .save:hover{ color:var(--brand); }
.rateEditRow .cancel:hover{ color:var(--cr); }

/* แถวเพิ่มวันหยุด */
.hadd{ display:grid; grid-template-columns:170px 1fr auto; gap:8px; align-items:center; }
.hadd input{ font:inherit; font-size:13px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:var(--r-ctl); height:var(--h-ctl-sm);
  padding:0 10px; min-width:0; }
.hadd input:focus{ outline:2px solid var(--brand); outline-offset:-1px; }

/* แถบปิดงานในหน้าอนุมัติรอบบิล — มีปุ่มเดียวชิดขวา
   เดิมเส้นคั่นอยู่ที่ตัวแถบเอง เลยลากค้างอยู่กลางพื้นที่ว่างข้างปุ่มเหมือนเส้นหลุดมา
   ย้ายมาเป็นขอบล่างของบล็อกให้ลากเต็มความกว้างการ์ดเหมือนเส้นคั่นอื่นในหน้า
   และบีบระยะบน-ล่างลงจากบล็อกเนื้อหาปกติ เพราะมีแค่ปุ่มบรรทัดเดียวไม่ต้องใช้พื้นที่เท่ากัน */
.card > .bd.sendrow{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:13px 24px; border-bottom:1px solid var(--hair); }
.card > .bd.sendrow .hint{ display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--mut); line-height:1.6; }
.card > .bd.sendrow .hint svg{ flex:none; }

/* กล่องยืนยันว่าส่งเมลแล้ว — โชว์ว่าส่งถึงใคร ใครบันทึก เมื่อไหร่ ในกล่องเดียว อ่านง่ายกว่าแถบข้อความเปล่าๆ */
.sentok{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px;
  border-radius:var(--r-card); background:var(--okb); border:1px solid var(--okl); }
.sentok .ic{ color:var(--ok); flex:none; margin-top:1px; }
.sentok .ttl{ font-weight:600; color:var(--ok); font-size:13.5px; }
.sentok .meta{ font-size:12.5px; color:var(--ink2); margin-top:4px; line-height:1.7; }
.sentok .meta b{ color:var(--ink); font-weight:600; }

@media (max-width: 900px){
  .hadd{ grid-template-columns:1fr; }
}


/* กระดิ่งแจ้งเตือน — ย้ายเข้าเมนูข้างเป็นหน้าเต็มแทนแล้ว (1 ก.ย. 69 ตามที่ขอ 2 รอบ: ครั้งแรกย้ายจาก
   แถบบนมาเป็นแผงลอยในเมนูข้าง ครั้งที่สองเลิกเป็นแผงลอย เปลี่ยนเป็นหน้าเต็มเหมือนแท็บอื่น) ปุ่มใช้ style
   ของ .mtab/.bdg ร่วมกับรายการเมนูอื่นเลย ส่วนรายการแจ้งเตือนอยู่ใน .card ธรรมดาเหมือนหน้าอื่นๆ
   เหลือแค่ .bp-list กับลูกๆ ที่ยังใช้อยู่ (เดิมมี .bp-hd/.bp-ft/.bellpop สำหรับตอนเป็นแผงลอย ตัดทิ้งแล้ว) */
.bp-list { list-style: none; margin: 0; padding: 6px; }
.bp-list button {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: none; border: none; padding: 12px 12px; border-radius: var(--r-ctl);
  transition: background .12s;
}
.bp-list button:hover:not(:disabled) { background: var(--hov); }
.bp-list button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.bp-list button:disabled { cursor: default; }

.bp-tx { min-width: 0; }
.bp-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.bp-d { display: block; font-size: 12.5px; color: var(--mut); line-height: 1.5; margin-top: 2px; }
.bp-m { display: block; font-size: 11.5px; color: var(--fnt); margin-top: 5px; }

/* รายการที่ยังไม่ได้อ่าน — จุดน้ำเงินหน้าแถวและพื้นอ่อน */
.bp-list button.unread { background: var(--tint); }
.bp-list button.unread:hover { background: var(--tint2); }
.bp-list button.unread .bp-t::after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-left: 7px; vertical-align: 1px;
}

.bp-empty { padding: 34px 18px; text-align: center; font-size: 13px; color: var(--mut); }

/* ═══ ขั้นที่ 1 — กล่องอัปโหลดไฟล์ ═══ */
/* พื้นที่วางไฟล์ต้องใหญ่พอให้เห็นว่าลากมาวางได้ ไม่ใช่ปุ่มเล็กๆ ที่ต้องเดา */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 38px 20px; text-align: center; cursor: pointer;
  border: 2px dashed var(--rule); border-radius: var(--r-card);
  background: var(--sunk); transition: border-color .13s, background .13s;
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--tint); }
.drop.has { border-style: solid; border-color: var(--ok); background: var(--okb); }
.drop svg.i { width: 30px; height: 30px; color: var(--fnt); }
.drop.has svg.i { color: var(--ok); }
.drop b { font-size: 13.5px; color: var(--ink); word-break: break-all; }
.drop span { font-size: 12px; color: var(--mut); }

/* JSON ดิบ — ซ่อนไว้ ให้กดดูเมื่ออยากตรวจของที่ AI อ่าน */
.raw { margin-top: 16px; }
.raw summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--brand-d);
  padding: 6px 0; user-select: none;
}
.raw summary:hover { text-decoration: underline; }
.raw pre.code { margin-top: 8px; }

/* ═══ ขั้นที่ 4 — ปุ่มจัดการร่างอีเมล ═══ */
.mailacts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ป้ายโหมดบนแถบบน — แยกสายตาจากป้าย FlowAccount ที่อยู่ติดกัน */
.env.mode { font-weight: 600; }

/* ═══ กล่องยืนยัน (แทน confirm() ของเบราว์เซอร์) ═══ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
  animation: modal-fade .15s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--paper); border-radius: 18px; overflow: hidden;
  width: 100%; max-width: 400px; box-shadow: 0 24px 60px -12px rgba(16,24,40,.35);
  display: flex; flex-direction: column; align-items: center; position: relative;
  animation: modal-pop .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes modal-pop { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
.modal-banner {
  width: 100%; height: 104px; flex: none; position: relative; overflow: hidden;
  /* ไล่สีฟ้าอมเขียว (cyan-blue) ตามภาพตัวอย่างที่ขอเทียบสี — ตั้งใจต่างจาก --brand หลักของแอป */
  background: linear-gradient(160deg, #2bb3dd 0%, #1c7fc9 65%, #1a6fb8 100%);
}
.modal-banner::before {
  /* คลื่นตกแต่งจางๆ ท้ายแบนเนอร์ ให้ดูมีมิติแบบภาพตัวอย่าง ไม่ใช่แถบสีเรียบๆ */
  content: ''; position: absolute; left: -20%; width: 140%; bottom: -26px; height: 60px;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
}
.modal-ic {
  position: absolute; top: 104px; left: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; background: var(--paper);
  display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(16,24,40,.25);
}
.modal-ic-badge {
  width: 68px; height: 68px; border-radius: 18px; background: #eaecef;
  display: grid; place-items: center;
}
.modal-ic-badge.brand { background: var(--tint); }
.modal-ic-badge svg { width: 38px; height: 38px; color: #f0a020; }
.modal-ic-badge.brand svg { color: var(--brand); }
.modal-body { padding: 56px 28px 6px; text-align: center; }
.modal-body h3 { margin: 0 0 10px; font-size: 21px; font-weight: 600; color: #16233b; }
.modal-body p { margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.65; }
.modal-body p b { color: var(--ink); font-weight: 600; }
.modal-ft {
  display: flex; gap: 10px; justify-content: flex-end; width: 100%;
  padding: 22px 28px; border-top: 1px solid var(--hair); margin-top: 20px;
}
.modal-prompt-input {
  display: block; width: 100%; margin-top: 16px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-ctl); padding: 10px 12px; resize: vertical; text-align: left;
}
.modal-prompt-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }

/* ── ดูไฟล์ PDF ในหน้า — .modal-backdrop.pdf ใช้ backdrop เดียวกันแต่การ์ดใหญ่เต็มจอ ─── */
.pdf-card {
  max-width: min(960px, 92vw); width: 100%; height: min(90vh, 1100px);
  align-items: stretch; border-radius: 14px;
}
.pdf-hd {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hair);
}
.pdf-title {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-actions { display: flex; gap: 8px; flex: none; }
.pdf-frame { flex: 1; width: 100%; border: none; background: #525659; }
.modal-ft .btn { padding: 10px 18px; }
/* ปุ่มยกเลิกแบบตัวอักษรเปล่า ไม่มีเส้นขอบ ตามภาพตัวอย่าง */
.modal-ft .btn:not(.dgr):not(.pri) {
  border-color: transparent; background: transparent; box-shadow: none; color: var(--ink2);
}
.modal-ft .btn:not(.dgr):not(.pri):hover:not(:disabled) { background: var(--hov); color: var(--ink); }
/* ปุ่มลบตัน สีแดงสด ตัวหนังสือขาว ตามภาพตัวอย่าง (ต่างจาก .dgr ปกติของแอปที่เป็นแบบเส้นขอบ) */
.modal-ft .btn.dgr {
  background: #dc3545; border-color: #dc3545; color: #fff; box-shadow: none;
}
.modal-ft .btn.dgr:hover:not(:disabled) { background: #c62838; border-color: #c62838; }
.modal-ft .btn.dgr svg { color: #fff; }

/* ── การ์ด "AI กำลังอ่าน" ─────────────────────────────────────────
   ขึ้นทันทีที่กดปุ่ม ในตำแหน่งเดียวกับที่ผลจะไปโผล่ — เดิมคนต้องนั่งมองปุ่มที่กดไม่ได้
   เป็นนาทีๆ โดยไม่มีอะไรบอกว่าระบบยังทำงานอยู่หรือค้างไปแล้ว */
.card.pending { border-color: var(--tint2); background: linear-gradient(var(--tint), var(--paper) 70px); }
.card.pending .hd .rt { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--brand-d); }
.readwait { display: flex; flex-direction: column; gap: 9px; }
.readwait b { font-size: 13.5px; color: var(--ink); }
.readwait span { font-size: 12.5px; color: var(--mut); line-height: 1.65; }
/* แถบวิ่งไปมา — บอกว่ายังทำงานอยู่ ไม่ได้บอกเปอร์เซ็นต์ เพราะฝั่งระบบยังไม่ส่งความคืบหน้ามา
   จึงตั้งใจไม่ทำให้ดูเหมือน progress bar จริงที่รู้ว่าเหลืออีกเท่าไร */
.readwait .bar { height: 4px; border-radius: 999px; background: var(--tint2); overflow: hidden; }
.readwait .bar i {
  display: block; width: 35%; height: 100%; border-radius: 999px; background: var(--brand);
  animation: readslide 1.4s ease-in-out infinite;
}
@keyframes readslide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* แถบบอกว่ากำลังไล่อ่านอัตโนมัติ + ปุ่มหยุด — วางไว้บนสุดของรายการเมล */