/* =========================================================
   HW10 - Personal Website  |  style.css
   ใช้ร่วมกันทุกหน้า  (index / about / works / guestbook / contact)
   ---------------------------------------------------------
   Project01_Group01 : ปรับปรุงเป็นชุดสไตล์ของเว็บ n-Tier
   เพิ่ม design token, โหมดมืด, เมนูมือถือ, ไอคอน, badge
   ========================================================= */

/* ---------------- Design tokens : Light ---------------- */
:root{
  color-scheme:light;

  /* surfaces */
  --bg:#f1f5f7;
  --surface:#ffffff;
  --surface-2:#f6f9fa;
  --surface-3:#eaf0f2;
  --nav-bg:rgba(255,255,255,.90);

  /* text */
  --ink:#1e2a30;
  --ink-strong:#0e1a20;
  --muted:#4f6169;

  /* lines */
  --line:#e0e7ea;
  --line-strong:#c9d5da;
  --line-input:#8ca2aa;

  /* brand */
  --brand:#0f766e;
  --brand-dark:#115e59;        /* hover ของปุ่ม (โหมดมืดจะสว่างขึ้นแทน) */
  --brand-text:#0f766e;
  --brand-tint:#e6f6f4;
  --brand-tint-ink:#115e59;
  --brand-tint-line:#9fdfd7;
  --on-brand:#ffffff;
  --accent:#0e7490;
  --accent-tint:#dcf0f6;
  --cyan:#0891b2;

  /* status */
  --ok-bg:#ebfbf3;   --ok-line:#a5e8c9;   --ok-ink:#0a6045;
  --err-bg:#fef2f2;  --err-line:#fecaca;  --err-ink:#9f1239;
  --warn-bg:#fdf8ea; --warn-line:#f2dda1; --warn-ink:#7c5209;
  --info-bg:#e6f6f4; --info-line:#9fdfd7; --info-ink:#115e59;

  /* badge */
  --badge-admin-bg:#e0f2f1;  --badge-admin-ink:#0f5f57;  --badge-admin-line:#9fdfd7;
  --badge-user-bg:#e2f2f8;   --badge-user-ink:#0d5568;   --badge-user-line:#a8d9e8;
  --badge-viewer-bg:#eef2f4; --badge-viewer-ink:#3d4f58; --badge-viewer-line:#ccd8dd;

  /* focus */
  --focus:rgba(15,118,110,.55);

  /* shape / depth */
  --radius:14px;
  --radius-sm:8px;
  --radius-pill:999px;
  --shadow:0 6px 24px rgba(15,32,38,.07);
  --shadow-lg:0 10px 28px rgba(15,32,38,.12);

  /* type */
  --fs-h1:clamp(26px,1.4vw + 21px,32px);
  --fs-h2:21px;
  --fs-h3:17px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:13px;
  --lh-body:1.75;              /* เว้นบรรทัดกว้างเพื่อไม่ให้วรรณยุกต์ไทยชนกัน */
  --lh-head:1.4;
}

/* ---------------- Design tokens : Dark ----------------
   ผู้ใช้กดสลับเอง (สคริปต์ใน <head> ใส่ data-theme ให้)
   *** KEEP IN SYNC กับบล็อก prefers-color-scheme ด้านล่าง *** */
:root[data-theme="dark"]{
  color-scheme:dark;

  --bg:#0d1418;
  --surface:#131e23;
  --surface-2:#18262c;
  --surface-3:#1d2d34;
  --nav-bg:rgba(19,30,35,.88);

  --ink:#e2eaee;
  --ink-strong:#f2f8fa;
  --muted:#9cb0b9;

  --line:#243239;
  --line-strong:#34464e;
  --line-input:#5b737e;

  --brand:#0f766e;             /* สีปุ่มไม่เปลี่ยนตามโหมด = คงเอกลักษณ์ + ขาวบนเทอโควย์ผ่าน AA */
  --brand-dark:#14b8a6;        /* โหมดมืด hover สว่างขึ้น */
  --brand-text:#5eead4;        /* ตัวอักษร/ลิงก์ต้องลอยจากพื้นเข้ม */
  --brand-tint:#0f2b29;
  --brand-tint-ink:#99f6e4;
  --brand-tint-line:#155e56;
  --on-brand:#ffffff;
  --accent:#22d3ee;
  --accent-tint:#a5f3fc;
  --cyan:#38bdf8;

  --ok-bg:#0c2a20;   --ok-line:#1d5c47;   --ok-ink:#6ee7b7;
  --err-bg:#2c1214;  --err-line:#7f2b2f;  --err-ink:#fca5a5;
  --warn-bg:#2a2110; --warn-line:#7c5c16; --warn-ink:#fcd34d;
  --info-bg:#0f2b29; --info-line:#155e56; --info-ink:#99f6e4;

  --badge-admin-bg:#0f2b29;  --badge-admin-ink:#99f6e4;  --badge-admin-line:#155e56;
  --badge-user-bg:#0e2a34;   --badge-user-ink:#a5e8f7;   --badge-user-line:#155e75;
  --badge-viewer-bg:#1b262c; --badge-viewer-ink:#c6d4da; --badge-viewer-line:#34464e;

  --focus:rgba(45,212,191,.6);

  --shadow:0 6px 24px rgba(0,0,0,.45);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55);
}

/* fallback ตอน JS ไม่ทำงาน : ตามค่าระบบ ยกเว้นผู้ใช้เลือกสว่างไว้
   *** KEEP IN SYNC กับ :root[data-theme="dark"] ด้านบน *** */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --bg:#0d1418;
    --surface:#131e23;
    --surface-2:#18262c;
    --surface-3:#1d2d34;
    --nav-bg:rgba(19,30,35,.88);

    --ink:#e2eaee;
    --ink-strong:#f2f8fa;
    --muted:#9cb0b9;

    --line:#243239;
    --line-strong:#34464e;
    --line-input:#5b737e;

    --brand:#0f766e;
    --brand-dark:#14b8a6;
    --brand-text:#5eead4;
    --brand-tint:#0f2b29;
    --brand-tint-ink:#99f6e4;
    --brand-tint-line:#155e56;
    --on-brand:#ffffff;
    --accent:#22d3ee;
    --accent-tint:#a5f3fc;
    --cyan:#38bdf8;

    --ok-bg:#0c2a20;   --ok-line:#1d5c47;   --ok-ink:#6ee7b7;
    --err-bg:#2c1214;  --err-line:#7f2b2f;  --err-ink:#fca5a5;
    --warn-bg:#2a2110; --warn-line:#7c5c16; --warn-ink:#fcd34d;
    --info-bg:#0f2b29; --info-line:#155e56; --info-ink:#99f6e4;

    --badge-admin-bg:#0f2b29;  --badge-admin-ink:#99f6e4;  --badge-admin-line:#155e56;
    --badge-user-bg:#0e2a34;   --badge-user-ink:#a5e8f7;   --badge-user-line:#155e75;
    --badge-viewer-bg:#1b262c; --badge-viewer-ink:#c6d4da; --badge-viewer-line:#34464e;

    --focus:rgba(45,212,191,.6);

    --shadow:0 6px 24px rgba(0,0,0,.45);
    --shadow-lg:0 10px 30px rgba(0,0,0,.55);
  }
}

/* ---------------- Base ---------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI",Tahoma,"Sarabun","TH Sarabun New",sans-serif;
  font-size:16px;
  line-height:1.75;          /* เว้นบรรทัดกว้างเพื่อไม่ให้วรรณยุกต์ไทยชนกัน */
}
img{max-width:100%;display:block;}
a{color:var(--brand-text);}

/* ลิงก์ข้ามไปเนื้อหา (มองเห็นเฉพาะตอนโฟกัส) */
.skip{position:absolute;left:-9999px;top:0;}
.skip:focus{
  left:8px;top:8px;z-index:200;
  background:var(--surface);color:var(--ink);
  padding:10px 16px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow);outline:3px solid var(--focus);
}

/* ---------------- Focus ---------------- */
:where(a,button,.btn,.nav a.item,.icon-btn,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm);
}

/* ---------------- Icons ---------------- */
.i{width:1.1em;height:1.1em;flex:0 0 auto;vertical-align:-.16em;display:inline-block;}
.i-lg{width:1.5em;height:1.5em;}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;padding:0;
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.icon-btn:hover{background:var(--brand-tint);color:var(--brand-text);border-color:var(--brand-tint-line);}

.theme-toggle .i-sun{display:none;}
.theme-toggle .i-moon{display:block;}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none;}
}

/* ---------------- Navigation ---------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.nav-inner{
  display:flex;align-items:center;gap:14px;
  max-width:1240px;margin:0 auto;padding:10px 20px;
}
.nav .logo{
  display:flex;align-items:center;gap:10px;
  font-weight:700;text-decoration:none;color:var(--ink);
  flex-shrink:0;white-space:nowrap;
}
.nav .logo img{width:34px;height:34px;border-radius:9px;}
.nav .spacer{flex:1;}
.nav-menu{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;order:2;}
.nav a.item{
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;          /* กันเบราว์เซอร์ตัดคำไทยกลางวลี */
  flex-shrink:0;               /* กันเมนูถูกบีบจนต้องขึ้นบรรทัดใหม่ */
  text-decoration:none;color:var(--muted);font-size:var(--fs-sm);
  padding:7px 11px;border-radius:var(--radius-sm);
  transition:background-color .15s ease,color .15s ease;
}
.nav a.item:hover{background:var(--brand-tint);color:var(--brand-text);}
/* ห้ามเปลี่ยน font-weight : JS ใส่คลาสหลัง paint แรก จะทำให้ nav ขยับ */
.nav a.item.active{
  color:var(--brand-text);background:var(--brand-tint);
  box-shadow:inset 0 -2px 0 var(--brand);
}
.nav .theme-toggle{order:3;}
.nav .nav-toggle{order:4;display:none;}

/* ---------------- Badges & avatar ---------------- */
.userchip{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  padding:4px 10px 4px 4px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);font-size:var(--fs-xs);
}
/* ชื่อกินความกว้าง ~130px ซึ่งเป็นตัวการหลักที่ทำให้เมนูตกบรรทัด
   จึงไม่แสดงบนแถบ — ชื่อเต็มยังอยู่ใน title ของ avatar, บนหน้า Default.aspx
   และในแผงเมนูมือถือ (กฎด้านล่างเปิดกลับมาให้) */
.userchip-name{
  display:none;
  max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-weight:600;
}
.avatar-initial{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  font-size:14px;font-weight:700;line-height:1;color:#fff;
  background:linear-gradient(135deg,#0f766e,#155e75);
}
.avatar-admin {background:linear-gradient(135deg,#0f766e,#115e59);}
.avatar-user  {background:linear-gradient(135deg,#155e75,#0e7490);}
.avatar-viewer{background:linear-gradient(135deg,#41535d,#55707e);}

.badge{
  display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:600;line-height:1.6;
  white-space:nowrap;border:1px solid;
}
.badge-admin {background:var(--badge-admin-bg); color:var(--badge-admin-ink); border-color:var(--badge-admin-line);}
.badge-user  {background:var(--badge-user-bg);  color:var(--badge-user-ink);  border-color:var(--badge-user-line);}
.badge-viewer{background:var(--badge-viewer-bg);color:var(--badge-viewer-ink);border-color:var(--badge-viewer-line);}
.badge-other {background:var(--surface-3);      color:var(--muted);           border-color:var(--line);}

.pill{
  display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:600;border:1px solid;white-space:nowrap;
}
.pill-on {background:var(--ok-bg); color:var(--ok-ink); border-color:var(--ok-line);}
.pill-off{background:var(--surface-3);color:var(--muted);border-color:var(--line);}

/* ---------------- Layout ---------------- */
.wrap{max-width:1040px;margin:0 auto;padding:0 20px;}
section{margin:34px 0;}
h1,h2,h3{line-height:var(--lh-head);color:var(--ink-strong);}
h1{font-size:var(--fs-h1);margin:0 0 6px;}
h2{font-size:var(--fs-h2);margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--line);}
h2.plain{border-bottom:0;padding-bottom:0;}
h3{font-size:var(--fs-h3);margin:0 0 6px;}
p{margin:0 0 12px;}
.muted{color:var(--muted);}
.small{font-size:var(--fs-sm);}
code{
  font-family:Consolas,"Cascadia Mono",Menlo,monospace;font-size:.92em;
  background:var(--surface-3);padding:1px 6px;border-radius:6px;
}

/* ---------------- Hero ---------------- */
/* ไม่ใส่ overflow:hidden ที่ .hero เพราะรูปประจำตัวยื่นออกมาด้านล่าง
   ให้ตัวรูปแบนเนอร์โค้งมุมของตัวเองแทน */
.hero{position:relative;margin-bottom:78px;}
.hero img.banner{
  width:100%;height:280px;object-fit:cover;
  border-radius:0 0 var(--radius) var(--radius);
}
/* เส้นตารางบาง ๆ ให้ดูเป็นงานเทคนิค เดิมฝังอยู่ในไฟล์ banner.png แต่เส้น 1px
   ในแรสเตอร์จะเบลอเมื่อภาพถูกยืดเต็มความกว้างจอ วาดด้วย CSS จึงคมทุกความกว้าง
   ลำดับการวาด: ::before (ตาราง) -> ::after (scrim) -> .profile{z-index:2} */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:0 0 var(--radius) var(--radius);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px,transparent 1px 80px);
}
.hero::after{                  /* ไล่เฉดคลุมด้านล่าง ให้ตัวอักษรขาวอ่านออกเสมอ */
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(180deg,
    rgba(9,14,30,0) 38%,
    rgba(9,14,30,.18) 60%,
    rgba(9,14,30,.62) 100%);
}
.hero .profile{
  position:absolute;left:0;right:0;bottom:-56px;z-index:2;
  display:flex;align-items:flex-end;gap:20px;
  max-width:1040px;margin:0 auto;padding:0 20px;
}
.hero .profile img{
  width:132px;height:132px;border-radius:50%;
  border:5px solid var(--surface);box-shadow:var(--shadow);
}
/* รูปประจำตัวยื่นพ้นแบนเนอร์ลงมาได้ แต่ตัวอักษรสีขาวต้องอยู่บนแบนเนอร์เสมอ
   ไม่งั้นจะกลายเป็นขาวบนขาวอ่านไม่ออก (ระยะยื่นของ .profile คือ 56px) */
.hero .profile .who{padding-bottom:76px;}
.hero .profile .who h1{color:#fff;}
.hero .profile .who p{color:var(--accent-tint);margin:0;}

/* ---------------- Card / Grid ---------------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
}
.card>*:last-child{margin-bottom:0;}
.card h2:first-child,.card h3:first-child{margin-top:0;}
.grid{display:grid;gap:18px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}

.work{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease;
}
.work:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}

/* ภาพหัวการ์ด: ภาพหน้าจอของงานจริง ย่อไว้ที่ site/img/works/ (สร้างโดย
   Documentation/make_images.py) สัดส่วน 900x420 ตรงกับ aspect-ratio ด้านล่างพอดี
   ภาพจึงไม่ถูก CSS ตัดซ้ำ  padding เล็กน้อยเพื่อให้พื้นไล่สีโผล่เป็นกรอบสีรอบภาพ */
.work .cover{aspect-ratio:15/7;padding:10px;color:#fff;}
.work .cover img.shot{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:6px;box-shadow:0 4px 14px rgba(8,12,28,.34);
}
/* คู่สีเดิมของ HW10 เพื่อคงเอกลักษณ์ (เดิมอยู่ในไฟล์ PNG ตอนนี้ย้ายมาอยู่ใน CSS) */
.cover-csharp{background:linear-gradient(135deg,#9a3412,#9f1239);}
.cover-sql   {background:linear-gradient(135deg,#155e75,#0f766e);}
.cover-web   {background:linear-gradient(135deg,#3730a3,#6b21a8);}
.cover-http  {background:linear-gradient(135deg,#0f766e,#047857);}

.work .body{padding:16px;}
.work .body p{font-size:var(--fs-sm);color:var(--muted);margin-bottom:10px;}

/* ---------------- แถบสรุปตัวเลข (หน้าผลงาน) ---------------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-top:18px;
}
.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
}
.stat b{
  display:block;font-size:26px;line-height:1.2;
  color:var(--brand-text);font-weight:700;
}
.stat span{display:block;font-size:var(--fs-xs);color:var(--muted);}

/* ---------------- การ์ดเมนู (หน้าแรก) ---------------- */
/* ทั้งใบเป็น <a> เพื่อให้กดได้ทุกจุด ไม่ใช่เฉพาะปุ่มเล็ก ๆ เหมือนเดิม */
.menu-card{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.menu-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-lg);
  border-color:var(--brand-tint-line);
}
.menu-ico{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:var(--radius-sm);
  background:var(--brand-tint);color:var(--brand-tint-ink);
  border:1px solid var(--brand-tint-line);
}
.menu-ico .i{width:22px;height:22px;}
.menu-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
.menu-txt strong{color:var(--ink-strong);font-size:var(--fs-h3);line-height:1.5;}
.menu-go{
  flex:0 0 auto;color:var(--muted);
  transition:transform .15s ease,color .15s ease;
}
.menu-card:hover .menu-go{transform:translateX(3px);color:var(--brand-text);}
/* ออกจากระบบไม่ควรเด่นเท่าเมนูที่พาไปข้างหน้า */
.menu-card.quiet .menu-ico{
  background:var(--surface-3);color:var(--muted);border-color:var(--line);
}

/* ---------------- แถวกิจกรรมจาก AuditLog (เฉพาะ Admin) ---------------- */
.act{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.act:last-child{border-bottom:0;padding-bottom:0;}
.act:first-child{padding-top:0;}
.act-tag{
  flex:0 0 auto;min-width:150px;
  font-size:var(--fs-xs);font-weight:600;line-height:1.6;
  padding:2px 10px;border-radius:var(--radius-pill);
  border:1px solid;text-align:center;
}
.act-ok   {background:var(--ok-bg);      color:var(--ok-ink);   border-color:var(--ok-line);}
.act-err  {background:var(--err-bg);     color:var(--err-ink);  border-color:var(--err-line);}
.act-warn {background:var(--warn-bg);    color:var(--warn-ink); border-color:var(--warn-line);}
.act-other{background:var(--surface-3);  color:var(--muted);    border-color:var(--line);}
.act-who{font-weight:600;color:var(--ink-strong);}
.act-when{margin-left:auto;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;}

/* ---------------- แท็บกรอง + ตัวแบ่งหน้าของ Audit Log ---------------- */
.tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:var(--surface-2);
  color:var(--muted);font-size:var(--fs-sm);font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.tab:hover{background:var(--brand-tint);color:var(--brand-tint-ink);border-color:var(--brand-tint-line);}
.tab.is-on{background:var(--brand);color:var(--on-brand);border-color:var(--brand);}
.tab.is-on:hover{background:var(--brand-dark);color:var(--on-brand);border-color:var(--brand-dark);}
.tab-count{
  font-size:var(--fs-xs);font-weight:700;line-height:1.5;
  padding:1px 8px;border-radius:var(--radius-pill);
  background:var(--surface);color:var(--muted);border:1px solid var(--line);
}
.tab.is-on .tab-count{background:rgba(255,255,255,.22);color:var(--on-brand);border-color:transparent;}

.pager{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.pager-info{margin:0 auto;color:var(--muted);font-size:var(--fs-sm);text-align:center;}
/* LinkButton ที่ Enabled=false เรนเดอร์เป็น <a class="aspNetDisabled"> ที่ไม่มี href */
.pager .aspNetDisabled{opacity:.45;pointer-events:none;}

/* แถวเครื่องมือท้ายการ์ด Audit Log — ปุ่มล้าง log อยู่ที่นี่ ไม่ปนกับตัวแบ่งหน้า */
.log-tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
}
.log-tools p{flex:1 1 320px;margin:0;}
/* ปุ่มทำลายข้อมูล: ทรงเดียวกับ .ghost แต่ใช้โทนแดงของ --err ที่มีอยู่แล้ว
   จึงเข้ากับทั้งโหมดสว่างและมืดโดยไม่ต้องเพิ่ม token ใหม่ */
/* เส้นขอบใช้ --err-ink ไม่ใช่ --err-line: --err-line ทำมาเป็นพื้นหลังของกล่องแจ้งเตือน
   ตัดกับ --surface ได้แค่ 1.45:1 เอามาเป็นขอบปุ่มจะแทบมองไม่เห็น (WCAG 1.4.11 ขอ 3:1)
   --err-ink ให้ 8.0:1 ในโหมดสว่างและ 8.9:1 ในโหมดมืด เท่ากับที่ .ghost ใช้ --brand */
.btn.danger{background:var(--surface);color:var(--err-ink);border-color:var(--err-ink);}
.btn.danger:hover{background:var(--err-bg);color:var(--err-ink);border-color:var(--err-ink);}
/* asp:Button ที่ Enabled=false เรนเดอร์เป็น <input disabled> คนละแบบกับ LinkButton */
.btn.danger[disabled]{opacity:.45;cursor:not-allowed;}
.btn.danger[disabled]:hover{background:var(--surface);}
/* Action ในตารางใช้ป้ายสีชุดเดียวกับหน้าแรก จึงห้ามให้ .table บังคับ nowrap ทับ */
.table .act-tag{display:inline-block;min-width:0;}

/* ---------------- การ์ดงานย่อย (แทนตารางสรุป 14 แถวเดิม) ---------------- */
.hw{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease;
}
.hw:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.hw>*:last-child{margin-bottom:0;margin-top:auto;}  /* ดันปุ่มไปชิดล่างเสมอ */
.hw-head{display:flex;align-items:baseline;gap:9px;margin-bottom:8px;}
.hw-head h3{margin:0;font-size:var(--fs-h3);}
.hw-no{
  flex:0 0 auto;
  font-size:var(--fs-xs);font-weight:700;line-height:1.6;
  padding:2px 9px;border-radius:var(--radius-pill);
  background:var(--brand-tint);color:var(--brand-tint-ink);
  border:1px solid var(--brand-tint-line);white-space:nowrap;
}
.hw p{margin-bottom:10px;}

.tag{
  display:inline-block;font-size:var(--fs-xs);line-height:1.6;
  padding:3px 10px;border-radius:var(--radius-pill);
  background:var(--brand-tint);color:var(--brand-tint-ink);
  border:1px solid var(--brand-tint-line);margin:3px 5px 3px 0;
}

/* ---------------- Table ---------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:15px;}
caption{
  caption-side:top;text-align:left;font-size:var(--fs-xs);
  color:var(--muted);padding-bottom:8px;
}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
th{background:var(--surface-2);color:var(--ink-strong);font-weight:600;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:var(--surface-3);}
/* GridView : ห้ามให้คอลัมน์หักบรรทัด ให้เลื่อนแนวนอนใน .table-wrap แทน */
.table td,.table th{white-space:nowrap;}
.table .empty td{white-space:normal;color:var(--muted);text-align:center;padding:26px 12px;}

/* ---------------- Form ---------------- */
.field{margin-bottom:16px;}
label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:6px;}
input[type=text],input[type=email],input[type=password],input[type=search],
textarea,select,.input{
  width:100%;max-width:100%;padding:11px 13px;
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line-input);border-radius:var(--radius-sm);
  font-family:inherit;font-size:15px;line-height:1.6;
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1;}
input:focus,textarea:focus,select:focus{border-color:var(--brand);outline:none;}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--focus);outline-offset:1px;border-color:var(--brand);
}
textarea{min-height:110px;resize:vertical;}
.form-actions{display:flex;gap:10px;margin-top:4px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border:1px solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;background:var(--brand);color:var(--on-brand);
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;line-height:1.4;
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--brand-dark);}
.btn:active{transform:translateY(1px);}
/* .ghost ต้องมี :hover ของตัวเองอยู่ติดกัน ไม่งั้น .btn:hover จะถูกทับ */
.btn.ghost{background:var(--surface);color:var(--brand-text);border-color:var(--brand);}
.btn.ghost:hover{background:var(--brand-tint);color:var(--brand-tint-ink);border-color:var(--brand-dark);}
.btn.btn-sm{padding:7px 12px;font-size:var(--fs-xs);}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;}

/* ---------------- Status panels ---------------- */
.ok,.err,.note{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid;border-radius:var(--radius-sm);
  padding:13px 16px;font-size:var(--fs-sm);
}
.ok  {background:var(--ok-bg);   border-color:var(--ok-line);   color:var(--ok-ink);}
.err {background:var(--err-bg);  border-color:var(--err-line);  color:var(--err-ink);}
.note{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink);}
.note-ok {background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink);}
.note-err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink);}
.ok .i,.err .i,.note .i{margin-top:3px;}
.ok h2,.err h2{margin:0 0 4px;font-size:17px;border:0;padding:0;color:inherit;line-height:1.4;}
.ok p,.err p{margin:0 0 4px;color:inherit;}
.ok p:last-child,.err p:last-child{margin-bottom:0;}
.ok a,.err a{color:inherit;font-weight:600;text-underline-offset:3px;}
.result-panel{margin-top:14px;}

.entry{
  border-left:3px solid var(--brand);background:var(--surface);
  padding:12px 16px;border-radius:0 10px 10px 0;
  margin-bottom:12px;box-shadow:var(--shadow);
}
.entry .meta{font-size:var(--fs-xs);color:var(--muted);}
/* หัวแถว: ชื่อ+เวลาอยู่ซ้าย ปุ่มลบ (เห็นเฉพาะ Admin) ชิดขวา */
.entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.entry-del{flex:0 0 auto;}

/* ---------------- Footer ---------------- */
footer{
  margin-top:46px;padding:22px 0 30px;
  border-top:1px solid var(--line);text-align:center;
  color:var(--muted);font-size:var(--fs-sm);
}

/* ---------------- Responsive ---------------- */
/* ชั้นบีบก่อนถึง hamburger : ประหยัดอีก ~60px ให้เมนูเต็มอยู่ได้นานขึ้น */
/* ปุ่มเข้าสู่ระบบบนแถบเมนู (เห็นเฉพาะตอนยังไม่ล็อกอิน)
   ห้ามให้ข้อความหักบรรทัด ไม่งั้นแถบเมนูจะสูงขึ้นเป็นสองเท่าบนจอแคบ */
.nav .btn{white-space:nowrap;}

/* ---------------- หน้าเข้าสู่ระบบ ---------------- */
.login-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.login-head img{width:52px;height:52px;border-radius:13px;flex:0 0 auto;}
.login-head h2{margin:0;}
.login-head p{margin:2px 0 0;}
.btn-block{width:100%;}
/* กล่องคำอธิบายแบบเรียบ ไม่ใช่ .note (ซึ่งเป็น flex และจะดัน <code> ตกบรรทัด) */
.hint{
  margin:14px 0 0;padding:11px 14px;
  background:var(--surface-3);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--muted);
}
.hint code{background:var(--surface);}

/* การ์ดอธิบาย 3 ชั้น : ตัวเลขชั้นอยู่หัวการ์ด */
.tier{display:flex;flex-direction:column;}
.tier-no{
  align-self:flex-start;margin-bottom:10px;
  font-size:var(--fs-xs);font-weight:700;line-height:1.6;
  padding:2px 11px;border-radius:var(--radius-pill);
  background:var(--brand-tint);color:var(--brand-tint-ink);
  border:1px solid var(--brand-tint-line);
}
.tier code{display:inline-block;margin-top:2px;}

@media (max-width:1300px){
  .nav-inner{gap:10px;}
  .nav-menu{gap:3px;}
  .nav a.item{padding:7px 9px;gap:6px;}
}
@media (max-width:1140px){
  .js-nav .nav .nav-toggle{display:inline-flex;}
  .js-nav .nav-menu{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:12px 20px 16px;
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
  }
  .js-nav .nav[data-open="true"] .nav-menu{display:flex;}
  .js-nav .nav a.item{padding:11px 12px;min-height:44px;}
  .js-nav .nav[data-open="true"] .userchip{
    width:100%;justify-content:flex-start;
    border-radius:var(--radius-sm);margin-bottom:6px;
  }
  .js-nav .nav[data-open="true"] .userchip-name{display:inline;max-width:none;}
}
@media (max-width:820px){
  .grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}   /* 4 ช่องบนจอแคบจะบีบจนอ่านไม่ออก */
}
@media (max-width:640px){
  .nav-inner{padding:10px 14px;}
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr;}
  /* จอแคบ : ปุ่มแบ่งหน้าขึ้นบรรทัดใหม่ ถ้าปล่อยให้ข้อความอยู่กลางแบบจอกว้าง
     ข้อความจะไปแทรกกลางปุ่ม จึงดันขึ้นไปเป็นบรรทัดของตัวเอง */
  .pager{justify-content:center;}
  .pager-info{order:-1;flex:1 0 100%;margin:0 0 4px;}
  .hero img.banner{height:190px;}
  .hero .profile{flex-direction:column;align-items:flex-start;gap:10px;bottom:-96px;}
  .hero{margin-bottom:112px;}
  .hero .profile img{width:104px;height:104px;}
  /* จอแคบ : แบนเนอร์เตี้ยเกินกว่าจะวางทั้งรูปและข้อความได้
     จึงย้ายข้อความลงมาใต้แบนเนอร์ แล้วเปลี่ยนเป็นสีตัวอักษรปกติ
     (ถ้าคงสีขาวไว้จะกลายเป็นขาวบนขาว) */
  .hero .profile .who{padding-bottom:0;}
  .hero .profile .who h1{font-size:24px;color:var(--ink-strong);}
  .hero .profile .who p{color:var(--muted);}
}
@media (max-width:480px){
  .nav .logo span{font-size:15px;}
  .nav .logo img{width:30px;height:30px;}
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .work:hover{transform:none;}
}