/* GENERAL ------------------------------------------------------------------ */
:root {
    --color-heading-period-num: 156, 91, 205;
    --color-heading-period-time: 75, 208, 255;
    --color-day-name: 237, 125, 49;
    --color-period-free: 146, 208, 0;
    --color-period-noncommon-text: 220, 0, 0;
    --color-period-noncommon: 255, 96, 96;
    --color-period-conflict-text: 255, 255, 255;
    --color-period-conflict: 0, 127, 255;
    --transition-duration: 0.1s;
}

button, select {
    font: inherit;
}

#loading {
    position: fixed; top: 0; bottom: 0; left: 0; right: 0;
    background-color: #000000b0;
    font-size: 5em;
    font-weight: bold;
    color: white;
    text-shadow: black 0pt 0pt 10pt;
    user-select: none;
    z-index: 9999;

    backdrop-filter: blur(15px);

    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

#loading.complete {
    background-color: transparent;
    visibility: hidden;
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.2s 0s ease-in, visibility 0s 0.2s, background-color 0.2s 0s linear;
}

#loading > span {
    font-size: 0em;
    opacity: 0;
    font-weight: lighter;
    animation-name: loading-fade;
    animation-duration: 0.25s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes loading-fade {
    /* from {opacity: 0;}
    to {opacity: 1;} */
    from {font-size: 0em; opacity: 0;}
    to   {font-size: 0.6em; opacity: 1;}
}

/* TIMETABLE LIST - OLD ----------------------------------------------------- */
/* fieldset {display: inline-block; column-count: 3;}
label > b {color: red;} */

/* TIMETABLE LIST - NEW ----------------------------------------------------- */
#timetable-list, .timetable-list {
    background-color: #e0e0e0;
    border-radius: 8pt;
    padding: 8pt;
    margin-top: 1em; margin-bottom: 1em;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* was previously nowrap */
    overflow-x: auto;
    gap: 8pt;
    user-select: none;
}

.timetable-entry {
    padding: 8pt;
    border-radius: 8pt;
    background-color: #d0d0d0;
    min-width: 10em;
    cursor: pointer;
    transition: background-color var(--transition-duration), transform var(--transition-duration) ease-in-out;
}
.timetable-entry:hover {background-color: #f0f0f0;}
.timetable-entry:active:not(:has(button.action:active, input:active)) {background-color: #c7c7c7; transform: scale(calc(1 / 1.05));}
.timetable-entry:has(input:checked) {background-color: #80f080;}
.timetable-entry:has(input:checked):hover {background-color: #a0ffa0;}
.timetable-entry:has(input:checked):active:not(:has(button.action:active, input:active)) {background-color: #70e070;}
.timetable-entry > button.action {
    float: right;
    background-color: unset;
    border: none;
    padding: 0 0 0 2pt;
    cursor: pointer;
    /* transition: transform var(--transition-duration) ease-in-out; Useless since whole timetable is rebuilt */
}
.timetable-entry > button.action:hover {transform: scale(1.2);}
.timetable-entry > button.action:active {transform: scale(calc(1 / 1.2));}

.timetable-entry p {margin: 0;}
.timetable-entry .attr-key {
    font-weight: bold;
    display: inline;
    white-space: pre-line;
}
.timetable-entry .attr-course {
    font-size: 0.9em;
}
.timetable-entry .attr-course-id {
    font-style: italic;
    color: rgba(0, 0, 0, 0.5)
}

button#timetable-list-add {
    background-color: unset;
    border: none;
    font-size: 2em;
    font-weight: bold;
    padding: 8pt;
    border-radius: 8pt;
    vertical-align: bottom;
    align-self: center;
    cursor: pointer;
    transition: color var(--transition-duration);
}
button#timetable-list-add:hover {color: #00da00;}
button#timetable-list-add:active {color: #00b100;}

/* TABLE -------------------------------------------------------------------- */
#timetable {
    border-collapse: separate;
    border-spacing: 4pt;
    white-space: nowrap;
    transform-origin: top left;
    /* box-shadow: 0pt 0pt 10pt 0pt rgba(0, 0, 0, 1); */
    /* background-color: transparent; */
    filter: drop-shadow(0pt 0pt 2pt rgba(0,0,0,0.5));
}

#timetable-resize-container {
    overflow-x: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#timetable-container {
    /* overflow-x: auto; */
    display: inline-block;
    border: 1px dotted gray;
    padding: 8pt;
    border-radius: 8pt;
}

#timetable-title {
    font-family: Cambria, Georgia, serif;
    text-align: center;
}

td, th {
    border-radius: 4pt;
    text-align: center;
    vertical-align: middle;
    padding: 0.5em;
    background-color: white;
    transition: width var(--transition-duration) ease-in-out;
}

/* PERIODS ------------------------------------------------------------------ */
.blank {
    border: none;
    visibility: hidden;
}

.heading-period-num {
    background-color: rgb(var(--color-heading-period-num));
    font-size: 2em;
}

.heading-period-time {
    background-color: rgb(var(--color-heading-period-time));
    font-size: 0.9em;
}

.day-name {
    background-color: rgb(var(--color-day-name));
    font-size: 1.75em;
    text-align: right;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.day-fields {
    border-left: none;
    text-align: left;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.period {
    white-space: nowrap;
}
.period-free {
    background-color: rgb(var(--color-period-free));
}
.period-noncommon {
    color: rgb(var(--color-period-noncommon-text));
    background-color: rgb(var(--color-period-noncommon));
    font-size: 3em;
    padding: 0;
}
.period-conflict, .period-indeterminate {
    color: rgb(var(--color-period-conflict-text));
    background-color: rgb(var(--color-period-conflict));
    font-size: 3em;
    padding: 0;
}

td > p {
    margin: 0;
    line-height: 1.75em;
}

td > p:not(:nth-child(1)) { /* Select all but 1st element */
    border-top: 1px dotted gray;
}

/* BUILDER ------------------------------------------------------------------ */
#builder-container {
    position: fixed; top: 0; bottom: 0; left: 0; right: 0;
    background-color: #000000b0;
}
#builder-container.hidden {display: none;}
body:has(#builder-container):not(:has(#builder-container.hidden)) {overflow: hidden;}

#builder {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: white;
    margin: 8pt;
    border-radius: 8pt;
    padding: 8pt;
    display: grid;
    grid-template-rows: auto max-content;
    row-gap: 8pt;
}

#builder-contents {grid-row: 1; overflow-y: auto;}
#builder-actions {grid-row: 2;}

#builder button {
    cursor: pointer;
    float: right;
    border: none;
    background-color: #e0e0e0;
    font-size: 1.2em;
    padding: 8pt 8pt 8pt 8pt;
    border-radius: 8pt;
    transition: background-color var(--transition-duration), transform var(--transition-duration) ease-in-out;
}
#builder button + button {margin-right: 8pt;}
#builder button:hover {background-color: #f0f0f0;}
#builder button:active {background-color: #c7c7c7; transform: scale(calc(1 / 1.05));}
button#builder-ok {background-color: #80f080;}
button#builder-ok:hover {background-color: #a0ffa0;}
button#builder-ok:active {background-color: #70e070;}

#builder-title {
    font-family: Georgia, serif;
    text-align: center;
}

/* #builder-title-edit { // Button
    text-align: center;
    display: block;
} */

#builder-title-edit, .builder-title-edit {
    font: inherit;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid gray;
    text-align: right;
}
#builder-title-edit:focus {
    outline: none;
    border-bottom: 2px solid #70e070;
}
#builder-title-edit:read-only {
    border-bottom: none;
}

/* PRINT -------------------------------------------------------------------- */
/* Reference: https://stackoverflow.com/a/2618980/ */
@media print {
    @page {
        size: A4 landscape;
    }

    body {
        font-size: 8pt;
    }

    body > :not(#timetable-resize-container) {
        display: none;
    }

    #timetable {
        white-space: nowrap;
        zoom: unset !important;
    }
}