/* Members List Table Styles */
.md-members-directory-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    overflow-x: auto;
    display: block;
    /* Makes the table scrollable on small screens */
}

.md-members-directory-table th,
.md-members-directory-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    /* Prevents text from wrapping */
}

.md-members-directory-table th {
    background-color: #f7f7f7;
    font-weight: bold;
    width: 100%;
    /* Make the header fill the table width */
}

.md-members-directory-table tr:hover {
    background-color: #f1f1f1;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .md-members-directory-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        /* Horizontal scroll for mobile instead of block stacking */
    }

    .md-members-directory-table th,
    .md-members-directory-table td {
        white-space: nowrap;
        /* Keep the text from wrapping */
    }

    .md-members-directory-table tr {
        display: table-row;
        /* Keep row layout to prevent collapsing */
    }

    .md-members-directory-table td {
        text-align: left;
        /* Align text to the left for better readability on mobile */
        padding-left: 10px;
    }

    .md-members-directory-table td::before {
        display: none;
        /* Hide labels as we're keeping the table structure */
    }
}

/* DataTables Search and Length Alignment */
.dataTables_wrapper .dataTables_filter {
    float: left;
    /* Move search input to the left */
    margin-right: 20px;
    /* Space between search and length dropdown */
}

.dataTables_wrapper .dataTables_length {
    float: left;
    /* Align the length dropdown next to the search */
    margin-right: 20px;
    /* Add space between table length and search */
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    padding-top: 10px;
    /* Ensure proper spacing */
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    /* Align pagination to the right */
    margin-top: 10px;
}

/* Responsive DataTable Controls */
@media (max-width: 768px) {

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: center;
        margin-bottom: 10px;
    }
}
.md-members-directory-table th {
    word-wrap: break-word;
    white-space: normal;
}