/* Apply flexbox layout to the <th> elements to keep text and icons inline */
.bx--data-table-v2 th {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Adjust based on layout needs */
    overflow: hidden; /* Ensures content does not overflow the cell */
    padding: 4px; /* Reduced padding to save space */
    font-size: smaller; /* Optionally reduce font size for more space */
}

/* Ensure the sort icon and text have minimal margins and are aligned */
.custom-overflow-icon {
    margin-left: 8px; /* Space between text and icon */
    flex-shrink: 0; /* Prevent the icon from shrinking */
}

.custom-overflow-icon img {
    width: 16px; /* Adjust icon size */
    height: auto;
}

/* Optional: Adjust header text styling for wrapping or truncation */
.bx--data-table-v2 th .header-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Use ellipsis for text that's too long */
}

/* Responsive adjustments for smaller screens or higher zoom */
@media (max-width: 800px) { /* Example breakpoint, adjust as needed */
    .bx--data-table-v2 th {
        padding: 2px; /* Even smaller padding on small screens */
        font-size: smaller; /* Further reduce font size if needed */
    }

    .custom-overflow-icon img {
        width: 12px; /* Smaller icon size for constrained spaces */
    }
}