@media screen and (max-width: 800px) {
    .invite.page input {
        margin-inline: auto;
    }
}

.page.production {

    padding: var(--page-padding);

    & main {
        padding: 24px;
    }

    & hr {
        width: 99%;
    }

    & section {
        overflow-x: auto;
    }

    & section>div {
        overflow-y: auto;
        height: calc(100vh - 228px);
    }

    .filter {
        display: grid;
        grid-template-columns: 400px 400px 1fr;
        column-gap: 24px;
        margin-block: 24px;
    }

    .radio {
        display: flex;
        position: relative;
        align-items: end;
    }

    .radio label {
        margin: 0;
        padding: 6px 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f0f0f0;
        cursor: pointer;
        flex: 1;
        text-align: center;
        height: 24px;
    }

    .radio input[type="radio"] {
        display: none;
    }

    .radio input[type="radio"]:checked+label {
        background-color: var(--main-bg-light);
        color: white;
    }

    #divFilter v-icon {
        grid-column: 10 / 11;
        width: 24px;
        fill: seagreen;
        place-self: end;
        cursor: pointer;
    }

    & table {
        border-collapse: collapse;
        width: 1100px;
    }

    & #tblProductionGrid {
        width: 700px;
    }

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

    & 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.name,
    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;
    }

    #tbProduction td:has(v-icon),
    #tblProductionDay td:has(v-icon) {
        width: 50px;
        text-align: center;
        cursor: pointer;
    }

    #tbProduction td.invalid,
    #tblProductionDay td.invalid {
        color: var(--meco-red);
    }

    #tbProduction v-icon.green,
    #tblProductionDay v-icon.green {
        color: forestgreen;
    }

    #tbProduction v-icon.red,
    #tblProductionDay v-icon.red {
        color: var(--meco-red);
    }

    #tbScaffolding input {
        width: 64px;
        height: 24px;
        border-radius: 6px;
        outline: none;
        border: 1px solid gray;
        padding-left: 10px;
    }

    #tbScaffolding input.processed {
        background: lightgray;
    }

    .day-cell {
        position: relative;
        text-align: center;
    }

    .edit-icon {
        display: none;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .day-cell:hover .edit-icon {
        display: inline-block;
        cursor: pointer;
        width: 16px;
    }



    .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        font-size: 0.75rem;
        margin-bottom: 8px;
    }

    .legend i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #888;
        margin-right: 4px;
        vertical-align: middle;
    }

}