:root { /* สีแบรนด์จากโลโก้ร้าน — ส้มอิฐ ตัวอักษรขาว */ --brand: #EE4D26; /* ดูดมาจากพื้นหลังไฟล์โลโก้ร้านตรง ๆ */ --brand-ink: #ffffff; --brand-deep: #BE3915; --bg: #FBF6F2; --panel: #ffffff; --panel-2: #F4EBE5; --line: #E7D9D0; --ink: #241A15; --ink-2: #6E5D54; --accent: var(--brand); /* สีสถานะ — ตั้งใจให้ "ต้องซื้อ" เป็นแดงเข้มอมชมพู จะได้ไม่จมไปกับส้มของแบรนด์ */ --red: #B3123A; --red-bg: #FCE7EC; --amber: #96650B; --amber-bg: #FBEFD8; --green: #1B7A4B; --green-bg: #E1F2E8; --grey-bg: #EFE7E1; --radius: 14px; --shadow: 0 1px 2px rgba(36,26,21,.06), 0 8px 24px rgba(36,26,21,.07); } /* โหมดมืด — ตัดสินโดย JS (ค่าที่ผู้ใช้เลือก ถ้าไม่เลือกก็ตามเครื่อง) แล้วใส่คลาส .dark ที่ ทำแบบนี้เพื่อให้มีชุดสีมืด "ชุดเดียว" ไม่ต้องก๊อป palette ไว้ทั้งใน media query และใน [data-theme] */ :root.dark { /* ชุดสีเทากลาง ๆ ชุดเดียวกับ Web OS — ไม่อมน้ำตาลตามสีแบรนด์ จอมืดแล้วสบายตากว่า */ --bg: #0D0D0D; --panel: #1A1A1A; --panel-2: #262626; --line: #2E2E2E; --ink: #F5F5F5; --ink-2: #A3A3A3; --accent: var(--brand); --red: #FF7D9B; --red-bg: #33181F; --amber: #F3C275; --amber-bg: #2E2616; --green: #6FD5A2; --green-bg: #152A21; --grey-bg: #262626; --shadow: 0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.45); } * { box-sizing: border-box; } /* ⚠️ แอตทริบิวต์ hidden แพ้ทุกกฎที่ตั้ง display: เอง (เบราว์เซอร์ตั้ง display:none ให้แค่ระดับ UA stylesheet) ถ้าไม่มีบรรทัดนี้ .demo-bar (display:flex) จะโผล่ในร้านจริงทั้งที่ใส่ hidden ไว้ — เคยพลาดมาแล้ว */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 -apple-system, "SF Pro Text", "Helvetica Neue", "Noto Sans Thai", sans-serif; padding-bottom: env(safe-area-inset-bottom); } button, input, select { font: inherit; color: inherit; } /* ---------- header ---------- */ .top { position: sticky; top: 0; z-index: 20; background: var(--brand); color: var(--brand-ink); padding: max(10px, env(safe-area-inset-top)) 14px 0; } .top-inner { max-width: 820px; margin: 0 auto; } .top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .logo { display: flex; align-items: center; gap: 9px; min-width: 0; } /* โลโก้ย้อมสีด้วย mask — ไฟล์เดียวใช้ได้ทุกร้าน เปลี่ยนแค่ --brand-ink */ .logo-img { flex: none; height: 36px; background: var(--brand-ink); -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat; } .logo.has-img .brand-sub { display: none; } /* โลโก้บอกชื่อร้านอยู่แล้ว ไม่ต้องเขียนซ้ำ */ .logo.has-img { gap: 11px; } .logo .mark { height: 30px; width: 30px; flex: none; } .brand { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; } .brand-sub { font-size: 11.5px; opacity: .84; white-space: nowrap; } .datebox { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 650; color: var(--brand-ink); } .datebox input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; } .tabs { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { flex: 1 0 auto; background: none; border: 0; border-bottom: 2.5px solid transparent; padding: 10px 12px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.72); cursor: pointer; white-space: nowrap; } .tabs button.on { color: var(--brand-ink); border-bottom-color: var(--brand-ink); } .tabs em { font-style: normal; background: var(--brand-ink); color: var(--brand); border-radius: 999px; padding: 1px 7px; font-size: 12px; margin-left: 4px; vertical-align: 1px; font-weight: 800; } main { padding: 16px 14px 80px; max-width: 820px; margin: 0 auto; } /* ---------- แถบสรุปบนสุด ---------- */ .alert { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow); border: 1px solid transparent; cursor: pointer; width: 100%; text-align: left; } .alert.warn { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 30%, transparent); } .alert.good { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 25%, transparent); } .alert.idle { background: var(--panel); border-color: var(--line); } .alert .big { font-size: 30px; font-weight: 800; line-height: 1; } .alert.warn .big { color: var(--red); } .alert.good .big { color: var(--green); } .alert .txt strong { display: block; font-size: 15.5px; } .alert .txt span { font-size: 13px; color: var(--ink-2); } .alert .go { margin-left: auto; font-size: 20px; color: var(--ink-2); } .stats { display: flex; gap: 8px; margin-bottom: 16px; } .stat { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 6px; text-align: center; cursor: pointer; font: inherit; color: inherit; transition: border-color .12s, background .12s; } .stat.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--panel)); } .stat.on b { font-weight: 800; } /* ⚠️ อย่าเอาสีแบรนด์มาเป็นสีตัวอักษรตรง ๆ — ร้านที่แบรนด์เป็นสีเข้ม (เบิกบาน = เขียวเข้ม) จะอ่านไม่ออกบนพื้นมืด · ใช้ขอบกับพื้นอ่อนบอกว่าเลือกอยู่พอ */ .stat b { display: block; font-size: 18px; } .stat span { font-size: 11.5px; color: var(--ink-2); } /* ---------- กลุ่ม / การ์ดรายการ ---------- */ .group { margin-bottom: 18px; } /* หัวหมวด — ตัวใหญ่ สีเต็ม อ่านง่ายตอนเลื่อนไล่นับ ไม่ใช้ uppercase / letter-spacing เพราะภาษาไทยไม่มีตัวพิมพ์ใหญ่ และการถ่างตัวอักษรทำให้อ่านยากขึ้น */ .group > h3 { position: sticky; top: 108px; z-index: 5; margin: 0 0 9px; font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; color: var(--ink); background: var(--bg); padding: 8px 2px 7px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow); border-left: 4px solid var(--line); } .card.low { border-left-color: var(--red); } .card.edge { border-left-color: var(--amber); } .card.ok { border-left-color: var(--green); } .card.unknown { border-left-color: var(--line); } .card-head { display: flex; align-items: flex-start; gap: 10px; } .card-name { font-weight: 650; font-size: 15.5px; flex: 1; } .card-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chip { background: var(--panel-2); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; } .pill { border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .pill.low { background: var(--red-bg); color: var(--red); } .pill.edge { background: var(--amber-bg); color: var(--amber); } .pill.ok { background: var(--green-bg); color: var(--green); } .pill.unknown, .pill.nomin { background: var(--grey-bg); color: var(--ink-2); } .entry { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .entry .lbl { font-size: 12.5px; color: var(--ink-2); } .qty { width: 108px; padding: 10px 12px; font-size: 17px; font-weight: 650; text-align: center; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 11px; } .qty:focus { outline: none; border-color: var(--accent); background: var(--panel); } .frac { display: flex; gap: 5px; flex-wrap: wrap; } .frac button { min-width: 46px; padding: 9px 8px; border-radius: 11px; font-size: 14px; font-weight: 650; background: var(--panel-2); border: 1.5px solid var(--line); cursor: pointer; } .frac button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } /* ---------- หน้าต้องซื้อ ---------- */ .shop-group { margin-bottom: 20px; } .shop-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 9px; font-size: 17.5px; font-weight: 800; color: var(--ink); } .shop-head small { font-weight: 500; color: var(--ink-2); font-size: 12.5px; } .buy-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; } .buy-row.done { opacity: .45; } .buy-row.done .card-name { text-decoration: line-through; } .check { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); background: var(--panel-2); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; } .check[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; } .actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .btn { border-radius: 11px; padding: 10px 16px; font-size: 14.5px; font-weight: 650; border: 1px solid var(--line); background: var(--panel); cursor: pointer; } .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .btn.ghost { background: transparent; } .btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); } .btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 9px; } .empty { text-align: center; padding: 48px 20px; color: var(--ink-2); } .empty .ico { font-size: 44px; } .empty h3 { margin: 12px 0 4px; color: var(--ink); font-size: 17px; } table.hist { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } table.hist th, table.hist td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; } table.hist th { font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; } table.hist tr:last-child td { border-bottom: 0; } table.hist td.num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- dialog ---------- */ dialog { border: 0; border-radius: 18px; padding: 20px; width: min(460px, calc(100vw - 28px)); background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); } dialog::backdrop { background: rgba(0,0,0,.45); } dialog h2 { margin: 0 0 14px; font-size: 18px; } dialog label { display: block; margin-bottom: 11px; font-size: 13px; font-weight: 600; color: var(--ink-2); } dialog label small { font-weight: 500; opacity: .8; } dialog input { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font-size: 16px; font-weight: 500; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); } dialog input:focus { outline: none; border-color: var(--accent); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 16px 0 0; } .dialog-err { color: var(--red); font-size: 13px; margin: 0 0 8px; } .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.25); } /* ใบสำหรับพิมพ์ — ซ่อนไว้ตลอด โผล่เฉพาะตอนสั่งพิมพ์ */ #printArea { display: none; } @media print { /* พิมพ์เฉพาะใบรายการ ไม่พิมพ์หน้าเว็บ — ซ่อนทุกอย่างแล้วโชว์ #printArea อันเดียว */ .top, .toast, #view, dialog { display: none !important; } /* โหมดมืดสั่งพิมพ์ได้ด้วย ต้องบังคับพื้นขาวตัวดำ ไม่งั้นได้กระดาษเปล่า */ html, body { background: #fff !important; color: #000 !important; } #printArea { display: block; margin: 0; padding: 0; font-family: inherit; font-size: 14px; line-height: 1.85; color: #000; white-space: pre-wrap; word-break: break-word; } } #copyText { width: 100%; padding: 12px; font-size: 13.5px; line-height: 1.6; font-family: ui-monospace, "SF Mono", Menlo, monospace; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); resize: vertical; -webkit-user-select: all; user-select: all; } /* ปุ่มปิดมุมบนขวาของกล่อง — iPad/มือถือไม่มีปุ่ม Esc ต้องมีทางออกที่เห็นชัดเสมอ */ .dlg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .dlg-head h2 { margin: 0; flex: 1; } .dlg-close { flex: none; width: 38px; height: 38px; border-radius: 50%; font-size: 17px; line-height: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; } .dlg-close:hover, .dlg-close:active { background: var(--line); color: var(--ink); } dialog { max-height: calc(100dvh - 40px); overflow-y: auto; } /* แถบเลือกใบ (บาร์ / เบเกอรี่) */ .sections { display: flex; gap: 7px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .sections::-webkit-scrollbar { display: none; } .sec-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 650; white-space: nowrap; background: var(--panel); border: 1.5px solid var(--line); color: var(--ink-2); cursor: pointer; } .sec-chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .sec-chip em { font-style: normal; background: var(--red); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11.5px; font-weight: 700; } .sec-chip.on em { background: rgba(0, 0, 0, .3); color: #fff; } /* ปุ่มล้างเกาะอยู่ข้างป้าย "คงเหลือ" — ถ้าเอาไปต่อท้ายแถวปุ่มเศษส่วน มันจะตกบรรทัดใหม่ลำพังทุกครั้ง */ .frac-clear { margin-left: 8px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; line-height: 1.6; background: transparent; color: var(--ink-2); border: 1px dashed var(--line); border-radius: 999px; cursor: pointer; } .frac-clear:hover { color: var(--red); border-color: var(--red); } /* โลโก้: ใช้ไฟล์ public/logo.png ถ้ามี ไม่งั้นใช้ดาว 8 แฉกที่วาดด้วย SVG */ .logo .mark { color: var(--brand-ink); } .logo.has-img .mark { display: none; } /* ---------- หน้าเข้าสู่ระบบ ---------- */ .login-page { background: var(--brand); } .login-wrap { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; max-width: none; } .login-card { width: min(380px, 100%); background: var(--panel); color: var(--ink); border-radius: 20px; padding: 30px 26px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.22); text-align: center; } .login-mark { color: var(--brand); width: 46px; height: 46px; margin: 0 auto 16px; } .login-mark svg { width: 100%; height: 100%; display: block; } /* โลโก้เป็นตัวอักษรขาว วางบนการ์ดขาวจะหายไป — ใช้ไฟล์เป็นแม่พิมพ์ (mask) แล้วเติมสีแบรนด์แทน */ .login-mark.has-img { width: min(200px, 66%); height: auto; background: var(--brand); -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat; } .login-card h1 { margin: 0; font-size: 21px; font-weight: 800; } .login-sub { margin: 3px 0 22px; font-size: 13px; color: var(--ink-2); } .login-card label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-2); } .login-card input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 16px; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 11px; color: var(--ink); } .login-card input:focus { outline: none; border-color: var(--brand); } .login-card .btn { width: 100%; margin-top: 16px; padding: 13px; font-size: 15.5px; } .login-card .dialog-err { margin: 12px 0 0; text-align: left; } /* ปุ่มออกจากระบบท้ายหน้าประวัติ */ .signout { margin-top: 26px; text-align: center; } /* จอแคบมาก (iPhone SE / มินิ) — โลโก้กับป้ายวันที่ชนกัน ตัดชื่อหน้าออก โลโก้กับแท็บบอกอยู่แล้วว่าคืออะไร */ @media (max-width: 369px) { .logo.has-img .brand { display: none; } .logo-img { height: 32px; } } /* โลโก้บอกชื่อร้านแล้ว ไม่ต้องเขียนซ้ำใต้หัวข้อ */ .login-card:has(.login-mark.has-img) .login-sub { display: none; } .login-card:has(.login-mark.has-img) h1 { margin-bottom: 20px; } /* ปุ่ม Google + เส้นคั่น "หรือ" ในหน้าล็อกอิน */ .gbtn-holder { display: flex; justify-content: center; margin-top: 6px; min-height: 44px; } .login-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2); text-align: center; } .orline { display: flex; align-items: center; gap: 10px; margin: 20px 0 4px; color: var(--ink-2); font-size: 12.5px; } .orline::before, .orline::after { content: ''; flex: 1; height: 1px; background: var(--line); } .hint { font-size: 12.5px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.6; } /* ═══ การ์ดนับสต็อก แบบใหม่: ชื่อใหญ่แถวบน · ข้อมูล+ช่องกรอก แถวล่าง ═══ */ .card.ct { padding: 12px 14px 13px; } .ct-top { display: flex; align-items: flex-start; gap: 10px; } .ct-name { flex: 1; font-size: 19.5px; font-weight: 750; line-height: 1.28; letter-spacing: -.01em; } .ct-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 5px; } /* แถบคงเหลืออยู่กลางการ์ด แยกบรรทัดของตัวเอง — คนเดินนับจะได้กวาดตาหาช่องกรอกเจอเร็ว */ .ct-entry { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 11px; } /* ของที่เลือกเป็นเศษส่วน: ป้าย "คงเหลือ (ขวด)" อยู่บรรทัดบน แถวปุ่มอยู่บรรทัดล่าง */ .ct-entry.stack { flex-direction: column; gap: 6px; } .ct-entry .lbl { font-size: 13px; color: var(--ink-2); white-space: nowrap; } .ct-entry .unit { font-size: 13px; color: var(--ink-2); min-width: 26px; } .ct-entry .qty { width: 96px; padding: 9px 10px; font-size: 21px; font-weight: 800; color: var(--ink); } .ct-note { margin-top: 8px; font-size: 12px; color: var(--ink-2); text-align: center; } .frac { justify-content: center; } /* หน้าต้องซื้อ: สลับเป็น ขั้นต่ำ ก่อน แล้วค่อยยอดคงเหลือ (ตัวที่ต้องอ่านจริงเลยเน้นให้ชัด) */ .left-strong { color: var(--ink); font-weight: 700; } /* ═══ ช่องค้นหา ═══ */ .search { position: relative; margin-bottom: 14px; } .search input { width: 100%; padding: 11px 38px 11px 38px; font-size: 15px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); } .search input:focus { outline: none; border-color: var(--brand); } .search input::-webkit-search-cancel-button { display: none; } .search-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .55; } .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--panel-2); color: var(--ink-2); cursor: pointer; font-size: 13px; } .filter-note { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; } /* ═══ โหมดลากเรียงลำดับ ═══ */ .sort-list { display: flex; flex-direction: column; gap: 6px; } .sort-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); touch-action: pan-y; } .sort-row.off { opacity: .5; } .sort-row.dragging { position: relative; z-index: 5; box-shadow: 0 12px 28px rgba(0,0,0,.28); border-color: var(--brand); touch-action: none; } .drag { flex: none; width: 40px; height: 40px; border-radius: 10px; font-size: 17px; line-height: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); cursor: grab; touch-action: none; } .sort-txt { flex: 1; min-width: 0; } .sort-name { font-size: 15px; font-weight: 650; } /* ═══ บันทึกการนับ ═══ */ .log-head { margin: 26px 0 10px; font-size: 15px; font-weight: 700; } .log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .log-row { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; } .log-main { font-size: 14.5px; } .log-main span { color: var(--ink-2); } .log-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; } /* ยอดที่ค้างมาจากวันก่อน (ยังไม่ได้นับวันนี้) — ใช้เส้นประให้แยกออกจากยอดที่นับแล้ววันนี้ */ .card.ct.carried .qty { border-style: dashed; } .card.ct.carried .frac button { border-style: dashed; } .card.ct.carried .frac button.on { border-style: solid; } .admin-chip { background: var(--brand); color: var(--brand-ink); } /* ตัวเลือกระดับสิทธิ์ในแท็บผู้ใช้ */ .rolepick { display: block; margin-top: 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .rolepick select { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font-size: 15px; font-weight: 600; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); } .rolepick select:focus { outline: none; border-color: var(--brand); } .rolepick small { display: block; margin-top: 5px; font-weight: 500; } /* dropdown ในกล่องเพิ่ม/แก้ไขรายการ */ dialog select { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; font-size: 16px; font-weight: 600; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); } dialog select:focus { outline: none; border-color: var(--brand); } /* ═══════════════════════════════════════════════════════════ จอใหญ่ขึ้น: แท็บเล็ต / คอม — เรียงการ์ดเป็นหลายคอลัมน์ มือถือยังเป็นคอลัมน์เดียวเหมือนเดิม (ออกแบบจากมือถือก่อน) ═══════════════════════════════════════════════════════════ */ @media (min-width: 700px) { .top { padding-left: 22px; padding-right: 22px; } main { max-width: 1180px; padding: 20px 22px 90px; } /* h3 กินเต็มแถว การ์ดที่เหลือแบ่งคอลัมน์ */ .group, .shop-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; } .group > h3, .shop-head { grid-column: 1 / -1; margin-bottom: 0; } .group > .card, .shop-group > .card { margin-bottom: 0; } .stats { gap: 10px; } .alert { padding: 16px 20px; } .hist th, .hist td { padding: 13px 16px; } .log { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .sort-list { max-width: 720px; } } @media (min-width: 1024px) { .group, .shop-group { grid-template-columns: repeat(3, minmax(0, 1fr)); } .group > h3, .shop-head { font-size: 18.5px; } .brand { font-size: 19px; } .logo-img { height: 40px; } .ct-name { font-size: 20px; } } /* คอมพิวเตอร์: ใช้เมาส์ ไม่ใช่นิ้ว — ปุ่มไม่ต้องใหญ่เท่ามือถือ และมี hover ได้ */ @media (hover: hover) and (pointer: fine) { .card { transition: border-color .12s; } .btn:hover { border-color: var(--brand); } .frac button:hover:not(.on) { border-color: var(--brand); } .stat:hover { border-color: var(--brand); } .sec-chip:hover:not(.on) { border-color: var(--brand); } } /* จอกว้างมาก อย่าให้ยืดจนอ่านยาก */ @media (min-width: 1400px) { main { max-width: 1320px; } .group, .shop-group { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ═══ กล่อง "ซื้อเข้ามาเท่าไหร่" (เด้งตอนติ๊กซื้อแล้วในแท็บต้องซื้อ) ═══ */ .buy-item { margin: 0 0 16px; font-size: 15px; line-height: 1.6; } .buy-item b { font-size: 17px; } .buy-item span { color: var(--ink-2); font-size: 13px; } .buy-input { display: flex; align-items: center; gap: 9px; margin-top: 5px; } .buy-input input { flex: 1; width: auto; margin-top: 0; font-size: 22px; font-weight: 800; text-align: center; } .buy-input span { font-size: 14px; font-weight: 600; color: var(--ink-2); min-width: 34px; } .buy-preview { margin: 14px 0 0; padding: 11px 13px; border-radius: 11px; font-size: 14.5px; line-height: 1.6; background: var(--panel-2); color: var(--ink-2); text-align: center; } .buy-preview b { color: var(--green); font-size: 18px; font-weight: 800; } .buy-preview.bad b { color: var(--red); } /* ปุ่มบันทึกต้องเด่นและใหญ่กว่าตัวข้ามชัด ๆ — ของเดิมสองปุ่มขนาดพอกันแล้วคนกดผิด */ #buyDialog menu { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; } #buyDialog #buySave { width: 100%; padding: 17px; font-size: 17.5px; font-weight: 800; border-radius: 13px; } #buyDialog [data-buyskip] { width: 100%; padding: 9px; font-size: 13px; font-weight: 600; background: transparent; border-color: transparent; color: var(--ink-2); } #buyDialog [data-buyskip]:hover { border-color: var(--line); color: var(--ink); } /* ปุ่มสลับโหมดสว่าง/มืด บนหัวเว็บ */ .themebtn { flex: none; width: 36px; height: 36px; border-radius: 50%; padding: 0; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: var(--brand-ink); font-size: 15px; line-height: 1; cursor: pointer; } .themebtn:hover { background: rgba(255,255,255,.28); } .top-row .right { display: flex; align-items: center; gap: 8px; flex: none; } /* ═══ หน้ารายการของแบบพับเก็บ (ใบ → หมวด → ของ) ═══ */ .sec-block { margin-bottom: 22px; } .sec-title { margin: 0 0 10px; font-size: 17.5px; font-weight: 800; color: var(--ink); display: flex; align-items: baseline; gap: 8px; } .sec-title small { font-size: 12.5px; font-weight: 500; color: var(--ink-2); } .panel { margin-bottom: 8px; } .panel-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 14px 15px; border-radius: var(--radius); cursor: pointer; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font: inherit; color: var(--ink); } .panel-head:hover { border-color: var(--brand); } .panel-caret { flex: none; width: 22px; font-size: 19px; line-height: 1; color: var(--ink-2); transition: transform .15s; transform-origin: 45% 50%; } .panel.open .panel-caret { transform: rotate(90deg); } .panel-name { flex: 1; font-size: 16px; font-weight: 700; } .panel-count { flex: none; min-width: 26px; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: 12.5px; font-weight: 700; text-align: center; } .panel.open .panel-head { border-color: var(--brand); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .panel-body { border: 1px solid var(--brand); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 10px 10px 4px; background: color-mix(in srgb, var(--panel) 55%, transparent); } .panel-body .card:last-child { margin-bottom: 6px; } @media (min-width: 700px) { .panel-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; } .panel-body .card { margin-bottom: 0; } } @media (min-width: 1024px) { .panel-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── หัวหมวดในหน้าเรียงรายการ (พับได้) ── */ .sort-group { margin-top: 14px; } .sort-group:first-child { margin-top: 2px; } .sort-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .sort-cat { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); } .sort-cat-btn { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 4px 2px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; } .sort-cat-btn .panel-caret { width: 18px; font-size: 17px; } .sort-group.open .panel-caret { transform: rotate(90deg); } .sort-cat-name { font-size: 15.5px; font-weight: 800; color: var(--ink); } .sort-cat small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .cat-move { display: flex; gap: 4px; } .catbtn { width: 34px; height: 34px; border-radius: 9px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 13px; line-height: 1; } .catbtn:hover:not(:disabled) { border-color: var(--brand); } .catbtn:disabled { opacity: .3; cursor: default; } /* ── แถบเดโม่ (มีเฉพาะร้านตัวอย่าง PanUP) ── */ .demo-bar { max-width: 820px; margin: 12px auto -4px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--panel); border: 1.5px dashed var(--brand); border-radius: var(--radius); } .demo-txt { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.55; color: var(--ink-2); } .demo-txt b { color: var(--ink); } .demo-bar .btn { flex: none; } #leadDialog label { display: block; margin-bottom: 11px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); } #leadDialog input, #leadDialog textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; font-size: 16px; font-weight: 500; color: var(--ink); background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 10px; } #leadDialog textarea { resize: vertical; } #leadDialog input:focus, #leadDialog textarea:focus { outline: none; border-color: var(--brand); } /* ── รูปสินค้า (ใส่หรือไม่ใส่ก็ได้) ── ไม่มีลิงก์รูป → เป็นไอคอนอีโมจิตามประเภท · การ์ดที่ไม่มี .thumb หน้าตาเหมือนเดิมทุกอย่าง */ .thumb { flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--panel-2); font-size: 25px; line-height: 1; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* การ์ดนับสต็อกวางเป็นตาราง: รูปอยู่ซ้ายคร่อมแถวชื่อ+ข้อมูล · ช่องกรอกยังเต็มความกว้างเหมือนเดิม */ .card.ct:has(.thumb) { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; } .card.ct .thumb { grid-row: span 2; } .card.ct .ct-top, .card.ct .ct-meta { grid-column: 2; } .card.ct .ct-entry, .card.ct .ct-note { grid-column: 1 / -1; } /* ── ช่องใส่รูปสินค้า: ลากมาวาง หรือกดเลือกไฟล์ ── */ .drop { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 14px; border: 2px dashed var(--line); border-radius: 12px; background: var(--panel-2); transition: border-color .12s, background .12s; } .drop.over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--panel-2)); } .drop.busy { opacity: .6; pointer-events: none; } .drop-prev { flex: none; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--panel); border: 1px solid var(--line); } .drop-body { flex: 1; min-width: 0; } .drop-btns { display: flex; gap: 8px; flex-wrap: wrap; } .drop-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; } .img-url { opacity: .75; } .img-url input { font-size: 13.5px; } /* ── กล่อง QR ถ่ายจากมือถือ ── */ .snap { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 12px; } .snap-qr { flex: none; width: 132px; height: 132px; background: #fff; border-radius: 8px; padding: 4px; } .snap-qr svg { width: 100%; height: 100%; display: block; } .snap-txt { flex: 1; min-width: 0; } .snap-txt b { font-size: 14.5px; } .snap-txt p { margin: 6px 0 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }