@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");
/*
 * PIZZA DONG — shared UI system
 * โทนเหลือง/น้ำเงิน สะอาด อ่านง่ายบนจอสัมผัส
 */
:root {
  color-scheme: light;
  /* ธีมเหลือง–น้ำเงิน: น้ำเงิน = สีหลัก (หัวข้อ/แท็บที่เลือก/ป้าย — ตัวขาวบนน้ำเงินอ่านชัด)
     เหลือง = แถบหัว/ปุ่มหลัก (ตัวน้ำเงินบนเหลือง)/พื้นอ่อน — อย่าวางตัวขาวบนเหลือง (อ่านไม่ออก) */
  --ui-navy: #14295c;
  --ui-navy-strong: #0c1c44;
  --ui-navy-soft: #e9eef9;
  --ui-yellow: #ffc928;
  --ui-yellow-strong: #f2b400;
  --ui-yellow-soft: #fff3c4;
  --ui-yellow-pale: #fffae6;
  --ui-gold: #a86f00;                 /* ราคา/ตัวเลขเด่นบนพื้นขาว (เหลืองล้วนอ่านไม่ออก) */
  --ui-cta: linear-gradient(135deg, #ffd23f, #ffc21a);   /* ปุ่มหลัก */
  --ui-cta-ink: var(--ui-navy);
  --ui-cta-shadow: 0 8px 18px rgba(214, 160, 0, .26);
  --ui-header: linear-gradient(100deg, #ffd84d 0%, #ffcb2e 55%, #ffd23f 100%);

  /* ชื่อเดิม (ทุกหน้าอ้างอยู่) -> สีใหม่ : orange = สีหลัก (น้ำเงิน) */
  --ui-orange: var(--ui-navy);
  --ui-orange-strong: var(--ui-navy);
  --ui-orange-soft: var(--ui-navy-soft);
  --ui-orange-pale: var(--ui-yellow-pale);
  --ui-cream: #fffdf6;
  --ui-white: #ffffff;
  --ui-brown: #172a55;
  --ui-brown-2: #4a5a80;
  --ui-brown-3: #7f8aa6;
  --ui-line: #e9e3cf;
  --ui-green: #237f55;
  --ui-green-soft: #e6f6ed;
  --ui-amber: #a86400;
  --ui-amber-soft: #fff1cc;
  --ui-red: #c8413b;
  --ui-red-soft: #fff0ef;
  --ui-purple: #6a50d0;
  --ui-shadow-sm: 0 1px 2px rgba(20, 41, 92, .06), 0 6px 18px rgba(20, 41, 92, .06);
  --ui-shadow: 0 16px 44px rgba(20, 41, 92, .12);
  --ui-ring: 0 0 0 4px rgba(255, 201, 40, .45);

  /* map legacy page tokens to one visual language */
  --bg: var(--ui-cream);
  --bg2: var(--ui-yellow-pale);
  --surface: var(--ui-white);
  --surface-2: var(--ui-yellow-pale);
  --surface2: var(--ui-yellow-pale);
  --panel: var(--ui-white);
  --panel2: var(--ui-yellow-pale);
  --card: var(--ui-white);
  --card2: var(--ui-yellow-pale);
  --line: var(--ui-line);
  --fg: var(--ui-brown);
  --fg2: var(--ui-brown-2);
  --fg3: var(--ui-brown-3);
  --ink: var(--ui-brown);
  --ink-2: var(--ui-brown-2);
  --ink-3: var(--ui-brown-3);
  --ink2: var(--ui-brown-2);
  --ink3: var(--ui-brown-3);
  --muted: var(--ui-brown-2);
  --muted2: var(--ui-brown-3);
  --accent: var(--ui-navy);
  --accent-soft: var(--ui-navy-soft);
  --accent2: var(--ui-green);
  --brand: var(--ui-navy);
  --brand-ink: #fff;
  --brand-soft: var(--ui-navy-soft);
  --orange: var(--ui-navy);
  --orange-d: var(--ui-navy-strong);
  --soft: var(--ui-yellow-soft);
  --cream: var(--ui-cream);
  --fire: var(--ui-navy);
  --fire-ink: #fff;
  --fire-soft: var(--ui-navy-soft);
  --pay: var(--ui-green);
  --pay-soft: var(--ui-green-soft);
  --ok: var(--ui-green);
  --warn: var(--ui-amber);
  --bad: var(--ui-red);
  --new: #2f5bd3;
  --new-dim: #e8eefc;
  --cook: var(--ui-amber);
  --cook-dim: var(--ui-amber-soft);
  --done: var(--ui-green);
  --late: var(--ui-red);
  --prep: var(--ui-amber);
  --prep-dim: var(--ui-amber-soft);
  --ready: var(--ui-green);
  --ready-dim: var(--ui-green-soft);
  --shadow: var(--ui-shadow-sm);
}

/* ---- ตัวอักษร/ขนาด/ระยะ: ชุดเดียวทั้งระบบ (ทุกหน้าโหลด ui.css) ----
   หัวข้อ = Anuphan · เนื้อหา/ตัวเลข = IBM Plex Sans Thai (ตัวเลขกว้างเท่ากัน ตรงหลัก)
   ฟอนต์ตัวกว้างเท่ากัน (Plex Mono) เฉพาะที่ต้องเรียงคอลัมน์ด้วยช่องว่าง: ตัวอย่างใบเสร็จ/สลิป/log */
:root {
  --font-head: "Anuphan", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --font-code: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans: var(--font-body);
  --serif: var(--font-head);
  --head: var(--font-head);
  --mono: var(--font-body);          /* เดิมใช้ mono กับราคา/ตัวเลข -> ตัวเลขแบบตาราง (tabular) ในฟอนต์เดียวกับเนื้อหา */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --h-control: 44px;
  --page-max: 1280px;
}
body[data-page] {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body[data-page] :is(h1, h2, h3, h4) { font-family: var(--font-head); letter-spacing: 0; }
body[data-page] :is(pre, code, kbd, .slip, .log) { font-family: var(--font-code); font-variant-numeric: normal; }
/* ปุ่ม/ชิปในแถบหัว: ข้อความบรรทัดเดียว (เดิม "บิลค้าง" แตกเป็น 2 บรรทัดเมื่อจอแคบ) */
body[data-page] :is(header, .topbar, .top) :is(button, a, .chip) { white-space: nowrap; }

* { scrollbar-color: #d9cfa8 transparent; scrollbar-width: thin; }
html { background: var(--ui-cream); }
body[data-page] {
  background:
    radial-gradient(circle at 4% 4%, rgba(255, 214, 90, .22), transparent 24rem),
    radial-gradient(circle at 96% 92%, rgba(255, 228, 140, .24), transparent 28rem),
    var(--ui-cream);
  color: var(--ui-brown);
  accent-color: var(--ui-orange);
}
body[data-page]::before {
  content: "";
  position: fixed;
  right: -42px;
  top: 92px;
  width: 128px;
  height: 128px;
  border: 22px solid rgba(255, 201, 40, .045);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;   /* วงตกแต่งอยู่หลังเนื้อหา (ไม่ต้องยัด position ให้ลูกทุกตัว) */
}
/* หมายเหตุ: เดิมมี `body[data-page] > * { position: relative; z-index: 1 }` เพื่อยกเนื้อหาเหนือวงตกแต่ง
   แต่มันไป override modal/overlay ที่เป็น position:fixed (.scrim/.ov/.modal) ให้กลายเป็น relative → หลุดออกนอกจอ
   เลยดันวงตกแต่งไปหลังด้วย z-index:-1 แทน เนื้อหาปกติจึงอยู่เหนืออยู่แล้วโดยไม่ต้องบังคับ position */
body[data-page] button,
body[data-page] input,
body[data-page] select,
body[data-page] textarea { font: inherit; }
body[data-page] button { transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
body[data-page] button:not(:disabled):active { transform: translateY(1px) scale(.985); }
body[data-page] :is(button, input, select, textarea, a):focus-visible {
  outline: 3px solid rgba(255, 201, 40, .38);
  outline-offset: 2px;
}
body[data-page] input,
body[data-page] select,
body[data-page] textarea {
  background: var(--ui-white);
  color: var(--ui-brown);
  border-color: var(--ui-line);
}
body[data-page] input::placeholder,
body[data-page] textarea::placeholder { color: #8a93ad; }
/* แถบหัวทุกหน้า = เหลือง (ตัวน้ำเงิน) ; ปุ่ม/ชิปในแถบเป็นพื้นขาวอยู่แล้ว ตัดกับเหลืองชัด */
body[data-page] :is(header, .topbar, .top) {
  background: var(--ui-header);
  border-color: #f0c22e;
  box-shadow: 0 5px 18px rgba(20, 41, 92, .08);
  color: var(--ui-navy);
}
body[data-page] :is(.card, .scard, .kpi, .box, .panel, .tk, .num, .track) {
  box-shadow: var(--ui-shadow-sm);
}
body[data-page] :is(.card, .scard, .kpi, .panel) { border-color: var(--ui-line); }
body[data-page] table { border-collapse: separate; border-spacing: 0; }
body[data-page] th {
  color: var(--ui-brown-2);
  background: #fffbea;
  font-weight: 700;
  letter-spacing: .01em;
}
body[data-page] td { border-color: #ece5cf; }
body[data-page] tbody tr:hover td { background: #fffcf0; }
body[data-page] .hidden { display: none !important; }
.hub-link {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: #fff;
  color: var(--ui-orange-strong);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  font-size: 18px;
  flex: none;
}
.hub-link:hover { border-color: var(--ui-navy); background: #fff; }
/* ปุ่ม/ลิงก์ในแถบหัวเหลือง: พื้นขาว ขอบเหลืองเข้ม — พื้นโปร่ง/เหลืองอ่อนจะกลืนกับแถบ */
body[data-page] :is(header, .topbar, .top) :is(a.nav, .iconbtn, .icon-btn) {
  background: #fff;
  border-color: #efc53a;
  color: var(--ui-navy);
}
body[data-page] :is(header, .topbar, .top) :is(a.nav, .iconbtn, .icon-btn):hover { border-color: var(--ui-navy); }

/* Login cards */
body[data-page] :is(#login, #overlay) { background: rgba(255, 252, 240, .96); }
body[data-page] :is(#login, #overlay) .box {
  background: var(--ui-white);
  border: 1px solid var(--ui-line);
  border-radius: 26px;
  box-shadow: var(--ui-shadow);
}
body[data-page] :is(#login, #overlay) :is(.logo, .ic) {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: var(--ui-orange-soft);
  display: grid;
  place-items: center;
  font-size: 32px;
  transform: rotate(-3deg);
}
body[data-page] :is(#login, #overlay) h2 { color: var(--ui-brown); }
body[data-page] :is(#login, #overlay) button {
  min-height: 46px;
  border-radius: 14px;
  background: var(--ui-cta);
  color: var(--ui-cta-ink);
  border-color: transparent;
  box-shadow: var(--ui-cta-shadow);
}

/* POS */
body[data-page="pos"] .topbar { padding: 11px 18px; }
body[data-page="pos"] .brand .logo,
body[data-page="manage"] header .logo {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: var(--ui-orange-soft);
  display: grid;
  place-items: center;
}
body[data-page="pos"] .brand h1 { color: var(--ui-orange-strong); font-size: 18px; }
body[data-page="pos"] .menu { background: transparent; }
body[data-page="pos"] .tab.active,
body[data-page="kiosk"] .tab.active {
  background: var(--ui-orange);
  border-color: var(--ui-orange);
  color: #fff;
  box-shadow: 0 7px 16px rgba(255, 201, 40, .18);
}
body[data-page="pos"] .card,
body[data-page="kiosk"] .card {
  border-radius: 20px;
  border-color: #ece5cf;
  box-shadow: 0 7px 20px rgba(20, 41, 92, .065);
}
body[data-page="pos"] .card:hover,
body[data-page="kiosk"] .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 28px rgba(20, 41, 92, .11);
}
body[data-page="pos"] .card .cimg,
body[data-page="kiosk"] .card .cimg { border-radius: 15px; background: var(--ui-orange-pale); }
body[data-page="pos"] .ticket,
body[data-page="kiosk"] .cart { background: rgba(255, 255, 255, .96); }
body[data-page="pos"] .t-foot,
body[data-page="kiosk"] .c-foot { background: #fff8dc; }
body[data-page="pos"] .btn.fire,
body[data-page="kiosk"] .btn.go {
  background: var(--ui-cta);
  color: var(--ui-cta-ink);
  box-shadow: var(--ui-cta-shadow);
}
body[data-page="pos"] .btn,
body[data-page="pos"] .ot,
body[data-page="kiosk"] .btn,
body[data-page="kiosk"] .pick,
body[data-page="kiosk"] .opt { min-height: 44px; }
body[data-page="pos"] .sheet,
body[data-page="kiosk"] .sheet { border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); }

/* Kiosk */
body[data-page="kiosk"] .top h1 { color: var(--ui-orange-strong); }
body[data-page="kiosk"] .pc {
  border-radius: 26px;
  border-color: var(--ui-line);
  box-shadow: var(--ui-shadow-sm);
}
body[data-page="kiosk"] .pc.qr { border-color: #f2c94c; background: #fffbea; }
body[data-page="kiosk"] .ov { background: var(--ui-cream); }

/* Customer table ordering */
body[data-page="table"] .item {
  border-radius: 20px;
  box-shadow: var(--ui-shadow-sm);
  border-color: var(--ui-line);
}
body[data-page="table"] header { border-radius: 0 0 20px 20px; }
body[data-page="table"] .tbl { box-shadow: 0 6px 15px rgba(255, 201, 40, .2); }
body[data-page="table"] .add,
body[data-page="table"] .again { min-height: 46px; }
body[data-page="table"] .bar .in {
  background: linear-gradient(135deg, #1d3a7a, var(--ui-navy));
  border: 1px solid rgba(255,255,255,.25);
}

/* Manage + recipe editor */
body[data-page="manage"] header h1,
body[data-page="recipe"] header h1 { color: var(--ui-orange-strong); }
body[data-page="manage"] .scard,
body[data-page="recipe"] :is(.side, .ed) {
  background: rgba(255,255,255,.94);
  border-color: var(--ui-line);
  border-radius: 20px;
}
body[data-page="manage"] .cat { color: var(--ui-orange-strong); border-color: var(--ui-line); }
body[data-page="manage"] .sgrid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; align-items: stretch; }
body[data-page="manage"] .fld { min-width: 0; }
body[data-page="manage"] .fld > :is(input, select) { min-height: 46px; width: 100%; }
body[data-page="manage"] .fld:has(.sw) {
  padding: 11px 13px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #fffcf0;
}
body[data-page="manage"] .fld .row { display: flex; align-items: center; gap: 10px; }
body[data-page="manage"] .fld .row span { line-height: 1.45; }
body[data-page="manage"] #s_msgs { margin-top: 16px; min-height: 78px; }
body[data-page="manage"] .item,
body[data-page="recipe"] .mi { border-color: #ece5cf; }
body[data-page="manage"] .item:hover,
body[data-page="recipe"] .mi:hover { background: #fffbea; }
body[data-page="manage"] .scard .save,
body[data-page="recipe"] button.primary {
  background: var(--ui-cta);
  border-color: transparent;
  color: var(--ui-cta-ink);
  box-shadow: var(--ui-cta-shadow);
}

/* Admin / HQ / console */
body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"]) header h1 { color: var(--ui-orange-strong); }
body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"]) main { position: relative; }
body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"]) :is(.kpi, .card) {
  background: rgba(255,255,255,.95);
  border-radius: 18px;
}
body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"]) button.primary {
  background: var(--ui-cta);
  border-color: transparent;
  color: var(--ui-cta-ink);
}
body[data-page="admin"] .s-active,
body[data-page="admin"] .st-paid,
body[data-page="hq"] .b-ok,
body[data-page="dashboard"] .b-ok { color: #1c714b; background: var(--ui-green-soft); }
body[data-page="admin"] .s-trial { color: var(--ui-purple); background: #f1edff; }
body[data-page="admin"] .s-suspended,
body[data-page="admin"] .st-overdue,
body[data-page="hq"] .b-bad,
body[data-page="dashboard"] .b-bad { color: var(--ui-red); background: var(--ui-red-soft); }
body[data-page="dashboard"] .log { background: #fffcf0; color: var(--ui-brown); }

/* Kitchen: high clarity, warm brand palette */
body[data-page="kds"] .bar { background: var(--ui-header) !important; border-color: #f0c22e !important; }
body[data-page="kds"] .bar h1 { color: var(--ui-orange-strong); }
body[data-page="kds"] .stn { min-height: 42px; border-radius: 999px; background: #fffbea; }
body[data-page="kds"] .stn.on {
  background: var(--ui-orange);
  color: #fff;
  border-color: var(--ui-orange);
}
body[data-page="kds"] .board { background: transparent; }
body[data-page="kds"] .tk {
  border-radius: 20px;
  color: var(--ui-brown);
  box-shadow: 0 12px 30px rgba(20, 41, 92,.09);
}
body[data-page="kds"] .thead .no { color: #172a55; }
body[data-page="kds"] .thead .type { color: #4a5a80; background: #fffbea; }
body[data-page="kds"] .tk[data-s="queued"] .timer { color: #2f5bd3; }
body[data-page="kds"] .tk[data-s="preparing"] .timer { color: #9a6209; }
body[data-page="kds"] .it .body .nm { color: #172a55; font-weight: 700; }
body[data-page="kds"] .it .body .sc { color: #4a5a80; }
body[data-page="kds"] .bump { font-weight: 800; }
body[data-page="kds"] .it { border-color: #ece5cf; }
body[data-page="kds"] .it .qty { background: #fff6d6; }
body[data-page="kds"] .tk[data-s="queued"] { border-color: #f2c94c; }
body[data-page="kds"] .tk[data-s="preparing"] { border-color: #e9bf63; }

/* Queue display: bright, readable from a distance */
body[data-page="display"] {
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 214, 90, .28), transparent 32rem),
    linear-gradient(145deg, #fffcf0, #fff6d6);
}
body[data-page="display"] header { background: rgba(255,255,255,.88); }
body[data-page="display"] header h1 { color: var(--ui-brown); }
body[data-page="display"] .promo {
  background: radial-gradient(circle at 50% 35%, #fff 0, #fffbea 45%, #fff3c4 100%);
}
body[data-page="display"] .promo-emoji { filter: drop-shadow(0 16px 24px rgba(20, 41, 92,.18)); }
body[data-page="display"] .col.prep { border-color: var(--ui-line); }
body[data-page="display"] .prep .num {
  background: var(--ui-amber-soft);
  border-color: #efd494;
}
body[data-page="display"] .ready .num {
  background: linear-gradient(160deg, #f2fff7, #e4f8ec);
  border-color: #72bf96;
  box-shadow: 0 12px 30px rgba(39,135,90,.13);
}
body[data-page="display"] .ready .num .no { color: #20784f; text-shadow: none; }
body[data-page="display"] .ready .num::before { opacity: .8; }
body[data-page="display"] .foot,
body[data-page="display"] .paybar { background: rgba(255,255,255,.94); border-color: var(--ui-line); }
body[data-page="display"] .pay-chip { background: #fff6d6; border-color: #e7c66d; }
body[data-page="display"] .paybar-lb .n { background: #ffedb6; color: #875607; }

@media (max-width: 720px) {
  body[data-page]::before { display: none; }
  body[data-page] :is(header, .topbar, .top) { backdrop-filter: none; }
  body[data-page="pos"] .brand h1 { font-size: 16px; }
  body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"], [data-page="manage"], [data-page="recipe"]) header {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"], [data-page="manage"], [data-page="recipe"]) header .spacer {
    flex-basis: 100%;
    order: 2;
    height: 0;
  }
  body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"], [data-page="manage"], [data-page="recipe"]) main {
    padding: 14px 12px 52px;
  }
  body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"]) .card { overflow-x: auto; }
  body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"]) table { min-width: 650px; }
  body[data-page="manage"] .sgrid { grid-template-columns: 1fr; }
  body[data-page="recipe"] .ed { overflow-x: auto; }
  body[data-page="recipe"] table.lines { min-width: 720px; }
}

@media (max-width: 520px) {
  body[data-page="pos"] .topbar {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body[data-page="pos"] .topbar::-webkit-scrollbar { display: none; }
  body[data-page="pos"] .brand,
  body[data-page="pos"] .chip,
  body[data-page="pos"] .icon-btn { flex: none; }
  body[data-page="pos"] .brand h1 {
    white-space: nowrap;
    font-size: 14px;
  }
  body[data-page="pos"] .chip { white-space: nowrap; }
  body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"]) .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body:is([data-page="admin"], [data-page="hq"], [data-page="dashboard"]) .kpi { padding: 13px; }
  body[data-page="manage"] header select { min-width: min(100%, 210px); }
}

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

/* ---- ไอคอน (Phosphor duotone — /icons.svg + /icons.js ; ตารางเทียบอีโมจิเดิม docs/ICONS.md) ----
   เส้นหลัก = สีตัวอักษร (currentColor) ; ชั้นเงา = --i-duo / --i-duo-op (ค่าเริ่มต้นเหลืองแบรนด์) */
.i {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: -0.22em;
  flex: none;
  fill: currentColor;
  --i-duo: var(--ui-yellow);
  --i-duo-op: .75;
}
.i-lg { width: 1.6em; height: 1.6em; }
.i-xl { width: 2.4em; height: 2.4em; }
/* บนแถบหัวเหลือง: เงาขาว ; บนพื้นน้ำเงิน (แท็บ/ตัวเลือกที่เลือก) และปุ่มเหลือง: เงาโปร่งสีเดียวกับเส้น */
body[data-page] :is(header, .topbar, .top) .i { --i-duo: #fff; --i-duo-op: .9; }
body[data-page] :is(.on, .active, [aria-pressed="true"], [aria-selected="true"]) .i { --i-duo: currentColor; --i-duo-op: .28; }
body[data-page] :is(.btn.fire, .btn.go, .go, .primary, .save, .add, .again) .i { --i-duo: currentColor; --i-duo-op: .22; }
/* รูปแทนเมนูที่ยังไม่มีรูปจริง: ไอคอนตามหมวด กลางการ์ด */
.menu-ph { display: grid; place-items: center; color: var(--ui-navy); }
.menu-ph .i { width: 56px; height: 56px; --i-duo: var(--ui-yellow); --i-duo-op: .9; }

/* ==== FOH: จัดหน้าร้านให้สมมาตร — pos · kiosk · table · kds · display ====
   layout / ระยะ / ขนาดเท่านั้น (สีใช้โทเคนเดิม ไม่แตะ JS) ; อยู่ท้ายไฟล์ + selector มี data-page จึงชนะ <style> ในหน้า
   หลัก: ปุ่ม/ชิปในแถบหัวสูง 40px (ปุ่มแตะบนตู้/ลูกค้า = --h-control) · ช่องห่าง --sp-* · ราคาบนการ์ด --fs-lg · ยอดรวม --fs-2xl
   จอแคบ: แถบหัวไม่ตัดบรรทัด → เลื่อนแนวนอน ; เนื้อหาไม่ล้นจอ (grid ใช้ minmax(0,1fr)) ; modal/sheet กลางจอ (มือถือ ≤600 = bottom sheet) */

/* ---- ร่วมทุกหน้า: กล่องล็อกอิน ระยะบน=ล่าง (ข้อความ error ว่าง = ไม่กินที่) ---- */
body:is([data-page="pos"], [data-page="kiosk"], [data-page="kds"], [data-page="display"]) #login .box { padding: var(--sp-8); }
body:is([data-page="pos"], [data-page="kiosk"], [data-page="kds"], [data-page="display"]) #loginErr { margin-top: var(--sp-3); min-height: 0; }
body:is([data-page="pos"], [data-page="kiosk"], [data-page="kds"], [data-page="display"]) :is(#loginErr, #pairSlot):empty { display: none; }

/* ---- POS ---- */
body[data-page="pos"] .app { grid-template-columns: minmax(0, 1fr); }
body[data-page="pos"] .topbar { gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); min-width: 0; }
body[data-page="pos"] .topbar .brand { margin-right: var(--sp-2); }
body[data-page="pos"] .topbar :is(.chip, .icon-btn, .hub-link) { height: 40px; }
body[data-page="pos"] .topbar .chip { padding: 0 var(--sp-3); font-size: var(--fs-sm); }
body[data-page="pos"] .topbar :is(.icon-btn, .hub-link) { width: 40px; border-radius: var(--r-md); }
body[data-page="pos"] .menu { padding: var(--sp-5); }
body[data-page="pos"] .tabs { gap: var(--sp-2); margin-bottom: var(--sp-4); }
body[data-page="pos"] :is(.tab, .half-toggle) { height: 40px; display: inline-flex; align-items: center; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
body[data-page="pos"] .grid { gap: var(--sp-3); }
body[data-page="pos"] .card .body { padding: var(--sp-3); }
body[data-page="pos"] .card .body h3 { font-size: var(--fs-base); }
body[data-page="pos"] .card .body .meta { font-size: var(--fs-xs); }
body[data-page="pos"] .card .body .price { font-size: var(--fs-lg); margin-top: var(--sp-1); }
body[data-page="pos"] .t-head { padding: var(--sp-4) var(--sp-5); align-items: center; }
body[data-page="pos"] .otype { gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
body[data-page="pos"] .ot { min-height: 40px; }
body[data-page="pos"] .table-row { padding: 0 var(--sp-4) var(--sp-3); }
body[data-page="pos"] .table-row input { min-height: 40px; }
body[data-page="pos"] .t-foot { padding: var(--sp-4) var(--sp-5); }
body[data-page="pos"] .totals .grand .amt { font-size: var(--fs-2xl); }
body[data-page="pos"] .act { gap: var(--sp-2); }
/* ปุ่มคู่ในหน้าต่าง: จำนวน (−/+) สูงเท่าปุ่มเพิ่มลงบิล */
body:is([data-page="pos"], [data-page="kiosk"]) .m-foot { align-items: stretch; gap: var(--sp-3); }
body:is([data-page="pos"], [data-page="kiosk"]) .m-foot .qty { align-items: stretch; }
body:is([data-page="pos"], [data-page="kiosk"]) .m-foot .qty button { width: var(--h-control); height: auto; min-height: var(--h-control); }
body:is([data-page="pos"], [data-page="kiosk"]) .m-foot .qty .n { display: grid; place-items: center; min-width: var(--h-control); }
/* หน้าต่าง/ชีต: แท็บเล็ต/จอใหญ่อยู่กลางจอ ระยะในเท่ากันทุกด้าน (มือถือ = bottom sheet ดู @media 600px) */
body:is([data-page="pos"], [data-page="kiosk"]) .scrim { align-items: center; padding: var(--sp-4); }
body:is([data-page="pos"], [data-page="kiosk"]) .sheet {
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  max-height: calc(100dvh - var(--sp-8));
  overflow: auto;
}
body[data-page="pos"] :is(.seg, .cash-row, .choice-actions) { gap: var(--sp-2); }
body[data-page="pos"] .cash-row { align-items: stretch; }
body[data-page="pos"] .cash-row .btn { white-space: nowrap; }
body[data-page="pos"] .sheet > .btn { width: 100%; }   /* ปุ่มปิด/กลับท้ายหน้าต่าง กว้างเต็มเหมือนกันทุกหน้าต่าง */
/* รายการโต๊ะ (QR โต๊ะ): ข้อมูลโต๊ะแถวบน ปุ่มไอคอนขนาดเท่ากันแถวล่าง (เดิมปุ่ม 7 ตัวบีบข้อความเหลือคอลัมน์แคบ) */
body[data-page="pos"] #tableList .urow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) var(--sp-1); }
body[data-page="pos"] #tableList .urow > div:last-child { gap: var(--sp-2) !important; justify-content: flex-start !important; }
body[data-page="pos"] #tableList .uprint {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-md);
}
@media (max-width: 1100px) {
  /* แท็บเล็ต: แถบหัวไม่ตัดคำ (เดิม 768px ชื่อร้านแตก 4 บรรทัดและดันทั้งหน้าให้เลื่อนข้าง) — เกินจอ = เลื่อนแนวนอนในแถบ */
  body[data-page="pos"] .topbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body[data-page="pos"] .topbar::-webkit-scrollbar { display: none; }
  body[data-page="pos"] .topbar > :not(.spacer) { flex: none; }
  body[data-page="pos"] .brand :is(h1, .sub) { white-space: nowrap; }
  /* ปุ่มออกจากระบบเลื่อนไปกับแถบ (เดิมติดขอบขวาแล้วทับชิปอื่น) — แถบเลื่อนได้ จึงเข้าถึงได้เสมอ */
  body[data-page="pos"] .topbar .icon-btn { position: static; box-shadow: none; }
}
@media (max-width: 600px) {
  body[data-page="pos"] .topbar { padding: var(--sp-2) var(--sp-3); }
  body[data-page="pos"] .menu { padding: var(--sp-4) var(--sp-4) 110px; }
  body[data-page="pos"] .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--sp-4)) var(--sp-4); padding: 0 var(--sp-4) var(--sp-1); scrollbar-width: none; }
  body[data-page="pos"] :is(.tab, .half-toggle) { flex: none; white-space: nowrap; }
  body[data-page="pos"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  /* มือถือ: bottom sheet (นิ้วโป้งเอื้อมถึง) — ชิดล่างเต็มกว้าง มุมบนโค้งเท่ากัน padding ซ้าย=ขวา */
  body:is([data-page="pos"], [data-page="kiosk"]) .scrim { align-items: flex-end; padding: 0; }
  body:is([data-page="pos"], [data-page="kiosk"]) .sheet {
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
    max-height: 88dvh;
  }
  /* จอแคบ: จำนวน (−/+) เต็มแถว แล้วปุ่มเพิ่มเต็มแถวใต้ลงมา (เดิมปุ่มเพิ่มตัดคำ 2 บรรทัด) */
  body:is([data-page="pos"], [data-page="kiosk"]) .m-foot { display: grid; grid-template-columns: minmax(0, 1fr); }
  body:is([data-page="pos"], [data-page="kiosk"]) .m-foot .qty { display: grid; grid-template-columns: 1fr auto 1fr; }
  body:is([data-page="pos"], [data-page="kiosk"]) .m-foot .qty button { width: auto; }
  body:is([data-page="pos"], [data-page="kiosk"]) .m-foot .btn { white-space: nowrap; }
}

/* ---- Kiosk ---- */
body[data-page="kiosk"] .app { grid-template-columns: minmax(0, 1fr); }
body[data-page="kiosk"] .top { gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); min-width: 0; }
body[data-page="kiosk"] .langbar { gap: var(--sp-2); }
body[data-page="kiosk"] :is(.langbar button, .top .logout) { height: var(--h-control); border-radius: var(--r-md); }
body[data-page="kiosk"] .langbar button { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-4); }
body[data-page="kiosk"] .top .logout { width: var(--h-control); }
body[data-page="kiosk"] .menu { padding: var(--sp-5) var(--sp-6) var(--sp-8); }
body[data-page="kiosk"] .combo-row { gap: var(--sp-4); padding: var(--sp-3) var(--sp-1) var(--sp-4); }   /* ป้าย "ประหยัด" ลอยเหนือการ์ด -10px เดิมโดนตัด */
body[data-page="kiosk"] .tabs { gap: var(--sp-2); margin-bottom: var(--sp-4); }
body[data-page="kiosk"] .tab { height: var(--h-control); display: inline-flex; align-items: center; padding: 0 var(--sp-5); font-size: var(--fs-base); }
body[data-page="kiosk"] .grid { gap: var(--sp-4); }
body[data-page="kiosk"] .card .body { padding: var(--sp-4); }
body[data-page="kiosk"] .card .body h3 { font-size: var(--fs-md); }
body[data-page="kiosk"] .card .body .meta { font-size: var(--fs-xs); }
body[data-page="kiosk"] .card .body .price { font-size: var(--fs-lg); margin-top: var(--sp-1); }
body[data-page="kiosk"] .c-head { padding: var(--sp-4) var(--sp-5); align-items: center; }
body[data-page="kiosk"] .c-foot { padding: var(--sp-4) var(--sp-5); }
body[data-page="kiosk"] .tot .amt { font-size: var(--fs-2xl); }
body[data-page="kiosk"] .pay-choice { gap: var(--sp-4); }
body[data-page="kiosk"] #welcome .wlangs button { align-items: center; }
body[data-page="kiosk"] #welcome .wlangs button .flag { line-height: 1; min-width: 44px; }
@media (max-width: 820px) {
  body[data-page="kiosk"] .main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  /* มือถือ/แท็บเล็ตเล็ก: เดิมไม่มีกฎจอแคบ → แถบหัวดันเลย์เอาต์กว้าง 512px ทั้งหน้าเลื่อนข้าง */
  body[data-page="kiosk"] .top { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--sp-3) var(--sp-4); }
  body[data-page="kiosk"] .top::-webkit-scrollbar { display: none; }
  body[data-page="kiosk"] .top > :not(.spacer) { flex: none; }
  body[data-page="kiosk"] .top .sub .subtxt { display: none; }   /* ชื่อสาขาใต้แบรนด์ยังอยู่ */
  body[data-page="kiosk"] .top h1 { font-size: var(--fs-md); white-space: nowrap; }
  body[data-page="kiosk"] .top .logo { font-size: 24px; }
  body[data-page="kiosk"] .menu { padding: var(--sp-4) var(--sp-4) 100px; }
  body[data-page="kiosk"] .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--sp-4)) var(--sp-4); padding: 0 var(--sp-4) var(--sp-1); scrollbar-width: none; }
  body[data-page="kiosk"] .tab { flex: none; white-space: nowrap; }
  body[data-page="kiosk"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  body[data-page="kiosk"] .card { height: 184px; }
  body[data-page="kiosk"] .card.no-img .bg { padding-top: var(--sp-4); }
  body[data-page="kiosk"] .card.no-img .bg .menu-ph .i { width: 56px; height: 56px; }
  body[data-page="kiosk"] .card .body { padding: var(--sp-3); }
  body[data-page="kiosk"] .combo-card { width: 240px; }
}

/* ---- ลูกค้าสั่งที่โต๊ะ (QR) ---- */
/* แถบหัวชิดแนวเดียวกับคอลัมน์เนื้อหา 560px (จอกว้าง: เดิมโลโก้ชิดขอบซ้ายจอ แต่เมนูอยู่กลาง) */
body[data-page="table"] header {
  gap: var(--sp-3);
  padding: var(--sp-3) max(var(--sp-4), calc((100% - 560px) / 2 + var(--sp-4)));
}
body[data-page="table"] header :is(.tbl, .billbtn) {
  height: 36px;
  min-width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-4);
  border-radius: 999px;
}
body[data-page="table"] header :is(.tbl, .billbtn) { gap: var(--sp-1); }   /* inline-flex ตัดช่องว่างระหว่าง "โต๊ะ" กับเลข */
body[data-page="table"] .langbar { gap: var(--sp-2); padding: 0 var(--sp-4); margin-top: var(--sp-3); }
body[data-page="table"] .langbar button { height: 36px; padding: 0 var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-1); }
body[data-page="table"] .wrap { padding: var(--sp-4) var(--sp-4) 0; }
body[data-page="table"] .cat { margin: var(--sp-4) var(--sp-1) var(--sp-2); font-size: var(--fs-base); }
body[data-page="table"] .mgrid { gap: var(--sp-3); }
body[data-page="table"] .mcard .body { padding: var(--sp-3); }
body[data-page="table"] .mcard .body .nm { font-size: var(--fs-base); }
body[data-page="table"] .mcard .body .sub { font-size: var(--fs-xs); }
body[data-page="table"] .mcard .body .pr { font-size: var(--fs-lg); margin-top: var(--sp-1); }
body[data-page="table"] .mcard .ctrl { top: var(--sp-3); right: var(--sp-3); }
body[data-page="table"] .loy { padding: var(--sp-3) var(--sp-4); }
body[data-page="table"] .loy .row { gap: var(--sp-2); }
body[data-page="table"] .loy :is(input, .row button) { min-height: var(--h-control); }
body[data-page="table"] .bar { padding: var(--sp-3) var(--sp-4); }
body[data-page="table"] .bar .in { gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); }
body[data-page="table"] .bar .tot { font-size: var(--fs-2xl); }
body[data-page="table"] .bar .go { min-height: var(--h-control); padding: 0 var(--sp-6); }

/* ---- จอครัว (KDS) ---- */
body[data-page="kds"] .bar { gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); }
body[data-page="kds"] .bar .stations { gap: var(--sp-2); margin-left: 0; }
body[data-page="kds"] .bar :is(.stn, .barbtn, .hub-link, .chip) { height: 40px; min-height: 40px; }
body[data-page="kds"] .bar :is(.stn, .chip) { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-4); }
body[data-page="kds"] .bar :is(.barbtn, .hub-link) { width: 40px; border-radius: var(--r-md); }
body[data-page="kds"] .board { gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
body[data-page="kds"] .thead { padding: var(--sp-3) var(--sp-4); }
body[data-page="kds"] .items { padding: 0 var(--sp-4) var(--sp-3); }
body[data-page="kds"] .bump { min-height: 48px; padding: 0 var(--sp-4); }
@media (max-width: 760px) {
  /* เดิมแถบหัวตัด 3 บรรทัดไม่เป็นแนว → บรรทัดเดียว เลื่อนแนวนอนในแถบ */
  body[data-page="kds"] .bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--sp-2) var(--sp-3); }
  body[data-page="kds"] .bar::-webkit-scrollbar { display: none; }
  body[data-page="kds"] .bar h1 span { display: none; }
  body[data-page="kds"] .board { padding: var(--sp-3); gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
}

/* ---- จอเรียกคิว (display) ---- */
body[data-page="display"] .wrap { grid-template-columns: minmax(0, 1fr); }   /* แถบหัวไม่ดันความกว้างทั้งหน้า (มือถือเคยกว้าง 409px) */
body[data-page="display"] header { gap: var(--sp-4); padding: var(--sp-5) var(--sp-8); }
body[data-page="display"] .hbtn { width: var(--h-control); height: var(--h-control); border-radius: var(--r-md); }
body[data-page="display"] .col { padding: var(--sp-6) var(--sp-8); }
/* หัวคอลัมน์: "พร้อมรับแล้ว" ใหญ่กว่า (ลูกค้ามองหาเลขพร้อมรับ) แต่แถวหัวสูงเท่ากัน -> กริดเลขเริ่มแนวเดียวกัน ; ตัวนับรูปทรงเดียวกัน */
body[data-page="display"] .col h2 { font-size: var(--fs-xl); min-height: 44px; margin-bottom: var(--sp-5); gap: var(--sp-3); }
body[data-page="display"] .col.ready h2 { font-size: var(--fs-2xl); }
body[data-page="display"] .col h2 .ic { width: 16px; height: 16px; }
body[data-page="display"] .col h2 .n {
  min-width: 44px;
  height: 34px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-md);
}
body[data-page="display"] .col.prep h2 .n { background: var(--ui-amber-soft); color: var(--ui-amber); border: 1px solid var(--ui-line); }
body[data-page="display"] .prep .nums { gap: var(--sp-4); }
body[data-page="display"] .ready .nums { gap: var(--sp-5); }
body[data-page="display"] .foot { gap: var(--sp-3); padding: var(--sp-3) var(--sp-8); }
body[data-page="display"] .live { white-space: nowrap; flex: none; }
body[data-page="display"] .ready .num .bell { opacity: .8; }   /* กระดิ่งมุมการ์ดพร้อมรับ (เดิม ::before อีโมจิ) */
@media (max-width: 640px) {
  /* มือถือ: หัวบรรทัดเดียว (เดิมนาฬิกาตกลงบรรทัดสอง) ; สองคอลัมน์แบ่งครึ่งจอเท่ากัน เห็นทั้ง "กำลังทำ" และ "พร้อมรับ" */
  body[data-page="display"] header { flex-wrap: nowrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
  body[data-page="display"] header > div:not(.spacer):not(.clock) { min-width: 0; }
  body[data-page="display"] header h1 { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-page="display"] header .tag .tagtxt { display: none; }   /* ชื่อสาขาใต้แบรนด์ยังอยู่ */
  body[data-page="display"] header .logo { font-size: 26px; }
  body[data-page="display"] .clock { font-size: var(--fs-md); }   /* แบรนด์ PIZZA DONG ต้องไม่โดนตัด */
  body[data-page="display"] .hbtn { width: 36px; height: 36px; flex: none; }
  body[data-page="display"] .board { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  body[data-page="display"] .col { padding: var(--sp-4); }
  body[data-page="display"] .col.prep { border-right: none; border-bottom: 1px solid var(--line); }
  body[data-page="display"] .col h2 { font-size: var(--fs-lg); min-height: 36px; margin-bottom: var(--sp-3); }
  body[data-page="display"] .col.ready h2 { font-size: var(--fs-xl); }
  body[data-page="display"] .prep .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  body[data-page="display"] .prep .num { padding: var(--sp-3) var(--sp-2); }
  body[data-page="display"] .prep .num .no { font-size: var(--fs-xl); }
  body[data-page="display"] .ready .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  body[data-page="display"] .ready .num { padding: var(--sp-5) var(--sp-3); }
  body[data-page="display"] .ready .num .no { font-size: 56px; }
  body[data-page="display"] .foot { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
}

/* ======================================================================
   BOH — หน้าหลังร้าน (apps/manage/recipe/stock/supply/hq/delivery/print-station/dashboard)
   จัดหน้าให้สมมาตร: เนื้อหากว้างไม่เกิน --page-max อยู่กลางจอ ขอบซ้าย=ขวา (--boh-gutter)
   แถบหัวจัดแนวเดียวกับเนื้อหา · ปุ่มสูง --h-control · ≤1024px แถบหัว 2 แถว (แบรนด์+ไอคอน / ตัวเลือกของหน้า)
   ใช้เฉพาะ <body class="boh"> — ไม่เปลี่ยนสี/JS
   หมายเหตุ specificity: กฎแถบหัวใช้ :is(#topbar, header.top) (นับเป็น id) ทุกที่ ให้กฎจอแคบที่ตามมาทับได้ตามลำดับ
   ====================================================================== */
body.boh { --boh-gutter: var(--sp-6); --boh-edge: max(var(--boh-gutter), calc((100% - var(--page-max)) / 2 + var(--boh-gutter))); }
@media (max-width: 760px) { body.boh { --boh-gutter: var(--sp-4); } }

/* ---- 1. เนื้อหาหลัก: กลางจอ กว้างไม่เกิน --page-max ---- */
body.boh > :is(main, nav.mtabs, nav.tabs, footer),
body.boh main.shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--boh-gutter);
}
body.boh > main { padding-block: var(--sp-5) var(--sp-8); }
body.boh > :is(nav.mtabs, nav.tabs) { margin-top: var(--sp-4); }
body.boh > nav.mtabs + main, body.boh > nav.tabs ~ main { padding-top: var(--sp-4); }
body.boh main.shell { padding-block: var(--sp-4) var(--sp-8); }

/* ---- 2. แถบหัว: แบรนด์ซ้าย · ปุ่มขวา · แนวเดียวกับเนื้อหา ---- */
body.boh > header#topbar {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  min-height: calc(var(--h-control) + 2 * var(--sp-3));
  padding: var(--sp-3) var(--boh-edge);
}
body.boh :is(#topbar, header.top) { row-gap: var(--sp-2); }
body.boh main.shell > header.top { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); }
body.boh :is(#topbar, header.top) h1 { font-size: var(--fs-md); line-height: 1.25; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.boh :is(#topbar, header.top) :is(.sub, .brand p) {
  font-size: var(--fs-xs); line-height: 1.4; margin: 2px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.boh :is(#topbar, header.top) :is(div:has(> h1), .brand, .brand > div) { min-width: 0; }
body.boh #topbar > :first-child { flex: none; }
body.boh :is(#topbar, header.top) .who { font-size: var(--fs-sm); white-space: nowrap; }
/* ปุ่ม/ลิงก์/ช่องเลือกในแถบหัว: สูงเท่ากัน ข้อความบรรทัดเดียว (เดิม "ตั้ง ค่า"/"รีเฟรช" แตก 2 บรรทัด) */
body.boh :is(#topbar, header.top) :is(button, a.nav, a.btn, .hub-link, select, input:not([type=checkbox], [type=radio])) {
  box-sizing: border-box;
  height: var(--h-control);
  min-height: var(--h-control);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
body.boh :is(#topbar, header.top) :is(button, a.nav, a.btn, .hub-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  padding: 0 var(--sp-3); line-height: 1; flex: none; text-decoration: none;
}
body.boh :is(#topbar, header.top) a.nav { border-width: 1px; border-style: solid; }
body.boh :is(#topbar, header.top) select { padding: 0 var(--sp-3); }
body.boh :is(#topbar, header.top) :is(.tools, .toolbar) { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* ศูนย์รวม / ออก = ปุ่มไอคอนสี่เหลี่ยมเท่ากันทุกหน้า (ชื่อปุ่มอยู่ใน title/aria-label) */
body.boh :is(#topbar, header.top) :is(.hub-link, .iconbtn, a.nav[href="/apps"], button[onclick^="logout"]) {
  width: var(--h-control); padding: 0;
}
body.boh :is(#topbar, header.top) .hub-link { font-size: var(--fs-lg); }
body.boh :is(#topbar, header.top) :is(.hub-link, .iconbtn, a.nav[href="/apps"], button[onclick^="logout"]) .i { width: 1.25em; height: 1.25em; }
/* ลำดับเดียวกันทุกหน้า: โลโก้ · ชื่อหน้า · ศูนย์รวม | (ดันขวา) | ตัวเลือกของหน้า · ชื่อผู้ใช้ · ออก */
body.boh #topbar > * { order: 3; }
body.boh #topbar > :is(:first-child, div:has(> h1)) { order: 0; }
body.boh #topbar > :is(.hub-link, a.nav[href="/apps"]) { order: 1; }
body.boh #topbar > .spacer { order: 2; flex: 1 1 0; }
body.boh #topbar > .who { order: 4; }
body.boh #topbar > button[onclick^="logout"] { order: 5; }
/* ตัวเลือกสาขาแบบกล่อง (manage): สูงเท่าปุ่มอื่น */
body.boh :is(#topbar, header.top) .branch-picker { box-sizing: border-box; height: var(--h-control); padding-block: 0; border-radius: var(--r-sm); }
body.boh :is(#topbar, header.top) .branch-picker select { height: calc(var(--h-control) - 10px); min-height: 0; }
/* hq: ปุ่ม ดู / CSV กว้างตามเนื้อหา ไม่แคบกว่าปุ่มไอคอน */
body.boh[data-page="hq"] :is(#topbar, header.top) > button:not([onclick^="logout"]) { min-width: var(--h-control); padding: 0 var(--sp-4); }

/* ≤1024: แถว 1 = โลโก้ · ชื่อหน้า (ยืด, ตัด …) · ศูนย์รวม · ออก ; แถว 2 (ตั้งใจ) = ตัวเลือกของหน้า เต็มความกว้าง */
@media (max-width: 1024px) {
  body.boh :is(#topbar, header.top) :is(div:has(> h1), .brand) { flex: 1 1 0; width: auto; }
  body.boh #topbar > button[onclick^="logout"] { order: 1; }
  body.boh #topbar > .spacer { flex: 0 0 100%; height: 0; }
  body.boh #topbar > .who { display: none; }
  body.boh #topbar > :is(select, .branch-picker) { flex: 1 1 0; min-width: 0; }
  body.boh :is(#topbar, header.top) > :is(a.nav, button):not([href="/apps"], [onclick^="logout"]) { flex: 1 1 auto; }
  body.boh :is(#topbar, header.top) .branch-picker select { flex: 1 1 auto; min-width: 0; }
  body.boh :is(#topbar, header.top) > input[type=date] { flex: 1 1 0; min-width: 0; }
  /* hq: ปุ่ม ดู / CSV กว้างตามเนื้อหา — ช่องวันที่ยืดแทน (เดิมปุ่ม "ดู" ถูกยืดกว้างเท่าช่องวันที่) ; มือถือ ≤760 ยังเป็นแถวปุ่มครึ่งๆ */
  body.boh[data-page="hq"] :is(#topbar, header.top) > button:not([onclick^="logout"]) { flex: none; }
  /* dashboard: ปุ่มรีเฟรช = ปุ่มไอคอนแถวแรก */
  body.boh[data-page="dashboard"] :is(#topbar, header.top) > button[onclick^="loadAll"] { order: 1; flex: none; width: var(--h-control); padding: 0; }
  /* supply/delivery: แถว 1 แบรนด์ + ศูนย์รวม ; แถว 2 สาขา ; แถว 3 ปุ่มเครื่องมือกริดเท่ากัน */
  body.boh main.shell > header.top { position: static; flex-wrap: wrap; }
  body.boh main.shell > header.top > .grow { display: block; flex: 0 0 100%; height: 0; order: 3; }   /* ขึ้นแถวใหม่หลังแบรนด์+ศูนย์รวม */
  body.boh main.shell > header.top > select { flex: 1 1 0; min-width: 0; order: 4; }
  body.boh :is(#topbar, header.top) :is(.tools, .toolbar) { order: 5; flex: none; }
}
@media (max-width: 760px) {
  /* แถว 2 สาขาเต็มแถว ; แถว 3 ปุ่มเครื่องมือกริด 2 คอลัมน์เท่ากัน */
  body.boh main.shell > header.top > select { flex: 1 1 100%; width: 100%; }
  body.boh :is(#topbar, header.top) :is(.tools, .toolbar) { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  body.boh :is(#topbar, header.top) :is(.tools, .toolbar) > :is(*, button[onclick^="logout"]) { width: 100%; }
  /* hq: วันที่ 2 ช่องแถวเดียว · ปุ่มดู/CSV แถวถัดไปครึ่งๆ */
  body.boh :is(#topbar, header.top) > input[type=date] { flex: 1 1 calc(50% - 3 * var(--sp-3)); }
  body.boh[data-page="hq"] :is(#topbar, header.top) > button:not([onclick^="logout"]) { flex: 1 1 40%; }
  body.boh :is(#topbar, header.top) > .branch-picker { padding-inline: var(--sp-1); }
  /* ลิงก์/ปุ่มที่มี <span class="lbl"> ในแถบหัว: จอแคบเหลือแต่ไอคอน (เช่น manage: สูตร/วัตถุดิบ) ให้ตัวเลือกสาขาได้ที่เต็ม */
  body.boh :is(#topbar, header.top) > :is(a.nav, a.btn, button):not([href="/apps"], [onclick^="logout"]):has(> .lbl) { flex: none; width: var(--h-control); padding: 0; }
  body.boh :is(#topbar, header.top) > :is(a, button) > .lbl { display: none; }
}

/* ---- แถบแท็บ: จอแคบเป็นแถวเดียวเลื่อนข้าง (เหมือน stock/supply/delivery) แทนห่อหลายแถวยาวไม่เท่ากัน ---- */
@media (max-width: 760px) {
  body.boh > :is(nav.mtabs, nav.tabs), body.boh[data-page="hq"] .tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  body.boh > :is(nav.mtabs, nav.tabs)::-webkit-scrollbar, body.boh[data-page="hq"] .tabs::-webkit-scrollbar { display: none; }
  body.boh :is(nav.mtabs, nav.tabs, .tabs) > button { flex: none; white-space: nowrap; }
  body.boh[data-page="hq"] .tabs > .grow { display: none; }
}

/* ---- 3. การ์ด KPI: คอลัมน์เท่ากัน การ์ดสูงเท่ากันในแถว ตัวเลขชิดแนวเดียวกัน ---- */
body.boh .kpis { gap: var(--sp-3); align-items: stretch; }
body.boh .kpis > .kpi { margin: 0; }   /* stock: .exp (บรรทัดหมดอายุ) มี margin-top ทำให้การ์ดใกล้หมดอายุเยื้องลง */
body.boh .kpi { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: var(--r-md); }
/* 5 การ์ด (supply/delivery): แถวเดียว 5 คอลัมน์เท่ากันจนถึงแท็บเล็ต (เดิม 3+2 เหลือช่องว่าง) */
@media (min-width: 761px) { body.boh .kpis:has(> .kpi:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  body.boh .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  body.boh .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- ตาราง: ตัวเลขชิดขวา หัวคอลัมน์ตรงกับข้อมูล ---- */
body.boh :is(th, td):is(.n, .num) { text-align: right; }
body.boh :is(td, th).num { box-shadow: none; }   /* .num ในตารางไม่ใช่การ์ด (ui.css ให้เงาการ์ดกับ .num) */
/* td ตัวเลข (.num/.n/.r) ชิดขวา -> หัวคอลัมน์เดียวกันชิดขวาตาม (เดิมหัวชิดซ้าย ข้อมูลชิดขวา) */
body.boh table:has(td:nth-child(1):is(.num, .n, .r)) th:nth-child(1),
body.boh table:has(td:nth-child(2):is(.num, .n, .r)) th:nth-child(2),
body.boh table:has(td:nth-child(3):is(.num, .n, .r)) th:nth-child(3),
body.boh table:has(td:nth-child(4):is(.num, .n, .r)) th:nth-child(4),
body.boh table:has(td:nth-child(5):is(.num, .n, .r)) th:nth-child(5),
body.boh table:has(td:nth-child(6):is(.num, .n, .r)) th:nth-child(6),
body.boh table:has(td:nth-child(7):is(.num, .n, .r)) th:nth-child(7),
body.boh table:has(td:nth-child(8):is(.num, .n, .r)) th:nth-child(8),
body.boh table:has(td:nth-child(9):is(.num, .n, .r)) th:nth-child(9),
body.boh table:has(td:nth-child(10):is(.num, .n, .r)) th:nth-child(10),
body.boh table:has(td:nth-child(11):is(.num, .n, .r)) th:nth-child(11),
body.boh table:has(td:nth-child(12):is(.num, .n, .r)) th:nth-child(12) { text-align: right; }
/* recipe: หน่วยกว้างเท่ากัน ช่องปริมาณตรงคอลัมน์ ; จอแคบตารางสูตรเลื่อนข้างในการ์ด (เดิมช่องปริมาณ/ต้นทุนหลุดขอบขวา) */
body.boh[data-page="recipe"] table.lines .uom { display: inline-block; min-width: 2.4em; }
@media (max-width: 760px) {
  body.boh[data-page="recipe"] table.lines { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- 4. ฟอร์ม: ช่องกรอก/ตัวเลือก/ปุ่มในกริดสูงเท่ากัน (ไม่รวมช่องในตาราง) ---- */
body.boh :is(input:not([type=checkbox], [type=radio], [type=color], [type=range], [type=file], [type=hidden]), select):not(table *, #topbar *, header.top *) {
  box-sizing: border-box;
  min-height: var(--h-control);
}
body.boh .fld > button { box-sizing: border-box; min-height: var(--h-control); padding: 0 var(--sp-5); border-radius: var(--r-sm); }
/* ปุ่มเพิ่มในแถวกรอกข้อมูล (manage: เพิ่มเครื่อง/ค้นหาซัพ/เพิ่มโต๊ะ) สูงเท่าช่องกรอก */
body.boh :is(.dv-add, .sp-bar, .tq-add) > :is(button, .save) { box-sizing: border-box; min-height: var(--h-control); border-radius: var(--r-sm); }
/* ปุ่มท้ายฟอร์ม: ขนาดเท่ากัน วางขวาเหมือนกันทุกการ์ด (ยกเลิก · บันทึก) ; คำอธิบายอยู่ซ้าย */
body.boh .scard .foot, body.boh[data-page="recipe"] .foot { justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-3); }
body.boh .scard .foot > .hint { order: -1; margin-right: auto; flex: 1 1 220px; }
body.boh .scard .foot > button:not(.save) { order: 1; }
body.boh .scard .foot > button.save { order: 2; }
body.boh[data-page="recipe"] .foot .save { margin-left: 0; }
body.boh[data-page="recipe"] .foot .yield { margin-right: auto; }
body.boh :is(.scard .foot, [data-page="recipe"] .foot, [data-page="stock"] .foot, .modal-foot) > :is(button, a.btn) {
  box-sizing: border-box; min-height: var(--h-control); min-width: 112px;
  padding: 0 var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-sm);
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
@media (max-width: 760px) {
  body.boh :is(.scard .foot, [data-page="recipe"] .foot) > :is(.hint, .yield) { flex: 1 1 100%; }
  body.boh :is(.scard .foot, [data-page="recipe"] .foot, .modal-foot) > :is(button, a.btn) { flex: 1 1 0; min-width: 0; }
  /* dashboard: แผง POS กริด 2 คอลัมน์เท่ากัน */
  body.boh[data-page="dashboard"] .pos h2 { flex-wrap: wrap; row-gap: var(--sp-2); }
  body.boh[data-page="dashboard"] .pos .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; }
  body.boh[data-page="dashboard"] .pos .row > button { grid-column: 1 / -1; min-height: var(--h-control); }
  body.boh[data-page="dashboard"] .pos .row :is(select, input) { width: 100% !important; }   /* ทับ width ที่เขียนไว้ใน style ของช่อง */
}

/* ---- จุดสีสถานะ (แทนอีโมจิวงกลม/สี่เหลี่ยมสี) — สีเดิมของระบบ ---- */
body.boh .dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: currentColor; vertical-align: .08em; flex: none; }
body.boh .dot.ok { background: var(--ui-green); }
body.boh .dot.bad { background: var(--ui-red); }
body.boh .dot.warn { background: var(--ui-amber); }
/* toast มีไอคอนนำหน้า (ok = check-circle, bad = warning) */
body.boh #toast { display: inline-flex; align-items: center; gap: var(--sp-2); }
body.boh #toast .i { --i-duo: currentColor; --i-duo-op: .3; }

/* ---- toast ตอนซ่อน: เดิมโผล่ขอบออกมาเป็นก้อนเล็กๆ กลางจอ — ซ่อนให้สนิท (ตอนโชว์เหมือนเดิม) ---- */
body.boh #toast:not(.show) { opacity: 0; pointer-events: none; }

/* ---- FOH: แบรนด์มาร์กร้าน — ทุกหน้าร้านใช้แบบเดียวกันเสมอ (ไม่แสดง logoEmoji จากตั้งค่าสาขาแล้ว)
   ไอคอนพิซซ่าเส้นขาว เงาเหลือง บนสี่เหลี่ยมมนพื้นน้ำเงิน ; ขนาดตามแถบหัวของแต่ละหน้า ---- */
body[data-page] .logo.brandmark,
body[data-page] :is(#login, #welcome) .brandmark {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: inline-grid;
  place-items: center;
  flex: none;
  background: var(--ui-navy);
  color: #fff;
  font-size: 0;
  transform: none;
  box-shadow: 0 6px 14px rgba(20, 41, 92, .18);
}
body[data-page] .brandmark svg.i { width: 64%; height: 64%; --i-duo: var(--ui-yellow); --i-duo-op: 1; }
body[data-page="pos"] .brand .logo.brandmark { width: 40px; height: 40px; }
body[data-page="display"] header .logo.brandmark { width: 48px; height: 48px; }
body[data-page] :is(#login, #welcome) .brandmark { width: 62px; height: 62px; border-radius: var(--r-lg); }
body[data-page="kiosk"] #welcome .wlogo.brandmark { width: 96px; height: 96px; border-radius: 28px; }
@media (max-width: 600px) {
  body[data-page="pos"] .brand .logo.brandmark,
  body[data-page="kiosk"] .top .logo.brandmark { width: 36px; height: 36px; border-radius: var(--r-sm); }
}
@media (max-width: 640px) {
  body[data-page="display"] header .logo.brandmark { width: 36px; height: 36px; border-radius: var(--r-sm); }
}