/* globals.css — Global styles for TrainView (ttsmaster_UAT)
   Google Sans only. Self-hosted via /v3/assets/fonts/stylesheet.css.
*/
@import url('/v3/assets/fonts/stylesheet.css');

/* Mobile fix: keep select2 dropdowns on-screen (เคยตกขอบจอ/ตำแหน่งเพี้ยนบนมือถือ).
   จัดให้ dropdown อยู่กึ่งกลางจอ + กว้างไม่เกิน viewport เฉพาะหน้าจอเล็ก (≤ Bootstrap sm). */
@media (max-width: 575.98px) {
    .select2-container--open .select2-dropdown {
        left: 50% !important;
        transform: translateX(-50%);
        max-width: 94vw !important;
        width: 94vw !important;
    }
}

/* (2026-06-21) Modal เนื้อหายาวเลื่อนไม่ได้ + footer คาบังเนื้อหา (ทุกหน้าที่ใช้ modal-fullscreen
   เช่น จัดริ้วขบวน ขั้น "ตรวจสอบ"). ทำให้ .modal-body เป็น flex child ที่ scroll ได้จริง:
   flex:1 1 auto + min-height:0 (min-height:0 = หัวใจ — ไม่งั้น flex child ไม่ยอมหดให้เกิด scroll),
   footer (modal-footer = sibling) จึงคงอยู่ล่างเสมอ ไม่ทับเนื้อหา. */
.modal-fullscreen .modal-content > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* (2026-06-21) Bootstrap 5.3 contextual table classes (.table-success/primary/... ) ไม่ปรับตาม dark theme
   (พื้น pastel อ่อน + text ดำ ตลอด) → override ใต้ dark ให้พื้นเข้ม + ตัวอักษรสว่าง.
   ครอบทุกตารางที่ใช้ class พวกนี้ (รอบวิ่ง/กำหนดเวลา/สถานะ ฯลฯ) ทีเดียว */
[data-bs-theme="dark"] .table-success { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(25,135,84,.22); --bs-table-border-color: rgba(25,135,84,.35); }
[data-bs-theme="dark"] .table-primary { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(13,110,253,.22); --bs-table-border-color: rgba(13,110,253,.35); }
[data-bs-theme="dark"] .table-secondary { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(108,117,125,.28); --bs-table-border-color: rgba(108,117,125,.42); }
[data-bs-theme="dark"] .table-info { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(13,202,240,.18); --bs-table-border-color: rgba(13,202,240,.3); }
[data-bs-theme="dark"] .table-warning { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(255,193,7,.18); --bs-table-border-color: rgba(255,193,7,.3); }
[data-bs-theme="dark"] .table-danger { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(220,53,69,.20); --bs-table-border-color: rgba(220,53,69,.35); }
[data-bs-theme="dark"] .table-light { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(255,255,255,.06); --bs-table-border-color: var(--bs-border-color); }

/* role switcher (เปลี่ยนสิทธิ์) — กันเมนูล้นจอตอน navbar ยุบ (มือถือ/แท็บเล็ต < xl).
   user ที่มีหลายสิทธิ์ (เช่น admin/ทดสอบ = 13 รายการ) เมนูจะยาวเกินความสูงจอ →
   รายการล่าง ๆ หลุดใต้ fold แตะไม่ได้ (เมนู position:absolute ไม่เลื่อนตามเพจ).
   จำกัดความสูง + ให้ scroll ในเมนูเอง เพื่อให้เอื้อมถึงทุกสิทธิ์. */
@media (max-width: 1199.98px) {
    #ttsRoleSwitchWrap .dropdown-menu {
        max-width: 86vw;
        overflow-x: hidden;
        max-height: 70vh;
        overflow-y: auto;
    }
}

:root {
    --tv-font: 'Google Sans';
}

html,
body {
    font-family: 'Google Sans' !important;
    background-color: #ececec;
    color: #1d1d1d;
}
[data-bs-theme="dark"] body,
.dark-mode body,
html.dark body {
    background-color: #181818;
    color: #e6edf3;
}

/* ─── Theme-aware overrides for legacy hardcoded `body { background: #0d1117 }`
   inline styles. These selectors (`html body`) have specificity 0,0,2 so they
   beat plain `body { ... }` (0,0,1) regardless of load order. Same logic for
   `.form-control` / `.form-select` whose inline forms hardcode a dark bg.
   See feedback_dynamic_theme_required.md */
html, html body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    min-height: 100vh;
}
html .form-control,
html .form-select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
html .form-control:focus,
html .form-select:focus {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
/* Active page-header gradient is brand — let it stay red in both themes,
   but the text on it must remain white. */
html .page-header {
    color: #fff;
}
html .page-header h1,
html .page-header h2,
html .page-header h3 { color: #fff; }

.form-control,
.form-select,
.btn,
.badge,
.modal-content,
table,
th,
td,
input,
select,
textarea,
label,
.nav-link,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
li {
    font-family: 'Google Sans' !important;
}

/* Force bold → GoogleSans-Bold (weight 700), semibold → GoogleSans-SemiBold (weight 600) */
b,
strong,
.fw-bold,
.fw-bolder,
.noto-bold,
.noto-semicondensed-bold,
.noto-condensed-bold {
    font-family: 'Google Sans' !important;
    font-weight: 700 !important;
}

.fw-semibold,
.noto-semibold,
.noto-semicondensed-semibold,
.noto-condensed-semibold {
    font-family: 'Google Sans' !important;
    font-weight: 600 !important;
}

/* มุมมอง (list / graph) toggle — sized to content but visually louder.
   Bootstrap's btn-group w-100 used to stretch the buttons across half the
   row; we want a compact pill with a bit of emphasis instead so the user
   can still find it quickly. */
.tts-view-toggle .btn {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    border-width: 2px;
}
.tts-view-toggle .btn-check:checked + .btn {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

/* In light mode, inline table-dark rows (used for day/section headers in the
   train list) must flip to a legible light look — otherwise switching from
   dark → light leaves black bands with invisible text. applyTheme() only
   strips table-dark from <table>, not from <tr>/<th>, so handle it here. */
html:not(.dark-mode) tr.table-dark,
html:not(.dark-mode) tr.table-dark > th,
html:not(.dark-mode) tr.table-dark > td,
html:not(.dark-mode) th.table-dark,
html:not(.dark-mode) td.table-dark {
    --bs-table-bg: #e9ecef;
    --bs-table-color: #212529;
    --bs-table-border-color: #dee2e6;
    background-color: #e9ecef !important;
    color: #212529 !important;
}
/* ─────────────────────────────────────────────────────────
   Theme-aware .card-dark — overrides ALL per-page hardcoded
   .card-dark { background:#161b22 } definitions. Selector
   `html .card-dark` (specificity 0,0,2) beats local `.card-dark`
   (0,0,1) without !important, so existing pages auto-respect
   the user's light/dark preference.
   See feedback_dynamic_theme_required.md */
html .card-dark {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    color: var(--bs-body-color);
}
html .card-dark .card-header,
html .card-dark > .card-header {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}
html .card-dark .card-body,
html .card-dark > .card-body {
    color: var(--bs-body-color);
}
/* Common hardcoded dark surfaces that should follow theme: */
html .info-box {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* ─────────────────────────────────────────────────────────
   R7F-5 (2026-05-31): Global form-check / form-switch sizing
   ─ Bootstrap 5 default = 1em width; some inherited fonts/themes
     make them appear too tall. Lock to a consistent compact size. */
.form-check-input {
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
}
.form-switch .form-check-input {
    width: 2em !important;
    height: 1em !important;
}
.form-check {
    padding-left: 1.5em;
    min-height: 1.5em;
}
.form-switch {
    padding-left: 2.5em;
}
.form-check-label {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────
   ช่องกรอกตัวเลขล้วน (.numeric-text — helper numericInput.js)
   user 30/07/2569: "ไม่ชอบ slider เลื่อนขึ้นลง ทุกๆจุดไม่ควรใช้ type=number"
   ช่องพวกนี้เป็น type=text อยู่แล้ว (สังเกต input ตัดตัวอักษรทิ้ง) — กฎนี้ไว้ซ่อน
   สปินเนอร์เผื่อ fallback ที่ยังเป็น type=number ในบางเบราว์เซอร์ */
input.numeric-text::-webkit-outer-spin-button,
input.numeric-text::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.numeric-text[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ─────────────────────────────────────────────────────────
   🔴 กัน dropdown (select2) "ห้อย/ซ้อนกันเป็นชั้น" อ่านไม่ออก — หลักประกันในไฟล์ที่โหลดแน่นอน
   user 30/07/2569: จอ .67 ยังเห็นช่อง "รายการ" ซ้อน แม้ deploy + hard-reload + เปลี่ยน browser แล้ว
   ต้นเหตุ: ถ้า CSS ธีมของ select2 (ไฟล์แยก) โหลดไม่ติด (404/CDN/deploy หลุด) → option เป็น <li> ดิบ
   + ฟอนต์ Google Sans ทำ line-box แคบจนตัวอักษรทับกัน. globals.css ถูก <link> ใน <head> ทุกหน้า
   (ไม่ผ่าน loader/ไฟล์ select2) ⇒ วางกฎกันเบียดที่นี่ = อ่านออกเสมอ แม้ CSS ธีม select2 หาย 100%.
   ใช้ selector ระดับ .select2-results__option ตรง ๆ (ไม่พึ่ง ancestor/theme class) + !important
   เพื่อให้ชนะทั้งธีมที่ collapse ความสูง และกรณีไม่มีธีมเลย */
/* 🔴 กล่อง dropdown ต้อง "ทึบ 100% + ลอยเหนือ cell แถวอื่น" — กันเปิดแล้วเห็นเนื้อหาแถวข้างล่างทะลุ
   (user 30/07/2569 "select2 รายการ ลอยบนตัวอื่น ทะลุไปโดนแถว 3-4"): พื้น dropdown โปร่ง/z-index ต่ำ
   → เห็นช่องแถวล่างทะลุขึ้นมา. ตรึงพื้นทึบทุกชั้น (dropdown/results/options) + z สูงกว่าทั้ง cell และ modal */
.select2-dropdown {
    background-color: var(--bs-body-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    z-index: 10060 !important;
}
.select2-results,
.select2-results__options {
    background-color: var(--bs-body-bg, #fff) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.select2-results__option {
    min-height: 32px !important;
    line-height: 1.6 !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    display: block !important;
    white-space: normal !important;
    background-color: var(--bs-body-bg, #fff);   /* ทึบต่อแถว (ไม่ !important ให้ hover/selected ทับได้) */
}
/* hover/เลือกอยู่ ต้องทึบ ไม่โปร่ง (ค่าดีฟอลต์ธีม bootstrap-5) */
/* ⚠️ ลำดับสำคัญ: "เลือกอยู่" ต้องมาก่อน "hover" เสมอ
   เดิมกฎ [aria-selected="true"] อยู่ท้ายและไม่ได้ตั้ง color — specificity เท่ากับกฎ hover (0,2,0)
   ตัวหลังจึงชนะเฉพาะ background ส่วน color:#fff จากกฎ hover ยังติดมา
   ⇒ hover ทับตัวเลือกอยู่ = ตัวหนังสือขาวบนพื้นเทาอ่อน อ่านไม่ออกใน light mode
   (bug user 2026-08-01 หน้าบันทึกเหตุช้าถึง/ช้าออก) */
.select2-results__option[aria-selected="true"] {
    background-color: var(--bs-secondary-bg, #e9ecef) !important;
    color: var(--bs-body-color, #212529) !important;
}
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[aria-selected="true"] {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   select2 dark theme (user 2026-06-12: select2 ยัง lock light theme
   — พูดหลายรอบแล้ว) — theme bootstrap-5 ของ select2 ไม่อ่านตัวแปร
   dark ของ Bootstrap เอง ต้อง override เองทุกส่วน ใช้ได้ทุกหน้า */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
html.dark-mode .select2-container--bootstrap-5 .select2-selection,
.dark-mode .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg, #212529);
    color: var(--bs-body-color, #dee2e6);
    border-color: var(--bs-border-color, #495057);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
html.dark-mode .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.dark-mode .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color, #dee2e6);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder,
html.dark-mode .select2-container--bootstrap-5 .select2-selection__placeholder,
.dark-mode .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--bs-secondary-color, #adb5bd);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
html.dark-mode .select2-container--bootstrap-5 .select2-dropdown,
.dark-mode .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg, #212529);
    color: var(--bs-body-color, #dee2e6);
    border-color: var(--bs-border-color, #495057);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field,
html.dark-mode .select2-container--bootstrap-5 .select2-search__field,
.dark-mode .select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--bs-tertiary-bg, #343a40);
    color: var(--bs-body-color, #dee2e6);
    border-color: var(--bs-border-color, #495057);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option,
html.dark-mode .select2-container--bootstrap-5 .select2-results__option,
.dark-mode .select2-container--bootstrap-5 .select2-results__option {
    color: var(--bs-body-color, #dee2e6);
}
/* 🔴 ธีมมืด: บังคับพื้น dropdown ทึบด้วยสี "แข็ง" (#212529 = พื้นเดียวกับกล่อง select โดยรอบ) ไม่พึ่ง var
   และไม่พึ่งคลาสธีมของ select2 — กัน "พื้นโปร่งเห็นแถวข้างล่างทะลุ" ในธีมมืดแม้ CSS ธีม select2 ไม่โหลด */
html.dark-mode .select2-dropdown,
[data-bs-theme="dark"] .select2-dropdown,
html.dark-mode .select2-results,
[data-bs-theme="dark"] .select2-results,
html.dark-mode .select2-results__options,
[data-bs-theme="dark"] .select2-results__options,
html.dark-mode .select2-results__option,
[data-bs-theme="dark"] .select2-results__option {
    background-color: #212529 !important;
    color: #dee2e6 !important;
}
html.dark-mode .select2-results__option--highlighted,
[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: #0d6efd !important;
    color: #fff !important;
}
html.dark-mode .select2-results__option[aria-selected="true"],
[data-bs-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: #343a40 !important;
    color: #dee2e6 !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
html.dark-mode .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.dark-mode .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd;
    color: #fff;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
html.dark-mode .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.dark-mode .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: var(--bs-tertiary-bg, #343a40);
}

/* ─────────────────────────────────────────────────────────
   ระบบแจ้งผล action กลาง (user 2026-06-12 ข้อ 11):
   uiToast() ใน utils.js — เด้งล่างกลางจอ ให้เด่น (แบบ /ktw/gatemanage) */
#ttsUiToast {
    position: fixed;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12000;
    display: none;
    min-width: 260px;
    max-width: 92vw;
    text-align: center;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.45);
    /* ข้อความ 2 บรรทัดต้องขึ้นบรรทัดใหม่จริง (เช่น ผลบันทึก + เวลาที่ระบบอัตโนมัติจะทำงาน)
       — fallback inline ใน utils.js มีบรรทัดนี้อยู่แล้ว ของที่นี่ตกหล่นไป */
    white-space: pre-line;
}
#ttsUiToast.toast-success { background: #1f7a3d; }
#ttsUiToast.toast-danger  { background: #b02a37; }
#ttsUiToast.toast-warning { background: #8a6d00; }
#ttsUiToast.toast-info    { background: #1f5d8a; }

/* ── Nav: จอแนวตั้ง (portrait) → หุบเป็นปุ่มเมนู (hamburger) ทุกความกว้าง ──
   Bootstrap .navbar-expand-xl หุบตามความกว้าง (<1200) เท่านั้น → จอ portrait ที่กว้าง ≥1200
   จะกางค้าง items ล้น. บังคับหุบเมื่อ orientation: portrait กับทุก nav (ทุก role).
   ใช้ !important ทับ utility ของ Bootstrap ที่เป็น !important. */
@media (orientation: portrait) {
    .navbar-expand-xl .navbar-toggler { display: inline-block !important; }
    .navbar-expand-xl > .container,
    .navbar-expand-xl > .container-fluid { flex-wrap: wrap !important; }
    .navbar-expand-xl .navbar-collapse:not(.show):not(.collapsing) { display: none !important; flex-basis: 100%; }
    /* กางเมนู = flex column + เลื่อนได้ (เมนูแอดมินยาวเกินจอ) — เดิม block ล้นจอ scroll ไม่ได้ */
    .navbar-expand-xl .navbar-collapse.show,
    .navbar-expand-xl .navbar-collapse.collapsing {
        display: flex !important; flex-direction: column !important; flex-basis: 100%;
        max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
        overflow-y: auto; overflow-x: hidden;
    }
    .navbar-expand-xl .navbar-nav { flex-direction: column !important; }
    .navbar-expand-xl .navbar-nav .dropdown-menu { position: static !important; }
    /* เมนูทั้งหมดต่อท้ายโลโก้ทันที: ชื่อผู้ใช้/เวอร์ชัน/สลับบทบาท/โหมดกลางคืน (navbar-text)
       อยู่ท้ายสุดของเมนู ไม่ใช่บนสุด (user 2026-07-28 — เดิมเคยดันขึ้นบนสุดเพราะกลัวแตะไม่ถึง
       แต่ตอนนี้ .navbar-collapse.show ข้างบน scroll ได้แล้ว (overflow-y:auto) จึงเลื่อนลงไปกดได้เสมอ).
       ไม่ต้องตั้ง order — ไม่มี order ทั้งคู่ = เรียงตาม DOM (ul เมนูมาก่อน navbar-text อยู่แล้ว). */
    .navbar-expand-xl .navbar-collapse .navbar-text {
        width: 100%;
        display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
        padding-top: .5rem; margin-top: .25rem;
        border-top: 1px solid rgba(255,255,255,.15);
    }

    /* Navbar name/version/mode/role-switch cluster (auth.js#loadNavExtras +
       setupRoleSwitcher inject it) lives inside .navbar-text above — must be
       keyed off the same condition (orientation: portrait), not a separate
       max-width breakpoint, or wide-but-portrait screens (tablet/big-phone)
       get the menu-reflow half of the fix without the 2-row layout (bug
       found 2026-07-28). This media query already forces every nav into
       hamburger at ANY portrait width, so the 2-row grid below is always
       correct here, never a side effect on desktop-portrait monitors.
       On phones, user wants exactly 2 rows (2026-07-28): row 1 = สลับบทบาท +
       โหมดกลางคืน, row 2 = ชื่อ + เวอร์ชัน. grid-template-areas keeps
       name+version paired even when #ttsRoleSwitchWrap doesn't exist
       (single-role users never render it — that area is just left empty
       instead of collapsing into the other row). !important needed on
       `display`/`gap` to beat Bootstrap's `.d-inline-flex`/`.gap-2` utility
       classes hardcoded on the element (also !important). */
    #ttsNavCluster {
        display: grid !important;
        grid-template-columns: auto auto;
        grid-template-areas:
            "roleswitch mode"
            "name version";
        justify-items: end;
        align-items: center;
        gap: 4px .5rem !important;
    }
    #ttsNavCluster #ttsRoleSwitchWrap { grid-area: roleswitch; }
    #ttsNavCluster .tts-nav-mode      { grid-area: mode; }
    #ttsNavCluster .tts-nav-name      { grid-area: name; }
    #ttsNavCluster .tts-nav-version   { grid-area: version; }
}


/* =====================================================
   ตัวเลือกเวลา (timepicker) ต้องลอยเหนือกล่อง/หน้าต่างเสมอ — 31/07/2569
   -----------------------------------------------------
   jquery.timepicker แขวนรายการเวลาไว้ท้าย <body> โดยไม่กำหนดชั้น (z-index:auto)
   ⇒ พอเปิดในหน้าต่าง (modal ของ bootstrap ชั้น 1055) รายการจะไปอยู่ "ใต้" หน้าต่าง
   ผู้ใช้เห็นเป็น "กดแล้วไม่มีอะไรขึ้น" ทั้งที่ตัวเลือกถูกสร้างแล้วจริง
   (อาการเดียวกับ select2 ที่แก้ไว้ข้างบน — ตัวนี้เจอที่หน้าเปิดเดินขบวนนอกแผน 31/07
    แต่กติกาเดียวกันต้องใช้ทั้งระบบ ไม่ใช่แก้เฉพาะหน้า)
   ===================================================== */
.ui-timepicker-container,
.ui-timepicker-wrapper {
    z-index: 10060 !important;
}

/* ─── แถวที่คลิกได้ต้องขึ้นมือ (01/08/2569) ────────────────────────────────
   โมดูล trainreport ใส่ class="pointer" ให้แถวสถานีที่กดเปิดฟอร์มบันทึกเวลาได้อยู่แล้ว
   แต่กฎ .pointer เดิมอยู่ใน trainreport/index.css ซึ่งหน้าอื่นที่ยืมโมดูลนี้ไปใช้
   (เช่น /v3/admin/trainstatus/) โหลดแต่ JS ไม่ได้โหลด CSS ⇒ แถวกดได้แต่เคอร์เซอร์ไม่บอก
   ย้ายมาไว้ที่ globals.css ที่ทุกหน้าโหลดอยู่แล้ว — ไม่ดึงทั้งไฟล์มาเพราะในนั้นมี
   override ของ .modal-backdrop ที่จะไปชนกับตัวเก็บกวาด backdrop ใน utils.js */
.pointer {
    cursor: pointer;
}

/* ปฏิทิน jQuery UI ต้องอยู่เหนือ modal เสมอ — 08/08/2569
   อาการ: ใส่ปุ่ม X ให้ช่องวันที่ (ครอบด้วย .input-group) แล้ว "ปฏิทินไม่แสดง"
   เหตุ: bootstrap ตั้ง .input-group > .form-control:focus { z-index: 5 } และ .input-group > *
         เป็น position:relative ⇒ $.fn.zIndex() ของ jQuery UI หยุดที่ตัว input (5) แล้วตั้ง
         ปฏิทินเป็น 6 — ไม่ไต่ขึ้นไปเจอ .modal (1055) เหมือนตอนที่ input ไม่มี wrapper (ได้ 1056)
         ⇒ ปฏิทินไปวาดอยู่ "หลัง" modal มองไม่เห็น (วัดจริง: 1056 vs 6)
   แก้ที่นี่จุดเดียวเพราะทุกหน้าโหลด globals.css และ #ui-datepicker-div มีตัวเดียวทั้งเอกสาร
   (ทรงเดียวกับ .select2-container--open ที่ทำไว้แล้วในหน้า admin/landingpage) */
#ui-datepicker-div {
    z-index: 10060 !important;
}