/* todo @media(prefers-color-scheme: dark) {
    :root {
        --background: #222222;
        --accent-color: #205082;
        --accent-highlight-color: #205082;
    }
} */

@import url("variables.css");

body:before {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    z-index: -1;
    content: "";
    background-image: url("img/background.svg");
    background-repeat: no-repeat;
    background-size: cover;
}

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#react { /* todo move to app.css */
    display: flex;
    flex-direction: column;
    height: 100%;
}

* {
    font-family: monospace;
    box-sizing: border-box;
    color: var(--text-color);
}

/* ------------------------------------- */

/* structure */
body {
    display: flex;
    flex-direction: column;
}

footer {
    background: var(--accent-color);
    height: 48px;
    flex-shrink: 0;
    flex-grow: 0;
}

main {
    flex-grow: 1;
    padding: var(--main-padding);
    overflow: auto;
    position: relative;
    display: flex;
    gap: 20px;
    flex-flow: column;
    flex-wrap: nowrap;
    align-items: start;
}

/* global */

.space {
    flex-grow: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

.error,
.error * {
    color: var(--error-color);
}
.warn,
.warn * {
    color: var(--warn-color);
}
.info,
.info * {
    color: var(--info-color);
}
.success,
.success * {
    color: var(--success-color);
}

input[type="text"],
input[type="password"],
textarea,
select {
    border-radius: 3px;
    border: 1px solid #CCCCCC;
    padding: 5px;
    resize: none;
}
    input[type="text"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    select:focus {
        border: 1px solid var(--accent-color);
        outline: 1px solid var(--accent-color);
    }

input.invalid,
textarea.invalid,
select.invalid {
    outline: 2px solid var(--error-color);
}

input[type="submit"],
button {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 14px;
}
    button:disabled {
        color: var(--disabled-color);
        border-color: var(--disabled-color);
        cursor: default;
    }
        button:hover:not(:disabled) {
            background-color: #DDDDFF;
        }
    input[type="submit"]:not(:disabled),
    button.primary:not(:disabled) {
        background-color: var(--accent-background-color);
        color: #EEEEEE;
        font-weight: bold;
    }
        input[type="submit"]:hover:not(:disabled),
        button.primary:hover:not(:disabled) {
            background-color: var(--accent-color);
        }
    button.warn:not(:disabled) {
        background-color: var(--warn-background-color);
        border-color: var(--warn-color);
        color: #EEEEEE;
        font-weight: bold;
    }
        button.warn:hover:not(:disabled) {
            background-color: var(--warn-highlight-color);
        }
    button.danger:not(:disabled) {
        background-color: var(--danger-background-color);
        border-color: var(--danger-color);
        color: #EEEEEE;
        font-weight: bold;
    }
        button.danger:hover:not(:disabled) {
            background-color: var(--danger-color);
        }

.actionBar {
    position: fixed;
    inset: auto 0 0 0;
    padding: 10px;
    background: var(--action-bar-background);
    box-shadow: var(--box-shadow-default);
    display: flex;
    gap: 10px;
    align-items: center;
}

main:has(.actionBar) {
    margin-bottom: 50px;
}

img.clickable {
    cursor: pointer;
}