#DT_load {
    width: 100%;
    table-layout: auto; /* Automatically adjust column widths based on content */
}

table.dataTable {
    width: 100%; /* Full width */
    table-layout: auto; /* Automatically adjust column widths based on content */
}

    table.dataTable td,
    table.dataTable th {
        font-size: 0.75rem !important; /* Adjust font size */
        word-wrap: break-word; /* Break long words */
        white-space: normal; /* Allow wrapping */
    }

/* Styling for buttons to fit in table cells */
.table-buttons .btn {
    display: block; /* Make each button occupy its own line */
    width: 100%; /* Ensure buttons take up full width of their container */
    margin-bottom: 0.5rem; /* Add space between buttons */
    box-sizing: border-box; /* Include padding and borders in the element's total width and height */
}

/* Ensure consistent button height for better touch targets */
.btn-custom {
    padding: 0.75rem 1rem; /* Adjust padding to increase button height */
    font-size: 0.75rem; /* Ensure font size is appropriate */
    line-height: 1.5; /* Adjust line-height for vertical alignment */
    height: auto; /* Auto height to accommodate padding */
    text-align: center; /* Center text within button */
}

    /* Additional styling for a better touch experience */
    .btn-custom i {
        margin-right: 0.5rem; /* Space between icon and text */
    }

.btn-success {
    /* Custom height can be added here if specific height is needed */
}

/* Ensure this CSS is applied correctly */
.dtr-modal .dtr-modal-content table td {
    font-size: 0.75rem !important; /* Adjust font size */
    margin: 0 !important; /* Optional */
}

/* Adjust modal title size if needed */
.dtr-modal .dtr-modal-content h2 {
    font-size: 1rem !important; /* Adjust font size */
    font-weight: bold !important; /* Optional */
    margin: 0 !important; /* Optional */
}

/* Control margins for modal content */
.dtr-modal .dtr-modal-content {
    margin: 0 auto; /* Center content horizontally */
    padding: 1rem !important; /* Adjust padding inside modal */
}

/* ==========================================================================
   Mobile UI fixes (site-wide, loaded from _Layout.cshtml)
   ========================================================================== */

/* BUG FIX: list pages mark the Edit/Details/Delete button column with
   Bootstrap's "d-none d-md-block" so it doesn't crowd the table on desktop.
   DataTables Responsive clones that same cell into its mobile detail
   modal/child row - but "d-none" is !important, so on phones the buttons
   were being hidden there too, making records impossible to edit or delete
   from a phone. Force them visible wherever DataTables reveals hidden
   columns (modal popup or inline child row). */
.dtr-modal .table-buttons,
.dtr-modal .table-buttons.d-none,
table.dataTable > tbody > tr.child .table-buttons,
table.dataTable > tbody > tr.child .table-buttons.d-none {
    display: block !important;
}

    .dtr-modal .table-buttons .btn,
    table.dataTable > tbody > tr.child .table-buttons .btn {
        display: block !important;
        width: 100%;
        margin-bottom: 0.5rem;
    }

/* Phones and small tablets */
@media (max-width: 767.98px) {
    /* tighter page padding so content isn't cramped against the edges */
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* DataTables' search box / length picker: stack full-width instead of
       squeezing next to each other */
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_length {
        width: 100%;
        text-align: left;
        margin-bottom: 0.5rem;
    }

        div.dataTables_wrapper div.dataTables_filter input {
            width: 100%;
            max-width: none;
            margin-left: 0;
            margin-top: 4px;
        }

    div.dataTables_wrapper div.dataTables_paginate {
        text-align: center;
        width: 100%;
    }

    div.dataTables_wrapper div.dataTables_info {
        text-align: center;
        width: 100%;
    }

    /* larger, thumb-friendly touch targets for pagination and buttons */
    .dataTables_paginate .paginate_button {
        padding: 0.5rem 0.75rem !important;
    }

    .btn-custom,
    .table-buttons .btn,
    .btn {
        min-height: 44px;
    }

    /* page titles take up less vertical space on small screens */
    h2.text-center,
    h2.text-primary {
        font-size: 1.25rem;
    }

    /* the DataTables Responsive "+" control column needs a bigger hit area */
    table.dataTable > tbody > tr > td.dtr-control,
    table.dataTable > tbody > tr > th.dtr-control {
        padding-left: 1.5rem;
    }
}