.dataTable td {
    white-space: nowrap;
    overflow: hidden;
}

/* Base styling for the DataTables container */
.dt-container {
    font-size: 13px !important;
}

/* General cell styling */
.dataTable td {
    white-space: nowrap;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    max-width: 0; /* Allows flexible truncation based on table layout */
    padding: 2px 2px 2px 2px;
}

/* Specific styling for station name */
.dataTable .station-name {
    /*min-width: 350px;*/ /* Base max-width for desktop */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Specific styling for category */
.dataTable .category {
    max-width: 350px; /* Adjust as needed for category length */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure child row content wraps normally for readability */
.dataTable .dtr-details td {
    white-space: normal; /* Allows wrapping in collapsed child rows */
    max-width: none; /* Removes truncation in child rows */
    overflow: visible;
}

/* Optional: Adjust column widths for desktop */
@media screen and (min-width: 992px) {
    .dataTable .station-name {
        max-width: 350px; /* Wider on desktop if space allows */
    }

    .dataTable .category {
        max-width: 250px;
    }

    .dataTable .country {
        max-width: 70px;
    }
}

/* Tighten up on mobile */
@media screen and (max-width: 767px) {
    .dataTable .station-name {
        max-width: 250px; /* Smaller on mobile */
    }

/*    .dataTable .category {
        max-width: 100px;
    }*/

}
/* Medium screens (tablet) - 768px to 991px */
@media screen and (min-width: 768px) and (max-width: 991px){
    .dataTable .station-name {
        max-width: 350px;
    }

    .dataTable .category {
        max-width: 200px;
    }

}