* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: 1.25;
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body, body[data-theme = "light"] {
    --body-fg: #222;
    --body-bg: #fff;

    --primary: #DB5F8E;
    --secondary: #898989;
    --primary-fg: white;
    --secondary-fg: white;

    --cal-header: #222;
    --cal-border: #898989;
    --cal-regular-day: #222;
    --cal-regular-day-bg: #fff;

    --saturday: #59168B;
    --saturday-bg: #f0f0f0;
    --sunday: #9F0712;
    --sunday-bg: #f0f0f0;
    --holiday: #9F0712;
    --holiday-bg: #ffe0e0;
    --day: #222;
    --day-bg: #fff;
    --other-period: #aaa;
    --other-period-bg: #f9f9f9;

    --semester: #222;
    --semester-bg: #FEECF3;
    --exam: #7B890F;
    --chula: #DB5F8E;

    --today: #FEF9C2;

    --shadows-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    --shadows-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    --shadows-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

body {
    color: var(--body-fg);
    background-color: var(--body-bg);
}

.header {
    background-color: var(--primary);
    color: var(--primary-fg);
    padding: 1rem;

    box-shadow: var(--shadows-3)
}

.header h1 {
    font-size: 2rem;
    text-align: center;
    font-weight: normal;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-block: 1rem;
}

.control-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    flex: 1 0 auto;
}

.control-radio-toggle {
    display: flex;
    border-radius: 0.5rem;
    background: var(--secondary);
    color: var(--secondary-fg);

    box-shadow: var(--shadows-2);
}

.control-radio-toggle input {
    display: none;
}

.control-radio-toggle label {
    display: inline-block;
    height: 100%;
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    cursor: pointer;
}

.control-radio-toggle label:first-of-type {
    border-radius: 0.5rem 0 0 0.5rem;
    padding-left: 0.75rem;
}

.control-radio-toggle label:last-of-type {
    border-radius: 0 0.5rem 0.5rem 0;
    padding-right: 0.75rem;
}

.control-radio-toggle input:checked + label {
    background: var(--primary);
}

@media screen and (max-width: 768px) {
    .controls {
        flex-direction: column;
    }

    .control-item {
        justify-content: space-between;
    }
}

.calendar-bar {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0.5rem;
    padding-block: 0.5rem;
    border-block: 1px solid var(--secondary);
    align-items: center;
    justify-content: space-between;
}

.calendar-period {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--cal-header);
}

#calendar-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: 1rem 0.5rem;
    gap: 0.25rem;
}

.cal-c1 {
    grid-column: 1 / 2;
}

.cal-c2 {
    grid-column: 2 / 3;
}

.cal-c3 {
    grid-column: 3 / 4;
}

.cal-c4 {
    grid-column: 4 / 5;
}

.cal-c5 {
    grid-column: 5 / 6;
}

.cal-c6 {
    grid-column: 6 / 7;
}

.cal-c7 {
    grid-column: 7 / 8;
}

.cal-header {
    align-self: center;
    text-align: center;
    color: var(--cal-header);
}

.cal-cell {
    background: var(--cal-regular-day-bg);
    padding: 0.25rem;
    border-radius: 0.25rem;

    display: flex;
    flex-direction: column;
    min-height: 5rem;
    justify-content: space-between;

    box-shadow: var(--shadows-1);
}

.cal-cell--today {
    background: var(--today) !important;
}

.cal-cell--today .cal-cell__date-num {
    font-weight: bold;
}

.cal-cell__date-num {
    color: var(--cal-regular-day);
    text-align: right;
    font-size: 1.25rem;
}

.cal-cell__day-names {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.cal-cell--day {
    background: var(--day-bg);
}

.cal-cell--day .cal-cel__date-num {
    color: var(--day);
}

.cal-cell--semester {
    background: var(--semester-bg);
}

.cal-cell--semester .cal-cell__date-num {
    color: var(--semester);
}

.cal-cell--exam {
    background: var(--semester-bg);
}

.cal-cell--exam .cal-cell__date-num {
    color: var(--exam);
}

.cal-cell--chula {
}

.cal-cell--chula .cal-cell__date-num {
    color: var(--chula);
}

.cal-cell--saturday {
    background: var(--saturday-bg);
}

.cal-cell--saturday .cal-cell__date-num {
    color: var(--saturday);
}

.cal-cell--sunday {
    background: var(--sunday-bg);
}

.cal-cell--sunday .cal-cell__date-num {
    color: var(--sunday);
}

.cal-cell--holiday {
    background: var(--holiday-bg);
}

.cal-cell--holiday .cal-cell__date-num {
    color: var(--holiday);
}

.cal-cell__day-name {
    font-size: 0.75rem;
    color: var(--day);
}

.cal-cell__day-name--holiday {
    color: var(--holiday);
}

.cal-cell__day-name--exam {
    color: var(--exam);
}

.cal-cell__day-name--chula {
    color: var(--chula);
}

.cal-cell--other-month {
    background: var(--other-period-bg);
    color: var(--other-period);
}

.cal-cell--other-month .cal-cell__date-num, .cal-cell--other-month .cal-cell__day-name {
    color: var(--other-period) !important;
}

.cal-legend {
    display: none;

    column-gap: 1rem;
    row-gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    padding-block: 0.25rem;
}

.cal-legend__date {
    font-weight: bold;
}

.cal-legend__day-name, .cal-legend__date {
    color: var(--cal-regular-day);
}

.cal-legend__day-name--holiday, .cal-legend__date--holiday {
    color: var(--holiday);
}

.cal-legend__day-name--exam, .cal-legend__date--exam {
    color: var(--exam);
}

.cal-legend__day-name--chula, .cal-legend__date--chula {
    color: var(--chula);
}

.cal-legend__day-name--day, .cal-legend__date--day {
    color: var(--day);
}

.cal-legend__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

.cal-cell--legend-day {
    border-bottom: 0.25rem solid var(--day);
}

.cal-cell--legend-exam {
    border-bottom: 0.25rem solid var(--exam);
}

.cal-cell--legend-chula {
    border-bottom: 0.25rem solid var(--chula);
}

.cal-cell--legend-holiday {
    border-bottom: 0.25rem solid var(--holiday);
}

.r640-text-short {
    display: none;
}

@media screen and (max-width: 640px) {
    .cal-cell__day-names {
        display: none;
    }

    .cal-cell {
        min-height: 3rem;
    }

    .cal-legend {
        display: flex;
    }

    .r640-text-short {
        display: unset;
    }

    .r640-text-long {
        display: none;
    }

    .cal-cell__date-num {
        font-size: 1rem;
    }
}

.cal-span {
    grid-column: 1 / -1;
}

.btn {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--secondary);
    color: var(--secondary-fg);
    cursor: pointer;
    text-decoration: none;

    box-shadow: var(--shadows-2);
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-fg);
}

.hidden {
    display: none !important;
}

@media screen and (min-width: 1024px) {
    html {
        font-size: 20px;
    }

    .cal-cell__date-num {
        font-size: 1.5rem;
    }
}

.footer {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
}

.footer a {
    color: var(--primary);
}