@import "modern-normalize.css";

:root {
    --radius: 0.5em;

    --bg: #181818;
    --card-bg: #202020;
    --border: #606060;
    --text-fg: #fefefe;
    --text-muted: #bbbbbb;

    --accent: #b16286;
    --accent-bg: #8f3f71;

    --lecture: #ff6000;
    --practice: rgb(34 185 87);
    --lab: rgb(34 185 87);
}

html,
body {
    background-color: var(--bg);
    color: white;
}

body {
    width: 100%;
    min-height: 100dvh;
}

#content {
    width: 100%;

    padding: 2em;

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


.schedule {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
}

.day {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 100%;
    width: 620px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    .lesson,
    .header {
        padding: 0.75em;
        border-bottom: 1px solid var(--border);
    }

    .header {
        font-size: 1.1em;
        background-color: var(--card-bg);

        .week-day {
            font-weight: 600;
        }

    }

    .header.today {
        background-color: var(--accent-bg);
    }

    :last-child {
        border-bottom: none;
    }
}

.lesson {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;


    .time-slot {
        /* TODO: maybe monospace font? */
        /* font-family: monospace; */

        .end,
        .sep {
            color: var(--text-muted)
        }
    }

    .time-sep {
        color: var(--text-muted)
    }


    .type {
        .icon {
            color: inherit;
            filter: brightness(60%);
        }
    }

    .practice {
        color: var(--practice);
    }

    .lecture {
        color: var(--lecture);
    }

    .lab {
        color: var(--lab);
    }
}

.week-selector {
    width: 100%;
    display: flex;
    flex-direction: row;
    border-radius: var(--radius);
    overflow: hidden;
    gap: 0.5em;

    button {
        width: 100%;
        padding: 1em 0;
        background-color: var(--card-bg);
        color: var(--text-fg);
        border: none;
        border-radius: 0px;
        cursor: pointer;
    }

    button.selected {
        background-color: var(--accent-bg);
    }
}



.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);

    svg {
        color: inherit;
    }
}

.with-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25em;
}

/* UTILITIES */

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-1 {
    gap: 0.25em;
}

.gap-2 {
    gap: 0.5em;
}

.gap-3 {
    gap: 0.75em;
}

.gap-4 {
    gap: 1em;
}

.muted {
    color: var(--text-muted);
}