@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-SemiBold.ttf");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-SemiBoldItalic.ttf");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-ExtraBold.ttf");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-ExtraBoldItalic.ttf");
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-Thin.ttf");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-ThinItalic.ttf");
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-ExtraLight.ttf");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-ExtraLightItalic.ttf");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-Light.ttf");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Intranet';
    src: url("https://files.wediaklup.de/fonts/jetbrains-nerd/JetBrainsMonoNerdFont-LightItalic.ttf");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Besley Intranet';
    src: url("/static/fonts/Besley[wdth,wght].ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Besley Intranet';
    src: url("/static/fonts/Besley-Italic[wdth,wght].ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
}




:root {
    --hue: 0;
    --sat: 0%;

    --color-bg: hsl(var(--hue), var(--sat), 12.25%);
    --color-accent-1: hsl(var(--hue), var(--sat), 9.5%);
    --color-accent-2: hsl(var(--hue), var(--sat), 7.5%);
    --color-fg: #FFF;
    --color-fg-grey: #AAA;

    --color-border-1: hsl(var(--hue), var(--sat), 16.5%);
    --color-border-2: hsl(var(--hue), var(--sat), 29%);
    --color-border-3: hsl(var(--hue), var(--sat), 50%);

    --color-highlight: hsl(var(--hue), var(--sat), 13.5%);

    --color-link: #8CDCFE;
    --color-link-click: #CBBA7D;


    --ff-monospace: 'Google Sans Code', 'JetBrains Intranet', 'Consolas', monospace;
    --ff-heading: 'Century Schoolbook', 'Linux Libertine', serif;
    --ff-serif: 'Besley Intranet', serif;
    --ff-grotesque: 'Inter', sans-serif;

    --__background-color: var(--color-bg);

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

html {
    width: 100vw;
    min-height: 100vh;
}

body {
    width: 100%;
    margin: 0px;

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

    font-family: var(--ff-monospace);
    font-weight: 325;
}

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

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

a.external {
    background-image: url("/static/images/link-external.svg");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
}

h1 {
    font-family: var(--ff-serif);
    font-style: italic;
    margin-bottom: 0.1em;
}

p {
    font-family: var(--ff-monospace);
    font-size: 14pt;
    margin-top: 0;
}

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

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

button.fakelink {
    padding: 0;
    background: none;
    border: 0;
}

#main-grid {
    display: grid;
    grid-template-areas:
        "logo header"
        "sidebar content";
    grid-template-columns: 20vw auto;
    grid-template-rows: 10vh auto;

    height: 100%;

    > * {
        padding: 1rem;
    }

    > #logo-container {
        grid-area: logo;
        border-right: 1px solid var(--color-border-1);

        img {
            height: 100%;
            width: 100%;
            content: url("/static/images/intranet-2025-2.svg");
        }

        img:hover {
            height: 100%;
            width: 100%;
            content: url("/static/images/intranet-2025-2.svg");
        }
    }

    > #header {
        display: flex;
        align-items: center;
        grid-area: header;
        padding-left: 1em;
        font-family: var(--ff-heading);
        font-size: 2.5em;
        font-weight: 700;
    }

    > #sidebar {
        grid-area: sidebar;
        padding: 0;
        border-right: 1px solid var(--color-border-2);
        background-color: var(--color-accent-1);
    }

    > #main-content {
        grid-area: content;
        padding-bottom: 0;
    }

    > #logo-container, > #header {
        border-bottom: 1px solid var(--color-border-2);
        background-color: var(--color-accent-2);
    }
}

#main-grid > #sidebar {
    --__background-color: var(--color-accent-1);

    #login {
        margin: 1em;

        div {
            margin-block: 0.5em;
        }

        #to-matrikel, #to-matrikel button,
        #logoff, #logoff button {
            width: 100%;
        }

        #to-matrikel button {
            margin-bottom: 0.25em;
        }
    }

    #login table {
        width: 100%;

        tr:first-child td {
            padding-top: 0.25em;
        }

        td * {
            width: 100%;
            box-sizing: border-box;
        }

        #top-button td {
            padding-top: 0.5em;
        }
    }

    #links {
        position: sticky;
        top: 1em;
    }

    #links h3 {
        padding-left: 1em;
        font-size: 1em;
    }

    #links a {
        display: block;

        margin-bottom: 1em;
        padding: 1em;

        background-color: var(--color-highlight);
        color: var(--color-fg);
        text-decoration: none;

        img {
            height: 1.2em;
            vertical-align: bottom;
        }

        &:hover {
            background-color: var(--color-border-1);
        }
    }
}

.groupbox {
    position: relative;
    padding: 0.5em;

    > h3 {
        position: absolute;
        top: -0.75em;
        left: 0.25em;

        margin: 0;
        padding-inline: 0.25em;
        background-color: var(--__background-color);

        font-size: 1rem;
    }

    border: 1px solid var(--color-border-2);
}

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

input[type="text"], input[type="number"], input[type="date"], input[type="password"], textarea, select {
    background-color: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--color-border-2);

    &:focus {
        border: 1px solid var(--color-fg);
    }
}

textarea {
    box-sizing: border-box;
}


table.prettytable {
    background-color: var(--color-accent-1);
    border: 0.25em solid var(--color-accent-1);
    border-collapse: collapse;

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

    td, th {
        border: 1px solid var(--color-border-2);
        padding-inline: 0.5em;
    }

    td {
        font-weight: 200;
    }

    td.center {
        text-align: center;
    }
}


table.infobox {
    float: right;

    th {
        text-align: left;
    }

    th.header {
        text-align: center;
    }

    th.footer {
        text-align: center;
        font-size: 0.9rem;
        font-weight: 400;
    }
}


.number-bubble {
    background-color: #ff3939;
    padding-block: 0.05em;
    padding-inline: 0.4em;
    border-radius: 0.2em;
}


.hatch-fill {
    --__hatch-fill-color: #555;
    position: relative;
    background: var(--__hatch-fill-color);
    background: linear-gradient(135deg, var(--__hatch-fill-color) 5%, transparent 5%, transparent 50%, var(--__hatch-fill-color) 50%, var(--__hatch-fill-color) 55%, transparent 55%);
    background-size: 20px 20px;
}


button.inline, input[type="submit"].inline {
    font-size: 75%;
}


dialog {
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    opacity: 1;

    padding: 0;
    padding-bottom: 1rem;
    padding-inline: 1rem;
    border: 2px solid var(--color-border-1);
    box-shadow: 10px 10px 5px #080808;

    background-color: var(--color-accent-1);
    color: #FFF;

    span.close {
        float: right;
        font-size: 2rem;
        color: #AAA;

        &:hover {
            color: #EEE;
            cursor: pointer;
        }
    }

    h1 {
        margin: 0;
        margin-block: 1rem;
        font-size: 1.25em;
        text-align: center;
    }

    .login {
        text-align: center;

        input {
            display: block;
            width: 100%;
            margin-bottom: 0.5rem;
            box-sizing: border-box;
        }
   }

    animation: frombottom 0.3s cubic-bezier(.62,0,.38,.99);
}


code.block {
    display: block;

    padding: 1rem;

    background-color: var(--color-accent-1);
    border-radius: 1rem;
}


@media (max-width: 900px) {
    #main-grid > #logo-container img {
        content: url("https://files.wediaklup.de/intranet/new-logos/emblem.svg");
    }
}


@keyframes frombottom {
    from {
        top: 100vh;
        opacity: 0;
    }
    to {
        top: 34%;
        transform: translateY(-50%);
        opacity: 1;
    }
}


div.frame {
    border: 1px solid var(--color-border-2);
    border-radius: 0px;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 5px;
    min-height: 2em;
}

div.frame p {
    position: relative;
    top: -8px;
    margin: 0;
    padding: 0;
}

div.frame span.heading {
    float: none;
    background-color: var(--color-bg);
    position: relative;
    top: -1.15em;
    padding: 0px 0.2em 0px 0.2em;
    font-weight: 700;
}