#table {
    border-collapse: collapse;
    font-size: 80%;
    table-layout: auto;
    width: 100%;

    --border: solid var(--light1) 1px;

    th {
        font-weight: bold;
        padding: 0.4em 0.8em;
    }

    .clockings {
        .dates {
            th {
                text-align: center;
            }
        }

        .clocking {
            th:first-child {
                text-align: right;
            }

            .total-header {
                writing-mode: vertical-lr;
                transform: rotate(180deg);
                padding: 0.8em 0.4em;
            }

            .time-input {
                max-width: 4em; /* not perfect */

                input {
                    width: 100%;
                    text-align: right;
                }

                input[type="time"]::-webkit-calendar-picker-indicator {
                    display: none;
                }
            }

            &.total {
                text-align: right;
                td {
                    padding: 0.4em;
                }
            }
        }
    }

    .week-names {
        text-align: center;
        font-weight: bold;
        td {
            padding: 0.4em;

            &:not(:first-child) {
                border: var(--border);
            }

        }
    }
    .day-names, .day-dates {
        text-align: center;

        td {
            padding: 0.2em;
        }
    }

    .day-dates {
        border-bottom: var(--border);
    }

    col.day-5, col.day-6 {
        background-color: var(--dark3);
    }

    colgroup.tailers, col.day-0 {
        border-left: var(--border);
    }

    colgroup.headers, col.day-6 {
        border-right: solid var(--light1) 1px;
    }

    .times .project td:nth-child(2) {
        text-align: center;
    }

    .times {
        td {
            padding: 0.4em;
        }

        tr {
            &.project {
                border-top: solid #71717185 1px;
                td {
                    text-align: right;

                    &:first-child {
                        text-align: left;

                        &:hover, &:hover ~ td {
                            background-color: rgba(255, 0, 0, 0.2);
                        }
                    }
                    &:nth-child(2) {
                        text-align: center;
                    }
                }
            }

            &.parent {
                border-top: var(--border);

                td {
                    font-weight: bold;
                }
            }
        }

    }

    .separator {
        height: 2em;
    }
}

.controls {
    display: flex;
    gap: 0.8em;
    align-items: center;
    margin-bottom: 1em;

    button {
        background-color: var(--dark3);
        color: var(--light1);
        padding: 0.4em 0.8em;
        border: none;
        cursor: pointer;

        &:hover {
            background-color: var(--dark4);
        }
    }
}