/* Modal Table Responsive */
.modal .table-responsive {
    margin: 0 -0.75rem;  /* ชดเชย padding ของ modal-body */
    overflow-x: auto;    /* ให้เลื่อนได้แนวนอน */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling สำหรับ iOS */
}

.modal .table {
    margin-bottom: 0;
    width: 100%;
    /* min-width: 600px;   */
}

.modal .table th,
.modal .table td {
    white-space: normal;  /* ให้ข้อความขึ้นบรรทัดใหม่ได้ */
    vertical-align: middle;
    padding: 0.75rem;
}

/* Clickable table rows */
.table-row-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.table-row-clickable:hover {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

.table-row-clickable:active {
    background-color: rgba(0, 123, 255, 0.2) !important;
}

/* Scrollbar styling for better visibility */
.modal .table-responsive::-webkit-scrollbar {
    height: 8px;
}

.modal .table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal .table-responsive::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.modal .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ปรับขนาดตัวอักษรในมือถือ */
@media (max-width: 768px) {
    .modal .table {
        font-size: 14px;
        /* min-width: 500px;  */
    }
    
    .modal .table th,
    .modal .table td {
        padding: 0.5rem;
    }
    
    .modal .table .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 12px;
    }
    
    /* เพิ่มความชัดเจนของ scrollbar ในมือถือ */
    .modal .table-responsive::-webkit-scrollbar {
        height: 12px;
    }
}