/* mobile.css - ปรับการแสดงผลให้พอดีมือถือ โดยไม่กระทบดีไซน์บนเดสก์ท็อป */

@media (max-width: 767.98px) {
    /* หัวข้อหน้า (title + ปุ่ม/ข้อมูลผู้ใช้) ให้ห่อบรรทัดสวยงามแทนการบีบซ้อนกัน */
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .card-header.d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .card-header.d-flex.justify-content-between.align-items-center h5 {
        width: 100%;
    }

    /* ลดขนาดหัวข้อบนมือถือให้พอดีจอ ไม่ล้นบรรทัด */
    h4.fw-bold { font-size: 1.1rem; }
    h5.fw-bold { font-size: 0.95rem; }

    /* ลด padding ของฟอร์มการ์ดบนมือถือ ให้เหลือพื้นที่เนื้อหามากขึ้น */
    .form-card { padding: 1.25rem !important; }

    /* ปุ่มจัดการในตาราง (แก้ไข/ลบ/รับเข้า ฯลฯ) ให้ห่อบรรทัดได้แทนดันตารางกว้างเกิน */
    .btn-group[role="group"] {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    /* ใบรับแจ้งงาน (receipt) ลด padding ให้พอดีจอมือถือ */
    .receipt-container {
        padding: 1.25rem !important;
        margin: 1rem auto !important;
    }

    /* แถวปุ่ม Export/พิมพ์ในใบรับแจ้งงาน ให้ห่อบรรทัดและกดง่ายขึ้นบนมือถือ */
    .no-print.text-center.mt-4 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0 0.75rem;
    }
    .no-print.text-center.mt-4 .btn {
        margin: 0 !important;
        flex: 1 1 40%;
    }

    /* Modal ให้มีระยะขอบพอดีจอมือถือ ไม่ชิดขอบจอเกินไป */
    .modal-dialog {
        margin: 0.75rem;
    }

    /* Login card บนมือถือ */
    .login-card {
        padding: 1.5rem !important;
        margin: 1rem;
    }

    /* ตารางบนจอเล็ก ลดขนาดตัวอักษรเล็กน้อยให้อ่านง่ายขึ้นแบบไม่ล้นจอ */
    .table {
        font-size: 0.88rem;
    }

    /* การ์ดสถิติ (dashboard) ให้ตัวเลขไม่ใหญ่เกินจอเล็ก */
    .card-stat h2 {
        font-size: 1.5rem;
    }
}

/* เพิ่ม smooth scroll แนวนอนสำหรับตารางที่ล้นจอ ทุกขนาดหน้าจอ */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}