/* ===== ระบบดีไซน์ PANN v1.3.2 (22 ต.ค. 2569: เพิ่ม sidebar หมวดพับได้ · rail + flyout เลิกใช้ — งาน 543) — คัดลอกทั้งก้อนจาก `line-msp-bot/queue/ref/design-v1.3/css/pann-design.css` =====
 * งาน 386 (โจตัดสิน 13 ต.ค. 2569): โลโก้ใหม่ · สี Account เขียว `#087950` · เทาเย็น · มิ้นต์เป็นจุดเน้นร่วมทุกแอป · โครงหน้าร่วม
 *   แทน v1.2 (งาน 335 · 354) ทั้งก้อน — ชื่อตัวแปรเดิมอยู่ครบ เพิ่มใหม่ `--pann-brand-ink` `--pann-brand-hover` `--pann-decor`
 *   ตั้งที่ `<html data-product="account">` ของทุกหน้าเหมือนเดิม
 *
 * **ห้ามแก้ค่าในไฟล์นี้** — ต้นฉบับอยู่ที่ห้อง Design · ของที่ระบบดีไซน์ยังไม่มีแต่ IOC ต้องใช้อยู่ใน `theme.css`
 *   อยากเพิ่มชิ้นส่วนใหม่ → บอกห้อง Design ให้เพิ่มในระบบดีไซน์ก่อน ห้ามประดิษฐ์ที่นี่
 *   ส่วนของ IOC ที่ต่อท้ายไฟล์นี้ (ใบ 336) เป็น **ส่วนเพิ่มล้วน** ไม่แก้ค่าใดของห้อง Design
 *
 * ลำดับการโหลด: ไฟล์นี้ต้องมาก่อน `theme.css` ทุกหน้า (`theme.css` ชี้ชื่อเดิมของ IOC มาที่ตัวแปรชุดนี้)
 */
/* ============================================================
   PANN design tokens + components — v1.3.2 (22 ต.ค. 2569) · 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
   ============================================================ */
@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;
}
@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-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 — เลิกใช้ 22 ต.ค. 2569 (โจเลือก sidebar ข้อความ) · คงไว้ชั่วคราว ห้ามใช้ · ถอดใน v1.4 ---- */
:root{ --pann-rail-w:64px; --pann-flyout-w:264px; }
@media (min-width:900px){ .pann-layout--rail{ grid-template-columns:var(--pann-rail-w) 1fr; } }
.pann-sidebar--rail{ width:var(--pann-rail-w); padding:var(--pann-s2) 0; gap:0; position:relative; }
.pann-sidebar--rail > a, .pann-sidebar--rail > .pann-sidebar__bottom > a{ flex-direction:column; justify-content:center; gap:4px; height:56px; padding:0; border-radius:0; font-size:var(--pann-t-tab); font-weight:500; text-align:center; }
.pann-sidebar--rail > a svg, .pann-sidebar--rail > .pann-sidebar__bottom > a svg{ width:24px; height:24px; }
.pann-sidebar--rail > a.is-active, .pann-sidebar--rail > .pann-sidebar__bottom > a.is-active{ box-shadow:inset 3px 0 0 var(--pann-brand); }
.pann-sidebar--rail .pann-sidebar__group{ margin:0; }
.pann-sidebar--rail .pann-sidebar__bottom{ margin-top:auto; }
.pann-flyout{ position:absolute; left:var(--pann-rail-w); top:0; width:var(--pann-flyout-w); max-height:calc(100vh - var(--pann-header-h)); overflow:auto; background:var(--pann-surface); border:1px solid var(--pann-line); border-left:0; border-radius:0 var(--pann-r-card) var(--pann-r-card) 0; box-shadow:var(--pann-shadow-float); padding:var(--pann-s3) 0; z-index:30; display:none; }
.pann-flyout.is-open{ display:block; }
.pann-flyout__title{ font-size:var(--pann-t-h2); font-weight:600; padding:var(--pann-s2) var(--pann-s4) var(--pann-s3); }
.pann-flyout__group{ font-size:var(--pann-t-small); color:var(--pann-fg-muted); padding:var(--pann-s3) var(--pann-s4) var(--pann-s1); }
.pann-flyout a{ display:flex; flex-direction:row; justify-content:flex-start; align-items:center; font-size:var(--pann-t-body); border-radius:0; text-align:left; gap:var(--pann-s3); height:44px; padding:0 var(--pann-s4); color:var(--pann-fg); text-decoration:none; font-weight:500; }
.pann-flyout a:hover{ background:var(--pann-brand-soft); }
.pann-flyout a.is-active{ background:var(--pann-brand-tint); color:var(--pann-brand-ink); }
.pann-main--wide{ --pann-maxw:none; }
@media (max-width:899px){ .pann-sidebar--rail,.pann-flyout{ display:none!important; } }

/* ---- 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); }

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

/* ===================== งาน 336 — ส่วนเพิ่มของ IOC (ก้อนตัวเลขมีสถานะ · หัวตาราง · พิมพ์ขาวดำ) =====================
 * งาน 386: "แบบ A" (รางซ้ายเขียวทึบ 5 ต.ค.) **ถูกแทนด้วยโครงร่วม v1.3** — ส่วนของรางถูกลบไปแล้ว
 * ที่เหลือตรงนี้คือชิ้นที่หน้าของ IOC ใช้อยู่และระบบดีไซน์ไม่มีสถานะให้: `.pann-stat.is-zero / .is-action / .is-selected`
 * v1.3: "ต้องลงมือ" ใช้สีสถานะต้องทำ (`--pann-attention`) — มิ้นต์เป็นจุดเน้น ไม่ใช่สถานะ (README ข้อ 2.1)
 */

/* หัวหน้า — ชื่อหน้าเป็นสีแบรนด์เข้ม ไอคอนอยู่ในตัว h1 อยู่แล้ว (ไม่ย้าย DOM ตามใบสั่ง) */
main h1, .acc-page-title { color: var(--pann-brand-dark); }

/* ก้อนตัวเลขสรุป — สามสถานะ (ใบ 336 ข้อ 2) */
.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); text-align: left; font: inherit; min-width: 0; }
.pann-stat.is-zero { background: var(--pann-bg); }
.pann-stat.is-zero .pann-num, .pann-num.is-zero { color: var(--pann-fg-muted); font-weight: 600; }
.pann-stat.is-action { border-color: var(--pann-attention); background: var(--pann-attention-tint); }
.pann-stat.is-action .pann-num, .pann-num.is-action { color: var(--pann-attention); }
.pann-stat.is-selected { border-color: var(--pann-brand); box-shadow: inset 0 0 0 1px var(--pann-brand); }
.pann-stat .pann-pill { justify-self: start; }

/* หัวตาราง — พื้นอ่อนของแบรนด์ ตัวหนังสือเขียวเข้ม (ใบ Ledger 323 ใช้ค่าเดียวกัน) */
.pann-table th { background: var(--pann-brand-soft); color: var(--pann-brand-dark); font-weight: 600; }

/* พิมพ์: รายงานบนกระดาษเป็นขาวดำเหมือนเดิม ไม่เอาพื้นสี */
@media print {
  .pann-table th { background: transparent; color: #000; }
}