/* =====================================================================
   theme.css — โหลดต่อจาก premium.css
   1) ชุดสีที่เลือกได้ในตั้งค่าร้าน: html[data-color] (ค่าจาก THEMES ใน inc/bootstrap.php)
   2) เมนูแถบข้าง (≥1024px) ย่อเหลือไอคอนได้ (html.sb-mini) / ลิ้นชักบนจอเล็ก (html.sb-open)
   3) หน้าขายบนมือถือ/จอสัมผัส: แถบชำระเงินติดล่าง, ตะกร้าแบบการ์ด, ปุ่มใหญ่ขึ้น
   งานพิมพ์ไม่ได้รับผล (ทุกอย่างอยู่ใน @media screen)
   ===================================================================== */

/* ---------- 1) ชุดสี ----------
   --head-a/b  พื้นแถบเมนู + กล่องยอดรวม     --accent  เส้นตกแต่ง/เมนูที่เลือก
   --brand/-2  ปุ่มหลัก (ไล่สี)                 --total   ตัวเลขยอดรวมบนพื้นเข้ม
   --glow      แสงเรืองมุมแถบเมนู              --chip-on สีไอคอน/ตัวอักษรเมนูที่เลือก */
@media screen {
  :root, html[data-color="midnight"] {
    --head-a:#101c36; --head-b:#193d50; --accent:#d4b479; --chip-on:#f7edda; --total:#f2dba7;
    --brand:#136f68; --brand-2:#238677; --brand-soft:#eaf4f1; --glow:rgba(79,179,166,.25);
  }
  html[data-color="mint"] {
    --head-a:#08493a; --head-b:#0d7a5f; --accent:#8fe3c3; --chip-on:#e9fff6; --total:#ffe08a;
    --brand:#0b7f63; --brand-2:#14a37f; --brand-soft:#ddf4eb; --glow:rgba(143,227,195,.28);
  }
  html[data-color="ocean"] {
    --head-a:#0d2350; --head-b:#1b4b8c; --accent:#8cc8ff; --chip-on:#eef6ff; --total:#ffe08a;
    --brand:#1d5fd1; --brand-2:#3b82f6; --brand-soft:#e7efff; --glow:rgba(140,200,255,.28);
  }
  html[data-color="sunset"] {
    --head-a:#4a1a0c; --head-b:#8a3110; --accent:#ffc078; --chip-on:#fff3e4; --total:#ffe3a3;
    --brand:#c2410c; --brand-2:#ea580c; --brand-soft:#fff0e6; --glow:rgba(255,192,120,.28);
  }
  html[data-color="berry"] {
    --head-a:#25124a; --head-b:#4f2580; --accent:#e0b3ff; --chip-on:#f8efff; --total:#ffd9f2;
    --brand:#7c3aed; --brand-2:#9b5cf6; --brand-soft:#f1eaff; --glow:rgba(224,179,255,.26);
  }
  html[data-color="ruby"] {
    --head-a:#3d0b14; --head-b:#7d1b2a; --accent:#e8c27a; --chip-on:#fff4e0; --total:#f5d79a;
    --brand:#b4232f; --brand-2:#d63a47; --brand-soft:#fdecee; --glow:rgba(232,194,122,.24);
  }
  :root { --focus:color-mix(in srgb,var(--brand) 15%,transparent); --brand-ink:#fff;
    /* IBM Plex Mono ไม่มีอักษรไทย: ให้ไทยที่ปนในช่องตัวเลขใช้ Prompt แทนฟอนต์ของเครื่อง */
    --mono:"IBM Plex Mono",Prompt,ui-monospace,Consolas,monospace; }
  /* การ์ดสรุป (ประวัติ/รายงาน) ใช้ Prompt ทั้งหมด ให้ตรงกับตารางและกราฟ ตัวเลขยังกว้างเท่ากันทุกหลัก */
  .stat b { font-family:var(--font); font-weight:600; font-variant-numeric:tabular-nums; }
  .chart text { font-family:var(--font); }
  .rp-month { display:inline-flex; gap:6px; }
  .rp-month[hidden] { display:none; }
}
/* โหมดมืด: ปุ่มหลักสว่างขึ้นให้อ่านออกบนพื้นเข้ม */
@media screen and (prefers-color-scheme:dark) {
  html:not([data-theme="light"])[data-color="midnight"] { --brand:#72c8b6; --brand-2:#8fd6c5; --brand-soft:#233d3b; --brand-ink:#0c2725; }
  html:not([data-theme="light"])[data-color="mint"]     { --brand:#3dd6a3; --brand-2:#6ee7bf; --brand-soft:#123a2e; --brand-ink:#03241a; }
  html:not([data-theme="light"])[data-color="ocean"]    { --brand:#7aa9ff; --brand-2:#a3c4ff; --brand-soft:#1b2c4d; --brand-ink:#081a3d; }
  html:not([data-theme="light"])[data-color="sunset"]   { --brand:#ff9b5e; --brand-2:#ffb98a; --brand-soft:#3a2216; --brand-ink:#2b0f02; }
  html:not([data-theme="light"])[data-color="berry"]    { --brand:#c4a1ff; --brand-2:#d8c2ff; --brand-soft:#2c2148; --brand-ink:#1e0f3a; }
  html:not([data-theme="light"])[data-color="ruby"]     { --brand:#ff8a95; --brand-2:#ffadb4; --brand-soft:#3d1a1f; --brand-ink:#2e070c; }
}

/* ใช้ตัวแปรแทนสีที่ premium.css ใส่ไว้ตายตัว */
@media screen {
  .btn.pri, #btnPay, .auth-login .auth-card .btn.pri {
    background:linear-gradient(115deg,var(--brand),var(--brand-2)); color:var(--brand-ink); border-color:transparent;
    box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 22%,transparent);
  }
  .btn.pri:hover, #btnPay:not(:disabled):hover { background:linear-gradient(115deg,var(--brand),var(--brand-2)); color:var(--brand-ink); filter:brightness(1.06); }
  .total-box {
    background:radial-gradient(circle at 100% 0,var(--glow),transparent 65%),linear-gradient(125deg,var(--head-a),var(--head-b));
    border-color:color-mix(in srgb,var(--accent) 30%,transparent); box-shadow:0 14px 30px color-mix(in srgb,var(--head-a) 22%,transparent);
  }
  .total-box .amt { color:var(--total); }
  .total-box::after { border-color:color-mix(in srgb,var(--accent) 14%,transparent);
    box-shadow:0 0 0 24px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 48px color-mix(in srgb,var(--accent) 3%,transparent); }
  .eyebrow>span { color:var(--accent); }
  .heading-dot { color:var(--brand); }
  body { background:radial-gradient(ellipse at 85% 0,color-mix(in srgb,var(--brand) 6%,transparent),transparent 45%),
                     radial-gradient(ellipse at 5% 65%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 45%),var(--bg); }
  body.auth-login, body.auth {
    background:radial-gradient(ellipse at 10% 30%,var(--glow),transparent 55%),
               radial-gradient(ellipse at 95% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 50%),
               linear-gradient(140deg,var(--head-a),var(--head-b));
  }
  .auth-intro>.eyebrow { color:var(--accent); }
  .auth-intro h2>span { color:color-mix(in srgb,var(--accent) 60%,#fff); }
  .auth-features span::before { background:var(--accent); }
  .auth-card, .auth-login .auth-card { border-top-color:var(--accent); }
  .role { color:var(--total); background:color-mix(in srgb,var(--total) 12%,transparent); }
  div.f { display:flex; flex-direction:column; gap:7px; font-size:12px; color:var(--muted); }
}

/* ---------- 2) เมนูแถบข้าง ---------- */
@media screen {
  .topbar, .side-back { display:none; }
  .nav-t { min-width:0; overflow:hidden; text-overflow:ellipsis; }

  #app>header {
    background:radial-gradient(ellipse at 0 -10%,var(--glow),transparent 55%),linear-gradient(170deg,var(--head-a),var(--head-b));
    border:0; box-shadow:none;
  }
  #app>header::after { display:none; }
  header .shop::before, .retail-mark {
    border-color:color-mix(in srgb,var(--accent) 40%,transparent);
    background:linear-gradient(var(--accent),var(--accent)) 10px 10px/6px 6px no-repeat,linear-gradient(var(--accent),var(--accent)) 21px 10px/6px 6px no-repeat,
               linear-gradient(var(--accent),var(--accent)) 10px 21px/6px 6px no-repeat,linear-gradient(var(--chip-on),var(--chip-on)) 21px 21px/6px 6px no-repeat,rgba(255,255,255,.035);
  }
  #nav button.on {
    color:var(--chip-on); border-color:color-mix(in srgb,var(--accent) 55%,transparent);
    background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 22%,transparent),rgba(255,255,255,.045));
  }
  #nav button.on::before { color:var(--accent); }
  #nav button:not(.on):hover { background:rgba(255,255,255,.07); opacity:1; }

  .userchip .who { display:flex; align-items:center; gap:10px; min-width:0; }
  .avatar { width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; font-weight:600; font-size:15px;
    background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--chip-on); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); }
  .who-txt { display:flex; flex-direction:column; min-width:0; line-height:1.35; }
  .who-txt b { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .who-txt .role { align-self:flex-start; margin-top:2px; }
  .who-act { display:flex; gap:6px; flex-wrap:wrap; }
  .sb-toggle { display:none; }
}

/* จอใหญ่: แถบข้างค้างอยู่ด้านซ้าย */
@media screen and (min-width:1024px) {
  #app { display:grid; grid-template-columns:var(--sbw,252px) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; min-height:100dvh; transition:grid-template-columns .2s ease; }
  html.sb-mini #app { --sbw:78px; }
  #app>header {
    grid-row:1 / 3; position:sticky; top:0; height:100dvh; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:14px; padding:22px 14px 14px;
    border-right:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  }
  #app>header::-webkit-scrollbar { display:none; }
  #app>main, #app>.app-foot { grid-column:2; }
  header .shop { margin:0; padding:0 6px; font-size:17px; white-space:normal; line-height:1.35; overflow-wrap:anywhere; }
  #nav { order:0; flex:1 1 auto; flex-basis:auto; flex-direction:column; flex-wrap:nowrap; gap:4px; padding:14px 0 0; border-top:1px solid rgba(255,255,255,.09); overflow:visible; }
  #nav button { width:100%; justify-content:flex-start; min-height:44px; padding:10px 12px; font-size:13.5px; white-space:nowrap; }
  #nav button::before { width:19px; height:19px; }
  #nav kbd { margin-left:auto; }
  .userchip { flex-direction:column; align-items:stretch; gap:10px; white-space:normal; padding:14px 6px 0; border-top:1px solid rgba(255,255,255,.09); font-size:12px; }
  .who-act button { padding:6px 10px; font-size:12px; }
  .sb-toggle {
    display:grid; place-items:center; align-self:flex-end; width:32px; height:32px; border-radius:10px; cursor:pointer;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--head-ink); transition:transform .2s;
  }
  .sb-toggle:hover { background:rgba(255,255,255,.12); }
  #app>main { padding-top:30px; }

  /* โหมดย่อ: เหลือไอคอน ชี้แล้วเห็นชื่อจาก title */
  html.sb-mini #app>header { padding-inline:12px; }
  html.sb-mini header .shop { justify-content:center; padding:0; }
  html.sb-mini #hdShop, html.sb-mini #nav .nav-t, html.sb-mini #nav kbd, html.sb-mini .who-txt, html.sb-mini .who-act { display:none; }
  html.sb-mini #nav button { justify-content:center; padding:10px 0; }
  html.sb-mini .userchip { align-items:center; padding-inline:0; }
  html.sb-mini .sb-toggle { align-self:center; transform:rotate(180deg); }
  html.sb-mini .hd-logo { height:34px; max-width:48px; }
}

/* จอเล็ก/แท็บเล็ต: แถบบน + เมนูลิ้นชัก */
@media screen and (max-width:1023.98px) {
  .topbar {
    display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:40;
    padding:10px max(14px,env(safe-area-inset-right,0px)) 10px max(10px,env(safe-area-inset-left,0px));
    padding-top:max(10px,env(safe-area-inset-top,0px));
    background:linear-gradient(110deg,var(--head-a),var(--head-b)); color:var(--head-ink);
    box-shadow:0 4px 18px color-mix(in srgb,var(--head-a) 25%,transparent); border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  }
  .icon-btn { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:inherit; cursor:pointer; }
  .tb-page { font-weight:600; font-size:16px; white-space:nowrap; }
  .tb-shop { margin-left:auto; font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

  #app>header {
    position:fixed; z-index:60; top:0; bottom:0; left:0; width:min(300px,86vw); overflow-y:auto;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:14px;
    padding:max(20px,env(safe-area-inset-top,0px)) 14px max(16px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
    transform:translateX(-105%); transition:transform .25s ease; box-shadow:none; visibility:hidden;
  }
  html.sb-open #app>header { transform:none; visibility:visible; box-shadow:20px 0 60px rgba(0,0,0,.3); }
  .side-back { display:block; position:fixed; inset:0; z-index:55; background:rgba(8,14,28,.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s; }
  html.sb-open .side-back { opacity:1; pointer-events:auto; }
  header .shop { width:auto; margin:0; padding:0 4px; font-size:17px; white-space:normal; }
  #nav { order:0; flex:1 1 auto; flex-basis:auto; flex-direction:column; flex-wrap:nowrap; overflow:visible; gap:4px; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.09); }
  #nav button { width:100%; justify-content:flex-start; min-height:48px; padding:10px 12px; font-size:14px; flex-shrink:0; }
  #nav button::before { width:19px; height:19px; }
  #nav kbd { display:none; }
  .userchip { flex-direction:column; align-items:stretch; width:auto; gap:10px; padding:14px 4px 0; border-top:1px solid rgba(255,255,255,.09); font-size:12px; white-space:normal; }
  .who-act button { padding:8px 12px; font-size:13px; }
  #app>main { padding-top:20px; }
  html.sb-open, html.sb-open body { overflow:hidden; }
}

/* ---------- 3) หน้าขาย / จอสัมผัส ---------- */
@media screen {
  .pos-bar { display:none; }
}
@media screen and (max-width:860px) {
  /* แถบชำระเงินติดล่าง แสดงเมื่อมีสินค้าในบิล */
  .pos-bar:not([hidden]) {
    display:flex; align-items:center; gap:8px; position:fixed; z-index:30; left:0; right:0; bottom:0;
    padding:10px max(12px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(10px);
    border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.08);
  }
  .pb-sum { display:flex; flex-direction:column; line-height:1.25; min-width:0; margin-right:auto; }
  .pb-sum span { font-size:12px; color:var(--muted); }
  .pb-sum b { font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.03em; }
  .pos-bar .btn { min-height:48px; padding-inline:16px; font-size:15px; }
  .pos-bar .btn.pri { padding-inline:22px; }
  body.has-bar #app>main { padding-bottom:96px; }
  body.has-bar .app-foot { padding-bottom:90px; }
  .workspace-heading { display:none; }
  .sum #btnPay, .sum #btnDN { display:none; }
}
@media screen and (max-width:640px) {
  /* ตะกร้าเป็นการ์ด: ชื่อ+ลบ / จำนวน ราคา รวม */
  .pos table thead { display:none; }
  #cartBody tr { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"name name del" "qty price tot"; gap:10px 12px; align-items:center;
    padding:14px 16px; border-bottom:1px solid var(--line); }
  #cartBody tr:last-child { border-bottom:0; }
  #cartBody td { border:0; padding:0; background:none!important; }
  #cartBody td:nth-child(1) { display:none; }
  #cartBody td:nth-child(2) { grid-area:name; font-size:14px; font-weight:500; }
  #cartBody td:nth-child(3) { grid-area:qty; text-align:left; }
  #cartBody td:nth-child(3) .small { display:none; }
  #cartBody td:nth-child(4) { grid-area:price; text-align:left; }
  #cartBody td:nth-child(4) input { width:100%!important; max-width:110px; }
  #cartBody td:nth-child(5) { grid-area:tot; font-size:16px; }
  #cartBody td:nth-child(6) { grid-area:del; }
  .cart-heading { padding:16px; }
  .sum .today-box { display:none; }
}
/* จอสัมผัส: เป้ากดใหญ่ขึ้น */
@media screen and (pointer:coarse) {
  .btn { min-height:44px; }
  .btn.sm { min-height:36px; padding-inline:12px; }
  .qty button { width:42px; height:42px; font-size:20px; }
  .qty input { width:58px; height:42px; font-size:16px; }
  .seg button { min-height:46px; }
  .results div { padding:14px 16px; }
  input, select, textarea { font-size:16px; } /* กัน iOS ซูมเมื่อแตะช่องกรอก */
}
/* หน้าต่างป๊อปอัปเต็มจอบนมือถือ */
@media screen and (max-width:520px) {
  .ov { padding:0; align-items:stretch; }
  .modal, .modal.wide { width:100%; min-height:100dvh; border-radius:0; border:0; padding:20px 16px max(20px,env(safe-area-inset-bottom,0px)); }
  .paybig { font-size:44px; }
  .rp-ctrl { gap:8px; }
  .rp-ctrl>.row { width:100%; }
  .rp-ctrl input, .rp-ctrl select { flex:1; }
  .stabs { margin-inline:-16px; padding-inline:16px; }
}

/* ---------- หน้าขาย: แท็บ + เลือกสินค้าแบบการ์ด ---------- */
@media screen {
  .pos-tabs { display:flex; gap:4px; padding:4px; background:var(--surface-soft,var(--bg)); border:1px solid var(--line); border-radius:14px; }
  .pos-tabs button { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; border:0; background:transparent; cursor:pointer;
    padding:11px 14px; border-radius:10px; font-weight:500; color:var(--muted); transition:background .15s,color .15s; }
  .pos-tabs button:hover { color:var(--ink); background:var(--brand-soft); }
  .pos-tabs button.on { background:var(--panel); color:var(--ink); font-weight:600; box-shadow:var(--shadow); }
  .pos-tabs .badge { min-width:22px; padding:0 7px; border-radius:99px; font-size:12px; line-height:20px; background:var(--line); color:var(--muted); font-family:var(--mono); }
  .pos-tabs .badge.has { background:var(--brand); color:var(--brand-ink); }

  .pg-panel { padding:16px; }
  .pg-tools { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
  .pg-cats { display:flex; gap:6px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .pg-cats::-webkit-scrollbar { display:none; }
  .pg-cats button { flex:none; border:1px solid var(--line); background:var(--panel); border-radius:99px; padding:7px 14px; cursor:pointer; font-size:13px; font-weight:500; white-space:nowrap; }
  .pg-cats button:hover { border-color:var(--brand); color:var(--brand); }
  .pg-cats button.on { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
  #pgQ { width:200px; flex:0 1 200px; }

  .pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(164px,1fr)); gap:12px; max-height:min(68vh,760px); overflow:auto; padding:2px; margin:-2px; }
  .pcard { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; transition:border-color .15s,box-shadow .15s,transform .15s; }
  .pcard:hover { border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); box-shadow:var(--shadow); }
  .pcard.is-out .pc-img img, .pcard.is-out .pc-ph { filter:grayscale(1); opacity:.55; }
  .pcard.pop { animation:pc-pop .35s ease; }
  @keyframes pc-pop { 40% { transform:scale(.96); box-shadow:0 0 0 3px var(--focus); } }
  .pc-img { position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; border:0; cursor:pointer; background:var(--surface-soft,var(--bg)); overflow:hidden; }
  .pc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
  .pc-img:hover img { transform:scale(1.04); }
  .pc-ph { width:100%; height:100%; display:grid; place-items:center; font-size:38px; font-weight:600;
    background:linear-gradient(135deg,hsl(var(--h) 70% 93%),hsl(calc(var(--h) + 40) 70% 86%)); color:hsl(var(--h) 45% 32%); }
  .pc-in { position:absolute; left:8px; top:8px; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600; background:var(--brand); color:var(--brand-ink); box-shadow:0 2px 8px rgba(0,0,0,.15); }
  .pc-in[hidden] { display:none; }
  .pc-st { position:absolute; right:8px; top:8px; }
  .pc-body { display:flex; flex-direction:column; gap:6px; padding:10px 10px 12px; flex:1; }
  .pc-name { font-size:13.5px; font-weight:500; line-height:1.4; min-height:2.8em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .pc-meta { display:flex; align-items:baseline; justify-content:space-between; gap:6px; flex-wrap:wrap; }
  .pc-meta .price { font-size:16px; }
  .pc-act { display:flex; gap:6px; margin-top:auto; }
  .pc-act .qty { flex:1; min-width:0; }
  .pc-act .qty button { width:30px; height:34px; flex:none; }
  .pc-act .qty input { width:100%; min-width:0; height:34px; padding:2px; }
  .pc-add { flex:none; padding-inline:10px; }
}
@media screen and (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) .pc-ph { background:linear-gradient(135deg,hsl(var(--h) 30% 22%),hsl(calc(var(--h) + 40) 30% 17%)); color:hsl(var(--h) 60% 78%); }
}
@media screen and (max-width:640px) {
  .pgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-height:none; overflow:visible; }
  #pgQ { flex:1 1 100%; width:100%; }
  .pc-act { flex-wrap:wrap; }
  .pc-add { flex:1 1 100%; }
  .pg-panel { padding:12px; }
}
@media screen and (pointer:coarse) {
  .pc-act .qty button { width:38px; height:40px; }
  .pc-act .qty input { height:40px; }
}
.pimg-box { width:120px; height:90px; }
.pimg-box img { width:100%; height:100%; object-fit:cover; }

/* ---------- หมวดหมู่สินค้า ---------- */
@media screen {
  .cat-list { margin-top:14px; max-height:min(55vh,460px); overflow:auto; border:1px solid var(--line); border-radius:12px; }
  .cat-row { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); }
  .cat-row:last-child { border-bottom:0; }
  .cat-row.editing { background:var(--brand-soft); }
  .cat-row.deleting { background:color-mix(in srgb,var(--danger) 7%,var(--panel)); flex-wrap:wrap; }
  .cat-row.deleting select { margin-top:6px; max-width:100%; }
  .cat-n { color:var(--muted); font-variant-numeric:tabular-nums; }
}

/* ---------- ทะเบียนลูกค้า ---------- */
@media screen {
  #nav button[data-s="customers"] { --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.3-6 6.5-6s5.9 2.4 6.5 6M16 4.5a3.5 3.5 0 0 1 0 7M18.5 14.5c1.7.8 2.8 2.9 3 5.5'/%3E%3C/svg%3E"); }
  .cust-picked:not([hidden]) { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:var(--brand-soft); font-size:14px; }
  .cust-pick .scanwrap input { width:100%; }
  .cust-pick .results div { align-items:center; }
  tr.row-off td { color:var(--muted); }
  tr.row-off td .pill.qt { opacity:.6; }
}

/* ---------- เอกสาร: ใบเสนอราคา / ลายเซ็น / วันที่ ---------- */
@media screen {
  .pill.qt { background:color-mix(in srgb,var(--p3) 14%,var(--panel)); color:var(--p3); border-color:transparent; }
  .quote-note { font-size:12px; padding:8px 12px; border-radius:10px; background:var(--brand-soft); color:var(--brand); font-weight:500; }
  .quote-note[hidden] { display:none; }
  .sign-box { width:180px; height:80px; background:#fff; }
  .date-ctl .seg { flex:1 1 300px; }
  .date-ctl .dc-date { width:auto; }
}

/* ---------- โหมดเดโม ---------- */
@media screen {
  .demo-bar { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:0 0 18px; padding:10px 14px; border-radius:12px; font-size:13px;
    background:color-mix(in srgb,var(--warn) 12%,var(--panel)); border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line)); color:var(--ink); }
  .demo-tag { padding:2px 10px; border-radius:99px; background:var(--warn); color:#fff; font-weight:600; font-size:12px; }
  .demo-left { margin-left:auto; font-weight:600; color:var(--warn); white-space:nowrap; }
  .demo-login { display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:12px; font-size:13px;
    background:color-mix(in srgb,var(--warn) 10%,var(--panel)); border:1px dashed color-mix(in srgb,var(--warn) 45%,var(--line)); }
  .demo-login .row { gap:6px; }
  .demo-login .btn { flex:1 1 auto; }
}

/* ---------- หน้าต่าง (modal): สูงไม่เกินจอ เลื่อนภายในกล่อง ปุ่มท้ายกล่องติดขอบล่าง ----------
   พื้นหลัง (.ov) ไม่เลื่อนแล้ว การลาก/ปัดบนพื้นหลังจึงไม่ไปปิดหน้าต่าง (ดู modal() ใน app.js) */
@media screen {
  body:has(#modalRoot .ov) { overflow:hidden; } /* หน้าด้านหลังไม่เลื่อนตามล้อเมาส์ */
  .ov { align-items:center; overflow:hidden; overscroll-behavior:contain;
    padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px)); }
  .modal { --mp:28px; padding:var(--mp); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  .modal .modal-foot {
    position:sticky; bottom:calc(-1 * var(--mp)); z-index:3;
    margin-top:16px; margin-bottom:calc(-1 * var(--mp)); padding:12px 0 var(--mp);
    background:var(--panel); box-shadow:0 -12px 16px -14px rgba(0,0,0,.25);
  }
  .modal .stack > .modal-foot { margin-top:4px; }
}
@media screen and (max-width:520px) {
  .ov { padding:0; align-items:stretch; }
  .modal, .modal.wide { --mp:16px; height:100dvh; min-height:0; max-height:100dvh; border-radius:0;
    padding-top:max(18px,env(safe-area-inset-top,0px)); }
  .modal .modal-foot { padding-bottom:max(var(--mp),env(safe-area-inset-bottom,0px)); }
}

/* ---------- 4) ตัวเลือกสีธีม (ตั้งค่าร้าน) ---------- */
@media screen {
  .swatches { display:flex; flex-wrap:wrap; gap:10px; }
  .swatch {
    display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:12px; cursor:pointer;
    border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font-size:13px; font-weight:500;
  }
  .swatch:hover { border-color:var(--sw-b); }
  .swatch i { width:30px; height:30px; border-radius:9px; flex:none; position:relative;
    background:linear-gradient(135deg,var(--sw-a) 0 55%,var(--sw-b) 55%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
  .swatch[aria-checked="true"] { border-color:var(--brand); box-shadow:0 0 0 3px var(--focus); }
  .swatch[aria-checked="true"] i::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:15px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.4); }
}
@media screen and (prefers-reduced-motion:reduce) {
  #app, #app>header, .side-back { transition:none!important; }
}