/* ============================================================
   shop-mobile.css — ทำให้ทั้งระบบใช้งานบนมือถือ/แท็บเล็ตได้
   โหลดต่อจาก shop-fixes.css ใน application/views/header.php

   หลักการ: แก้เฉพาะจุดที่ธีม theamplate ทำพังบนจอเล็ก
   ห้ามเปลี่ยนพฤติกรรมบนจอ >= 992px (desktop ต้องเหมือนเดิมทุกอย่าง)
   ค่าคงที่ของธีมที่อ้างถึง: sidebar 220px · topbar 67px · body.mini-sidebar < 1170px

   เจอปัญหา responsive เพิ่ม -> เพิ่มกฎในไฟล์นี้ อย่าใส่ <style> รายหน้า
   แก้แล้วเด้งเลข ?v= ท้าย <link> ใน header.php ด้วย
   ============================================================ */


/* ============================================================
   A. Backdrop ของ sidebar บนมือถือ
   ธีมเลื่อน .left-sidebar เข้ามาด้วย body.show-sidebar แต่ไม่มีฉากหลัง
   ทำให้ปิดเมนูไม่ได้นอกจากกด ☰ ซ้ำ  (z-index: sidebar=20 · topbar=50)
   ============================================================ */
#sidebar-backdrop {
    display: none;
}

@media (max-width: 767px) {
    #sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 19;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease;
    }

    body.show-sidebar #sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* กันหน้าเลื่อนอยู่ข้างหลังตอนเมนูเปิด */
    body.show-sidebar {
        overflow: hidden;
    }

    /* ธีมซ่อน sidebar ด้วย .mini-sidebar .left-sidebar{left:-220px} เท่านั้น
       ถ้า class หลุด (ดู shop-mobile.js ข้อ 3) sidebar จะค้างทับเนื้อหา
       จึงประกาศซ้ำแบบไม่ผูกกับ .mini-sidebar ให้ drawer ทำงานแน่นอน */
    .left-sidebar,
    .sidebar-footer {
        left: -220px;
        transition: left .25s ease;
    }

    body.show-sidebar .left-sidebar,
    body.show-sidebar .sidebar-footer {
        left: 0px;
    }

    .left-sidebar {
        height: 100vh;
        overflow: hidden;
    }

    /* perfect-scrollbar ตั้ง .scroll-sidebar เป็น overflow:hidden แล้วเลื่อนด้วย JS
       ซึ่งปัดนิ้วบนมือถือไม่ได้ -> เมนูกลุ่มที่ยาว (เช่น กลุ่มแต้ม/เว็บไซต์) จะโดนตัดหาย
       บนจอเล็กจึงบังคับกลับไปใช้ native scroll และซ่อนรางของ plugin */
    .left-sidebar .scroll-sidebar {
        position: static !important;
        height: auto !important;
        max-height: calc(100vh - 70px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .left-sidebar .ps-scrollbar-x-rail,
    .left-sidebar .ps-scrollbar-y-rail,
    .left-sidebar .ps__rail-x,
    .left-sidebar .ps__rail-y {
        display: none !important;
    }

    /* ไม่มี sidebar กินพื้นที่บนมือถือ */
    .page-wrapper,
    .footer {
        margin-left: 0 !important;
    }
}


/* ============================================================
   A2. หัวข้อกลุ่มใน sidebar
   ธีมตั้ง .nav-small-cap{padding:30px 14px 14px 0px} -> ชิดขอบซ้ายสุด
   ให้ระยะซ้ายเท่าไอคอนของเมนู (.sidebar-nav a ใช้ padding-left 15px)
   ============================================================ */
.sidebar-nav ul li.nav-small-cap {
    padding-left: 15px;
}


/* ============================================================
   A3. ช่วง 768–1169px — เนื้อหาต้องเยื้องตามความกว้างจริงของ sidebar
   ธีมให้ margin-left เฉพาะ 2 กรณี: .mini-sidebar (70px) และ >=1024px (220px)
   ถ้า .mini-sidebar หลุด (เกิดจริงในบาง view เช่น orders, setting/user_list)
   .page-wrapper จะได้ margin-left:0 ทั้งที่ sidebar ยังกว้าง 220px แล้วทับเนื้อหา
   กฎนี้อุดช่องว่างนั้น และยังรองรับตอนผู้ใช้กด .sidebartoggler ขยาย sidebar เอง
   ============================================================ */
@media (min-width: 768px) and (max-width: 1169px) {

    body:not(.mini-sidebar) .page-wrapper,
    body:not(.mini-sidebar) .footer {
        margin-left: 220px;
    }
}


/* ============================================================
   B. Topbar บนมือถือ
   ธีมตั้ง .fixed-layout .page-wrapper{padding-top:67px} ตายตัว
   ถ้า topbar สูงเกิน 67px เนื้อหาบนสุดจะถูกทับ -> ล็อกความสูงให้ตรงกัน
   ============================================================ */
@media (max-width: 767px) {
    .topbar .top-navbar {
        min-height: 67px;
    }

    .topbar .top-navbar .navbar-header {
        min-width: 0;
        width: auto;
        line-height: 67px;
    }

    /* กล่องโลโก้ว่าง (ระบบนี้ไม่ได้ใส่โลโก้) ไม่ต้องกินพื้นที่ */
    .topbar .top-navbar .navbar-header .navbar-brand:empty,
    .topbar .top-navbar .navbar-header .navbar-brand > span:empty {
        display: none;
    }

    .topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
        padding-left: 14px;
        padding-right: 14px;
        line-height: 67px;
        height: 67px;
    }
}


/* ============================================================
   C. container-fluid — ธีมตั้ง overflow:hidden ที่ <=767px
   ผลคือ dropdown / tooltip / datepicker ที่ล้นออกนอกกล่องถูกตัดหาย
   เปลี่ยนเป็น visible แล้วไปคุมความกว้างที่ตาราง (ส่วน D) แทน
   ============================================================ */
@media (max-width: 767px) {

    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        overflow: visible;
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ============================================================
   D. ตาราง — เลื่อนแนวนอนในกรอบตัวเอง ไม่ดันหน้าให้ล้น
   .table-responsive-auto ถูกใส่โดย assets/js/shop-mobile.js
   สำหรับตารางที่ view เดิมไม่ได้ครอบ .table-responsive ไว้
   ============================================================ */
.table-responsive-auto {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991px) {

    .table-responsive,
    .table-responsive-auto,
    .dataTables_wrapper {
        -webkit-overflow-scrolling: touch;
    }

    /* กันคอลัมน์บีบจนอ่านไม่ออก — ให้เลื่อนแทนการหักบรรทัด */
    .table-responsive > .table,
    .table-responsive-auto > .table {
        white-space: nowrap;
    }

    .table-responsive > .table td,
    .table-responsive > .table th,
    .table-responsive-auto > .table td,
    .table-responsive-auto > .table th {
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* ============================================================
   E. DataTables — แถบ length/search/paginate ซ้อนกันบนจอแคบ
   ============================================================ */
@media (max-width: 767px) {

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: left !important;
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
        display: block;
    }

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


/* ============================================================
   F. ฟอร์ม / ปุ่ม
   input ที่ font-size < 16px ทำให้ iOS Safari zoom เองตอนโฟกัส
   ============================================================ */
@media (max-width: 767px) {

    .form-control,
    .form-select,
    select,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        font-size: 16px;
    }

    /* กลุ่มปุ่ม/ทูลบาร์ ให้ตัดบรรทัดแทนการดันหน้าให้ล้น */
    .btn-group,
    .btn-toolbar,
    .card-header,
    .page-titles {
        flex-wrap: wrap;
    }

    /* ขยายพื้นที่แตะของปุ่มด้วย padding (ธีมใช้ .375rem -> สูง ~35px)
       ไม่ใช้ min-height เพราะ .btn เป็น inline-block ตัวหนังสือจะไม่อยู่กลาง */
    .btn:not(.btn-sm):not(.btn-xs):not(.btn-circle) {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    /* input-group ที่กว้างเกินจอ ให้ขึ้นบรรทัดใหม่ */
    .input-group {
        flex-wrap: wrap;
    }
}


/* ============================================================
   G. Card / เนื้อหา — ลด padding และกันสื่อล้นจอ
   ============================================================ */
@media (max-width: 767px) {

    .card-body {
        padding: 15px;
    }

    .page-titles {
        padding: 10px 12px;
    }

    /* หัวข้อยาวๆ ภาษาไทยไม่มีช่องว่าง ต้องยอมตัดกลางคำ ไม่งั้นดันหน้า */
    h1, h2, h3, h4, h5, .card-title, .page-titles .breadcrumb {
        word-break: break-word;
    }
}

/* สื่อและ embed ห้ามกว้างเกินกรอบ — ใช้ทุกขนาดจอ */
img,
video,
canvas,
iframe,
embed,
object,
.note-editable img {
    max-width: 100%;
}

img,
video {
    height: auto;
}


/* ============================================================
   H. Modal / SweetAlert บนจอเล็ก
   ============================================================ */
@media (max-width: 575px) {

    .modal-dialog:not(.modal-fullscreen) {
        margin: 8px;
    }

    .modal-body {
        padding: 15px;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }

    .swal2-popup {
        width: calc(100% - 24px) !important;
        font-size: 15px;
    }
}


/* ============================================================
   I. หน้า login — ธีมไม่ได้จัด padding ไว้ ทำให้การ์ดชิดขอบ
   ============================================================ */
@media (max-width: 575px) {

    .login-register {
        padding: 20px 12px;
        height: auto;
        min-height: 100vh;
    }

    .login-box {
        width: 100% !important;
        max-width: 400px;
    }
}


/* ============================================================
   J. กันหน้าเลื่อนแนวนอนเป็นด่านสุดท้าย
   เนื้อหากว้างเกินจอควรถูกจัดการที่ตาราง/สื่อข้างบนแล้ว
   ============================================================ */
@media (max-width: 767px) {

    #main-wrapper,
    .page-wrapper {
        max-width: 100%;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}