/*
 * datatables-mobile.css
 * -----------------------------------------------------------------------------
 * ปรับ DataTables ทุกตารางให้ใช้งานดีบนมือถือ (Bootstrap 5.3.x)
 * โหลด global ผ่าน app/Views/partials/head-css.php — มีผลกับทุกโมดูล
 *
 * ครอบคลุม 2 ชั้น:
 *   1) จัดวางแถบควบคุม (ค้นหา / จำนวนแถว / ปุ่ม export / ข้อมูล / แบ่งหน้า)
 *      ให้ stack เต็มความกว้างและกดง่ายบนจอเล็ก
 *   2) ตกแต่งแถวลูก (child row) ของ Responsive extension ให้อ่านง่ายแบบ BS5
 *      + ปุ่ม +/- ขยายแตะง่าย และ fallback เลื่อนแนวนอนสำหรับตารางที่ไม่ collapse
 * -----------------------------------------------------------------------------
 */

/* ===========================================================================
   1. Fallback เลื่อนแนวนอน — กันตารางที่ไม่ได้ใช้ Responsive ดันหน้าจนล้น
   =========================================================================== */
.dataTables_wrapper {
    width: 100%;
}

/* ตารางที่ไม่ได้ collapse (ไม่ใช่ responsive / ไม่ใช่ scrollX) ให้เลื่อนในกรอบ
   แทนที่จะดันทั้งหน้า — ครอบเฉพาะเมื่ออยู่ใน .table-responsive ของ Bootstrap */
.table-responsive > .dataTables_wrapper {
    overflow-x: visible;
}

/* ===========================================================================
   2. แถบควบคุมด้านบน / ล่าง — stack บนมือถือ
   =========================================================================== */
@media (max-width: 767.98px) {

    /* ให้ทุกคอลัมน์ควบคุม (length / filter / info / paginate) เต็มความกว้าง
       และเรียงลงบรรทัดแทนการอัดข้างกันจนล้น */
    .dataTables_wrapper .row > [class^="col-"],
    .dataTables_wrapper .row > [class*=" col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* กล่องค้นหา + ตัวเลือกจำนวนแถว: ชิดซ้าย เต็มความกว้าง แตะง่าย */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        text-align: left;
        margin-bottom: .5rem;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .dataTables_wrapper .dataTables_filter input {
        flex: 1 1 auto;
        width: 100%;
        min-height: 40px;          /* พื้นที่แตะตามมาตรฐาน */
        margin-left: 0 !important;
    }

    .dataTables_wrapper .dataTables_length select {
        min-height: 40px;
        width: auto;
    }

    /* ข้อมูล "แสดง x ถึง y จาก z" + แบ่งหน้า: จัดกลาง เรียงลงล่าง */
    .dataTables_wrapper .dataTables_info {
        text-align: center;
        padding-top: .5rem;
        font-size: .8125rem;
    }

    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: .5rem;
        float: none;
    }

    .dataTables_wrapper .dataTables_paginate ul.pagination {
        justify-content: center;
        flex-wrap: wrap;
        margin: 0;
    }

    /* ปุ่มแบ่งหน้าแตะง่ายขึ้น */
    .dataTables_wrapper .dataTables_paginate .page-link {
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ปุ่ม export (copy/csv/excel/pdf/print) — ให้ห่อบรรทัดแทนล้นข้าง */
    .dataTables_wrapper .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
        margin-bottom: .5rem;
        float: none !important;
    }

    .dataTables_wrapper .dt-buttons .btn,
    .dataTables_wrapper .dt-buttons .dt-button {
        margin: 0 !important;
        flex: 0 1 auto;
    }

    /* ลดความหนาแน่นของเซลล์เล็กน้อยเพื่อพื้นที่ที่จำกัด */
    table.dataTable > tbody > tr > td,
    table.dataTable > thead > tr > th {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
}

/* ===========================================================================
   3. แถวลูก (Responsive child row) — อ่านง่ายแบบ Bootstrap 5
   =========================================================================== */

/* ปุ่ม +/- ขยาย/ยุบ: วงกลมสีน้ำเงินชัด แตะง่าย จัดกึ่งกลาง */
table.dataTable > tbody > tr > td.dtr-control,
table.dataTable > tbody > tr > td.control,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

/* เว้นที่ให้ไอคอน +/- ไม่ทับข้อความในคอลัมน์แรก */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child.dtr-control {
    padding-left: 2.1rem;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child.dtr-control:before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.35rem;
    height: 1.35rem;
    line-height: 1.35rem;
    border: 0;
    border-radius: 50%;
    background-color: #0d6efd;   /* น้ำเงิน BS primary */
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 0 2px rgba(0, 0, 0, .18);
    content: "+";
    top: 50%;
    left: .5rem;
    margin-top: -0.675rem;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child.dtr-control:before {
    background-color: #dc3545;   /* แดงเมื่อขยาย */
    content: "\2212";            /* เครื่องหมายลบ − */
}

/* กล่องรายละเอียดแถวลูก: แสดงเป็นคู่ ป้ายกำกับ–ค่า อ่านง่าย */
table.dataTable > tbody > tr > td ul.dtr-details {
    display: block;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

table.dataTable > tbody > tr > td ul.dtr-details > li {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding: .45rem .25rem;
    line-height: 1.4;
}

table.dataTable > tbody > tr > td ul.dtr-details > li:last-child {
    border-bottom: none;
}

table.dataTable > tbody > tr > td ul.dtr-details > li .dtr-title {
    min-width: 40%;
    font-weight: 600;
    color: var(--vz-secondary-color, #878a99);
    padding-right: .5rem;
}

table.dataTable > tbody > tr > td ul.dtr-details > li .dtr-data {
    flex: 1 1 55%;
    word-break: break-word;
}

/* ให้ปุ่ม/action ที่ถูกยุบลงแถวลูกยังกดได้เต็มพื้นที่ */
table.dataTable > tbody > tr > td ul.dtr-details > li .dtr-data .btn {
    margin-bottom: .15rem;
}

/* โหมด modal ของ Responsive (details.display = modal) ให้เต็มจอบนมือถือ */
@media (max-width: 575.98px) {
    div.dtr-modal div.dtr-modal-display {
        width: 95%;
        max-width: 95%;
    }
}

/* ===========================================================================
   4. Dark mode — ให้เข้ากับธีมมืดของ Velzon
   =========================================================================== */
[data-bs-theme="dark"] table.dataTable > tbody > tr > td ul.dtr-details > li {
    border-bottom-color: rgba(255, 255, 255, .08);
}