/* mobile.css — ทำให้ทุกหน้าของ TrainMaster ใช้งานบนโทรศัพท์ได้จริง
   (user สั่ง 28/07/2569: "ให้ form ต่าง ๆ กว้างพอให้ user กรอกอะไรได้ ตามความยาวที่ user
    ทำได้ในคอมฯ" + ภาพจากมือถือจริง: "object ไป container ต้องตามไปด้วย ไม่เอาแบบที่ล้นออกไป")

   ┌─ ปัญหาที่ user ถ่ายมา ───────────────────────────────────────────────────┐
   │ ตารางกว้างกว่าจอ → หน้าเว็บทั้งหน้าเลื่อนแนวนอนได้ **แต่** แถบหัวสีแดงกับ  │
   │ กรอบการ์ดกว้างแค่เท่าจอ (390px) ⇒ เลื่อนไปขวาแล้วเจอเนื้อหาลอยอยู่นอก      │
   │ กรอบของตัวเอง + พื้นหลังโล่งโผล่เลยแถบแดง = ดูเหมือนของพัง                 │
   └──────────────────────────────────────────────────────────────────────────┘

   วิธีที่เลือก = ทางที่ user บอกว่าอยากได้ที่สุด (ข้อ 1):
   **ให้ของกว้าง ๆ (ตาราง) เลื่อนอยู่ในกล่องของมันเอง** ⇒ ตัวหน้าเว็บไม่เลื่อน
   แนวนอนเลย ⇒ หัวเว็บ/การ์ด/พื้นหลัง อยู่ครบเต็มจอเสมอ ไม่มีทางหลุด
   (ไม่ใช้ overflow:hidden ที่ตัดเนื้อหาทิ้ง — user ต้องเข้าถึงทุกช่องได้)

   🔴 กติกาของไฟล์นี้:
   1. **ทุกกฎต้องอยู่ใต้ `@media (max-width: 991.98px)` เท่านั้น** ⇒ จอ ≥992px
      (เดสก์ท็อป/1440) ไม่เปลี่ยนแม้แต่พิกเซลเดียว — เพิ่มไฟล์นี้เข้าหน้าไหนก็ปลอดภัย
   2. เป็นงาน **layout ล้วน** — ห้ามแตะข้อความ/ไอคอน/ลำดับฟิลด์/logic
   3. แก้ที่นี่ก่อนเสมอ ก่อนจะไปแก้ css รายหน้า
*/

@media (max-width: 991.98px) {

    /* ── M1 · ตาราง (และของกว้างอื่น ๆ) เลื่อนอยู่ในกล่องของมันเอง ────────────
       เลือก "พ่อของตาราง" ให้กลายเป็นกล่องเลื่อนแนวนอน. ใช้ :has() เพราะตาราง
       ส่วนใหญ่ในระบบนี้ถูก js ยัดเข้ามาทีหลัง (139 จุดใน *.js) — แก้ที่ต้นทาง
       ทีละจุดไม่ไหวและจะหลุดตัวใหม่เรื่อย ๆ. CSS ไม่สนว่าใครสร้าง จึงครอบได้หมด.
       :has() = Chrome 105+ / Safari 15.4+ (iOS 15.4+); เบราว์เซอร์เก่ากว่านั้น
       จะข้ามกฎนี้ = ได้พฤติกรรมเดิม ไม่พังเพิ่ม (จึงต้องแยกบล็อกไว้ต่างหาก
       ห้ามเอา selector อื่นมาปนในลิสต์เดียวกัน ไม่งั้นจะโดนทิ้งทั้งชุด) */
    :is(div, section, form, fieldset, main, article, aside, td, th, li):has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── M2 · ความกว้างตายตัวเป็น px บน "กล่องเปล่า" ที่ดันทั้งหน้าให้เลื่อน ──
       #actionResult / #sidebarnav / #stickyHead ถูกเขียน inline ว่า min-width:800px
       (admin/emergency, admin/traincontrol, admin/landingpage/trainreport, ru/landingpage)
       ⇒ หน้ากว้าง 800px บนจอ 390px ทั้งที่กล่องนั้นว่างเปล่า.
       บนจอ ≥992px ค่านี้เป็น no-op อยู่แล้ว (กล่องกว้างเกิน 800 อยู่แล้ว) จึงปลด
       ได้เฉพาะจอเล็กโดยไม่กระทบเดสก์ท็อป. ต้องใช้ !important เพราะเป็น inline style */
    #actionResult,
    #sidebarnav,
    #stickyHead {
        min-width: 0 !important;
    }

    /* ── M3 · แผงข้าง (offcanvas) ที่ตั้งความกว้างตายตัว 420-480px ──────────
       (krfQuick, restrictionQuick, leek-planning, prelimOffcanvas)
       max-width ไม่ชนกับ width ที่เขียน inline ไว้ จึงไม่ต้องใช้ !important */
    .offcanvas-start,
    .offcanvas-end {
        max-width: 92vw;
    }

    /* ── M4 · แถวที่จัดซ้าย-ขวา ให้ตกบรรทัดแทนที่จะล้นออกนอกจอ ───────────────
       flex-wrap:wrap จะมีผล "เฉพาะตอนของไม่พอใส่บรรทัดเดียว" เท่านั้น
       ถ้าพอใส่ = ไม่มีอะไรเปลี่ยน ⇒ ปลอดภัยกับทุกหน้า
       (เคสจริง: admin/staffcontrol หัวการ์ดมีตัวกรอง 2 ช่อง → ยื่นออกไปถึง 547px) */
    .card-header,
    .card-footer,
    .modal-header,
    .modal-footer,
    .card-body > .d-flex.justify-content-between,
    .btn-toolbar {
        flex-wrap: wrap;
    }

    /* ── M4b · ชื่อระบบบนแถบหัว ยาวเกินจอ ────────────────────────────────────
       Bootstrap ตั้ง .navbar-brand เป็น white-space:nowrap ⇒ ชื่อยาว ๆ อย่าง
       "TrainMaster · พนักงานขบวน" (crewnav) / "TrainMaster · สารวัตรแขวง" (sdrnav)
       ดันทั้งหน้าให้กว้าง 425/407px บนจอ 390px ⇒ กลับไปเจออาการ "การ์ดไม่ตามไป"
       ที่ user ถ่ายมา. ให้ตัดบรรทัดได้แทน (แถบหัวสูงขึ้น 1 บรรทัดเท่านั้น) */
    .navbar-brand {
        white-space: normal;
        overflow-wrap: break-word;
        max-width: 100%;
        min-width: 0;
    }

    /* ── M5 · สื่อ/ข้อความยาว ไม่ดันจอ ───────────────────────────────────────
       ไม่ใส่ canvas/svg ไว้ด้วย เพราะกราฟการเดินรถ/แผนที่ทางตั้งขนาดจริงไว้
       แล้วเลื่อนในกล่องของตัวเองอยู่แล้ว — ย่อลงจะอ่านไม่ออก */
    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100%;
    }
    pre {
        max-width: 100%;
        overflow-x: auto;
    }

    /* ── M6 · ช่องกรอกต้องกว้างเต็มที่ที่มี และไม่ล้นกรอบ ────────────────────
       โจทย์ตรงของ user: "form ต่าง ๆ กว้างพอให้ user กรอกอะไรได้ ตามความยาว
       ที่ user ทำได้ในคอมฯ" — บนจอแคบ ช่องกรอกควรกินเต็มความกว้างที่เหลือ
       ไม่ใช่หดตามเนื้อหาจนพิมพ์ยาวแล้วอ่านไม่ออก */
    .form-control,
    .form-select,
    .input-group,
    .select2-container {
        max-width: 100%;
    }
    /* ช่องกรอกที่วางอยู่ในแถว flex: ปล่อยให้ยืดเต็มแถว (flex-grow) แต่ยังหด
       ต่ำกว่า ~9rem ไม่ได้ ⇒ พิมพ์ข้อความยาวแล้วยังอ่านออก. ถ้าแถวใส่ไม่พอ
       M4 ข้างบนจะทำให้ตกบรรทัดเอง */
    .d-flex > .form-control,
    .d-flex > .form-select,
    .d-flex > .select2-container,
    .input-group > .form-control,
    .input-group > .form-select {
        flex: 1 1 auto;
        min-width: min(9rem, 100%);
    }
    /* ช่องกรอกหลายบรรทัดที่ไม่ได้กำหนดจำนวนบรรทัดไว้ (หรือกำหนดแค่ 1 บรรทัด)
       ต้องสูงพออ่านสิ่งที่พิมพ์ไป. ตัวที่เขียน rows="2" ขึ้นไปไม่แตะ — บนคอมมันก็
       สูงเท่านี้ ถือว่าเท่ากันแล้ว (เกณฑ์ = ทำได้เท่าที่ทำได้บนคอม ไม่ใช่มากกว่า) */
    textarea.form-control:not([rows]),
    textarea.form-control[rows="1"] {
        min-height: 4.5rem;
    }

    /* ── M7 · modal: หัวและปุ่มบันทึกต้องอยู่ในจอเสมอ ────────────────────────
       Bootstrap ให้ .modal-lg/.modal-xl กว้างเต็มจออยู่แล้วต่ำกว่า breakpoint
       ของมัน — กันไว้เผื่อหน้าไหนตั้ง max-width เองเป็น px
       ⚠️ ต้องยกเว้น .modal-fullscreen* ทุกตัว: ของพวกนั้นตั้งใจให้กว้าง 100vw
       ขอบชนขอบ (ริ้วขบวน/จัดการขบวน) — ถ้าเผลอ clamp ด้วยจะเหลือช่องว่างข้างขวา
       16px แล้วเห็นหน้าเว็บโผล่มาข้างหลัง (วัดจริงแล้ว: 390 → 374) */
    .modal-dialog:not([class*="modal-fullscreen"]) {
        max-width: calc(100% - 1rem);
    }
    /* .modal-dialog-scrollable/.modal-fullscreen จัดการ scroll ในตัวอยู่แล้ว
       ส่วน modal ปกติ ตัว .modal เลื่อนแนวตั้งได้เอง (overflow-y:auto ของ BS) */

    /* ── M8 · กันของหลุดขอบจากคำที่ยาวเกินบรรทัด (เลข/URL/รหัสยาว) ──────────*/
    .card-body,
    .modal-body,
    .list-group-item {
        overflow-wrap: break-word;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       M9 · "เลื่อนการ์ดในการ์ดอีกที เลื่อนยากมาก" — โดยเฉพาะ **การ์ด/ตารางใน modal**
       (user 28/07/2569). มติ: **เลื่อนลื่นขึ้น หน้าตาเหมือนเดิม**
       ⇒ ห้ามแปลงตารางเป็นบล็อกรายแถว ห้ามเปลี่ยนหน้าตา — แก้ด้วย CSS ให้เลื่อนง่ายขึ้นเท่านั้น

       ทำไมใน modal ถึงหนักเป็นพิเศษ: มันซ้อนกัน 3 ชั้น
         (1) ตัว .modal เลื่อนแนวตั้ง → (2) .modal-body เลื่อนแนวตั้ง → (3) ตารางเลื่อนแนวนอน
       นิ้วเดียวต้องแย่งกัน 3 ทาง ⇒ ปัดแล้วไม่ไปทางที่ตั้งใจ
       ═══════════════════════════════════════════════════════════════════════ */

    /* M9.1 · หัว modal + ปุ่มบันทึก ต้องเห็นและกดได้เสมอ ไม่ต้องเลื่อนหา
       วิธี: ตรึงหัวไว้บน / ตรึงแถบปุ่มไว้ล่าง ด้วย position:sticky ภายในตัว .modal
       ที่เลื่อนแนวตั้งอยู่แล้ว ⇒ modal ยาวแค่ไหน ปุ่ม "บันทึก" ก็ยังลอยอยู่ท้ายจอ
       ✅ เลือกวิธีนี้แทนการแปลงเป็น .modal-dialog-scrollable เพราะแบบนั้นต้องใส่
          overflow:hidden ที่ .modal-content ซึ่งจะ **ตัดเมนู dropdown** ที่โผล่พ้น
          กรอบ modal ทิ้ง (ของเดิมโผล่ได้) = เปลี่ยนพฤติกรรมโดยไม่จำเป็น
       พื้นหลังต้องทึบ ไม่งั้นเนื้อหาที่เลื่อนอยู่จะทะลุขึ้นมาให้เห็น — ใช้ `inherit`
       เพื่อหยิบสีพื้นของ .modal-content มาใช้ตรง ๆ ⇒ หน้าไหนตั้งสี modal เองไว้
       (เช่น admin/staffcontrol ตั้ง .modal-content เป็น --bs-secondary-bg) ก็ยังได้สีเดิมเป๊ะ
       ส่วนหัวที่ทาสีเองด้วยคลาส bg-* ของ Bootstrap เป็น !important จึงชนะกฎนี้อยู่แล้ว */
    .modal-header,
    .modal-footer {
        position: sticky;
        z-index: 5;
        background-color: inherit;
    }
    .modal-header {
        top: 0;
    }
    .modal-footer {
        bottom: 0;
    }
    /* ปัดจนสุดใน modal แล้วห้ามไปลากหน้าเว็บข้างหลัง/สั่ง pull-to-refresh ต่อ */
    .modal,
    .modal-body,
    .offcanvas-body {
        overscroll-behavior: contain;
    }

    /* M9.1b · ใน modal ให้เหลือ "กล่องเลื่อนแนวนอนชั้นเดียว" คือกล่องของตารางในสุด
       (วัดจริงวันนี้ยังไม่มีที่ซ้อนกัน — กฎนี้เป็นด่านกันไม่ให้เกิดใหม่ และกันเคส
        การ์ดซ้อนการ์ดที่ user บ่นว่า "เลื่อนยากมาก")
       :not(:has(> table)) = ถ้ากล่องนั้นถือตารางไว้เองก็ปล่อยให้เลื่อนได้ตามเดิม */
    .modal-body .card:not(:has(> table)),
    .modal-body .card-body:not(:has(> table)),
    .modal-body .tab-content:not(:has(> table)),
    .modal-body .accordion-body:not(:has(> table)) {
        overflow-x: visible;
    }

    /* M9.2 · กันปัดเลยขอบตารางแล้วไปโดนท่า "ถอยหลัง/รีเฟรช" ของเบราว์เซอร์
       🔴 [แก้ 02/08/2569] เดิมบรรทัดนี้เป็น `touch-action: pan-x` พร้อมคำอธิบายว่า
          "ปัดขึ้น-ลงจะผ่านเลยไปให้ modal เลื่อนแนวตั้งตามปกติ" — **ผิด**
          touch-action ไม่ใช่การ "ส่งต่อ" ท่าปัด แต่เป็นการ **ประกาศว่าอนุญาตท่าไหนบ้าง**
          pan-x = อนุญาตเฉพาะซ้าย-ขวา ⇒ ท่าปัดขึ้น-ลงที่ "เริ่มนิ้วบนตาราง" ถูกเบราว์เซอร์
          ทิ้งทันที ไม่ไหลต่อไปหา modal/หน้าเว็บ = เลื่อนลงไม่ได้เลย
          อาการที่ user เจอ (02/08): "ตัวบันทึกริ้วขบวน scroll down ลงมาไม่ได้" และ
          "ตารางทุกจุด พอในมือถือจะให้ปล่อย scroll down กลับ scroll down ไม่ได้"
          — ตัวบันทึกริ้วโดนเพราะ #comp_compositionTable เป็น div ที่ถือ <table> ไว้ตรง ๆ
          จึงเข้าเงื่อนไข :has(> table) เหมือนตารางอื่นทั้งระบบ
          ⚠️ พลาดแบบเดียวกันเคยเกิดที่ admin/trainGraph/index.css แล้ว (แก้ไป 31/07:
             "เดิม touch-action: pan-y = ปิดการเลื่อนแนวนอนของเบราว์เซอร์ทิ้ง") — ที่นั่น
             แก้เป็น `pan-x pan-y` ที่นี่เลือก **ถอดทิ้ง** ไปเลยเพราะดีกว่า:
             ค่าปริยาย auto = ปัดได้ทุกทาง + ยัง **ซูมสองนิ้วได้** ซึ่งจำเป็นมาก
             ตอนนี้ที่หลายสถานีบ่นว่าตัวหนังสือเล็ก (pan-x pan-y จะปิดการซูมทิ้ง)
             เบราว์เซอร์ล็อกแกนให้เองอยู่แล้วตั้งแต่นิ้วแตะ — ไม่ต้องช่วยมันเลือก */
    .table-responsive,
    :is(div, section, form, fieldset, td, th, li):has(> table),
    .nav-pills-mobile,
    .nav-pills-mobile-scroll {
        overscroll-behavior-x: contain;
    }

    /* M9.3 · ให้เห็นว่า "ยังมีของต่อไปทางขวา"
       แถบเลื่อนบาง ๆ ที่มองเห็นได้ (มือถือซ่อน scrollbar เป็นค่าเริ่มต้น จึงไม่มีใครรู้ว่าเลื่อนได้)
       — ไม่แตะพื้นหลัง/เส้นขอบของกล่อง จึงไม่เปลี่ยนหน้าตา */
    .table-responsive,
    :is(div, section, form, fieldset, td, th, li):has(> table) {
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 128, 128, .55) transparent;
    }
    .table-responsive::-webkit-scrollbar,
    :is(div, section, form, fieldset, td, th, li):has(> table)::-webkit-scrollbar {
        height: 6px;
        -webkit-appearance: none;
    }
    .table-responsive::-webkit-scrollbar-thumb,
    :is(div, section, form, fieldset, td, th, li):has(> table)::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, .55);
        border-radius: 3px;
    }

    /* M9.4 · ล็อกคอลัมน์แรกของตารางใน modal — เลื่อนไปไกลแค่ไหนก็ยังรู้ว่าดูแถวไหน
       ⚠️ พื้นหลังต้องทึบ ไม่งั้นตัวอักษรคอลัมน์อื่นจะวิ่งมาทับตอนเลื่อน:
         background-color = สีพื้นของหน้า (ทึบเสมอ ทั้งโหมดสว่างและมืด เพราะอ่านจาก
                            ตัวแปร --bs-body-bg ที่ Bootstrap สลับให้ตามธีม)
         background-image = สีของแถวนั้น ๆ (--bs-table-bg) ทับลงไปอีกชั้น
                            ⇒ แถวที่มีสี (table-success/danger/…) ยังเห็นสีเดิม ไม่เพี้ยน
       เงาบาง ๆ ด้านขวาบอกว่า "ตรงนี้คือเส้นแบ่ง ยังมีของต่อไป"
       หัวตาราง (th) ต้องอยู่ชั้นบนกว่าเซลล์ปกติ ไม่งั้นทับกันตอนมี sticky thead */
    .modal-body :is(div, section, td, li):has(> table) > table > * > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--bs-body-bg);
        background-image: linear-gradient(var(--bs-table-bg, transparent), var(--bs-table-bg, transparent));
        /* box-shadow ของ Bootstrap คือตัวลงสี "แถวสลับสี / hover / แถวที่เลือก"
           (inset 9999px) — ถ้าเขียนทับด้วยเส้นแบ่งเฉย ๆ สีพวกนั้นจะหายไปจากคอลัมน์แรก
           จึงต้องคัดลอกนิพจน์เดิมของ Bootstrap มาไว้ตัวแรก แล้วค่อยต่อเส้นแบ่งขวา */
        box-shadow:
            inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg, transparent))),
            1px 0 0 var(--bs-border-color);
    }
    .modal-body :is(div, section, td, li):has(> table) > table > thead > tr > :first-child {
        z-index: 3;
    }

    /* M9.5 · modal บนมือถือ: ลดขอบข้างที่กินพื้นที่กรอก (แต่ยังเว้นจากขอบจอไว้
       ~8px เพื่อไม่ชนท่าปัดจากขอบของ iOS) */
    .modal-body {
        padding: .75rem;
    }
    .modal-header,
    .modal-footer {
        padding: .625rem .75rem;
    }
}