/* ============================================================
   List table → card layout on mobile (xs < 768px)
   Usage: add class="... table-list" to <table>
          add data-label="..." to every <td> in tbody
          add class="td-actions" to the action <td>
   ============================================================ */
@media (max-width: 767px) {
    /* ต้อง block ทุกชั้น (table/tbody/tr) ไม่ใช่แค่ tr — ไม่งั้นบางเบราว์เซอร์ยังตีความ tr เป็นแถวตารางอยู่ดี
       (คำนวณความกว้างจาก column แทนที่จะเต็ม container) เนื้อหาสั้นถึงจะเห็นบั๊กชัด เนื้อหายาวพอดีเผลอกลบบั๊กไว้ */
    .table-list { display: block; }
    .table-list thead { display: none; }
    .table-list tbody { display: block; }
    .table-list tbody tr {
        display: block;
        width: calc(100% - 1.5rem);
        border: 1px solid rgba(255,255,255,.1);
        margin: 0.5rem 0.75rem;
        border-radius: 0.375rem;
    }
    .table-list tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,.05);
        font-size: 0.875rem;
    }
    .table-list tbody td:last-child { border-bottom: none; }
    .table-list tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        flex: 0 0 45%;
        font-size: 0.78rem;
        opacity: .65;
        text-align: left; /* ป้าย label ชิดซ้ายเสมอ แม้ td จะ text-right/center (desktop) */
    }
    .table-list tbody td.td-actions { justify-content: flex-end; gap: 0.4rem; }
    .table-list tbody td.td-actions::before { display: none; }
    .table-list tbody td.td-actions .btn { margin-right: 0; }
    .table-list tbody td[colspan] { display: block; text-align: center; }
    .table-list tbody td[colspan]::before { display: none; }

    /* tfoot (แถวสรุปยอด) ไม่มี data-label — label กับยอดอยู่คนละ td อยู่แล้ว วาง flex ให้ชิดคนละฝั่งบรรทัดเดียวกันแทน stack แยกบรรทัด */
    .table-list tfoot {
        display: block;
        width: calc(100% - 1.5rem);
        margin: 0.5rem 0.75rem 0;
        padding-top: 0.4rem;
        border-top: 2px solid rgba(255,255,255,.15);
    }
    .table-list tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
        padding: 0.3rem 0;
    }
    .table-list tfoot td { display: inline; width: auto; padding: 0; border: none; }
    .table-list tfoot td:empty { display: none; } /* td ว่าง (เผื่อ column actions ของ tbody ตอน isDraft) ไม่งั้น space-between เพี้ยนเป็น 3 ช่อง */

    /* room bulk-create: card-body มี padding ปกติอยู่แล้ว (ต่างจาก index.php ที่ใช้ card-body p-0)
       margin ซ้าย-ขวาของ tr เลยซ้อนกับ padding ของ card-body ทำให้การ์ดแคบกว่ากล่อง input ด้านบน */
    #room-bulk-table.table-list tbody tr { margin-left: 0; margin-right: 0; }
}

/* ============================================================
   Filter row — remove default form-group bottom margin
   ============================================================ */
.table-list thead .form-group { margin-bottom: 0; }

/* ============================================================
   Mobile filter (content-header input-group on xs)
   ============================================================ */
@media (max-width: 575px) {
    .mobile-filter .btn.dropdown-toggle {
        font-size: 0.78rem;
        white-space: nowrap;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-filter .form-control,
    .mobile-filter select.form-control { font-size: 0.85rem; }
}

/* touch device จำลอง :hover/:focus ค้างไว้หลังแตะจนกว่าจะแตะที่อื่น — รีเซ็ตกลับปกติเฉพาะปุ่ม filter
   (ไม่ผูก @media (hover:none) เพราะบางอุปกรณ์ touch รายงาน hover:hover ผิด ทำให้ media query ไม่ match) */
.mobile-filter .btn.dropdown-toggle {
    color: #adb5bd;
    background-color: #343a40;
    border-color: #6c757d;
}
.mobile-filter .btn.dropdown-toggle:hover,
.mobile-filter .btn.dropdown-toggle:focus {
    color: #adb5bd;
    background-color: #343a40;
    border-color: #6c757d;
    box-shadow: none;
}
.mobile-filter .btn.dropdown-toggle[aria-expanded="true"] {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* ============================================================
   Detail table → label above value on mobile
   Usage: add class="... detail-table" to <table>
   ============================================================ */
@media (max-width: 767px) {
    .detail-table tr { display: block; }
    .detail-table th,
    .detail-table td {
        display: block;
        width: 100%;
        border-top: none;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .detail-table th {
        font-size: 0.75rem;
        opacity: .6;
        padding-bottom: 0;
        border-bottom: none;
    }
    .detail-table td {
        padding-top: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
}