/* kaichon — token ทั้งชุดของระบบ (AD-17)
 *
 * 🚨 นี่คือแหล่งเดียวของสี ระยะ ขนาดตัวอักษร และรัศมี
 *    ห้ามใส่ค่าสีหรือขนาดดิบในไฟล์อื่น ห้ามติดตั้ง CSS framework ใด ๆ รวมถึง Tailwind
 *    ค่าทุกค่าคัดมาจาก frontmatter ของ DESIGN.md ตรงตัว
 *
 * โหมดมืดผ่าน prefers-color-scheme เท่านั้น ไม่มีสวิตช์ในแอป
 * ห้ามสร้าง token ชื่อ *-dark ให้ component เรียก — component เรียกตัวเดียว
 * แล้วได้ค่าถูกตามโหมดเอง
 */

:root {
  /* ── สี 24 ค่า (โหมดสว่าง) ─────────────────────────────────────── */
  /* โทน "ฟ้าหม่น" — เจ้าของเลือกเมื่อ 2026-08-03 จากแปดโทนที่เสนอไป
     พื้นเป็นเทาอมฟ้าจาง ๆ ไม่ใช่ครีมอุ่นแบบเดิม · ให้ความรู้สึกสะอาดแบบเครื่องมือทำงาน
     สีเงินเปลี่ยนจากเขียวป่าเป็นเขียวอมฟ้าเพื่อไม่ให้ตีกับพื้นเย็น
     ส้มงานค้างกับแดงทำลายยังอุ่นเหมือนเดิมโดยตั้งใจ — สองสีนี้ต้องแปลกออกมาจากพื้น
     ค่าทุกค่าผ่านเกณฑ์คอนทราสต์ครบ ตรวจด้วยเทสต์ใน tests/unit.php */
  --color-surface-base: #EDF1F4;
  --color-surface-raised: #FAFCFD;
  --color-surface-sunken: #E0E6EB;
  --color-ink-primary: #1C2227;
  --color-ink-secondary: #545F68;
  --color-ink-disabled: #9BA3AA;
  --color-accent: #12685B;
  --color-accent-ink: #FFFFFF;
  --color-attention: #8A4E00;
  --color-attention-surface: #F9EFDD;
  --color-danger: #A32020;
  --color-danger-surface: #F9E9E8;
  --color-border-hairline: #DBE2E8;
  --color-border-strong: #737C84;

  /* ── ตัวอักษร 6 token ──────────────────────────────────────────── */
  --font-family: 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;

  --text-amount-hero-size: 40px;
  --text-amount-hero-line: 1.2;
  --text-amount-hero-weight: 700;

  --text-amount-size: 22px;
  --text-amount-line: 1.3;
  --text-amount-weight: 600;

  --text-title-size: 22px;
  --text-title-line: 1.5;
  --text-title-weight: 600;

  --text-body-lg-size: 18px;
  --text-body-lg-line: 1.6;
  --text-body-lg-weight: 500;

  --text-body-size: 16px;
  --text-body-line: 1.6;
  --text-body-weight: 400;

  --text-meta-size: 14px;
  --text-meta-line: 1.55;
  --text-meta-weight: 400;

  /* ── ระยะ 7 ขั้น ───────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── รัศมี 3 ขั้น + ทรงเม็ดยา ─────────────────────────────────── */
  /* มนขึ้นทั้งชุด (2026-08-03) — มุมคมทำให้จอที่มีแต่สี่เหลี่ยมดูแข็ง
     ขั้นยังเป็นสามขั้นเท่าเดิม ไม่ได้เพิ่มทางเลือกให้ต้องคิดตอนเขียน component */
  --rounded-sm: 12px;
  --rounded-md: 18px;
  --rounded-lg: 26px;
  /* ทรงเม็ดยา ใช้กับชิปที่เป็นตัวเลือกเท่านั้น ห้ามใช้กับปุ่มลงมือทำ
     เพราะปุ่มเม็ดยาเต็มความกว้างอ่านเป็น "แถบ" ไม่ใช่ "ปุ่ม" */
  --rounded-pill: 999px;

  /* ── เงา 2 ขั้น ────────────────────────────────────────────────── */
  /*
   * 🚨 เงาในระบบนี้เป็น "ความนุ่ม" อย่างเดียว ไม่ใช่สัญญาณ
   *    ทุกอย่างที่กดได้และทุกอย่างที่ลอยเหนือเนื้อหายังต้องมีขอบของตัวเองเสมอ
   *    เพราะจอมือถือราคาถูกในร้านที่แสงน้อยมองเงาแทบไม่เห็น (DESIGN.md §เงา)
   *    ลบเงาทั้งสองค่าออกแล้วระบบต้องยังใช้งานได้ครบทุกหน้าจอ
   */
  /* เงาต้องเป็นสีของหมึกหลัก ไม่ใช่ดำล้วน — ดำล้วนบนพื้นอมฟ้าจะออกเทาสกปรก */
  --shadow-soft: 0 1px 2px rgba(28, 34, 39, 0.05), 0 6px 16px -6px rgba(28, 34, 39, 0.12);
  --shadow-floating: 0 -6px 24px -12px rgba(28, 34, 39, 0.20);

  /* ── ขนาด component 6 ค่า ──────────────────────────────────────── */
  --tap-target-min: 48px;
  --product-button-min-height: 88px;
  --case-chip-size: 48px;
  --primary-action-height: 64px;
  --keypad-key-height: 60px;
  --content-max-width: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* กลางคืนของโทนฟ้าหม่น — เทาอมฟ้าเข้ม ไม่ใช่ดำเทาล้วน
       ส้มกับแดงยังอุ่นเหมือนโหมดสว่าง ด้วยเหตุผลเดียวกัน */
    --color-surface-base: #161A1E;
    --color-surface-raised: #202730;
    --color-surface-sunken: #101318;
    --color-ink-primary: #E9EEF2;
    --color-ink-secondary: #9AA5AE;
    --color-ink-disabled: #626C74;
    --color-accent: #2FA189;
    --color-accent-ink: #05201B;
    --color-attention: #E5A64C;
    --color-attention-surface: #33280F;
    --color-danger: #E8776E;
    --color-danger-surface: #361B19;
    --color-border-hairline: #2D343C;
    --color-border-strong: #78838D;
  }

  /* โหมดมืดต้องใช้เงาที่เข้มกว่า เพราะเงาอ่อนบนพื้นเข้มหายไปเฉย ๆ */
  :root {
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 16px -6px rgba(0, 0, 0, 0.45);
    --shadow-floating: 0 -6px 24px -12px rgba(0, 0, 0, 0.55);
  }
}

/* ── ฟอนต์: โฮสต์เอง ไม่เรียก CDN (AD-17) ───────────────────────── */
@font-face {
  font-family: 'Sarabun';
  src: url('/assets/fonts/sarabun-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/assets/fonts/sarabun-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/assets/fonts/sarabun-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/assets/fonts/sarabun-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── reset และค่าตั้งต้นที่ทำให้กฎการเข้าถึงเป็นจริงโดยอัตโนมัติ ── */

*, *::before, *::after { box-sizing: border-box; }

/* 🚨 เงาใส่ได้เฉพาะผ่าน --shadow-soft กับ --shadow-floating เท่านั้น
      ห้ามเขียนค่า box-shadow ดิบที่ไหนทั้งสิ้น และห้ามใช้เงาแทนขอบ
      ลำดับชั้นยังมาจากน้ำหนักสีพื้น ขอบ และขนาดตัวอักษรเหมือนเดิม */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  /* ภาษาไทยมีสระบนและสระล่างซ้อนกันได้สองชั้น ต่ำกว่า 1.5 สระจะชนกันและอ่านผิด */
  line-height: var(--text-body-line);
  color: var(--color-ink-primary);
  background: var(--color-surface-base);
}

h1, h2, h3 { margin: 0; font-weight: var(--text-title-weight); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-ink-primary); }

/* วงแหวนตอนโฟกัส — เดิมปล่อยเป็นค่าเริ่มต้นของเบราว์เซอร์ซึ่งเป็นเส้นคมสีฟ้า
   ที่ไม่เข้ากับอะไรในระบบนี้เลย · ใช้สีหมึกหลักเพื่อไม่ให้ชนกฎ "เขียว = เงินเข้า" */
:focus-visible {
  outline: 2px solid var(--color-ink-primary);
  outline-offset: 2px;
}

/* จังหวะตอบตอนกด — สั้นมากโดยตั้งใจ
   ยาวกว่านี้จะรู้สึกว่าจอหน่วง ซึ่งอันตรายกว่าความสวยตอนขายจริง
   ไม่มีอะไรเคลื่อนที่ ไม่มีอะไรเด้ง มีแค่พื้นกับเงาที่เปลี่ยนน้ำหนัก */
.btn, .chip, .product-btn, .money-chip, .input, .qty-controls button {
  transition: background-color 120ms ease, border-color 120ms ease,
              box-shadow 120ms ease, transform 120ms ease;
}
.btn:active, .chip:active, .product-btn:active,
.money-chip:active, .qty-controls button:active {
  transform: scale(0.985);
}

/* กดรัว ๆ บนปุ่มต้องได้จำนวนเพิ่ม ไม่ใช่จอขยาย
   (เจ้าของร้านเจอกับตัวหลังติดตั้งลงหน้าจอโฮม 2026-08-05)

   เบราว์เซอร์มือถือถือว่าการแตะสองครั้งเร็ว ๆ คือคำสั่งซูม การเพิ่มจำนวนสินค้า
   ด้วยการกดปุ่มเดิมซ้ำจึงกลายเป็นการขยายจอ ซึ่งฆ่าเส้นทางที่เร็วที่สุดของหน้าขาย

   `touch-action: manipulation` ปิดเฉพาะท่าแตะสองครั้งบนตัวควบคุมเหล่านี้เท่านั้น
   🚨 การซูมด้วยการถ่างสองนิ้วยังทำได้ทั้งหน้าตามปกติ และการขยาย 200% ยังผ่าน
      ห้ามแก้ปัญหานี้ด้วย user-scalable=no หรือ maximum-scale ใน viewport เด็ดขาด
      สองอย่างนั้นปิดการซูมทั้งหน้าและทำให้คนสายตาไม่ดีใช้ไม่ได้ (มีเทสต์คุมอยู่)

   ผลพลอยได้: เบราว์เซอร์ไม่ต้องรออีก 300ms เพื่อดูว่าจะมีแตะครั้งที่สองไหม
   ปุ่มจึงตอบสนองทันทีที่นิ้วแตะ

   `.input` ไม่อยู่ในรายการนี้โดยตั้งใจ — ช่องกรอกต้องเลือกข้อความได้ตามปกติ */
.btn, .chip, .product-btn, .money-chip, .qty-controls button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active, .chip:active, .product-btn:active,
  .money-chip:active, .qty-controls button:active { transform: none; }
}

/* ── ตัวอักษร ─────────────────────────────────────────────────────── */

.title     { font-size: var(--text-title-size);    line-height: var(--text-title-line);    font-weight: var(--text-title-weight); }
.body-lg   { font-size: var(--text-body-lg-size);  line-height: var(--text-body-lg-line);  font-weight: var(--text-body-lg-weight); }
.body      { font-size: var(--text-body-size);     line-height: var(--text-body-line);     font-weight: var(--text-body-weight); }
.meta      { font-size: var(--text-meta-size);     line-height: var(--text-meta-line);     font-weight: var(--text-meta-weight); color: var(--color-ink-secondary); }

/* ตัวเลขเงินทุกตัวใช้ตัวเลขความกว้างคงที่ ไม่มีข้อยกเว้น —
   สมุดรายวันและหน้าปิดร้านเป็นคอลัมน์ที่คนต้องกวาดตาเทียบกัน */
.amount, .amount-hero {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--color-ink-primary);
}
.amount      { font-size: var(--text-amount-size);      line-height: var(--text-amount-line);      font-weight: var(--text-amount-weight); }
.amount-hero { font-size: var(--text-amount-hero-size); line-height: var(--text-amount-hero-line); font-weight: var(--text-amount-hero-weight); }

.tone-attention { color: var(--color-attention); }
.tone-danger    { color: var(--color-danger); }
.tone-secondary { color: var(--color-ink-secondary); }

/* ── โครงหน้า ─────────────────────────────────────────────────────── */

.shell {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--tap-target-min) + var(--space-7));
}

/* แถบบน: ชื่อคนที่ใช้อยู่ กับทางออกจากระบบ · มีทุกหน้าที่เข้าระบบแล้ว
   ไม่ติดขอบบนแบบ fixed เพราะจอเตี้ยมีที่ไม่พอ และมันไม่ใช่ของที่ต้องเห็นตลอดเวลา */
.topbar {
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-hairline);
}
.topbar__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
}

.page-status { display: grid; place-items: center; min-height: 100vh; padding: var(--space-4); text-align: center; }
.page-status main > * + * { margin-top: var(--space-4); }

.stack > * + * { margin-top: var(--space-4); }
.stack-tight > * + * { margin-top: var(--space-2); }

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5);
}

/* การ์ดตัวเลข: หนึ่งการ์ดหนึ่งตัวเลข ไม่มีการ์ดที่มีสองตัวเลข */
.stat-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5);
}
.stat-card .meta { display: block; margin-bottom: var(--space-1); }

.stat-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 600px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }

/* ── ปุ่ม ─────────────────────────────────────────────────────────── */
/* ความสูงใช้ min-height ทุกที่ ห้าม height — ปุ่มต้องยืดตามเนื้อหาที่ 200% */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--rounded-sm);
  font-family: inherit;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
}

/* ขอบคือสัญญาณเดียวที่บอกว่า "นี่กดได้" เพราะระบบนี้ไม่มีเงาเลย
   ค่าสีของ border-strong ถูกเลือกจากเกณฑ์ 3:1 ห้ามทำให้จางลงเพื่อความสวย */
.btn-secondary {
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink-primary);
}

/* ปุ่มเน้น: การกระทำเดียวที่สำคัญที่สุดของหน้าจอที่ยังไม่ใช่จังหวะเงินเข้า
   หน้าจอหนึ่งมีได้ปุ่มเดียว และห้ามอยู่หน้าจอเดียวกับปุ่มยืนยันรับเงิน */
.btn-emphasis {
  min-height: var(--primary-action-height);
  border: none;
  background: var(--color-ink-primary);
  color: var(--color-surface-base);
  box-shadow: var(--shadow-soft);
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
}

/* 🚨 สีเขียวใช้กับปุ่มยืนยันรับเงินอย่างเดียวทั้งแอป
   การเห็นสีนี้ที่ไหนต้องแปลว่า "กดแล้วเงินเข้า" หน้าจอหนึ่งมีได้ปุ่มเดียว */
.btn-confirm {
  min-height: var(--primary-action-height);
  border: none;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-soft);
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  width: 100%;
}

/* ปุ่มเงียบ: ไม่มีขอบ ไม่มีพื้น ใช้กับการกระทำที่ต้องหาเจอแต่ไม่ควรชวนให้กด
   ตอนนี้มีที่เดียวคือ "ออกจากระบบ" บนแถบบน · ยังสูงเต็ม tap-target-min เท่าปุ่มอื่น */
.btn-quiet {
  border: 0;
  color: var(--color-ink-secondary);
  font-size: var(--text-meta-size);
  padding: var(--space-1) var(--space-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* พื้นแดงเต็มปุ่มอ่านง่ายกว่าที่ควรและชวนให้กด จึงใช้แค่ตัวหนังสือกับขอบ */
.btn-destructive {
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

/* ปุ่มที่เป็นตัวเลือกและกำลังถูกเลือกอยู่ — สด · โอน · แบ่งจ่าย
   ท่าเดียวกับชิปหมวดหมู่และชิปมูลค่าเงิน กลับสีพื้นกับสีหมึก

   🚨 ห้ามใช้สีเขียวบอกว่า "เลือกอยู่" เพราะเขียวสงวนให้ปุ่มยืนยันรับเงินอย่างเดียว
      ถ้าปุ่ม "สด" กลายเป็นสีเขียวตอนเลือก จะมีปุ่มเขียวสองปุ่มบนจอเดียวกัน
      แล้วคำว่า "เห็นเขียว = กดแล้วเงินเข้า" จะไม่จริงอีกต่อไป

   การกลับสีเป็นสัญญาณที่คนตาบอดสีอ่านได้ด้วย เพราะต่างกันที่ความสว่าง ไม่ใช่ที่เฉดสี
   และมี aria-pressed บอกซ้ำอยู่แล้วสำหรับโปรแกรมอ่านหน้าจอ */
.btn[aria-pressed='true'] {
  background: var(--color-ink-primary);
  border-color: var(--color-ink-primary);
  color: var(--color-surface-base);
}

.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled='true'] { color: var(--color-ink-disabled); border-color: var(--color-ink-disabled); cursor: default; }

/* ── ช่องกรอก ─────────────────────────────────────────────────────── */

.field { display: block; }
.field > .meta { display: block; margin-bottom: var(--space-1); }

.input, select.input, textarea.input {
  display: block;
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-sm);
  color: var(--color-ink-primary);
  font-family: inherit;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
}
.input-amount { font-variant-numeric: tabular-nums; }

.form-grid { display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }

/* ── ชิปหมวดหมู่และช่วงเวลา — ท่าเดียวกันทั้งแอป ─────────────────── */

.chip-bar {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  scrollbar-width: none;
}
.chip-bar::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-pill);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  font-family: inherit;
  font-size: var(--text-body-size);
  text-decoration: none;
  white-space: nowrap;
}
.chip[aria-current='true'] {
  background: var(--color-ink-primary);
  color: var(--color-surface-base);
  border-color: var(--color-ink-primary);
}

/* ── กริดสินค้า ───────────────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 600px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.product-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: var(--product-button-min-height);
  padding: var(--space-3);
  text-align: start;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-soft);
  color: var(--color-ink-primary);
  font-family: inherit;
  cursor: pointer;
}
.product-btn__name {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* สต็อกไม่พอ: เปลี่ยนแค่ตัวเลขคงเหลือ ขอบและพื้นไม่เปลี่ยน
   ปุ่มยังกดได้ตามปกติและต้องไม่ดูเหมือนถูกปิดใช้งาน */
.product-btn__stock--low { color: var(--color-attention); }

/* ── แถบตะกร้าติดขอบล่าง ──────────────────────────────────────────── */
/* สิ่งที่ลอยเหนือเนื้อหาบอกตัวเองด้วยเส้น border-strong เส้นเดียวที่ด้านติดเนื้อหา */

.cart-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-floating);
  padding: var(--space-3) var(--space-4);
}
.cart-bar__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.cart-bar[hidden] { display: none; }

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-hairline);
}

/* ช่องติ๊ก — มีที่เดียวในระบบคือ "ไม่ต้องนับสต็อก" ในหน้าสินค้า
   ทั้งแถวกดได้ ไม่ใช่แค่ตัวกล่อง เพราะกล่องขนาด 24px เล็กเกินกว่าจะเล็งด้วยนิ้วโป้ง
   แต่ตัว label สูงเต็ม 48px ตาม DESIGN.md §พื้นที่นิ้วโป้ง */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-2) 0;
  cursor: pointer;
}
.field-check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  accent-color: var(--color-accent);
}
.field-check > span { display: block; }
.field-check .meta { display: block; margin-top: 2px; }

.qty-controls { display: inline-flex; align-items: center; gap: var(--space-2); }
.qty-controls button {
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-sm);
  background: transparent;
  color: var(--color-ink-primary);
  font-family: inherit;
  font-size: var(--text-body-lg-size);
  cursor: pointer;
}

/* ── แผ่นเลื่อนขึ้น: ซ้อนได้ชั้นเดียว ไม่มีเงา ไม่มีฉากหลังมืด ───── */

.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  max-width: var(--content-max-width);
  margin: 0 auto;
  background: var(--color-surface-raised);
  border-top: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;
  box-shadow: var(--shadow-floating);
  padding: var(--space-5) var(--space-4);
  max-height: 90vh;
  overflow-y: auto;
}
.sheet[hidden] { display: none; }

/* ชิปมูลค่าเงิน: ขนาดเท่ากันทุกปุ่ม ไม่มีปุ่มไหนเด่นกว่าปุ่มอื่น
   เพราะพนักงานไม่ได้เลือก เธอแค่กดปุ่มที่ตรงกับแบงก์ในมือ */
.money-chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.money-chip {
  min-height: var(--primary-action-height);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-soft);
  color: var(--color-ink-primary);
  font-family: inherit;
  font-size: var(--text-amount-size);
  font-weight: var(--text-amount-weight);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.money-chip[aria-pressed='true'] { background: var(--color-ink-primary); color: var(--color-surface-base); }

/* ── แถบนำทางล่าง: มีทั้งไอคอนและคำ ไม่มีจุดหรือตัวเลขแจ้งเตือน ─── */

.nav-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  background: var(--color-surface-raised);
  border-top: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-floating);
}
.nav-bar__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-target-min);
  padding: var(--space-1);
  color: var(--color-ink-secondary);
  text-decoration: none;
  font-size: var(--text-meta-size);
}
.nav-item[aria-current='page'] { color: var(--color-ink-primary); font-weight: 600; }
.nav-item__glyph { font-size: 18px; line-height: 1; }

/* ── แถบแจ้งผลติดขอบบน — ไม่ใช้สีเขียวเพื่อบอกว่าสำเร็จ ─────────── */

.flash {
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-strong);
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink-primary);
}

.notice {
  background: var(--color-attention-surface);
  color: var(--color-attention);
  border-radius: var(--rounded-sm);
  padding: var(--space-3);
}
.notice-danger { background: var(--color-danger-surface); color: var(--color-danger); }

/* แถบสถานะเชื่อมต่อ: ปรากฏเฉพาะตอนเน็ตหลุด และอยู่จนกว่าจะกลับมา ไม่หายเอง */
.offline-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  background: var(--color-attention-surface);
  color: var(--color-attention);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  font-size: var(--text-meta-size);
}
.offline-bar[hidden] { display: none; }

/* ── ตารางแถวรายการ ──────────────────────────────────────────────── */

.row-list > li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-hairline);
}
.row-list a { text-decoration: none; }

.breakdown { width: 100%; border-collapse: collapse; }
.breakdown th, .breakdown td { padding: var(--space-2) 0; text-align: start; font-weight: 400; }
.breakdown td:last-child, .breakdown th:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.breakdown tbody tr { border-bottom: 1px solid var(--color-border-hairline); }
.breakdown tfoot td { font-weight: 600; padding-top: var(--space-3); }

.divider { border: 0; border-top: 1px solid var(--color-border-hairline); margin: var(--space-4) 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.inline-form { display: inline; }
.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }