/* ระบบดีไซน์ PANN v1.3.6 (งาน 255/256 · v1.3.4 งาน 253 · v1.3 งาน 171 · แทนไฟล์ v1.2 ของงาน 134) — ไฟล์นี้คัดลอกมาทั้งก้อน ห้ามแก้ค่าในไฟล์นี้เฉพาะแอป
   แบบอักษร IBM Plex Sans Thai: บรรทัด @import ของต้นฉบับถูกเอาออก — โหลดด้วย <link> ในหัวของทุกหน้า HTML แทน (เร็วกว่า · เว็บไซต์ขายไม่โหลดแบบอักษรจากภายนอก) */
/* ============================================================
   PANN design tokens + components — v1.3.6 (29 ต.ค. 2569) · v1.3.6 ปฏิทินลอยเหนือหน้าต่าง/แผ่นของทุกแอป (z-index 1000 · Audit 117 .sheet-bg 50 บัง) · v1.3.5 ช่องที่ผิด/นอกช่วง (aria-invalid) ขอบแดง (คู่กับ pann-widgets.js v1.3) · v1.3.4 ปฏิทินกดหัวเลือกเดือน/ปีแบบ Windows (.pann-datepicker__title · __grid--wide · คู่กับ pann-widgets.js v1.1) · v1.3.3 เพิ่มสถานะปุ่มบันทึก (6.1) ช่องจำนวน (6.3) ปฏิทิน (6.4) จาก Biz · v1.3.2 เพิ่ม sidebar หมวดพับได้ (.pann-sidebar__sec) สำหรับ Account · rail + flyout (v1.3.1) เลิกใช้ ห้ามใช้ในแอปใด จะถอดใน v1.4
   ห้อง 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
   ============================================================ */

: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;
}
@media (min-width:900px){ :root{ --pann-gutter:24px; --pann-btn-h:44px; --pann-header-h:72px; } }

/* ---------- สีประจำแอป (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:var(--pann-t-body); line-height:1.5; color:var(--pann-fg); background:var(--pann-bg); -webkit-text-size-adjust:100%; }
body{ margin:0; }
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.1 (rail + flyout · เลิกใช้) และ v1.3.2 (sidebar หมวดพับ + drawer ของ Account) ไม่ได้รับเข้า PANN HR (งาน 253) — HR ไม่ใช้ชิ้นเหล่านี้ · ส่วนอื่นคัดลอกทั้งก้อน ---- */
/* ---- 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; }
}

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }