/* ==========================================================================
theme.css — TrainView dark-mode + Google Sans (เหมือน TTS TrainMaster)
กลไก: Bootstrap 5 [data-bs-theme="light"|"dark"] บน + CSS variables
ตั้งค่าธีมก่อน paint ผ่าน theme.js / inline head script
ครอบเฉพาะหน้า user โต้ตอบ (index, freight, search, service_status,
incident, self_verify) — ไม่แตะจอ PID/บอร์ด (terminal_status, ktw)
========================================================================== */
/* ⚠️ แก้ stylesheet.css เมื่อไหร่ ต้องขยับเลข ?v= บรรทัดนี้ด้วย ไม่งั้นเครื่องที่เก็บไฟล์เดิมไว้จะไม่เห็นของใหม่ */
@import url('/v3/assets/fonts/stylesheet.css?v=20260730');
:root { --tv-font: 'Google Sans', sans-serif; }
/* ── Font: บังคับ Google Sans ทั้งเว็บ (override index.css ที่ fix NotoSans-Nolooped) ── */
html, body {
font-family: 'Google Sans', sans-serif !important;
}
.form-control, .form-select, .btn, .badge, .modal-content,
table, th, td, input, select, textarea, label, .nav-link, .navbar-brand,
h1, h2, h3, h4, h5, h6, p, span, div, a, li {
font-family: 'Google Sans', sans-serif !important;
}
/* bold / semibold classes ของเดิม (noto-*) ให้ map น้ำหนักให้ถูก */
b, strong, .fw-bold, .fw-bolder,
.noto-bold, .noto-semicondensed-bold, .noto-condensed-bold {
font-family: 'Google Sans', sans-serif !important;
font-weight: 700 !important;
}
.fw-semibold, .noto-semibold,
.noto-semicondensed-semibold, .noto-condensed-semibold {
font-family: 'Google Sans', sans-serif !important;
font-weight: 600 !important;
}
/* ── ตัวแปรพื้น/ตัวอักษรตามธีม ──────────────────────────────────────────── */
:root, [data-bs-theme="light"] {
color-scheme: light; /* native control (date/time/scrollbar) = โหมดสว่าง */
--tv-bg: #ececec;
--tv-surface: #ffffff;
--tv-text: #1d1d1d;
}
[data-bs-theme="dark"] {
color-scheme: dark; /* ★ native /select/ปุ่มปฏิทิน/scrollbar ตามธีมมืด (กันกล่องขาวหลุดกรอบ) */
--tv-bg: #181818;
--tv-surface: #232323;
--tv-text: #e6edf3;
}
/* พื้นหลัง/สีตัวอักษรหลัก — selector `html body` (0,0,2) ชนะ body เดิม (0,0,1)
ของ index.css ที่ fix background:#fff/#ececec โดยไม่ต้องแก้ index.css */
html body {
background: var(--tv-bg) !important;
color: var(--tv-text);
transition: background-color .25s, color .25s;
}
/* footer ขาวของเดิม → ตามธีม */
[data-bs-theme="dark"] .footerType {
background: var(--tv-surface) !important;
color: var(--tv-text) !important;
border-top: 1px solid rgba(255,255,255,.08);
}
/* การ์ด/กล่องพื้นขาวทั่วไป (index.css ใช้ #fff / #ececec ในหลายจุด) → ตามธีม */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-button {
background-color: var(--tv-surface);
color: var(--tv-text);
border-color: rgba(255,255,255,.10);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
background-color: #2c2c2c;
color: var(--tv-text);
}
/* form controls ตามธีม (กัน input ขาวจ้าบนพื้นดำ) */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
background-color: var(--tv-surface);
color: var(--tv-text);
border-color: rgba(255,255,255,.18);
color-scheme: dark; /* ย้ำที่ตัว control เอง — กัน native date/time picker render พื้นขาวแม้ html color-scheme ไม่ทันมีผล */
}
[data-bs-theme="dark"] .form-control::placeholder { color: #9aa4ad; }
/* hr ให้เห็นเส้นบนพื้นดำ */
[data-bs-theme="dark"] hr { border-top-color: rgba(255,255,255,.18); }
/* ── select2 dark (theme bootstrap-5 ไม่อ่านตัวแปร dark เอง ต้อง override) ── */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-container--default .select2-selection {
background-color: var(--tv-surface);
color: var(--tv-text);
border-color: rgba(255,255,255,.18);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
color: var(--tv-text);
}
[data-bs-theme="dark"] .select2-dropdown {
background-color: var(--tv-surface);
color: var(--tv-text);
border-color: rgba(255,255,255,.18);
}
[data-bs-theme="dark"] .select2-results__option {
background-color: var(--tv-surface);
color: var(--tv-text);
}
[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected] {
background-color: #0d6efd;
color: #fff;
}
[data-bs-theme="dark"] .select2-search__field {
background-color: #2c2c2c;
color: var(--tv-text);
border-color: rgba(255,255,255,.18);
}
/* ── โลโก้ รฟท. สลับตามธีม (DarkRed = light, White = dark) ─────────────────
ใช้ data-attribute สวิตช์รูปแทน JS: ตั้ง class .srt-logo-img แล้วซ่อน/โชว์ */
.srt-logo-light { display: inline-block; }
.srt-logo-dark { display: none; }
[data-bs-theme="dark"] .srt-logo-light { display: none; }
[data-bs-theme="dark"] .srt-logo-dark { display: inline-block; }
/* ── โบว์ดำไว้อาลัย: คงสีดำ (ถูกธรรมเนียม) + เงา/ขอบขาวบาง ๆ เฉพาะ dark mode
ให้ silhouette อ่านออกบนพื้นดำ ── */
[data-bs-theme="dark"] .condolence-bow-logo,
[data-bs-theme="dark"] .condolence-bow-logo-mini {
filter: drop-shadow(0 0 1px rgba(255,255,255,.9))
drop-shadow(0 0 2px rgba(255,255,255,.55));
}
/* ── ปุ่มสลับธีม (วางข้าง dropdown ภาษา) ─────────────────────────────────── */
.tv-theme-toggle {
border: none;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
padding: .35rem .55rem;
border-radius: .5rem;
display: inline-flex;
align-items: center;
}
.tv-theme-toggle:hover { background: rgba(127,127,127,.18); }
/* แสดงไอคอนตามธีม: light เห็นรูปจันทร์ (กดเพื่อเข้า dark), dark เห็นดวงอาทิตย์ */
.tv-theme-toggle .tv-ico-dark { display: inline-block; }
.tv-theme-toggle .tv-ico-light { display: none; }
[data-bs-theme="dark"] .tv-theme-toggle .tv-ico-dark { display: none; }
[data-bs-theme="dark"] .tv-theme-toggle .tv-ico-light { display: inline-block; }
/* ── nav แถบเมนูสีขาวเดิม (.nav_menu / .nav_menu_sm) → พื้นตามธีม ──────────
nav_terminal (#540906) เป็นสี brand คงไว้ทั้งสองธีม */
[data-bs-theme="dark"] .nav_menu,
[data-bs-theme="dark"] .nav_menu_sm {
background-color: var(--tv-surface) !important;
}
[data-bs-theme="dark"] .nav_menu li > .nav-link,
[data-bs-theme="dark"] .nav_menu_sm li > .nav-link {
color: #ff6b6b;
border-right-color: rgba(255,107,107,.4);
}
[data-bs-theme="dark"] .nav_menu li > .nav-link:hover {
background-color: #910000;
color: #ffffff !important;
}
[data-bs-theme="dark"] .showFront { color: #fff; }
[data-bs-theme="dark"] .offcanvas { background-color: var(--tv-surface); color: var(--tv-text); }
[data-bs-theme="dark"] .dropdown-menu {
background-color: var(--tv-surface);
color: var(--tv-text);
border-color: rgba(255,255,255,.12);
}
[data-bs-theme="dark"] .dropdown-menu .dropdown-item,
[data-bs-theme="dark"] .dropdown-menu li,
[data-bs-theme="dark"] .dropdown-menu .nav-link { color: var(--tv-text); }
[data-bs-theme="dark"] .dropdown-item:hover { background-color: rgba(127,127,127,.2); }
/* ── เก็บ surface สว่างที่ฮาร์ดโค้ดในหน้า index (card ขบวนรถ/ตาราง) ───────────
index.css fix: `body,td,th{background:#ececec;color:#000}` + card มือถือ `bg-white`
→ ต้อง override ใน dark ไม่งั้นเซลล์/การ์ดมือถือขาวค้าง อ่านไม่ออก */
[data-bs-theme="dark"] td,
[data-bs-theme="dark"] th,
[data-bs-theme="dark"] table {
background-color: transparent;
color: var(--tv-text);
}
/* card มือถือใน index/freight ใช้ class .bg-white ตรง ๆ */
[data-bs-theme="dark"] .bg-white {
background-color: var(--tv-surface) !important;
color: var(--tv-text) !important;
}
/* hover ของการ์ดขบวนรถ (index.css ใช้ #ececec) */
[data-bs-theme="dark"] .trainCard:hover {
background-color: #2c2c2c !important;
}
/* การ์ด Bootstrap + card-body + header ให้ตามธีมแน่นอน (กัน .card-body พื้นขาว) */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .searchCard {
background-color: var(--tv-surface);
color: var(--tv-text);
}
/* card-header แบบ subtle (bg-*-subtle) บน Bootstrap เก่าอาจไม่ปรับเอง — ทำให้พอเห็น */
[data-bs-theme="dark"] .card-header {
border-bottom-color: rgba(255,255,255,.10);
}
/* #topbarnav sticky (index.css ตั้ง #ececec) */
[data-bs-theme="dark"] #topbarnav,
[data-bs-theme="dark"] #topbarNav { background-color: var(--tv-bg); }
/* ══════════════════════════════════════════════════════════════════════════
ธีมสีใหม่ (2026-06-18): primary = น้ำเงิน #004AAD, secondary = แดง #d4161d
แทนที่ brand แดงเดิม (#800020/#910000/#8f0d16/#540906) ผ่าน override
(ไม่ต้องรื้อ