/* Table Horizontal Scroll Styles - DataTables with scrollX enabled */

/* Important: Load this CSS after table-rounded.css to override conflicting styles */

/* When scrollX is enabled, DataTables creates these containers */
.dataTables_scroll {
    width: 100%;
    clear: both;
    /* Remove any border and border-radius from the scroll container itself */
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* The scrollable body container */
.dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: hidden !important; /* Must be hidden for horizontal scroll to work */
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100%;
    /* Remove all styling from the scroll body container */
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header container should not scroll */
.dataTables_scrollHead {
    overflow: hidden !important;
    position: relative;
    border: 0 !important;
    width: 100% !important;
    /* Remove bottom border to connect with body */
    border-bottom: none !important;
}

/* Footer container should not scroll */
.dataTables_scrollFoot {
    overflow: hidden !important;
    border: 0 !important;
    width: 100% !important;
}

/* Fix for table borders when scrollX is enabled */
.dataTables_scrollHead table {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.dataTables_scrollBody table {
    border-top: none !important;
    border-bottom: none !important;
    /* Remove border radius from the table itself */
    border-radius: 0 !important;
}

/* Override conflicting styles from table-rounded.css for scrollX tables */
.dataTables_wrapper .dataTables_scroll {
    /* Remove border and radius that table-rounded.css adds */
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* The actual tables inside scroll containers should not have borders/radius */
.dataTables_scrollHead table,
.dataTables_scrollBody table,
.dataTables_scrollFoot table {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Fix rounded corners between header and body when scrollX is enabled */

/* Target the actual table elements inside the scroll containers */
.dataTables_scrollHead .dataTable,
.dataTables_scrollHead table.table {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.dataTables_scrollBody .dataTable,
.dataTables_scrollBody table.table {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Target the actual cells that might have rounded corners */
.dataTables_scrollHead thead tr:last-child th:first-child,
.dataTables_scrollHead thead tr:last-child th:last-child {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.dataTables_scrollBody tbody tr:first-child td:first-child,
.dataTables_scrollBody tbody tr:first-child td:last-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* If there's a group header as first row */
.dataTables_scrollBody tbody tr.group:first-child td {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Target any element with inline styles that might override */
.dataTables_scrollHead [style*="border-bottom-left-radius"],
.dataTables_scrollHead [style*="border-bottom-right-radius"] {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.dataTables_scrollBody [style*="border-top-left-radius"],
.dataTables_scrollBody [style*="border-top-right-radius"] {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Remove any inherited border-radius from tables */
.dataTables_scrollHead .table,
.dataTables_scrollHead .table.table-bordered,
.dataTables_scrollHead .table.table-rounded,
.dataTables_scrollBody .table,
.dataTables_scrollBody .table.table-bordered,
.dataTables_scrollBody .table.table-rounded {
    border-radius: 0 !important;
}

/* Apply rounded corners only to the outermost container */
.dataTables_wrapper .dataTables_scroll {
    border-radius: 1rem;
    overflow: hidden;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* Visual connection between header and body */
.dataTables_scrollHead table {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    margin-bottom: -1px !important; /* Overlap to prevent gap */
}

.dataTables_scrollBody table {
    border-top: none !important;
}

/* Make sure the scroll body doesn't add its own border */
.dataTables_wrapper.table-bordered .dataTables_scrollBody,
.dataTables_wrapper .table-bordered .dataTables_scrollBody {
    border: none !important;
    border-radius: 0 !important;
}

/* Connect header and body visually */
.dataTables_scrollHead table.table {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.dataTables_scrollBody table.table {
    border-top: none !important;
}

/* Ensure the scrolling body takes full width */
.dataTables_scrollBody table {
    width: 100% !important;
}

/* Ensure header alignment */
.dataTables_scrollHeadInner {
    width: 100% !important;
    box-sizing: content-box;
}

.dataTables_scrollHeadInner table {
    width: 100% !important;
    margin: 0 !important;
}

/* Override Bootstrap's table-responsive if used */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Wrapper for tables that need horizontal scrolling */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Ensure tables can expand */
.table-scroll-wrapper table {
    width: 100%;
    min-width: 800px; /* Minimum width to trigger scroll on small screens */
}

/* Style the scrollbar */
.table-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}

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

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

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For DataTables specifically */
.dataTables_wrapper {
    width: 100%;
}

/* Only apply horizontal scroll to the table container, not the wrapper */
.dataTables_wrapper .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 0;
}

.dataTables_wrapper .table-responsive table {
    width: 100% !important;
    min-width: 100%;
}

/* Keep controls outside of scrollable area */
.dataTables_wrapper > .row:first-child,
.dataTables_wrapper > .row:last-child {
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
}

/* Prevent dropdowns from being clipped */
.dataTables_wrapper .dropdown-menu.show {
    position: fixed;
    z-index: 1055;
}

/* DataTables specific dropdown collections */
.dt-button-collection {
    position: fixed !important;
    z-index: 2001 !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .table-scroll-wrapper table,
    .dataTables_wrapper .table-responsive table {
        min-width: 600px; /* Smaller minimum on mobile */
    }
    
    .table-scroll-wrapper::-webkit-scrollbar {
        height: 10px; /* Larger scrollbar on mobile */
    }
}

/* Visual indicator that table is scrollable */
.table-scroll-wrapper {
    position: relative;
}

/* Shadow indicators for scroll */
.table-scroll-wrapper::before,
.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.table-scroll-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.table-scroll-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* Show shadows when scrollable */
.table-scroll-wrapper.has-scroll-left::before {
    opacity: 1;
    box-shadow: inset 10px 0 10px -10px rgba(0,0,0,0.15);
}

.table-scroll-wrapper.has-scroll-right::after {
    opacity: 1;
    box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.15);
}