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

html {
    line-height: 1.5;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

a {
    text-decoration: none;
}

header.page-header {
    height: 80px;
    background-color: rgba(0, 55, 104);
    display: flex;
    justify-content: space-between;
    align-items: center;

    aside {
        margin: 1em;
        color: white;
    }

    img {
        padding: 10px 15px;
        height: 100%
    }
}

button, input, textarea {
    padding: 5px;
}

.inline-form .htmx-indicator {
    vertical-align: middle;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1
}

.htmx-request.htmx-indicator {
    opacity: 1
}

.content-container {
    margin: 20px;
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

h1 {
    border-bottom: 1px solid #CCC;
}

.login-container {
    display: grid;

    h1 {
        text-align: center;
        margin: 20px 0;
    }

    > form {
        width: fit-content;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(3, 1fr);
        grid-gap: 20px;

        button, #login_result {
            grid-column-start: 1;
            grid-column-end: 3;
        }
    }
}

#google_drive_link {
    display: block;
    text-align: center;
}

#universal_config, #tum_index {
    display: grid;
    grid-template-columns: 2fr 12fr;
    column-gap: 20px;
    flex-grow: 1;

    #actions_container {

        h2, h3 {
            text-align: center;
        }

        .action-container * {
            margin-bottom: 5px;
        }

        button, input, textarea {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }

        .htmx-indicator {
            margin: 0 auto;
        }
    }

    #data_container {
        border-left: 1px solid #CCC;
        padding: 0 20px;

        header {
            margin-bottom: 10px;
        }

        td, th {
            padding: 0.5em;
            min-width: 100px;
            text-align: left;
            border-top: 1px solid #CCC;

            &.error {
                color: hsl(0, 100%, 50%);
                border-color: hsl(0, 100%, 70%);
                background-color: hsl(0, 100%, 90%);
            }

            &.warning {
                color: hsl(40, 100%, 30%);
                border-color: hsl(40, 100%, 50%);
                background-color: hsl(40, 100%, 80%);
            }
        }
    }
}

.messages {
    border: 1px solid;
    padding: 0.5em;

    &.success {
        color: hsl(130, 50%, 20%);
        border-color: hsl(130, 50%, 60%);
        background-color: hsl(130, 50%, 90%);
    }

    &.error {
        color: hsl(0, 100%, 50%);
        border-color: hsl(0, 100%, 70%);
        background-color: hsl(0, 100%, 90%);
    }

    &.warning {
        color: hsl(40, 100%, 30%);
        border-color: hsl(40, 100%, 50%);
        background-color: hsl(40, 100%, 80%);
    }

    header {
        font-weight: bold;
    }

    ul {
        margin-left: 1em;
    }
}