table{
    font-size: 0.8em;
    table-layout: fixed; /* Forces fixed table layout to respect column widths */
    width: 100%; /* Ensures table takes full width of container */
}
/* Target inputs and buttons specifically inside your task table */
/* Specifically target the elements in your dynamic rows */
table p{
    font-size: 1rem;
    padding-bottom: 0;
    margin-bottom: 0;
}
table td {
    font-size: 1.2rem;
    line-height: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

table .selectTask {
    margin: 0;             /* Removes the mt-3 you had earlier */
}

table .btn {
    font-size: 0.75rem;    /* Makes the button text smaller */
    width: 3rem;          /* Allows the button to shrink to fit its content */
}

/* This targets inputs and selects inside your specific table body */
table input, 
table select,
table button {
    font-size: 0.75rem !important; /* Use !important if Bootstrap is blocking it */
    height: auto !important;       /* Prevents default large heights */
    line-height: 1;
}

/* Ensure task description text wraps properly */
table td p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/*larger size on larger screens*/
@media (min-width: 768px) {
    table input, 
    table select,
    table button {
        font-size: 1rem !important; /* Use !important if Bootstrap is blocking it */
        height: auto !important;       /* Prevents default large heights */
        line-height: 1;
    }
    table .btn {
        width: 4rem;          /* Allow buttons to size based on content */
    }
}