@font-face {
    font-family: 'Rubik';
    src: url("/static/fonts/rubik/Rubik-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik';
    src: url("/static/fonts/rubik/Rubik-VariableFont_wght.ttf");
}

@font-face {
    font-family: 'Rubik';
    src: url("/static/fonts/rubik/Rubik-Italic-VariableFont_wght.ttf");
    font-style: italic;
}

@font-face {
    font-family: 'Normalfraktur';
    src: url("/static/fonts/normalfraktur/DS.NORMALFRAKTUR.OT.OTF");
    font-weight: 400;
}

@font-face {
    font-family: 'Normalfraktur';
    src: url("/static/fonts/normalfraktur/DS.NORMALFRAKTUR.OT-BOLD.OTF");
    font-weight: 700;
}

@font-face {
    font-family: 'MarsFraktur';
    src: url("/static/fonts/mars/MARSFRAKTUROT-NORMAL.OTF");
    font-weight: 400;
}

@font-face {
    font-family: 'MarsFraktur';
    src: url("/static/fonts/mars/MARSFRAKTUROT-BOLD.OTF");
    font-weight: 700;
}

@font-face {
    font-family: 'AntiquaEnglisch';
    src: url("/static/fonts/antq-eng/ANTIQUAENGLISCH10LOT-NORMAL_0.OTF");
}



:root {
    --ff-standard: 'Rubik', 'Open Sans', 'Tahoma', sans-serif; 
    --ff-heading: 'CMU Serif', 'Old Standard TT', 'Linux Libertine', 'Georgia';

    --color-link: #8CDCFE;
    --color-link-visited: #9479C0;
    --color-link-focus: #CBBA7D;

    --color-bg-base: #1A1D20;
    --color-bg-light: #2C3034;
    --color-bg: #212529;
    --color-fg: #dee2e6;
}

html {
    height: 100%;
}

body {
    min-height: calc(100% - 1rem);
    font-family: var(--ff-standard);
    background-color: var(--color-bg-base) !important;
    color: var(--color-fg) !important;
}

a {
    color: var(--color-link);

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

sc {
    font-variant: small-caps;
}

p {
    text-align: justify;
}

button {
    background-color: var(--color-bg-light);
}


.link {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-link);
    background: transparent;
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;

    &:focus, &:active {
        color: var(--color-link-focus);
    }

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

.main-container {
    min-height: 100vh;
    box-sizing: border-box;
    margin-top: 1rem;
    margin-inline: auto;
    padding: 2em;

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

.nomargin {
    margin: 0;
}

.index-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 80%;

    margin-bottom: 2em;

    img {
        height: 4.5em;
    }
}

.infobox {
    float: right;
    clear: right;
}

.editor {
    font-size: 1.1rem;
    border: 1px solid #CCC;
    min-height: 15em;
}


table.prettytable {
    th, caption, td {
        padding-block: 0.1em;
        padding-inline: 1em;
        border: 0;
    }

    caption {
        border-bottom: 0;
    }

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

    tr:nth-child(odd) {
        background-color: var(--color-bg-light);
    }
}

table.prettytable.center, table.prettytable.centered {
    th, caption, td {
        text-align: center;
    }
}

table.prettytable.compact {
    th, caption, td {
        padding-inline: 0.25em;
    }
}

table.unformatted {
    th {
        padding-right: 1em;
        text-align: left;

        &::after {
            content: ':';
        }
    }
}

button.inline {
    font-size: 0.75em;
}


#index-content {
    display: flex;
    flex-direction: column;
    margin-top: 3em;

    #index-normungsprozess {
        flex: 1;
    }

    #index-desc {
        flex: 3.5;
        margin-block: 1.5em;
        margin-inline: 0;

        border-block: 1px solid #444;
        border-inline: 0;

        padding-block: 1.5em;
        padding-inline: 0;

        h1 { margin-top: 0.25em; }
    }

    #index-latest {
        flex: 1;
    }
}

#navbar-login-name img {
    height: 1em;
    vertical-align: middle;
}

.navbar-container {
    display: inline-block;
    width: 30ch;

    &.login {
        margin-inline: 1em;
        padding-inline: 1em;
        border-inline: 1px solid #444;
    }
}

.id-input {
    display: flex;
    position: relative;

    input[type="number"] {
        width: 10ch;
        padding-left: 3ch;
    }

    &::before {
        position: absolute;
        top: 4%;
        content: "Id";
        font-family: var(--font-monospace);
        font-size: 90%;
        font-variant: small-caps;
        left: 2px;
    }

    &.subject::before {
        content: "Ps";
    }

    &.norm::before {
        content: "Pl";
    }

    *:first-child {
        border-right: 0;
    }
}

.dashboard-wrapper {
    display: flex;

    > iframe, div.content {
        flex: 4;
    }

    .dashboard {
        flex: 3;
        width: 100%;
        padding-block: 8px;
        padding-inline: 1rem;
        border-left: 1px solid #444;

        h1 {
            display: block;
            margin-top: 0;
            margin-bottom: 0.5rem;
            text-align: center;
        }

        h2 {
            font-weight: 600;
            font-size: 16pt;
        }
    }
}

input.link {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    text-decoration: underline;

    color: #8CdCFE;

    &:visited {
        color: #9479C0;
    }

    &:focus {
        color: #CBBA7D;
    }
}

input[type="checkbox"] {
    width: min-content !important;
    margin: 0;
    margin-right: 0.5ch;
}


div[class$="-completion-container"] {
    display: none;
    border: 1px solid var(--color-fg);
    border-top: 0;

    .loading {
        padding: 0.5em;
        text-align: center;

        img {
            height: 2em;
        }
    }

    .empty {
        padding: 0.5em;
        text-align: center;
    }

    > * {
        border-top: 1px solid var(--color-fg);

        &:hover {
            background-color: navy;
            cursor: pointer;
        }
    }

    > *:first-child {
        border-top: 0;
    }
}


span.norm::before {
    content: 'Pl ';
    font-variant: small-caps;
}

ul.feed {
    list-style: none;
    padding-left: 0em;
    
    li { margin-bottom: 0.4em; }
}

ul.spread {
    li {
        margin-bottom: 0.25em;
        &:last-child { margin-bottom: 0; }
    }
}

ul.close {
    padding-left: 1.2em;
}

form.listbox {
    #add-bar, #element-wrapper div {
        display: flex;
        gap: 0.5em;
        margin-bottom: 0.5em;
    }

    button { font-size: 0.75rem; }

    #add-bar {
        padding-bottom: 0.5em;
        border-bottom: 1px solid #444;

        button::before { content: '+'; }
    }

    #element-wrapper div button::before { content: '-'; }

    #submit {
        width: 100%;
        font-size: 100%;
        &::before { content: 'Speichern'; }
    }
}






@media (min-width: 1200px) {

    .main-container {
        width: 85%;
    }
    
    #index-content {
        flex-direction: row;

        #index-desc {
            margin-block: 0;
            margin-inline: 1.5em;

            border-block: 0;
            border-inline: 1px solid #444;

            padding-block: 0;
            padding-inline: 1.5em;
        }
    }
}

@media (max-width: 1200px) {
    .dashboard-wrapper {
        flex-direction: column;

        .dashboard {
            border-left: 0;
            border-top: 1px solid #444;
            padding-top: 1rem;
        }
    }
}

@media (max-width: 850px) {
    .index-navbar {
        flex-direction: column;
        gap: 1em;
    }

    .navbar-container.login {
        border-left: 0;
    }
}