/* ===================================================================== The Go-Getters CRM - Design System ===================================================================== แนวทาง: ยืมโครงสร้าง / neutral / spacing / radius จาก Flux Dashboard (flux.dashboardpack.com) แล้วสลับสี accent เป็นสีประจำแบรนด์ The Go-Getters ค่าที่ถอดมาจาก Flux ของจริง: - neutral ทั้งชุดอิงเฉดอมน้ำเงิน (OKLCH hue 285) ไม่ใช่เทากลาง ทำให้หน้าดูสะอาดและเย็นตากว่าเทาธรรมดา - radius 0.875rem = 14px - sidebar เป็นสี "อ่อนเกือบขาว" ไม่ใช่ดำแบบ template ทั่วไป - เน้นเส้นขอบบาง 1px แทนเงาหนา ๆ - card padding 1.25rem / 1.75rem ===================================================================== */ /* --------------------------------------------------------------------- 1) Design Tokens --------------------------------------------------------------------- */ :root { /* ---- สีประจำแบรนด์ The Go-Getters ---- */ --gg-dark-blue: #164F73; --text-accent: #164F73; /* สีตัวอักษร accent: light=น้ำเงิน */ --gg-teal: #2AAE9B; --gg-teal-dark: #229184; --gg-teal-soft: #E8F7F4; --gg-light-teal: #A8E3D7; --gg-orange: #F37B2A; --gg-yellow: #F4C84A; --gg-red: #EF5B63; /* ---- Neutral (ถอดจาก Flux: OKLCH hue 285 เฉดอมน้ำเงิน) ---- */ --bg: #FAFAFD; --card: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F3FA; --fg: #172033; --fg-strong: #07060F; --fg-muted: #62626F; --border: #E7E7EE; --border-strong: #D8D8E3; --muted: #F2F3FA; --muted-fg: #62626F; /* ---- Sidebar (Flux ใช้สีอ่อน) ---- */ --sidebar-bg: #FBFBFF; --sidebar-fg: #2D2D38; --sidebar-hover: #F0F0FF; --sidebar-border: #E7E7EE; /* ---- สีสถานะ ---- */ --success: var(--gg-teal); --success-bg: #E8F7F4; --warning: #C9971F; --warning-bg: #FDF6E3; --danger: var(--gg-red); --danger-bg: #FDECEE; --info: var(--gg-dark-blue); --info-bg: #E9F0F5; /* ---- รูปทรง ---- */ --radius: .875rem; --radius-sm: .5rem; --radius-xs: .375rem; --radius-lg: 1.25rem; --radius-pill: 999px; /* ---- เงา (Flux ใช้เบามาก พึ่งเส้นขอบเป็นหลัก) ---- */ --shadow-xs: 0 1px 2px rgba(7, 6, 15, .04); --shadow-sm: 0 1px 3px rgba(7, 6, 15, .06), 0 1px 2px rgba(7, 6, 15, .04); --shadow-md: 0 4px 16px rgba(7, 6, 15, .08); --shadow-lg: 0 12px 32px rgba(7, 6, 15, .12); /* ---- ขนาด layout ---- */ --sidebar-w: 264px; --navbar-h: 64px; --card-pad: 1.25rem; --ease: cubic-bezier(.4, 0, .2, 1); } /* --------------------------------------------------------------------- 1b) Dark theme --------------------------------------------------------------------- เปลี่ยนเฉพาะสี neutral ส่วนสีแบรนด์ (teal/red/...) คงเดิม สคริปต์ใน ตั้ง data-theme="dark" ให้ก่อนเรนเดอร์ กันหน้าจอกระพริบ และตั้ง data-bs-theme="dark" ให้ Bootstrap component (dropdown/modal/input) ปรับตามด้วย --------------------------------------------------------------------- */ :root[data-theme="dark"] { /* โทนเขียวเข้ม (forest/teal) — สว่างขึ้นจากเดิมให้อ่านสบายตา */ --bg: #16241D; --card: #1E3128; --surface: #1E3128; --text-accent: #F4C84A; /* dark: เปลี่ยนตัวอักษรน้ำเงิน -> เหลือง */ --surface-2: #274035; --fg: #E9EFEB; --fg-strong: #FFFFFF; --fg-muted: #9EABA3; --muted-fg: #9EABA3; --border: #2F4739; --border-strong: #3D5A4A; --muted: #223730; --sidebar-bg: #193026; --sidebar-fg: #CFDAD3; --sidebar-hover: #22402F; --sidebar-border: #264034; --gg-teal-soft: rgba(42, 174, 155, .16); --success-bg: rgba(42, 174, 155, .16); --warning-bg: rgba(244, 200, 74, .16); --danger-bg: rgba(239, 91, 99, .16); --info-bg: rgba(42, 174, 155, .14); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 16px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } /* ---- ปรับจุดที่ hardcode สีสว่าง ให้เข้ากับโทนเขียวเข้ม ---- */ /* navbar bg เดิม hardcode เป็นสีขาวโปร่ง ต้อง override */ :root[data-theme="dark"] .gg-navbar { background: rgba(22, 36, 29, .85); } /* sidebar ไล่เฉดเขียว บน→ล่าง ตามภาพอ้างอิง */ :root[data-theme="dark"] .gg-sidebar { background: linear-gradient(180deg, #204534 0%, #16281D 100%); } /* เมนูที่เปิดอยู่ = ไล่เฉดเทียลสว่าง ตัวหนังสือขาว */ :root[data-theme="dark"] .gg-nav-link.active { background: linear-gradient(135deg, rgba(42, 174, 155, .85) 0%, rgba(34, 145, 132, .6) 100%); color: #fff; } :root[data-theme="dark"] .gg-nav-link.active i { color: #fff; } /* --------------------------------------------------------------------- Dark mode: KPI icon ให้ "เรืองแสง" อ่านชัด ไม่กลืนพื้นเข้ม ปัญหาเดิม: .blue ใช้สีน้ำเงินเข้ม (#164F73) บนพื้นดำ → มองไม่เห็น แก้: ใช้สีสว่างขึ้นทุกโทน + drop-shadow ให้เรืองแสงตามสีตัวเอง --------------------------------------------------------------------- */ :root[data-theme="dark"] .gg-kpi-icon.teal { color: #40D6C0; background: rgba(64, 214, 192, .16); } :root[data-theme="dark"] .gg-kpi-icon.blue { color: #5FB0F0; background: rgba(95, 176, 240, .16); } :root[data-theme="dark"] .gg-kpi-icon.orange { color: #FF9D52; background: rgba(255, 157, 82, .16); } :root[data-theme="dark"] .gg-kpi-icon.yellow { color: #FFD75E; background: rgba(255, 215, 94, .16); } :root[data-theme="dark"] .gg-kpi-icon.red { color: #FF7D83; background: rgba(255, 125, 131, .16); } :root[data-theme="dark"] .gg-kpi-icon i { filter: drop-shadow(0 0 4px currentColor); } /* label ของ KPI ให้สว่างขึ้น อ่านง่าย */ :root[data-theme="dark"] .gg-kpi-label { color: #C7D3CD; } /* ไอคอนหมวดในกล่องอันดับ (Top Sales/Performance/AOV/Order) ให้เด่น ไม่จม */ :root[data-theme="dark"] #myRankBody > div > .bi:first-child { color: var(--gg-teal); } /* โลโก้ตัวอักษร GO (fallback) มองเห็นยากบนพื้นเข้ม เพิ่มพื้นให้ */ :root[data-theme="dark"] .gg-brand-logo { background: #fff; } /* --------------------------------------------------------------------- 2) Base --------------------------------------------------------------------- */ /* Inter มาก่อน Sarabun โดยตั้งใจ Inter ไม่มีสระ/พยัญชนะไทย เบราว์เซอร์จึงตกไปใช้ Sarabun เฉพาะอักขระไทย ผลคือ ตัวเลขและอังกฤษได้ความคมของ Inter (แบบ Flux) ส่วนภาษาไทยได้ Sarabun ตามที่ requirement กำหนด — ได้ทั้งสองอย่าง */ body { font-family: 'Inter', 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--bg); color: var(--fg); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ตัวเลขในตาราง/KPI ต้องเรียงตรงกันทุกหลัก ไม่งั้นเทียบยอดด้วยตาลำบาก */ .gg-num, .gg-kpi-value, table td.text-end, table th.text-end, .gg-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .gg-mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } a { text-decoration: none; } /* hidden ต้องชนะ utility class ของ Bootstrap [hidden] ปกติได้ display:none จาก UA stylesheet ซึ่งไม่มี !important แต่ .d-flex ของ Bootstrap เป็น display:flex !important พอใช้คู่กันอย่าง