/* ============================================================
   PANN design tokens + components — v1.4.0 (31 ต.ค. 2569 · เติม 4 พ.ย. ใบ 784: [hidden] ของปุ่ม/เมนู · ปุ่มลิงก์ไม่มีเส้นใต้ · ช่องมีป้ายในแถบเครื่องมือ · ช่องเลือก/ติ๊กในเมนู · หัวหน้ายาว) · v1.4 = จอคอมแน่นขึ้นแบบ Gmail/FlowAccount: ตัวหนังสือ 5 ขนาด · ปุ่ม/ช่อง 36px · หัวหน้า/แถบเครื่องมือ/แท็บขีดล่าง/ตาราง 1 บรรทัด/เมนูลอย/แถบเลือกหลายรายการ/ข้อมูลคู่ (ข้อ 13 ของ README) · มือถือไม่เปลี่ยน · ถอด rail+flyout · ชื่อตัวแปร/คลาสเดิมคงทั้งหมด
   ประวัติ: v1.3.7 แถบเมนูยาว → "เพิ่มเติม ▾" · v1.3.6 ปฏิทิน z-index · v1.3.5 aria-invalid · v1.3.4 ปฏิทินเลือกเดือน/ปี · v1.3.3 ปุ่มบันทึก/ช่องจำนวน/ปฏิทิน · v1.3.2 sidebar หมวดพับได้
   ห้อง Design · ใช้กับทุกแอป: HR · Biz · Audit · Account · Asset · และหน้ากลาง PANN
   กติกา: ห้ามเขียนสี/ฟอนต์/รัศมีเป็นเลขตรง ๆ ในหน้าใด ให้ใช้ var(--pann-*) เสมอ
   ตั้งสีประจำแอปครั้งเดียวที่ <html data-product="hr|biz|audit|account|asset|pann">
   เปลี่ยนจาก v1.2: สีแอปตามโลโก้ Hidden Meaning · เทาเย็น · accent = มิ้นต์ร่วมทุกแอป (โจตัดสิน 13 ต.ค.)
   ชื่อตัวแปร v1.2 คงไว้ทั้งหมด · เพิ่มใหม่: --pann-brand-ink · --pann-brand-hover · --pann-decor
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

:root{
  /* neutral — เทาเย็น (v1.3) */
  --pann-bg:#F5F7FA;            /* พื้นหน้า */
  --pann-surface:#FFFFFF;       /* การ์ด / header / sidebar */
  --pann-fg:#10234C;            /* ตัวหนังสือหลัก (กรมท่า) */
  --pann-fg-muted:#59677D;      /* ข้อความรอง / placeholder (5.7:1 บนขาว) */
  --pann-line:#DCE3EC;          /* เส้นคั่น ขอบการ์ด (ตกแต่ง ไม่ใช่ขอบช่องกรอก) */
  --pann-input:#778397;         /* ขอบช่องกรอก (3.8:1 ผ่านเกณฑ์ขอบ) */
  --pann-neutral-tint:#EDF2F8;  /* พื้นป้ายสถานะที่เป็นข้อมูล */

  /* semantic — เหมือนกันทุกแอป · แยกจากสีแอปและสี accent เด็ดขาด */
  --pann-success:#146340;   --pann-success-tint:#E8F5EE;   /* สำเร็จแล้ว เท่านั้น */
  --pann-attention:#875800; --pann-attention-tint:#FFF4D7; /* ต้องทำ / รอการตัดสินใจ */
  --pann-danger:#B42335;    --pann-danger-tint:#FCEBEC;    /* ผิดพลาดจริง / ลบ */
  --pann-info:#244D87;      --pann-info-tint:#EDF2FA;      /* ข้อมูล / พร้อมดู */

  /* PANN signature accent — มิ้นต์ร่วมทุกแอป (ทาง 1 · โจตัดสิน 13 ต.ค.)
     ใช้กับ: หลอดความคืบหน้า · จุดบนแถวที่ต้องลงมือ · ปุ่มเล็ก "ทำเลย" · จุดตกแต่งบนไอคอนแอป
     ห้ามใช้เป็น: ปุ่มหลัก · สีสถานะ · ข้อความบนพื้นขาว (1.8:1 ไม่ผ่าน) */
  --pann-accent:#63D4B0;
  --pann-accent-ink:#10234C;    /* ตัวหนังสือบนพื้นมิ้นต์ = กรมท่าเสมอ (8.5:1) ห้ามขาว */
  --pann-on-accent:#10234C;

  /* brand — ค่าเริ่มต้น = HR; สลับด้วย data-product */
  --pann-brand:#2158C9;         /* ปุ่มหลัก 1 ปุ่ม/หน้า · แท็บที่เลือก · ปุ่มลอย */
  --pann-on-brand:#FFFFFF;      /* ตัวหนังสือบนปุ่มหลัก (Biz/Asset = กรมท่า) */
  --pann-brand-hover:#1D4DB1;   /* ปุ่มหลักตอนชี้ (ตรวจคู่กับ on-brand แล้ว) */
  --pann-brand-dark:#1D4DB1;    /* (v1.2) คงไว้เพื่อโค้ดเดิม = hover */
  --pann-brand-ink:#2158C9;     /* ลิงก์ · ข้อความเมนูที่เลือก · ขอบปุ่มรอง (บนขาว ≥ 5.4:1) */
  --pann-brand-tint:#ECF2FF;    /* พื้นเมนูที่เลือก / แท็บที่เลือก / แผงงานหลัก */
  --pann-brand-soft:#F6F9FF;    /* พื้นการ์ด "สิ่งที่ต้องทำวันนี้" (เดสก์ท็อป) */
  --pann-brand-line:#C5E1F9;    /* ขอบการ์ดนั้น */
  --pann-decor:#1688E5;         /* สีโลโก้ · ภาพประกอบ · ไม่ใช้กับข้อความหรือปุ่ม */

  /* type */
  --pann-font:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --pann-t-num:32px; --pann-t-h1:24px; --pann-t-h2:18px; --pann-t-body:16px; --pann-t-small:14px; --pann-t-tab:12px;

  /* space 4px base */
  --pann-s1:4px; --pann-s2:8px; --pann-s3:12px; --pann-s4:16px; --pann-s5:20px; --pann-s6:24px; --pann-s7:32px; --pann-s8:48px;
  --pann-gutter:16px; --pann-maxw:1180px;

  /* radius / shadow */
  --pann-r-card:16px; --pann-r-ctl:12px; --pann-r-pill:999px; --pann-r-hero:20px;
  --pann-shadow:0 1px 2px rgba(16,35,76,.06);
  --pann-shadow-float:0 8px 24px rgba(16,35,76,.12);

  /* control sizes */
  --pann-btn-h:48px; --pann-btn-hero-h:80px; --pann-field-h:48px; --pann-pill-h:24px;

  /* shell (v1.3) */
  --pann-header-h:64px; --pann-sidebar-w:232px; --pann-tabbar-h:64px;
}
/* v1.4 · ความแน่นของจอคอม (≥ 900px) — มือถือคงค่าเดิม (ตัวหนังสือ 16 · ปุ่ม 48 · กดด้วยนิ้ว)
   5 ขนาดเท่านั้นทั้งแอป: num 24 · h1 20 · h2 16 · body 14 · small 13 (ป้ายแท็บล่าง 12 มีแต่มือถือ) — ห้ามเขียน font-size เป็นเลข/rem ในหน้าใด */
:root{ --pann-row-h:48px; --pann-btn-sm-h:36px; --pann-toolbar-gap:var(--pann-s2); --pann-pagehead-mb:var(--pann-s4); }
@media (min-width:900px){ :root{
  --pann-gutter:24px; --pann-header-h:56px; --pann-sidebar-w:224px;
  --pann-t-num:24px; --pann-t-h1:20px; --pann-t-h2:16px; --pann-t-body:14px; --pann-t-small:13px;
  --pann-btn-h:36px; --pann-field-h:36px; --pann-pill-h:22px; --pann-btn-sm-h:30px; --pann-row-h:40px;
  --pann-r-card:12px; --pann-r-ctl:8px; --pann-r-hero:16px;
} }

/* ---------- สีประจำแอป (v1.3 · จากโลโก้ Hidden Meaning · คู่ปุ่มตรวจคอนทราสต์แล้ว) ---------- */
:root[data-product="biz"]{     --pann-brand:#E9A50B; --pann-on-brand:#10234C; --pann-brand-hover:#CD910A; --pann-brand-dark:#CD910A; --pann-brand-ink:#916000; --pann-brand-tint:#FFF6DF; --pann-brand-soft:#FFFBEF; --pann-brand-line:#FAE9C2; --pann-decor:#E9A50B; }
:root[data-product="audit"]{   --pann-brand:#6847D9; --pann-on-brand:#FFFFFF; --pann-brand-hover:#5C3EBF; --pann-brand-dark:#5C3EBF; --pann-brand-ink:#6840C8; --pann-brand-tint:#F1ECFC; --pann-brand-soft:#F8F6FE; --pann-brand-line:#D9D1F6; --pann-decor:#6847D9; }
:root[data-product="account"]{ --pann-brand:#087950; --pann-on-brand:#FFFFFF; --pann-brand-hover:#076A46; --pann-brand-dark:#076A46; --pann-brand-ink:#087950; --pann-brand-tint:#EAF6EF; --pann-brand-soft:#F5FBF7; --pann-brand-line:#C5E6DA; --pann-decor:#15996B; }
:root[data-product="asset"]{   --pann-brand:#F76055; --pann-on-brand:#10234C; --pann-brand-hover:#F87066; --pann-brand-dark:#B33E33; --pann-brand-ink:#B33E33; --pann-brand-tint:#FFF0ED; --pann-brand-soft:#FFF8F6; --pann-brand-line:#FDD7D5; --pann-decor:#F76055; }
:root[data-product="pann"]{    --pann-brand:#1557E8; --pann-on-brand:#FFFFFF; --pann-brand-hover:#124DCC; --pann-brand-dark:#124DCC; --pann-brand-ink:#1557E8; --pann-brand-tint:#E3EBFC; --pann-brand-soft:#F1F5FE; --pann-brand-line:#C5D5F9; --pann-decor:#1557E8; }
/* "count" เลิกใช้แล้ว (รวมเข้า audit 8 ต.ค.) — คงไว้ชั่วคราวให้หน้าเก่าไม่พัง */
:root[data-product="count"]{   --pann-brand:#6847D9; --pann-on-brand:#FFFFFF; --pann-brand-hover:#5C3EBF; --pann-brand-dark:#5C3EBF; --pann-brand-ink:#6840C8; --pann-brand-tint:#F1ECFC; --pann-brand-soft:#F8F6FE; --pann-brand-line:#D9D1F6; --pann-decor:#6847D9; }

/* ---------- base ---------- */
html{ font-family:var(--pann-font); font-size:16px; line-height:1.5; color:var(--pann-fg); background:var(--pann-bg); -webkit-text-size-adjust:100%; }
body{ margin:0; font-size:var(--pann-t-body); }
h1{ font-size:var(--pann-t-h1); font-weight:700; margin:0; text-wrap:balance; }
h2{ font-size:var(--pann-t-h2); font-weight:600; margin:0; }
.pann-num{ font-size:var(--pann-t-num); font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.pann-muted{ color:var(--pann-fg-muted); font-size:var(--pann-t-small); }
.pann-page{ max-width:var(--pann-maxw); margin:0 auto; padding-inline:var(--pann-gutter); padding-block:var(--pann-s4) var(--pann-s8); }
a{ color:var(--pann-brand-ink); }
:focus-visible{ outline:3px solid var(--pann-brand-ink); outline-offset:3px; }

/* ---------- buttons ---------- */
.pann-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--pann-s2); height:var(--pann-btn-h); padding:0 var(--pann-s5); border-radius:var(--pann-r-ctl); font:inherit; font-weight:600; border:1px solid transparent; cursor:pointer; min-width:0; }
.pann-btn--primary{ background:var(--pann-brand); color:var(--pann-on-brand); }
.pann-btn--primary:hover{ background:var(--pann-brand-hover); }
.pann-btn--secondary{ background:var(--pann-surface); color:var(--pann-brand-ink); border-color:var(--pann-brand-ink); }
.pann-btn--ghost{ background:transparent; color:var(--pann-brand-ink); }
.pann-btn--danger{ background:var(--pann-danger); color:#fff; }
.pann-btn--hero{ width:100%; height:var(--pann-btn-hero-h); font-size:20px; border-radius:var(--pann-r-hero); }
.pann-btn--hero.is-done{ background:var(--pann-success); color:#fff; }
.pann-btn[disabled]{ background:var(--pann-neutral-tint); color:var(--pann-fg-muted); border-color:transparent; cursor:default; }
/* ปุ่มลอย (FAB) — ปุ่มหลักของหน้าบนมือถือ อยู่ขวาล่างเหนือแถบเมนูล่าง */
.pann-fab{ position:fixed; right:var(--pann-gutter); bottom:calc(var(--pann-tabbar-h) + var(--pann-s4) + env(safe-area-inset-bottom,0px)); z-index:30; border-radius:var(--pann-r-pill); box-shadow:var(--pann-shadow-float); }
@media (min-width:900px){ .pann-fab{ position:static; box-shadow:none; border-radius:var(--pann-r-ctl); } }

/* ---------- cards ---------- */
.pann-card{ background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-card); padding:var(--pann-s4); box-shadow:var(--pann-shadow); min-width:0; }
@media (min-width:900px){ .pann-card{ padding:var(--pann-s5); } }
.pann-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--pann-s3); margin-bottom:var(--pann-s3); }
.pann-card--todo{ background:var(--pann-brand-soft); border-color:var(--pann-brand-line); }
.pann-todo-row{ display:flex; align-items:center; gap:var(--pann-s3); background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-ctl); padding:var(--pann-s3) var(--pann-s4); }
.pann-todo-row + .pann-todo-row{ margin-top:var(--pann-s2); }
.pann-todo-row__dot{ width:8px; height:8px; border-radius:50%; background:var(--pann-line); flex:none; }
.pann-todo-row.is-action .pann-todo-row__dot{ background:var(--pann-accent); }
.pann-todo-row__go{ font-size:var(--pann-t-small); font-weight:600; padding:6px 12px; border-radius:8px; background:var(--pann-brand-tint); color:var(--pann-brand-ink); }
.pann-todo-row.is-action .pann-todo-row__go{ background:var(--pann-accent); color:var(--pann-on-accent); }
.pann-card--todo-dark{ background:var(--pann-brand); color:var(--pann-on-brand); }
.pann-card--todo-dark .pann-todo-row{ color:var(--pann-fg); }
.pann-num.is-action{ color:var(--pann-brand-ink); }

/* ---------- stat tiles ---------- */
.pann-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pann-s3); }
@media (min-width:900px){ .pann-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pann-stat{ background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-card); padding:var(--pann-s4); display:grid; gap:var(--pann-s1); }

/* ---------- forms ---------- */
.pann-field{ display:grid; gap:var(--pann-s1); }
.pann-field__label{ font-size:var(--pann-t-small); font-weight:500; }
.pann-input{ height:var(--pann-field-h); padding:0 var(--pann-s4); border:1px solid var(--pann-input); border-radius:var(--pann-r-ctl); font:inherit; background:var(--pann-surface); color:var(--pann-fg); width:100%; box-sizing:border-box; }
.pann-input::placeholder{ color:var(--pann-fg-muted); }
.pann-input:focus{ outline:none; border:2px solid var(--pann-brand-ink); padding-inline:calc(var(--pann-s4) - 1px); }
.pann-input.is-auto{ color:var(--pann-fg-muted); }
.pann-input[aria-invalid="true"]{ border-color:var(--pann-danger); } .pann-input[aria-invalid="true"]:focus{ border-color:var(--pann-danger); }
.pann-chips{ display:flex; flex-wrap:wrap; gap:var(--pann-s2); }
.pann-chip{ height:40px; padding:0 var(--pann-s4); border-radius:var(--pann-r-pill); border:1px solid var(--pann-input); background:var(--pann-surface); font:inherit; cursor:pointer; }
.pann-chip.is-selected{ border-color:var(--pann-brand-ink); background:var(--pann-brand-tint); color:var(--pann-brand-ink); font-weight:600; }
.pann-steps{ display:flex; align-items:center; gap:var(--pann-s2); }
.pann-steps__n{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:var(--pann-t-small); font-weight:600; background:var(--pann-neutral-tint); color:var(--pann-fg-muted); }
.pann-steps__n.is-current{ background:var(--pann-brand); color:var(--pann-on-brand); }
.pann-steps__n.is-done{ background:var(--pann-success); color:#fff; }
.pann-steps__bar{ flex:1; height:4px; border-radius:2px; background:var(--pann-line); }
.pann-steps__bar.is-done{ background:var(--pann-success); }
.pann-progress{ height:8px; border-radius:4px; background:var(--pann-line); overflow:hidden; }
.pann-progress > i{ display:block; height:100%; background:var(--pann-accent); }

/* ---------- status pills (สถานะ = ข้อมูล ไม่ใช่คำเตือน · ไม่ใช้สีแอปหรือมิ้นต์) ---------- */
.pann-pill{ display:inline-flex; align-items:center; gap:6px; height:var(--pann-pill-h); padding:0 10px; border-radius:var(--pann-r-pill); font-size:var(--pann-t-small); font-weight:500; background:var(--pann-neutral-tint); color:var(--pann-fg); white-space:nowrap; }
.pann-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--pann-fg-muted); }
.pann-pill--success{ background:var(--pann-success-tint); color:var(--pann-success); } .pann-pill--success::before{ background:var(--pann-success); }
.pann-pill--attention{ background:var(--pann-attention-tint); color:var(--pann-attention); } .pann-pill--attention::before{ background:var(--pann-attention); }
.pann-pill--danger{ background:var(--pann-danger-tint); color:var(--pann-danger); } .pann-pill--danger::before{ background:var(--pann-danger); }
.pann-pill--info{ background:var(--pann-info-tint); color:var(--pann-info); } .pann-pill--info::before{ background:var(--pann-info); }

/* ---------- table / list ---------- */
.pann-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.pann-table th{ text-align:left; font-size:var(--pann-t-small); font-weight:600; color:var(--pann-fg-muted); padding:var(--pann-s2) var(--pann-s3); border-bottom:1px solid var(--pann-line); background:var(--pann-bg); }
.pann-table td{ padding:var(--pann-s3); border-bottom:1px solid var(--pann-line); }
.pann-table tr.is-action td{ background:var(--pann-attention-tint); }
.pann-table-wrap{ overflow-x:auto; }
.pann-list > *{ padding:var(--pann-s3) 0; border-bottom:1px solid var(--pann-line); }

/* ---------- empty / alerts / toast ---------- */
.pann-empty{ text-align:center; padding:var(--pann-s7) var(--pann-s4); display:grid; gap:var(--pann-s3); justify-items:center; color:var(--pann-fg-muted); }
.pann-alert{ border:1px solid var(--pann-line); border-radius:var(--pann-r-ctl); padding:var(--pann-s3) var(--pann-s4); display:grid; gap:var(--pann-s1); }
.pann-alert--danger{ border-color:var(--pann-danger); background:var(--pann-danger-tint); }
.pann-alert--attention{ border-color:var(--pann-attention); background:var(--pann-attention-tint); }
.pann-alert--info{ background:var(--pann-info-tint); border-color:var(--pann-info); }
.pann-alert__ref{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); }
.pann-toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--pann-s6) + env(safe-area-inset-bottom,0px)); background:var(--pann-success); color:#fff; padding:var(--pann-s3) var(--pann-s5); border-radius:var(--pann-r-ctl); box-shadow:var(--pann-shadow-float); max-width:calc(100% - 2*var(--pann-gutter)); z-index:40; }

/* ---------- shell v1.3: header + sidebar + tabbar (โครงร่วมทุกแอป) ---------- */
.pann-header{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--pann-s4); height:var(--pann-header-h); padding:0 var(--pann-gutter); background:var(--pann-surface); border-bottom:1px solid var(--pann-line); }
.pann-header__logo{ display:flex; align-items:center; gap:var(--pann-s3); color:var(--pann-fg); text-decoration:none; font-weight:700; font-size:20px; min-height:44px; } /* กดโลโก้ = เปิดตัวสลับแอป */
.pann-header__logo img, .pann-header__logo svg{ width:40px; height:40px; border-radius:11px; }
.pann-header__ctx{ display:grid; line-height:1.2; }                 /* บริบทองค์กร: ป้ายเล็ก + ชื่อ */
.pann-header__ctx small{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); }
.pann-header__tools{ margin-left:auto; display:flex; align-items:center; gap:var(--pann-s3); }
.pann-avatar{ width:40px; height:40px; border-radius:50%; background:var(--pann-brand-tint); color:var(--pann-brand-ink); display:grid; place-items:center; font-weight:600; border:1px solid var(--pann-brand-line); }
.pann-layout{ display:grid; grid-template-columns:1fr; min-height:calc(100vh - var(--pann-header-h)); }
@media (min-width:900px){ .pann-layout{ grid-template-columns:var(--pann-sidebar-w) 1fr; } }
.pann-sidebar{ background:var(--pann-surface); border-right:1px solid var(--pann-line); padding:var(--pann-s4); display:none; flex-direction:column; gap:var(--pann-s1); }
@media (min-width:900px){ .pann-sidebar{ display:flex; } }
.pann-sidebar__group{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); font-weight:500; margin:var(--pann-s3) var(--pann-s3) var(--pann-s1); }
.pann-sidebar a{ display:flex; align-items:center; gap:var(--pann-s3); min-height:44px; padding:0 var(--pann-s3); border-radius:var(--pann-r-ctl); color:var(--pann-fg); text-decoration:none; font-weight:500; }
.pann-sidebar a svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pann-sidebar a:hover{ background:var(--pann-bg); }
.pann-sidebar a.is-active{ background:var(--pann-brand-tint); color:var(--pann-brand-ink); font-weight:600; box-shadow:inset 3px 0 0 var(--pann-brand); }
.pann-main{ padding:var(--pann-s4) var(--pann-gutter) calc(var(--pann-tabbar-h) + var(--pann-s8)); min-width:0; }
@media (min-width:900px){ .pann-main{ padding:var(--pann-s6) var(--pann-s7) var(--pann-s8); } }
/* แถบเมนูล่าง มือถือ (HR · Biz ต้องมี · แอปเดสก์ท็อปใช้ ☰ ได้) */
.pann-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(4,1fr); height:calc(var(--pann-tabbar-h) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); background:var(--pann-surface); border-top:1px solid var(--pann-line); }
.pann-tabbar a{ display:grid; justify-items:center; align-content:center; gap:2px; font-size:var(--pann-t-tab); font-weight:500; color:var(--pann-fg-muted); text-decoration:none; }
.pann-tabbar a svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pann-tabbar a.is-active{ color:var(--pann-brand-ink); background:var(--pann-brand-tint); }
@media (min-width:900px){ .pann-tabbar{ display:none; } }
/* เมนูบัญชีผู้ใช้ (เดสก์ท็อป = กล่องลอยใต้ avatar · มือถือ = แผ่นเลื่อนจากล่าง) */
.pann-usermenu{ background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-card); box-shadow:var(--pann-shadow-float); padding:var(--pann-s2); min-width:300px; }
.pann-usermenu a, .pann-usermenu button{ display:flex; align-items:center; gap:var(--pann-s3); width:100%; min-height:48px; padding:0 var(--pann-s3); border:0; background:none; border-radius:var(--pann-r-ctl); font:inherit; color:var(--pann-fg); text-decoration:none; text-align:left; cursor:pointer; }
.pann-usermenu a:hover, .pann-usermenu button:hover{ background:var(--pann-bg); }
.pann-usermenu hr{ border:0; border-top:1px solid var(--pann-line); margin:var(--pann-s2) 0; }
.pann-usermenu .is-danger{ color:var(--pann-danger); }
@media (max-width:899px){ .pann-usermenu{ position:fixed; left:0; right:0; bottom:0; border-radius:var(--pann-r-hero) var(--pann-r-hero) 0 0; max-height:85vh; overflow:auto; padding-bottom:calc(var(--pann-s4) + env(safe-area-inset-bottom,0px)); } }

/* ---------- v1.1 — ทางกลับ + แถบปุ่มติดล่าง (จากห้อง HR) ---------- */
.pann-back{ display:inline-flex; align-items:center; gap:var(--pann-s1); min-height:44px; font-size:var(--pann-t-body); font-weight:500; color:var(--pann-brand-ink); text-decoration:none; }
.pann-back::before{ content:"‹"; font-size:22px; line-height:1; }
.pann-actionbar{ position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:var(--pann-s3); background:var(--pann-surface); border-top:1px solid var(--pann-line); box-shadow:var(--pann-shadow-float); padding:var(--pann-s3) var(--pann-gutter) calc(var(--pann-s3) + env(safe-area-inset-bottom,0px)); }
.pann-actionbar__status{ flex:1; min-width:0; font-size:var(--pann-t-small); color:var(--pann-fg-muted); }
.pann-actionbar__summary{ flex:1; min-width:0; display:grid; gap:2px; font-variant-numeric:tabular-nums; }
.pann-actionbar__summary b{ font-size:22px; font-weight:700; }
.pann-actionbar .pann-btn{ flex:none; }
.has-tabbar .pann-actionbar{ bottom:calc(var(--pann-tabbar-h) + env(safe-area-inset-bottom,0px)); padding-bottom:var(--pann-s3); }
@media (max-width:899px){
  .pann-actionbar__status{ display:none; }
  .pann-actionbar:not(:has(.pann-actionbar__summary)) .pann-btn{ flex:1; }
}

/* ---- v1.3.2 · sidebar ข้อความแบบหมวดพับได้ (Account · แอปอื่นใช้ได้ถ้าต้องการ) ---- */
.pann-sidebar__sec{ margin:var(--pann-s1) 0; }
.pann-sidebar__sec > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; height:36px; padding:0 var(--pann-s3); font-size:var(--pann-t-small); font-weight:500; color:var(--pann-fg-muted); border-radius:var(--pann-r-ctl); user-select:none; }
.pann-sidebar__sec > summary::-webkit-details-marker{ display:none; }
.pann-sidebar__sec > summary::after{ content:""; width:8px; height:8px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(-45deg); transition:transform .15s; margin-right:4px; }
.pann-sidebar__sec[open] > summary::after{ transform:rotate(45deg); }
.pann-sidebar__sec > summary:hover{ background:var(--pann-brand-soft); color:var(--pann-fg); }
.pann-sidebar__sec a{ min-height:40px; padding:0 var(--pann-s3) 0 var(--pann-s6); }
.pann-sidebar__sec:has(a.is-active) > summary{ color:var(--pann-fg); }
.pann-sidebar__top{ margin-bottom:var(--pann-s2); padding-bottom:var(--pann-s2); border-bottom:1px solid var(--pann-line); }
.pann-sidebar__bottom{ margin-top:auto; padding-top:var(--pann-s2); border-top:1px solid var(--pann-line); }
/* drawer มือถือ (☰ ใน header) — เมนูชุดเดียวกับ sidebar */
.pann-drawer{ position:fixed; inset:0; z-index:60; display:none; }
.pann-drawer.is-open{ display:block; }
.pann-drawer__scrim{ position:absolute; inset:0; background:rgba(16,35,76,.4); }
.pann-drawer .pann-sidebar{ position:absolute; left:0; top:0; bottom:0; width:min(85vw,320px); display:flex; overflow:auto; box-shadow:var(--pann-shadow-float); }

/* ---- v1.3.3 · 6.1 ปุ่มบันทึก 3 สถานะ ---- */
.pann-btn.is-busy{ pointer-events:none; opacity:.85; }
.pann-btn.is-saved{ background:var(--pann-success-tint); color:var(--pann-success); border-color:transparent; pointer-events:none; }
.pann-save-hint{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); margin-top:var(--pann-s1); }
.pann-save-hint.is-dirty{ color:var(--pann-attention); }
/* 6.3 ช่องจำนวนเงิน/ปริมาณ */
.pann-input--amount{ text-align:right; font-variant-numeric:tabular-nums; }
/* 6.4 ปฏิทินเลือกวันที่ */
.pann-datefield{ position:relative; }
.pann-datefield .pann-input{ padding-right:44px; }
.pann-datefield__icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--pann-fg-muted); pointer-events:none; }
.pann-datepicker{ position:absolute; z-index:1000; margin-top:var(--pann-s1); width:320px; background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-card); box-shadow:var(--pann-shadow-float); padding:var(--pann-s3); }
.pann-datepicker__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--pann-s2); margin-bottom:var(--pann-s2); font-weight:600; }
.pann-datepicker__head button{ height:36px; min-width:36px; border:0; background:transparent; border-radius:var(--pann-r-ctl); font:inherit; color:var(--pann-brand-ink); cursor:pointer; }
.pann-datepicker__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.pann-datepicker__dow{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); text-align:center; padding:4px 0; }
.pann-datepicker__day{ height:40px; border:0; background:transparent; border-radius:var(--pann-r-ctl); font:inherit; font-variant-numeric:tabular-nums; color:var(--pann-fg); cursor:pointer; }
.pann-datepicker__day:hover{ background:var(--pann-brand-soft); }
.pann-datepicker__day.is-today{ box-shadow:inset 0 0 0 2px var(--pann-brand-ink); }
.pann-datepicker__day.is-selected{ background:var(--pann-brand); color:var(--pann-on-brand); }
.pann-datepicker__day.is-outside,.pann-datepicker__day[disabled]{ color:var(--pann-fg-muted); opacity:.6; cursor:default; }
.pann-datepicker__foot{ display:flex; justify-content:space-between; margin-top:var(--pann-s2); }
.pann-datepicker__title{ flex:1; text-align:center; font-weight:600; padding:0 var(--pann-s2); }
.pann-datepicker__head button.pann-datepicker__title:hover{ background:var(--pann-brand-soft); }
.pann-datepicker__grid--wide{ grid-template-columns:repeat(4,1fr); gap:var(--pann-s1); }
.pann-datepicker__grid--wide .pann-datepicker__day{ height:52px; font-size:var(--pann-t-small); padding:0 2px; }
@media (max-width:600px){
  .pann-datepicker{ position:fixed; left:0; right:0; bottom:0; width:auto; margin:0; border-radius:var(--pann-r-card) var(--pann-r-card) 0 0; padding-bottom:calc(var(--pann-s4) + env(safe-area-inset-bottom,0px)); }
  .pann-datepicker__day{ height:48px; }
}

/* ---- v1.3.7 · แถบเมนู/แท็บยาวเกินจอ → "เพิ่มเติม ▾" (README ข้อ 5 · pann-widgets.js v1.4 overflowNav · แบบแถบแท็บของ GitHub) ----
   ใส่ data-overflow-nav ที่แถบ (หรือเรียก PannWidgets.overflowNav(แถบ)) — ชิ้น JS ใส่ .pann-tabs--overflow + ปุ่ม .pann-more ท้ายแถบให้เอง
   รายการที่ล้นแค่ถูกซ่อน (data-pann-overflowed) ไม่ถูกย้าย · แถบไม่ตัดบรรทัด ไม่เลื่อนแนวนอน · เมนูลอย z-index เท่าปฏิทิน (1000) */
.pann-tabs--overflow{ display:flex; flex-wrap:nowrap!important; align-items:center; min-width:0; max-width:100%; overflow:visible!important; }   /* !important: ชนะ overflow-x:auto / flex-wrap เดิมของแอป (ไม่งั้นเมนูลอยถูกตัด) */
.pann-tabs--overflow > *{ flex:none; white-space:nowrap; }
.pann-tabs--overflow > [data-pann-overflowed]{ display:none!important; }
.pann-more{ position:relative; flex:none; }
.pann-more[hidden]{ display:none!important; }
.pann-more__btn{ display:inline-flex; align-items:center; gap:var(--pann-s1); min-height:44px; padding:0 var(--pann-s3); border:0; border-radius:var(--pann-r-ctl); background:transparent; font:inherit; font-weight:600; color:var(--pann-fg-muted); cursor:pointer; white-space:nowrap; }
.pann-more__btn:hover,.pann-more.is-open .pann-more__btn{ background:var(--pann-brand-soft); color:var(--pann-fg); }
.pann-more__caret{ font-size:var(--pann-t-small); line-height:1; }
.pann-more__menu{ position:absolute; top:100%; right:0; z-index:1000; margin-top:var(--pann-s1); min-width:200px; max-width:min(320px, calc(100vw - 2*var(--pann-gutter))); max-height:min(60vh, 420px); overflow:auto; background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-card); box-shadow:var(--pann-shadow-float); padding:var(--pann-s1) 0; }
.pann-more__menu[hidden]{ display:none; }
.pann-more__menu--start{ right:auto; left:0; }
.pann-more__item{ display:flex; align-items:center; width:100%; min-height:44px; padding:0 var(--pann-s4); border:0; background:transparent; font:inherit; font-size:var(--pann-t-body); color:var(--pann-fg); text-align:left; text-decoration:none; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.pann-more__item:hover,.pann-more__item:focus-visible{ background:var(--pann-brand-soft); }
.pann-more__item:focus-visible{ outline-offset:-3px; }
.pann-more__item[aria-disabled="true"]{ color:var(--pann-fg-muted); pointer-events:none; }
@media (max-width:600px){
  .pann-more__menu{ min-width:min(240px, calc(100vw - 2*var(--pann-gutter))); max-width:calc(100vw - 2*var(--pann-gutter)); }
}

/* ============================================================
   v1.4 · จอคอมแน่นขึ้น + ชิ้นจัดหน้า (README ข้อ 13)
   กติกา: หัวหน้า 1 แถว (ชื่อซ้าย ปุ่มขวา) · ปุ่มหลักทึบ 1 ปุ่ม ที่เหลือขอบ/ตัวหนังสือ/ไอคอน · ปุ่มหลายอันที่เป็นเรื่องเดียวกัน = เมนู ▾ ปุ่มเดียว
   ตาราง = เซลล์ละ 1 บรรทัด ตัวเลขชิดขวา · หน้ารายละเอียด = ข้อมูลคู่ (ป้าย : ค่า) ไม่ใช่ช่องเบียดบน-ล่าง
   ============================================================ */

/* ---- ความแน่นของของเดิมบนจอคอม ---- */
@media (min-width:900px){
  .pann-card{ padding:var(--pann-s4); }
  .pann-card__head{ margin-bottom:var(--pann-s3); }
  .pann-card__head h2,.pann-card__head h3{ font-size:var(--pann-t-h2); font-weight:600; margin:0; }
  .pann-btn{ padding:0 var(--pann-s4); font-weight:500; }
  .pann-btn--primary{ font-weight:600; }
  .pann-input{ padding:0 var(--pann-s3); }
  .pann-input:focus{ padding-inline:calc(var(--pann-s3) - 1px); }
  .pann-chip{ height:32px; padding:0 var(--pann-s3); font-size:var(--pann-t-small); }
  .pann-stat{ padding:var(--pann-s3) var(--pann-s4); }
  .pann-header__logo{ font-size:var(--pann-t-h2); min-height:36px; }
  .pann-header__logo img,.pann-header__logo svg{ width:32px; height:32px; border-radius:9px; }
  .pann-avatar{ width:32px; height:32px; font-size:var(--pann-t-small); }
  .pann-sidebar{ padding:var(--pann-s3) var(--pann-s2); gap:2px; }
  .pann-sidebar a{ min-height:36px; gap:var(--pann-s3); padding:0 var(--pann-s3); border-radius:var(--pann-r-ctl); }
  .pann-sidebar a svg{ width:18px; height:18px; }
  .pann-sidebar__sec > summary{ height:32px; }
  .pann-sidebar__sec a{ min-height:34px; }
  .pann-main{ padding:var(--pann-s5) var(--pann-s6) var(--pann-s8); }
  .pann-usermenu a,.pann-usermenu button{ min-height:40px; }
  .pann-more__btn,.pann-more__item{ min-height:36px; }
  .pann-back{ min-height:32px; font-size:var(--pann-t-small); }
  .pann-back::before{ font-size:18px; }
  .pann-empty{ padding:var(--pann-s6) var(--pann-s4); }
  .pann-datepicker__day{ height:34px; }
}

/* ---- ปุ่ม: ลำดับชั้น ---- */
.pann-btn--sm{ height:var(--pann-btn-sm-h); padding:0 var(--pann-s3); font-size:var(--pann-t-small); }
.pann-btn--text{ background:transparent; color:var(--pann-brand-ink); border-color:transparent; padding-inline:var(--pann-s2); }
.pann-btn--text:hover,.pann-btn--ghost:hover{ background:var(--pann-brand-soft); }
.pann-btn--secondary:hover{ background:var(--pann-brand-soft); }
.pann-btn--neutral{ background:var(--pann-surface); color:var(--pann-fg); border-color:var(--pann-line); }   /* ปุ่มรองที่ไม่ต้องเด่น (ส่งออก · ตัวกรอง) */
.pann-btn--neutral:hover{ background:var(--pann-bg); border-color:var(--pann-input); }
.pann-btn--icon{ width:var(--pann-btn-h); padding:0; flex:none; }
.pann-btn--icon.pann-btn--sm{ width:var(--pann-btn-sm-h); }
.pann-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.pann-btn--sm svg{ width:16px; height:16px; }
.pann-btn__caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; margin-left:2px; }
.pann-btn--danger-text{ background:transparent; color:var(--pann-danger); border-color:transparent; }
.pann-btn--danger-text:hover{ background:var(--pann-danger-tint); }
.pann-btngroup{ display:inline-flex; align-items:center; gap:var(--pann-s2); flex-wrap:wrap; }

/* ---- หัวหน้า: ชื่อ + คำอธิบายสั้น ซ้าย · ปุ่มขวา · แถวเดียว ---- */
.pann-pagehead{ display:flex; align-items:center; justify-content:space-between; gap:var(--pann-s3) var(--pann-s4); flex-wrap:wrap; margin-bottom:var(--pann-pagehead-mb); min-height:var(--pann-btn-h); }
.pann-pagehead__title{ display:flex; align-items:baseline; gap:var(--pann-s3); flex-wrap:wrap; min-width:0; }
.pann-pagehead__title h1{ font-size:var(--pann-t-h1); font-weight:600; line-height:1.3; }
.pann-pagehead__count{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); font-variant-numeric:tabular-nums; }
.pann-pagehead__sub{ flex-basis:100%; font-size:var(--pann-t-small); color:var(--pann-fg-muted); margin-top:-2px; }
.pann-pagehead__actions{ display:flex; align-items:center; gap:var(--pann-s2); margin-left:auto; flex-wrap:wrap; }
@media (max-width:599px){
  .pann-pagehead__actions{ width:100%; margin-left:0; }
  .pann-pagehead__actions > .pann-btn--primary,.pann-pagehead__actions > .pann-menu:last-child{ flex:1; }
  .pann-pagehead__actions > .pann-menu:last-child > summary{ width:100%; box-sizing:border-box; }
  .pann-bulkbar{ padding-block:var(--pann-s1); }
}
.pann-crumbs{ display:flex; align-items:center; gap:var(--pann-s1); font-size:var(--pann-t-small); color:var(--pann-fg-muted); margin-bottom:var(--pann-s2); flex-wrap:wrap; }
.pann-crumbs a{ color:var(--pann-fg-muted); text-decoration:none; }
.pann-crumbs a:hover{ color:var(--pann-brand-ink); text-decoration:underline; }
.pann-crumbs > * + *::before{ content:"/"; margin-right:var(--pann-s1); color:var(--pann-line); }

/* ---- แถบเครื่องมือเหนือตาราง: ค้นหา · ตัวกรอง ซ้าย · ปุ่มรองขวา ---- */
.pann-toolbar{ display:flex; align-items:center; gap:var(--pann-toolbar-gap); flex-wrap:wrap; margin-bottom:var(--pann-s3); }
.pann-toolbar__spacer{ flex:1; }
.pann-search{ position:relative; flex:1 1 240px; max-width:360px; min-width:0; }
.pann-search .pann-input{ padding-left:36px; }
.pann-search .pann-input:focus{ padding-left:35px; }
.pann-search::before{ content:""; position:absolute; left:12px; top:50%; width:14px; height:14px; margin-top:-8px; border:1.8px solid var(--pann-fg-muted); border-radius:50%; box-sizing:border-box; pointer-events:none; }
.pann-search::after{ content:""; position:absolute; left:23px; top:50%; width:6px; height:1.8px; margin-top:4px; background:var(--pann-fg-muted); transform:rotate(45deg); pointer-events:none; }
.pann-select{ height:var(--pann-field-h); padding:0 32px 0 var(--pann-s3); border:1px solid var(--pann-input); border-radius:var(--pann-r-ctl); background:var(--pann-surface) no-repeat right 10px center/10px 6px; background-image:linear-gradient(45deg,transparent 50%,var(--pann-fg-muted) 50%),linear-gradient(-45deg,transparent 50%,var(--pann-fg-muted) 50%); background-size:5px 5px,5px 5px; background-position:right 14px center,right 9px center; font:inherit; color:var(--pann-fg); appearance:none; -webkit-appearance:none; max-width:100%; }
.pann-select:focus{ outline:none; border:2px solid var(--pann-brand-ink); padding-left:calc(var(--pann-s3) - 1px); }
.pann-filter{ display:inline-flex; align-items:center; gap:var(--pann-s1); height:var(--pann-btn-sm-h); padding:0 var(--pann-s3); border:1px solid var(--pann-line); border-radius:var(--pann-r-pill); background:var(--pann-surface); font:inherit; font-size:var(--pann-t-small); color:var(--pann-fg); cursor:pointer; white-space:nowrap; }
.pann-filter:hover{ border-color:var(--pann-input); }
.pann-filter.is-on{ border-color:var(--pann-brand-ink); background:var(--pann-brand-tint); color:var(--pann-brand-ink); font-weight:500; }
.pann-filter__n{ font-variant-numeric:tabular-nums; color:var(--pann-fg-muted); }
.pann-filter.is-on .pann-filter__n{ color:inherit; }

/* ---- แท็บขีดล่าง (แท็บในหน้า · ไม่ใช่เมนูหลัก) ---- */
.pann-tabs{ display:flex; align-items:flex-end; gap:var(--pann-s1); border-bottom:1px solid var(--pann-line); margin-bottom:var(--pann-s4); overflow-x:auto; scrollbar-width:none; }
.pann-tabs::-webkit-scrollbar{ display:none; }
.pann-tabs > a,.pann-tabs > button{ position:relative; display:inline-flex; align-items:center; gap:var(--pann-s2); height:40px; padding:0 var(--pann-s3); border:0; background:transparent; font:inherit; font-weight:500; color:var(--pann-fg-muted); text-decoration:none; white-space:nowrap; cursor:pointer; border-radius:var(--pann-r-ctl) var(--pann-r-ctl) 0 0; }
.pann-tabs > a:hover,.pann-tabs > button:hover{ color:var(--pann-fg); background:var(--pann-bg); }
.pann-tabs > .is-active,.pann-tabs > [aria-selected="true"]{ color:var(--pann-brand-ink); font-weight:600; }
.pann-tabs > .is-active::after,.pann-tabs > [aria-selected="true"]::after{ content:""; position:absolute; left:var(--pann-s2); right:var(--pann-s2); bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--pann-brand); }
.pann-tabs__n{ font-size:var(--pann-t-small); font-weight:500; font-variant-numeric:tabular-nums; min-width:20px; height:20px; padding:0 6px; border-radius:var(--pann-r-pill); background:var(--pann-neutral-tint); color:var(--pann-fg-muted); display:inline-grid; place-items:center; box-sizing:border-box; }
.is-active > .pann-tabs__n,[aria-selected="true"] > .pann-tabs__n{ background:var(--pann-brand-tint); color:var(--pann-brand-ink); }
@media (max-width:899px){ .pann-tabs > a,.pann-tabs > button{ height:44px; } }

/* ---- segmented (สลับมุมมอง 2–4 ทาง: เดือน/ปี · รายการ/การ์ด) ---- */
.pann-seg{ display:inline-flex; padding:2px; gap:2px; background:var(--pann-neutral-tint); border-radius:var(--pann-r-ctl); }
.pann-seg > *{ height:calc(var(--pann-btn-sm-h) - 4px); padding:0 var(--pann-s3); border:0; border-radius:calc(var(--pann-r-ctl) - 2px); background:transparent; font:inherit; font-size:var(--pann-t-small); font-weight:500; color:var(--pann-fg-muted); cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; }
.pann-seg > .is-active,.pann-seg > [aria-pressed="true"]{ background:var(--pann-surface); color:var(--pann-fg); box-shadow:var(--pann-shadow); }

/* ---- เมนูลอย ▾ (รวมปุ่มหลายอันที่เป็นเรื่องเดียวกัน: ลิงก์ ▾ · ไฟล์ ▾ · ⋯) — ใช้ <details class="pann-menu"> ไม่ต้องมี JS ---- */
.pann-menu{ position:relative; display:inline-block; }
.pann-menu > summary{ list-style:none; }
.pann-menu > summary::-webkit-details-marker{ display:none; }
.pann-menu__list{ position:absolute; top:calc(100% + 4px); right:0; z-index:1000; min-width:220px; max-width:min(340px, calc(100vw - 2*var(--pann-gutter))); padding:var(--pann-s1); background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-ctl); box-shadow:var(--pann-shadow-float); display:grid; }
.pann-menu--start > .pann-menu__list{ right:auto; left:0; }
.pann-menu__list > a,.pann-menu__list > button{ display:flex; align-items:center; gap:var(--pann-s3); min-height:36px; padding:0 var(--pann-s3); border:0; border-radius:calc(var(--pann-r-ctl) - 2px); background:transparent; font:inherit; color:var(--pann-fg); text-align:left; text-decoration:none; white-space:nowrap; cursor:pointer; }
.pann-menu__list > a:hover,.pann-menu__list > button:hover{ background:var(--pann-bg); }
.pann-menu__list svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--pann-fg-muted); flex:none; }
.pann-menu__list small{ display:block; font-size:var(--pann-t-small); color:var(--pann-fg-muted); white-space:normal; line-height:1.35; }
.pann-menu__list > .is-danger{ color:var(--pann-danger); }
.pann-menu__list hr{ border:0; border-top:1px solid var(--pann-line); margin:var(--pann-s1) 0; }
.pann-menu__label{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); padding:var(--pann-s2) var(--pann-s3) 2px; }
@media (max-width:600px){ .pann-menu[open] > .pann-menu__list{ position:fixed; left:0; right:0; bottom:0; top:auto; max-width:none; border-radius:var(--pann-r-card) var(--pann-r-card) 0 0; padding-bottom:calc(var(--pann-s4) + env(safe-area-inset-bottom,0px)); }
  .pann-menu__list > a,.pann-menu__list > button{ min-height:48px; } }

/* ---- ตาราง v1.4: เซลล์ละ 1 บรรทัด · หัวติดบน · ตัวเลขชิดขวา ---- */
.pann-table-card{ background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-card); overflow:hidden; }
.pann-table-card > .pann-table-wrap{ max-height:none; }
.pann-table-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--pann-s3); padding:var(--pann-s2) var(--pann-s4); border-top:1px solid var(--pann-line); font-size:var(--pann-t-small); color:var(--pann-fg-muted); }
.pann-table--grid th,.pann-table--grid td{ height:var(--pann-row-h); padding:0 var(--pann-s3); white-space:nowrap; vertical-align:middle; box-sizing:border-box; }
.pann-table--grid th{ position:sticky; top:0; z-index:1; height:36px; background:var(--pann-bg); font-size:var(--pann-t-small); font-weight:500; color:var(--pann-fg-muted); }
.pann-table--grid th:first-child,.pann-table--grid td:first-child{ padding-left:var(--pann-s4); }
.pann-table--grid th:last-child,.pann-table--grid td:last-child{ padding-right:var(--pann-s4); }
.pann-table--grid tbody tr:hover td{ background:var(--pann-brand-soft); }
.pann-table--grid tbody tr:last-child td{ border-bottom:0; }
.pann-table--grid tr.is-selected td{ background:var(--pann-brand-tint); }
.pann-table--grid tr[data-href]{ cursor:pointer; }
.pann-table .is-num{ text-align:right; font-variant-numeric:tabular-nums; }
.pann-table .is-muted{ color:var(--pann-fg-muted); }
.pann-table .is-wrap{ white-space:normal; }
.pann-table .is-check{ width:36px; padding-right:0; }
.pann-table .is-check input{ width:16px; height:16px; margin:0; accent-color:var(--pann-brand-ink); vertical-align:middle; }
.pann-table .is-actions{ width:1%; text-align:right; }
.pann-table__main{ font-weight:500; color:var(--pann-fg); text-decoration:none; }
a.pann-table__main:hover{ color:var(--pann-brand-ink); text-decoration:underline; }
.pann-table__sub{ display:block; font-size:var(--pann-t-small); color:var(--pann-fg-muted); line-height:1.3; }
.pann-table--grid td:has(.pann-table__sub){ height:auto; padding-block:6px; }
.pann-table--grid .pann-row-actions{ opacity:0; transition:opacity .1s; }
.pann-table--grid tr:hover .pann-row-actions,.pann-table--grid tr:focus-within .pann-row-actions{ opacity:1; }
.pann-table tfoot td{ font-weight:600; background:var(--pann-bg); border-top:1px solid var(--pann-line); }
@media (hover:none){ .pann-table--grid .pann-row-actions{ opacity:1; } }

/* ---- แถบเมื่อเลือกหลายรายการ (แทนแถบเครื่องมือ) ---- */
.pann-bulkbar{ display:flex; align-items:center; gap:var(--pann-s2); flex-wrap:wrap; min-height:var(--pann-btn-h); padding:0 var(--pann-s2) 0 var(--pann-s4); margin-bottom:var(--pann-s3); background:var(--pann-brand-tint); border:1px solid var(--pann-brand-line); border-radius:var(--pann-r-ctl); }
.pann-bulkbar[hidden]{ display:none; }
.pann-bulkbar__n{ font-weight:600; color:var(--pann-brand-ink); margin-right:auto; font-variant-numeric:tabular-nums; }

/* ---- ข้อมูลคู่ ป้าย : ค่า (หน้ารายละเอียด · แทนช่องเบียดบน-ล่าง) ---- */
.pann-kv{ display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr); gap:var(--pann-s2) var(--pann-s4); margin:0; }
.pann-kv dt{ color:var(--pann-fg-muted); font-size:var(--pann-t-small); padding-top:1px; }
.pann-kv dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.pann-kv dd.is-num{ font-variant-numeric:tabular-nums; }
.pann-kv--cols{ grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:var(--pann-s3) var(--pann-s6); }
.pann-kv--cols > div{ display:grid; grid-template-columns:minmax(110px,150px) minmax(0,1fr); gap:var(--pann-s4); }
@media (max-width:599px){ .pann-kv,.pann-kv--cols > div{ grid-template-columns:1fr; gap:2px; } .pann-kv dd{ margin-bottom:var(--pann-s2); } }

/* ---- หัวส่วนในหน้า (แทนการ์ดซ้อนการ์ด) ---- */
.pann-section{ margin-top:var(--pann-s6); }
.pann-section:first-child{ margin-top:0; }
.pann-section__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--pann-s3); margin-bottom:var(--pann-s3); min-height:var(--pann-btn-sm-h); }
.pann-section__head h2{ font-size:var(--pann-t-h2); font-weight:600; }
.pann-divider{ border:0; border-top:1px solid var(--pann-line); margin:var(--pann-s4) 0; }

/* ---- ฟอร์มสองคอลัมน์บนจอคอม ---- */
.pann-form-grid{ display:grid; gap:var(--pann-s3) var(--pann-s4); grid-template-columns:1fr; }
@media (min-width:900px){ .pann-form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pann-form-grid > .is-full{ grid-column:1/-1; } }
.pann-field__hint{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); }

/* ---- การ์ด "สิ่งที่ต้องทำ" แบบแถวแน่น (จอคอม) ---- */
@media (min-width:900px){
  .pann-todo-row{ padding:var(--pann-s2) var(--pann-s3); min-height:var(--pann-row-h); box-sizing:border-box; }
  .pann-todo-row + .pann-todo-row{ margin-top:var(--pann-s1); }
  .pann-todo-row__go{ padding:4px 10px; border-radius:6px; }
}

/* ---- แผ่นสรุปตัวเลขแบบแถบ (KPI แถวเดียว) ---- */
.pann-statbar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); background:var(--pann-surface); border:1px solid var(--pann-line); border-radius:var(--pann-r-card); margin-bottom:var(--pann-s4); }
.pann-statbar > *{ padding:var(--pann-s3) var(--pann-s4); display:grid; gap:2px; min-width:0; }
.pann-statbar > * + *{ border-left:1px solid var(--pann-line); }
.pann-statbar__label{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); }
.pann-statbar__value{ font-size:var(--pann-t-h1); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.3; }
@media (max-width:599px){ .pann-statbar{ grid-template-columns:repeat(2,1fr); } .pann-statbar > :nth-child(odd){ border-left:0; } .pann-statbar > :nth-child(n+3){ border-top:1px solid var(--pann-line); } }


/* ---- เติม 4 พ.ย. 2569 (ใบ 784 · จาก pann-account 628) — ชิ้นที่แอปต้องทำตัวแก้เอง ย้ายมาไว้กลาง ---- */
/* 1. attribute hidden ชนะ display ของชิ้น (ปุ่ม/เมนูที่ซ่อนตามสิทธิ์ต้องไม่โผล่) · ตัวนับแท็บว่าง = ไม่แสดง */
.pann-btn[hidden],.pann-menu[hidden],.pann-pagehead__actions[hidden]{ display:none; }
.pann-tabs__n:empty{ display:none; }
/* 2. ปุ่มที่เป็นลิงก์ ไม่มีเส้นใต้ */
a.pann-btn,a.pann-btn:hover,a.pann-btn:focus-visible{ text-decoration:none; }
/* 3. ช่องที่มีป้ายสั้นบนแถบเครื่องมือ: <label class="pann-toolbar__field"><span>ตั้งแต่วันที่</span><input class="pann-input"></label> · ติ๊ก = .pann-toolbar__check */
.pann-toolbar__field{ display:inline-flex; align-items:center; gap:var(--pann-s2); min-width:0; }
.pann-toolbar__field > span{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); white-space:nowrap; }
.pann-toolbar__field > .pann-input,.pann-toolbar__field > .pann-select{ width:auto; min-width:0; }
.pann-toolbar__check{ display:inline-flex; align-items:center; gap:var(--pann-s2); font-size:var(--pann-t-small); color:var(--pann-fg-muted); cursor:pointer; white-space:nowrap; }
@media (max-width:599px){ .pann-toolbar__field{ width:100%; } .pann-toolbar__field > .pann-input,.pann-toolbar__field > .pann-select{ flex:1 1 auto; } }
/* 4. ของในเมนูที่ไม่ใช่ปุ่ม/ลิงก์ (ตัวกรอง ▾ · ไฟล์ ▾): ช่องเลือก .pann-select / ติ๊ก label ระยะเท่ารายการเมนู */
.pann-menu__list > label{ display:flex; align-items:center; gap:var(--pann-s3); min-height:36px; padding:0 var(--pann-s3); font-size:var(--pann-t-body); cursor:pointer; }
.pann-menu__list > .pann-select,.pann-menu__list > label > .pann-select{ display:block; width:100%; margin:var(--pann-s1) 0; }
.pann-menu__list > label > .pann-select{ width:auto; flex:1 1 auto; margin:0; }
/* 5. หัวหน้าที่คำอธิบายยาวไม่ดันปุ่มฝั่งขวาลงบรรทัดสอง */
.pann-pagehead__title{ flex:1 1 320px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }