table { 
    border-collapse: collapse; 
    width: 100%;
}
th, td{ 
    padding: 0.8rem; 
    text-align: center;
}
td input{
    width: 100%;
    border: none;
}
th { 
    background-color: #f0f0f0; 
}
tr:hover, tr:hover input { 
    background-color: var(--bg-hover);
}
tr.active, tr.active td, tr.active input, tr.active select { 
    background-color: var(--bg-active);
    color: var(--color-active);
}
tr.active option, tr.active option:hover { 
    color: black;
}
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr { 
        display: block;
    }
    td { 
        border: none; 
        border-bottom: 1px solid #eee; 
    }
    td::before { 
        font-weight: bold; 
        display: block; 
        margin-bottom: 4px;
    }
}