/* 
db    db  .d8b.  d8888b. d888888b  .d8b.  d8888b. db      d88888b .d8888. 
88    88 d8' `8b 88  `8D   `88'   d8' `8b 88  `8D 88      88'     88'  YP 
Y8    8P 88ooo88 88oobY'    88    88ooo88 88oooY' 88      88ooooo `8bo.   
`8b  d8' 88~~~88 88`8b      88    88~~~88 88~~~b. 88      88~~~~~   `Y8b. 
 `8bd8'  88   88 88 `88.   .88.   88   88 88   8D 88booo. 88.     db   8D 
   YP    YP   YP 88   YD Y888888P YP   YP Y8888P' Y88888P Y88888P `8888Y' 
                                                                          
                                                                          
*/
:root {
    --unauthorised-header-height: 80px;
    --authorised-header-height: 40px;
    --footer-height: 40px;
    --unauthorised-main-height: calc(100vh - (var(--unauthorised-header-height) + var(--footer-height)));
    --authorised-main-height: calc(100vh - (var(--authorised-header-height) + var(--footer-height)));

    --table-border: 1px var(--base-06-bd) solid;

    color-scheme: light dark;

    --base-01-bg: light-dark(#fbfcfd, #151718);
    --base-02-bg: light-dark(#f8f9fa, #1a1d1e);
    --base-03-el: light-dark(#f1f3f5, #202425);
    --base-04-el-hover: light-dark(#eceef0, #26292b);
    --base-05-el-selected: light-dark(#e6e8eb, #2b2f31);
    --base-06-bd: light-dark(#dfe3e6, #313538);
    --base-07-bd: light-dark(#d7dbdf, #3a3f42);
    --base-08-bd-hover: light-dark(#c1c8cd, #4c5155);
    --base-09-bg-solid: light-dark(#889096, #697177);
    --base-10-bg-solid-hover: light-dark(#7e868c, #787f85);
    --base-11-tx: light-dark(#687076, #9ba1a6);
    --base-12-tx: light-dark(#11181c, #ecedee);

    --acnt-01-bg: light-dark(#fbfdff, #0f1720);
    --acnt-02-bg: light-dark(#f5faff, #0f1b2d);
    --acnt-03-el: light-dark(#edf6ff, #10243e);
    --acnt-04-el-hover: light-dark(#e1f0ff, #102a4c);
    --acnt-05-el-selected: light-dark(#cee7fe, #0f3058);
    --acnt-06-bd: light-dark(#b7d9f8, #0d3868);
    --acnt-07-bd: light-dark(#96c7f2, #0a4481);
    --acnt-08-bd-hover: light-dark(#5eb0ef, #0954a5);
    --acnt-09-bg-solid: light-dark(#0091ff, #0091ff);
    --acnt-10-bg-solid-hover: light-dark(#0081f1, #369eff);
    --acnt-11-tx: light-dark(#006adc, #52a9ff);
    --acnt-12-tx: light-dark(#00254d, #eaf6ff);

    --fail-01-bg: light-dark(#fffcfc, #1f1315);
    --fail-02-bg: light-dark(#fff8f8, #291415);
    --fail-03-el: light-dark(#ffefef, #3c181a);
    --fail-04-el-hover: light-dark(#ffe5e5, #481a1d);
    --fail-05-el-selected: light-dark(#fdd8d8, #541b1f);
    --fail-06-bd: light-dark(#f9c6c6, #671e22);
    --fail-07-bd: light-dark(#f3aeaf, #822025);
    --fail-08-bd-hover: light-dark(#eb9091, #aa2429);
    --fail-09-bg-solid: light-dark(#e5484d, #e5484d);
    --fail-10-bg-solid-hover: light-dark(#dc3d43, #f2555a);
    --fail-11-tx: light-dark(#cd2b31, #ff6369);
    --fail-12-tx: light-dark(#381316, #feecee);


    --pass-01-bg: light-dark(#fbfefc, #0d1912);
    --pass-02-bg: light-dark(#f2fcf5, #0c1f17);
    --pass-03-el: light-dark(#e9f9ee, #0f291e);
    --pass-04-el-hover: light-dark(#ddf3e4, #113123);
    --pass-05-el-selected: light-dark(#ccebd7, #133929);
    --pass-06-bd: light-dark(#b4dfc4, #164430);
    --pass-07-bd: light-dark(#92ceac, #1b543a);
    --pass-08-bd-hover: light-dark(#5bb98c, #236e4a);
    --pass-09-bg-solid: light-dark(#30a46c, #30a46c);
    --pass-10-bg-solid-hover: light-dark(#299764, #3cb179);
    --pass-11-tx: light-dark(#18794e, #4cc38a);
    --pass-12-tx: light-dark(#153226, #e5fbeb);


    --warn-01-bg: light-dark(#fefcfb, #1f1206);
    --warn-02-bg: light-dark(#fef8f4, #2b1400);
    --warn-03-el: light-dark(#fff1e7, #391a03);
    --warn-04-el-hover: light-dark(#ffe8d7, #441f04);
    --warn-05-el-selected: light-dark(#ffdcc3, #4f2305);
    --warn-06-bd: light-dark(#ffcca7, #5f2a06);
    --warn-07-bd: light-dark(#ffb381, #763205);
    --warn-08-bd-hover: light-dark(#fa934e, #943e00);
    --warn-09-bg-solid: light-dark(#f76808, #f76808);
    --warn-10-bg-solid-hover: light-dark(#ed5f00, #ff802b);
    --warn-11-tx: light-dark(#bd4b00, #ff8b3e);
    --warn-12-tx: light-dark(#451e11, #feeadd);
}

/* 
d88888b  .d88b.  d8b   db d888888b .d8888. 
88'     .8P  Y8. 888o  88 `~~88~~' 88'  YP 
88ooo   88    88 88V8o 88    88    `8bo.   
88~~~   88    88 88 V8o88    88      `Y8b. 
88      `8b  d8' 88  V888    88    db   8D 
YP       `Y88P'  VP   V8P    YP    `8888Y' 


*/
@font-face {
    font-family: "Fira Mono";
    src: url("../fonts/FiraMono-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Fira Sans";
    src: url("../fonts/FiraSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Datatype";
    src: url("../fonts/Datatype.woff2") format("woff2");
    /* Variable weight axis */
    font-weight: 100 900;
    /* Variable width axis */
    font-stretch: 0% 100%;
    font-display: swap;
}

/* 
db   dD d88888b db    db d88888b d8888b.  .d8b.  .88b  d88. d88888b .d8888. 
88 ,8P' 88'     `8b  d8' 88'     88  `8D d8' `8b 88'YbdP`88 88'     88'  YP 
88,8P   88ooooo  `8bd8'  88ooo   88oobY' 88ooo88 88  88  88 88ooooo `8bo.   
88`8b   88~~~~~    88    88~~~   88`8b   88~~~88 88  88  88 88~~~~~   `Y8b. 
88 `88. 88.        88    88      88 `88. 88   88 88  88  88 88.     db   8D 
YP   YD Y88888P    YP    YP      88   YD YP   YP YP  YP  YP Y88888P `8888Y' 
                                                                            
                                                                            
*/
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 
d888888b d8888b. .d8888. 
  `88'   88  `8D 88'  YP 
   88    88   88 `8bo.   
   88    88   88   `Y8b. 
  .88.   88  .8D db   8D 
Y888888P Y8888D' `8888Y' 
                         
                         
*/
#client-show-purchase-orders {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
    font-weight: normal;

    & input[type=checkbox] {
        appearance: none;
        width: 32px;
        height: 32px;
        background-size: contain;
        background-image: url("../icons/toggle-left.svg");
        border: solid 2px var(--acnt-07-bd);
        border-radius: 5px;
        background-color: var(--acnt-03-el);

        &:checked {
            background-image: url("../icons/toggle-right.svg");
        }
    }
}



#client-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#wizard-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    height: 70dvh;
    width: 500px;
}

#wizard-step {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#wizard-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;

    & button {
        flex-grow: 1;

        &[disabled].back {
            visibility: hidden;
        }

        &.save {
            border-color: var(--pass-07-bd);
            background-color: var(--pass-03-el);

            &:hover {
                border-color: var(--pass-08-bd-hover);
                background-color: var(--pass-04-el-hover);
            }
        }
    }
}

#forecast-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    &>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;

        &>dt {
            color: var(--base-11-tx);
            font-size: small;
        }

        &>dd {
            padding: 10px;
            border-radius: 5px;
            font-size: large;
            color: var(--base-12-tx);
            margin: 0px;
            border-width: 1px;
            border-style: solid;
            background-color: var(--base-01-bg);
            border-color: var(--base-06-bd);

            &.variance-positive {
                color: var(--pass-11-tx);
                background-color: var(--pass-01-bg);
                border-color: var(--pass-06-bd);
            }

            &.variance-negative {
                color: var(--fail-11-tx);
                background-color: var(--fail-01-bg);
                border-color: var(--fail-06-bd);
            }
        }
    }
}

#forecast-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    &>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;

        &>dt {
            color: var(--base-11-tx);
            font-size: small;
        }

        &>dd {
            padding: 10px;
            border-radius: 5px;
            font-size: large;
            color: var(--base-12-tx);
            margin: 0px;
            border-width: 1px;
            border-style: solid;
            background-color: var(--base-01-bg);
            border-color: var(--base-06-bd);

            &.variance-positive {
                color: var(--pass-11-tx);
                background-color: var(--pass-01-bg);
                border-color: var(--pass-06-bd);
            }

            &.variance-negative {
                color: var(--fail-11-tx);
                background-color: var(--fail-01-bg);
                border-color: var(--fail-06-bd);
            }
        }
    }
}

/* 
 .o88b. db       .d8b.  .d8888. .d8888. d88888b .d8888. 
d8P  Y8 88      d8' `8b 88'  YP 88'  YP 88'     88'  YP 
8P      88      88ooo88 `8bo.   `8bo.   88ooooo `8bo.   
8b      88      88~~~88   `Y8b.   `Y8b. 88~~~~~   `Y8b. 
Y8b  d8 88booo. 88   88 db   8D db   8D 88.     db   8D 
 `Y88P' Y88888P YP   YP `8888Y' `8888Y' Y88888P `8888Y' 
                                                        
                                                        
*/
.analyzer-type-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    color: var(--base-11-tx);

    &>span {
        padding: 3px 6px;
        border-radius: 5px;


        &.analyzer-type-hint-value {

            background-color: var(--acnt-10-bg-solid-hover);
            color: var(--acnt-01-bg);
        }

        &.analyzer-type-hint-op {

            background-color: var(--base-10-bg-solid-hover);
            color: var(--base-01-bg);
        }
    }
}

.analyzer-tooltip {
    background-color: var(--acnt-02-bg);
    color: var(--acnt-12-tx);
    border: 1px var(--acnt-07-bd) solid;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    filter: drop-shadow(0px 2px 2px);
}

.analyzer-chart-bar {
    fill: var(--acnt-10-bg-solid-hover);
}

.analyzer-chart-legend-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 80px;
}

.analyzer-chart-legend-item {
    color: var(--base-11-tx);
    font-size: 12px;
    align-self: flex-start;
}

.analyzer-query-input {
    position: relative;
    font-family: monospace;
    border: solid var(--base-07-bd) 1px;
    border-radius: 3px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;

    ::placeholder {
        color: var(--base-09-bg-solid);
        font-style: italic;
    }

    &>pre,
    textarea {
        grid-area: 1 / 1 / 2 / 2;
        margin: 0px;
        padding: 5px;
        font-size: 20px;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-y: hidden;
        border: none;
        border-radius: 3px;
    }

    &>pre {
        z-index: 1;
        background-color: var(--base-01-bg);
    }

    &>textarea {
        z-index: 2;
        color: rgba(0, 0, 0, 0);
        background-color: rgba(0, 0, 0, 0);
        caret-color: var(--acnt-12-tx);
        resize: none;
        min-height: fit-content;
    }
}

.board-controls {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.board-tabs {
    gap: 2px;
    border: solid 2px var(--acnt-07-bd);
    background-color: var(--acnt-07-bd);
    border-radius: 5px;
}

.board-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--acnt-12-tx);
    background-color: var(--acnt-03-el);
    padding: 5px;
    gap: 5px;
    width: 130px;

    &:hover {
        background-color: var(--acnt-04-el-hover);
        outline-color: var(--acnt-08-bd-hover);
        outline-width: 2px;
        outline-style: solid;
        color: var(--acnt-12-tx);
    }

    &.selected {
        background-color: var(--acnt-05-el-selected);
    }

    &.selected:hover {
        outline-color: var(--acnt-08-bd-hover);
    }

    &:first-of-type {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    &:last-of-type {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    & :nth-child(1)::before {
        content: "● ";
        color: var(--base-08-bd-hover);
    }

    &:nth-child(2) :nth-child(1)::before {
        color: var(--fail-08-bd-hover);
    }

    &:nth-child(3) :nth-child(1)::before {
        color: var(--warn-08-bd-hover);
    }

    &:nth-child(4) :nth-child(1)::before {
        color: var(--pass-08-bd-hover);
    }
}

.datatype-chart {
    font-family: 'Datatype', sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    font-variant-ligatures: common-ligatures contextual;
    letter-spacing: 0;
}

.elm-charts__label {
    fill: var(--base-11-tx);
}

.elm-charts__grid {
    & .elm-charts__line {
        stroke: var(--base-06-bd);
    }
}

.elm-charts__x-axis {
    & * {
        stroke: var(--base-09-bg-solid);
        fill: var(--base-09-bg-solid);
    }
}

.elm-charts__y-axis {
    & * {
        stroke: var(--base-09-bg-solid);
        fill: var(--base-09-bg-solid);
    }
}



.money-negative {
    color: var(--fail-11-tx);
    background-color: var(--fail-03-el);
}

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

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

.loaderContainer {
    height: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 100px;
    height: 100px;
    border: 5px solid var(--base-02-bg);
    border-bottom-color: var(--acnt-09-bg-solid);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.yafl-select {
    flex: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.yafl-filter {
    flex: none;
    display: flex;
    align-items: center;

    &:has(>input:focus) {
        outline: auto;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }

    & input[type=search] {
        width: 100%;
        padding-left: 10px;
        height: 30px;
        border: solid 1px var(--acnt-06-bd);
        border-right: 0px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        outline: none;

        &::placeholder {
            font-style: italic;
            font-size: small;
        }

        &:hover {
            border: solid 1px var(--acnt-08-bd-hover);
        }
    }

    & button {
        padding: 0px;
        height: 30px;
        width: 40px;
        border: solid 1px var(--acnt-06-bd);
        border-radius: 0px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        color: rgba(0, 0, 0, 0);
        background-image: url("../icons/x.svg");
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.yafl-select-list {
    width: 100%;
    flex: 1 1 100px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 5px;

    .yafl-select-item {
        width: fill;
        background-color: var(--acnt-03-el);
        padding: 5px;
        border-radius: 5px;
        border: solid 1px var(--acnt-06-bd);
        font-weight: initial;
        margin: 0px;
        display: flex;

        &:hover {
            background-color: var(--acnt-04-el-hover);
            border: solid 1px var(--acnt-07-bd);
        }

        &:has(input[type=radio]:checked) {
            background-color: var(--acnt-05-el-selected);
            border: solid 1px var(--acnt-08-bd-hover);
        }

        .yafl-select-project-item,
        .yafl-select-purchase-order-item,
        .yafl-select-invoice-item,
        .yafl-select-client-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 5px;
            color: var(--base-12-tx);

            span {
                display: flex;
                justify-content: space-between;
                /* align-items: center; */
                gap: 10px;
            }

            div {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }

            & small {
                color: var(--base-11-tx);
            }
        }
    }


}

.yafl-select-no-options {
    width: fill;
    background-color: var(--warn-03-el);
    padding: 5px;
    border-radius: 5px;
    border: solid 1px var(--warn-06-bd);
    color: var(--warn-11-tx);
    text-align: center;
}

.yafl-radio-option {
    width: fill;
    background-color: var(--acnt-03-el);
    border: solid 1px var(--acnt-06-bd);
    padding: 5px;
    border-radius: 5px;
    font-weight: initial;
    margin: 0px;

    &:hover {
        background-color: var(--acnt-04-el-hover);
        border: solid 1px var(--acnt-07-bd);
    }

    &:has(input[type=radio]:checked) {
        background-color: var(--acnt-05-el-selected);
        border: solid 1px var(--acnt-08-bd-hover);
    }
}

.changed {
    background-color: var(--warn-03-el);

}

/*
 .d8b.  
d8' `8b 
88ooo88 
88~~~88 
88   88 
YP   YP 
        
        
*/

a {
    color: var(--acnt-11-tx);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-style: dotted;

    &:hover {
        color: var(--acnt-09-bg-solid);
    }
}

/* 
 .d8b.  d8888b. d888888b d888888b  .o88b. db      d88888b 
d8' `8b 88  `8D `~~88~~'   `88'   d8P  Y8 88      88'     
88ooo88 88oobY'    88       88    8P      88      88ooooo 
88~~~88 88`8b      88       88    8b      88      88~~~~~ 
88   88 88 `88.    88      .88.   Y8b  d8 88booo. 88.     
YP   YP 88   YD    YP    Y888888P  `Y88P' Y88888P Y88888P 


*/
article {
    width: 100%;
    border-color: var(--base-07-bd);
    background-color: var(--base-03-el);
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;

    &.analyzer-query {
        width: 100%;
    }

    &.client-purchase-order {
        &.complete {
            filter: opacity(60%);
        }

        &>div.client-purchase-order-error {

            &>p {
                margin-top: 0px;
                margin-bottom: 10px;

                &>ul {
                    margin-left: 10px;
                }
            }

            &>p:first-child {
                &>strong:first-of-type {
                    color: var(--fail-11-tx);

                    &:before {
                        content: "● ";
                    }
                }


            }
        }

        &.overbilled {
            border-color: var(--fail-07-bd);
            background-color: var(--fail-03-el);
            color: var(--fail-12-tx);

            & dl.client-purchase-order-fields {
                background-color: var(--fail-06-bd);
                border-color: var(--fail-06-bd);

                &>div {
                    background-color: var(--fail-03-el);

                    &>dt {
                        color: var(--base-11-tx);
                    }

                    &>dd {
                        color: var(--fail-12-tx);
                    }
                }
            }
        }


        & button {
            height: 26px;
            font-size: 14px;
        }

        & .client-purchase-order-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            & .client-purchase-order-header-controls {
                display: flex;
                flex-direction: row;
                gap: 10px;
                align-items: center;
            }

        }

        & dl.client-purchase-order-fields {
            margin-top: 0px;
            display: grid;
            grid-auto-columns: max-content;
            grid-template-columns:
                1fr 1fr 1fr;
            grid-template-rows: auto auto auto auto auto;
            gap: 1px;

            &>div {
                padding: 10px;
                display: flex;
                justify-content: space-between;
                outline: 1px solid var(--base-08-bd-hover);

                &>dt {
                    color: var(--base-11-tx)
                }

                &>dd {
                    margin: 0px;

                }
            }

            &>div.description {
                grid-column: 1 / span 3;
                justify-content: start;
                gap: 20px;
            }

            &>div.uninvoiced-allocations>dd::before {
                content: "● ";
                color: var(--warn-08-bd-hover);
            }

            &>div.invoiced-allocations>dd::before {
                content: "● ";
                color: var(--pass-08-bd-hover);
            }

            &>div.invoiced-unspent>dd::before {
                content: "● ";
                color: var(--acnt-08-bd-hover);
            }

            &>div.uninvoiced-unspent>dd::before {
                content: "● ";
                color: var(--base-08-bd-hover);
            }
        }

        & .client-invoice {
            background-color: var(--acnt-03-el);
            border-color: var(--acnt-07-bd);
            color: var(--acnt-12-tx);
            outline: var(--acnt-06-bd);

            &:hover {
                background-color: var(--acnt-04-el-hover);
                border-color: var(--acnt-08-bd-hover);
            }

            &.complete {
                background-color: var(--pass-02-bg);
                border-color: var(--pass-07-bd);
                color: var(--pass-12-tx);

                &:hover {
                    background-color: var(--pass-04-el-hover);
                    border-color: var(--pass-08-bd-hover);
                }

                /* &:not(:open) {
                    & .client-invoice-fields {
                        display: none;
                    }
                } */
            }

            &>summary {
                &>div {
                    display: flex;
                    flex-direction: column;
                    flex: auto;
                    gap: 10px;

                    &>span {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        &>span.client-invoice-buttons {
                            display: flex;
                            flex-direction: row;
                            gap: 10px;
                            align-items: center;
                        }
                    }

                    &>dl.client-invoice-fields {
                        margin-top: 0px;
                        display: grid;
                        flex: auto;
                        grid-template-columns:
                            1fr 1fr 1fr;
                        grid-template-rows: auto auto;
                        gap: 1px;

                        &>div {
                            padding: 10px;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            outline: 1px solid var(--base-08-bd-hover);


                            &>dt {
                                color: var(--base-11-tx);
                            }

                            &>dd {
                                margin: 0px;
                            }

                            &.work-invoiced dd::before {
                                content: "● ";
                                color: var(--pass-08-bd-hover);
                            }

                            &.work-in-progress dd::before {
                                content: "● ";
                                color: var(--acnt-08-bd-hover);
                            }

                            &.description {
                                justify-content: start;
                                gap: 20px;
                                grid-column: 1 / 4;
                            }

                        }
                    }
                }
            }
        }

    }

    &#client-pending,
    &#client-assigned {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        user-select: none;
        /* needed for Safari */
        -webkit-user-select: none;
        height: 40px;

        & button {
            height: 26px;
            font-size: 14px;
        }
    }
}

/* 
d8888b.  .d88b.  d8888b. db    db 
88  `8D .8P  Y8. 88  `8D `8b  d8' 
88oooY' 88    88 88   88  `8bd8'  
88~~~b. 88    88 88   88    88    
88   8D `8b  d8' 88  .8D    88    
Y8888P'  `Y88P'  Y8888D'    YP    
                                  
                                  
*/
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--acnt-03-el);
    color: var(--base-12-tx);
    font-family: "Fira Sans";
    line-height: normal;

    &:has(.development) {
        background-color: var(--pass-05-el-selected);
        color: var(--pass-12-tx);
    }
}

/* 
d8888b. db    db d888888b d888888b  .d88b.  d8b   db 
88  `8D 88    88 `~~88~~' `~~88~~' .8P  Y8. 888o  88 
88oooY' 88    88    88       88    88    88 88V8o 88 
88~~~b. 88    88    88       88    88    88 88 V8o88 
88   8D 88b  d88    88       88    `8b  d8' 88  V888 
Y8888P' ~Y8888P'    YP       YP     `Y88P'  VP   V8P 


 */
button,
a.button {
    border-color: var(--acnt-07-bd);
    background-color: var(--acnt-03-el);
    color: var(--acnt-12-tx);
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    text-decoration: none;
    padding: 5px;

    &:hover {
        border-color: var(--acnt-08-bd-hover);
        background-color: var(--acnt-04-el-hover);
    }

    &:disabled {
        opacity: 30%;
    }

    &.log-in {
        margin-top: 20px;
        width: 100%;
    }
}


/*
d8888b. d88888b d888888b  .d8b.  d888888b db      .d8888. 
88  `8D 88'     `~~88~~' d8' `8b   `88'   88      88'  YP 
88   88 88ooooo    88    88ooo88    88    88      `8bo.   
88   88 88~~~~~    88    88~~~88    88    88        `Y8b. 
88  .8D 88.        88    88   88   .88.   88booo. db   8D 
Y8888D' Y88888P    YP    YP   YP Y888888P Y88888P `8888Y' 


*/
details {
    width: 100%;
    border-color: var(--base-07-bd);
    background-color: var(--base-03-el);
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    display: flex;
    flex-direction: column;

    &:hover {
        border-color: var(--base-08-bd-hover);
        background-color: var(--base-04-el-hover);
    }

    &#client-pending {
        border-color: var(--fail-07-bd);
        background-color: var(--fail-03-el);
        color: var(--fail-12-tx);
    }

    &#client-pending:hover {
        border-color: var(--fail-08-bd-hover);
        background-color: var(--fail-04-el-hover);
    }

    &.client-assigned {
        border-color: var(--warn-07-bd);
        background-color: var(--warn-03-el);
        color: var(--warn-12-tx);
    }

    &.client-assigned:hover {
        border-color: var(--warn-08-bd-hover);
        background-color: var(--warn-04-el-hover);
    }

    &.client-invoice.complete {
        color: var(--base-10-bg-solid-hover);
    }

    &>table {
        margin: 10px;
        margin-top: 0px;
        width: calc(100% - 2 * 10px);
    }

    &>summary::before {
        content: "";
        background-image: url("../icons/plus-circle.svg");
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
    }

    &[open]>summary::before {
        background-image: url("../icons/minus-circle.svg");
    }


}

/* 
d8888b. d888888b  .d8b.  db       .d88b.   d888b  
88  `8D   `88'   d8' `8b 88      .8P  Y8. 88' Y8b 
88   88    88    88ooo88 88      88    88 88      
88   88    88    88~~~88 88      88    88 88  ooo 
88  .8D   .88.   88   88 88booo. `8b  d8' 88. ~8~ 
Y8888D' Y888888P YP   YP Y88888P  `Y88P'   Y888P  
                                                  
                                                  
*/
dialog {
    border: 3px solid var(--acnt-07-bd);
    border-radius: 5px;
    padding: 20px;
    color: var(--acnt-12-tx);
    background-color: var(--acnt-01-bg);


    &::backdrop {
        backdrop-filter: brightness(60%);
    }

    &>#dialog-content {
        display: flex;
        flex-direction: column;
        gap: 15px;

        &>#dialog-title {
            display: flex;
            width: 100%;
            justify-content: space-between;

            &>h1 {
                margin-top: 0px;
                display: flex;
            }

            &>form {
                display: flex;
                max-width: fit-content;

                &>button {
                    background-color: rgba(0, 0, 0, 0);
                    border: none;
                    color: rgba(0, 0, 0, 0);
                    background-image: url("../icons/x.svg");
                    background-size: 20px 20px;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }
        }

        & #search-dialog-input {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        & #search-dialog-results {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 1em;
            min-width: 100%;
            flex-grow: 1;
            justify-content: center;

            & section {
                display: flex;
                flex-direction: column;
                width: calc(50% - 1em);
                min-width: 300px;
                flex-grow: 1;

                & td {
                    white-space: wrap;
                }
            }

            & :only-child {
                max-width: 100%;
            }
        }
    }

    &#search-dialog {
        border-color: var(--base-07-bd);
        background-color: var(--base-02-bg);
        width: 80vw;
    }


}

/* 
d8888b. d888888b db    db 
88  `8D   `88'   88    88 
88   88    88    Y8    8P 
88   88    88    `8b  d8' 
88  .8D   .88.    `8bd8'  
Y8888D' Y888888P    YP    
                          
                          
*/
div {
    &.client-status {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    &.client-status-figures {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: 20px;

        & dl {
            margin-top: 0px;

            & div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 5px;

                & dt {
                    font-size: small;
                    color: var(--base-11-tx);
                }

                & dd {
                    border: 1px solid var(--base-06-bd);
                    border-radius: 3px;
                    padding: 10px;
                    margin-left: 0px;

                    &::before {
                        content: "● ";
                    }
                }
            }

            &.pending dd::before {
                color: var(--fail-07-bd)
            }

            &.assigned-but-not-invoiced dd::before {
                color: var(--warn-07-bd)
            }

            &.both-assigned-and-invoiced dd::before {
                color: var(--pass-07-bd)
            }

            &.not-assigned-but-invoiced dd::before {
                color: var(--acnt-07-bd)
            }

            &.neither-assigned-nor-invoiced dd::before {
                color: var(--base-07-bd)
            }
        }

    }

    &:has(>.chart) {
        width: 100%;
        background-color: var(--base-02-bg);
        border-radius: 5px;
        border: var(--base-06-bd) solid 1px;
        padding: 20px;
    }
}


/* 
d88888b d888888b d88888b db      d8888b. .d8888. d88888b d888888b 
88'       `88'   88'     88      88  `8D 88'  YP 88'     `~~88~~' 
88ooo      88    88ooooo 88      88   88 `8bo.   88ooooo    88    
88~~~      88    88~~~~~ 88      88   88   `Y8b. 88~~~~~    88    
88        .88.   88.     88booo. 88  .8D db   8D 88.        88    
YP      Y888888P Y88888P Y88888P Y8888D' `8888Y' Y88888P    YP    
                                                                  
                                                                  
*/
fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    gap: 5px;
    border: none;
    padding: 0px;
    margin: 0px;
}

/* 
d88888b d888888b  d888b  db    db d8888b. d88888b 
88'       `88'   88' Y8b 88    88 88  `8D 88'     
88ooo      88    88      88    88 88oobY' 88ooooo 
88~~~      88    88  ooo 88    88 88`8b   88~~~~~ 
88        .88.   88. ~8~ 88b  d88 88 `88. 88.     
YP      Y888888P  Y888P  ~Y8888P' 88   YD Y88888P 
                                                  
                                                  
*/

figure {
    display: flex;
    flex-direction: row;
    width: 150px;
    margin: 0px;
    margin-left: auto;

    &>div {
        border-block: solid 1px;
        height: 24px;

        &:first-of-type {
            border-left: solid 1px;
            /* border-top-left-radius: 5px;
            border-bottom-left-radius: 5px; */
        }

        &:last-of-type {
            border-right: solid 1px;
            /* border-top-right-radius: 5px;
            border-bottom-right-radius: 5px; */
        }

        &.pending {
            background-color: var(--fail-07-bd);
            border-color: var(--fail-09-bg-solid);
        }

        &.assigned-but-not-invoiced {
            background-color: var(--warn-07-bd);
            border-color: var(--warn-09-bg-solid);
        }

        &.both-assigned-and-invoiced {
            background-color: var(--pass-07-bd);
            border-color: var(--pass-09-bg-solid);
        }

        &.not-assigned-but-invoiced {
            background-color: var(--acnt-07-bd);
            border-color: var(--acnt-09-bg-solid);
        }

        &.neither-assigned-nor-invoiced {
            background-color: var(--base-07-bd);
            border-color: var(--base-09-bg-solid);
        }
    }

    &.client-status-indicator {
        width: 100%;
        margin: 0px;

        &>div {
            height: 30px;
        }
    }
}

/* 
d88888b  .d88b.   .d88b.  d888888b d88888b d8888b. 
88'     .8P  Y8. .8P  Y8. `~~88~~' 88'     88  `8D 
88ooo   88    88 88    88    88    88ooooo 88oobY' 
88~~~   88    88 88    88    88    88~~~~~ 88`8b   
88      `8b  d8' `8b  d8'    88    88.     88 `88. 
YP       `Y88P'   `Y88P'     YP    Y88888P 88   YD 
                                                   
                                                   
*/
footer {
    height: var(--footer-height);
    background-color: var(--acnt-05-el-selected);
    color: var(--acnt-12-tx);
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;

    &.development {
        background-color: var(--pass-05-el-selected);
        color: var(--pass-12-tx);
    }
}

/* 
d88888b  .d88b.  d8888b. .88b  d88. 
88'     .8P  Y8. 88  `8D 88'YbdP`88 
88ooo   88    88 88oobY' 88  88  88 
88~~~   88    88 88`8b   88  88  88 
88      `8b  d8' 88 `88. 88  88  88 
YP       `Y88P'  88   YD YP  YP  YP 
                                    
                                    
*/
form {
    &#credentials-form {
        width: 500px;
    }

    ul {
        margin-top: 5px;
        padding-left: 0px;

        li {
            font-size: small;
            list-style: none;
        }
    }
}

/* 
db   db d88888b  .d8b.  d8888b. d88888b d8888b. 
88   88 88'     d8' `8b 88  `8D 88'     88  `8D 
88ooo88 88ooooo 88ooo88 88   88 88ooooo 88oobY' 
88~~~88 88~~~~~ 88~~~88 88   88 88~~~~~ 88`8b   
88   88 88.     88   88 88  .8D 88.     88 `88. 
YP   YP Y88888P YP   YP Y8888D' Y88888P 88   YD 
                                                
                                                
*/
header {
    position: fixed;
    background-color: var(--acnt-05-el-selected);
    color: var(--acnt-12-tx);
    top: 0;
    height: var(--header-height);
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;

    &.unauthorised {
        height: var(--unauthorised-header-height);

    }

    &.unauthorised h1 {
        margin-top: 0px;
    }

    &.authorised {
        height: var(--authorised-header-height);
        justify-content: space-between;
    }

    &.development {
        background-color: var(--pass-05-el-selected);
        color: var(--pass-12-tx);
    }
}

/* 
d888888b d8b   db d8888b. db    db d888888b 
  `88'   888o  88 88  `8D 88    88 `~~88~~' 
   88    88V8o 88 88oodD' 88    88    88    
   88    88 V8o88 88~~~   88    88    88    
  .88.   88  V888 88      88b  d88    88    
Y888888P VP   V8P 88      ~Y8888P'    YP    
                                            
                                            
*/
input {
    &[type=radio] {
        margin-right: 10px;
    }

    &[type=text],
    &[type=date],
    &[type=password],
    &[type=search] {
        width: 100%;
        min-height: 30px;
        border: solid 1px var(--acnt-06-bd);
        border-radius: 5px;

        &::placeholder {
            font-style: italic;
            font-size: small;
        }

        &:hover {
            border: solid 1px var(--acnt-08-bd-hover);
        }
    }
}

/* 
db   dD d8888b. d8888b. 
88 ,8P' 88  `8D 88  `8D 
88,8P   88oooY' 88   88 
88`8b   88~~~b. 88   88 
88 `88. 88   8D 88  .8D 
YP   YD Y8888P' Y8888D' 
                        
                        
*/
kbd {
    color: var(--acnt-11-tx);
    background-color: var(--acnt-05-el-selected);
    border: 1px solid var(--acnt-06-bd);
    border-radius: 3px;
    margin-right: 5px;
    padding: 2px 5px;
}

/* 
db       .d8b.  d8888b. d88888b db      
88      d8' `8b 88  `8D 88'     88      
88      88ooo88 88oooY' 88ooooo 88      
88      88~~~88 88~~~b. 88~~~~~ 88      
88booo. 88   88 88   8D 88.     88booo. 
Y88888P YP   YP Y8888P' Y88888P Y88888P 
                                        
                                        
*/
label {
    display: block;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
}

/*
db      d88888b  d888b  d88888b d8b   db d8888b. 
88      88'     88' Y8b 88'     888o  88 88  `8D 
88      88ooooo 88      88ooooo 88V8o 88 88   88 
88      88~~~~~ 88  ooo 88~~~~~ 88 V8o88 88   88 
88booo. 88.     88. ~8~ 88.     88  V888 88  .8D 
Y88888P Y88888P  Y888P  Y88888P VP   V8P Y8888D' 
                                                 
                                                 
*/
legend {
    font-weight: bold;
    padding: 0px;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* 
.88b  d88.  .d8b.  d888888b d8b   db 
88'YbdP`88 d8' `8b   `88'   888o  88 
88  88  88 88ooo88    88    88V8o 88 
88  88  88 88~~~88    88    88 V8o88 
88  88  88 88   88   .88.   88  V888 
YP  YP  YP YP   YP Y888888P VP   V8P 
                                     
                                     
*/
main {
    margin-bottom: var(--footer-height);
    overflow-y: scroll;
    width: 100vw;
    background-color: var(--base-01-bg);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    &.unauthorised {
        margin-top: var(--unauthorised-header-height);
        height: var(--unauthorised-main-height);
    }

    &.authorised {
        margin-top: var(--authorised-header-height);
        height: var(--authorised-main-height);
    }
}

/* 
d8b   db  .d8b.  db    db 
888o  88 d8' `8b 88    88 
88V8o 88 88ooo88 Y8    8P 
88 V8o88 88~~~88 `8b  d8' 
88  V888 88   88  `8bd8'  
VP   V8P YP   YP    YP    


*/
nav {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

/*
.d8888. d88888b  .o88b. d888888b d888888b  .d88b.  d8b   db 
88'  YP 88'     d8P  Y8 `~~88~~'   `88'   .8P  Y8. 888o  88 
`8bo.   88ooooo 8P         88       88    88    88 88V8o 88 
  `Y8b. 88~~~~~ 8b         88       88    88    88 88 V8o88 
db   8D 88.     Y8b  d8    88      .88.   `8b  d8' 88  V888 
`8888Y' Y88888P  `Y88P'    YP    Y888888P  `Y88P'  VP   V8P 
                                                            
                                                            
*/
section {
    width: 100%;

    &#admin-actions {
        display: flex;
        flex-direction: column;
        gap: 15px;

        & span {
            display: flex;
            justify-content: center;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;
        }
    }

    &#admin-stats {
        display: flex;
        flex-direction: column;
        gap: 15px;

        & pre {
            display: flex;
            justify-content: center;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;
        }
    }

    &#admin-logs {
        display: flex;
        flex-direction: column;
        gap: 15px;

        & label {
            display: inline;
            font-weight: normal;
            margin-right: 20px;
        }

        &>span:has(>label>input[name=info]:not(:checked)) {
            &~[class=log-info] {
                display: none;
            }
        }

        &>span:has(>label>input[name=warning]:not(:checked)) {
            &~[class=log-warning] {
                display: none;
            }
        }

        &>span:has(>label>input[name=error]:not(:checked)) {
            &~[class=log-error] {
                display: none;
            }
        }

        & .log-info {
            background-color: var(--pass-03-el);
            border-color: var(--pass-07-bd);
            color: var(--pass-12-tx);

            &>summary::before {
                background-image: url("../icons/check-circle.svg");
            }

            &:hover {
                background-color: var(--pass-04-el-hover);
                border-color: var(--pass-08-bd-hover);
            }
        }

        & .log-warning {
            background-color: var(--warn-03-el);
            border-color: var(--warn-07-bd);
            color: var(--warn-12-tx);

            &:hover {
                background-color: var(--warn-04-el-hover);
                border-color: var(--warn-08-bd-hover);
            }

            &>summary::before {
                background-image: url("../icons/warning-circle.svg");
            }
        }

        & .log-error {
            background-color: var(--fail-03-el);
            border-color: var(--fail-07-bd);
            color: var(--fail-12-tx);

            &:hover {
                background-color: var(--fail-04-el-hover);
                border-color: var(--fail-08-bd-hover);
            }

            &>summary::before {
                background-image: url("../icons/x-circle.svg");

            }
        }
    }
}

/* 
.d8888. d8888b.  .d8b.  d8b   db 
88'  YP 88  `8D d8' `8b 888o  88 
`8bo.   88oodD' 88ooo88 88V8o 88 
  `Y8b. 88~~~   88~~~88 88 V8o88 
db   8D 88      88   88 88  V888 
`8888Y' 88      YP   YP VP   V8P 
                                 
                                 
*/
span {
    &.board-controls {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    &.invoice-buttons-and-status {
        margin-left: auto;
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 10px;
    }

    &.analyzer-token-expr {
        color: var(--acnt-11-tx);
    }

    &.analyzer-token-lookup {
        color: var(--warn-11-tx);
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-style: dashed;
    }

    &.analyzer-token-op {
        color: var(--base-11-tx);
    }

    &.analyzer-token-label {
        color: var(--pass-11-tx);
    }

    &.analyzer-token-var {
        color: var(--pass-09-bg-solid);
    }

    &.analyzer-token-paren {
        color: var(--base-08-bd-hover);
    }

    &.analyzer-token-problem {
        color: var(--fail-11-tx);
        text-decoration: underline;
        text-underline-offset: 5px;
    }

    &.analyzer-token-comment {
        color: var(--pass-11-tx);
    }

    &#header-controls {
        display: flex;
        gap: 5px;
    }

    &#analyzer-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
}

/* 
.d8888. db    db .88b  d88. .88b  d88.  .d8b.  d8888b. db    db 
88'  YP 88    88 88'YbdP`88 88'YbdP`88 d8' `8b 88  `8D `8b  d8' 
`8bo.   88    88 88  88  88 88  88  88 88ooo88 88oobY'  `8bd8'  
  `Y8b. 88    88 88  88  88 88  88  88 88~~~88 88`8b      88    
db   8D 88b  d88 88  88  88 88  88  88 88   88 88 `88.    88    
`8888Y' ~Y8888P' YP  YP  YP YP  YP  YP YP   YP 88   YD    YP    


*/
summary {
    cursor: pointer;
    /* Remove the summary triangle marker in non-Chromium browsers */
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    gap: 10px;
    padding: 10px;

    user-select: none;
    /* needed for Safari */
    -webkit-user-select: none;

    &::-webkit-details-marker {
        /* Remove the summary triangle marker in Chromium browsers */
        display: none;
    }

    &::before {
        content: "▶";
    }

    & button {
        height: 26px;
        font-size: 14px;
    }

}


/* 
d888888b  .d8b.  d8888b. db      d88888b 
`~~88~~' d8' `8b 88  `8D 88      88'     
   88    88ooo88 88oooY' 88      88ooooo 
   88    88~~~88 88~~~b. 88      88~~~~~ 
   88    88   88 88   8D 88booo. 88.     
   YP    YP   YP Y8888P' Y88888P Y88888P 
                                         
                                         
*/
table {
    border-collapse: separate;
    border-spacing: 0px;
    width: 100%;

    & button {
        height: 26px;
        font-size: 14px;
    }
}

/* 
d888888b d8888b. 
`~~88~~' 88  `8D 
   88    88   88 
   88    88   88 
   88    88  .8D 
   YP    Y8888D' 
                 
                 
*/
td {
    border: var(--table-border);
    border-right: none;
    border-bottom: none;
    padding-inline: 10px;
    padding-block: 5px;
    max-width: 15vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--base-02-bg);
    color: var(--base-12-tx);

    &:has(.money) {
        text-align: right;
    }

    &:has(.variance-positive) {
        text-align: right;
        color: var(--pass-11-tx);
        background-color: var(--pass-02-bg);
    }

    &:has(.variance-neutral) {
        text-align: right;
        color: var(--warn-11-tx);
        background-color: var(--warn-02-bg);
    }

    &:has(.variance-negative) {
        text-align: right;
        color: var(--fail-11-tx);
        background-color: var(--fail-02-bg);
    }

    &:last-of-type {
        border-right: var(--table-border);
    }
}

/* 
d888888b db   db 
`~~88~~' 88   88 
   88    88ooo88 
   88    88~~~88 
   88    88   88 
   YP    YP   YP 
                 
                 
*/
th {
    border-left: var(--table-border);
    border-top: var(--table-border);
    border-right: none;
    border-bottom: none;
    padding-inline: 10px;
    padding-block: 5px;
    color: var(--acnt-12-tx);
    background-color: var(--acnt-03-el);
    font-weight: 100;
    text-align: left;

    &:hover {
        background-color: var(--acnt-04-el-hover);
    }

    &:last-of-type {
        border-top-right-radius: 5px;
        border-right: var(--table-border);
    }

    &:first-of-type {
        border-top-left-radius: 5px;
    }
}

/* 
d888888b d8888b. 
`~~88~~' 88  `8D 
   88    88oobY' 
   88    88`8b   
   88    88 `88. 
   YP    88   YD 
                 
                 
*/
tr {
    &.has-issues {
        &>td {
            background-color: var(--fail-03-el);

            &:first-child::before {
                content: "● ";
                color: var(--fail-11-tx);
            }
        }

        &:hover>td {
            background-color: var(--fail-04-el-hover);
        }


    }

    &:hover>td {
        background-color: var(--base-03-el);

        &:has(.variance-positive) {
            background-color: var(--pass-03-el);
        }

        &:has(.variance-neutral) {
            background-color: var(--warn-03-el);
        }

        &:has(.variance-negative) {
            background-color: var(--fail-03-el);
        }
    }

    &.selected>td {
        background-color: var(--acnt-05-el-selected);
        border-color: var(--acnt-07-bd);
    }

    &.deleted {
        opacity: 0.5;
    }

    &.pending td:first-of-type::before {
        content: "● ";
        color: var(--fail-08-bd-hover);
    }

    &.assigned td:first-of-type::before {
        content: "● ";
        color: var(--warn-08-bd-hover);
    }

    &.invoiced td:first-of-type::before {
        content: "● ";
        color: var(--pass-08-bd-hover);
    }

    &:last-of-type td {
        border-bottom: var(--table-border);
    }

    &:last-of-type td:first-of-type {
        border-bottom-left-radius: 5px;
    }

    &:last-of-type td:last-of-type {
        border-bottom-right-radius: 5px;
    }
}

/*
db    db db      
88    88 88      
88    88 88      
88    88 88      
88b  d88 88booo. 
~Y8888P' Y88888P 
                 
                 
*/
ul {
    margin: 0px;
    padding-left: 15px;

    &.client-to-do-list {
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        gap: 5px;

        &>li {
            &.client-to-do-bullet {
                list-style: none;


                &::before {
                    content: "● ";
                }

                &.new-purchase-order-required::before {
                    color: var(--fail-08-bd-hover);
                }

                &.allocations-unassigned::before {
                    color: var(--fail-08-bd-hover);
                }

                &.allocations-uninvoiced::before {
                    color: var(--warn-08-bd-hover);
                }

                &.invoices-unspent::before {
                    color: var(--acnt-08-bd-hover);
                }

                &.purchase-orders-unspent::before {
                    color: var(--base-08-bd-hover);
                }
            }
        }
    }
}