/* ═══════════════════════════════════════════════════════════ DARK MODE — ใช้ได้กับทั้ง lidar_info.css และ orthoservice.css วิธีใช้: เพิ่ม ใน ของทุกหน้า ═══════════════════════════════════════════════════════════ */ /* ── Dark Mode Variables ── */ [data-theme="dark"] { /* Backgrounds */ --bg: #0f172a; --surface: #1e293b; --surface2: #243044; /* Borders */ --border: #334155; --border2: #2a3a52; /* Text */ --text: #e2e8f0; --text2: #94a3b8; --text3: #4e6680; /* Accent (สว่างขึ้นเพื่อให้อ่านได้บน dark bg) */ --accent: #4d8ef0; --accent-l: #1a2d4a; --accent-d: #2563eb; /* Green */ --green: #34d399; --green-l: #064e3b; /* Orange */ --orange: #fb923c; --orange-l: #431407; /* Red */ --red: #f87171; --red-l: #450a0a; /* Shadow */ --shadow: 0 2px 8px rgba(0,0,0,.4); --shadow-lg: 0 8px 30px rgba(0,0,0,.55); } /* ── Dark Mode: Hardcoded color overrides ── */ /* Table header */ [data-theme="dark"] thead th { background: #1a2d4a; color: #7eb3f5; border-bottom-color: #2d4a70; } [data-theme="dark"] tbody tr:hover { background: #1e2d42; } /* File icons */ [data-theme="dark"] .fi.no { background: #1e293b; color: #4e6680; border-color: #2d3f55; } /* Modal */ [data-theme="dark"] .mbox { background: var(--surface); border: 1.5px solid var(--border); } [data-theme="dark"] .mhead { background: var(--surface2); border-bottom-color: var(--border); } [data-theme="dark"] .mbody { background: var(--surface); } [data-theme="dark"] .overlay { background: rgba(0,0,0,.7); } /* Form inputs */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #243044 !important; border-color: #334155 !important; color: #e2e8f0 !important; color-scheme: dark; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #4e6680 !important; } [data-theme="dark"] select option { background: #1e293b; color: #e2e8f0; } /* KPI cards */ [data-theme="dark"] .kpi { background: var(--surface); border-color: var(--border); } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #1e293b; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; } /* Map legend */ [data-theme="dark"] .map-legend { background: #1e293b; border-color: #334155; } /* Task cards */ [data-theme="dark"] .task-card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .task-card.done-card { background: #1a2535; opacity: .7; } /* Proc panel */ [data-theme="dark"] .proc-panel { background: var(--surface); border-color: var(--border); } /* RTAF table */ [data-theme="dark"] table { color: var(--text); } [data-theme="dark"] tbody tr { border-bottom-color: var(--border2); } /* Topbar ยังคง accent สีเดิม ไม่เปลี่ยน */ [data-theme="dark"] .topbar { background: var(--accent-d, #1057b8); } /* Ortho Service specific */ [data-theme="dark"] .hero { background: linear-gradient(135deg, #0d2a6e 0%, #0a1e52 60%, #071540 100%); } [data-theme="dark"] .pcard { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .pcard-body { background: var(--surface); } [data-theme="dark"] .pcard-specs .spec-item { background: var(--surface2); } [data-theme="dark"] .cart-panel { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .cart-head { background: var(--surface2); border-color: var(--border); } [data-theme="dark"] .cart-item { background: var(--surface2); border-color: var(--border); } [data-theme="dark"] .filter-bar { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .dl-box { background: var(--surface); border: 1.5px solid var(--border); } [data-theme="dark"] .det-box { background: var(--surface); } [data-theme="dark"] .det-head { background: var(--surface2); border-color: var(--border); } [data-theme="dark"] .det-item { background: var(--surface2); border-color: var(--border2); } /* Sidebar map */ [data-theme="dark"] .map-sidebar { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .map-sidebar-head { background: var(--surface2); border-color: var(--border); } [data-theme="dark"] .map-area-item:hover { background: #1e2d42; } [data-theme="dark"] .map-area-item.selected { background: #1a2d4a; border-left-color: var(--accent); } /* Toggle button */ .theme-toggle-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 1rem; line-height: 1; transition: all .15s; display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: .82rem; font-weight: 600; } .theme-toggle-btn:hover { background: rgba(255,255,255,.22); } /* Transition เมื่อสลับ theme */ body, .topbar, .kpi, .mbox, .mhead, .overlay, .tcard, .fp, .map-sidebar, .pcard, .cart-panel, .dl-box, .det-box, .task-card { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }