table.default {
    border-collapse: collapse;
    box-sizing: border-box;

    & caption {
        background: lightgray;
        border: 1px solid gray;
        padding-block: 4px;
    }

    & tbody tr:nth-child(even) {
        background: white;
    }    

    & thead.header-only th {
        background: gray;
    }

    & th {
        color: white;
        padding-block: 6px;
        background: var(--main-bg-light);
        border: 1px solid var(--main-bg-light);
    }

    & th.accent {
        color: palegoldenrod;
    }

    & th, td {
        padding-left: 16px;
        padding-right: 12px;
        text-align: right;
    }  

    & td.text-left, th.text-left {
        text-align: left;
    }

    & th.center, td.center {
        padding-inline: 24px;
        text-align: center;
    }

    & th.no-border, td.no-border {
        border: none;
    }

    & td.border-bottom {
        border-bottom: 1px solid gray;
    }    

    & td.border-right {
        border-right: 1px solid gray;
    }        

    & td {
        padding-block: 4px;
        border: 1px solid gray;
    }

    & td input {
        border-radius: 4px;
        outline: none;
        border: 2px solid gray;
        height: 24px;
        width: 100px;
        text-align: right;
        padding-right: 12px;
    }

    & td.trash {
        cursor: pointer;
    }

    & td.trash v-icon {
        width: 16px;
        color: var(--meco-red);            
    }  
}

table.open-header {
    border-collapse: collapse;    
    min-width: 800px;
    width: 100%;

    & tbody tr:nth-child(even) {
        background: white;
    }

    & tr:has(.approval.approved) {
        background: rgba(0, 255, 0, 0.1);
    }
    
    & th, td {
        padding: 10px;
        text-align: left;
    }
    
    & th.limit, td.limit {
        max-width: 220px;
    }
    
    & th {
        border-bottom: 3px solid gray;        
    }
    
    & td {
        border: 1px solid gray;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    & td:has(v-icon) {
        text-align: center;
        cursor: pointer;
    }

    & td v-icon {
        position: relative;
        top: 2px;
        width: 20px;
        margin-inline: 10px;
        cursor: inherit;
    }
    
    & td span {
        color: black;
        font-size: 0.7em;
    }  

    & td.username, td.creation {
        max-width: clamp(180px, 180px, 240px);
    }

    & td.email, td.project {
        max-width: clamp(240px, 240px, 300px);
    }

    & td.active, td.number, td.approval {
        max-width: clamp(70px, 70px, 100px);
    }

    & td.number {
        max-width: 110px;
    }    
    
    & td.approval {        
        cursor: pointer;
        text-align: center;
        
    }    
    
    & td.approval sv-icon {        
        cursor: pointer;
        display: none;
    }

    & td.approval .yes {
        display: none;        
    }        

    & td.approval .no {
        display: inline-block;
        color: var(--meco-red);
    }        

    & td.approval.approved .yes {
        display: inline-block;
        color:  mediumseagreen;
    }

    & td.approval.approved .no {
        display: none;
    } 
}