table {
    width: 100%;
    border-collapse: collapse;
    position: relative; /* Required for dropdown to position correctly */
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}





@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    th {
        display: none;
    }

    td {
        position: relative !important;
        padding-left: 50% !important; /* Adjust based on label width */
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

        td::before {
            content: attr(data-th); /* Dynamically gets data-th from the attribute */
            display: block;
            position: absolute !important;
            top: 0 !important;
            left: 10px !important;
            width: calc(50% - 20px) !important; /* Adjust label space */
            font-weight: bold !important;
            margin-bottom: 10px !important; /* Increased space below the label */
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

    td {
        padding-top: 15px; /* Adds space above the content for further separation */
    }


    /* Ensure the dropdown menu is visible and properly styled in mobile view */
    .dropdown-menu {
        position: absolute; /* Ensure proper placement */
        left: auto; /* Adjust position if needed */
        right: 0; /* Align to the right for better UX */
        z-index: 1050; /* Ensure it appears above other elements */
    }

        .dropdown-menu.show {
            display: block; /* Force visibility */
        }

    .dropdown-item {
        padding: 0.5rem 1rem; /* Adjust padding for touch-friendly size */
        font-size: 1rem; /* Increase font size for readability */
    }

        /* Optional: Add more padding around the icon */
        .dropdown-item .btn-icon {
            padding: 0.2rem;
        }

    .dropdown-menu {
        position: absolute; /* Makes sure the dropdown is above other elements */
        z-index: 1055; /* Ensures it appears on top */
        display: block; /* Ensures visibility */
    }

    .dropdown-menu-end {
        right: 0; /* Align to the right for action column */
        left: auto; /* Prevent alignment issues */
    }

    /* Handle table cell clipping */
    .table td, .table th {
        overflow: visible !important; /* Ensure no clipping occurs */
    }
}

td {
    word-wrap: break-word;
}


thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
}