/* =========================================================================
   mobile.css — การแสดงผลบนมือถือของระบบ GAP บ้านนก
   โหลดหลัง app.css เสมอ (ดู layouts/app.blade.php) จึงชนะ cascade ได้
   ทุกกฎ scope อยู่ใต้ .pc-content / .pc-header เท่านั้น
   → หน้าพิมพ์/ส่งออก PDF ที่ render นอก layout หลัก ไม่ได้รับผลกระทบ
   ========================================================================= */

/* =========================================================================
   1) ตารางกลายเป็นการ์ด (.table-cards)
   บนจอ <768px แต่ละ <tr> กลายเป็นการ์ด และแต่ละ <td> แสดงเป็นบรรทัด
   "ป้ายชื่อคอลัมน์ : ค่า" โดยป้ายมาจาก data-label ของ td นั้น

   วิธีใช้ในหน้า Blade:
     <table class="table table-cards">
       <thead>...</thead>            ← ซ่อนอัตโนมัติบนมือถือ
       <tbody>
         <tr>
           <td data-label="" class="cell-title">รหัส GAP-0001</td>
           <td data-label="ชื่อบ้านนก">...</td>
           <td data-label="" class="cell-actions"><!-- ปุ่ม --></td>
         </tr>

   หมายเหตุ: td ที่ไม่มี data-label หรือ data-label="" จะไม่ขึ้นป้าย
   และกินความกว้างเต็มการ์ด (ใช้กับหัวการ์ด/แถวปุ่ม/แถว "ไม่พบข้อมูล")
   ========================================================================= */
@media (max-width: 767.98px) {

    /* ยกเลิกการเลื่อนซ้าย-ขวาของ app.css เฉพาะตารางที่เป็นการ์ด */
    .pc-content .table-cards,
    .pc-content .table-cards > tbody,
    .pc-content .table-cards > thead,
    .pc-content .table-cards > tfoot {
        display: block;
        overflow: visible;
        width: 100%;
    }

    .pc-content .table-cards { margin-bottom: 0; padding: 0; border: 0; }
    .pc-content .table-cards > thead { display: none; }
    .pc-content .table-cards > tbody > tr {
        display: block;
        position: relative;   /* จุดอ้างอิงของช่อง checkbox ที่ลอยมุมขวาบน */
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 0.75rem;
        padding: 0.75rem 0.875rem;
        margin-bottom: 0.625rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .pc-content .table-cards > tbody > tr:last-child { margin-bottom: 0; }

    /* ล้างลายทาง/ไฮไลต์ของ Bootstrap ที่ทำให้การ์ดดูเลอะ */
    .pc-content .table-cards.table-striped > tbody > tr,
    .pc-content .table-cards > tbody > tr:hover,
    .pc-content .table-cards > tbody > tr > td {
        --bs-table-accent-bg: transparent;
        --bs-table-bg-type: transparent;
        --bs-table-hover-bg: transparent;
        background-color: #fff;
        box-shadow: none;
    }

    /* แต่ละช่อง = 1 บรรทัด "ป้ายชื่อคอลัมน์ | ค่า"
       ไม่ใช้ flex/grid เพราะ td มักมีลูกหลายก้อน (เช่น <div> + <small>)
       ซึ่งจะกลายเป็น item แยกกันและหลุดคอลัมน์ */
    .pc-content .table-cards > tbody > tr > td {
        display: flow-root;          /* กันไม่ให้ป้ายที่ลอย (float) ล้นออกนอกช่อง */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border: 0;
        padding: 0.3rem 0 0.3rem 40%;
        min-height: 1.6rem;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word;
        vertical-align: top;
    }

    .pc-content .table-cards > tbody > tr > td::before {
        content: attr(data-label);
        /* ลอยอยู่ในพื้นที่ padding ทางซ้ายพอดี (63% ของ 60% = 37.8% ของช่อง)
           เนื้อหาในช่องจึงอยู่คอลัมน์ขวาทั้งหมด ไม่ว่าจะมีลูกกี่ก้อน
           ส่วน flow-root ด้านบนทำให้ช่องสูงตามป้ายที่ขึ้นบรรทัดใหม่ */
        float: left;
        width: 63%;
        margin-left: -66.666%;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.5;
        color: #6c757d;
        white-space: normal;
    }

    /* ช่องที่ไม่ต้องมีป้าย → กินเต็มความกว้างการ์ด */
    .pc-content .table-cards > tbody > tr > td:not([data-label]),
    .pc-content .table-cards > tbody > tr > td[data-label=""],
    .pc-content .table-cards > tbody > tr > th:not([data-label]),
    .pc-content .table-cards > tbody > tr > th[data-label=""] {
        padding-left: 0;
    }
    .pc-content .table-cards > tbody > tr > td:not([data-label])::before,
    .pc-content .table-cards > tbody > tr > td[data-label=""]::before,
    .pc-content .table-cards > tbody > tr > th:not([data-label])::before,
    .pc-content .table-cards > tbody > tr > th[data-label=""]::before {
        content: none;
    }

    /* หัวการ์ด: ช่องแรกที่เป็นรหัส/ชื่อรายการ */
    .pc-content .table-cards > tbody > tr > td.cell-title {
        padding: 0 0 0.45rem 0;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid #f1f3f5;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.45;
    }
    .pc-content .table-cards > tbody > tr > td.cell-title::before { content: none; }

    /* แถวปุ่มท้ายการ์ด */
    .pc-content .table-cards > tbody > tr > td.cell-actions {
        padding: 0.6rem 0 0 0;
        margin-top: 0.45rem;
        border-top: 1px solid #f1f3f5;
    }
    .pc-content .table-cards > tbody > tr > td.cell-actions::before { content: none; }
    .pc-content .table-cards > tbody > tr > td.cell-actions > .d-flex,
    .pc-content .table-cards > tbody > tr > td.cell-actions > .btn-group {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }

    /* ช่องเช็คบ็อกซ์เลือกรายการ → ลอยมุมขวาบนของการ์ด */
    .pc-content .table-cards > tbody > tr > td.cell-check {
        position: absolute;
        top: 0.6rem;
        right: 0.75rem;
        padding: 0;
        width: auto !important;
        min-height: 0;
    }
    .pc-content .table-cards > tbody > tr > td.cell-check::before { content: none; }
    .pc-content .table-cards > tbody > tr:has(> td.cell-check) { padding-right: 2.5rem; }
    .pc-content .table-cards .cell-check .form-check-input { width: 1.25rem; height: 1.25rem; }

    /* แถว "ไม่พบข้อมูล" (td colspan) */
    .pc-content .table-cards > tbody > tr > td[colspan] {
        padding-left: 0;
        text-align: center !important;
    }
    .pc-content .table-cards > tbody > tr > td[colspan]::before { content: none; }

    /* บาง tbody ใช้ <th scope="row"> เป็นช่องแรก — ให้ทำตัวเหมือน td ทุกประการ */
    .pc-content .table-cards > tbody > tr > th {
        display: flow-root;
        width: auto !important;
        border: 0;
        padding: 0.3rem 0 0.3rem 40%;
        min-height: 1.6rem;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word;
        font-weight: 400;
        background-color: #fff;
        box-shadow: none;
    }
    .pc-content .table-cards > tbody > tr > th::before {
        content: attr(data-label);
        /* ลอยอยู่ในพื้นที่ padding ทางซ้ายพอดี (63% ของ 60% = 37.8% ของช่อง)
           เนื้อหาในช่องจึงอยู่คอลัมน์ขวาทั้งหมด ไม่ว่าจะมีลูกกี่ก้อน
           ส่วน flow-root ด้านบนทำให้ช่องสูงตามป้ายที่ขึ้นบรรทัดใหม่ */
        float: left;
        width: 63%;
        margin-left: -66.666%;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.5;
        color: #6c757d;
        white-space: normal;
    }
    .pc-content .table-cards > tbody > tr > th:not([data-label])::before,
    .pc-content .table-cards > tbody > tr > th[data-label=""]::before { content: none; }
    .pc-content .table-cards > tbody > tr > th.cell-title {
        padding: 0 0 0.45rem 0;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid #f1f3f5;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.45;
    }
    .pc-content .table-cards > tbody > tr > th.cell-title::before { content: none; }

    /* ตารางการ์ดไม่ต้องการกล่องเลื่อนอีกต่อไป */
    .pc-content .table-responsive:has(> .table-cards) { overflow: visible; }

    /* การ์ดใบนอกที่ห่อตารางอยู่ ไม่ต้องมีกรอบซ้อนกับการ์ดรายแถว */
    .pc-content .card:has(.table-cards) {
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .pc-content .card:has(.table-cards) > .card-body { padding: 0; }
    .pc-content .card:has(.table-cards) > .card-header {
        background: transparent;
        padding: 0 0 0.5rem 0;
        border-bottom: 0;
    }
    .pc-content .card:has(.table-cards) > .card-footer {
        background: transparent;
        border-top: 0;
        padding: 0.5rem 0 0 0;
    }
    .pc-content .table-cards { padding: 0; }
}

/* =========================================================================
   2) ปุ่มในตาราง — เหลือเฉพาะไอคอนบนมือถือ
   ครอบข้อความปุ่มด้วย <span class="btn-text"> แล้วใส่ title= ให้ปุ่มเสมอ
     <a class="btn btn-sm btn-primary" title="ดูรายละเอียด">
        <i class="feather icon-eye me-1"></i><span class="btn-text">ดู</span></a>
   ใช้ .btn-icon-mobile กับปุ่มนอกตารางที่อยากให้ย่อเหมือนกัน
   ========================================================================= */
@media (max-width: 767.98px) {
    .pc-content .table .btn-text,
    .pc-content .btn-icon-mobile .btn-text { display: none; }

    /* ข้อความหายแล้ว ระยะห่างหลังไอคอนต้องหายด้วย */
    .pc-content .table .btn > i,
    .pc-content .btn-icon-mobile > i { margin-right: 0 !important; }

    /* พื้นที่นิ้วกดขั้นต่ำ 40px */
    .pc-content .table .btn,
    .pc-content .btn-icon-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    .pc-content .table .btn > i { font-size: 1rem; }
}

/* =========================================================================
   3) แท็บกรอง — แถบเลื่อนแนวนอน 1 บรรทัด (.nav-scroll-x)
   ใส่ class นี้เพิ่มที่ <ul class="nav nav-pills nav-scroll-x">
   ========================================================================= */
@media (max-width: 991.98px) {
    .pc-content .nav-scroll-x {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
        margin-bottom: 0;
        /* บอกใบ้ว่ายังเลื่อนต่อได้ด้วยเงาจาง ๆ ทางขวา */
        -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
        mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    }
    .pc-content .nav-scroll-x::-webkit-scrollbar { display: none; }
    .pc-content .nav-scroll-x > .nav-item { flex: 0 0 auto; }
    .pc-content .nav-scroll-x .nav-link {
        white-space: nowrap;
        font-size: 0.875rem;
        padding: 0.45rem 0.75rem;
    }
}

/* =========================================================================
   3.1) แท็บที่อยู่บนหัวการ์ด (.card-header-tabs)
   ธีมตั้ง margin ติดลบให้แท็บไว้ชดเชย padding เดิมของ .card-header (25px)
   พอจอมือถือบีบ padding หัวการ์ดให้เล็กลง แท็บจึงล้นออกนอกหัวการ์ด แล้วโดน
   .card-body ที่วาดทีหลังทับครึ่งตัว (เช่น แท็บ 15-1/15-2 ของ GAP-09)
   และยังเยื้องออกนอกขอบการ์ดทางซ้ายอีก 12.5px
   จึงกำหนด padding กับ margin ให้ตรงกันเป๊ะ และให้แท็บเลื่อนแนวนอนเมื่อไม่พอ
   ========================================================================= */
@media (max-width: 767.98px) {
    /* กำหนด padding ของหัวการ์ดเอง แล้วให้ margin ติดลบของแท็บตรงกันเป๊ะ
       แท็บจึงแนบขอบหัวการ์ดทั้งซ้าย-ขวา-ล่าง โดยไม่ล้นออกไปทับอะไร */
    .pc-content .card > .card-header:has(.card-header-tabs) {
        padding: 0.75rem 0.75rem 0.5rem;
    }
    .pc-content .card > .card-header .card-header-tabs {
        margin: 0 -0.75rem -0.5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pc-content .card > .card-header .card-header-tabs::-webkit-scrollbar { display: none; }
    .pc-content .card > .card-header .card-header-tabs > .nav-item { flex: 0 0 auto; }
    .pc-content .card > .card-header .card-header-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
}

/* =========================================================================
   4) หัวเว็บบางลงบนมือถือ (90px → 64px) คืนพื้นที่ให้เนื้อหา
   ทับค่าที่ app.css ตั้งไว้สำหรับจอใหญ่
   ========================================================================= */
@media (max-width: 767.98px) {
    .pc-header,
    .pc-header .pc-h-item { min-height: 64px; }
    .pc-header .m-header { height: 64px; }
    .pc-header.mob-header-active { top: 64px; }
    .pc-sidebar { top: 64px; }
    .pc-sidebar .navbar-content { height: calc(100vh - 64px); }
    .pc-container { top: 64px; min-height: calc(100vh - 125px); }

    /* โลโก้แบรนด์ (กำหนด height/width มาแบบ inline จึงต้อง !important) */
    .pc-header .m-header img { height: 40px !important; width: 40px !important; }
    /* โลโก้สถาบัน 6 ตัวกลางหัว */
    .header-logo-img { height: 28px; width: 28px; padding: 2px; }
}
@media (max-width: 575.98px) {
    .pc-header,
    .pc-header .pc-h-item { min-height: 64px; }
    .header-logo-img { height: 24px; width: 24px; }
}
@media (max-width: 400px) {
    .header-logo-img { height: 21px; width: 21px; }
}

/* =========================================================================
   5) ฟอร์ม — กัน iOS ซูมหน้าจอเองตอนแตะช่องกรอก (ต้อง >= 16px)
   ========================================================================= */
@media (max-width: 767.98px) {
    .pc-content .form-control,
    .auth-main .form-control,
    .pc-content .form-select,
    .auth-main .form-select,
    .auth-main textarea,
    .auth-main input:not([type="checkbox"]):not([type="radio"]),
    .pc-content input[type="text"],
    .pc-content input[type="number"],
    .pc-content input[type="tel"],
    .pc-content input[type="email"],
    .pc-content input[type="password"],
    .pc-content input[type="date"],
    .pc-content input[type="search"],
    .pc-content textarea {
        font-size: 16px;
    }
    .pc-content .form-control-sm,
    .pc-content .form-select-sm { font-size: 16px; padding: 0.375rem 0.6rem; }
    /* ปุ่มในฟอร์มเต็มความกว้างเมื่อวางเรียงกัน */
    .pc-content .form-actions-stack { display: flex; flex-direction: column; gap: 0.5rem; }
    .pc-content .form-actions-stack > .btn { width: 100%; }
}

/* =========================================================================
   6) กล่องข้อความ (modal) — ใช้พื้นที่จอให้เต็มขึ้นบนมือถือ
   ========================================================================= */
@media (max-width: 767.98px) {
    .modal-dialog:not(.modal-fullscreen) {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-body { padding: 1rem; }
    .modal-footer { flex-wrap: wrap; gap: 0.5rem; }
    .modal-footer > .btn { flex: 1 1 auto; }
}

/* =========================================================================
   7) แถบเครื่องมือเลือกหลายรายการ (หน้ารายการคำร้องของแอดมิน)
   เดิมล็อก min-width 440px ไว้ → ล้นจอมือถือ
   ========================================================================= */
@media (max-width: 767.98px) {
    #bulkToolbar .position-fixed {
        left: 0.75rem !important;
        right: 0.75rem;
        width: auto;
        transform: none !important;
        margin-bottom: 0.75rem !important;
    }
    #bulkToolbar .card { min-width: 0 !important; width: 100%; }
    #bulkToolbar .card-body { flex-wrap: wrap; gap: 0.5rem !important; }
    #bulkToolbar .form-select { min-width: 0 !important; flex: 1 1 100%; }
}

/* =========================================================================
   8) เลขหน้า (pagination) — กระชับ ไม่ตกขอบ
   ========================================================================= */
@media (max-width: 575.98px) {
    .pc-content .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.2rem;
        margin-bottom: 0;
    }
    .pc-content .pagination .page-link { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
    .pc-content .card-footer { padding: 0.75rem; }
}

/* =========================================================================
   9) เก็บงานทั่วไปของหน้าจอเล็ก
   ========================================================================= */
@media (max-width: 767.98px) {
    /* หัวข้อหน้าและ breadcrumb ไม่ต้องใหญ่เท่าจอคอม */
    .pc-content .page-header-title h2 { font-size: 1.15rem; }
    .pc-content .page-header { margin-bottom: 0.75rem; }
    .pc-content .breadcrumb { font-size: 0.8125rem; margin-bottom: 0.25rem; }

    /* ระยะขอบการ์ดให้เนื้อหาได้ความกว้างคืนมา */
    .pc-content .card { margin-bottom: 0.875rem; }
    .pc-content .card-body { padding: 1rem; }

    /* ตัวเลขสรุปบนแดชบอร์ดไม่ล้นการ์ด */
    .pc-content .card-body h3,
    .pc-content .card-body h4 { font-size: 1.25rem; }

    /* กลุ่มปุ่มหัวหน้าจอให้ตกบรรทัดได้แทนล้นขอบ */
    .pc-content .page-header .d-flex,
    .pc-content .card-header .d-flex { flex-wrap: wrap; gap: 0.5rem; }

    /* ตารางที่ยังเลื่อนแนวนอนอยู่ (ไม่ได้แปลงเป็นการ์ด) — บอกใบ้ว่าเลื่อนได้ */
    .pc-content .table-responsive { -webkit-overflow-scrolling: touch; }
}


/* =========================================================================
   10) หน้าเข้าสู่ระบบ / ลงทะเบียน (.auth-main)
   ใช้ mobile.css ชุดเดียวกับหน้าในระบบ จึงได้ฟอนต์ 16px กัน iOS ซูม
   จากหมวด 5 อยู่แล้ว ที่เหลือคือจัดแท็บและระยะให้พอดีจอเล็ก
   ========================================================================= */
@media (max-width: 767.98px) {
    /* การ์ดฟอร์มไม่ต้องเว้นบน-ล่างเยอะเท่าจอคอม คืนพื้นที่ให้ฟอร์ม */
    .auth-main .auth-form .card.my-5 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .auth-main .auth-form .card > .card-body { padding: 1.25rem 1rem; }

    /* แท็บเลือกประเภทบัญชี: 3 ช่องเท่ากันเสมอ ไม่ตกบรรทัด
       ไอคอนขึ้นบรรทัดบน ข้อความอยู่ล่าง — อ่านง่ายและกดง่ายกว่าเรียงแนวนอน */
    .auth-main .nav-pills {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }
    .auth-main .nav-pills > .nav-item { flex: 1 1 0; min-width: 0; }
    .auth-main .nav-pills .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        width: 100%;
        min-height: 52px;
        padding: 0.45rem 0.25rem;
        font-size: 0.75rem;
        line-height: 1.3;
        white-space: normal;
        text-align: center;
    }
    .auth-main .nav-pills .nav-link i {
        margin: 0 !important;
        font-size: 1rem;
    }

    /* ปุ่มดู/ซ่อนรหัสผ่านต้องกดโดนง่าย */
    .auth-main .input-group .btn { min-width: 46px; }

    /* แถวจดจำการเข้าสู่ระบบ + ลืมรหัสผ่าน ไม่ให้เบียดกันจนอ่านยาก */
    .auth-main .form-check-label,
    .auth-main .form-check + a h6 { font-size: 0.875rem; }
    .auth-main .form-check-input { width: 1.15rem; height: 1.15rem; }
}

/* =========================================================================
   11) หน้าแรก / หน้าประชาสัมพันธ์ (.landing-page)
   แก้สามอย่างที่พังจริงบนจอ 375px:
     - แถวโลโก้ 6 ตัว (60px, nowrap) ล้นออกนอกจอทั้งสองข้าง
     - ปุ่มเปิดเมนูที่กดแล้วไม่มีอะไร เพราะเมนูว่างเปล่า
     - ที่ว่างเปล่าใต้แถบบน เพราะ padding-top 130px แต่แถบสูงจริง 91px
   ========================================================================= */
@media (max-width: 991.98px) {
    /* เมนูบนหน้าแรกไม่มีรายการใด ๆ — ซ่อนปุ่มเปิดเมนูที่กดแล้วไม่เกิดอะไร */
    .landing-page .navbar .navbar-toggler { display: none; }
}

@media (max-width: 767.98px) {
    /* ระยะบนพอดีกับความสูงจริงของแถบบน */
    .landing-page header { padding-top: 100px; }
    .landing-page header > .container > .row.py-5 {
        padding-top: 0.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* แถวโลโก้สถาบัน: ย่อและตกบรรทัดได้ ไม่ล้นจออีกต่อไป */
    .landing-page .landing-hero-logos {
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }
    .landing-page .landing-hero-logos img {
        height: 44px !important;
        width: 44px !important;
    }

    /* ปุ่มหลัก 4 ปุ่ม: จัดเป็นตาราง 2 คอลัมน์เท่ากัน แทนการเรียงเหลื่อมกัน */
    .landing-page .landing-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .landing-page .landing-cta > .btn {
        width: 100%;
        margin: 0 !important;
        font-size: 0.9375rem;
        padding: 0.7rem 0.4rem;
        min-height: 48px;
    }
    .landing-page .landing-cta > .btn i { margin-right: 0.4rem !important; }

    /* หัวข้อและคำโปรยให้พอดีจอ */
    .landing-page .header-content h1 { font-size: 1.6rem; line-height: 1.45; }
    .landing-page .header-content h6 { font-size: 0.875rem; }
    .landing-page .header-content p { font-size: 0.9375rem; }

    /* กล่องภาพประกอบเป็นของตกแต่ง ย่อลงเพื่อไม่ให้ต้องเลื่อนยาว */
    .landing-page .hero-image { padding: 0.5rem !important; }
    .landing-page .hero-image .card { padding: 1.5rem 1rem !important; }
    .landing-page .hero-image .display-1 { font-size: 3rem; }
    .landing-page .hero-image h4 { font-size: 1.05rem; }

    .landing-page footer { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .landing-page footer p { font-size: 0.85rem; }
}

@media (max-width: 359.98px) {
    /* จอแคบมากจริง ๆ (iPhone SE / จอพับ): ปุ่มเรียงเดี่ยวเต็มความกว้าง
       เพื่อให้ชื่อปุ่มยาวอย่าง "ถ่ายภาพหลักฐาน" ไม่ถูกบีบจนตกบรรทัด */
    .landing-page .landing-cta { grid-template-columns: 1fr; }
    .landing-page .landing-hero-logos img { height: 36px !important; width: 36px !important; }
}


/* =========================================================================
   12) ตารางรายละเอียดแบบ "หัวข้อ | เนื้อหา" (.detail-stack)
   ใช้ที่: partials/gap-topic-detail (ข้อมูล GAP รายหัวข้อ เช่น GAP-2-02: อุปกรณ์)
           partials/form-record-detail (รายละเอียดบันทึกข้อมูลประจำ)

   ทุกขนาดจอ: ชื่อหัวข้ออยู่แถวบน เนื้อหาอยู่แถวถัดมาเต็มความกว้าง
   — เดิมจอคอมเป็นตาราง 2 คอลัมน์ (หัวข้อ 38-40%) แต่ชื่อหัวข้อไทยยาว ๆ
     กับค่าที่กรอกมายาว ๆ ต่างตกบรรทัดคนละจังหวะ อ่านคู่กันยาก
     จึงใช้รูปแบบเดียวกับจอเล็กทั้งหมด: อ่านไล่ลงมาบรรทัดต่อบรรทัด
   ========================================================================= */
.pc-content .detail-stack,
.pc-content .detail-stack > tbody {
    display: block;
    width: 100%;
    overflow: visible;
    table-layout: auto !important;
}

.pc-content .detail-stack > tbody > tr {
    display: block;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: #fff;
}
.pc-content .detail-stack > tbody > tr:last-child { margin-bottom: 0; }

/* หัวข้อ = แถบบนของกล่อง */
.pc-content .detail-stack > tbody > tr > th {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 0;
    padding: 0.4rem 0.65rem;
    background-color: #f6f7fb !important;
    color: #495057;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left !important;
}

/* เนื้อหา = ตัวกล่อง เต็มความกว้าง */
.pc-content .detail-stack > tbody > tr > td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 0;
    border-top: 1px solid #f1f3f5;
    padding: 0.5rem 0.65rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    text-align: left !important;
}

/* กล่องเลื่อนแนวนอนไม่จำเป็นแล้วเมื่อเนื้อหาเรียงลงมาแทน */
.pc-content .table-responsive:has(> .detail-stack) { overflow: visible; }

/* จอใหญ่: หายใจได้มากกว่าจอมือถือเล็กน้อย ระยะขอบไม่อึดอัด */
@media (min-width: 768px) {
    .pc-content .detail-stack > tbody > tr { margin-bottom: 0.625rem; }
    .pc-content .detail-stack > tbody > tr > th { padding: 0.45rem 0.85rem; font-size: 0.875rem; }
    .pc-content .detail-stack > tbody > tr > td { padding: 0.6rem 0.85rem; }
}

@media (max-width: 767.98px) {
    /* คืนความกว้างให้เนื้อหา: หัวข้อ GAP ซ้อนอยู่ใน tab-pane p-3 + ps-3 อีกชั้น
       บนจอแคบระยะเยื้องพวกนี้กินความกว้างไปเกือบ 40px โดยไม่ได้ช่วยอ่าน */
    .pc-content .tab-content > .tab-pane.p-3 { padding: 0.75rem !important; }
    .pc-content [id^="gaptopic-"].ps-3 { padding-left: 0.5rem !important; }
}