:root {
    --color-bg: #111;
    --color-secondary: #313946;
    --color-fg: #FFF;
    --color-border: #AAA;
    --color-link: #8CDCFE;
    --color-link-click: #CBBA7D;

    --ff-monospace: 'JetBrainsMono Nerd Font', 'JetBrains Mono', 'Consolas', monospace;

    scrollbar-color: var(--color-secondary) transparent;
    scrollbar-width: thin;
}

* {
    box-sizing: border-box;
}

html {
    height: 100vh;
}

body {
    height: 100%;
    margin: 0;
    padding-top: 3em;
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--ff-monospace);
}

a {
    color: var(--color-link);
    &:focus { color: var(--color-link-click); }
}

a.plainlinks {
    color: unset;
    text-decoration: unset;
}

h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.main-container {
    display: flex;
    gap: 2em;
    width: 85%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.sidebar {
    padding-right: 2em;
    border-right: 2px solid var(--color-border);
    font-size: 90%;

    img {
        display: block;
        height: 5em;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0.5em;
    }

    h1 {
        margin: 0;
        font-size: 1.75rem;
    }

    ul {
        margin: 0;
        padding-left: 0;
        list-style-type: none;

        li { margin-top: 0.3em; }
    }
}

.content {
    width: 100%;
}

input:not(input[type="submit"], input[type="file"], input[type="checkbox"], input[type="radio"]), textarea, select, option {
    background: transparent;
    color: var(--color-fg);
    font-family: var(--ff-monospace);
    border: 1px solid var(--color-fg);
    width: 100%;
    box-sizing: border-box;
    resize: none;
}

button, input[type="submit"] {
    padding-inline: 1em;
    background-color: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--color-fg);
    font-family: var(--ff-monospace);
    font-size: 1.1em;
    cursor: pointer;

    &:hover {
        background-color: #333;
    }
}

table.prettytable {
    border-collapse: collapse;

    tr {
        td, th { border-block: 1px solid var(--color-fg); }
        &:first-child { td, th { border-top: 0; } }
        &:last-child { td, th { border-bottom: 0; } }
    }

    th, td {
        padding-block: 0.125em;
        padding-inline: 1em;
        border-inline: 1px solid var(--color-fg);

        &:first-child { border-left: 0; }
        &:last-child { border-right: 0; }
    }
}

table.centered {
    text-align: center;
}

.listbox {
    div#add-bar {
        button::before {
            content: '+';
        }
    }
}

.fake-link {
    color: var(--color-link);
    cursor: pointer;
    text-decoration: underline;

    &:click {
        color: var(--color-link-click);
    }
}

.completion-field {
    position: relative;

    .completion-container {
        position: absolute;
        top: 1.5em;
        left: 0;

        background-color: var(--color-bg);
        border: 1px solid var(--color-fg);

        > * {
            padding-inline: 0.5em;
            padding-block: 0.25em;

            .id {
                float: right;
                margin-left: 1em;
                color: #AAA;
            }

            &:hover {
                background-color: var(--color-secondary);
                cursor: pointer;
            }
        }

        > *:not(*:last-child) {
            border-bottom: 1px solid #AAA;
        }
    }
}

@media (max-width: 1200px) {
    body {
        padding-top: 8px;
    }

    .main-container {
        flex-direction: column;
        width: 95%;
    }

    .sidebar {
        border-right: none;
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 1em;
        text-align: center;

        img {
            display: none;
        }

        ul li {
            display: inline-block;

            &:not(&:last-child)::after {
                content: ' \2022 '
            }
        }
    }
}