@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    box-sizing: border-box;
}

html {
    /* Always reserve space for the scrollbar so it doesn't shift the content when it appears */
    scrollbar-gutter: stable;
    overflow: auto;
}

body {
    background-color: var(--background);
    /* background-color: hsl(30, 80%, 87%); */

    min-width: min-content;

    margin: 0px;
    font-family: 'Roboto', sans-serif;

    --background: hsl(120, 20%, 65%);
    --layer1-background: hsl(144, 21%, 40%);
    --layer1-text: white;
    --layer2-background: hsl(144, 18%, 50%);
    --layer2-text: white;
    --layer3-background: hsl(30, 80%, 87%);
    --layer3-text: black;
    --table-background: rgb(225, 225, 225);
    --label-background: aliceblue;
    --label-text: black;
}

/* -- General utility classes -- */
.center-contents-vertical, .center-contents-horizontal, .center-contents {
    display: flex;
    flex-direction: column;
}

.center-contents-horizontal, .center-contents {
    align-items: center;
}

.center-contents-vertical, .center-contents {
    justify-content: center;
    min-height: 100vh;
}

.center-text {
    text-align: center;
}

.hidden {
    display: none;
}

/* -- -- */

#errortext {
    color: salmon;
}

.spinner {
    width: 4em;
}

#timetable {
    min-width: fit-content;
    margin: 0px 10px;
}

#calendar-table {
    display: grid;
    width: 90%;
    height: auto;
    min-width: min-content;

    /* --event-rows */
    grid-template-rows: [time-header] max-content repeat(var(--event-rows), max-content);
    /* --event-columns */
    /* At least 4ch wide columns so you can read the time labels */
    grid-template-columns: [day-header] max-content repeat(var(--event-columns), minmax(4ch, 1fr));

    background-color: var(--table-background);
    margin-top: 20px;
    margin-bottom: 20px;

    gap: calc(1px / var(--device-pixel-ratio));

    &>div {
        overflow: hidden;
    }
}

.day-label, .time-label {
    background-color: var(--label-background);
    color: var(--label-text);
    outline: 1px solid black;
    /* Position in front of events to preserve outline */
    z-index: 10;
    text-align: center;
    align-content: center;
}

.day-label {
    padding-left: 1px;
    padding-right: 1px;
}

.time-label {
    font-size: 0.85em;
    padding-top: 1px;
    padding-bottom: 1px;
    position: sticky;
    top: 0;
}

.calendar-event {
    border: 1px solid rgb(85, 85, 85);
    margin: -1px;

    background-color: aliceblue;
    font-size: 0.9em;
    padding-left: 2px;
    /* Position in front of empty-space */
    z-index: 5;

    background: oklch(var(--event-color) / 0.5);

    display: grid;
    grid-template:
        "a b"auto "c b"1fr / minmax(0, 1fr) 2ch;

    &>.event-title {
        grid-area: a;
        text-overflow: clip;
        text-wrap-mode: nowrap;
        overflow: hidden;
    }

    &>.event-type {
        grid-area: b;
        text-align: center;

        background-color: lightgreen;
    }

    &>.event-detail {
        grid-area: c;
    }

    &.calendar-event-type-übung:not(.calendar-event-type-vorlesung) {
        background: repeating-linear-gradient(45deg,
                oklch(var(--event-color) / 0.5),
                oklch(var(--event-color) / 0.5) 10px,
                oklch(var(--event-color) / 0.4) 10px,
                oklch(var(--event-color) / 0.4) 20px);

        &>.event-type {
            background-color: lightskyblue;
        }
    }

    &.calendar-event-type-seminar, &.calendar-event-type-praktikum {
        background: repeating-linear-gradient(-45deg,
                oklch(var(--event-color) / 0.45),
                oklch(var(--event-color) / 0.45) 20px,
                oklch(var(--event-color) / 0.55) 20px,
                oklch(var(--event-color) / 0.55) 40px);

        &>.event-type {
            background-color: lightsalmon;
        }
    }

    &.hovered {
        outline: 2px dashed black;
        z-index: 20;
    }
}

.empty-space {
    /* border: 1px solid darkgray; */
    border-left: 1px solid darkgray;
    border-right: 1px solid darkgray;
    margin: -1px;
}

.top-of-day {
    border-top: 1px solid black;
}

.bottom-of-day {
    border-bottom: 1px solid black;
}

.classpicker-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    position: sticky;
    bottom: 0;
    background-color: var(--background);

    & button {
        font-size: large;
        margin: 5px;
    }

    & #classpicker-clear {
        background-color: pink;
        /* Changing the background color clears all other default button styling for some reason? */
        border: 1px solid black;
        border-radius: 2px;

        &:hover {
            background-color: lightcoral;
        }
    }
}

#classpicker .wrapper {
    margin: 0px 5px;
    min-width: 50%;
    margin-bottom: 50px;
}

#classpicker-options {
    & tri-state-item {
        margin: 8px 0px;
        padding: 5px 4px;
        border-radius: 2px;
    }

    &>tri-state-item {
        background-color: var(--layer1-background);
        color: var(--layer1-text);
        margin: 10px 0px;
        padding: 6px 4px;

        &>tri-state-item {
            background-color: var(--layer2-background);
            color: var(--layer2-text);

            &>tri-state-item {
                border-radius: 0px;
                margin: 0px;
                background-color: var(--layer3-background);
                color: var(--layer3-text);

                &:first-child {
                    border-radius: 2px 2px 0px 0px;
                    padding-top: 8px;
                }

                &:last-child {
                    border-radius: 0px 0px 2px 2px;
                    padding-bottom: 8px;
                }
            }
        }
    }
}

#no-classes-selected button {
    font-size: larger;
}

.phone-hint {
    display: none;

    /* I have to use media query somewhere for the assignmentpoints... */
    @media screen and (max-width: 600px) {
        display: block;
        text-align: center;
        background-color: var(--layer1-background);
        color: var(--layer1-text);
        padding: 8px;
    }
}

.footer {
    width: 100%;
    background-color: var(--layer2-background);
    color: white;
    display: flex;
    justify-content: center;
    padding: 7px 2px;

    & a {
        color: blue;
        white-space: nowrap;
    }
}