/* สไตล์เพิ่มเติมนอกเหนือจาก Tailwind */ ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; } .drag-handle:active { cursor: grabbing; } /* ลากตารางเลื่อนดูทางขวา */ .drag-scroll-x { cursor: grab; } .drag-scroll-x.dragging { cursor: grabbing; user-select: none; } /* ปุ่มปักหมุด */ .js-pin-toggle { cursor: pointer; opacity: .55; transition: opacity .15s, transform .15s; } .js-pin-toggle:hover { opacity: 1; transform: scale(1.15); } .js-pin-toggle.js-pinned { opacity: 1; } /* แถวที่ปักหมุดไว้ในตาราง/การ์ด */ .pinned-row { background-color: #fffbeb; } html.dark .pinned-row { background-color: #422006; } /* ==================================================================== * Dark mode overrides * Tailwind CDN สร้าง utility class ทั่วไปแบบ runtime ไว้ให้แล้ว (เช่น .bg-white, .text-slate-800) * เพื่อไม่ต้องไล่แก้ทุกไฟล์ทีละบรรทัด เราจึง override เฉพาะ class ที่ใช้ซ้ำบ่อยๆ ตรงนี้แทน * โดยอิงจาก selector .dark ที่ toggle ไว้ที่ (ดู app.js: theme-toggle) * ==================================================================== */ html.dark body { background-color: #0f172a; } html.dark .bg-white { background-color: #1e293b; } html.dark .bg-slate-50 { background-color: #0f172a; } html.dark .bg-slate-100 { background-color: #1e293b; } html.dark .border-slate-100 { border-color: #334155; } html.dark .border-slate-200 { border-color: #334155; } html.dark .border-slate-300 { border-color: #475569; } html.dark .text-slate-800 { color: #f1f5f9; } html.dark .text-slate-700 { color: #e2e8f0; } html.dark .text-slate-600 { color: #cbd5e1; } html.dark .text-slate-500 { color: #94a3b8; } html.dark .text-slate-400 { color: #64748b; } html.dark .text-slate-300 { color: #94a3b8; } html.dark .divide-slate-100 > * + * { border-color: #334155; } html.dark .hover\:bg-slate-50:hover { background-color: #273449; } html.dark .hover\:bg-slate-100:hover { background-color: #334155; } html.dark .hover\:bg-slate-200:hover { background-color: #334155; } html.dark input, html.dark select, html.dark textarea { background-color: #0f172a; color: #f1f5f9; border-color: #475569; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } html.dark .bg-slate-800 { background-color: #f1f5f9; color: #0f172a; } html.dark .bg-slate-900 { background-color: #6366f1; } /* badge สี ให้อ่อนลงเล็กน้อยในโหมดมืดแต่ยังแยกสีได้ชัด */ html.dark .bg-red-100 { background-color: #450a0a; color: #fca5a5; } html.dark .bg-orange-100 { background-color: #431407; color: #fdba74; } html.dark .bg-yellow-100 { background-color: #422006; color: #fde047; } html.dark .bg-green-100 { background-color: #052e16; color: #86efac; } html.dark .bg-gray-100 { background-color: #1e293b; color: #94a3b8; } html.dark .text-red-700 { color: #fca5a5; } html.dark .text-orange-700 { color: #fdba74; } html.dark .text-yellow-700 { color: #fde047; } html.dark .text-green-700 { color: #86efac; } .px-5 {white-space: nowrap;}