*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}

// Theme

:root {
    --gray-000: #ffffff;
    --gray-100: #f8f8f8;
    --gray-300: #f0f0f0;
    --gray-350: #e8e8e8;
    --gray-500: #d8d8d8;
    --gray-600: #c0c0c0;
    --gray-700: #b0b0b0;
    --gray-800: #909090;
    --gray-900: #282828;

    // --accent-100: #e6ceff;
    // --accent-400: #d0b8ef;
    // --accent-500: #aa82db;

    // --accent-100: hsl(221, 100%, 88%);
    // --accent-400: hsl(221, 75%, 78%);
    // --accent-500: hsl(221, 70%, 75%);

    --accent-100: #d6ffc2;
    --accent-400: #6cc16c;
    --accent-500: #5aa05a;
    --accent-900: #244624;
}

$device-s-width: 500px;

// Elements

code {
    font-size: 90%;
}

sup {
    display: inline-block;
    transform: translate(0, -0.25rem);
}

// Headings

$base-font-size: 18px;
$heading-scale: 1.25;

@function pow($number, $exponent) {
    $value: 1;

    @if $exponent > 0 {
        @for $i from 1 through $exponent {
            $value: $value * $number;
        }
    }

    @return $value;
}

@for $i from 1 through 4 {
    h#{$i} {
        margin: 0;

        $factor: pow($heading-scale, 4 - $i);
        font-size: $base-font-size * $factor;
        font-weight: 500;

        &:not(:first-child) {
            padding-top: 0.5rem * $factor;
        }

        line-height: 1;

        display: flex;
        align-items: center;

        gap: 0.5rem;
    }
}

button,
.button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.25rem;

    color: var(--gray-900);

    background: var(--gray-000);
    border: 2px solid var(--gray-350);
    border-radius: 0.5rem;

    font: inherit;
    font-weight: 400;

    padding: 0.5rem 1rem;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    &:hover::after {
        content: '';
        position: absolute;

        inset: 0;
        background: #0000000c;

        z-index: 1;
    }

    &.primary {
        background: var(--accent-100);
        border-color: var(--accent-400);

        &:hover::after {
            background: #00000020;
        }
    }

    &.icon {
        padding: 0.5rem;

        width: 2.5rem;
        height: 2.5rem;
    }

    &.flat {
        border: none;
    }
}

.input-combo {
    display: flex;
    // align-items: center;
    justify-content: center;

    height: 3rem;

    background: var(--gray-000);
    border: 2px solid var(--gray-350);
    border-radius: 0.5rem;

    font-weight: 400;

    // padding: 0.5rem 0.5rem 0.5rem 1rem;

    user-select: none;
    cursor: pointer;

    position: relative;

    select {
        border: none;
        background: none;
        appearance: none;

        font-family: inherit;
        font-size: inherit;
        font-weight: 300;

        height: 100%;
        padding-left: 1rem;
        padding-right: 3rem;

        width: 100%;
    }

    .icon {
        position: absolute;
        right: 0;

        height: 100%;
        width: calc(3rem - 4px);

        display: grid;
        place-content: center;

        pointer-events: none;
    }
}

// Components

.popup-container {
    position: absolute;
    inset: 0;

    z-index: 10;

    background: #00000099;

    max-width: 100%;

    .popup {
        @extend .panel;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        display: flex;
        flex-direction: column;
        gap: 1rem;

        box-shadow: 0 0 1.5rem #00000033;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            user-select: none;

            .title {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                font-size: 24px;
            }
        }

        .content {
            @extend .text-block;

            width: 60ch;
            max-width: 100%;
            max-height: 60vh;

            overflow-y: auto;

            padding-bottom: 3rem;
        }

        max-width: 100%;
    }
}

.compound {
    display: flex;

    .material-symbols-outlined {
        font-size: 20px;
    }

    button,
    .button {
        border-radius: 0;
        border-right: none;

        padding-left: 0.75rem;
        padding-right: 0.75rem;

        height: 2.5rem;

        &:first-child {
            padding-left: 1rem;

            border-top-left-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }

        &:last-child {
            padding-right: 1rem;

            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            border: 2px solid var(--gray-350);
        }

        &.radio {
            &.selected {
                background: var(--accent-100);
                border-color: var(--accent-400);

                & + .radio {
                    border-left-color: var(--accent-400);
                }

                &:hover::after {
                    background: #00000018;
                }
            }
        }
    }
}

// Extension Classes

.panel {
    background: var(--gray-000);
    border: 1px solid var(--gray-500);
    border-radius: 1rem;
    padding: 1rem;
}

.text-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    p {
        line-height: 1.5;

        .material-symbols-outlined {
            font-size: 18px;
            vertical-align: text-top;
        }
    }
}

// Structure

body {
    background: var(--gray-000);
    color: var(--gray-900);

    font-weight: 300;
    font-family: 'Inter', sans-serif;

    position: relative;
}

.toolbar {
    @extend .panel;

    padding: 1rem 0.75rem 1rem 1rem;

    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--gray-500);

    height: 4rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .option-group {
        display: flex;
        align-items: center;

        gap: 0.75rem;

        @media screen and (max-width: $device-s-width) and (orientation: portrait),
            screen and (max-height: $device-s-width) and (orientation: landscape) {
            display: none;
        }
    }

    .logo {
        display: flex;
        align-items: center;

        img {
            max-height: 2.5rem;
        }

        gap: 0.25rem;
    }
}

.events-view {
    height: calc(100vh - 4rem);

    .course-view {
        padding: 1rem;

        display: flex;
        flex-direction: column;
        align-items: center;

        height: 100%;

        overflow-y: scroll;

        .wrap-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

            gap: 1rem;

            width: 100%;
            max-width: 1200px;

            .course {
                @extend .panel;

                display: flex;
                flex-direction: column;

                gap: 0.25rem;

                flex-grow: 1;

                position: relative;

                cursor: pointer;

                &.selected {
                    background: var(--gray-100);

                    &::after {
                        content: '';
                        position: absolute;
                        inset: -1px;
                        border-radius: 1rem;

                        border: 3px solid var(--gray-800);
                    }
                }

                &.highlight {
                    background: var(--gray-300);
                    border-color: var(--gray-700);
                }

                .title {
                    font-size: 24px;
                }

                .docenti {
                    font-size: 16px;
                }
                .events {
                    font-size: 18px;
                }
            }
        }
    }

    .work-week-h-view {
        --header-height: 3rem;
        --event-height: 2rem;

        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: var(--header-height) 1fr;

        overflow-y: scroll;

        height: 100%;

        .week {
            grid-column: 1 / 2;
            grid-row: 2 / 3;

            display: flex;
            flex-direction: column;

            .day {
                box-sizing: content-box;

                // @media screen and (max-width: $device-s-width) {
                //     writing-mode: vertical-lr;
                // }

                height: calc(var(--size) * var(--event-height) + (var(--size) - 1) * 0.25rem);

                border-top: 1px solid var(--gray-500);
                border-right: 1px solid var(--gray-500);
                padding: 0.5rem 1rem 0 0.5rem;

                font-size: 18px;
                font-weight: 400;

                &:last-child {
                    border-bottom: 1px solid var(--gray-500);
                }
            }
        }

        .events {
            grid-column: 2 / 3;
            grid-row: 1 / 3;

            overflow-y: hidden;
            overflow-x: scroll;

            // scrollbar-gutter: stable both-edges;

            display: grid;
            grid-template-rows: auto 1fr;

            --hour-width: 7.5rem;

            .header {
                display: grid;
                grid-template-columns: repeat(12, var(--hour-width));
                grid-template-rows: var(--header-height);

                gap: 0.25rem;

                .label {
                    display: grid;
                    place-content: center;

                    font-size: 18px;
                    font-weight: 400;

                    border-left: 1px solid var(--gray-500);

                    &:nth-child(2),
                    &:nth-child(4) {
                        border-right: 1px solid var(--gray-500);
                    }
                }
            }

            .days {
                display: flex;
                flex-direction: column;

                .day {
                    display: grid;

                    // grid-template-columns: repeat(7, 0) repeat(12, 1fr) repeat(5, 0);
                    grid-template-columns: repeat(12, var(--hour-width));
                    grid-template-rows: repeat(var(--size), var(--event-height));

                    gap: 0.25rem;

                    position: relative;

                    &:hover {
                        z-index: 5;
                    }

                    .event {
                        grid-row: var(--row) / span 1;
                        grid-column: var(--start) / span var(--size);

                        // $color: hsl(var(--hue), 80%, 60%);
                        $color: var(--gray-000);

                        background: $color;
                        color: #000;

                        border-radius: 0.25rem;

                        border: 1px solid var(--gray-600);

                        display: flex;
                        padding: 0.4rem;

                        font-size: 15px;

                        width: 100%;

                        min-height: var(--event-height);
                        overflow: hidden;

                        position: relative;

                        line-height: 1.1;

                        &::after {
                            content: '';
                            position: absolute;
                            inset: 0;

                            border-radius: 0.25rem;

                            background: linear-gradient(to top, $color 0%, transparent 25%);
                        }

                        &:hover {
                            z-index: 3;

                            position: absolute;
                            overflow: visible;

                            &::after {
                                background: none;
                            }
                        }

                        z-index: 2;
                    }

                    border-top: 1px solid var(--gray-500);
                    padding: 0.25rem 0;

                    &:last-child {
                        border-bottom: 1px solid var(--gray-500);
                    }
                }
            }
        }
    }

    .work-week-v-view {
        position: relative;

        display: grid;
        grid-template-columns: max-content repeat(5, minmax(auto, 1fr));

        height: 100%;

        overflow: scroll;

        --event-height: 4.75rem;

        .pivot {
            height: 3rem;

            grid-column: 1 / 2;
            grid-row: 1 / 2;

            position: sticky;
            top: 0;
            left: 0;

            z-index: 2;

            background: var(--gray-000);

            border-bottom: 1px solid var(--gray-500);
            border-right: 1px solid var(--gray-500);
        }

        .left-header {
            grid-column: 1 / 2;
            grid-row: 1 / 2;

            display: grid;

            position: sticky;
            left: 0;

            border-right: 1px solid var(--gray-500);

            background: var(--gray-000);

            z-index: 1;

            padding-top: 3rem;

            .blocks {
                display: grid;

                grid-template-rows: repeat(12, calc(var(--event-height) + 1rem));

                .block {
                    grid-row: var(--start) / span var(--size);

                    display: grid;
                    place-content: center;

                    padding: 0.5rem;

                    font-size: 16px;
                    font-weight: 400;

                    border-top: 1px solid var(--gray-500);

                    @media screen and (max-width: $device-s-width) and (orientation: portrait),
                        screen and (max-height: $device-s-width) and (orientation: landscape) {
                        writing-mode: vertical-lr;
                    }

                    &:not(.skip-border) {
                        height: calc(2 * (var(--event-height) + 1rem) + 1px);
                        border-bottom: 1px solid var(--gray-500);
                    }
                }
            }
        }

        .day {
            position: relative;

            display: flex;
            flex-direction: column;

            .top-header {
                position: sticky;
                top: 0;
                height: 3rem;

                flex: 0 0 auto;

                z-index: 1;

                grid-column: span var(--size);

                display: flex;
                align-items: center;
                justify-content: center;

                font-size: 18px;
                font-weight: 400;

                background: var(--gray-000);
                border-bottom: 1px solid var(--gray-500);
            }

            // &:not(:last-child) {
            border-right: 1px solid var(--gray-500);
            // }

            .events {
                position: relative;

                display: grid;
                grid-template-columns: repeat(var(--size), auto);
                grid-template-rows: repeat(12, var(--event-height));

                padding: 0.5rem;

                gap: 1rem 0.5rem;

                .event {
                    position: relative;

                    grid-row: var(--start) / span var(--size);
                    grid-column: var(--stack) / span 1;

                    background: var(--gray-000);

                    border: 1px solid var(--gray-600);
                    // border: 4px solid hsl(var(--hue), 80%, 80%);

                    border-radius: 0.5rem;

                    display: flex;
                    flex-direction: column;

                    gap: 0.25rem;

                    padding: 0.5rem 1rem 0.5rem 0.5rem;

                    &.selected {
                        background: var(--gray-100);

                        &::after {
                            content: '';
                            position: absolute;
                            inset: -1px;
                            border-radius: 0.5rem;

                            border: 3px solid var(--gray-800);
                        }
                    }

                    &.highlight {
                        background: var(--gray-300);
                        border-color: var(--gray-700);
                    }

                    .title {
                        font-size: 18px;
                        font-weight: 400;
                    }

                    .aula {
                        font-size: 16px;
                        font-weight: 300;
                    }
                }

                .grid-line-h {
                    grid-column: 1 / span var(--size);
                    grid-row: var(--track) / span 2;

                    height: 0px;
                    border-bottom: 1px dashed var(--gray-500);

                    align-self: center;

                    position: relative;
                    top: 0.5px;
                    left: -0.5rem;
                    width: calc(100% + 1rem);

                    z-index: -1;
                }
            }
        }
    }
}

.overlay {
    display: flex;
    position: fixed;

    bottom: 3rem;
    right: 3rem;

    gap: 0.5rem;

    button {
        padding: 0.8rem;

        border-radius: 100%;

        .material-symbols-outlined {
            font-size: 22px;
        }

        color: var(--accent-900);

        box-shadow: 0 0.25rem 0.75rem #00000033;
    }

    animation: fade-in 150ms ease-in forwards;
}

.menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background: var(--gray-000);

    z-index: 10;

    .header {
        height: 4rem;

        padding: 0.75rem 1rem 0.75rem 0.75rem;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border-bottom: 1px solid var(--gray-500);
        .logo {
            display: flex;
            align-items: center;

            img {
                max-height: 2.5rem;
            }

            gap: 0.25rem;
        }
    }

    .options {
        padding: 1rem;

        display: grid;
        grid-template-columns: auto 1fr;

        gap: 1rem;

        align-items: center;

        .label {
            font-weight: 400;
        }
    }

    hr {
        position: relative;

        width: calc(100% - 2rem);
        height: 1px;
        left: 1rem;

        background: var(--gray-500);
        border: none;
    }

    .help {
        @extend .text-block;

        padding: 1rem 1rem 2.5rem;
    }
}

// not on mobile

@media screen and (min-width: $device-s-width) and (orientation: portrait),
    screen and (min-height: $device-s-width) and (orientation: landscape) {
    .mobile {
        display: none;
    }

    .menu {
        display: none;
    }
}

// on mobile

@media screen and (max-width: $device-s-width) and (orientation: portrait),
    screen and (max-height: $device-s-width) and (orientation: landscape) {
    .toolbar {
        padding: 0.75rem 1rem 0.75rem 0.75rem;
    }
}

@media print {
    // @page {
    //     size: A4 landscape;
    // }

    .toolbar,
    .menu,
    .overlay {
        display: none;
    }

    .work-week-v-view {
        overflow: visible;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 150ms ease-in forwards;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

// Utilities

span.bold {
    font-weight: 400;
}