@import "https://a.cza.li/f/fa/css/solid.css";
@import "https://a.cza.li/f/inter/inter.css";
@import "https://a.cza.li/f/fira-code-nf/regular.css";
@import "./color-scheme.css";
@import "./header.css";
@import "./sidebar.css";
@import "./calendar.css";
@import "./calendar-list.css";
@import "./edit-event.css";

body {
    --expanded-sidebar-width: min(25rem, 100vw);
    --sidebar-width: var(--expanded-sidebar-width);
    --border-radius: 0.5rem;
    --header-height: 4em;
}
body.sidebar-closed {
    --sidebar-width: 0px;
}

@media (max-width: 860px) {
    html {
        font-size: 95%;
    }

    main {
        margin-left: calc(-1 * var(--sidebar-width));
    }
    /*#current-unit-name {
        display: none;
    }*/
    #current-unit-name {
        order: 1;
    }
    #current-unit-name .fancy {
        display: none;
    }
    #previous-unit {
        order: 2;
        padding-right: 0.25rem;
        padding-left: 1.5rem;
    }
    #next-unit {
        order: 3;
        padding-left: 0.25rem;
        padding-right: 1.5rem;
    }
    body.sidebar-closed #over-sidebar h1 {
        display: none;
    }
    #over-sidebar-bg {
        display: none;
    }

    #over-sidebar {
        padding-right: 0.75rem;
    }

    body.sidebar-closed #over-sidebar,
    body:not(.sidebar-closed) #over-sidebar,
    body.sidebar-closed #over-sidebar :before,
    body:not(.sidebar-closed) #over-sidebar :before,
    body.sidebar-closed #over-sidebar :after,
    body:not(.sidebar-closed) #over-sidebar :after {
        min-width: 0;
        --bg-h: var(--r-bg-h);
        --bg-l: var(--r-bg-l);
        --bg-s: var(--r-bg-s);
    }

    body:not(.sidebar-closed) #unit-display {
        display: none;
    }

    body:not(.sidebar-closed) main {
        background: var(--bg);
        filter: contrast(90%) blur(8px) brightness(0.9);
        pointer-events: none;
    }

    header {
        background: var(--bg);
        z-index: 2;
    }
}

*,
:before,
:after {
    box-sizing: border-box;
    transition: all 0.1s ease;
    font-family: "Inter", sans-serif;
}

table {
    border-collapse: collapse;
}

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;

    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas:
        "header header"
        "sidebar calendar";

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

body > header {
    grid-area: header;
}

body > .popup,
#loading-overlay {
    z-index: 4;

    background: hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.5);
    backdrop-filter: blur(2px);

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

    visibility: hidden;
    opacity: 0;

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

    transition:
        visibility 0s ease 0.2s,
        opacity 0.2s ease;
}
body > .popup.visible,
#loading-overlay.visible {
    visibility: visible;
    opacity: 1;

    transition:
        visibility 0s ease 0s,
        opacity 0.2s ease;
}

body > .popup > .content {
    min-width: min(40rem, calc(100% - 2rem));
    max-width: min(60rem, calc(100% - 2rem));
    max-height: calc(100% - 2rem);

    overflow: auto;

    --bg-h: var(--r-hbg-h);
    --bg-s: var(--r-hbg-s);
    --bg-l: var(--r-hbg-l);

    --hbg-h: var(--r-bg-h);
    --hbg-s: var(--r-bg-s);
    --hbg-l: var(--r-bg-l);

    display: block;
    background: var(--bg);
    margin: 1rem;
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--fg);
    box-shadow: 0 0.5em 2em hsla(0deg, 0%, 0%, 0.8);

    transform: translateY(-5%) scale(95%);
    transition: transform 0.2s ease;
}
body > .popup.visible > .content {
    transform: translateY(0%) scale(100%);
}

body > .popup > .content > :not(.no-block):not(.button-group) {
    display: block;
    width: 100%;
}
.spacer {
    width: 1em;
    height: 1em;
}

body > .popup.mandatory {
    background: var(--bg);
    background: linear-gradient(to bottom right, var(--bg) 50%, var(--ac) 750%);

    overflow: hidden;
}
body > .popup.mandatory:before,
body > .popup.mandatory:after {
    content: " ";
    display: block;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: calc(60rem + max(0rem, (1 / 2) * (100% - 60rem)));
    min-height: 60rem;

    clip-path: url(#foregroundClip);
}
body > .popup.mandatory:before {
    background: linear-gradient(
        to bottom right,
        goldenrod -75%,
        var(--ac) 50%,
        cornflowerblue 150%
    );
}
body > .popup.mandatory:after {
    background: linear-gradient(
            to right,
            hsla(var(--border-h), var(--border-s), var(--border-l), 20%) 2px,
            transparent 2px,
            transparent 4rem
        ),
        linear-gradient(
            to bottom,
            hsla(var(--border-h), var(--border-s), var(--border-l), 20%) 2px,
            transparent 2px,
            transparent 4rem
        );

    background-size: 4rem 4rem;
    background-position: 2rem 2rem;
}

body > .popup.mandatory > .content {
    background: hsla(var(--bg-h), var(--bg-s), var(--bg-l), 92.5%);
    backdrop-filter: blur(1em);
    z-index: 2;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#loading-overlay-spinner {
    border-radius: 100%;
    width: 4rem;
    height: 4rem;

    border: transparent 0.25rem dotted;
    border-top-color: var(--fg);

    animation: rotate 0.5s ease-in-out infinite;
}

#over-sidebar-bg {
    grid-area: 1 / 1 / 1 / 1;
}
#sidebar {
    grid-area: sidebar;
    overflow-x: hidden;
    overflow-y: auto;
}

#sidebar-contents {
    min-width: var(--expanded-sidebar-width);
    float: right;
}

#calendar {
    grid-area: calendar;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    display: inline-block;
    margin: 0;
}

button {
    cursor: pointer;
}

button,
input[type="button"],
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="reset"],
input[type="search"],
input[type="submit"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
    --button-bg-h: var(--hbg-h);
    --button-bg-s: var(--hbg-s);
    --button-bg-l: var(--hbg-l);

    --button-bg: hsl(
        var(--button-bg-h),
        var(--button-bg-s),
        var(--button-bg-l)
    );

    border: 2px solid var(--hbg);
    border-radius: var(--border-radius);
    font-size: 100%;
    padding: 0.75em 1rem;
    line-height: 1.4em;
    background: var(--button-bg);
    color: var(--fg);
    resize: none;
}

input[type="color"]:not(.untouched):invalid:not(:focus),
input[type="date"]:not(.untouched):invalid:not(:focus),
input[type="datetime-local"]:not(.untouched):invalid:not(:focus),
input[type="email"]:not(.untouched):invalid:not(:focus),
input[type="file"]:not(.untouched):invalid:not(:focus),
input[type="month"]:not(.untouched):invalid:not(:focus),
input[type="number"]:not(.untouched):invalid:not(:focus),
input[type="password"]:not(.untouched):invalid:not(:focus),
input[type="range"]:not(.untouched):invalid:not(:focus),
input[type="search"]:not(.untouched):invalid:not(:focus),
input[type="tel"]:not(.untouched):invalid:not(:focus),
input[type="text"]:not(.untouched):invalid:not(:focus),
input[type="time"]:not(.untouched):invalid:not(:focus),
input[type="url"]:not(.untouched):invalid:not(:focus),
input[type="week"]:not(.untouched):invalid:not(:focus),
textarea:not(.untouched):invalid:not(:focus) {
    --button-bg-h: calc(0.6 * var(--hbg-h) + 0.4 * var(--err-h));
    --button-bg-s: calc(0.6 * var(--hbg-s) + 0.4 * var(--err-s));
    --button-bg-l: calc(0.6 * var(--hbg-l) + 0.4 * var(--err-l));
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
pre,
pre *,
code,
code * {
    font-family: "Fira Code", monospace;
}

button.primary,
input[type="button"].primary,
input[type="color"].primary,
input[type="date"].primary,
input[type="datetime-local"].primary,
input[type="email"].primary,
input[type="file"].primary,
input[type="month"].primary,
input[type="number"].primary,
input[type="password"].primary,
input[type="range"].primary,
input[type="reset"].primary,
input[type="search"].primary,
input[type="submit"].primary,
input[type="tel"].primary,
input[type="text"].primary,
input[type="time"].primary,
input[type="url"].primary,
input[type="week"].primary,
textarea.primary {
    --button-bg-h: var(--ac-h);
    --button-bg-s: var(--ac-s);
    --button-bg-l: var(--ac-l);

    --fg-h: var(--ac-fg-h);
    --fg-s: var(--ac-fg-s);
    --fg-l: var(--ac-fg-l);
}

button.primary:not(:disabled):hover,
input.primary:not(:disabled):hover,
textarea.primary:not(:disabled):hover {
    --button-bg-h: var(--ac-h);
    --button-bg-s: calc(0.9 * var(--ac-s) + 0.1 * var(--fg-s));
    --button-bg-l: calc(0.9 * var(--ac-l) + 0.1 * var(--fg-l));
}
button.primary:not(:disabled):active,
input.primary:not(:disabled):active,
textarea.primary:not(:disabled):active {
    --button-bg-h: var(--ac-h);
    --button-bg-s: calc(0.8 * var(--ac-s) + 0.2 * var(--fg-s));
    --button-bg-l: calc(0.8 * var(--ac-l) + 0.2 * var(--fg-l));
}

button:not(:disabled):hover,
a:not(:disabled):hover,
input:not(:disabled):hover,
textarea:not(:disabled):hover {
    --ac-s: calc(0.8 * var(--r-ac-s) + 0.2 * var(--r-ac-fg-s));
    --ac-l: calc(0.8 * var(--r-ac-l) + 0.2 * var(--r-ac-fg-l));
    --ac-fg-s: calc(0.1 * var(--r-ac-s) + 0.9 * var(--r-ac-fg-s));
    --ac-fg-l: calc(0.1 * var(--r-ac-l) + 0.9 * var(--r-ac-fg-l));

    --button-bg-h: var(--ac-h);
    --button-bg-s: calc(0.9 * var(--hbg-s) + 0.1 * var(--ac-s));
    --button-bg-l: calc(0.9 * var(--hbg-l) + 0.1 * var(--ac-l));
}
button:not(:disabled):active,
a:not(:disabled):active,
input:not(:disabled):active,
textarea:not(:disabled):active {
    --ac-s: calc(0.6 * var(--r-ac-s) + 0.4 * var(--r-ac-fg-s));
    --ac-l: calc(0.6 * var(--r-ac-l) + 0.4 * var(--r-ac-fg-l));
    --ac-fg-s: calc(0.2 * var(--r-ac-s) + 0.8 * var(--r-ac-fg-s));
    --ac-fg-l: calc(0.2 * var(--r-ac-l) + 0.8 * var(--r-ac-fg-l));

    --button-bg-h: var(--ac-h);
    --button-bg-s: calc(0.8 * var(--hbg-s) + 0.2 * var(--ac-s));
    --button-bg-l: calc(0.8 * var(--hbg-l) + 0.2 * var(--ac-l));
}

button:disabled,
a:disabled,
input:disabled,
textarea:disabled,
form :invalid ~ button[type="submit"],
form :invalid ~ input[type="submit"],
button.loading {
    --ac-s: 0%;
    pointer-events: none;
    opacity: 0.6;
}

button,
a,
input,
.button-toggle {
    border-radius: var(--border-radius);
}

button.only-icon {
    border: none;
    background: none;
    color: var(--ac);
    font-size: 1.5em;
}
button:before,
button:after {
    font-family: "Font Awesome 6 Free";
}

button.server-setup-info-button {
    padding: 0 0.25em;
    font-size: 100%;
}
button.server-setup-info-button:before {
    content: "\f059";
}

.button-group {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 0.5em;
}

.button-group > button {
    flex-grow: 1;
}

.button-toggle {
    font-size: 75%;
    margin-left: auto;
    border-radius: var(--border-radius);
    border: var(--ac) 1px solid;
    overflow: hidden;
    display: grid;
    justify-content: stretch;
    grid-template-columns: repeat(var(--button-count), 1fr);
}

.button-toggle > button {
    --bg-h: var(--ac-h);
    --bg-s: var(--hbg-s);
    --bg-l: var(--hbg-l);

    padding: 0.5em 0.5em;
    border-radius: 0;
    border: none;
    background: var(--bg);
    grid-row: 1;
}
.button-toggle > button:hover {
    --hbg-s: calc(0.9 * var(--r-hbg-s) + 0.1 * var(--ac-s));
    --hbg-l: calc(0.9 * var(--r-hbg-l) + 0.1 * var(--ac-l));
}
.button-toggle > button:active {
    --hbg-s: calc(0.8 * var(--r-hbg-s) + 0.2 * var(--ac-s));
    --hbg-l: calc(0.8 * var(--r-hbg-l) + 0.2 * var(--ac-l));
}

.button-toggle > button.active,
.button-toggle > button.active:before {
    --bg: var(--ac);
    --fg: var(--ac-fg);

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

.button-toggle > button:disabled {
    display: none;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 2.5em;
    height: 1.75em;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid var(--border-color);
    -webkit-transition: 0.1s;
    transition: 0.1s;
    border-radius: 1em;

    background-color: hsl(
        calc(0.25 * var(--fg-h) + 0.75 * var(--bg-h)),
        calc(0.25 * var(--fg-s) + 0.75 * var(--bg-s)),
        calc(0.25 * var(--fg-l) + 0.75 * var(--bg-l))
    );
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 1.25em;
    width: 1.25em;
    left: 0.125em;
    bottom: 0.125em;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    border-radius: 1em;

    background-color: hsl(
        var(--ac-h),
        var(--ac-s),
        calc(0.5 * var(--ac-l) + 0.5 * var(--fg-l))
    );
}

.switch input:checked + .slider {
    background-color: var(--ac);
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px var(--ac);
}

.switch input:checked + .slider:before {
    transform: translateX(0.75em);
    background-color: var(--ac-fg);
}

label[for] {
    display: block;
    padding-inline-start: 0.25em;
}

button.loading:after {
    display: inline-block;
    content: " ";

    width: 0.7em;
    height: 0.7em;
    border-radius: 1em;

    border: 2px dotted currentColor;
    border-top: 2px solid transparent;

    margin-left: 0.5em;

    animation: rotate 0.5s ease-in-out infinite;
}