/* ===================================================== 1. BASE LAYOUT ตัวแปรหลักของระบบ (Design System) ใช้เก็บสี เงา radius และ background เพื่อให้ทั้งระบบใช้ theme เดียวกัน ถ้าต้องการเปลี่ยนสีทั้งระบบให้แก้ที่นี่ที่เดียว ===================================================== */ @import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600&display=swap"); /* ================= COLORS ================= */ :root { /* ---------- Role Colors ---------- */ --admin: #2563eb; --admin-hover: #1d4ed8; --manager: #3fb7ae; --manager-hover: #2fa39a; --adminQc: #f97316; --adminQc-hover: #ea580c; --sale: #25a385; --sale-hover: #1d948a; --saleA: #dc2626; --saleA-hover: #b91c1c; --executive: #7c3aed; --executive-hover: #6d28d9; --user: #6b7280; --user-hover: #4b5563; /* ---------- Sage Green ---------- */ --sage-100: #d9ebd9; --sage-300: #8cc68c; --sage-400: #66b366; --sage-500: #4d994d; /* ---------- Mint (ใช้ใน nav) ---------- */ --mint-100: #e8f7f0; --mint-200: #c8ead9; --mint-300: #9ed9bd; --mint-500: #5cbd9a; --mint-700: #2f8a6a; --mint-900: #1f5d47; --mint-light-50: #f4fbf8; /* ---------- Warm Gray ---------- */ --gray-50: #fafaf9; --gray-100: #f5f5f3; --gray-200: #e8e8e5; --gray-300: #d4d4cf; --gray-400: #a8a8a0; --gray-500: #787870; --gray-600: #5a5a52; /* ---------- Backgrounds ---------- */ --bg-base: #f9fcfb; --bg-card: #ffffff; --bg-subtle: #e8f7f0; --bg-muted: var(--mint-100); /* ---------- Borders ---------- */ --border: #e0ede5; --border-strong: var(--mint-200); /* ---------- Text ---------- */ --text: #111111; --text-primary: #2f5045; --text-secondary: #4a7060; --text-muted: #7a9b8b; --text-light: #a0bfbc; /* ---------- Accent / Status ---------- */ --accent: #e8a020; --accent-light: #f5d98a; --accent-dark: #059669; --success: #3a9e6a; --primary: #2563eb; --info: #3b82f6; --danger: #d95b5b; --danger-dark: #b83c3c; --danger-bg: #fee2e2; --danger-text: #b91c1c; /* ---------- Shadows ---------- */ --shadow-sm: 0 1px 4px rgba(92, 189, 154, 0.06); --shadow-md: 0 4px 16px rgba(92, 189, 154, 0.08); --shadow-lg: 0 8px 32px rgba(92, 189, 154, 0.12); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.02); /* ---------- Radius ---------- */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 9999px; /* ---------- Font sizes ---------- */ --font-xs: 12px; --font-sm: 13px; --font-base: 14px; --font-md: 15px; --font-lg: 17px; --font-xl: 21px; --font-2xl: 27px; /* ---------- Layout ---------- */ --container: 1200px; --gap-4: 16px; --page-bg: #f9fcfb; --surface: #ffffff; /* ---------- Ink (text shades) ---------- */ --ink-1: #111827; --ink-2: #374151; --ink-3: #6b7280; /* ---------- Lines ---------- */ --line: #e5e7eb; --line-strong: #d1d5db; /* ---------- Header gradients ตาม role ---------- */ --header-user: linear-gradient(135deg, #6b7280, #4b5563); --header-sale: linear-gradient(135deg, #25a385, #1d948a); --header-admin: linear-gradient(135deg, #2563eb, #1d4ed8); --header-manager: linear-gradient(135deg, #3fb7ae, #2fa39a); --header-executive: linear-gradient(135deg, #7c3aed, #6d28d9); --header-adminQc: linear-gradient(135deg, #f97316, #ea580c); --header-saleA: linear-gradient(135deg, #dc2626, #b91c1c); /* ---------- Transitions ---------- */ --transition: 0.2s ease; } /* ============================================================ LAYOUT MAIN : HEADER สำหรับหน้านี้ (Executive/Admin theme) เปลี่ยน gradient ตาม role ของหน้าได้ ============================================================ */ /* ตัวอย่างการสลับธีมตาม role ใส่ class ที่ เช่น */ body.role-admin .app-header { background: var(--header-admin); } body.role-manager .app-header { background: var(--header-manager); } body.role-executive .app-header { background: var(--header-executive); } body.role-sale .app-header { background: var(--header-sale); } body.role-saleA .app-header { background: var(--header-saleA); } body.role-adminQc .app-header { background: var(--header-adminQc); } body.role-user .app-header { background: var(--header-user); } /* =================================================== MATERIAL ICONS - Base Setup =================================================== */ .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; font-size: 20px; line-height: 1; color: inherit; /* ใช้สีจาก parent แทน บังคับสี */ user-select: none; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } /* Color variants */ .icon-primary { color: var(--primary); } .icon-blue { color: #3b82f6; } .icon-blue-dark{ color: #0093ad; } .icon-green { color: var(--success); } .icon-red { color: var(--danger); } .icon-orange { color: #f59e0b; } .icon-yellow { color: #eab308; } .icon-purple { color: #a855f7; } .icon-brown { color: #92400e; } .icon-cyan { color: var(--info); } .icon-white { color: #ffffff; } .icon-muted { color: var(--text-muted); } /* Size variants */ .icon-sm { font-size: 16px; } .icon-md { font-size: 20px; } .icon-lg { font-size: 24px; } .icon-xl { font-size: 32px; } /* Filled variant */ .icon-filled { font-variation-settings: "FILL" 1, "wght" 500; } /* ลบขีดเส้นใต้และให้สีเหมือนกับ text ปกติ */ a { text-decoration: none; color: inherit; } /* ===================================================== HEADER ===================================================== */ .app-header { padding: 10px 26px; border-bottom: 0; position: sticky; top: 0; z-index: 1000; width: 100%; /* background ตั้งใน bass.css ตาม role */ } .app-header-inner { /* ขยายเต็มความกว้างของ header แทนการล็อก max-width เพื่อให้เนื้อหาภายในกระจายตามหน้าจอจริง */ width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--gap-4); } .app-header .logo { display: flex; align-items: center; gap: 14px; } .app-header .logo-circle { width: 44px; height: 44px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .app-header .logo-circle img { width: 34px; height: 34px; object-fit: contain; } .app-header h1, .app-header h2 { margin: 0 0 2px; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.2; } .app-header .subtitle { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.85); } /* User box */ .user-box { display: flex; align-items: center; gap: 12px; } .user-avatar { width: 38px; height: 38px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.3); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; } .user-info { text-align: right; line-height: 1.3; } .user-name { color: #fff; font-weight: 600; font-size: 14px; } .user-role { font-size: 11px; color: rgba(255, 255, 255, 0.78); text-transform: uppercase; letter-spacing: 0.4px; } /* ===================================================== PAGE HEADER ===================================================== */ .page-header { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 20px 28px; } .page-header h1 { font-size: 18px; font-weight: 600; color: var(--text-1); letter-spacing: -.01em; margin-bottom: 3px; } .page-header p { font-size: .75rem; color: var(--text-2); letter-spacing: .04em; } /* ===================================================== MAIN / CONTAINER ===================================================== */ main { min-height: calc(100vh - 200px); padding: 24px 0; } .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* ===================================================== LOGOUT BTN ===================================================== */ .btn-logout { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.8); cursor: pointer; padding: 8px 16px; border-radius: var(--r-xl); font-size: 14px; color: var(--ink-2); font-family: "Kanit", sans-serif; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; } .btn-logout:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); transform: translateY(-1px); } .btn-logout:active { transform: scale(0.97); } /* ===================================================== FOOTER ===================================================== */ .footer { text-align: center; font-size: var(--font-xs); color: var(--text-light); padding: 20px 16px 28px; letter-spacing: 0.3px; } /* ===================================================== RESPONSIVE — DESKTOP (≥1024px) ===================================================== */ @media (min-width: 1024px) { .section .col-note { min-width: 160px; } } /* ===================================================== RESPONSIVE — TABLET (768–1023px) ===================================================== */ @media (min-width: 768px) and (max-width: 1023px) { .form-grid { grid-template-columns: repeat(2, 1fr); } #dynamicAttributes { grid-template-columns: repeat(2, 1fr); } } /* ===================================================== RESPONSIVE — MOBILE (≤767px) ===================================================== */ @media (max-width: 767px) { .app-header { padding: 10px 14px; } .app-header-inner { gap: 10px; } .app-header .logo { gap: 10px; min-width: 0; /* ให้ truncate ได้ */ flex: 1; } .app-header .logo-circle { width: 38px; height: 38px; } .app-header .logo-circle img { width: 28px; height: 28px; } .app-header h1, .app-header h2 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .subtitle { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-info { display: none; /* ซ่อนชื่อ/role บนจอเล็ก เหลือแต่ avatar + ปุ่ม */ } .btn-logout { padding: 6px 10px; font-size: 12px; } .page-header { padding: 22px 20px; border-radius: var(--radius-lg); } .page-header h1 { font-size: 20px; } } /* ===================================================== RESPONSIVE — SMALL MOBILE (≤480px) ===================================================== */ @media (max-width: 480px) { :root { --font-2xl: 22px; } .app-header .subtitle { display: none; /* จอเล็กมาก ซ่อน subtitle ให้ header ไม่อึดอัด */ } .app-header h1, .app-header h2 { font-size: 15px; } .page-header { padding: 18px 16px; } .page-header h1 { font-size: 18px; } input, select, textarea { font-size: 16px; /* กัน iOS auto-zoom */ } } /* ===================================================== PRINT ===================================================== */ @media print { .app-header, .app-nav, .actions, .btn-action-edit, .btn-action-del, .remove-btn, .btn-logout { display: none !important; } body { background: white; } .container { max-width: 100%; padding: 0; } .card, .section { box-shadow: none; border: 1px solid var(--border); break-inside: avoid; } }