/*###
FONTS
###*/
@font-face {
    font-family: "fira";
    src: url(../fonts/Fira_Sans/FiraSans-Regular.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "fira";
    src: url(../fonts/Fira_Sans/FiraSans-Bold.woff2);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "fira";
    src: url(../fonts/Fira_Sans/FiraSans-Italic.woff2);
    font-weight: normal;
    font-style: italic;
}

/*#############
BASIC VARIABLES
#############*/
:root {
    --animation-duration: 0.15s;
    --animation-duration-2: calc(var(--animation-duration) * 2);

    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 2rem;
    --spacing-5: 4rem;

    --header-height: 6rem;



    /* allows animating to/from intrinsic values like auto, min/max/fit-content
       putting it in :root basically makes all CSS work the way it should've from the start
       needed currently only for animating details/summary */
    interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --animation-duration: 0s;
    }
}

/*##################
LIGHT MODE VARIABLES
##################*/
:root {
    --hue: 45;
    --sat: 61%;
    --lig: 56%;

    --primary: hsl(var(--hue), var(--sat), var(--lig));
    --primary-font: light-dark(hsl(var(--hue), var(--sat), calc(var(--lig) - 20%)), var(--primary));

    --theme-col: #fff;
    --theme-opp-col: #000;

    --bg-col: #f4f4f4;
    --bg-content-col: #fff;
    --bg-hover-col: #f2f2f2;
    --bg-active-col: #ededed;

    --btn-col: #4c4c4c;
    --btn-col-hover: #5c5c5c;
    --btn-col-active: #636363;

    --btn-primary-col: hsl(var(--hue), var(--sat), calc(var(--lig) - 10%));
    --btn-primary-col-hover: hsl(var(--hue), var(--sat), calc(var(--lig) - 12.5%));
    --btn-primary-col-active: hsl(var(--hue),
            var(--sat),
            calc(var(--lig) - 15%));

    --btn-font-col: #fff;

    --btn-close-col: transparent;
    --btn-close-col-hover: #f77b;
    --btn-close-col-active: #f55b;

    --border-col: #d9d9d9;

    --font-col: #222;
    --font-col-mut: #555;
    --font-opp-color: #eee;
    --font-opp-col-mut: #999;

    --font-status-incomplete: #0056b3;
    --font-status-open: #d8a200;
    --font-status-approved: #43a467;
    --font-status-declined: #d94343;
    --font-status-concluded: #5c5c5c;

    --bg-status-incomplete: #cce0ff;
    --bg-status-open: #f7e9bd;
    --bg-status-approved: #cfeed9;
    --bg-status-declined: #ffd6d6;
    --bg-status-concluded: #e0e0e0;

    --nav-link-col: #555;
    --nav-link-col-hover: #222;
    --nav-link-col-active: #000;

    --table-bg-head: #e5e2f0;
    --table-bg-odd: #fff;
    --table-bg-even: #f2f1f8;

    --notification-success: #5f5;
    --notification-error: #f55;
    --notification-warning: #ff5;
    --notification-info: #55f;

    --gray: #8f8f8f;
}

/*################################
LIGHT MODE HIGH CONTRAST VARIABLES
################################*/
@media (prefers-contrast: more) {
    :root {
        --theme-col: #fff;
        --theme-opp-col: #000;

        --bg-col: #fff;
        --bg-content-col: #fff;
        --bg-hover-col: #ddd;
        --bg-active-col: #bbb;

        --btn-col: #fff;
        --btn-col-hover: #ddd;
        --btn-col-active: #bbb;

        --btn-font-col: #fff;

        --btn-primary-col: #000;
        --btn-primary-col-hover: #222;
        --btn-primary-col-active: #444;

        --btn-close-col: transparent;
        --btn-close-col-hover: #f00;
        --btn-close-col-active: #f44;

        --border-col: #000;

        --font-col: #000;
        --font-col-mut: #222;
        --font-opp-color: #fff;
        --font-opp-col-mut: #ddd;

        --font-status-incomplete: #00f;
        --font-status-open: #bb0;
        --font-status-approved: #0f0;
        --font-status-declined: #f00;
        --font-status-concluded: #555;

        --nav-link-col: #000;
        --nav-link-col-hover: #222;
        --nav-link-col-active: #444;

        --table-bg-head: #fff;
        --table-bg-odd: #fff;
        --table-bg-even: #fff;

        --gray: #8f8f8f;
    }
}

/*#################
DARK MODE VARIABLES
#################*/
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --theme-col: #000;
        --theme-opp-col: #fff;

        --bg-col: #101010;
        --bg-content-col: #161616;
        --bg-hover-col: #222222;
        --bg-active-col: #262626;

        --btn-col: #4c4c4c;
        --btn-col-hover: #5c5c5c;
        --btn-col-active: #636363;

        --btn-primary-col: hsl(var(--hue), var(--sat), calc(var(--lig) - 15%));
        --btn-primary-col-hover: hsl(var(--hue), var(--sat), calc(var(--lig) - 17.5%));
        --btn-primary-col-active: hsl(var(--hue),
                var(--sat),
                calc(var(--lig) - 20%));

        --border-col: #333;

        --font-col: #fff;
        --font-col-mut: #ccc;
        --font-opp-color: #222;
        --font-opp-col-mut: #444;

        --font-status-incomplete: #63a8f1;
        --font-status-open: #f0bf2e;
        --font-status-approved: #82e9a8;
        --font-status-declined: #fc9494;
        --font-status-concluded: #b5b5b5;

        --bg-status-open: #574719;
        --bg-status-incomplete: #28354b;
        --bg-status-approved: #0e5022;
        --bg-status-declined: #723a3a;
        --bg-status-concluded: #3c3c3c;

        --nav-link-col: #bbb;
        --nav-link-col-hover: #ddd;
        --nav-link-col-active: #fff;

        --table-bg-head: #231e2b;
        --table-bg-odd: #161616;
        --table-bg-even: #211f25;

        --gray: #8f8f8f;
    }
}

/*###############################
DARK MODE HIGH CONTRAST VARIABLES
###############################*/
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root {
        --theme-col: #000;
        --theme-opp-col: #fff;

        --bg-col: #000;
        --bg-content-col: #000;
        --bg-hover-col: #222;
        --bg-active-col: #444;

        --btn-col: #000;
        --btn-col-hover: #222;
        --btn-col-active: #444;

        --btn-primary-col: #fff;
        --btn-primary-col-hover: #ddd;
        --btn-primary-col-active: #bbb;

        --btn-font-col: #000;

        --btn-close-col: transparent;
        --btn-close-col-hover: #f00;
        --btn-close-col-active: #f44;

        --border-col: #fff;

        --font-col: #fff;
        --font-col-mut: #ccc;
        --font-opp-color: #222;
        --font-opp-col-mut: #444;

        --font-status-incomplete: #44f;
        --font-status-open: #ff0;
        --font-status-approved: #0f0;
        --font-status-declined: #f00;
        --font-status-concluded: #888;

        --nav-link-col: #fff;
        --nav-link-col-hover: #ddd;
        --nav-link-col-active: #bbb;

        --table-bg-head: #000;
        --table-bg-odd: #000;
        --table-bg-even: #000;

        --gray: #8f8f8f;
    }
}

[v-cloak] {
    display: none;
}

/*####################
GLOBAL PSEUDO ELEMENTS
####################*/
::selection {
    background-color: color-mix(in srgb, var(--primary), transparent);

    @media (prefers-contrast: more) {
        background-color: var(--theme-opp-col);
        color: var(--theme-col);
    }
}

::placeholder {
    color: color-mix(in srgb, var(--font-col) 60%, transparent);
}

.icon {
    @media (prefers-color-scheme: dark) {
        filter: invert();
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "fira";
    font-size: 1rem;
}

body {
    overflow: hidden;
    color: var(--font-col);
    background-color: var(--bg-col);
}

hr {
    border: 1px solid var(--border-col);
    border-bottom: none;
    border-right: none;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.25rem;
}

a {
    color: var(--font-col);
    text-decoration: none;

    &:hover {
        color: var(--primary-font);
        text-decoration: underline;
    }
}

input:not([type="range"], [type="file"]),
details>summary,
select,
textarea {
    color: var(--font-col);
    appearance: none;
    border: 1px solid var(--border-col);
    background-color: transparent;
    border-radius: var(--spacing-2);
    padding: var(--spacing-2);
    width: 100%;

    &:hover {
        background-color: var(--bg-hover-col);
    }

    &:active {
        background-color: var(--bg-active-col);
    }

    &[type="checkbox"],
    &[type="radio"] {
        width: 1rem;
        height: 1rem;
        border-radius: var(--spacing-1);
        cursor: pointer;

        &:checked {
            background-color: var(--btn-primary-col);
            border-color: var(--btn-primary-col);

            &:hover {
                background-color: var(--btn-primary-col-hover);
                border-color: var(--btn-primary-col-hover);
            }

            &:active {
                background-color: var(--btn-primary-col-active);
                border-color: var(--btn-primary-col-active);
            }

            &:disabled {
                background-color: color-mix(in srgb, var(--btn-primary-col), transparent);
                border-color: transparent;
            }
        }

        &:disabled {
            background-color: color-mix(in srgb, var(--gray), transparent 75%);
            border-color: transparent;
        }

        &:checked:not(.switch)::before {
            content: "✓";
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: var(--btn-font-col);
            font-size: 1rem;
            line-height: 1;

        }
    }

    &:disabled {
        background-color: color-mix(in srgb, var(--gray), transparent 75%);
        cursor: not-allowed;
    }

    &[type="radio"] {
        border-radius: 100rem;
    }
}

input[type="checkbox"].switch,
.switch {
    display: inline-block;
    position: relative;
    transition: background-color var(--animation-duration);
    appearance: none;
    height: 1.3rem;
    width: 2.5rem;
    border-radius: 10rem;
    border: none;
    background-color: var(--gray);

    &::before {
        position: absolute;
        content: "";
        top: 0.2rem;
        left: 0.2rem;
        background-color: var(--font-col);
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 1rem;
        transition: left var(--animation-duration), background-color calc(var(--animation-duration)/2);

        @media (prefers-color-scheme: light) {
            background-color: var(--theme-col);
        }
    }

    &:checked::before,
    &.checked::before {
        left: calc(100% - 1.1rem);
    }

    &:checked,
    &.checked {
        background-color: var(--btn-primary-col);
    }
}

details {
    >summary {
        cursor: pointer;
        user-select: none;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-1);

        &::before {
            content: '';
            display: inline-block;
            height: 1rem;
            width: 1rem;
            background-image: url('../images/arrow-down.svg');

            @media (prefers-color-scheme: dark) {
                background-image: url('../images/arrow-down-white.svg');
                ;
            }

            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            transform: rotate(-90deg);
            transition: transform var(--animation-duration-2);
        }
    }

    &::details-content {
        height: 0;
        overflow: hidden;
        padding: 0 var(--spacing-2);
        border: solid var(--border-col);
        border-width: 0;

        /* DEFAULT FLEX LAYOUT: */
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
    }

    &:open {
        >summary {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            &::before {
                transform: rotateY(0deg);
            }
        }

        &::details-content {
            border: 1px solid var(--border-col);
            border-top-width: 0;
            border-radius: 0 0 var(--spacing-2) var(--spacing-2);
            padding: var(--spacing-2);
            height: auto;
        }
    }
}

@supports (interpolate-size: allow-keywords) {
    details {
        >summary {
            transition: border-radius var(--animation-duration) var(--animation-duration-2);
        }

        &::details-content {
            transition: all var(--animation-duration-2), border-width var(--animation-duration-2) step-end;
            transition-behavior: allow-discrete;
        }

        &:open {
            >summary {
                transition: border-radius 0s step-start;
            }

            &::details-content {
                transition: all var(--animation-duration-2), border-width var(--animation-duration-2) step-start;
            }
        }
    }
}



select {
    appearance: none;
    cursor: pointer;
    padding: var(--spacing-2);
    background-image: url('../images/arrow-down.svg');
    background-repeat: no-repeat;
    background-position: right var(--spacing-1) center;
    background-size: 1.75rem;

    &:open {
        background-image: url('../images/arrow-up.svg');

        &::picker-icon {
            rotate: 180deg;
        }
    }

    @media (prefers-color-scheme: dark) {
        background-image: url('../images/arrow-down-white.svg');

        &:open {
            background-image: url('../images/arrow-up-white.svg');
        }
    }
}

@supports (appearance: base-select) {

    select,
    ::picker(select) {
        appearance: base-select !important;
    }

    select {
        background: none;

        &:open {
            background: none;

            &::picker-icon {
                rotate: 0deg;
                transform: scaleY(-1);
            }
        }

        &::picker-icon {
            content: "";
            width: 1rem;
            height: auto;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../images/arrow-down.svg');

            @media (prefers-color-scheme: dark) {
                background-image: url('../images/arrow-down-white.svg');
            }

            transition: transform var(--animation-duration);
        }

        option {
            display: flex;
            padding: var(--spacing-2);

            &:checked {
                font-weight: bold;
            }

            &::checkmark {
                @media not (prefers-contrast: more) {
                    content: '';
                    background-color: var(--primary);
                    width: 1rem;
                    height: 1rem;
                    border-radius: var(--spacing-1);
                }

            }
        }
    }

    ::picker(select) {
        display: none;
        overlay: none;
        opacity: 0;
        transition: opacity var(--animation-duration), top var(--animation-duration), overlay var(--animation-duration), display var(--animation-duration);
        transition-behavior: allow-discrete;
        background-color: var(--bg-content-col);
        min-width: anchor-size(width);
        border: 1px solid var(--border-col);
        border-radius: var(--spacing-2);

        option {
            display: block;
            padding: var(--spacing-2);
        }
    }

    /* no top/left here: the browser places the list under its select, a fixed top moved it to the top of the page */
    :open::picker(select) {
        display: block;
        overlay: auto;
        margin-top: var(--spacing-1);
        opacity: 1;
    }

    @starting-style {
        :open::picker(select) {
            display: block;
            overlay: none;
            opacity: 0;
        }
    }
}

textarea {
    resize: vertical;
    max-height: 5rem;

    @supports (field-sizing: content) {
        resize: none;
        field-sizing: content;
    }
}

button,
.button,
input[type="button"],
input[type="submit"] {
    appearance: none;
    border: 1px solid var(--btn-col);
    border-radius: var(--spacing-2);
    background-color: var(--btn-col);
    color: var(--btn-font-col);
    font-size: 1rem;
    font-weight: bold;
    text-align: center;

    @media (prefers-contrast: more) {
        color: var(--font-col);
    }

    padding: var(--spacing-2);
    width: 100%;
    cursor: pointer;

    &:hover {
        border: 1px solid var(--btn-col-hover);
        background-color: var(--btn-col-hover);
    }

    &:active {
        border: 1px solid var(--btn-col-active);
        background-color: var(--btn-col-active);
    }

    &:disabled {
        cursor: not-allowed;
        background-color: color-mix(in srgb, var(--btn-col), transparent);
        border-color: transparent;
    }

    &.button-primary {
        border: 1px solid var(--btn-primary-col);
        background-color: var(--btn-primary-col);

        &:hover {
            border: 1px solid var(--btn-primary-col-hover);
            background-color: var(--btn-primary-col-hover);
        }

        &:active {
            border: 1px solid var(--btn-primary-col-active);
            background-color: var(--btn-primary-col-active);
        }

        &:disabled {
            cursor: not-allowed;
            background-color: color-mix(in srgb, var(--btn-primary-col), transparent);
            border-color: transparent;
        }

        @media (prefers-contrast: more) {
            color: var(--btn-font-col);
        }
    }

    &.lg {
        padding: var(--spacing-3);
        font-size: 1.2rem;
    }

    @media (prefers-contrast: more) {
        border: 1px solid var(--border-col);
    }
}

button.close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: var(--btn-close-col);
    border: none;
    color: var(--font-col);

    &:hover {
        background-color: var(--btn-close-col-hover);
        border: none;
    }

    &:active {
        background-color: var(--btn-close-col-active);
        border: none;
    }

    @media (prefers-contrast: more) or (forced-colors: active) {
        border: 1px solid var(--border-col) !important;
    }
}

button.logout-button,
button.details-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border: none;
    background-color: transparent;

    &:hover {
        background-color: var(--bg-hover-col);
        border: none;
    }

    &:active {
        background-color: var(--bg-active-col);
        border: none;
    }

    img {
        width: 2rem;
        height: 2rem;
    }

    @media (prefers-contrast: more) or (forced-colors: active) {
        border: 1px solid var(--border-col) !important;
    }
}

.button-primary,
button,
input,
select,
textarea {
    transition: border-color var(--animation-duration), box-shadow var(--animation-duration), background-color var(--animation-duration);

    /* :open for when select drop down is open */
    &:focus-visible,
    &:open {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--primary), transparent);

        @media (prefers-contrast: more) {
            outline: auto;
            border-color: var(--border-col);
            box-shadow: none;
        }
    }
}

fieldset {
    border: none;

    &>legend {
        margin-left: var(--spacing-2);
    }
}

/*============
VUE COMPONENTS
============*/

/*============
NAVBAR STYLING
============*/
header.main-header {
    background-color: var(--bg-content-col);
    height: var(--header-height);
    padding: var(--spacing-2);
    border-bottom: 1px solid var(--border-col);
    transition: height var(--animation-duration);

    nav {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;

        a {
            display: flex;
            color: var(--nav-link-col);
            padding: var(--spacing-3) var(--spacing-2);
            text-decoration: underline;
            text-decoration-color: transparent;
            user-select: none;
            transition: color var(--animation-duration),
                text-shadow var(--animation-duration),
                text-decoration-color var(--animation-duration-2);

            &:hover {
                color: var(--nav-link-col-hover);
            }

            &:active {
                color: var(--nav-link-col-active);
            }

            &.current {
                color: var(--theme-opp-col);
                text-shadow: 0 0.05rem 0.2rem var(--gray);
                text-decoration-color: var(--theme-opp-col);
                cursor: default;
                pointer-events: none;

                @media (prefers-contrast: more) {
                    text-shadow: none;
                    text-decoration: none;
                    border-bottom: 3px solid var(--border-col);
                    font-weight: bold;
                }
            }

            span {
                align-self: center;
            }
        }

        .left {
            justify-self: start;
            height: 100%;

            img {
                padding: 0;
                display: inline-block;
                height: calc(var(--header-height) - var(--spacing-2) * 2);
            }
        }

        .middle {
            align-self: stretch;
            display: flex;
            gap: var(--spacing-2);
        }

        .right {
            justify-self: end;
            align-self: stretch;
            align-items: center;
            display: flex;
            gap: var(--spacing-2);

            a {
                align-self: stretch;
            }
        }
    }
}

/*=========
 LOGIN FORM
=========*/
.loginForm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--border-col);
    border-radius: var(--spacing-2);
    background-color: var(--bg-content-col);
    padding: var(--spacing-4);
    width: 30rem;
    margin: auto;

    @media (max-width: 35rem) or (max-height: 35rem) {
        position: static;
        width: 100vw;
        height: calc(100vh - var(--header-height));
        transform: translate(0%, 0%);
        top: 0;
        left: 0;
        border: none;
        border-radius: 0;
        padding: var(--spacing-3);
        overflow: auto;
    }

    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-3);

        input:not([type="submit"]) {
            border-width: 0 0 2px 0;
            border-radius: 0;
            max-width: 30rem;

            &:focus-visible,
            &:hover,
            &:active {
                box-shadow: none;
                background-color: transparent;
            }
        }

        input[type="submit"] {
            margin: auto;
            margin-top: var(--spacing-3);
            width: fit-content;
        }
    }

    h1 {
        font-size: 2.5rem;
        text-align: center;
        margin: var(--spacing-2) 0;
    }
}

/*====================================
PAGINATION, below the tables
====================================*/
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border-col);
    color: var(--font-col-mut);

    .pagination-size {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        input {
            width: 5rem;
        }
    }
}

/*====================================
TABLEVIEW, eg. REQUEST, CLIENT, REPORT
====================================*/

/* red error boxes in the bottom right corner, see showError() in js/api.js */
#error-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(24rem, calc(100vw - 2rem));
}

.error-box {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #c62828;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    overflow-wrap: anywhere;
}

/* shown in the middle of the table area when every column is switched off */
.main-content .no-columns {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2);
    text-align: center;
}

.tableview {
    display: grid;
    height: calc(100dvh - var(--header-height) - var(--spacing-2) * 2);
    margin: var(--spacing-2);
    border: 1px solid var(--border-col);
    border-radius: var(--spacing-2);
    background-color: var(--bg-content-col);
    overflow: hidden;
    grid-template-columns: 1fr;

    @media (max-width: 35rem) {
        margin: 0;
        border: none;
        border-radius: 0;
        height: calc(100dvh - var(--header-height));
    }

    &:has(.sidebar-left) {
        grid-template-columns: 12rem 1fr;

        .main-content {
            border-left: 1px solid var(--border-col);
        }

        @media (max-width: 35rem) {
            grid-template-columns: 1fr;
            grid-template-rows: min-content 1fr;

            header {
                display: none;
            }

            .main-content {
                border-left: none;
                border-top: 1px solid var(--border-col);
            }
        }
    }

    .main-content {
        position: relative;
        overflow: auto;

        table {
            /* since chrome is bad, instead of collapse seperate + spacing 0 */
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
            text-wrap: wrap;

            td,
            th {
                padding: var(--spacing-1) var(--spacing-2);
                height: 3rem;
                text-align: start;

                &:last-child {
                    text-align: center;
                    text-wrap: nowrap;

                    .details-button {
                        display: inline;
                    }
                }
            }

            th {
                text-wrap: nowrap;
                z-index: 1;
                transition: width var(--animation-duration);
                font-weight: bold;
            }

            @media (prefers-contrast: more) or (forced-colors: active) {

                th,
                td {
                    border-bottom: 1px solid var(--border-col);
                }

                th {
                    border-bottom-width: 3px;
                }

                th:not(:last-child),
                td:not(:last-child) {
                    border-right: 1px solid var(--border-col);
                }
            }

            thead {
                tr th {
                    background-color: var(--table-bg-head);
                    position: sticky;
                    top: 0;
                }
            }

            tbody {
                tr {
                    background-color: var(--table-bg-odd);
                }

                tr:nth-child(2n + 2) {
                    background-color: var(--table-bg-even);

                    button.details-button {
                        &:hover {
                            background-color: color-mix(in srgb, var(--bg-hover-col) 92.5%, var(--theme-opp-col));
                        }

                        &:active {
                            background-color: color-mix(in srgb, var(--bg-active-col) 92.5%, var(--theme-opp-col));
                        }
                    }
                }
            }
        }
    }

    /* could use improvements in code quality, but fine for now */
    .sidebar-left {
        overflow: auto;

        details.gaps>div>*,
        &>* {
            display: block;
            width: calc(100% - (var(--spacing-2) * 2));
            margin: var(--spacing-2);
        }

        h2 {
            text-align: center;
        }

        &>details {
            margin: var(--spacing-2) 0;
            width: 100%;
        }

        details>summary,
        ::details-content {
            border-left: none;
            border-right: none;
            border-radius: 0;
        }

        ::details-content {
            padding: 0;
        }
    }

    .client-filter {
        display: grid;
        grid-template-columns: 1fr min-content;
        justify-items: start;
        align-items: center;
        gap: var(--spacing-2);
    }
}

/* could use improvements in code quality, but fine for now */
details.search-filters {
    &>div {
        .label-switch {
            cursor: pointer;
            user-select: none;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            padding: var(--spacing-2);
            margin: 0;

            &:hover {
                background-color: var(--bg-hover-col);
            }

            &:active {
                background-color: var(--bg-active-col);
            }
        }

        &>* {
            padding: var(--spacing-2);
        }

        details {
            padding: 0;
        }

        details summary input,
        details summary .switch {
            float: right;
        }

        details .split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-2);
            padding: var(--spacing-2);
        }

        .flex-col {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2);
            padding: var(--spacing-2);
        }

        /* needed to ensure no borders sticking together creating a 2px border */
        details+details summary {
            border-top: 0;
        }

        details:last-child:not(:open) {
            summary {
                border-bottom: 0;
            }
        }

        details:last-child:open {
            &::details-content {
                border-bottom: 0;
            }
        }

        .filter-status {
            border-radius: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
            text-wrap: nowrap;
        }
    }
}

.profile {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60rem;
    max-height: calc(100vh - var(--header-height) - var(--spacing-3));
    overflow: auto;

    @media (max-width: 35rem) or (max-height: 35rem) {
        position: static;
        width: 100vw;
        height: calc(100vh - var(--header-height));
        max-height: none;
        transform: translate(0%, 0%);
        top: 0;
        left: 0;
        border: none;
        border-radius: 0;
        padding: var(--spacing-3);
        overflow: auto;
    }
}

.form-message {
    margin: 0;
}

.form-error {
    color: color-mix(in srgb, var(--notification-error), var(--theme-opp-col) 55%);
}

.form-success {
    color: color-mix(in srgb, var(--notification-success), var(--theme-opp-col) 45%);
}

/*===
FILES
===*/

.files {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-2);
    gap: var(--spacing-2) !important;
    border: 1px solid var(--border-col);
    border-radius: var(--spacing-2);

    .file-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);

        .file {
            display: grid;
            grid-template-columns: 1fr min-content;
            border: 1px solid var(--border-col);
            border-radius: var(--spacing-2);
            overflow: hidden;

            button.open {
                display: block;
                background: none;
                border: none;
                text-align: left;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                font-weight: normal;
            }

            button.remove {
                background: none;
                border: none;
                font-weight: normal;
                display: flex;
                align-content: center;
                justify-content: center;
            }

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

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

            button {
                border-radius: 0;
                color: var(--font-col);
            }
        }
    }
}

/*===========================
BLACK BACKGROUND FOR OVERLAYS
===========================*/
.sidebar-container,
.modal-container {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: light-dark(#0004, #0008);
}

/*===========
MODAL STYLING
===========*/
.modal-container .modal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    position: fixed;
    top: calc(50% + (var(--header-height)/2));
    left: 50%;
    width: 75%;
    min-width: 35rem;
    max-width: 55rem;
    /*max-height: calc(100vh - var(--header-height) - var(--spacing-4));*/
    overflow: visible;
    transform: translate(-50%, -50%);
    background-color: var(--bg-content-col);
    border: 1px solid var(--border-col);
    border-radius: var(--spacing-2);
    padding: var(--spacing-4);

    @media (max-width: 35rem) {
        padding: var(--spacing-3);
        min-width: auto;
        width: 100vw;
        border: none;
        border-radius: 0;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
    }

    .modal-header {
        display: flex;
        align-items: center;
        flex-direction: row;

        h2 {
            flex-grow: 1;
        }

        .close-button {
            flex-grow: 0;
        }
    }

    >hr {
        margin: var(--spacing-2) 0;
    }
}

/*=============
DETAILS SIDEBAR
=============*/

.sidebar-container .sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    min-width: 50rem;
    background-color: var(--bg-content-col);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    border-left: 1px solid var(--border-col);
    overflow: auto;

    @media (max-width: 50rem) {
        min-width: auto;
        width: 100vw;
        border-left: none;
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        flex-direction: row;

        h2 {
            flex-grow: 1;
            display: flex;
            align-items: center;
            gap: var(--spacing-2);

            button {
                align-self: left;
                width: fit-content;
            }
        }

        .close-button {
            flex-grow: 0;
        }
    }
}

.search-container {
    position: relative;

    .results {
        position: absolute;
        min-width: 100%;
        top: calc(100%);
        transform: translateY(var(--spacing-2));
        max-height: 15rem;
        background-color: var(--bg-content-col);
        border: 1px solid var(--border-col);
        border-radius: var(--spacing-2);
        overflow: auto;
        z-index: 10;

        li {
            cursor: pointer;
            padding: var(--spacing-2);
            user-select: none;

            &:hover {
                background-color: var(--bg-hover-col);
            }

            &:active {
                background-color: var(--bg-active-col);
            }
        }
    }

    .no-results {
        pointer-events: none;

    }
}

/*==========
SELECTCLIENT
==========*/
.selectClient .content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-2);

    .search-container input {
        height: 100%;
    }
}

/*==============================
NEW REQUEST AND NEW CLIENT MODAL
==============================*/
.newRequest,
.newClient {
    form {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--spacing-2);
        align-items: center;

        input[type="submit"],
        button {
            grid-column-start: 1;
            grid-column-end: 3;
        }
    }
}

/*===========
NOTIFICATIONS
===========*/
#notification-container {
    position: fixed;
    top: calc(var(--header-height) + var(--spacing-2));
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.notification {
    position: relative;
    min-width: 15rem;
    background-color: var(--bg-content-col);
    padding: var(--spacing-2);
    border: 0 solid var(--border-col);
    border-left-width: 4px;
}

.notification.success {
    border-color: var(--notification-success);
    background-color: color-mix(in srgb, var(--notification-success), var(--theme-col) 95%);

    h3 {
        color: color-mix(in srgb, var(--notification-success), var(--theme-opp-col) 60%);
    }
}

.notification.error {
    border-color: var(--notification-error);
}

.notification.warning {
    border-color: var(--notification-warning);
}

.notification.info {
    border-color: var(--notification-info);
}

/*====
STATUS
====*/

.status {
    display: inline-block;
    padding: var(--spacing-1);
    border-radius: 10rem;
    text-wrap: nowrap;
    text-align: center;
    width: 100%;
}

.status.approved {
    background-color: var(--bg-status-approved);
    color: var(--font-status-approved);
}

.status.declined {
    background-color: var(--bg-status-declined);
    color: var(--font-status-declined);
}

.status.incomplete {
    background-color: var(--bg-status-incomplete);
    color: var(--font-status-incomplete);
}

.status.open {
    background-color: var(--bg-status-open);
    color: var(--font-status-open);
}

.status.concluded {
    background-color: var(--bg-status-concluded);
    color: var(--font-status-concluded);
}

@media (prefers-contrast: more) or (forced-colors: active) {
    .status {
        border-left: 3px solid;
        background: transparent !important;
        border-radius: 0;
        font-weight: bold;
        text-align: left;
        color: var(--font-col) !important;

        &.approved {
            border-color: var(--font-status-approved);

            &::selection {
                background-color: var(--font-status-approved);
            }
        }

        &.declined {
            border-color: var(--font-status-declined);

            &::selection {
                background-color: var(--font-status-declined);
            }
        }

        &.incomplete {
            border-color: var(--font-status-incomplete);

            &::selection {
                background-color: var(--font-status-incomplete);
            }
        }

        &.concluded {
            border-color: var(--font-status-concluded);

            &::selection {
                background-color: var(--font-status-concluded);
            }
        }

        &.open {
            border-color: var(--font-status-open);

            &::selection {
                background-color: var(--font-status-open);
            }
        }
    }
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 1000;
    padding: var(--spacing-2);
    margin: var(--spacing-1);
    background-color: var(--primary);
    color: var(--font-opp-color);
    border: none;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* ANIMATIONS */
.sidebar-enter-active,
.sidebar-leave-active {
    transition: background-color var(--animation-duration-2);
    background-color: light-dark(#0004, #0008);

    .sidebar {
        transition: transform var(--animation-duration-2);
    }
}

.sidebar-enter-from,
.sidebar-leave-to {
    background-color: transparent;

    .sidebar {
        transform: translateX(100%);
    }
}

.sidebar-enter-to,
.sidebar-leave-from {
    .sidebar {
        transform: translateX(0);
    }
}

@media (min-width: 35rem) {

    .modal-enter-active,
    .modal-leave-active {
        transition: opacity var(--animation-duration-2);
        background-color: light-dark(#0004, #0008);
    }

    .modal-enter-from,
    .modal-leave-to {
        opacity: 0;
    }

    .modal-enter-active,
    .modal-leave-active {
        .modal {
            transition: opacity var(--animation-duration-2), transform var(--animation-duration-2);
        }
    }

    .modal-enter-from,
    .modal-leave-to {
        .modal {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.95);
        }
    }

    .modal-enter-to,
    .modal-leave-from {
        .modal {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }
}

@media (max-width: 35rem) {

    .modal-enter-active,
    .modal-leave-active {
        transition: opacity var(--animation-duration-2);
        background-color: light-dark(#0004, #0008);
    }

    .modal-enter-from,
    .modal-leave-to {
        opacity: 0;
    }

    .modal-enter-active,
    .modal-leave-active {
        .modal {
            transition: opacity var(--animation-duration-2), top var(--animation-duration-2);
            position: absolute;
        }
    }

    .modal-enter-from,
    .modal-leave-to {
        .modal {
            opacity: 0;
            top: 5rem;
        }
    }

    .modal-enter-to,
    .modal-leave-from {
        .modal {
            opacity: 1;
            top: 0rem;
        }
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity var(--animation-duration);
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/*
.search-container needed for specificity, thank you very much CSS!!
*/
.search-container .results-enter-from,
.search-container .results-leave-to {
    opacity: 0;
    transform: translateY(0);
}

.search-container .results-enter-to,
.search-container .results-leave-from {
    opacity: 1;
    transform: translateY(var(--spacing-2));
}

.search-container .results-enter-active,
.search-container .results-leave-active {
    transition: opacity var(--animation-duration), transform var(--animation-duration);
}

.spinner {
    width: 2rem;
    height: 2rem;
    border: 4px solid color-mix(in srgb, var(--theme-opp-col) 10%, transparent);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    align-self: center;
    justify-self: center;
}

.text-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: gap var(--animation-duration);

    img {
        height: 1.5rem;
        filter: invert();
    }

    .hide-until-hover {
        width: 0;
        overflow: hidden;
        transition: width var(--animation-duration);
        white-space: nowrap;
    }

    &:has(.hide-until-hover) {
        gap: 0;

        &:hover {
            gap: var(--spacing-2);

            .hide-until-hover {
                width: fit-content;
            }
        }
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.no-wrap {
    text-wrap: nowrap !important;
}

.align-end {
    text-align: end !important;
}

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

/* sortable table headers, the arrow has a fixed width so the header does not jump when it appears */
th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover {
    text-decoration: underline;
}

.sort-indicator {
    display: inline-block;
    min-width: 1em;
    font-size: 0.8em;
}

/*#####################################
TAILWIND/BOOTSTRAP-LIKE UTILITY CLASSES
#####################################*/

.m-0 {
    margin: 0;
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.mt-0 {
    margin-top: 0;
}

.mr-0 {
    margin-right: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.ml-0 {
    margin-left: 0;
}

.m-1 {
    margin: var(--spacing-1);
}

.mx-1 {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
}

.my-1 {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
}

.mt-1 {
    margin-top: var(--spacing-1);
}

.mr-1 {
    margin-right: var(--spacing-1);
}

.mb-1 {
    margin-bottom: var(--spacing-1);
}

.ml-1 {
    margin-left: var(--spacing-1);
}

.m-2 {
    margin: var(--spacing-2);
}

.mx-2 {
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
}

.my-2 {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.mt-2 {
    margin-top: var(--spacing-2);
}

.mr-2 {
    margin-right: var(--spacing-2);
}

.mb-2 {
    margin-bottom: var(--spacing-2);
}

.ml-2 {
    margin-left: var(--spacing-2);
}

.m-3 {
    margin: var(--spacing-3);
}

.mx-3 {
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
}

.my-3 {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.mt-3 {
    margin-top: var(--spacing-3);
}

.mr-3 {
    margin-right: var(--spacing-3);
}

.mb-3 {
    margin-bottom: var(--spacing-3);
}

.ml-3 {
    margin-left: var(--spacing-3);
}

.m-4 {
    margin: var(--spacing-4);
}

.mx-4 {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
}

.my-4 {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.mt-4 {
    margin-top: var(--spacing-4);
}

.mr-4 {
    margin-right: var(--spacing-4);
}

.mb-4 {
    margin-bottom: var(--spacing-4);
}

.ml-4 {
    margin-left: var(--spacing-4);
}

.m-5 {
    margin: var(--spacing-5);
}

.mx-5 {
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
}

.my-5 {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
}

.mt-5 {
    margin-top: var(--spacing-5);
}

.mr-5 {
    margin-right: var(--spacing-5);
}

.mb-5 {
    margin-bottom: var(--spacing-5);
}

.ml-5 {
    margin-left: var(--spacing-5);
}

.p-0 {
    padding: 0;
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.pt-0 {
    padding-top: 0;
}

.pr-0 {
    padding-right: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pl-0 {
    padding-left: 0;
}

.p-1 {
    padding: var(--spacing-1);
}

.px-1 {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
}

.py-1 {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
}

.pt-1 {
    padding-top: var(--spacing-1);
}

.pr-1 {
    padding-right: var(--spacing-1);
}

.pb-1 {
    padding-bottom: var(--spacing-1);
}

.pl-1 {
    padding-left: var(--spacing-1);
}

.p-2 {
    padding: var(--spacing-2);
}

.px-2 {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
}

.py-2 {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}

.pt-2 {
    padding-top: var(--spacing-2);
}

.pr-2 {
    padding-right: var(--spacing-2);
}

.pb-2 {
    padding-bottom: var(--spacing-2);
}

.pl-2 {
    padding-left: var(--spacing-2);
}

.p-3 {
    padding: var(--spacing-3);
}

.px-3 {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
}

.py-3 {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}

.pt-3 {
    padding-top: var(--spacing-3);
}

.pr-3 {
    padding-right: var(--spacing-3);
}

.pb-3 {
    padding-bottom: var(--spacing-3);
}

.pl-3 {
    padding-left: var(--spacing-3);
}

.p-4 {
    padding: var(--spacing-4);
}

.px-4 {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.py-4 {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}

.pt-4 {
    padding-top: var(--spacing-4);
}

.pr-4 {
    padding-right: var(--spacing-4);
}

.pb-4 {
    padding-bottom: var(--spacing-4);
}

.pl-4 {
    padding-left: var(--spacing-4);
}

.p-5 {
    padding: var(--spacing-5);
}

.px-5 {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
}

.py-5 {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
}

.pt-5 {
    padding-top: var(--spacing-5);
}

.pr-5 {
    padding-right: var(--spacing-5);
}

.pb-5 {
    padding-bottom: var(--spacing-5);
}

.pl-5 {
    padding-left: var(--spacing-5);
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.align-items-center {
    align-items: center;
}

.grid-col-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.colspan-2 {
    grid-column-end: span 2;
}

.overflow-hidden {
    overflow: hidden;
}

.gap-1 {
    gap: var(--spacing-1);
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-3 {
    gap: var(--spacing-3);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-5 {
    gap: var(--spacing-5);
}

.text-4xl {
    font-size: 2.5rem;
}

.text-3xl {
    font-size: 2rem;
}

.text-2xl {
    font-size: 1.75rem;
}

.text-xl {
    font-size: 1.5rem;
}

.text-l {
    font-size: 1.25rem;
}

.text-m {
    font-size: 1.00rem;
}

.text-s {
    font-size: 0.75rem;
}

.font-normal {
    font-weight: normal;
}

.font-bold {
    font-weight: bold;
}

.select-none {
    user-select: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* OTHER UTILITY CLASSES */

.border {
    border: 1px solid var(--border-col);
    border-radius: var(--spacing-2);
}

.rounded {
    border-radius: var(--spacing-2);
}

.border-none {
    border: none;
    border-radius: none;
}

.content-bg {
    background-color: var(--bg-content-col);
}

.content-bg-hover-active-states {
    background-color: var(--bg-content-col);
    transition: background-color var(--animation-duration);

    &:hover {
        background-color: var(--bg-hover-col);
    }

    &:active {
        background-color: var(--bg-active-col);
    }
}

.std-flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.listView {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-col);
    border-radius: var(--spacing-2);
    overflow: auto;
    max-height: 30rem;

    & button.listItem {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        color: var(--font-col);
        font-weight: normal;
        text-align: left;
        padding: var(--spacing-2);
        border: none;
        border-radius: 0;
        background-color: var(--bg-content-col);
        transition: background-color var(--animation-duration);
        user-select: none;

        &::before {
            transition: transform var(--animation-duration);
            transform: scale(0);
            width: 1rem;
            height: 1rem;
            border-radius: var(--spacing-1);
            content: '';
            background-color: var(--primary);
            display: inline-block;
        }

        &:hover {
            background-color: var(--bg-hover-col);
        }

        &:active {
            background-color: var(--bg-active-col);
        }

        &.selected {
            background-color: var(--bg-hover-col);
            pointer-events: none;

            &::before {
                transform: scale(1);
            }
        }
    }
}

/* GRID COLUMN TEMPLATES */
.grid-col-t-2-1 {
    grid-template-columns: 2fr 1fr;
}

.grid-col-t-1-2 {
    grid-template-columns: 1fr 2fr;
}

.grid-col-t-min-1fr-min {
    grid-template-columns: min-content 1fr min-content;
}