/* =========================================================================
   TriplebLab Portal — สไตล์หลัก (mobile-first)
   เขียนจากจอเล็กขึ้นไปหาจอใหญ่ · ปุ่มและช่องกรอกใหญ่พอสำหรับใช้นิ้วในโรงเรือน
   ชุดสีกราฟ (--series-*) ผ่านการตรวจ CVD / contrast ทั้งโหมดสว่างและมืด
   ========================================================================= */

/* --- ชุดสี: แอปมือถือโทนเขียวป่า -----------------------------------------
 * ออกแบบให้ใช้แบบติดตั้งลงหน้าจอ (PWA) เป็นหลัก — หน้าตาต้องเหมือนแอปจริง
 * ไม่ใช่เว็บที่ถูกยัดลงจอมือถือ
 *
 * พื้นหน้าเทาอมเขียวจาง การ์ดขาวมุมมนลอยด้วยเงานุ่ม ๆ แทนเส้นขอบหนา
 * สีเขียวใช้เป็น "สัญญาณ" เท่านั้น — ปุ่มหลัก เมนูที่เปิดอยู่ ลิงก์ ไม่ใช่ของตกแต่ง
 *
 * ข้อควรระวัง: #3ecf8e สว่างเกินกว่าจะเอาไปเป็นตัวอักษรบนพื้นขาว (1.8:1)
 * โหมดสว่างจึงใช้เขียวเข้มสำหรับตัวหนังสือ/ปุ่ม แล้วเก็บเขียวสดไว้ที่
 * --brand-accent สำหรับงานตกแต่งที่ไม่ต้องอ่าน (จุด เส้น แถบ)
 */

:root {
  color-scheme: light;

  /* ชุดฟอนต์หลักของทั้งระบบ — ประกาศไว้ตรงนี้เพื่อให้ที่อื่นยืมไปใช้เป็นตัวสำรองได้ */
  --font-base: "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun", -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* พื้นหน้าเป็นเทาอมเขียวจาง ๆ ให้การ์ดสีขาวลอยขึ้นมาเองโดยไม่ต้องพึ่งเส้นขอบหนา */
  --surface-0: #f2f5f3;
  --surface-1: #ffffff;
  --surface-2: #edf1ee;
  --border: #e1e7e3;
  --border-strong: #cbd5ce;

  --text-primary: #0f1a14;
  --text-secondary: #3d4d44;
  --text-muted: #5b6b62;

  --brand: #0b7a4b;
  --brand-strong: #075c38;
  --brand-accent: #3ecf8e;
  --brand-soft: #e2f4e9;
  --on-brand: #ffffff;

  /* สีตัวอักษรบนป้ายสี — เข้มกว่าสีเติมพื้น เพราะสีเดียวกันใช้สองหน้าที่ไม่ได้
     (สีเติมพื้น/จุดในกราฟต้องสด ส่วนตัวหนังสือต้องเข้มพอให้อ่านออก) */
  --good-text: #067a55;
  --warn-text: #855100;
  --bad-text: #b42318;
  --blue-text: #1c5fad;
  --purple-text: #5636bd;

  /* ชุดสีเชิงหมวดหมู่ (categorical) — ลำดับคงที่ ห้ามวนซ้ำ */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;

  --status-good: #1baf7a;
  --status-warn: #eda100;
  --status-bad: #d92d20;
  --purple: #6b4fd8;
  /* แดงเข้มสำหรับปุ่มทึบ — ตัวอักษรขาวบนสีนี้ผ่าน contrast 5.6:1 */
  --danger-solid: #c62828;
  --danger-solid-strong: #a81f1f;

  --grid: #eceef0;
  /* เงานุ่ม ๆ สองชั้นแบบแอปมือถือ: ชั้นแรกคมไว้เป็นขอบ ชั้นหลังฟุ้งให้การ์ดลอย */
  --shadow: 0 1px 2px rgb(16 40 28 / .05), 0 2px 10px rgb(16 40 28 / .05);
  --shadow-lg: 0 2px 6px rgb(16 40 28 / .06), 0 14px 36px rgb(16 40 28 / .14);
  /* มุมมนแบบแอปบนมือถือ — การ์ดมนกว่าปุ่ม/ช่องกรอกที่อยู่ข้างใน ให้ขอบซ้อนกันดูสบายตา */
  --radius: 16px;
  --radius-sm: 11px;
  /* แถบหัวเรื่องแบบกระจก — เป็นสีเดียวกับ meta theme-color ให้แถบสถานะของเครื่องกลืนไปกับแอป */
  --topbar-bg: rgb(242 245 243 / .92);

  /* --- ผิวกระจกของแถบเมนูล่าง ---
     bg คือค่าสำรองสำหรับเบราว์เซอร์ที่เบลอพื้นหลังไม่ได้ (ต้องทึบพอให้อ่านออก)
     bg-blur คือค่าที่ใช้จริงเมื่อเบลอได้ จึงโปร่งกว่ามาก
     shine คือเส้นแสงขอบบน ทำให้ดูเป็นผิวกระจกหนา ไม่ใช่แผ่นสีจาง ๆ */
  --glass-bg: rgb(255 255 255 / .94);
  --glass-bg-blur: rgb(255 255 255 / .9);
  --glass-edge: rgb(255 255 255 / .55);
  --glass-shine: rgb(255 255 255 / .85);
  --glass-active: rgb(11 122 75 / .13);

  --tap: 44px;              /* ขนาดพื้นที่กดขั้นต่ำ */
  --bottomnav-h: 62px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  /* พื้นดำอมเขียวเข้ม ไม่ใช่เทาเปล่า — ให้ยังรู้สึกเป็นแอปของงานเพาะเลี้ยงต้นไม้ */
  --surface-0: #0c110e;
  --surface-1: #141b17;
  --surface-2: #1b241f;
  --border: #253029;
  --border-strong: #354139;

  --text-primary: #e8eeea;
  --text-secondary: #c3cdc7;
  --text-muted: #9aa8a0;

  --brand: #3ecf8e;
  --brand-strong: #62dda6;
  --brand-accent: #3ecf8e;
  --brand-soft: #10271c;
  --on-brand: #0b1410;

  --good-text: #4ec99a;
  --warn-text: #e0aa4d;
  --bad-text: #f08a80;
  --blue-text: #6cb0f5;
  --purple-text: #bcaaff;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;

  --status-good: #199e70;
  --status-warn: #c98500;
  --status-bad: #e66767;
  --purple: #a898f0;
  --danger-solid: #c62828;
  --danger-solid-strong: #a81f1f;

  --topbar-bg: rgb(12 17 14 / .92);

  --glass-bg: rgb(20 27 23 / .95);
  --glass-bg-blur: rgb(20 27 23 / .9);
  --glass-edge: rgb(255 255 255 / .1);
  --glass-shine: rgb(255 255 255 / .08);
  --glass-active: rgb(62 207 142 / .18);

  --grid: #232c27;
  --shadow: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .35), 0 16px 40px rgb(0 0 0 / .5);
  }
}

/**
 * ผู้ใช้กดสลับเป็นโหมดมืดเอง (ปุ่มบนแถบหัวเรื่องเขียน data-theme ไว้ที่ <html>)
 *
 * ค่าต้องเหมือนบล็อกด้านบนทุกตัว มีเทสต์เทียบให้อยู่แล้วว่าไม่หลุดจากกัน
 * (CSS รวมสองบล็อกนี้เป็นอันเดียวไม่ได้ เพราะกฎในกรอบ @media
 * ไม่มีทางทำงานตอนเครื่องตั้งเป็นโหมดสว่าง)
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* พื้นดำอมเขียวเข้ม ไม่ใช่เทาเปล่า — ให้ยังรู้สึกเป็นแอปของงานเพาะเลี้ยงต้นไม้ */
  --surface-0: #0c110e;
  --surface-1: #141b17;
  --surface-2: #1b241f;
  --border: #253029;
  --border-strong: #354139;

  --text-primary: #e8eeea;
  --text-secondary: #c3cdc7;
  --text-muted: #9aa8a0;

  --brand: #3ecf8e;
  --brand-strong: #62dda6;
  --brand-accent: #3ecf8e;
  --brand-soft: #10271c;
  --on-brand: #0b1410;

  --good-text: #4ec99a;
  --warn-text: #e0aa4d;
  --bad-text: #f08a80;
  --blue-text: #6cb0f5;
  --purple-text: #bcaaff;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;

  --status-good: #199e70;
  --status-warn: #c98500;
  --status-bad: #e66767;
  --purple: #a898f0;
  --danger-solid: #c62828;
  --danger-solid-strong: #a81f1f;

  --topbar-bg: rgb(12 17 14 / .92);

  --glass-bg: rgb(20 27 23 / .95);
  --glass-bg-blur: rgb(20 27 23 / .9);
  --glass-edge: rgb(255 255 255 / .1);
  --glass-shine: rgb(255 255 255 / .08);
  --glass-active: rgb(62 207 142 / .18);

  --grid: #232c27;
  --shadow: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .35), 0 16px 40px rgb(0 0 0 / .5);
}

* { box-sizing: border-box; }
/* ให้ hidden ชนะ display ของคลาสอื่นเสมอ (ใช้กับช่องที่โชว์ตามเงื่อนไข) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* แตะแล้วไม่ต้องมีกล่องสีเทาวาบแบบเว็บ — ทุกปุ่มมีสถานะ :active ของตัวเองแล้ว */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { margin: 0 0 .25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.011em; }
h1 { font-size: 1.3rem; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .5rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* --- โครงหน้า: มือถือ ----------------------------------------------------- */

.shell { display: flex; flex-direction: column; min-height: 100vh; }
.sidebar { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/*
 * แถบหัวเรื่องแบบกระจกสีเดียวกับพื้นหน้า — เลื่อนหน้าแล้วเนื้อหาไหลผ่านข้างหลังจาง ๆ
 * เหมือนแอปบน iOS/Android และกลืนไปกับแถบสถานะของเครื่อง (meta theme-color)
 *
 * padding บนบวก safe-area ไว้ เผื่อเครื่องที่ติดตั้งเป็นแอปแล้วให้เนื้อหา
 * ขึ้นไปอยู่ใต้รอยบาก/Dynamic Island ช่องซ้ายขวาก็บวกไว้สำหรับตอนหมุนจอนอน
 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: calc(.6rem + var(--safe-top)) calc(.9rem + var(--safe-right)) .6rem calc(.9rem + var(--safe-left));
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  -webkit-user-select: none; user-select: none;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar {
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
  }
}
.topbar-title { min-width: 0; }
/*
 * ทุกบรรทัดในหัวเรื่องสูงตายตัวและไม่ขึ้นบรรทัดใหม่ แถบจึงสูงเท่ากันทุกหน้า
 * (64px บนมือถือ, 81px บนจอใหญ่) — แถบแท็บที่ติดอยู่ใต้หัวเรื่องอาศัยตัวเลขนี้
 */
.topbar h1 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb,
.backlink {
  display: block; margin: 0; font-size: .78rem; line-height: 1.3; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.topbar-actions { display: none; }

.content {
  padding: .9rem calc(.9rem + var(--safe-right)) calc(var(--bottomnav-h) + var(--safe-bottom) + 1.5rem) calc(.9rem + var(--safe-left));
  display: flex; flex-direction: column; gap: .9rem;
}

/* --- แถบเมนูล่าง (มือถือ) — แคปซูลกระจกลอย -------------------------------
 *
 * ลอยเหนือเนื้อหาแบบแคปซูล ไม่ใช่แถบทึบติดขอบจอ และพื้นหลังเป็นกระจกฝ้า
 * (backdrop-filter) ให้เห็นเนื้อหาไหลอยู่ข้างหลังจาง ๆ — บอกผู้ใช้ว่ายัง
 * เลื่อนหน้าต่อได้ ไม่ใช่จบแค่นี้
 *
 * เบราว์เซอร์ที่ไม่มี backdrop-filter จะได้พื้นทึบแทน (ดู @supports ด้านล่าง)
 * ซึ่งยังอ่านออกครบ แค่ไม่มีเอฟเฟกต์
 */
.bottomnav {
  position: fixed; z-index: 40;
  bottom: calc(var(--safe-bottom) + .5rem);
  left: calc(.6rem + var(--safe-left)); right: calc(.6rem + var(--safe-right));
  /* แถบนี้ใช้กดอย่างเดียว ลากนิ้วผ่านแล้วไม่ควรเลือกข้อความหรือเด้งเมนูคัดลอกลิงก์ */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  border-radius: 26px;
  /* สีพื้นโปร่งของแคปซูล — แยกตัวแปรไว้เพราะโหมดมืดใช้คนละค่า */
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  /* เงาสองชั้น: ชั้นในคือเส้นแสงขอบบน (ทำให้ดูเป็นผิวกระจกหนา ๆ) ชั้นนอกคือเงาลอย */
  box-shadow:
    inset 0 1px 0 var(--glass-shine),
    0 8px 28px rgb(16 40 28 / .16);
  /*
   * ห้ามใส่ overflow: hidden ตรงนี้ — แผ่น "อื่นๆ" กางขึ้นไปอยู่เหนือแถบ
   * ซึ่งอยู่นอกกรอบของแถบ ถ้า clip ไว้แผ่นจะถูกตัดหายไปทั้งใบ
   * ส่วนมุมโค้งกับผิวกระจกไม่ได้พึ่ง overflow อยู่แล้ว เบราว์เซอร์ clip
   * พื้นหลังกับผิวเบลอตาม border-radius ของตัวเองให้เอง
   */
}

/*
 * ราง — สี่ช่อง + "อื่น ๆ" กว้างเท่ากันหมด ไม่เลื่อน ไม่ลาก
 *
 * เคยลองให้รางเลื่อนได้ แล้วลองให้ลากนิ้วเลือกเมนูแบบ iOS ทั้งสองแบบถูกถอด
 * ออกแล้ว เพราะทั้งคู่ต้องพึ่ง JS มาจัดแถบต่อหลังหน้าวาดเสร็จ ซึ่งหน้านี้
 * เซิร์ฟเวอร์วาดมาใหม่ทุกครั้งที่เปลี่ยนหน้า ผลคือผู้ใช้เห็นแถบกระตุกทุกครั้ง
 * — วัดจริงแล้วมีช่วงราว 26 มิลลิวินาที (บางครั้งถึง 37) ที่แถบถูกวาดด้วย
 * หน้าตาแบบหนึ่งก่อน แล้ว JS ค่อยมาเปลี่ยนเป็นอีกแบบ บนมือถือจริงที่ช้ากว่า
 * เครื่องทดสอบ ช่วงนี้ยาวกว่านี้อีก
 *
 * ตอนนี้แถบนี้เป็น CSS ล้วน ไม่มี JS มาแตะเลย จึงถูกต้องตั้งแต่เฟรมแรกเสมอ
 */
.bottomnav-track {
  display: flex; align-items: stretch;
  padding: .25rem;
}

.bottomnav-item,
.bottomnav-more > summary {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: .3rem .2rem; min-height: calc(var(--bottomnav-h) - .5rem);
  border-radius: 20px;
  color: var(--text-muted); font-size: .68rem; font-weight: 550;
  text-align: center; cursor: pointer; list-style: none;
  transition: background-color .18s ease, color .18s ease;
}
.bottomnav-item span:last-child,
.bottomnav-more > summary span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.bottomnav-item:hover { text-decoration: none; }
/*
 * ไอคอนนั่งอยู่ในแคปซูลเล็ก ๆ ของตัวเอง (แบบ Material 3) — เมนูที่เปิดอยู่จะเติมสี
 * เฉพาะแคปซูลรอบไอคอน ไม่ใช่ทั้งช่อง ดูเบาและเป็นแอปกว่าก้อนสีใหญ่ทั้งช่อง
 */
.bottomnav-icon {
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 3.1rem; height: 1.85rem; border-radius: 999px;
  transition: background-color .18s ease;
}

/*
 * แตะแล้วติดไฟทันทีตั้งแต่ยังไม่ทันเปลี่ยนหน้า
 *
 * หน้าใหม่ต้องรอเซิร์ฟเวอร์วาดมา ระหว่างนั้นถ้าแถบนิ่งสนิทผู้ใช้จะไม่แน่ใจว่า
 * กดโดนหรือเปล่าแล้วกดซ้ำ — :active เป็นของเบราว์เซอร์ล้วน ติดไฟทันทีที่นิ้วลง
 * ไม่ต้องรอ JS จึงไม่มีทางกระตุก
 */
.bottomnav-item:active,
.bottomnav-more > summary:active { background: var(--glass-active); }

/* เมนูของหน้าปัจจุบันมีแคปซูลรองไว้ — หาเจอด้วยรูปทรง ไม่ต้องพึ่งสีอย่างเดียว */
.bottomnav-item.is-active {
  color: var(--brand-strong);
  font-weight: 700;
}
.bottomnav-item.is-active .bottomnav-icon,
.bottomnav-more[open] > summary .bottomnav-icon,
.bottomnav-more.is-active > summary .bottomnav-icon { background: var(--glass-active); }

/* static ตั้งใจ — ให้แผ่น "อื่นๆ" ไปยึดตำแหน่งกับตัวแถบแทน จะได้กว้างเต็มแถบ */
.bottomnav-more { position: static; flex: 1 1 0; min-width: 0; display: flex; }
.bottomnav-more > summary::-webkit-details-marker { display: none; }
.bottomnav-more[open] > summary,
.bottomnav-more.is-active > summary {
  color: var(--brand-strong); font-weight: 700;
}
/*
 * แผ่น "อื่นๆ" — ตอนนี้เก็บเมนูที่เหลือทั้งหมด ไม่ใช่แค่สามสี่อันเหมือนก่อน
 *
 * จึงต้องกำหนดความสูงสูงสุดแล้วให้เลื่อนได้ ไม่งั้นบนจอเตี้ย ๆ รายการท้าย ๆ
 * จะทะลุขอบบนจอออกไปแล้วกดไม่ได้เลย (dvh ตามแถบเบราว์เซอร์ที่ยืดหดบนมือถือ
 * ส่วน vh เป็นค่าสำรองให้เบราว์เซอร์เก่าที่ยังไม่รู้จัก dvh)
 */
/*
 * ไอคอนเส้นใช้สีเดียวกับข้อความรอบตัว ไม่ต้องมีไฟล์แยกสีสำหรับเมนูที่เปิดอยู่
 *
 * บล็อกนี้เคยหลุดไปอยู่ใน @media ของจอใหญ่โดยไม่ตั้งใจ มือถือจึงไม่ได้
 * flex: 0 0 auto ไปด้วย — ไอคอนถูกบีบแบนได้เวลาข้อความยาวจนต้องขึ้นสองบรรทัด
 */
.icon { display: block; flex: 0 0 auto; }
.usermenu-panel a .icon,
.bottomnav-sheet a .icon { margin-right: .15rem; }

.bottomnav-sheet {
  /*
   * แผ่นเมนูทั้งหมด — แบบแผ่นเลื่อนขึ้นของ iOS (มีขีดจับ หัวเรื่อง หมวดเป็นก้อน)
   * กางเต็มความกว้างของแถบ ยึดตำแหน่งกับ .bottomnav (ดู .bottomnav-more static)
   */
  position: absolute; bottom: calc(100% + .5rem); left: 0; right: 0;
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow-lg); padding: 0 .7rem .8rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem;
  align-content: start;
  /*
   * สูงได้ราวสามในสี่ของจอ แล้วเลื่อนเอา — เดิมเพดานครึ่งจอทำให้หมวดสุดท้าย
   * ถูกตัดครึ่งแถวทั้งที่ยังมีที่ว่าง (ผู้ใช้ส่งภาพมาให้ดู) ตอนนี้มีพื้นมืด
   * ข้างหลังแล้ว แผ่นสูงขึ้นจึงไม่ดูเหมือนเปลี่ยนไปอีกหน้า
   */
  max-height: min(40rem, 78vh);
  max-height: min(40rem, 78dvh);
  overflow-y: auto; overscroll-behavior: contain;
}
/* หัวแผ่น: ขีดจับ + ชื่อ ติดอยู่บนสุดตอนเลื่อน */
.sheet-head {
  position: sticky; top: 0; z-index: 1;
  margin: 0 -.7rem; padding: .4rem 1rem .3rem;
  background: var(--surface-0);
  text-align: center; font-weight: 700; font-size: 1rem; color: var(--text-primary);
}
.sheet-grabber {
  display: block; width: 2.4rem; height: 5px; border-radius: 99px;
  background: var(--border-strong); margin: 0 auto .4rem;
}
/* พื้นมืดด้านหลังตอนเปิดแผ่น — แยกแผ่นออกจากหน้าข้างหลังให้ชัด */
body:has(.bottomnav-more[open])::after {
  content: ""; position: fixed; inset: 0; z-index: 39;
  background: rgb(8 20 14 / .38);
  animation: sheet-fade .18s ease;
}
@keyframes sheet-fade { from { opacity: 0; } }
.bottomnav-more[open] .bottomnav-sheet { animation: sheet-up .22s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-up { from { opacity: 0; transform: translateY(14px); } }

.bottomnav-sheet-label {
  margin: 0 .3rem .3rem;
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
}
/* สีประจำหมวด — ไอคอนแต่ละหมวดมีสีของตัวเอง หาเจอเร็วขึ้นด้วยสี */
.sheet-group { --tone: var(--brand); --tone-bg: var(--brand-soft); }
.sheet-group.tone-lab { --tone: var(--blue-text); --tone-bg: rgb(42 120 214 / .12); }
.sheet-group.tone-business { --tone: var(--warn-text); --tone-bg: rgb(237 161 0 / .16); }
.sheet-group.tone-team { --tone: var(--purple-text); --tone-bg: rgb(107 79 216 / .13); }
.sheet-group.tone-other { --tone: var(--text-secondary); --tone-bg: var(--surface-2); }
.sheet-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  color: var(--tone); background: var(--tone-bg);
}
.bottomnav-sheet a { color: var(--text-primary); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.bottomnav-sheet a .icon { margin: 0; }

/*
 * รายการเป็นแถวในก้อนของแต่ละหมวด แบบหน้าตั้งค่าของ iOS — ผู้ใช้เลือกแบบนี้
 * (อีกแบบคือไอคอนเป็นช่อง) เพราะเห็นชื่อเมนูเต็ม ๆ อ่านง่ายกว่า
 */
.sheet-items {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--surface-1); border-radius: 18px; padding: .2rem 0;
}
.sheet-items a {
  display: flex; align-items: center; gap: .75rem; position: relative;
  padding: .55rem .9rem; min-height: 3.1rem;
  font-size: .95rem; line-height: 1.25;
}
/* เส้นคั่นเริ่มหลังไอคอน แบบ iOS */
.sheet-items a + a::before {
  content: ""; position: absolute; top: 0; left: 3.6rem; right: 0; border-top: 1px solid var(--border);
}
/* ลูกศรท้ายแถว บอกว่ากดแล้วไปอีกหน้า */
.sheet-items a::after {
  content: ""; margin-left: auto; width: .5rem; height: .5rem; flex: 0 0 auto;
  border-right: 2px solid var(--text-muted); border-top: 2px solid var(--text-muted);
  transform: rotate(45deg); opacity: .6;
}
.sheet-items .sheet-icon { width: 2rem; height: 2rem; border-radius: 9px; }
.sheet-items a:first-child { border-radius: 18px 18px 0 0; }
.sheet-items a:last-child { border-radius: 0 0 18px 18px; }
.sheet-items a:only-child { border-radius: 18px; }
.sheet-items a:active { background: var(--surface-2); }
.sheet-items a.is-active { color: var(--tone); font-weight: 700; }
.sheet-items a.is-active .sheet-icon { background: var(--tone); color: #fff; }

/*
 * ผิวกระจกจริงเฉพาะเบราว์เซอร์ที่ทำได้
 *
 * แยกไว้ใน @supports เพราะถ้าเบราว์เซอร์ไม่รองรับ backdrop-filter แล้วเรา
 * ตั้งพื้นหลังโปร่งไว้ ตัวหนังสือจะทับกับเนื้อหาข้างหลังจนอ่านไม่ออก
 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottomnav {
    background: var(--glass-bg-blur);
    /* saturate ดันสีที่อยู่ข้างหลังให้สดขึ้น เป็นลักษณะเด่นของผิวกระจกแบบนี้ */
    /*
     * ตัวเลขพวกนี้มาจากการวัดหน้าจริงที่มีหัวข้อตัวหนาอยู่ใต้แถบพอดี ไม่ได้ตั้งลอย ๆ
     *
     * ความทึบยิ่งต่ำยิ่งสวย แต่ตัวหนังสือที่เลื่อนผ่านข้างหลังจะอ่านออกและ
     * ไปกวนชื่อเมนู — ที่ .62 (ค่าที่ลองตอนแรก) อ่านออกชัดเจน ที่ .94
     * เหลือเป็นเงาจาง ๆ ที่รู้ว่ามีอะไรอยู่ข้างหลังแต่อ่านไม่ออก ซึ่งคือที่ต้องการ
     * ชื่อเมนูที่คนแตะทุกวันต้องมาก่อนความสวยของเอฟเฟกต์
     *
     * รัศมีที่ใหญ่ขึ้นไม่ได้ช่วย — วัดแล้วกลับแย่ลง (40px แย่กว่า 26px)
     * เพราะมันดูดสีจากบริเวณกว้างกว่าเดิมเข้ามาปนในแถบ
     */
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
  }
}

/*
 * แถบไอคอนล่าง (ออกแบบใหม่ 2026-11, ผู้ใช้เลือกแบบ ก) — แบบแอป iOS ปัจจุบัน
 * แท็บที่เปิดอยู่มีแคปซูลรองทั้งช่อง (ไอคอน + ชื่อ) แทนแคปซูลเล็กรอบไอคอน
 * ไอคอนหนาขึ้นเมื่อเปิดอยู่ ดูออกทันทีว่าอยู่หน้าไหน
 */
.bottomnav { border-radius: 30px; }
.bottomnav-track { padding: .3rem; gap: .1rem; }
.bottomnav-item,
.bottomnav-more > summary { border-radius: 24px; gap: 1px; font-size: .67rem; color: var(--text-muted); }
.bottomnav-icon { width: auto; height: 1.6rem; background: none !important; }
.bottomnav-item.is-active,
.bottomnav-more[open] > summary,
.bottomnav-more.is-active > summary { background: var(--glass-active); color: var(--brand-strong); }
.bottomnav-item.is-active .icon,
.bottomnav-more[open] > summary .icon,
.bottomnav-more.is-active > summary .icon { stroke-width: 2.1; }


/* --- เมนูผู้ใช้ ------------------------------------------------------------ */

/* ปุ่มไอคอนกลมบนแถบหัวเรื่อง (แจ้งเตือน / ตั้งค่า / เมนู) */
.iconbtn,
.usermenu > summary {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: 0 0 auto;
  border-radius: 999px; border: 1px solid transparent;
  color: var(--text-secondary); cursor: pointer; list-style: none;
}
.iconbtn:hover,
.usermenu > summary:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu[open] > summary { background: var(--surface-2); color: var(--brand); }

/* จุดแดงบอกว่ามีของค้าง — วางชิดมุมขวาบนของกระดิ่ง */
.iconbtn-dot {
  position: absolute; top: 9px; right: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--status-bad);
  /* ขอบสีพื้นหลังทำให้จุดลอยออกมาจากไอคอน ไม่กลืนกับเส้นกระดิ่ง */
  box-shadow: 0 0 0 2px var(--surface-1);
}

.usermenu { position: relative; }
/* หัวแผงตั้งค่า บอกว่ากำลังใช้งานในนามใคร */
.usermenu-who {
  display: flex; align-items: center; gap: .55rem;
  padding: .2rem .5rem .55rem; margin-bottom: .2rem;
  border-bottom: 1px solid var(--border);
}
.usermenu-who strong { display: block; font-size: .9rem; line-height: 1.25; }
.usermenu-who small { display: block; font-size: .75rem; }
.usermenu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: .5rem; min-width: 240px;
  display: flex; flex-direction: column; gap: .1rem;
}
.usermenu-panel > .muted { padding: .2rem .5rem .4rem; margin: 0; border-bottom: 1px solid var(--border); }
.usermenu-panel a {
  padding: .6rem .5rem; border-radius: var(--radius-sm); color: var(--text-primary);
  min-height: var(--tap); display: flex; align-items: center; gap: .4rem;
}
.usermenu-panel a:hover { background: var(--surface-2); text-decoration: none; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; flex: 0 0 36px; object-fit: cover;
  /* พยัญชนะไทยที่มีสระบน/วรรณยุกต์สูงกว่ากรอบตัวอักษรปกติ ถ้าไม่ตัดขอบ
     ตัวย่อในวงกลมจะโผล่ออกไปนอกวง (เช่น "ฐ" ที่หัวตัวสูง) */
  overflow: hidden; line-height: 1;
}
.avatar-empty { background: var(--surface-2); color: var(--text-muted); }
.avatar-sm { width: 28px; height: 28px; flex-basis: 28px; font-size: .78rem; }
.avatar-xl { width: 92px; height: 92px; flex-basis: 92px; font-size: 2.2rem; }

/* --- แท็บภายในหน้า -------------------------------------------------------- */

.tabs {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  padding: 0 .6rem; background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  position: sticky; top: calc(64px + var(--safe-top)); z-index: 25;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: .7rem .7rem; white-space: nowrap; color: var(--text-secondary);
  border-bottom: 2px solid transparent; font-weight: 550; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.tab:hover { text-decoration: none; color: var(--text-primary); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-count {
  background: var(--surface-2); border-radius: 999px; padding: 0 .4rem;
  font-size: .75rem; color: var(--text-muted); font-weight: 600;
}

/* --- การ์ด ---------------------------------------------------------------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem;
  padding: 1rem 1.05rem .75rem; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.card-head p { margin: 0; font-size: .82rem; }
.card-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.card-body { padding: 1rem 1.05rem; }
.card-body > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }

/* ช่องตัวเลขเป็นแผ่นสีพื้นรองไม่มีเส้นขอบ — อยู่ในการ์ดแล้ว กรอบซ้อนกรอบดูรก */
.stat {
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: 14px; padding: .8rem .9rem;
}
.stat-label { color: var(--text-muted); font-size: .78rem; margin: 0 0 .1rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.stat-unit { font-size: .78rem; font-weight: 500; color: var(--text-muted); margin-left: .25rem; }
.stat-hint { color: var(--text-muted); font-size: .76rem; margin: .1rem 0 0; }
.stat-brand .stat-value { color: var(--brand); }
/* ค่าที่เป็นข้อความยาว (เงิน / ระยะเวลา) ใช้ตัวเล็กลง จะได้ไม่ตัดบรรทัดกลางตัวเลข */
.stat-money .stat-value,
.stat-duration .stat-value { font-size: 1.15rem; }

/* --- ตาราง: จอเล็กแปลงเป็นการ์ดซ้อน --------------------------------------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th {
  color: var(--text-muted); font-weight: 500; font-size: .72rem;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .04em;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-compact th, .table-compact td { padding: .35rem .5rem; }
/* เลขที่ใบเป็นตัวอ้างอิงกันเวลาคุยงาน ใช้ฟอนต์ความกว้างเท่ากันทุกตัว
   จะได้กวาดตาหาเลขในคอลัมน์ได้เร็ว ไม่ต้องอ่านทีละตัว */
.cell-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; white-space: nowrap;
}

@media (max-width: 700px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .5rem .6rem; margin-bottom: .6rem; background: var(--surface-1);
  }
  .table-stack tr:last-child { margin-bottom: 0; }
  .table-stack td {
    border: 0; padding: .2rem 0;
    display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  }
  .table-stack td::before {
    content: attr(data-label); color: var(--text-muted);
    font-size: .78rem; flex: 0 0 auto; font-weight: 600;
  }
  .table-stack td[data-label=""]::before { content: none; }
  .table-stack td > * { text-align: right; }
  /* ช่องแรกของแต่ละการ์ดทำหน้าที่เป็นหัวเรื่อง */
  .table-stack td:first-child {
    display: block; padding-bottom: .35rem; margin-bottom: .3rem;
    border-bottom: 1px dashed var(--border);
  }
  .table-stack td:first-child::before { content: none; }
  .table-stack td:first-child > * { text-align: left; }
  /* ตัวแก้ไขรายการกางเต็มความกว้างของการ์ด ไม่ถูกดันไปชิดขวา */
  .table-stack td > .row-edit { flex: 1 1 100%; text-align: left; }
  /*
   * ช่อง "จัดการ" ที่มีฟอร์มอยู่ข้างใน — ให้ป้ายชื่อช่องขึ้นบรรทัดของตัวเอง
   * แล้วปุ่ม/ช่องเลือกได้ใช้ความกว้างเต็มการ์ด
   *
   * ถ้าปล่อยให้นั่งข้างป้ายชื่อแบบช่องอื่น ช่องเลือกตำแหน่งจะถูกบีบจนชื่อขาด
   * ปุ่ม "รีเซ็ตรหัสผ่าน" ถูกหักเป็นสามบรรทัด และปุ่ม "ลบ" ล้นขอบการ์ด
   * (เจอจริงที่หน้าผู้ใช้งานบนมือถือ)
   */
  .table-stack td:has(> form) { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .5rem; }
  .table-stack td:has(> form)::before { flex: 1 1 100%; }
  .table-stack td > form { text-align: left; }
  .table-stack td > form.inline-form { flex: 1 1 100%; gap: .5rem; }
  .table-stack td > form.inline-form > select.input { flex: 1 1 8rem; width: auto; }
  .table-stack td > form.inline-form > select.input:first-of-type { flex-grow: 2; }
  /* ปุ่มแก้ไขปักไว้มุมบนขวาของการ์ด ส่วนฟอร์มยังกางออกด้านล่างตามปกติ
     ทุกกฎอยู่ใต้ :has() — เบราว์เซอร์เก่าที่ไม่รองรับจะข้ามทั้งชุด
     แล้วปุ่มกลับไปอยู่ท้ายการ์ดแบบเดิม ไม่หลุดตำแหน่ง */
  .table-stack tr:has(.row-edit) { position: relative; }
  .table-stack tr:has(.row-edit) td:first-child { padding-right: 5.5rem; }
  .table-stack tr:has(.row-edit) .row-edit > summary {
    position: absolute; top: .5rem; right: .6rem; margin: 0;
  }
  .table-stack tr:has(.row-edit) td:has(> .row-edit:not([open])) { padding: 0; }
}

/* --- ปุ่ม / ฟอร์ม --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
  padding: .6rem 1.05rem; min-height: var(--tap); border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary);
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none;
  touch-action: manipulation;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-item, .chip, .card, .input { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
}
/* กดแล้วยุบลงนิดเดียวแบบปุ่มในแอป — บอกว่ากดโดนแล้วระหว่างรอหน้าใหม่ */
.btn:active { transform: scale(.97); }
/* ปุ่มที่กดไม่ได้ต้องดูออกว่ากดไม่ได้ ไม่ใช่สีเดียวกับปุ่มปกติ */
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 14px color-mix(in srgb, var(--brand) 28%, transparent);
}
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-danger { color: var(--status-bad); border-color: var(--status-bad); background: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--status-bad) 12%, transparent); }
/* ปุ่มแดงแบบทึบ — ใช้กับการกระทำที่จบขั้นตอนและย้อนกลับไม่ได้ เช่น ออกตู้ */
.btn-stop { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.btn-stop:hover { background: var(--danger-solid-strong); border-color: var(--danger-solid-strong); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
.btn-sm { padding: .35rem .65rem; min-height: 36px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn-lg { padding: .95rem 1.2rem; min-height: 56px; font-size: 1.05rem; border-radius: 14px; }
.inline { display: inline; }

.form { display: flex; flex-direction: column; gap: .85rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; }
.form-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; }
.form-actions .btn { flex: 1 1 auto; }

.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field-label { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.field-hint { font-size: .78rem; color: var(--text-muted); }
.req { color: var(--status-bad); font-style: normal; margin-left: .15rem; }

.input {
  width: 100%; padding: .65rem .7rem; font: inherit; font-size: 16px; /* 16px กัน iOS ซูมอัตโนมัติ */
  /* min-width: 0 จำเป็นเพราะ input[type=date] บน iOS มีความกว้างขั้นต่ำในตัว
     ถ้าไม่ตั้งจะดันจนล้นออกนอกคอลัมน์ */
  min-width: 0; min-height: var(--tap);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-primary);
}
.input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
/*
 * ช่องวันที่/เวลาบน iOS Safari — min-width: 0 อย่างเดียวไม่พอ ตัวควบคุมแบบเนทีฟ
 * ยังกว้างตามตัวมันเองและสูงกว่าช่องอื่น ไปทับช่องข้าง ๆ ในแถบตัวกรอง
 * (KB เจอบนหน้าบันทึกเข้าตู้) ปิดหน้าตาเนทีฟแล้วให้กว้าง/สูงเท่าช่องอื่น
 * แตะแล้วยังเปิดตัวเลือกวันที่ของ iOS ตามเดิม
 */
.input[type="date"],
.input[type="time"],
.input[type="datetime-local"],
.input[type="month"] {
  -webkit-appearance: none; appearance: none;
  display: block; max-width: 100%; line-height: 1.5;
}
.input[type="date"]::-webkit-date-and-time-value,
.input[type="time"]::-webkit-date-and-time-value,
.input[type="datetime-local"]::-webkit-date-and-time-value,
.input[type="month"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.5em; }
textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; }
/* ช่องกรอกที่อยู่ในเซลล์ตาราง — แคบและเตี้ยกว่าปกติ ไม่ให้แถวสูงจนอ่านยาก */
.input-cell { width: 100%; max-width: 7.5rem; padding: .35rem .5rem; min-height: 0; font-size: .88rem; }
.input-note { max-width: 12rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* --- ปฏิทินงาน ------------------------------------------------------------- */

.cal-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .8rem; font-size: .78rem; color: var(--text-muted); }
.cal-legend-item { display: inline-flex; align-items: center; gap: .3rem; }
.cal-dot { width: .55rem; height: .55rem; border-radius: 999px; }
.cal-dot-blue { background: var(--series-1); }
.cal-dot-purple { background: var(--purple); }
.cal-dot-green { background: var(--status-good); }
.cal-dot-amber { background: var(--status-warn); }

.cal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; }
.cal th {
  padding: .4rem; font-size: .75rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cal td { border: 1px solid var(--border); vertical-align: top; padding: .3rem; height: 5.5rem; }
.cal-empty { background: var(--surface-2); border-color: var(--border); }
.cal-daynum { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .2rem; }
.cal-day.is-today { background: var(--brand-soft); }
.cal-day.is-today .cal-daynum { color: var(--brand-strong); font-weight: 700; }

.cal-event {
  display: flex; align-items: center; gap: .25rem; margin-bottom: .18rem;
  padding: .12rem .3rem; border-radius: var(--radius-sm);
  font-size: .72rem; line-height: 1.35; text-decoration: none; color: var(--text-primary);
  border-left: 3px solid var(--border-strong); background: var(--surface-2);
}
/* งานที่เราเป็นผู้รับผิดชอบเน้นให้เห็นก่อน */
.cal-event.is-mine { font-weight: 650; }
.cal-event-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event-blue { border-left-color: var(--series-1); }
.cal-event-purple { border-left-color: var(--purple); }
.cal-event-green { border-left-color: var(--status-good); }
.cal-event-amber { border-left-color: var(--status-warn); }

.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.cal-row:last-child { border-bottom: 0; }
.cal-row-when { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--text-secondary); flex: 0 0 auto; }
.cal-row-title { font-weight: 600; }

/* แถบเลือกช่วงเวลาและกรองชนิดงาน */
.cal-controls { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-1);
  font-size: .8rem; color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
/* ชนิดงานที่เลือกอยู่ใช้สีของชนิดนั้น จะได้โยงกับสีบนตารางได้ทันที */
.chip-blue.is-active { background: var(--series-1); border-color: var(--series-1); }
.chip-purple.is-active { background: var(--purple); border-color: var(--purple); }
.chip-green.is-active { background: var(--status-good); border-color: var(--status-good); }
.chip-amber.is-active { background: var(--status-warn); border-color: var(--status-warn); color: #14180f; }

.cal-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.cal-range .field { flex: 1 1 9rem; margin: 0; }
.cal-range .btn { flex: 0 0 auto; }

/* ไตรมาส = สามตารางเดือน เรียงข้างกันเมื่อจอกว้างพอ */
/* minmax(0,1fr) กันช่องกริดกว้างตามเนื้อหาจนดันออกนอกจอ
   ตารางที่กว้างกว่าจอจะได้เลื่อนอยู่ในกรอบ .table-wrap ของตัวเองแทน */
.cal-months { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
.cal-month-name { font-size: .9rem; margin-bottom: .4rem; color: var(--text-secondary); }
.cal-compact { min-width: 380px; }
.cal-compact td { height: 3.6rem; padding: .2rem; }
.cal-compact .cal-daynum { font-size: .7rem; }
.cal-compact .cal-event { font-size: .65rem; padding: .06rem .22rem; }
/* มุมมองสัปดาห์มีแค่ 7 ช่อง จึงให้ช่องสูงขึ้นเพื่อแสดงรายการได้ครบโดยไม่ต้องย่อ */
.cal-tall td { height: 9rem; }

/* กลุ่มรูปผู้รับผิดชอบ — ซ้อนเหลื่อมกันเล็กน้อยให้ประหยัดที่ในตาราง */
.people { display: inline-flex; align-items: center; gap: .25rem; }
.people .avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: .72rem; }

/* --- หน้าโปรไฟล์ ----------------------------------------------------------- */

.profile-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.profile-id { min-width: 0; }
.profile-name { font-size: 1.25rem; margin: 0; }
.profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; }
.profile-position { margin: .2rem 0 0; color: var(--text-secondary); font-weight: 600; }
/* รหัสผ่านชั่วคราว — ตัวใหญ่ อ่านออกเสียงบอกกันได้ไม่ผิดตัว */
.temp-password {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .08em;
  padding: .8rem 1rem; margin: 0 0 1rem; text-align: center;
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  user-select: all;
}
/* รูปในตารางผู้ใช้อยู่กับข้อความสองบรรทัด จึงชิดบนแทนกึ่งกลาง */
.table .people { align-items: flex-start; }

/* --- ผังห้องเลี้ยง --------------------------------------------------------- */

.rack + .rack { margin-top: 1rem; }
.rack-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.rack-name { font-size: .85rem; color: var(--text-secondary); margin: 0; }

/* เครื่องมือแก้ไข/ลบทั้งห้องหรือทั้งชั้นวาง — พับเก็บไว้ไม่ให้เกะกะผังห้อง
 *
 * กางแบบดันเนื้อหาลง ไม่ใช่ลอยทับ เพราะ .card ตั้ง overflow: hidden ไว้
 * (เพื่อให้เนื้อหาโดนตัดตามมุมโค้ง) กล่องที่ลอยอยู่จึงถูกตัดหายไปครึ่งหนึ่ง
 * แบบดันลงยังได้ผลเหมือนกันทุกขนาดจอ ไม่ต้องแยกกฎของมือถือด้วย
 */
.group-tools > summary { list-style: none; cursor: pointer; display: inline-flex; min-height: 32px; padding: .2rem .55rem; }
.group-tools > summary::-webkit-details-marker { display: none; }
/* กางแล้วกินเต็มบรรทัด กล่องจะได้ไม่ไปเบียดปุ่มอื่นในแถวเดียวกัน */
.group-tools[open] { flex-basis: 100%; }
.group-tools-panel {
  margin-top: .5rem; max-width: 340px;
  display: flex; flex-direction: column; gap: .6rem;
  padding: .8rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.group-tools-form { display: flex; flex-direction: column; gap: .5rem; }
.rack-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }

.slot {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .65rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  text-decoration: none; color: var(--text-primary);
}
.slot:hover { border-color: var(--border-strong); }
/* ช่องที่มีของวางอยู่ต้องเด่นกว่าช่องว่าง เพราะเป็นสิ่งที่คนมาหา */
.slot.is-used { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: var(--brand-soft); }
.slot.is-full { border-color: color-mix(in srgb, var(--status-warn) 55%, transparent); }
.slot-level { font-weight: 650; font-size: .9rem; }
.slot-use { font-size: .78rem; }
.slot-cap { font-size: .72rem; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }

.checklist { display: flex; flex-wrap: wrap; gap: .4rem; }
.check {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: .4rem .75rem; min-height: 40px; cursor: pointer;
}
.check:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); font-weight: 600; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }

/* ตัวเลือกแบบปุ่มใหญ่ (รอบเช้า/บ่าย, Clean/Cont) */
.choice { display: flex; gap: .5rem; flex-wrap: wrap; }
.choice label {
  flex: 1 1 120px; display: flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .7rem .6rem; min-height: var(--tap); cursor: pointer; font-weight: 600; font-size: .92rem;
}
.choice label:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

/* แถบตัวกรอง — กริดคอลัมน์กว้างเท่ากัน อยู่ในกล่องของตัวเองเหมือนการ์ดอื่น */
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .7rem;
  align-items: end;
  padding: .85rem .9rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* จอเล็กให้ปุ่มกรองเต็มแถว จะได้ไม่ไปเบียดช่องวันที่ */
.filters .btn { grid-column: 1 / -1; }
/* ลูกของกริดต้องหดได้ ไม่งั้นช่องที่กว้างในตัว (วันที่บน iOS) ดันคอลัมน์จนทับกัน */
.filters > * { min-width: 0; }

/* ฟอร์มสั้น ๆ ที่วางในเซลล์ตาราง (เช่น เปลี่ยนตำแหน่งผู้ใช้) */
.inline-form { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* --- ป้ายสถานะ ------------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-slate { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.badge-green { background: color-mix(in srgb, var(--status-good) 14%, var(--surface-1)); color: var(--good-text); border-color: color-mix(in srgb, var(--status-good) 32%, transparent); }
.badge-blue { background: color-mix(in srgb, var(--series-1) 14%, var(--surface-1)); color: var(--blue-text); border-color: color-mix(in srgb, var(--series-1) 32%, transparent); }
.badge-amber { background: color-mix(in srgb, var(--status-warn) 16%, var(--surface-1)); color: var(--warn-text); border-color: color-mix(in srgb, var(--status-warn) 34%, transparent); }
.badge-red { background: color-mix(in srgb, var(--status-bad) 12%, var(--surface-1)); color: var(--bad-text); border-color: color-mix(in srgb, var(--status-bad) 30%, transparent); }
.badge-purple { background: color-mix(in srgb, var(--purple) 14%, var(--surface-1)); color: var(--purple-text); border-color: color-mix(in srgb, var(--purple) 30%, transparent); }

/* --- แถบความคืบหน้า -------------------------------------------------------- */

.progress {
  height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--border); min-width: 80px; display: inline-block; vertical-align: middle;
  width: 100%; max-width: 160px;
}
.progress-fill { height: 100%; border-radius: 999px; }
.progress-green { background: var(--status-good); }
.progress-blue { background: var(--series-1); }
.progress-amber { background: var(--status-warn); }
.progress-label { font-size: .8rem; color: var(--text-muted); margin-left: .4rem; }

.qty { font-variant-numeric: tabular-nums; font-weight: 600; }
.qty-unit { font-weight: 400; color: var(--text-muted); font-size: .8rem; margin-left: .2rem; }

/* --- หน้าแรก (body.page-home) ตาม mockup ที่ KB เลือก ---------------------------
 * แบบ A (ทุกคน): หัวเล็ก (วันที่ + สวัสดี) · แถบลงเวลาสีเขียวบรรทัดเดียว · ปุ่มลัดไอคอนสี
 *                · งานของฉันเป็นรายการ · ผลงานวันนี้การ์ดเดียว
 * แบบ B (เจ้าของ/ผู้จัดการ): เพิ่มกล่องภาพรวมแล็บใต้ปุ่มลัด
 * การ์ดของหน้านี้ (hcard) บางกว่าการ์ดทั่วไป: ไม่มีเส้นคั่นหัว ระยะในน้อยกว่า
 */
.page-home .topbar h1 { font-size: 1.3rem; }
.page-home .breadcrumb { font-size: .8rem; }
.page-home .content { gap: .8rem; }

/* แถบลงเวลา — ยังไม่เข้างาน และกำลังทำงาน ใช้แถบเขียวหน้าตาเดียวกัน */
.page-home .clock-card { padding: .85rem 1rem; border-radius: 18px; }
.clock-strip { display: flex; align-items: center; gap: .8rem; }
.clock-strip-text { flex: 1 1 auto; min-width: 0; }
.clock-strip h2 { margin: 0; font-size: .98rem; }
.clock-strip .clock-meta { font-size: .8rem; }
.clock-strip-form { flex: 0 0 auto; margin: 0; }
.clock-card .clock-strip-form .btn,
.clock-card .shift-out {
  margin-top: 0; flex: 0 0 auto; min-height: 2.5rem; padding: .45rem 1rem; border-radius: 12px;
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 700;
}
.shift-head { display: flex; align-items: center; gap: .75rem; }
.shift-main { flex: 1 1 auto; min-width: 0; }
.shift-main h2 { margin: 0; font-size: .8rem; font-weight: 500; opacity: .92; display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.page-home .clock-card .clock-time {
  font-family: "Kanit Money", var(--font-base); font-weight: 600;
  font-size: 1.7rem; line-height: 1.1; letter-spacing: 0; margin: .05rem 0 0;
}
.page-home .clock-card .clock-meta { font-size: .8rem; }
.shift-now { margin: .5rem 0 0 !important; padding-top: .5rem; border-top: 1px solid color-mix(in srgb, var(--on-brand) 22%, transparent); }
.clock-card-cabinet .shift-now { border-top-color: color-mix(in srgb, #14180f 18%, transparent); }
.page-home .shift-trail { margin-top: .4rem; font-size: .78rem; }

/* ปุ่มลัด — ไอคอนสีบนพื้นหน้า ไม่มีกรอบการ์ด */
.shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; padding: .1rem 0; }
.shortcut {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  color: var(--text-primary); font-size: .78rem; font-weight: 500; text-align: center; padding: .2rem 0;
}
.shortcut:hover { text-decoration: none; }
.shortcut:hover .shortcut-icon { filter: brightness(.96); }
.shortcut-icon { width: 3rem; height: 3rem; border-radius: 15px; display: grid; place-items: center; }
.tone-green { background: var(--brand-soft); color: var(--brand); }
.tone-blue { background: color-mix(in srgb, var(--blue-text) 14%, var(--surface-1)); color: var(--blue-text); }
.tone-purple { background: color-mix(in srgb, var(--purple-text) 14%, var(--surface-1)); color: var(--purple-text); }
.tone-amber { background: color-mix(in srgb, var(--status-warn) 20%, var(--surface-1)); color: var(--warn-text); }

/* การ์ดบางของหน้าแรก */
.hcard {
  background: var(--surface-1); border-radius: 18px; box-shadow: var(--shadow);
  padding: .85rem 1rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0;
}
.hcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.hcard-head h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.hcard-empty { margin: 0; }
.chip-s {
  display: inline-flex; align-items: center; white-space: nowrap; flex: 0 0 auto;
  padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.chip-good { background: var(--brand-soft); color: var(--brand); }
.chip-bad { background: color-mix(in srgb, var(--status-bad) 13%, var(--surface-1)); color: var(--bad-text); }

.tasklist { display: flex; flex-direction: column; }
.taskrow {
  display: flex; align-items: center; gap: .65rem; padding: .6rem 0;
  border-top: 1px solid var(--border); color: var(--text-primary);
}
.taskrow:first-child { border-top: 0; padding-top: .15rem; }
.taskrow:hover { text-decoration: none; }
.taskrow:hover .taskrow-title { color: var(--brand); }
.taskrow-check { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.6px solid var(--border-strong); flex: 0 0 auto; }
.taskrow-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.taskrow-title { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taskrow-chips { display: flex; gap: .3rem; flex: 0 0 auto; }
.taskrow-sub { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.today-main { display: flex; align-items: baseline; gap: .4rem; }
.today-num { font-family: "Kanit Money", var(--font-base); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--brand); }
.today-sub { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); }
.today-sub strong { color: var(--text-primary); font-weight: 600; }

/* บันทึกงานที่ทำ / เปลี่ยนงาน — พับไว้ เปิดเมื่อจะใช้ */
.hcard.activity { gap: 0; padding-block: .3rem; }
.hfold summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: .05rem;
  padding: .55rem 1.4rem .55rem 0; position: relative; font-size: .92rem;
}
.hfold summary::-webkit-details-marker { display: none; }
.hfold summary::after { content: "›"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.2rem; transition: transform .15s; }
.hfold[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.hfold + .hfold { border-top: 1px solid var(--border); }
.hfold .form { padding: .2rem 0 .8rem; gap: .5rem; }
.hfold .btn { align-self: flex-start; }

/* ทำอะไรต่อ? — เลือกงาน + ปุ่มอยู่แถวเดียว */
.nextjob-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.nextjob-form .field { flex: 1 1 12rem; margin: 0; min-width: 0; }
.nextjob-form .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nextjob-form .input { min-height: 2.6rem; padding: .45rem .7rem; }
.nextjob-form .btn { flex: 0 0 auto; min-height: 2.6rem; }
.nextjob-form [data-show-when]:not([hidden]) { flex-basis: 100%; }

/* ภาพรวมแล็บ (แบบ B) */
.overview { display: flex; flex-direction: column; gap: .6rem; }
.overview-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .3rem .15rem 0; }
.overview-head h2 { font-size: .98rem; margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.kpi {
  display: flex; flex-direction: column; gap: .05rem; min-width: 0;
  padding: .75rem .85rem; border-radius: 16px;
  background: var(--surface-1); box-shadow: var(--shadow); color: var(--text-primary);
}
.kpi:hover { text-decoration: none; background: var(--surface-2); }
.kpi-label { font-size: .74rem; color: var(--text-muted); }
.kpi-value { font-family: "Kanit Money", var(--font-base); font-size: 1.55rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-unit { font-family: var(--font-base); font-size: .74rem; font-weight: 500; color: var(--text-muted); margin-left: .3rem; }
.kpi-hint { font-size: .72rem; color: var(--text-muted); }
.kpi .is-bad { color: var(--bad-text); }
.overview-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.overview-panel {
  display: flex; flex-direction: column; gap: .5rem; min-width: 0;
  padding: .8rem .9rem; border-radius: 16px; background: var(--surface-1); box-shadow: var(--shadow);
}
.overview-panel-title { margin: 0; font-size: .86rem; font-weight: 600; }
.teambars { display: flex; flex-direction: column; gap: .4rem; }
.teambar { display: grid; grid-template-columns: minmax(0, 5.5rem) 1fr auto; align-items: center; gap: .6rem; font-size: .82rem; }
.teambar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teambar-track { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.teambar-track > span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.teambar-qty { font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 2.2rem; text-align: right; }
.sparkline { width: 100%; height: 44px; display: block; }
.sparkline-area { fill: var(--brand-soft); stroke: none; }
.sparkline-line { fill: none; stroke: var(--brand); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.sparkline-dot { fill: var(--brand); }

@media (min-width: 700px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .overview-split { grid-template-columns: 3fr 2fr; }
  .shortcuts { max-width: 26rem; }
}
@media (min-width: 960px) {
  .page-home .topbar h1 { font-size: 1.5rem; }
  .page-home .content { max-width: 64rem; }
}

/* --- การ์ดลงเวลา (หน้าแรก) -------------------------------------------------- */

/* ตอนกำลังจับเวลาอยู่ ใช้พื้นเขียวทึบเรียบ ๆ ไม่ไล่เฉด
   ตัวอักษรใช้ --on-brand ไม่ใช่ขาวตายตัว เพราะโหมดมืดพื้นเป็นเขียวสด
   ซึ่งตัวหนังสือขาวบนนั้นอ่านไม่ออกเลย (1.7:1) */
.clock-card {
  /* ไล่เฉดอ่อน ๆ ไปเขียวเข้ม ให้การ์ดที่กดทุกวันเด่นเป็นพระเอกของหน้าแรก */
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: var(--on-brand); border: 1px solid var(--brand);
  border-radius: 20px; padding: 1.2rem;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 26%, transparent);
}
.clock-card h2 { color: var(--on-brand); font-size: 1rem; margin-bottom: .1rem; }
.clock-card .clock-time { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
/* ตัวเลขความกว้างเท่ากัน ไม่ให้ขยับไปมาตอนวินาทีเปลี่ยน */
.live-timer { font-variant-numeric: tabular-nums; }
.clock-card .clock-meta { opacity: .92; font-size: .85rem; margin: 0; }
.clock-card .btn {
  background: var(--on-brand); color: var(--brand); border-color: var(--on-brand);
  margin-top: .9rem; font-weight: 600;
}
.clock-card .btn:hover { background: color-mix(in srgb, var(--on-brand) 88%, var(--brand)); }
.clock-card .btn-outline {
  background: transparent; color: var(--on-brand);
  border-color: color-mix(in srgb, var(--on-brand) 55%, transparent);
}
.clock-card .btn-outline:hover { background: color-mix(in srgb, var(--on-brand) 16%, transparent); }
/* ปุ่มเหลือง — งานที่ค้างรอให้ทำต่อ เช่น ลงรายการในใบบันทึก
   ตัวอักษรสีเข้มบนพื้นเหลืองได้ contrast 11:1 และเด่นออกมาจากการ์ดเขียว */
.btn-warn,
.clock-card .btn-warn { background: #ffc233; border-color: #ffc233; color: #14180f; }
.btn-warn:hover,
.clock-card .btn-warn:hover { background: #f0ad14; border-color: #f0ad14; }
.clock-idle { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); box-shadow: var(--shadow); }
.clock-idle h2 { color: var(--text-primary); }
.clock-idle .clock-time { color: var(--text-primary); }
.clock-idle .btn { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/*
 * การ์ดตู้ตอนอยู่ในตู้ — ใช้สีอำพัน (เดียวกับปุ่ม "ลงรายการ") แทนสีเขียวของ
 * การ์ดกะโดยตั้งใจ ให้ตาแยกออกทันทีว่าเป็นคนละนาฬิกากับกะ ไม่ใช่การ์ดเดียวกัน
 * ที่สลับสีไปมา (ดูคอมเมนต์บนสุดของ home.js — ผู้ใช้เคยกดพลาดเพราะเข้าใจว่า
 * เป็นการ์ดเดียวกัน)
 */
.clock-card-cabinet { background: #ffc233; border-color: #ffc233; color: #14180f; }
.clock-card-cabinet h2,
.clock-card-cabinet .clock-time { color: #14180f; }
.clock-card-cabinet .clock-meta { color: #14180f; opacity: .82; }
.clock-card-cabinet .btn {
  background: #14180f; color: #ffc233; border-color: #14180f;
}
.clock-card-cabinet .btn:hover { background: #262c1c; }
.clock-card-cabinet .btn-outline {
  background: transparent; color: #14180f; border-color: color-mix(in srgb, #14180f 45%, transparent);
}
.clock-card-cabinet .btn-outline:hover { background: color-mix(in srgb, #14180f 12%, transparent); }
/* "ลงรายการ" ต้องยังเด่นกว่าปุ่มอื่นในการ์ดนี้ด้วย จึงกลับสีให้ตรงข้ามพื้นการ์ด */
.clock-card-cabinet .btn-warn { background: #14180f; color: #ffc233; border-color: #14180f; }
.clock-card-cabinet .btn-warn:hover { background: #262c1c; }

/*
 * ไทม์ไลน์ช่วงงานบนการ์ดกะ — "วันนี้ทำอะไรไปแล้วบ้าง"
 *
 * ของเดิมกะเก็บชื่องานช่องเดียว พอเปลี่ยนงานค่าเก่าถูกทับหาย ตอนนี้เก็บเป็น
 * ช่วง ๆ จึงต้องมีที่ให้ดูย้อน ไม่งั้นข้อมูลที่เก็บเพิ่มก็ไม่มีใครได้ใช้
 */
.shift-trail {
  margin-top: .7rem; padding-top: .6rem;
  border-top: 1px solid var(--glass-edge);
  display: flex; flex-direction: column; gap: .25rem;
}
.shift-trail-row {
  margin: 0; display: flex; gap: .5rem; align-items: baseline;
  font-size: .8rem; line-height: 1.3;
}
.shift-trail-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .75; }
.shift-trail-row > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }

/* กล่อง "เปลี่ยนไปทำงานอื่น" — ซ่อนไว้ใต้หัวข้อ ไม่ให้แย่งที่กับช่องรายงาน */
.switch-job { margin-top: .9rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.switch-job > summary {
  cursor: pointer; list-style: none;
  color: var(--brand); font-weight: 600; font-size: .92rem;
  min-height: var(--tap); display: flex; align-items: center;
}
.switch-job > summary::-webkit-details-marker { display: none; }
.switch-job > summary::before { content: '↻'; margin-right: .4rem; }

/* ช่วงงานย่อยในตารางประวัติการลงเวลา */
.shift-jobs { display: flex; flex-direction: column; gap: .45rem; }
.shift-job { display: grid; grid-template-columns: auto 1fr auto; gap: .1rem .5rem; align-items: baseline; }
.shift-job-time { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .8rem; }
.shift-job-name { min-width: 0; }
.shift-job-mins { white-space: nowrap; }
/* รายงานขึ้นบรรทัดใหม่เต็มความกว้าง เพราะเป็นข้อความยาวที่คนพิมพ์เอง */
.shift-job-report {
  grid-column: 1 / -1; margin: .1rem 0 0;
  color: var(--text-secondary); font-size: .82rem; white-space: pre-line;
}

.clock-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.clock-row .btn { flex: 1 1 140px; margin-top: .9rem; }
/*
 * ฟอร์มออกงานกินเต็มแถว เพราะมีช่องสรุปงานอยู่เหนือปุ่ม
 *
 * .clock-row .btn ตั้ง flex: 1 1 140px ไว้สำหรับแถวแนวนอน พอมาอยู่ในคอลัมน์
 * flex-grow จะไปยืดตามแนวตั้งแทน ปุ่มเลยสูงเต็มการ์ด — ต้องล้างค่าตรงนี้
 */
.clock-out { flex: 1 1 100%; display: flex; flex-direction: column; gap: .45rem; margin-top: .9rem; }
.clock-out .btn { flex: 0 0 auto; margin-top: 0; }
/* ช่องสรุปงานเป็นของไม่บังคับ จึงต้องเตี้ยพอที่จะไม่แย่งความสนใจจากปุ่มออกงาน */
.clock-out textarea { min-height: 0; height: 3.4rem; font-size: .88rem; padding: .45rem .6rem; }


.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  /* จุดกะพริบอยู่บนการ์ดเขียว จึงต้องใช้สีคู่ของพื้นนั้น ไม่ใช่เขียวอ่อนตายตัว
     ซึ่งจะจมหายไปกับพื้นเขียวสดของโหมดมืด */
  background: var(--on-brand); opacity: .85;
  margin-right: .35rem; animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* --- กราฟ ----------------------------------------------------------------- */

.chart { margin: 0; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--grid); stroke-width: 1; }
.chart-track { fill: var(--surface-2); }
.chart-axis { fill: var(--text-muted); font-size: 11px; }
.chart-axis-strong { fill: var(--text-secondary); font-size: 12px; font-weight: 500; }
.chart-value { fill: var(--text-secondary); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mark { transition: opacity .12s ease; }
.chart-svg:hover .mark { opacity: .55; }
.chart-svg .mark:hover { opacity: 1; }
.chart-svg .dot { opacity: 0; }
.chart-svg:hover .dot { opacity: 1; }
.chart-table { margin-top: .75rem; }
.chart-table summary { cursor: pointer; color: var(--text-muted); font-size: .85rem; min-height: var(--tap); display: flex; align-items: center; }

/* --- รูปภาพ --------------------------------------------------------------- */

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.photo { margin: 0; }
.photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2);
}
.photo-remove { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.photo a { display: block; cursor: zoom-in; }
.photo a:focus-visible img { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- ดูรูปเต็มจอ ----------------------------------------------------------- */

.lightbox {
  /* inset: 0 + ขนาด auto ทำให้กล่องพอดีจอเป๊ะ ไม่ต้องพึ่งหน่วย vh/dvh
     ซึ่งเพี้ยนได้บนมือถือเวลาแถบที่อยู่เว็บยืดหด
     และต้องล้าง max-width/max-height ของเบราว์เซอร์ที่บีบ <dialog> ไว้ด้วย */
  position: fixed; inset: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  display: none; place-items: center;
}
/* minmax(0, 1fr) สำคัญมาก: บังคับให้แถวของ grid สูงเท่ากล่อง (ไม่ใช่เท่ารูป)
   ถ้าปล่อยเป็น auto แถวจะยืดตามความสูงจริงของรูป แล้ว max-height ของรูป
   ที่คิดเป็นเปอร์เซ็นต์ก็จะอิงแถวที่ยืดไปแล้ว = ไม่ได้ย่ออะไรเลย
   ส่วน 0 ตัวหน้าคือการอนุญาตให้แถวหดเล็กกว่าเนื้อหาข้างในได้ */
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr); }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }

.lightbox-img {
  max-width: calc(100% - 5rem); max-height: calc(100% - 6rem);
  object-fit: contain; border-radius: var(--radius-sm); cursor: zoom-out;
}
/* กล่องพอดีจออยู่แล้ว ปุ่มกับคำบรรยายจึงอิงกล่องได้ตรง ๆ */
.lightbox-caption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .8rem 1rem;
  text-align: center; font-size: .82rem; color: #f4f5f0;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
  pointer-events: none;
}

.lightbox-btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.5rem; line-height: 1;
}
.lightbox-btn:hover { background: rgba(0, 0, 0, .8); }
.lightbox-close { top: .75rem; right: .75rem; font-size: 1.1rem; }
.lightbox-prev { top: 50%; left: .5rem; transform: translateY(-50%); }
.lightbox-next { top: 50%; right: .5rem; transform: translateY(-50%); }

/* --- รูปโปรไฟล์: คลิกที่รูปเพื่อเปลี่ยน ------------------------------------ */

.avatar-edit { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
/* ตัวรูปเป็นปุ่มในตัว ไม่ต้องมีการ์ดอัปโหลดแยกอีกกล่อง */
.avatar-edit-target {
  position: relative; display: block; cursor: pointer;
  border-radius: 50%; line-height: 0;
}
.avatar-edit-target .avatar { display: block; }
/* ป้าย "เปลี่ยนรูป" ทับอยู่ครึ่งล่างของวงกลม จอสัมผัสจึงเห็นตลอดว่ากดได้
   ไม่ต้องเอาเมาส์ไปชี้ (ซึ่งบนมือถือทำไม่ได้) */
.avatar-edit-hint {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: center; gap: .2rem;
  padding: .2rem 0 .3rem;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: .68rem; font-weight: 600; line-height: 1.2;
  border-radius: 0 0 92px 92px / 0 0 46px 46px;
}
.avatar-edit-target:hover .avatar-edit-hint { background: rgba(0, 0, 0, .75); }
.uploader-input:focus-visible + .avatar-edit-target {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 50%;
}
.avatar-edit-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.avatar-edit-actions:empty { display: none; }

/* ปุ่มที่มีไว้เผื่อคนปิด JS — มี JS เมื่อไหร่ก็ไม่ต้องใช้ เพราะเลือกไฟล์แล้วส่งเอง */
:root[data-js] .nojs-only { display: none; }

/* --- กล่องเลือกแบบพับได้ + พิมพ์ค้นหา -------------------------------------- */

.picker { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); }
.picker-summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .7rem; cursor: pointer; list-style: none; min-height: var(--tap);
}
.picker-summary::-webkit-details-marker { display: none; }
/* ลูกศรบอกว่ากางได้ หมุนลงเมื่อเปิด */
.picker-summary::after {
  content: '▾'; color: var(--text-muted); transition: transform .12s ease;
}
.picker[open] .picker-summary::after { transform: rotate(180deg); }
.picker-summary .field-label { margin: 0; }
.picker-count { color: var(--text-muted); font-size: .82rem; margin-left: auto; }
.picker-panel {
  padding: .6rem .7rem .7rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .5rem;
}
/* รายการยาวแค่ไหนก็ไม่ดันหน้าจนหาปุ่มบันทึกไม่เจอ */
.picker-panel .checklist { max-height: 260px; overflow-y: auto; }
.picker-chosen { margin: .35rem 0 0; font-size: .82rem; color: var(--text-secondary); }

/* --- ดรอปดาวน์พิมพ์ค้นหาได้ (app.js: buildTreeCombo) ---------------------- */
/* select ตัวจริงยังอยู่ในฟอร์ม แค่ซ่อนไว้ ช่องพิมพ์ค้นหาเป็นตัวที่โชว์แทน */
.combo { position: relative; }
.combo > select { display: none; }
.combo-list {
  margin-top: .3rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-1); box-shadow: var(--shadow); max-height: 260px; overflow-y: auto;
}
.combo-option {
  display: block; width: 100%; text-align: left; font: inherit; font-size: .92rem;
  padding: .6rem .7rem; min-height: var(--tap); border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text-primary); cursor: pointer;
}
.combo-option:last-child { border-bottom: 0; }
.combo-option:hover, .combo-option:focus-visible { background: var(--surface-2); }

/* --- ช่องแนบรูป: เลือกถ่ายรูป หรือเลือกจากคลังภาพ ------------------------- */

.uploader-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.uploader-btn {
  flex: 1 1 140px; cursor: pointer;
  white-space: nowrap; font-size: .9rem; padding-inline: .6rem;
}
/* ซ่อน input แต่ยังเข้าถึงได้ด้วยคีย์บอร์ดและ screen reader */
.uploader-input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.uploader-input:focus-visible + .uploader-btn { outline: 2px solid var(--brand); outline-offset: 2px; }
.uploader-status { margin: .35rem 0 0; }
/* ว่างแล้วไม่ต้องกินที่ — บรรทัดนี้มีไว้พูดเมื่อมีอะไรจะบอก */
.uploader-status:empty { display: none; margin: 0; }
.uploader-status.is-ready { color: var(--brand); font-weight: 600; }
.uploader-preview:empty { display: none; }
.uploader-preview { margin-top: .5rem; }
.uploader-clear {
  background: none; border: 0; padding: 0; margin-left: .5rem;
  color: var(--status-bad); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline;
}

/* --- ความคิดเห็น ---------------------------------------------------------- */

.comments { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.comment { display: flex; gap: .6rem; align-items: flex-start; }
.comment-body { flex: 1; min-width: 0; background: var(--surface-2); border-radius: var(--radius); padding: .6rem .8rem; }
.comment-meta { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; margin: 0 0 .15rem; flex-wrap: wrap; }
.comment-meta .muted { font-size: .78rem; }
.comment-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form { display: flex; flex-direction: column; gap: .5rem; }

/* --- อื่น ๆ --------------------------------------------------------------- */

.flash {
  margin: .7rem calc(.9rem + var(--safe-right)) 0 calc(.9rem + var(--safe-left));
  padding: .75rem .95rem; border-radius: 14px;
  border: 1px solid; font-size: .9rem;
}
.flash-ok { background: color-mix(in srgb, var(--status-good) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-good) 35%, transparent); color: var(--text-primary); }
.flash-error { background: color-mix(in srgb, var(--status-bad) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-bad) 35%, transparent); color: var(--text-primary); }
.flash-note { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-secondary); }
.flash-demo { background: color-mix(in srgb, var(--status-warn) 13%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-warn) 38%, transparent); color: var(--text-primary); }

/* --- ปุ่มสลับธีมสว่าง/มืด --------------------------------------------------- */

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-secondary);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--border-strong); }
/* ไอคอนบอก "กดแล้วจะไปโหมดไหน" ไม่ใช่โหมดที่อยู่ตอนนี้ */
.theme-toggle .to-light { display: none; }
:root[data-theme="dark"] .theme-toggle .to-light { display: block; }
:root[data-theme="dark"] .theme-toggle .to-dark { display: none; }

/* หน้า login/สมัครใช้งานไม่มีแถบหัวเรื่อง จึงลอยไว้มุมขวาบน */
body.bare .theme-toggle { position: fixed; top: calc(.9rem + var(--safe-top)); right: .9rem; z-index: 5; border-radius: 999px; }

/* แบบแถวเมนู — ใช้ในแผงตั้งค่า ให้หน้าตาเหมือนลิงก์แถวอื่นในแผงเดียวกัน */
.theme-toggle-row {
  width: 100%; justify-content: flex-start; gap: .5rem;
  padding: .6rem .5rem; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-primary); font: inherit; font-size: .9rem;
  min-height: var(--tap);
}
.theme-toggle-row:hover { background: var(--surface-2); }

/* แถบเตือนที่มีปุ่มให้กดต่อ เช่น "มีคำขอเข้าใช้งานรออนุมัติ" บนหน้าแรก */
.notice {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .75rem .9rem; margin-bottom: .9rem; font-size: .9rem;
  border: 1px solid color-mix(in srgb, var(--status-warn) 38%, transparent);
  background: color-mix(in srgb, var(--status-warn) 13%, var(--surface-1));
  border-radius: var(--radius-sm);
}
.notice-action .btn { flex: none; }

.empty { padding: 1.4rem 1rem; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty p { margin: 0 0 .6rem; }

.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; margin: 0; }
.detail-list dt { color: var(--text-muted); font-size: .78rem; }
.detail-list dd { margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
/* คำอธิบายสิทธิ์ในตารางตำแหน่ง — ตัวปกติ ไม่หนาเหมือนค่าอื่นใน detail-list */
.role-hint { font-weight: 400; color: var(--text-secondary); font-size: .85rem; }

/* หมายเหตุใต้ค่าหลัก เช่น "กำลังดำเนินการ" ใต้จำนวนวันของโครงการ */
.detail-note { display: block; color: var(--text-muted); font-size: .78rem; font-weight: 400; }

.tag-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.timeline-item { border-left: 2px solid var(--border); padding-left: .9rem; position: relative; }
.timeline-item::before {
  content: ''; position: absolute; left: -6px; top: .45rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface-1);
}

/* รายการแบบแตะได้ทั้งแถว (ใช้แทนตารางบนมือถือ) */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.list-item {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--border); border-radius: 14px;
  padding: .75rem .85rem; background: var(--surface-1); min-height: var(--tap);
  color: var(--text-primary);
}
.list-item:hover { background: var(--surface-2); text-decoration: none; }
.list-item-main { flex: 1; min-width: 0; }
.list-item-title { font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; }
.list-item-sub { color: var(--text-muted); font-size: .82rem; }
.list-item-end { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.chevron { color: var(--text-muted); flex-shrink: 0; }

/* จอแคบ: แทนที่จะบีบชื่อจนตัดคำกลางคัน ให้ยกตัวเลข/ป้ายลงมาอยู่บรรทัดล่าง */
@media (max-width: 560px) {
  .list-item { flex-wrap: wrap; position: relative; padding-right: 1.7rem; gap: 0; }
  .list-item-main { flex: 1 1 100%; }
  .list-item-end {
    flex: 1 1 100%; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: flex-start; text-align: left; gap: .4rem;
    margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--border);
  }
  .list-item-end:empty { display: none; }
  .list-item .chevron { position: absolute; right: .6rem; top: .75rem; }
}

/* ตารางกรอกรายการเข้าตู้ */
/* แก้ไขหนึ่งบรรทัดในตาราง — ซ่อนฟอร์มไว้ใน <details> ไม่ให้ตารางรก */
.row-edit > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .4rem .9rem; cursor: pointer; list-style: none; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--brand-strong);
  font-size: .85rem; font-weight: 600;
}
.row-edit > summary::-webkit-details-marker { display: none; }
.row-edit > summary::marker { content: ''; }
.row-edit > summary::after { content: '▾'; font-size: .7rem; }
.row-edit[open] > summary::after { content: '▴'; }
.row-edit[open] { padding-bottom: .6rem; }
.row-edit .form { text-align: left; margin-top: .8rem; }
.row-edit .form + form { margin-top: .8rem; }

.entry-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.entry-form .field-wide { grid-column: 1 / -1; }
.totals-row {
  display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  background: var(--brand-soft); color: var(--brand-strong);
  border-radius: var(--radius-sm); padding: .7rem .9rem; font-weight: 700;
}
.totals-row span { font-variant-numeric: tabular-nums; }

/* --- หน้า login ----------------------------------------------------------- */

body.bare {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh;
  padding: calc(1.2rem + var(--safe-top)) 1.2rem calc(1.2rem + var(--safe-bottom));
  /* แสงเขียวจาง ๆ มุมบน ให้หน้าเปิดแอปไม่ใช่แค่กล่องขาวกลางจอเทา */
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 70%),
    var(--surface-0);
}
.login {
  width: 100%; max-width: 400px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 1.6rem 1.4rem;
}
.login-brand { text-align: center; margin-bottom: 1.2rem; }
/* โลโก้เต็ม (ตรา + ชื่อ) — กว้างพอให้อ่านคำว่า TISSUE CULTURE LABORATORY ออก */
.login-brand .brand-logo { display: block; width: min(260px, 80%); height: auto; margin: 0 auto .4rem; }
/* ตัวอักษรรองของโลโก้เป็นสีอ่อน จึงวางบนพื้นสว่างของการ์ดเสมอ ไม่ว่าธีมไหน */
[data-theme='dark'] .login-brand .brand-logo { background: #fff; border-radius: var(--radius-sm); padding: .6rem .9rem; }
.login-brand h1 { font-size: 1.35rem; margin-top: .35rem; }
.login .btn { width: 100%; }
.login-divider { display: flex; align-items: center; gap: .75rem; color: var(--text-muted); font-size: .8rem; margin: 1rem 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-hint { margin-top: 1rem; padding: .6rem .75rem; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .8rem; color: var(--text-muted); }
.login-hint a { color: var(--brand); font-weight: 600; }
.login-forgot { margin: .6rem 0 0; text-align: center; font-size: .82rem; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600;
}
.btn-google:hover { background: #f7f8f8; border-color: #c6c9cd; }
/* ปุ่มของ Google ต้องเป็นพื้นขาวตัวหนังสือเข้มตามแนวทางแบรนด์ของเขา
   ทั้งสองธีม จึงตั้งสีตายตัวไว้ ไม่ใช้ token ของระบบ */
.btn-google[disabled] { opacity: .5; }
.google-mark { flex: 0 0 auto; display: block; }
.google-account { display: flex; align-items: center; gap: .4rem; }
.login-forgot a { color: var(--text-muted); }
.login-forgot a:hover { color: var(--brand); }
.login-note {
  margin-bottom: 1rem; padding: .7rem .8rem; font-size: .82rem; line-height: 1.55;
  background: var(--surface-2); border-left: 3px solid var(--brand); border-radius: var(--radius-sm);
}
.login .form + .login-hint { text-align: center; }

/* =========================================================================
   จอกลาง (แท็บเล็ต) ตั้งแต่ 700px
   ========================================================================= */

@media (min-width: 700px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .form-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .entry-form { grid-template-columns: repeat(4, 1fr); }
  .filters .btn { grid-column: auto; }
  .detail-list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .topbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
  .form-actions .btn { flex: 0 0 auto; }
}

/* =========================================================================
   จอใหญ่ (เดสก์ท็อป) ตั้งแต่ 960px — เปลี่ยนเป็น sidebar
   ========================================================================= */

@media (min-width: 960px) {
  body { font-size: 15px; }
  .shell { flex-direction: row; }
  .bottomnav { display: none; }

  .sidebar {
    display: flex; flex-direction: column;
    width: 240px; flex: 0 0 240px;
    background: var(--surface-1); border-right: 1px solid var(--border);
    padding: 1rem .75rem; position: sticky; top: 0; height: 100vh;
  }
  .brand { display: flex; gap: .6rem; align-items: center; padding: .5rem .5rem 1rem; color: var(--text-primary); }
  .brand:hover { text-decoration: none; }
  .brand-mark { display: inline-flex; color: var(--brand); }
  .brand-mark img { width: 26px; height: auto; display: block; }
  .brand strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
  .brand small { color: var(--text-muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }

  /* แถบข้างยาวเกินจอเมื่อเมนูครบทุกหมวด — ให้เลื่อนเฉพาะส่วนเมนู โลโก้อยู่กับที่ */
  .nav { display: flex; flex-direction: column; gap: .9rem; overflow-y: auto; min-height: 0; margin: 0 -.25rem; padding: 0 .25rem; }
  .nav-group { display: flex; flex-direction: column; gap: 2px; }
  .nav-group-label {
    margin: 0 0 .2rem; padding: 0 .7rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--text-muted);
  }
  .nav-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .7rem; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-weight: 500; min-height: 2.4rem;
  }
  .nav-item:hover { background: var(--surface-2); text-decoration: none; color: var(--text-primary); }
  .nav-item.is-active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
  .nav-icon { width: 1.3rem; display: inline-flex; align-items: center; justify-content: center; }
  .sidebar-foot { margin-top: auto; padding: .5rem; }

  .topbar { padding: 1.1rem 1.6rem .9rem; align-items: flex-end; }
  .topbar h1 { font-size: 1.6rem; white-space: normal; }
  .tabs { padding: 0 1.6rem; top: 81px; }
  .content { padding: 1.3rem 1.6rem 3rem; gap: 1.1rem; }
  .flash { margin: .9rem 1.6rem 0; }
  .card-body { padding: 1.1rem; }
}

@media print {
  .sidebar, .bottomnav, .topbar-right, .card-actions, .comment-form, .tabs { display: none; }
  body { background: #fff; }
  .content { padding: 0; }
}

/* --- หน้าตั้งค่า Lark (/setup) -------------------------------------------- */

.setup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.setup-step {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-sm); padding: .7rem .9rem; background: var(--surface-2);
}
.setup-step.is-ok { border-left-color: var(--status-good); }
.setup-step.is-bad { border-left-color: var(--status-bad); }
.setup-step-head { display: flex; align-items: center; gap: .5rem; }
.setup-mark { font-weight: 700; }
.setup-step.is-ok .setup-mark { color: var(--status-good); }
.setup-step.is-bad .setup-mark { color: var(--status-bad); }
.setup-detail { margin: .25rem 0 0; overflow-wrap: anywhere; }
.setup-items, .setup-hints { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
.setup-items { list-style: none; padding-left: 0; }
.setup-items li { padding: .12rem 0; overflow-wrap: anywhere; }
.setup-items li.is-ok { color: var(--status-good); }
.setup-items li.is-bad { color: var(--status-bad); }
.setup-hints li { color: var(--text-secondary); padding: .12rem 0; }
.setup-env {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .8rem; overflow-x: auto; font-size: .8rem; line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; user-select: all;
}
.setup-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.setup-actions .btn { flex: 1 1 160px; }
.setup-warn {
  margin-top: 1.5rem; padding: .75rem .9rem; font-size: .85rem;
  background: color-mix(in srgb, var(--status-warn) 14%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--status-warn) 35%, transparent);
  border-radius: var(--radius-sm);
}

/* --- สูตรอาหาร --------------------------------------------------------- */
/* สรุปส่วนผสมในบรรทัดเดียว — ตัวเลขต้องอ่านง่ายในตารางที่แน่น */
.recipe {
  font-size: .86rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* ฟอร์มเพิ่มรายการย่อย (สารในสูตร) แยกตัวเองออกจากตารางด้านบน */
.entry-add {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.form-title {
  margin: 0 0 .6rem;
  font-size: 1rem;
}

/* --- แถบความคืบหน้าของล็อต ---------------------------------------------- */
/* เปิดหน้ามาต้องเห็นทันทีว่างานไปกองที่ขั้นไหน จึงวางไว้บนสุดก่อนตัวกรอง */
.stage-pipe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 1rem;
}
.stage-cell {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  text-decoration: none;
  color: inherit;
}
.stage-cell.is-active { border-color: var(--brand); background: var(--brand-soft); }
.stage-name { font-size: .82rem; color: var(--text-secondary); }
.stage-count { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stage-unit { font-size: .74rem; color: var(--text-secondary); }
@media (min-width: 700px) {
  .stage-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .cal-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- QR รับชำระเงินพร้อมเพย์ ------------------------------------------------ */

/*
 * ทำตามป้าย Thai QR Payment ของจริง: แถบกรมท่าด้านบน พื้นขาวด้านล่าง
 * การ์ดนี้เป็นสีขาวเสมอแม้อยู่ในธีมมืด เพราะ QR ต้องมีพื้นสว่างจึงสแกนติด
 */
.qr-slip {
  /* กรมท่าของตรา Thai QR Payment — เป็นสีของตราสัญลักษณ์ ไม่ใช่สีของธีมแอป
     จึงประกาศไว้ตรงนี้ให้ลูกหลานสืบทอด แทนที่จะไปปนกับตัวแปรธีมที่ :root */
  --qr-navy: #0e3e68;
  width: 100%; max-width: 20rem; margin: 0 auto;
  background: #fff; color: var(--qr-navy);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 8px 24px rgb(0 0 0 / .08);
}
.qr-slip-head {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--qr-navy); color: #fff; padding: .7rem;
}
.qr-slip-head span {
  font-size: .78rem; font-weight: 700; line-height: 1.12;
  letter-spacing: .06em; text-transform: uppercase;
}
.qr-slip-body { padding: 1rem .9rem 1.1rem; text-align: center; }
/*
 * display: block สำคัญกว่าที่เห็น — <img> เป็น inline ตามค่าตั้งต้น และกรอบ QR
 * ข้างล่างเป็น inline-block ถ้าปล่อยไว้ พอ QR แคบลงจนสองอันรวมกันพอดีความกว้าง
 * ของการ์ด โลโก้จะเด้งไปนั่งข้าง QR แทนที่จะอยู่ด้านบน แล้วการ์ดเสียทรงทั้งใบ
 */
.qr-slip-brand { display: block; width: 9.5rem; max-width: 60%; height: auto; margin: 0 auto; }

/* กรอบวาง QR — ต้องเป็น inline-block เพื่อให้ตราตรงกลางอ้างอิงขนาดของ QR จริง */
.qr-code { position: relative; display: inline-block; line-height: 0; margin-top: .8rem; }
/* ย่อให้พอดีจอมือถือแคบ ๆ ได้เพราะ qrSvg ใส่ viewBox มาให้ — ถ้าไม่มี viewBox
   การย่อจะกลายเป็นการตัดขอบภาพ จน QR สแกนไม่ได้โดยที่ยังดูเหมือน QR ปกติ */
.qr-code svg { width: 100%; max-width: 15rem; height: auto; }
/*
 * ตรากลาง QR กว้าง 17% ของภาพ = บังพื้นที่ราว 3% ซึ่งระดับกันพลาด M (15%)
 * รับไหวสบาย ๆ — ยืนยันแล้วว่าภาพที่ออกมาจริงยังถอดรหัสได้ตรงกับ payload
 * ขอบขาวรอบตราช่วยให้ตัวอ่านแยกออกว่าไม่ใช่จุดข้อมูล
 */
.qr-code-mark {
  position: absolute; inset: 0; margin: auto;
  width: 17%; height: 17%; padding: 2px;
  background: #fff; border-radius: 4px; box-sizing: content-box;
}
.qr-slip-payee {
  margin: .8rem 0 0; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--qr-navy);
}
/*
 * ยอดเงินคือสิ่งเดียวในการ์ดที่ลูกค้าต้องอ่านแล้วมั่นใจว่าตรงกับที่ตกลงกันไว้
 * จึงใช้ฟอนต์คนละตัวกับส่วนอื่นเพื่อให้สะดุดตาตั้งแต่แรกเห็น
 *
 * Kanit (SIL Open Font License 1.1 — ดูไฟล์ kanit-money.LICENSE.txt) ตัดเหลือ
 * เฉพาะตัวเลข ลูกน้ำ จุด ขีด และ ฿ จึงเหลือแค่ 1.3KB โหลดทันแม้เน็ตมือถือช้า
 * และที่สำคัญคือมี ฿ อยู่ในฟอนต์เดียวกัน ไม่ต้องยืมจากฟอนต์อื่นจนตัวหนังสือเพี้ยน
 *
 * ?v=1 เพื่อให้เบราว์เซอร์แคชได้ยาว — ถ้าเปลี่ยนไฟล์ฟอนต์ต้องขยับเลขนี้ด้วย
 */
@font-face {
  font-family: "Kanit Money";
  src: url("/static/kanit-money.woff2?v=1") format("woff2");
  font-weight: 600;
  font-style: normal;
  /* swap: โชว์ยอดด้วยฟอนต์สำรองไปก่อนแล้วค่อยสลับ ดีกว่าปล่อยให้ตรงนั้นว่าง
     เพราะตัวเลขที่ยังไม่ขึ้นน่ากังวลกว่าตัวเลขที่เปลี่ยนหน้าตาทีหลัง */
  font-display: swap;
  unicode-range: U+0E3F, U+0030-0039, U+002C-002E;
}
/*
 * ยอดเงินต้องอยู่กลางการ์ด ปุ่มเซฟจึงถูกถอดออกจากการไหลของข้อความ (absolute)
 * แล้วลอยไว้ริมขวา — ถ้าวางเรียงกันตามปกติ ยอดจะถูกดันเยื้องจากกลางไปเท่ากับ
 * ความกว้างของปุ่ม ซึ่งเห็นชัดทันทีบนการ์ดที่แคบแบบนี้
 */
.qr-slip-amountrow { position: relative; display: flex; justify-content: center; }
.qr-slip-save {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  /* น้ำหนักเบากว่ายอดเงิน เพื่อไม่ไปแย่งสายตาจากตัวเลขที่ลูกค้าต้องอ่านก่อน */
  font: inherit; font-size: .88rem; font-weight: 500;
  color: var(--qr-navy); text-decoration: underline; text-underline-offset: 3px;
  /* ตัวหนังสือเล็กแต่พื้นที่แตะต้องใหญ่พอสำหรับนิ้วโป้ง */
  padding: .7rem .5rem;
}
.qr-slip-save:disabled { opacity: .6; cursor: default; }
.qr-slip-save:focus-visible { outline: 2px solid var(--qr-navy); outline-offset: 2px; border-radius: 4px; }

.qr-slip-amount {
  margin: .15rem 0 0; font-size: 1.9rem;
  font-family: "Kanit Money", var(--font-base);
  font-weight: 600; letter-spacing: -.01em;
  line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--qr-navy);
}
.qr-slip-note { margin-top: .7rem; text-align: center; }

/* --- ช่องค่าที่คัดลอก/แชร์ได้ ------------------------------------------------ */

.copyfield { display: flex; flex-direction: column; gap: .6rem; }
.copyfield-actions { display: flex; gap: .5rem; }
/* ปุ่มคัดลอกกินพื้นที่ที่เหลือ ปุ่มแชร์พอดีตัว — และเมื่อไม่มีปุ่มแชร์
   (เครื่องที่ไม่รองรับ) ปุ่มคัดลอกก็ยืดเต็มแถวเองโดยไม่ต้องมีกฎแยก */
.copyfield-actions .btn { flex: 1; }
.copyfield-actions .btn[data-share] { flex: 0 0 auto; }
.copyfield-hint { margin: 0; }

.qr-slip-account { margin: .3rem 0 0; font-size: .82rem; color: var(--qr-navy); }

/* --- แผงเปิด/ปิดแจ้งเตือนเข้าเครื่อง -------------------------------------
 *
 * สีของกรอบบอกสถานะทันทีโดยไม่ต้องอ่าน: เขียว = เปิดอยู่, กลาง ๆ = ยังไม่เปิด,
 * เหลือง = เปิดไม่ได้บนเครื่องนี้ (ต้องไปทำอย่างอื่นก่อน)
 */
.pushbox {
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.pushbox[data-push-state='on'] {
  border-color: color-mix(in srgb, var(--status-good) 42%, transparent);
  background: color-mix(in srgb, var(--status-good) 11%, var(--surface-1));
}
.pushbox[data-push-state='blocked'] {
  border-color: color-mix(in srgb, var(--status-warn) 38%, transparent);
  background: color-mix(in srgb, var(--status-warn) 11%, var(--surface-1));
}
.pushbox-note { margin: 0 0 .7rem; font-size: .88rem; }
.pushbox .form-actions { margin: 0; }

.pushlist { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.pushlist li {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .88rem;
}
.pushlist strong { display: block; font-weight: 600; }
.pushlist small { font-size: .78rem; }

/* --- หน้าชำระเงินของลูกค้า (/p/:token) -----------------------------------
 *
 * ทุกกฎในบล็อกนี้จำกัดอยู่ใน .pay-public เท่านั้น เพราะชิ้นส่วนเดียวกัน
 * (การ์ด QR, ช่องแนบรูป) ถูกใช้ในหน้าของพนักงานด้วย ซึ่งอยู่บนจอใหญ่และ
 * ไม่มีข้อจำกัดเรื่อง "ต้องเห็นครบในจอเดียว"
 *
 * เป้าหมาย: ลูกค้าเห็นทั้ง QR และปุ่มแนบสลิปพร้อมกันบนมือถือโดยไม่ต้องเลื่อน
 * คนที่โอนเสร็จแล้วจะมองหาปุ่มส่งสลิปทันที ถ้าไม่เห็นก็ปิดหน้าไปเลย
 * แล้วเราไม่ได้สลิป ต้องไปตามทวงกันทีหลัง
 */
.pay-public { max-width: 32rem; padding: .2rem .8rem .6rem; }
.pay-head { text-align: center; margin-bottom: .35rem; }
.pay-head h1 { font-size: 1rem; margin: 0; line-height: 1.3; }
.pay-head p { margin: 0; }

/* ย่อการ์ดลงพอให้ QR ยังใหญ่กว่า 2 ซม. บนจอมือถือทุกรุ่น (สแกนติดสบาย) */
/*
 * ย่อลงเป็นสัดส่วนเดียวกันทั้งใบ (ราว 80% ของขนาดเต็ม) ไม่ใช่บีบเฉพาะระยะห่าง
 * — การตัดช่องไฟทิ้งทีละจุดทำให้ได้หน้าที่ "พอดีจอ" แต่ดูอึดอัดและเสียความ
 * น่าเชื่อถือ ซึ่งเป็นสิ่งเดียวที่การ์ดนี้มีหน้าที่สร้าง
 */
.pay-public .qr-slip-head { padding: .55rem; }
.pay-public .qr-slip-body { padding: .85rem .9rem .95rem; }
.pay-public .qr-slip-brand { width: 8rem; }
.pay-public .qr-code { margin-top: .75rem; }
.pay-public .qr-code svg { max-width: 12rem; }
.pay-public .qr-slip-amount { margin-top: .5rem; font-size: 1.75rem; }
.pay-public .qr-slip-account { margin-top: .35rem; }

/*
 * ช่องแนบสลิปชิดขึ้นมาและปุ่มเตี้ยลง
 *
 * flex-basis: 0 บังคับให้สองปุ่มแบ่งแถวเท่ากันเสมอ — ค่าเดิม (140px) ทำให้
 * ปุ่มตกบรรทัดบนจอแคบ แล้วปุ่มที่สองหลุดพ้นขอบจอไปพอดี ซึ่งเป็นปุ่มที่คน
 * ใช้บ่อยที่สุด (เลือกสลิปจากคลังภาพ เพราะถ่ายหน้าจอไว้ตอนโอนอยู่แล้ว)
 */
.pay-public form { margin-top: .45rem; }
.pay-public .uploader { gap: .25rem; }
.pay-public .uploader-actions { flex-wrap: nowrap; }
.pay-public .uploader-btn { flex: 1 1 0; min-width: 0; padding: .45rem .4rem; }
/* ตอนมีไฟล์แนบแล้วบรรทัดนี้จะโผล่มาบอกเอง (app.js เขียนข้อความลงไป)
   ห้ามซ่อนด้วย display:none ตายตัว ไม่งั้นลูกค้ากดส่งโดยไม่รู้ว่าติดรูปมาหรือเปล่า */
.pay-public .uploader-status { font-size: .78rem; margin-top: .25rem; }
.pay-public .form-actions { margin-top: .4rem; }
.pay-public .form-actions .btn { padding-block: .55rem; }

/* --- ใบเสร็จเมื่อชำระสำเร็จ ---
 *
 * หน้านี้คือสิ่งที่ลูกค้าแคปเก็บไว้ จึงจัดให้ครบในภาพเดียว: เครื่องหมายถูก
 * ยอด เวลาที่ยืนยัน และรูปสลิปที่เขาส่งมา
 */
.payreceipt {
  display: flex; flex-direction: column; align-items: center;
  margin: 0 auto; padding: 1.1rem 1rem 1.2rem; max-width: 20rem;
  border: 1px solid color-mix(in srgb, var(--status-good) 40%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--status-good) 8%, var(--surface-1));
  text-align: center;
}
/* วงกลมเครื่องหมายถูก — อ่านออกทันทีก่อนจะได้อ่านตัวหนังสือ */
.payreceipt-check {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--status-good); color: #fff;
  font-size: 1.4rem; line-height: 1;
}
.payreceipt-label {
  margin: .55rem 0 0; font-size: 1rem; font-weight: 700; color: var(--status-good);
}
/* ยอดใช้ฟอนต์เดียวกับในการ์ด QR ให้รู้ว่าเป็นยอดเดียวกัน */
.payreceipt-amount {
  margin: .15rem 0 0;
  font-family: "Kanit Money", var(--font-base);
  font-size: 2rem; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.payreceipt-note { margin: .3rem 0 0; font-size: .82rem; color: var(--text-secondary); }
.payreceipt-at { margin: .1rem 0 0; font-size: .78rem; color: var(--text-muted); }

.payreceipt-slips {
  width: 100%; margin-top: .9rem; padding-top: .8rem;
  border-top: 1px dashed color-mix(in srgb, var(--status-good) 35%, transparent);
}
.payreceipt-slipslabel { margin: 0 0 .5rem; font-size: .8rem; color: var(--text-secondary); }
/* สลิปใบเดียวให้เต็มความกว้าง อ่านยอดในสลิปออกโดยไม่ต้องกดเปิด */
.payreceipt-slips .photo-grid { grid-template-columns: 1fr; gap: .5rem; justify-items: center; }
/*
 * สลิปต้องเห็นทั้งใบ — กฎกลางของ .photo img ครอบเป็น 4:3 แล้วตัดขอบทิ้ง
 * (object-fit: cover) ซึ่งเหมาะกับรูปต้นไม้ แต่กับสลิปคือตัดยอดเงินหรือ
 * เลขอ้างอิงหายไป จึงต้องทับด้วย contain และปล่อยความสูงตามจริง
 */
.payreceipt-slips .photo img {
  /*
   * ให้ภาพกำหนดขนาดตัวเองตามสัดส่วนจริง
   *
   * ตั้ง width: 100% + max-height จะได้กล่องที่สัดส่วนไม่ตรงกับภาพ แล้วเกิด
   * แถบขาวข้างซ้ายขวา (สลิปเป็นแนวตั้งจัด 9:16) ดูเหมือนภาพโหลดไม่เต็ม
   */
  width: auto; height: auto; aspect-ratio: auto;
  max-width: 100%; max-height: 24rem;
  margin: 0 auto; display: block;
  object-fit: contain; background: #fff;
}

/*
 * จอเตี้ย (iPhone SE, มือถือ Android รุ่นเล็ก) — ย่อ QR ลงอีกขั้น
 *
 * 9.5rem = 152px ราว 4 ซม. บนมือถือ ยังใหญ่กว่าสติกเกอร์ QR ที่ร้านค้าติด
 * ข้างเครื่องคิดเงินซึ่งสแกนกันได้ทุกวัน จะเล็กกว่านี้ไม่ย่อแล้ว เพราะ
 * "สแกนไม่ติด" แย่กว่า "ต้องเลื่อนจออีกนิด"
 */
@media (max-height: 620px) {
  .pay-public .qr-slip-body { padding: .6rem .9rem .7rem; }
  .pay-public .qr-slip-brand { width: 6.5rem; }
  .pay-public .qr-code { margin-top: .55rem; }
  .pay-public .qr-code svg { max-width: 9.5rem; }
  .pay-public .qr-slip-head { padding: .4rem; }
  .pay-public .qr-slip-amount { font-size: 1.5rem; }
  .pay-head h1 { font-size: .95rem; }
}

/* --- แถบสถานะการชำระเงินที่ลูกค้าเห็น ---
 * สีบอกสถานะได้เร็วกว่าอ่าน แต่ห้ามใช้สีอย่างเดียว — จุดกลมกับข้อความ
 * ทำให้คนตาบอดสีและ screen reader ได้ข้อมูลเท่ากัน
 */
.paystatus {
  display: flex; flex-direction: column; gap: .05rem;
  margin: 0 auto .45rem; padding: .4rem .7rem; max-width: 20rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: .75rem; line-height: 1.35; text-align: center;
}
.paystatus strong { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .92rem; }
.paystatus span { color: var(--text-secondary); }
.paystatus-dot { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; flex: none; }

.paystatus-ok { border-color: color-mix(in srgb, var(--status-good) 45%, transparent); background: color-mix(in srgb, var(--status-good) 12%, var(--surface-1)); }
.paystatus-ok strong { color: var(--status-good); }
.paystatus-wait { border-color: color-mix(in srgb, var(--status-warn) 40%, transparent); background: color-mix(in srgb, var(--status-warn) 11%, var(--surface-1)); }
.paystatus-wait strong { color: var(--status-warn); }
.paystatus-bad { border-color: color-mix(in srgb, var(--status-bad) 42%, transparent); background: color-mix(in srgb, var(--status-bad) 11%, var(--surface-1)); }
.paystatus-bad strong { color: var(--status-bad); }
.paystatus-off strong { color: var(--text-muted); }

/* --- หน้าลงเวลาเข้า-ออกงาน (/clock) ------------------------------------------
 *
 * จัดตามแอปลงเวลาที่พนักงานคุ้น: นาฬิกาใหญ่ → ตำแหน่ง → ปุ่มใหญ่ปุ่มเดียว → สรุป
 */
.tabs-inline { position: static; margin: 0 0 .9rem; padding: 0; border: 0; background: none; gap: .4rem; }
.tabs-inline .tab {
  flex: 1 1 0; text-align: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1);
}
.tabs-inline .tab.is-active { background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); }

.bigclock-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem 1rem 1rem; text-align: center;
}
.bigclock {
  margin: 0; font-size: 3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* การ์ดตำแหน่ง — สีขอบเปลี่ยนตามผล: กำลังหา (เหลือง) / ในรัศมี (เขียว) / นอกรัศมี (แดง) */
.site-card {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--surface-1); border: 1px solid var(--status-warn); border-radius: var(--radius);
  padding: .8rem .9rem;
}
.site-card[data-place="in"] { border-color: var(--brand); }
.site-card[data-place="out"] { border-color: var(--status-bad); }
.site-card[data-place="unknown"] { border-color: var(--border); }
.site-card-none { border-color: var(--border); }
.site-icon { font-size: 1.2rem; line-height: 1.3; }
.site-body { flex: 1 1 auto; min-width: 0; }
.site-body p { margin: .15rem 0 0; }
.site-distance { color: var(--text-secondary); }
.site-status { margin-top: .3rem !important; }
.site-status[data-place="in"] { color: var(--brand-strong); }
.site-status[data-place="out"] { color: var(--status-bad); }
.site-refresh { font-size: 1.3rem; }

/* ปุ่มใหญ่ปุ่มเดียว สูงพอที่จะกดพลาดไม่ได้ */
.clock-big {
  width: 100%; border: 0; border-radius: var(--radius); cursor: pointer;
  padding: 1.4rem 1rem; margin-top: .9rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  color: #fff; font: inherit;
}
.clock-big-in { background: var(--brand); }
.clock-big-in:hover { background: var(--brand-strong); }
.clock-big-out { background: #b3412f; }
.clock-big-out:hover { background: #9a3627; }
.clock-big-icon { font-size: 1.6rem; line-height: 1; }
.clock-big-label { font-size: 1.5rem; font-weight: 700; }
.clock-big-hint { font-size: .8rem; opacity: .85; }
.clock-big:disabled { opacity: .6; cursor: progress; }

.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .9rem; }
.stats-3 .stat-value { font-size: 1.25rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }

/* --- หน้าปรับสิทธิ์การใช้งานแต่ละฟีเจอร์ (/users/permissions) --- */
.perm-roles { margin-bottom: 1rem; }
.perm-feature { border: 0; box-shadow: inset 0 1px 0 var(--border); margin: 0; padding: .9rem 0 .2rem; }
.perm-feature legend { float: left; width: 100%; }
.perm-feature legend + * { clear: both; }
.perm-feature:first-of-type { box-shadow: none; padding-top: 0; }
.perm-feature legend { font-weight: 700; padding: 0; margin-bottom: .35rem; }
.perm-feature > .muted { margin: -.15rem 0 .5rem; }
.check.is-changed { border-style: dashed; }
.perm-flag { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.perm-actions { padding-top: .6rem; }
.perm-users, .perm-notes { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }

/* --- หลังร้าน tripleblab.shop (ภาพรวม สินค้า ออเดอร์ ลูกค้า คูปอง) ------------ */

.flash.flash-inline { margin: 0 0 .9rem; }
.shop-attention ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.shop-attention li { margin: .15rem 0; }
.shop-status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.shop-status-list li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.shop-status-list a:hover { text-decoration: none; filter: brightness(.95); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.bulk-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .6rem .7rem; margin-bottom: .8rem;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.bulk-bar .input { width: auto; min-width: 9rem; flex: 0 1 auto; }
.bulk-bar .bulk-count { color: var(--text-muted); font-size: .85rem; margin-right: auto; }
.row-check { width: 20px; height: 20px; accent-color: var(--brand); }
.stock-out { color: var(--status-bad); font-weight: 600; }
.stock-low { color: var(--status-warn); font-weight: 600; }
.order-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.order-history li { border-left: 3px solid var(--brand); padding: .1rem 0 .1rem .7rem; }
.order-history .meta { display: block; color: var(--text-muted); font-size: .78rem; margin-top: .15rem; }
.order-totals td:last-child { text-align: right; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cell-sub { display: block; margin-top: .1rem; }