/* ฟอนต์ไทยหลัก — Noto Sans Thai (อ่านง่าย x-height ใหญ่ ดูไม่เล็ก) · display=swap = โชว์ทันทีแล้วค่อยสลับ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap'); :root { /* ══ ธีม "ม่วงขาว" (Purple-White) — โทนหลักของทั้งแอป ══ */ --bg: #ffffff; --bg2: #f6f4fb; /* ขาวอมม่วงอ่อน */ --bg3: #ece7f6; /* ม่วงอ่อน */ --t1: #1c1830; /* หมึก (ม่วงดำ) */ --t2: #56506b; --t3: #948da8; --bd: rgba(109, 40, 217, 0.10); --bd2: rgba(109, 40, 217, 0.20); --r: 14px; --r-sm: 9px; --shadow: 0 2px 5px rgba(91,33,182,.07), 0 8px 24px rgba(91,33,182,.10); --shadow-h: 0 12px 30px rgba(124,58,237,.22); --shadow-modal: 0 20px 60px rgba(91,33,182,.28), 0 4px 12px rgba(91,33,182,.14); --ease: cubic-bezier(.22,.61,.36,1); --grad: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); /* primary = ม่วง (remap --blue ทั้งระบบ → ทุกที่ที่ใช้ var(--blue) กลายเป็นม่วง) */ --blue: #7c3aed; --blue-bg: #f2ecfd; --blue-dk: #5b21b6; --green: #15803d; --green-bg: #e7f5ec; --green-mid: #16a34a; --red: #b91c1c; --red-bg: #fdebeb; --red-mid: #ef4444; --amber: #92500a; --amber-bg: #fcf2e1; --amber-mid: #f59e0b; --purple: #6d28d9; --purple-bg: #f2ecfd; --purple-mid: #8b5cf6; --tA: #7c3aed; /* ทีม A — ม่วง */ --tB: #0d9488; /* ทีม B — เขียวน้ำทะเล */ --tC: #db2777; /* ทีม C — ชมพู */ /* ขนาดตัวอักษร 3 ระดับหลัก — 19 ก.ย.69 เจ้าของขอ header > subheader > text ให้เท่ากันทั้งเว็บ ตัวเลขใหญ่ (KPI) และตัวเลขในจุดแจ้งเตือนไม่นับรวม */ --fs-h: 17px; /* header — หัวการ์ด / หัวพาเนล */ --fs-sub: 14.5px; /* subheader — หัวรอง / ตัวเลขรอง */ --fs-body: 13px; /* text — เนื้อความ / ช่องตาราง / ป้ายกำกับ / ปุ่ม */ --on-blue: #ffffff; /* ตัวอักษรบนพื้นสีหลักทึบ */ color-scheme: light; } /* ══ โหมดกลางคืน (ม่วงเข้ม) — ตั้งผ่าน html[data-theme="dark"] (JS toggle + จำค่า) ══ */ html[data-theme="dark"] { --bg: #15121e; /* ม่วงดำลึก */ --bg2: #1e1a2c; --bg3: #2a2440; --t1: #efeafb; --t2: #aaa0c4; --t3: #6f6789; --bd: rgba(255, 255, 255, 0.09); --bd2: rgba(255, 255, 255, 0.17); --blue: #a78bfa; /* ม่วงสว่าง (primary) */ --blue-bg: #2c2147; --blue-dk: #c4b5fd; --green: #4ade80; --green-bg: #16331f; --green-mid: #34d399; --red: #f87171; --red-bg: #3a1414; --red-mid: #ef4444; --amber: #fbbf24; --amber-bg: #34230a; --amber-mid: #f59e0b; --purple: #c4b5fd; --purple-bg: #2e1d52; --purple-mid: #a78bfa; --tA: #a78bfa; --tB: #2dd4bf; --tC: #f472b6; --shadow: 0 2px 10px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25); --shadow-h: 0 12px 32px rgba(0,0,0,.55); --shadow-modal: 0 24px 70px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4); --grad: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); --on-blue: #ffffff; color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Noto Sans Thai', -apple-system, "Helvetica Neue", sans-serif; background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 40%); background-attachment: fixed; color: var(--t1); font-size: var(--fs-body); min-height: 100vh; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .app { max-width: 1100px; margin: 0 auto; padding: 14px; } .mut { color: var(--t3); } /* ข้อความรอง (ใช้ในแท็บสถานะรถ ฯลฯ) */ /* topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; } .brand { display: flex; align-items: center; gap: 9px; } .brand-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand-name { font-size: 24px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.15; } .brand-sub { font-size: var(--fs-body); color: var(--t3); margin-top: 3px; } .nav { display: flex; gap: 2px; background: var(--bg2); padding: 3px; border-radius: 8px; border: 0.5px solid var(--bd); box-shadow: var(--shadow); } .ntab { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 6px 13px; font-size: var(--fs-body); border-radius: 8px; border: none; background: transparent; cursor: pointer; color: var(--t2); font-family: inherit; white-space: nowrap; transition: background .18s ease, color .18s ease; } .ntab:hover { color: var(--t1); } .ntab.on { background: var(--grad); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(124,58,237,.35); } /* slide nav — แคปซูล gradient เลื่อนนุ่มระหว่างแท็บ (container id=nav-slide + .nav-ind) ⚠️ สไตล์ฐาน (แถบนอน) ต้องอยู่ในคลาสนี้ ห้ามเขียน inline บน element ใน index.html — ไม่งั้น media query sidebar ข้างล่าง override ไม่ได้ (inline style ชนะ CSS เสมอ) */ .nav-slide { position: relative; scrollbar-width: none; display: flex; gap: 2px; background: var(--bg2); padding: 3px; border-radius: 8px; border: .5px solid var(--bd); margin-bottom: 6px; overflow-x: auto; } .nav-slide::-webkit-scrollbar { display: none; } .nav-slide .ntab { position: relative; z-index: 1; transition: color .2s var(--ease); } .nav-slide .ntab.on { background: transparent; box-shadow: none; } .nav-ind { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; background: var(--grad); border-radius: 8px; box-shadow: 0 3px 10px rgba(124,58,237,.35); transition: left .25s var(--ease), width .25s var(--ease), top .25s var(--ease), height .25s var(--ease); z-index: 0; pointer-events: none; opacity: 0; } /* ★ ส.ค.69 — เมนูสามขีด (hamburger drawer): ซ่อนแถบแท็บไว้ กดปุ่ม ☰ แล้วเลื่อนออกมาจากซ้าย + ฉากหลังมืด ใช้ทุกขนาดจอ (มือถือ/คอมเหมือนกัน) · drawer ลอยทับ ไม่กินพื้นที่ → เนื้อหาได้ความกว้างเต็มตลอด ⚠️ บทเรียนจากรอบ sidebar (อย่าให้กลับมา): 1) container ของ index.html คือ #dashboard-root (ไม่ใช่ #root ซึ่งเป็นของ seller.html และไม่มี nav-slide) 2) JS ต้องใช้ root.style.display='' (ล้าง inline) ห้าม ='block' — inline style ชนะ CSS เสมอ 3) สไตล์ฐานของ #nav-slide อยู่ในคลาส .nav-slide เท่านั้น ห้าม inline บน element ใน render() */ /* ปุ่มสามขีดในหัวเว็บ */ .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; border: .5px solid var(--bd2); background: var(--bg2); color: var(--t1); cursor: pointer; transition: background .18s ease, color .18s ease, transform .12s ease; } .nav-burger:hover { background: var(--purple-bg); color: var(--purple); } .nav-burger:active { transform: scale(.94); } /* ฉากหลังมืด — กดที่ไหนก็ปิด drawer */ .nav-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .48); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); z-index: 1250; } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } /* ตัว drawer = #nav-slide เดิม (แถบแท็บ) แค่เปลี่ยนเป็นแผงลอยด้านซ้าย */ #nav-slide { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 256px; z-index: 1260; transform: translateX(-104%); transition: transform .3s var(--ease); flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 14px 10px; border-radius: 0 18px 18px 0; border-left: none; overflow-x: visible; overflow-y: auto; box-shadow: 6px 0 28px rgba(0, 0, 0, .18); } body.nav-open #nav-slide { transform: translateX(0); } /* คืน scrollbar ให้ drawer — .nav-slide ฐานซ่อนไว้ (เขียนตอนยังเป็นแถบนอน) แต่แนวตั้งรายการยาวเกินจอ ถ้าซ่อนต่อ ผู้ใช้จะไม่รู้ว่ามีเมนูอยู่ข้างล่างอีก */ #nav-slide { scrollbar-width: thin; scrollbar-color: var(--bd2) transparent; } #nav-slide::-webkit-scrollbar { display: block; width: 6px; } #nav-slide::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 3px; } #nav-slide::-webkit-scrollbar-track { background: transparent; } /* ★ 19 ก.ย.69 เจ้าของแจ้ง "เมนูรก" — แถวเตี้ยลง (เดิมสูง ~46px ทำให้เมนูยาวเกินจอ) แต่ยังกดง่ายบนมือถือ (~38px) */ #nav-slide .ntab { justify-content: flex-start; gap: 10px; padding: 9px 14px; font-size: var(--fs-sub); border-radius: 12px; } #nav-slide .nav-ind { border-radius: 12px; } /* หัวข้อหมวดใน drawer (หน้าหลัก / ทีม & สิทธิ์ / ตั้งค่าระบบ / ตรวจสอบ & Log) */ /* ★ ก.ย.69 — หัวข้อหมวดเป็น "ปุ่มพับได้" (accordion) · เจ้าของแจ้งว่าเมนูยาวเกินไป เปิด/ปิดจำไว้ใน localStorage 'navSec' · หมวดจัดการพับไว้เป็นค่าเริ่มต้น เหลือแค่หัวข้อ ⚠️ ต้องเป็น