/* ===== ธีมสี — สลับ light/dark ผ่าน data-theme บน ===== */ :root, [data-theme="light"] { --surface-0: #f7f7f8; --surface-1: #ffffff; --surface-2: #ffffff; --text-primary: #0c0c0d; --text-secondary: #6b6b70; --text-muted: #9a9a9e; --accent: #2563eb; --accent-tint: rgba(37, 99, 235, 0.10); --text-accent: #2563eb; --on-accent: #ffffff; --text-danger: #b91c1c; --border: rgba(12,12,13,0.08); --border-strong: rgba(12,12,13,0.14); --fill-primary: #0c0c0d; --on-primary: #ffffff; --fill-ghost-hover: rgba(12,12,13,0.045); --fill-ghost-selected: rgba(12,12,13,0.07); --radius: 12px; --shadow-card: 0 1px 2px rgba(12,12,13,0.04), 0 8px 20px rgba(12,12,13,0.05); } [data-theme="dark"] { --surface-0: #101114; --surface-1: #1c1f25; --surface-2: #1c1f25; --text-primary: #f2f3f5; --text-secondary: #a3a7ae; --text-muted: #6f7379; --accent: #4f8dfd; --accent-tint: rgba(79, 141, 253, 0.18); --text-accent: #6ea3fa; --on-accent: #ffffff; --text-danger: #f87171; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --fill-primary: #ffffff; --on-primary: #101114; --fill-ghost-hover: rgba(255,255,255,0.07); --fill-ghost-selected: rgba(255,255,255,0.12); --radius: 12px; --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 10px 26px rgba(0,0,0,0.35); } * { box-sizing: border-box; } html { overscroll-behavior: none; /* กันหน้าจอเด้ง (rubber-band) ตอนเลื่อนสุดขอบ ให้รู้สึกเหมือนแอพมากขึ้น */ height: 100%; } body { margin: 0; font-family: "Sarabun", -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif; background: var(--surface-0); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; overscroll-behavior: none; min-height: 100%; } input, select, textarea, button { font-family: inherit; font-size: 14px; } input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="email"], input[type="time"], input[type="tel"], textarea, select { height: 36px; border: 0.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-1); color: var(--text-primary); padding: 0 10px; } textarea { height: auto; padding: 8px 10px; } button { background: transparent; border: 0.5px solid var(--border-strong); border-radius: var(--radius); color: var(--text-primary); cursor: pointer; height: 36px; padding: 0 14px; transition: background 0.12s ease; } button:hover { background: var(--fill-ghost-hover); } button:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; font-weight: 600; } .btn-primary:hover { background: var(--accent); opacity: 0.92; } .icon-btn { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; } /* ===== Header bar — ใช้ร่วมกันทุกหน้า ===== */ .topbar { background: var(--surface-2); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 0.5px solid var(--border); } .topbar-brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; } .topbar-logo { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .topbar-logo img { width: 100%; height: 100%; object-fit: contain; } .topbar-title { font-size: 14px; font-weight: 500; } /* ===== การ์ดพื้นฐาน / การ์ดเลือกระบบ ===== */ .card { background: var(--surface-2); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-card); border: 0.5px solid var(--border); } .card-link { text-decoration: none; color: inherit; display: block; cursor: pointer; } .icon-badge { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .icon-badge i { color: var(--text-accent); font-size: 18px; } .icon-badge.sm { width: 26px; height: 26px; border-radius: 7px; margin-bottom: 0; } .icon-badge.sm i { font-size: 14px; } /* ===== Stat card (dashboard) ===== */ .stat-card { background: var(--surface-2); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-card); border: 0.5px solid var(--border); } .stat-card .stat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .stat-card .label { font-size: 11px; color: var(--text-secondary); margin: 0; } .stat-card .value { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -0.02em; } .stat-card .value .unit { font-size: 12px; font-weight: 400; color: var(--text-secondary); } .stat-card-link { text-decoration: none; color: inherit; display: block; cursor: pointer; transition: transform 0.1s ease; } .stat-card-link:hover { transform: translateY(-1px); } /* ===== แถวเมนู (มือถือ / sidebar) ===== */ .menu-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); text-decoration: none; color: var(--text-primary); border: 0.5px solid var(--border-strong); } .menu-row i:first-child { font-size: 20px; color: var(--accent); } .menu-row .chev { margin-left: auto; color: var(--text-muted); font-size: 16px; } a { color: var(--text-accent); text-decoration: none; } /* ===== Sidebar เข้ม (PC) — คงสีเข้มเสมอไม่ว่าจะสลับ light/dark ก็ตาม ===== */ .sidebar { background: #101114; padding: 20px 14px; color: #a3a7ae; border-right: 0.5px solid rgba(255,255,255,0.08); } .sidebar-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .sidebar-logo { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; } .sidebar-logo img { width: 100%; height: 100%; object-fit: contain; } .sidebar-brand-title { font-size: 13px; font-weight: 600; color: #fff; margin: 0; } .sidebar-brand-sub { font-size: 10px; color: #6f6f74; margin: 1px 0 0; } .sidebar-section-label { font-size: 10px; letter-spacing: 0.06em; color: #6f6f74; margin: 18px 0 6px 8px; text-transform: uppercase; } .sidebar-section-label:first-of-type { margin-top: 0; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 20px; color: #a0a0a5; text-decoration: none; font-size: 13px; } .sidebar-item i { font-size: 16px; } .sidebar-item.active { background: var(--accent); color: var(--on-accent); font-weight: 600; } /* ===== Bottom nav (มือถือ) ===== */ .bottom-nav { display: flex; border-top: 0.5px solid var(--border); background: var(--surface-2); position: sticky; bottom: 0; z-index: 1; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: var(--text-muted); text-decoration: none; } .bottom-nav-item i { font-size: 18px; } .bottom-nav-item span { font-size: 10px; } .bottom-nav-item.active .nav-icon-wrap { background: var(--accent); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; } .bottom-nav-item.active .nav-icon-wrap i { color: var(--on-accent); font-size: 17px; } .bottom-nav-item.active span { color: var(--text-primary); font-weight: 500; } .nav-icon-wrap { display: flex; align-items: center; justify-content: center; height: 34px; }