/* ระบบดีไซน์ PANN v1.0 (งาน 111) — ไฟล์นี้คัดลอกมาทั้งก้อน ห้ามแก้ค่าในไฟล์นี้เฉพาะสินค้า · ของเฉพาะ PANN HR อยู่ใน style.css
   แบบอักษร IBM Plex Sans Thai: ย้ายการโหลดจาก @import ในไฟล์นี้ ไปเป็น <link> ในหัวของทุกหน้า HTML (เร็วกว่า ไม่ต่อคิวโหลดหลัง CSS) */
/* PANN design tokens v0.1 — 5 Oct 2026. ห้ามแก้ค่าในหน้าใด ให้แก้ที่นี่ที่เดียว */

:root{
  /* neutral — เทาอุ่น */
  --pann-bg:#FAF8F6;            /* พื้นหน้า warm white */
  --pann-surface:#FFFFFF;       /* การ์ด */
  --pann-fg:#2B2420;            /* ตัวหนังสือหลัก */
  --pann-fg-muted:#6B625B;      /* ข้อความรอง / ค่าที่ระบบเติม */
  --pann-line:#E6E0DA;          /* เส้น ขอบ */
  --pann-neutral-tint:#F1EDE9;  /* พื้นป้ายสถานะข้อมูล */

  /* semantic — เหมือนกันทุกสินค้า */
  --pann-success:#1E7B4F;  --pann-success-tint:#E6F4EC;
  --pann-attention:#B26A00; --pann-attention-tint:#FFF4DC;
  --pann-danger:#B3261E;   --pann-danger-tint:#FBE9E7;

  /* brand — ค่าเริ่มต้น = HR (E2 สเลต + มัสตาร์ด, โจตัดสิน 5 ต.ค.); สลับด้วย data-product */
  --pann-brand:#2B2D42;         /* ฐานเข้ม: ปุ่มหลัก เมนูที่เลือก การ์ดต้องทำบนมือถือ */
  --pann-brand-dark:#1E2030;
  --pann-brand-tint:#EEEEF4;    /* พื้นแถบซ้าย / แท็บที่เลือก */
  --pann-brand-soft:#F6F6FA;    /* พื้นการ์ด "สิ่งที่ต้องทำวันนี้" (เดสก์ท็อป) */
  --pann-brand-line:#D3D4E0;    /* ขอบการ์ดนั้น */
  --pann-on-brand:#FFFFFF;
  --pann-accent:#FFB627;        /* สีอุ่น: หลอดความคืบหน้า · ป้ายจำนวนบนการ์ดเข้ม · ปุ่ม "ทำเลย" · ตัวเลขที่ต้องจัดการ */
  --pann-accent-ink:#8A5A00;    /* อำพันแบบอ่านได้บนพื้นขาว */
  --pann-on-accent:#1A1A1A;

  /* type */
  --pann-font:"IBM Plex Sans Thai","Noto Sans Thai","Sarabun",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(43,36,32,.06);
  --pann-shadow-float:0 8px 24px rgba(43,36,32,.12);

  /* control sizes */
  --pann-btn-h:48px; --pann-btn-hero-h:80px; --pann-field-h:48px; --pann-pill-h:24px;
}
@media (min-width:900px){ :root{ --pann-gutter:24px; --pann-btn-h:44px; } }

/* สีประจำสินค้า — ตั้งครั้งเดียวที่ <html data-product="..."> */
:root[data-product="biz"]  { --pann-brand:#3B1F4E; --pann-brand-dark:#281436; --pann-brand-tint:#F3EEF7; --pann-brand-soft:#FAF7FC; --pann-brand-line:#D9CCE3; --pann-accent:#F4A261; --pann-accent-ink:#9A4E12; }
:root[data-product="asset"]{ --pann-brand:#0B4A54; --pann-brand-dark:#07343B; --pann-brand-tint:#EAF3F4; --pann-brand-soft:#F5FAFA; --pann-brand-line:#BFD9DD; --pann-accent:#F0744F; --pann-accent-ink:#9C3A1C; }
:root[data-product="count"]{ --pann-brand:#2E3338; --pann-brand-dark:#1F2326; --pann-brand-tint:#EFF0F1; --pann-brand-soft:#F8F8F7; --pann-brand-line:#D5D8DB; --pann-accent:#F26B1D; --pann-accent-ink:#9A3E07; }
/* (biz/asset/count = ข้อเสนอให้เป็นคู่ "ฐานเข้ม + สีอุ่น" แบบเดียวกับ HR รอโจยืนยัน — เปลี่ยนที่นี่ที่เดียว) */

/* 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); }
:focus-visible{ outline:2px solid var(--pann-brand); outline-offset:2px; }

/* 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-dark); }
.pann-btn--secondary{ background:var(--pann-surface); color:var(--pann-brand); border-color:var(--pann-brand); }
.pann-btn--ghost{ background:transparent; color:var(--pann-brand); }
.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]{ opacity:.45; cursor:default; }
.pann-fab{ position:fixed; right:var(--pann-gutter); bottom:calc(72px + env(safe-area-inset-bottom,0px)); border-radius:var(--pann-r-pill); box-shadow:var(--pann-shadow-float); }

/* 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:13px; font-weight:600; padding:5px 10px; border-radius:8px; background:var(--pann-brand-tint); color:var(--pann-brand); }
.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-accent-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-line); border-radius:var(--pann-r-ctl); font:inherit; background:var(--pann-surface); color:var(--pann-fg); width:100%; box-sizing:border-box; }
.pann-input:focus{ outline:none; border:2px solid var(--pann-brand); 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-line); background:var(--pann-surface); font:inherit; cursor:pointer; }
.pann-chip.is-selected{ border-color:var(--pann-brand); background:var(--pann-brand-tint); color:var(--pann-brand-dark); 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:#fff; }
.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:13px; 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); }

/* table (desktop) / list (mobile) */
.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:500; color:var(--pann-fg-muted); padding:var(--pann-s2) var(--pann-s3); border-bottom:1px solid var(--pann-line); }
.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-brand-soft); border-color:var(--pann-brand-line); }
.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)); }

/* nav */
.pann-tabbar{ position:fixed; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); background:var(--pann-surface); border-top:1px solid var(--pann-line); padding-bottom:env(safe-area-inset-bottom,0px); }
.pann-tabbar a{ display:grid; justify-items:center; gap:2px; padding:var(--pann-s2) 0; font-size:var(--pann-t-tab); font-weight:500; color:var(--pann-fg-muted); text-decoration:none; }
.pann-tabbar a.is-active{ color:var(--pann-brand); }
.pann-sidebar{ width:240px; background:var(--pann-brand-tint); border-right:1px solid var(--pann-line); padding:var(--pann-s4); display:flex; flex-direction:column; gap:var(--pann-s2); min-height:100vh; }
.pann-sidebar a{ display:flex; align-items:center; gap:var(--pann-s3); padding:var(--pann-s3) var(--pann-s4); border-radius:var(--pann-r-ctl); color:var(--pann-fg); text-decoration:none; font-weight:500; }
.pann-sidebar a.is-active{ background:var(--pann-brand); color:var(--pann-on-brand); }

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

/* v1.1 เสนอโดยห้อง HR — รอห้องดีไซน์รับเข้าเล่ม */
/* ทางกลับ: บนสุดของหน้าย่อย เหนือหัวข้อ — "‹ ชื่อหน้าแม่" (หน้าเรามีแค่ 2 ชั้น ไม่ทำเส้นทางหลายชั้น) */
.pann-back{ display:inline-flex; align-items:center; gap:var(--pann-s1); min-height:44px; padding-right:var(--pann-s3); font-size:var(--pann-t-body); font-weight:500; color:var(--pann-brand); text-decoration:none; }
.pann-back::before{ content:"\2039"; font-size:var(--pann-t-h1); line-height:1; }
/* แถบปุ่มติดขอบล่าง: ฟอร์มยาว — ยกเลิก (.pann-btn--ghost) + บันทึก (.pann-btn--primary ปุ่มหลักปุ่มเดียวของหน้า) ชิดขวา · ซ้ายบอกสถานะสั้น ๆ
   มือถือ: อยู่เหนือแถบเมนูล่าง (--pann-tabbar-h = ความสูงจริงที่แอปวัดให้ · หน้าที่ไม่มีแถบเมนู = 0) ปุ่มเต็มกว้างแบ่งครึ่ง · กำลังพิมพ์ (.is-typing) = ไม่ลอยทับช่องกรอก */
.pann-actionbar{ position:sticky; bottom:0; z-index:15; display:flex; align-items:center; justify-content:flex-end; 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-s4); margin-top:var(--pann-s4); border-radius:var(--pann-r-ctl) var(--pann-r-ctl) 0 0; }
.pann-actionbar__note{ margin-right:auto; min-width:0; color:var(--pann-fg-muted); font-size:var(--pann-t-small); }
.pann-actionbar.is-dirty .pann-actionbar__note{ color:var(--pann-attention); font-weight:600; }
@media (max-width:899px){
  .pann-actionbar{ bottom:var(--pann-tabbar-h,0px); }
  .pann-actionbar > .pann-btn, .pann-actionbar > button, .pann-actionbar > a{ flex:1; }
  .pann-actionbar__note{ display:none; }
  .pann-actionbar.is-typing{ position:static; }
}