/* PANN design tokens v1.2 — 7 Oct 2026 (ทาง ง.: สี Astra + มัสตาร์ด PANN). ห้ามแก้ค่าในหน้าใด ให้แก้ที่นี่ที่เดียว */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

:root{
  /* neutral — เทาเย็น (Astra Clear) */
  --pann-bg:#F5F7FA;            /* พื้นหน้า */
  --pann-surface:#FFFFFF;       /* การ์ด */
  --pann-fg:#182230;            /* ตัวหนังสือหลัก */
  --pann-fg-muted:#526072;      /* ข้อความรอง / ค่าที่ระบบเติม */
  --pann-line:#DCE2E9;          /* เส้นแบ่ง (ตกแต่ง) */
  --pann-input:#778397;         /* ขอบช่องกรอก (ผ่าน 3:1) */
  --pann-neutral-tint:#EEF1F5;  /* พื้นป้ายสถานะข้อมูล */

  /* semantic — เหมือนกันทุกสินค้า */
  --pann-success:#176443;  --pann-success-tint:#E7F5EC;
  --pann-attention:#854400; --pann-attention-tint:#FFF1D6;
  --pann-danger:#B42335;   --pann-danger-tint:#FDECEF;
  --pann-info:#245CDB;     --pann-info-tint:#EAF1FF;

  /* brand — ค่าเริ่มต้น = HR (v1.2 น้ำเงิน); สลับด้วย data-product */
  --pann-brand:#245CDB;         /* ปุ่มหลัก เมนูที่เลือก ลิงก์ การ์ดต้องทำบนมือถือ */
  --pann-brand-dark:#1C48AB;
  --pann-brand-tint:#EDF3FF;    /* พื้นแผงงานหลัก / แท็บที่เลือก */
  --pann-brand-soft:#F6F9FF;    /* พื้นการ์ด "สิ่งที่ต้องทำวันนี้" (เดสก์ท็อป) */
  --pann-brand-line:#C9DCFF;    /* ขอบการ์ดนั้น */
  --pann-on-brand:#FFFFFF;
  --pann-decor:#FFC5A5;         /* ตกแต่งเท่านั้น ห้ามใช้กับข้อความ/ปุ่ม/สถานะ */

  /* PANN signature — มัสตาร์ดเหมือนกันทุกแอป */
  --pann-accent:#FFB627;        /* หลอดความคืบหน้า · ป้ายจำนวนบนการ์ดเข้ม · ปุ่ม "ทำเลย" · จุดบนไอคอนแอป */
  --pann-accent-ink:#8A5A00;    /* มัสตาร์ดแบบอ่านได้บนพื้นขาว */
  --pann-on-accent:#182230;

  /* 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(24,34,48,.06);
  --pann-shadow-float:0 8px 24px rgba(24,34,48,.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:#7540C8; --pann-brand-dark:#5B329C; --pann-brand-tint:#F3EDFC; --pann-brand-soft:#F9F6FE; --pann-brand-line:#DBC8F4; --pann-decor:#FFBEA6; }
:root[data-product="account"]{ --pann-brand:#0B3D35; --pann-brand-dark:#093029; --pann-brand-tint:#EAF6EF; --pann-brand-soft:#F4FBF7; --pann-brand-line:#BCE5D1; --pann-decor:#FFD27D; }
:root[data-product="asset"]  { --pann-brand:#087482; --pann-brand-dark:#065A65; --pann-brand-tint:#EAF6F6; --pann-brand-soft:#F4FBFB; --pann-brand-line:#B7E4E7; --pann-decor:#F4C693; }
:root[data-product="count"]  { --pann-brand:#AF481A; --pann-brand-dark:#883814; --pann-brand-tint:#FFF2E9; --pann-brand-soft:#FFF8F4; --pann-brand-line:#F5C8AF; --pann-decor:#F5D777; }
/* accent (มัสตาร์ด) ไม่สลับตามแอป — เป็นสีเอกลักษณ์ PANN */

/* 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-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: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); }
.pann-pill--info{ background:var(--pann-info-tint); color:var(--pann-info); } .pann-pill--info::before{ background:var(--pann-info); }

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

/* v1.1 — back link + sticky action bar (proposed by HR room) */
.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); 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(64px + 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; }
}

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