/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 .jgct_dataTable {
     table-layout: auto;
 }

.jgct_datatable_wrapper {
    position: relative;
    margin: 0 auto;
    padding-bottom: 20px;
}

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

/* Ensure full-width behavior */
table.dataTable {
    width: 100% !important;
}

table.dataTable th,
table.dataTable td {
    white-space: normal;
    /* Allow text wrapping */
    word-wrap: break-word;
    /* Wrap long words */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Optional: Truncate text with ellipsis if too long */
    max-width: 200px;
    /* Set a reasonable max width for each cell */
    border-right: 1px solid #ccc;
}

.jgct_datatable_scrollable table.jgct_dataTable th, .jgct_datatable_scrollable table.jgct_dataTable th.dt-type-numeric {text-align: center;}

.jgct_datatable_scrollable table.dataTable>tbody>tr {background-color: #f9f9f9;}

/* Sticky first column */
.content-area .site-main .jgct_datatable_scrollable table.jgct_dataTable th:first-child,
.content-area .site-main .jgct_datatable_scrollable table.jgct_dataTable td:first-child {
    position: sticky;
    left: 0;
    border-right: 1px solid #ccc;
    z-index: 2;
    /*width: 55%; /* Increased width for the first column */
    /* Ensure readability with a larger minimum width */
    text-align: center;
    background-color: #fff;
}

/* Replace dataTables CSS */
.jgct_datatable_wrapper table.dataTable.nowrap th,
.jgct_datatable_wrapper table.dataTable.nowrap td {
    white-space: unset;
    line-height: 20px;
    text-align: center;
}

.jgct_datatable_wrapper table.dataTable.nowrap th .button,
.jgct_datatable_wrapper table.dataTable.nowrap td .button {
    background-color: unset !important;
    color: var(--button_colour) !important;
    font-size: 16px !important;
}

.jgct_datatable_wrapper table.dataTable.nowrap th a:hover,
.jgct_datatable_wrapper table.dataTable.nowrap td a:hover {
    box-shadow: unset !important;
}

table.dataTable thead th:first-child,
table.dataTable tbody td:first-child {
    padding: 8px 5px;
}

/* Prevent misalignment */
.dataTables_scrollHeadInner,
.dataTables_scrollBody table {
    width: 100% !important;
}

@media (max-width: 768px) {
    /* Sticky first column */
    .content-area .site-main .jgct_datatable_scrollable table.jgct_dataTable th:first-child,
    .content-area .site-main .jgct_datatable_scrollable table.jgct_dataTable td:first-child {
        min-width: 50vw;
    }
}