.table-container {
    margin-top: 20px;
}

.read-only-id {
    background-color: #f9f9f9;
    /* Light grey background for read-only ID */
    font-weight: 600;
    text-align: center !important;
    /* Ensure ID text is centered */
    vertical-align: middle !important;
}

/* Ensure button is on the right */
.main-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.right-buttons-group {
    display: flex;
    align-items: center;
}

.left-buttons-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.test-buttons-container {
    display: flex;
    justify-content: flex-start;
    /* Or center/flex-end as preferred */
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Style for the delete icon */
.delete-row-icon {
    cursor: pointer;
    color: #db2828;
    /* Semantic UI negative color */
}

.delete-row-icon:hover {
    color: #b01c1c;
    /* Darker red on hover */
}

/* Center content in action column, properties column, design column, and report column */
.action-column,
.properties-cell,
.design-cell,
.report-cell {
    text-align: center !important;
    vertical-align: middle !important;
    /* Ensure vertical alignment for buttons */
}

/* Apply padding to all table cells */
#memberTable td {
    padding: 5px !important;
    vertical-align: middle !important;
    /* General vertical alignment for cell content */
}

/* Apply padding and text alignment to header cells */
#memberTable th {
    padding: 8px 15px 8px 15px !important;
    /* Keep header padding a bit larger for small table */
    text-align: center !important;
    vertical-align: middle !important;
}

/* Fixed width for ID column (1st column) */
#memberTable th:nth-child(1),
#memberTable td:nth-child(1) {
    width: 35px;
    min-width: 35px;
    max-width: 35px;
}

/* Fixed width for Notes column (3rd column) */
#memberTable th:nth-child(3),
#memberTable td:nth-child(3) {
    width: 200px;
    min-width: 0px;
    max-width: 200px;
    word-wrap: break-word;
}

/* Fixed width for Properties column (4th) */
#memberTable th:nth-child(4),
#memberTable td:nth-child(4) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

/* Fixed width for Design column (5th) */
#memberTable th:nth-child(5),
#memberTable td:nth-child(5) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

/* Fixed width for Report column (6th) */
#memberTable th:nth-child(6),
#memberTable td:nth-child(6) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

/* Fixed width for Utilization column (7th) */
#memberTable th:nth-child(7),
#memberTable td:nth-child(7) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* Fixed width for Action/Remove column (8th column) */
#memberTable th:nth-child(8),
#memberTable td:nth-child(8) {
    width: 35px;
    min-width: 35px;
    max-width: 35px;
}


/* Ensure notes input takes full width of cell without extra margin */
.notes-input-container .ui.fluid.input {
    width: 100%;
    min-width: 0%;
}

/* Make dropdown take full width */
.member-type-dropdown.ui.selection.dropdown {
    width: 100%;
}

/* Center align the buttons in cells */
.properties-cell .ui.button,
.design-cell .ui.button,
.report-cell .ui.button {
    margin-left: auto;
    margin-right: auto;
}

/* Utilization progress bar styling */
.utilization-cell .ui.progress {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 0;
}

.utilization-cell {
    vertical-align: middle !important;
}

table.ui.selectable.table tbody tr.active {
    background-color: rgba(0, 0, 0, 0.05) !important;
}