/* ══════════════════════════════════════════════════════════════════
   รหัสส่วนลด (0069) — ป้าย "ลด 20%" · การ์ดในแผงใบจอง · หน้าสร้างรหัส (/code)

   ป้ายเป็น "พื้นทึบ" โดยตั้งใจ: ป้ายอื่นบนจอ (สถานะ · แท็ก · โซน) เป็นเส้นขอบทั้งหมด
   ส่วนลดคือเงิน — พนักงานที่ปิดบิลต้องเห็นมันก่อนสิ่งอื่นบนแถว ไม่ใช่อ่านเจอ
   สีไม่ซ้ำกับสีสถานะสามสี (บรอนซ์ = จอง · เซจ = นั่ง · สนิม = เลยเวลา) จึงไม่ถูกอ่านเป็นสถานะ

   โทเคนต้องเขียนสามที่ (มืด · media สว่าง · data-theme สว่าง) ด้วยเหตุผลเดียวกับหัวข้อธีมของ app.css
   วัดคอนทราสต์บนพื้นจริง: มืด #1F1F1F บน #DCCDBF = 11.6:1 · สว่าง #FFFFFF บน #5A3F26 = 9.9:1
   CSP: style-src 'self' — ไฟล์นี้เป็นที่เดียวของสไตล์ฟีเจอร์นี้ ไม่มี style= ในมาร์กอัปเลย
   ══════════════════════════════════════════════════════════════════ */

:root {
  --promo-bg:   #DCCDBF;
  --promo-ink:  #1F1F1F;
  --promo-edge: #DCCDBF;
  --code-big:   #F9F7F4;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --promo-bg:   #5A3F26;
    --promo-ink:  #FFFFFF;
    --promo-edge: #5A3F26;
    --code-big:   #1F1F1F;
  }
}
:root[data-theme="light"] {
  --promo-bg:   #5A3F26;
  --promo-ink:  #FFFFFF;
  --promo-edge: #5A3F26;
  --code-big:   #1F1F1F;
}

/* ── ป้าย ── */
.promo-chip {
  display: inline-flex; align-items: center; flex: none;
  margin-left: 6px; padding: 0 8px;
  border-radius: 999px;
  background: var(--promo-bg); color: var(--promo-ink);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.75; white-space: nowrap;
}
.promo-mark {
  display: inline-block; flex: none;
  padding: 0 4px; border-radius: 4px;
  background: var(--promo-bg); color: var(--promo-ink);
  font-style: normal; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.6; white-space: nowrap;
}
/* โต๊ะบนผัง — ป้ายย่อนั่ง "บนขอบบน" ของโต๊ะ ล้นออกไปทางขวา ไม่ดันชื่อแขกที่กว้างได้แค่ไม่กี่สิบพิกเซล
   ทับตัวโต๊ะแค่ 4px ของขอบ — รอบแรกวางที่มุม (top:-7px) แล้วป้ายกว้าง ~50px บังชื่อโต๊ะ (ภาพ e2e-codes 17 ต.ค.) */
.tbl .promo-mark { position: absolute; bottom: calc(100% - 4px); right: -10px; z-index: 2; box-shadow: 0 0 0 2px var(--fp-ground); }
/* แถบในตารางโต๊ะ — กฎ .tg-bar i ของ flows.css ทำให้ตัวเลขจางและดันไปขวาสุด ป้ายนี้ต้องไม่โดนแบบนั้น */
.tg-bar .promo-mark { margin-left: 4px; color: var(--promo-ink); font-size: 10px; }
.t-chip .promo-chip { margin-left: auto; }

/* ── การ์ดในแผงใบจอง ── */
.promo-card { border-color: var(--promo-edge); }
.promo-card--empty { border-style: dashed; border-color: var(--line); padding: 8px; }
.pcard-head .promo-line { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.75; }
.promo-note { white-space: pre-wrap; }
.promo-card .btns { margin-top: 10px; }
.promo-form { margin-top: 10px; }
.promo-form .adm-input { text-transform: uppercase; letter-spacing: .12em; font-size: 17px; }

/* ══════════════ หน้าสร้างรหัส (/code) ══════════════
   โทรศัพท์มือเดียวคือเป้าหลัก: ทุกปุ่มสูงอย่างน้อย 48px · ปุ่มเปอร์เซ็นต์ใหญ่กว่าปุ่มทั่วไปเพราะมันคือ
   การตัดสินใจเดียวที่มีน้ำหนักบนหน้านี้ · บนไอแพดการ์ดอยู่กลางจอกว้างไม่เกิน 560px */
.code-page {
  max-width: 560px; margin: 0 auto;
  padding: 16px 16px 120px;
  display: flex; flex-direction: column; gap: 16px;
}
.code-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 20px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.code-title { margin: 0; font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.code-lede { margin: -8px 0 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.75; }
.code-field { display: flex; flex-direction: column; gap: 8px; }
.code-label { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); line-height: 1.75; }
.code-onevenue { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.code-onevenue b { font-size: 17px; font-weight: 600; color: var(--ink); }

/* สองร้านต้องอยู่แถวเดียวบนจอ 390px (การ์ดกว้างใน ~290px) — แถวละร้านดันปุ่ม "สร้างรหัส" ลงไปใต้แถบล่าง */
.code-venues { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.code-venue {
  min-height: var(--tap); padding: 10px 8px;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
  font-size: 15px; font-weight: 500;
}
.code-venue[aria-pressed="true"] { border-color: var(--bronze); background: var(--accent-wash); color: var(--sel-text); font-weight: 600; }

.code-pcts { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 10px; }
.code-pct {
  min-height: 64px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
.code-pct b { font-size: 24px; font-weight: 600; }
.code-pct[aria-pressed="true"] { background: var(--promo-bg); border-color: var(--promo-bg); color: var(--promo-ink); }

.code-card .adm-input { width: 100%; min-height: var(--tap); }
.code-go { min-height: 56px; font-size: 17px; }

/* ── ผลลัพธ์ ── */
.code-result { border-color: var(--promo-edge); }
.code-done { margin: 0; font-size: 14px; font-weight: 600; color: var(--ok); line-height: 1.75; }
.code-big {
  font-size: 40px; font-weight: 600; letter-spacing: .14em;
  color: var(--code-big); text-align: center;
  padding: 14px 8px; border-radius: var(--r);
  background: var(--surface-2); border: 1px dashed var(--promo-edge);
  user-select: all; word-break: break-all;
}
.code-meta { margin: -6px 0 0; text-align: center; font-size: 14px; color: var(--ink-dim); line-height: 1.75; }
.code-meta--note { margin-top: -12px; font-size: 13px; }
.code-msg {
  white-space: pre-wrap; font-size: 14px; line-height: 1.75; color: var(--ink);
  background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px;
  user-select: text; overflow-wrap: anywhere;
}
.code-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.code-actions .btn { min-height: 52px; font-size: 16px; }

/* ── รหัสที่ฉันสร้างล่าสุด ── */
.code-recent h3 { margin: 4px 2px 8px; font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.code-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.code-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 12px 14px;
}
.code-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.code-row-code { font-size: 16px; font-weight: 600; letter-spacing: .1em; color: var(--ink); }
.code-row-sub { font-size: 12.5px; color: var(--ink-dim); line-height: 1.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-row-st { font-size: 12.5px; color: var(--ink-mute); line-height: 1.75; }
.code-row--used .code-row-st { color: var(--ok); font-weight: 600; }
.code-row--held .code-row-st { color: var(--accent-text); font-weight: 600; }
.code-row--expired, .code-row--off { opacity: .72; }
.code-row-copy { flex: none; min-width: 72px; }
.code-denied p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink); }
.code-denied .hint { font-size: 13px; }

/* ── หลังบ้าน: ตั้งค่า → รหัสส่วนลด (admin/promos.js) ──
   .adm-item ของหน้าอื่นมีแค่หัวแถว · แถวของรหัสมีปุ่มกับรายการใบจองใต้หัว จึงต้องมีขอบในของตัวเอง
   (ไม่งั้นปุ่มชิดขอบการ์ด — เห็นในภาพ e2e-codes 17 ต.ค.) */
.pc-item > .btns { padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); }
.pc-code { letter-spacing: .1em; }
.pc-item.is-off { opacity: .72; }
.pc-uses-wrap { padding: 0 14px 14px; }
.pc-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-use {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 13px; line-height: 1.75; color: var(--ink);
}
.pc-use.is-live { box-shadow: inset 3px 0 0 var(--promo-bg); }

/* ══════════════ หน้าสร้างโค้ดที่เปิดด้วยรหัสผ่าน (0070) ══════════════
   คนที่ไม่ได้ล็อกอินไม่มีเปลือกแอป (แถบหัวของร้าน · แท็บ) — app.js showCodeSolo() วาดโครงนี้แทน
   ก่อนปลดเห็นแค่ช่องรหัสผ่าน: ไม่มีชื่อร้าน ไม่มีรหัส ไม่มีตัวเลข (เจ้าของสั่ง) */
.code-solo { min-height: 100dvh; display: flex; flex-direction: column; background: var(--ground); }
.code-solo-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.code-solo-mark { font-size: 17px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.code-solo-view { flex: 1; }
.code-page--unlock { padding-top: 10vh; }
.code-pass { font-size: 18px; letter-spacing: .08em; }

/* แถบบนของทางรหัสผ่าน — ออกในชื่อใคร · ปลดด้วยรหัสผ่านไหน · ออกจากระบบ */
.code-passbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px;
  padding: 10px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line-soft);
}
.code-passbar p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink); }
.code-passbar-who { flex: 1 1 100%; }
.code-passbar-pass { color: var(--ink-dim); flex: 1 1 auto; }
.code-passbar .linkbtn {
  border: 0; background: none; padding: 0 0 0 6px; font: inherit; font-size: 13px;
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.code-lock { min-height: 40px; padding: 0 14px; }

/* ทางสำรองของการคัดลอก — กล่องข้อความชั่วคราวที่ต้อง "อยู่ในหน้า" แต่ไม่ต้องเห็น */
.code-clip { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (min-width: 700px) {
  .code-page { padding-top: 28px; }
  .code-card { padding: 26px 26px; }
  .code-big { font-size: 48px; }
}