/* Main table layout */
#membersTable {
    table-layout: auto;
    width: 100%;
    min-width: 100%; /* Critical: forces horizontal scroll if needed */
    font-size: 0.9rem;
}

    /* Photo column fixed width */
    #membersTable td:nth-child(2),
    #membersTable th:nth-child(2) {
        width: 80px;
        text-align: center;
    }

    /* Compact columns: Sl, ID, MemberID, Phone, Blood, Union, Type, Status */
    #membersTable td:nth-child(1),
    #membersTable td:nth-child(3),
    #membersTable td:nth-child(4),
    #membersTable td:nth-child(8),
    #membersTable td:nth-child(9),
    #membersTable td:nth-child(10),
    #membersTable td:nth-child(12),
    #membersTable td:nth-child(13) {
        white-space: nowrap;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    /* Wider columns: Name, Father, Mother, Email */
    #membersTable td:nth-child(5),
    #membersTable td:nth-child(6),
    #membersTable td:nth-child(7),
    #membersTable td:nth-child(11) {
        min-width: 160px;
        word-break: break-word;
        vertical-align: middle;
    }

    /* ACTIONS COLUMN — FIXED & FLEXIBLE */
    #membersTable td:last-child,
    #membersTable th:last-child {
        width: 80px;
        min-width: 70px; /* Ensures space even on small screens */
        vertical-align: middle;
        white-space: normal; /* Allow content to wrap */
        padding: 0.5rem;
    }

        /* Button container inside Actions column */
        #membersTable td:last-child > div {
            display: flex;
            flex-wrap: wrap;
            gap: 0.375rem; /* ~6px spacing between buttons */
            align-items: center;
        }

        /* Button styling */
        #membersTable td:last-child .btn {
            white-space: nowrap;
            margin: 0; /* Reset any inherited margin */
        }

/* Optional: Stack buttons vertically on very small screens */
@media (max-width: 300px) {
    #membersTable td:last-child {
        min-width: 80px;
    }

        #membersTable td:last-child > div {
            flex-direction: column;
            align-items: stretch;
        }

        #membersTable td:last-child .btn {
            flex: 1 1 auto;
            text-align: center;
        }
}

/* Tooltip cursor */
#membersTable td[title] {
    cursor: help;
}

/* Badge vertical alignment fix */
#membersTable .badge {
    font-size: 0.85em;
    vertical-align: middle;
}

/* Optional: Sticky header (uncomment if needed) */
/*
#membersTable thead th {
    position: sticky;
    top: 0;
    background-color: #d0e7d0;
    z-index: 10;
}
*/

/* Optional: Sticky first column (uncomment if needed) */
/*
#membersTable td:first-child,
#membersTable th:first-child {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 1;
}
*/