/* Establish usable properties */
@property --x {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* 
-----------------
TABLE OF CONTENTS
-----------------
Global Defaults
Header 
Body
Sidebar
Forms & Inputs
Accessibility
Buttons
Alert
Card
Tables
Footer
Animations
Responsive Classes
*/


/* 
---------------
GLOBAL DEFAULTS
---------------
*/
@media all {
    :root {
        /* Fonts */
        --body-font: 'Geologica', sans-serif;
        --heading-font: 'Geologica', sans-serif;
        --mono-font: 'Courier Prime', monospace;
        --symbol-font: "uicons-regular-rounded" !important;

        /* Grey scale colors use these most often */
        /* Colors */
        --light: #fff;
        --off-light: #DDD;
        --light-grey: #999;
        --grey: #777;
        --dark-grey: #555;
        --off-dark: #333;
        --dark: #222;

        /* Brand Colors - for occasional use */
        --dark-mode-green: #48C0C0;
        --dark-mode-blue: #4F8BC9;
        --light-mode-green: #3A6565;
        --light-mode-blue: #2C3D50;

        /* Charting and Alert colors */
        --red: #901414;
        --green: #006837;

        --shadow: rgba(127, 127, 127, 0.25)
    }

    body.darkmode {
        --light: #222;
        --off-light: #333;
        --light-grey: #555;
        --dark-grey: #999;
        --off-dark: #DDD;
        --dark: #fff;

        --blue: var(--light-mode-blue);
        --green: var(--light-mode-green);
    }

    body {
        --background: var(--light);
        --text: var(--dark);
        --blue: var(--light-mode-blue);
        --green: var(--light-mode-green);

        /* Backgrouds */
        --grid: linear-gradient(to right, var(--off-light) 1px, transparent 1px), linear-gradient(to bottom, var(--off-light) 1px, transparent 1px);
        --bg-feature: radial-gradient(var(--light) 23%, var(--off-light) 84%);
        color: var(--text);
        fill: var(--text);
    }


    #spritesheet {
        display: none !important;
    }

    .mapboxgl-ctrl-logo {
        display: none !important;
    }

    .good {
        color: var(--green);
    }

    .bad {
        color: var(--red);
    }

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: var(--body-font);
        color: inherit;
    }

    .hide {
        display: none !important;
    }

    .background-grid {
        background-color: var(--background);
        background-image: var(--grid);
        background-size: 32px 32px;
    }

    html {
        overflow-x: hidden;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .brand {
        font-family: var(--brand);
        font-size: 1.5em;
        color: var(--off-dark);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--heading-font)
    }

    h2,
    h1 {
        font-weight: bold;
        text-transform: uppercase;
    }

    h3 {
        font-weight: 600;
    }

    h4 {
        font-weight: 500;
    }

    h5 {
        font-weight: 400;
    }

    h6 {
        font-weight: 300;
    }

    table {
        font-family: var(--mono-font);
    }

    a {
        font-weight: bold;
        -webkit-user-drag: none;
    }

    button {
        background: none;
        border-radius: 1.5em;
    }

    hr {
        border: 1px solid var(--dark);
        margin: .25em 0 .5em;
    }

    p.legal {
        font-size: .8em;
        opacity: 60%;
    }

    svg.icon {
        height: 20px;
        width: 20px;
    }

    .vertical-stack {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .horizontal-stack {
        display: flex;
        gap: 1em;
    }

    .flex-split {
        justify-content: space-between;
    }

    .horizontal-stack.middle {
        align-items: center;
    }

    .vertical-stack.middle {
        justify-content: center;
    }

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

    .horizontal-stack.center {
        justify-content: center;
    }

}

/* 
------
HEADER
------
*/

@media all {
    aside:hover .reveal_hover {
        display: block;
    }

    aside .reveal_hover {
        display: none;
    }

    aside:hover .hide_hover {
        display: none;
    }

    /* 
    ----
    SIDEBAR
    ----
    */

    @media screen {
        aside#sidebar {
            height: 100dvh;
            display: flex;
            flex-direction: column;
            z-index: 1;
            font-size: 16px;
            width: max-content;
            overflow: visible;
            padding: 10px;
            max-height: 100dvh;
            border-right: 1px solid var(--grey);
            transition: width 250ms ease-in-out;
        }

        aside.collapsed#sidebar {
            width: min-content;
        }

        /* Main Sidebar Structure */
        aside#sidebar header {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        aside#sidebar main {
            overflow-y: auto;
        }

        aside#sidebar #sidebar-footer {
            position: relative;
            margin-top: auto;
        }

        /* Main Sidebar Elements */
        aside#sidebar hr {
            margin: 12px 2px;
        }

        aside#sidebar a,
        aside#sidebar button {
            display: flex;
            align-items: center;
            gap: .5em;
            text-transform: capitalize;
            font-weight: 500;
            font-size: 14px;
            border-radius: 4px;
            padding: 4px;
            border: 1px solid transparent;
            opacity: 1;
            transition: opacity 250ms ease-out;
            cursor: pointer;
            text-decoration: none;
            position: relative;
        }

        aside#sidebar div#brand {
            display: flex;
            align-items: center;
            padding: 4px;
            height: 30px;
        }

        aside#sidebar.collapsed #brand_container {
            justify-content: center;
        }

        aside#sidebar #brand_container {
            display: flex;
            flex-direction: row;
            position: relative;
            justify-content: space-between;
            align-items: center;
            gap: 1em;
        }

        aside#sidebar button:hover,
        aside#sidebar a:hover {
            opacity: 50%;
            border: 1px solid var(--light-grey);
            backdrop-filter: brightness(var(--brightness-adjust));
        }

        aside#sidebar img#brand-abrv {
            display: none;
        }

        aside#sidebar img#brand-full {
            display: block;
        }

        /* Aside Sidebar Collapsed Layout Changes*/
        @media all {

            /* Hide content on Collapse */
            aside#sidebar.collapsed img#brand-abrv {
                display: block;
            }

            /* header icons hidden (unless hovered) */
            aside#sidebar.collapsed button#sidebar_toggle,
            aside#sidebar.collapsed img#brand-full,
            /* all text hidden */
            aside#sidebar.collapsed p,
            aside#sidebar.collapsed h1,
            aside#sidebar.collapsed h2,
            aside#sidebar.collapsed h3,
            aside#sidebar.collapsed h4,
            aside#sidebar.collapsed main {
                display: none;
            }

            /* Collapsed Hover - Animation icon indicating grow menu is an option*/
            aside#sidebar.collapsed:hover div#brand {
                display: none;
            }

            aside#sidebar.collapsed:hover button#sidebar_toggle {
                display: block;
            }

            aside#sidebar #icon-arrow {
                transition: transform 250ms ease-in-out;
                transform-origin: 60% 50%;
                transform: scaleX(1);
            }

            aside#sidebar.collapsed #icon-arrow {
                --x: 0px;
                transform: scaleX(-1) translateX(var(--x));
                animation: bounce 500ms alternate infinite;
            }
        }

        /* Undo hide all for hidden menus */
        @media all {

            /* all text hidden */
            aside#sidebar.collapsed #accountMenu p,
            aside#sidebar.collapsed #accountMenu h1,
            aside#sidebar.collapsed #accountMenu h2,
            aside#sidebar.collapsed #accountMenu h3,
            aside#sidebar.collapsed #accountMenu h4,
            aside#sidebar.collapsed #accountMenu main {
                display: block;
            }
        }

        /* Header Element Designs */
        @media all {
            aside#sidebar header ul {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
        }

        /* Aside Sidebar Footer Styling */
        @media all {
            footer#sidebar-footer #profile-photo {
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 25px;
                height: 24px;
                width: 24px;
                border: solid 1px var(--text);
                color: var(--text);
            }

            aside#sidebar #sidebar-footer button {
                display: flex;
                flex-direction: row;
                width: 100%;
                align-items: center;
                gap: 8px
            }

        }

        /* Account Menu Bar */
        @media all {
            div#accountMenu.collapsed {
                display: none;
            }

            div#accountMenu {
                display: block;
                position: absolute;
                bottom: 100%;
                left: 0;
                margin-bottom: 0.5em;
                z-index: 5;
                background-color: var(--light);
                border-radius: .5em;
                padding: .5em;
                border: 1px solid var(--text);
            }

            div#accountMenu ul {
                display: flex;
                flex-direction: column;
                gap: .5em;
            }
        }

    }

    @media print {
        aside#sidebar {
            display: none;
        }
    }
}



/* 
----
BODY
----
*/
@media all {
    main {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }


    .x-scrollable {
        user-select: none;
        -webkit-user-select: none;
        /* Safari */
    }
}

/* 

--------------
FORMS & Inputs
--------------

*/

@media all {

    form {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        gap: .75em;
    }

    label {
        margin-left: .75em;
        display: block;
        color: var(--dark);
        font-family: var(--heading-font);
        font-weight: 600;
        font-size: 1em;
    }

    label:first-child {
        margin-top: 0em;
    }

    textarea {
        resize: none;
        border: none;
    }

    input[type="button"],
    input[type="submit"],
    input[type="radio"] {
        cursor: pointer;
    }


    input,
    textarea,
    select {
        border-radius: 1.5em;
        padding: .75em;
        background: none;
        border: 2px solid var(--text);
        font-size: 16px;
        width: 100%;
    }

    button {
        padding: .5em 1.5em;
        cursor: pointer;
    }

    .primary {
        background-color: var(--text);
        color: var(--background);
        text-transform: uppercase;
        font-weight: bolder;
    }


    input:active,
    input:focus {
        border-color: var(--blue);
    }

    button:disabled,
    input:disabled {
        background-color: var(--light-grey);
        border-color: var(--light-grey) !important;
        color: var(--light);
        cursor: unset;
        pointer-events: none;
    }

    input:focus,
    textarea:focus {
        outline: none;
    }

    input[data-unit-type]::after {
        content: attr(data-unit-type);
    }

    .checklist-controls input[type="checkbox"],
    .dd-checklist-container input[type="checkbox"] {
        width: 12px;
    }

}


/*
-------------
FILE UPLOADS
-------------
*/

@media all {
    .upload-section {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .upload-section h3,
    .form-section h3 {
        font-size: 1.1em;
        font-weight: 600;
        color: var(--dark);
        margin-bottom: 0.5em;
        margin-left: 0.5em;
    }

    .upload-area {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        flex: 1;
        min-height: 0;
    }

    .upload-box {
        border: 2px dashed var(--light-grey);
        border-radius: 1em;
        padding: 1.5em;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        background: var(--off-light);
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 0;
    }

    .upload-box:hover,
    .upload-box.dragging-file {
        border-color: var(--blue);
        animation: uploadBoxPulse 1s ease-in-out infinite;
    }

    .upload-box:hover svg,
    .upload-box.dragging-file svg {
        animation: uploadIconPulse 750ms ease-in-out infinite;
    }

    .upload-box svg {
        font-size: 2em;
        color: var(--off-dark);
        transition: transform 0.3s ease;
    }

    .upload-box p {
        margin: 0.5em 0 0 0;
        color: var(--off-dark);
        font-size: 0.9em;
    }

    .upload-box input[type="file"] {
        display: none;
    }

    .upload-box.drag-over {
        border-color: var(--blue);
        transform: scale(1.02);
    }

    .url-input-group {
        position: relative;
        display: flex;
    }

    .url-input-group input {
        flex: 1;
        padding: 0.5em 2.5em 0.5em 1em;
        border: 1px solid var(--off-light);
        border-radius: 1.5em;
        font-size: 0.85em;
    }

    .url-input-group input:focus {
        outline: none;
        border-color: var(--blue);
    }

    .url-input-group button {
        position: absolute;
        right: 0.5em;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--off-dark);
        transition: all 0.2s ease;
        font-size: 1.2em;
        font-weight: 300;
    }

    .url-input-group button:hover {
        color: var(--dark-grey);
        transform: translateY(-50%) scale(1.1);
    }

    .uploaded-files {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        margin-top: 0.5em;
    }

    .uploaded-file {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5em;
        padding: 0.5em 1em;
        background: var(--background);
        border: 1px solid var(--off-light);
        border-radius: 1em;
        font-size: 0.85em;
        min-width: 0;
        height: 34px;
        box-sizing: border-box;
    }

    .uploaded-file>div {
        display: flex;
        align-items: center;
        gap: 0.5em;
        flex: 1;
        min-width: 0;
    }

    .uploaded-file span {
        color: var(--dark);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
        max-width: 20ch;
    }

    .uploaded-file button {
        background: none;
        border: none;
        color: var(--red);
        cursor: pointer;
        font-size: 1.2em;
        padding: 0.25em;
    }
}




.portfolio-options {
    display: flex;
    flex-direction: column;
    gap: 1em;
}


.portfolio-option input[type="radio"] {
    display: none;
}

.portfolio-option {
    border-radius: 1em;
    padding: .5em;
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: space-between;
    position: relative;
}

.portfolio-option::after {
    cursor: pointer;
    pointer-events: none;
    content: "";
    position: absolute;
    left: calc(100% - 2.78em);
    width: 1.5em;
    height: 1.5em;
    border: 1px solid var(--off-dark);
    border-radius: 1em;
}

.portfolio-option:has(input[type="radio"]:checked) {
    background-color: var(--light);
}

.portfolio-option:has(input[type="radio"]:checked)::before {
    pointer-events: none;
    content: "";
    position: absolute;
    left: calc(100% - 2.45em);
    width: 1em;
    height: 1em;
    border-radius: 1em;
    background-color: var(--off-dark);
    cursor: pointer;
}

.portfolio-option label {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 1.25em;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

.select-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

select {
    appearance: none;
    cursor: pointer;
    outline: none;

    position: relative;

    font-family: 'Oxygen', sans-serif;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;

    border-radius: 2em;
    color: var(--dark);
    border: none;
    background-color: var(--light);
    padding: 0.5em 3em 0.5em 1em;
}

select:active,
select:focus {
    box-shadow: var(--shadow) inset;
}

select:active~.dropdown-arrow,
select:focus~.dropdown-arrow {
    transform: scaleY(-1);
}

.select-wrapper .dropdown-arrow {
    position: absolute;
    pointer-events: none;
    width: 0.8em;
    right: 1em;
    transform: scaleY(1);
    transition: all 125ms ease-in-out
}

.inline-edit {
    display: inline-flex;
    align-items: stretch;
    outline-color: var(--dark-grey);
}

.inline-edit a {
    border: none;
    color: var(--white);
    background: var(--dark-grey);
    cursor: pointer;
    padding: 0px 6px;
    display: none;
    border-radius: 0px 4px 4px 0px;
    align-items: center;
}

/* 

--------------
Accessibility
--------------

*/



[aria-label] {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

[aria-label]::after {
    display: none;
    width: max-content;
    content: attr(aria-label);
    position: absolute;
    top: 100%;
    background: var(--background);
    color: var(--text);
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 100;
    opacity: 0;
    transition: all 250ms ease-out;
}

[aria-label]:hover::after {
    display: block;
    opacity: .8;
}



/* 
-------
BUTTONS
-------
*/


.button:hover,
button:hover {
    opacity: 0.8;
}

button:active {
    opacity: 0.5;
}

.button {
    display: inline-block;
    font-family: var(--heading-font);
    text-transform: uppercase;
    font-weight: bold;
    margin: .5em 1em;
    padding: .5em 1em;
    border-radius: .5em;
    width: max-content;
    background-color: var(--light);
    cursor: pointer;
}

.primary-button {
    padding: .25em 1em;
    color: var(--white);
    background-color: var(--dark-grey);
    border-radius: 1em;
    font-family: var(--heading);
    text-transform: uppercase;
}

.follow-arrow::after {
    content: "→";
    font-family: var(--symbol-font);
    text-transform: uppercase;
    font-weight: 800;
    margin-left: .25em;
}

.attachments {
    display: flex;
    justify-content: flex-end;
    padding: .25em;
    gap: .25em;
}

.attachments .file {
    display: flex;
    align-items: center;
    gap: .5em;
    opacity: 80%;
    cursor: pointer;
    overflow: visible;
}

.attachments .file i {
    font-size: 20px;
    height: 1em;
    position: relative;
}

#chatMessage .attachments .file i {
    font-size: 32px;
    height: 1em;
    position: relative;
}

.attachments .file p {
    white-space: nowrap;
    position: absolute;
}

.attachments .file .tooltip {
    left: auto;
    right: 0px;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}




/*
-------------------
COMPONENTS
-------------------
*/

/* Tooltip */
@media all {
    .tooltip {
        width: max-content;
        display: none;
        position: absolute;
        font-size: 12px;
        padding: 6px 4px;
        margin: .5em;
        border-radius: 6px;
        top: 100%;
        /* Bottom by default */
        gap: 0.25em;
        background-color: var(--dark);
        color: var(--light);
        z-index: 99;
        opacity: .8;
        transform-origin: 50% 50%;
    }

    .tooltip.above {
        bottom: 100%;
    }

    .tooltip.right {
        left: 100%;
        top: 0px;
    }

    .tooltip.left {
        right: 100%;
        top: 0px;
    }

    .tooltip.center {
        left: calc(50% - .5em);
        /* account for margin */
        transform: translateX(-50%);
    }

    .tooltip.middle {
        top: calc(50% - .5em);
        /* account for margin */
        transform: translateY(-50%);
    }
}



*:hover>.tooltip {
    display: flex;
}

#scenarioName::before {
    content: "";
    display: inline-block;
    height: 0.5em;
    width: 0.5em;
    border: .2em solid var(--dark);
    border-radius: 0.6em;
    margin: 2px;
}

.scenarioName {
    color: var(--off-dark);
    background-color: var(--off-light);
    padding: calc(1em / 4) calc(1em / 2);
    border-radius: 20px;
    display: inline-flex;
    align-items: baseline;
    gap: calc(1em / 8);
}

.scenarioName.live {
    background-color: color-mix(in srgb-linear, var(--red) 100%, var(--light) 70%);
}

.scenarioName::before {
    content: "";
    display: inline-block;
    height: 0.5em;
    width: 0.5em;
    border: calc(1em / 8) solid var(--dark);
    border-radius: 0.6em;
}

.live::before {
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--off-dark) 85%, transparent 15%) 0%, color-mix(in srgb, var(--off-dark) 60%, transparent 40%) 70%, color-mix(in srgb, var(--off-dark) 20%, transparent 80%) 100%);
    animation: live-animation 1s ease-out infinite alternate;
}

@keyframes live-animation {
    from {
        opacity: 30%;
    }

    to {
        opacity: 75%;
    }
}

/*
-----
ALERT
-----
*/
@media all {
    #alerts-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .alert {
        position: relative;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        animation: slideIn 0.3s ease-out;
        cursor: pointer;
        padding: 10px;
        border-radius: 5px;
        justify-content: space-between;
        align-items: center;
        border-left: transparent 2px solid;
    }

    .alert::before {
        content: "X";
        position: absolute;
        box-sizing: border-box;
        right: calc(100% - 5px);
        top: 0%;
        background-color: inherit;
        color: inherit;
        height: 100%;
        padding: .5em;
        padding-right: calc(.5em + 5px);
        opacity: 0%;
        transition: opacity 125ms ease-out;
        border-radius: .5em 0em 0em .5em;
        font-weight: bold;
    }

    .alert:hover::before {
        opacity: 60%;
    }

    .alert:active::before {
        opacity: 100%;
    }
}



/* 

----
CARD
----

*/

/* Modals */
@media all {
    .modal {
        position: fixed;
        height: 100%;
        width: 100%;
        color: var(--text);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 24px var(--shadow);
        animation: fadeIn 0.3s ease-out;
    }

    .modal>* {
        z-index: 100;
    }

    /* Modal Styles */
    .modal::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #new-deal-modal .card {
        opacity: 0;
        height: clamp(25dvh, 80%, 80dvh);
        width: clamp(250px, 80%, 850px);
        animation: slideInUp 250ms ease-out 150ms forwards;
    }
}

/* Cards */
@media all {
    .card {
        display: flex;
        flex-direction: column;
        padding: 0.6em 0em 0.25em;
        border-radius: 0.5em;
        background-color: var(--background);
        color: var(--off-dark);
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }

    .card>header {
        width: 100%;
        margin-top: -.6em;
        /*Makes up for padding*/
        padding: 1.5em 2em;
        border-bottom: 1px solid var(--text);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #222;
        color: #fff;
    }

    .card>header>button {
        border-style: outset;
        border-color: #222;
    }

    .card>header>button:active {
        border-style: inset;
    }

    .card>header>button:hover {
        border-color: #fff;
    }
}



ul.card-tabs {
    display: flex;
    font-size: 12px;
    list-style: none;
    gap: .5em;
}

ul.card-tabs li.selected {
    font-weight: 700;
    background-color: var(--background)
}

ul.card-tabs li {
    list-style: none;
    font-family: var(--heading);
    text-transform: uppercase;
    font-weight: 600;
    background-color: var(--lighter);
    padding: .5em 1.5em;
    border-radius: .5em .5em 0px 0px;
}

div.pages {
    display: grid;
    overflow-x: hidden;
}

div.pages .page {
    transition: transform 250ms ease-in-out;
    position: relative;
    width: 100%;
}

/* KPI section */
@media all {
    .kpis {
        display: grid;
        grid-template-columns: repeat(var(--kpis-columns), 1fr);
        border-radius: 0.5em;
        overflow: hidden;
        background-color: var(--background);
        height: min-content;
    }

    .kpi {
        margin: -1px;
        box-sizing: border-box;
        width: calc(100% + 2px);
        height: max-content;
        padding: 0.5em .75em;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border: 1px solid var(--light);
    }

    .kpi h4 {
        font-family: var(--heading-font);
        width: min-content;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        line-height: 12.5px;
        margin-right: 4px;
        max-height: 25px;
    }

    .kpi .metrics {
        min-width: max-content;
        text-align: right;
        display: flex;
        flex-direction: column;
        font-family: var(--mono-font);
        align-items: flex-end;
    }

    .kpi .metrics .value {
        font-size: 12px;
        line-height: 12.5px;
        font-weight: 500;
    }

    .kpi .metrics .change {
        font-size: 10px;
        line-height: 10px;
        font-weight: 400;
    }
}

/* 
------
TABLE
------
*/
@media all {
    .table {
        display: grid;
        overflow: auto;
        grid-template-columns: 1.5fr 1fr;
        ;
        height: min-content;
    }

    .table[columns="3"] {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .table[columns="4"] {
        grid-template-columns: 2fr repeat(3, 1fr);
    }

    .table[columns="5"] {
        grid-template-columns: 2fr repeat(4, 1fr);
    }

    .table * {
        font-family: var(--mono-font);
        font-size: 12px;
        line-height: 12.5px;
        padding: 0.35em .50em 0.25em;
        height: 100%;
        border: 1px solid var(--light);
        align-content: center;
        text-align: right;
        color: var(--dark);
    }

    .table[columns="2"] *:nth-child(odd) {
        text-align: left;
        border-left: none;
        padding-left: 1em;
    }

    .table[columns="2"] *:nth-child(even) {
        border-right: none;
        padding-right: 1em;
    }

    .table[columns="3"] *:nth-child(3n+1) {
        text-align: left;
        border-left: none;
        padding-left: 1em;
    }

    .table[columns="3"] *:nth-child(3n) {
        border-right: none;
        padding-right: 1em;
    }

    .table[columns="4"] *:nth-child(4n+1) {
        text-align: left;
        padding-left: 1em;
        border-left: none;
    }

    .table[columns="4"] *:nth-child(4n) {
        border-right: none;
        padding-right: 1em;
    }

    .table[columns="5"] *:nth-child(5n+1) {
        text-align: left;
        padding-left: 1em;
        border-left: none;
    }

    .table[columns="5"] *:nth-child(5n) {
        border-right: none;
        padding-right: 1em;
    }

    .table h2,
    .table h3,
    .table h4 {
        box-sizing: border-box;
        font-family: var(--heading-font);
        font-weight: 600;
        text-transform: uppercase;
        border: none;
        border-bottom: 1px solid var(--light);
        color: var(--dark);
    }

    .table .gap {
        --gap-span: 2;
        display: none;
    }

    .table .gap-connect {
        grid-column: span var(--gap-span);
    }

    .table .weak {
        font-weight: 300;
        font-style: italic;
        color: var(--light);
    }

    .table .foot {
        font-weight: 600;
        border: none;
        padding-top: 0.6em;
        border-top: 1px solid var(--light);
        color: var(--dark);
    }
}


/* 
------
SETTINGS
------
*/

@media all {
    .settings-container {
        margin: 2em;
    }

    .settings-container .card {
        justify-content: flex-start;
        width: clamp(350px, 33%, 400px);
    }

    .settings-container .card>* {
        padding: 1em;
    }

    .settings-container button {
        flex-grow: 0;
        align-self: flex-end;
        margin-top: auto;
        border: none;
    }

    .settings-container .card {
        border: 2px solid var(--dark);
        flex-grow: 1;
    }
}



/* 
------
KAN-BAN
------
*/
@media all {
    #deals {
        height: 100dvh;
        display: flex;
        flex-direction: column;
        gap: 2em;
        padding: 2em;
        width: 100%;
        overflow-y: hidden;
    }

    #new-deal-modal form {
        display: grid;
        width: 100%;
        grid-template-columns: 2fr 3fr;
        gap: 2em;
        padding: 2em;
        padding-top: 1em;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    #filter-toolbar {
        flex-direction: row;
    }

    /* Form Section */
    .vertical-stack {
        display: flex;
        flex-direction: column;
        gap: 1em;
        flex: 1;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }


    .form-group label {
        font-weight: 600;
        color: var(--dark, #333);
        font-size: 0.95em;
        margin: 0 0 0 0.5em;
    }

    .form-group input {
        padding: 0.75em 1em;
        border: 2px solid var(--dark, #333);
        border-radius: 1.5em;
        font-size: 0.95em;
    }

    .form-group input:focus {
        outline: none;
        border-color: var(--dark-grey, #4376b1);
    }

    .textarea-container {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .textarea-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5em;
    }

    .textarea-header label {
        font-weight: 600;
        color: var(--dark, #333);
        font-size: 0.95em;
        margin: 0 0 0 0.5em;
    }

    .template-dropdown-wrapper {
        position: relative;
        display: inline-block;
    }

    .template-dropdown {
        appearance: none;
        padding: 0.4em 2.5em 0.4em 0.75em;
        border: none;
        border-radius: 1em;
        font-size: 0.85em;
        cursor: pointer;
        background: var(--lighter, #f8f8f8);
        color: var(--off-dark, #666);
        font-weight: bold;
        font-size: .8em;
    }

    .template-dropdown:hover {
        background: var(--light, #e6e6e6);
    }

    .template-dropdown-wrapper i {
        position: absolute;
        right: 0.75em;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 0.8em;
        color: var(--off-dark, #666);
    }

    .form-section textarea {
        padding: 0.75em;
        border: 2px solid var(--dark, #333);
        border-radius: 1.5em;
        font-size: 0.95em;
        resize: none;
        flex: 1;
        font-family: var(--body);
        line-height: 1.6;
    }

    .form-section textarea:focus {
        outline: none;
        border-color: var(--dark-grey, #4376b1);
    }

    .submit-button {
        padding: 1em 2em;
        background: var(--green, #006837);
        color: white;
        border: none;
        border-radius: 2em;
        cursor: pointer;
        font-weight: 600;
        font-size: 1em;
        text-transform: uppercase;
        transition: all 0.2s ease;
    }

    .submit-button:hover {
        background: color-mix(in srgb, var(--green) 85%, var(--dark) 15%);
        box-shadow: 0 2px 8px rgba(0, 104, 55, 0.3);
    }
}

@media all {
    #kanban-board {
        display: flex;
        gap: 1.5em;
        overflow-x: auto;
        padding-bottom: 1em;
        flex: 1;
    }

    #kanban-board>.card {
        flex: 0 0 320px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .asset-count {
        background: var(--background);
        color: var(--text);
        padding: 0.25em 0.75em;
        border-radius: 12px;
        font-size: 0.9em;
        font-weight: 600;
    }

    .column-cards {
        padding: 1em;
        overflow-y: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .kanban-card {
        background: white;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 6px;
        padding: 1em;
        transition: all 0.2s ease;
        cursor: default;
        display: block;
    }

    .kanban-card:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-header {
        margin-bottom: 0.75em;
        padding-bottom: 0.75em;
        border-bottom: 1px solid var(--lighter, #f0f0f0);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5em;
    }

    .card-header h4 {
        margin: 0;
        font-size: 1em;
        color: var(--dark, #333);
        font-weight: 600;
        flex: 1;
    }

    .card-category {
        background: var(--lighter, #f0f0f0);
        color: var(--off-dark, #666);
        padding: 0.25em 0.5em;
        border-radius: 4px;
        font-size: 0.75em;
        font-weight: 600;
        white-space: nowrap;
    }

    .card-body {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .card-detail {
        display: flex;
        justify-content: space-between;
        font-size: 0.9em;
        gap: 0.5em;
    }

    .card-detail .label {
        color: var(--off-dark, #666);
        font-weight: 500;
    }

    .card-detail span:last-child {
        color: var(--dark, #333);
        font-weight: 600;
        text-align: right;
    }

    /* Progress bars */
    .card-progress {
        margin-bottom: 1em;
    }

    .progress-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5em;
        font-size: 0.9em;
        font-weight: 600;
        color: var(--dark, #333);
    }

    .progress-value {
        color: var(--accent, #4a90e2);
    }

    .progress-bar {
        height: 8px;
        background: var(--lighter, #e0e0e0);
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent, #4a90e2), #5ba3ff);
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    /* Milestones */
    .card-milestones {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .milestone-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em;
        background: var(--lighter, #f8f8f8);
        border-radius: 4px;
        font-size: 0.85em;
    }

    .milestone-name {
        color: var(--dark, #333);
        font-weight: 500;
    }

    .milestone-countdown {
        color: var(--accent, #4a90e2);
        font-weight: 600;
        white-space: nowrap;
    }

    /* Collapsible sections */
    .card-more-details {
        margin-top: 1em;
        padding-top: 1em;
        border-top: 1px solid var(--lighter, #f0f0f0);
    }

    .toggle-details {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--lighter, #f8f8f8);
        border: none;
        padding: 0.5em 0.75em;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85em;
        font-weight: 600;
        color: var(--dark, #333);
        transition: background 0.2s ease;
    }

    .toggle-details:hover {
        background: color-mix(in srgb, var(--off-light) 90%, var(--dark) 10%);
    }

    .toggle-details.expanded {
        background: var(--accent, #4a90e2);
        color: white;
    }

    .toggle-icon {
        font-size: 0.8em;
        transition: transform 0.2s ease;
    }

    .details-content {
        margin-top: 0.75em;
        padding: 0.5em;
    }

    /* Transaction history */
    .transaction-item {
        display: flex;
        justify-content: space-between;
        padding: 0.5em 0;
        border-bottom: 1px solid var(--lighter, #f0f0f0);
        font-size: 0.85em;
    }

    .transaction-item:last-child {
        border-bottom: none;
    }

    .transaction-date {
        color: var(--off-dark, #666);
        font-weight: 500;
    }

    .transaction-action {
        color: var(--dark, #333);
        font-weight: 600;
        text-align: right;
    }

    /* Checklist */
    .checklist-section {
        margin-bottom: 1em;
    }

    .checklist-section:last-child {
        margin-bottom: 0;
    }

    .checklist-section h5 {
        margin: 0 0 0.5em 0;
        font-size: 0.85em;
        font-weight: 600;
        color: var(--off-dark, #666);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .checklist-item {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.4em 0;
        font-size: 0.85em;
        cursor: default;
    }

    .checklist-item input[type="checkbox"] {
        cursor: default;
    }

    .checklist-item span {
        color: var(--dark, #333);
    }

    .checklist-item input[type="checkbox"]:checked+span {
        color: var(--off-dark, #999);
        text-decoration: line-through;
    }

    /* Investors list */
    .investor-item {
        display: flex;
        justify-content: space-between;
        padding: 0.5em 0;
        border-bottom: 1px solid var(--lighter, #f0f0f0);
        font-size: 0.85em;
    }

    .investor-item:last-child {
        border-bottom: none;
    }

    .investor-name {
        color: var(--dark, #333);
        font-weight: 500;
    }

    .investor-amount {
        color: var(--accent, #4a90e2);
        font-weight: 600;
    }

    .empty-state {
        padding: 1em;
    }

    /* Scrollbar styling */
    .column-cards::-webkit-scrollbar {
        width: 6px;
    }

    .column-cards::-webkit-scrollbar-track {
        background: transparent;
    }

    .column-cards::-webkit-scrollbar-thumb {
        background: var(--lighter, #ddd);
        border-radius: 3px;
    }

    .column-cards::-webkit-scrollbar-thumb:hover {
        background: var(--off-dark, #999);
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .kanban-column {
            flex: 0 0 280px;
        }
    }

    /* Filter popup styles */
    .filter-popup {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 0.5em;
        background: white;
        border: 1px solid var(--lighter, #ddd);
        border-radius: 8px;
        padding: 1.5em;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        min-width: 320px;
    }

    .filter-group {
        margin-bottom: 1.5em;
    }

    .filter-group:last-of-type {
        margin-bottom: 0;
    }

    .input-clear {
        position: absolute;
        right: 0.5em;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25em;
        color: var(--off-dark, #999);
        font-size: 1em;
    }

    .input-clear:hover {
        color: var(--dark, #333);
    }

    .clear-btn:hover {
        color: var(--dark, #333);
    }

    /* Hide filtered assets */
    .kanban-card.filtered-out {
        display: none !important;
    }

    /* Drag and drop styles */
    .kanban-card.dragging {
        opacity: 0.4;
    }

    .kanban-column.drag-over {
        background: rgba(74, 144, 226, 0.05);
        border: 2px dashed var(--accent, #4a90e2);
    }

    .kanban-column.drag-over .column-cards {
        background: rgba(74, 144, 226, 0.05);
    }

    .kanban-card.card-moved {
        animation: cardPulse 0.5s ease;
    }

    @keyframes cardPulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.03);
            box-shadow: 0 6px 12px rgba(74, 144, 226, 0.3);
        }
    }

    /* ===== EDITABLE CARD STYLES ===== */

    /* Notes Section */
    .card-notes-section {
        margin-top: 1em;
        padding-top: 1em;
        border-top: 1px solid var(--lighter, #f0f0f0);
        position: relative;
    }

    /* INBOX Collapsible Notes Header */
    .notes-toggle-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: none;
        border: none;
        padding: 0;
        margin-bottom: 0.5em;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .notes-toggle-header:hover {
        opacity: 0.7;
    }

    .notes-caret {
        transition: transform 0.3s ease;
        font-size: 1.2em;
        color: var(--off-dark, #666);
    }

    .notes-collapsible-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .notes-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5em;
    }

    .notes-label,
    .section-label {
        font-size: 0.85em;
        font-weight: 600;
        color: var(--off-dark, #666);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .notes-container {
        position: relative;
        padding: 0.5em 0;
    }

    .notes-textarea {
        width: 100%;
        min-height: 60px;
        padding: 0.5em;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 4px;
        font-size: 0.85em;
        font-family: var(--body);
        resize: vertical;
        transition: border-color 0.2s ease;
    }

    .notes-textarea:focus {
        outline: none;
        border-color: var(--accent, #4a90e2);
    }

    /* Notes List for NEGOTIATIONS */
    .notes-list {
        display: flex;
        flex-direction: column;
        gap: 0.75em;
    }

    .note-item {
        background: var(--lighter, #f8f8f8);
        border-radius: 4px;
        padding: 0.5em;
    }

    /* Compact Note View */
    .note-compact {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .note-compact-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .note-compact-date {
        display: flex;
        align-items: center;
        gap: 0.25em;
        font-size: 0.8em;
        color: var(--off-dark, #666);
        font-weight: 600;
    }

    .note-compact-date i {
        font-size: 1em;
    }

    .note-compact-actions {
        display: flex;
        gap: 0.25em;
    }

    .note-compact-text {
        margin: 0;
        font-size: 0.85em;
        color: var(--dark, #333);
        line-height: 1.4;
    }

    .note-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5em;
    }

    .note-date {
        padding: 0.25em 0.5em;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 4px;
        font-size: 0.8em;
        background: white;
    }

    .note-text {
        width: 100%;
        min-height: 50px;
        padding: 0.5em;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 4px;
        font-size: 0.85em;
        font-family: var(--body);
        resize: vertical;
        background: white;
    }

    .empty-notes {
        text-align: center;
        padding: 1em;
        color: var(--off-dark, #999);
        font-size: 0.85em;
        font-style: italic;
    }

    /* Discrete Buttons */
    .discrete-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25em;
        color: var(--off-dark, #666);
        opacity: 0;
        transition: opacity 0.2s ease, color 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
    }

    .notes-header:hover .discrete-btn,
    .section-header:hover .discrete-btn,
    .milestone-item:hover .discrete-btn,
    .note-header:hover .discrete-btn,
    .funding-item:hover .discrete-btn {
        opacity: 1;
    }

    .discrete-btn:hover {
        color: var(--accent, #4a90e2);
    }

    .remove-note-btn:hover,
    .remove-milestone-btn:hover,
    .remove-funding-btn:hover {
        color: color-mix(in srgb, var(--red) 70%, #ff6b6b 30%);
    }

    /* Save Button */
    .save-btn {
        position: absolute;
        bottom: 0.5em;
        right: 0.5em;
        background: var(--green, #006837);
        color: white;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 104, 55, 0.3);
        transition: all 0.2s ease;
        z-index: 10;
    }

    .save-btn:hover {
        background: color-mix(in srgb, var(--green) 85%, var(--dark) 15%);
        transform: scale(1.1);
    }

    .save-btn i {
        font-size: 1em;
    }

    /* Card Sections */
    .card-section {
        margin-top: 1em;
        padding-top: 1em;
        border-top: 1px solid var(--lighter, #f0f0f0);
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75em;
    }

    /* Milestones */
    .milestones-list {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .milestone-item {
        padding: 0.5em;
        background: var(--lighter, #f8f8f8);
        border-radius: 4px;
    }

    .milestone-item.editing {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5em;
    }

    .milestone-item.compact {
        display: block;
    }

    /* Compact Milestone View */
    .milestone-compact {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .milestone-name {
        font-size: 0.85em;
        font-weight: 600;
        color: var(--dark, #333);
    }

    .milestone-info {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .milestone-countdown {
        font-size: 0.85em;
        color: var(--accent, #4a90e2);
        font-weight: 600;
    }

    /* Editing Milestone */
    .milestone-name-input {
        flex: 1;
        padding: 0.25em 0.5em;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 4px;
        font-size: 0.85em;
        background: white;
    }

    .milestone-controls {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .milestone-date-input {
        padding: 0.25em 0.5em;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 4px;
        font-size: 0.85em;
        background: white;
    }

    .milestone-days-input {
        width: 50px;
        padding: 0.25em;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 4px;
        font-size: 0.85em;
        text-align: center;
        background: white;
    }

    .days-label {
        font-size: 0.85em;
        color: var(--off-dark, #666);
        white-space: nowrap;
    }

    /* Funding Sources */
    .funding-list {
        display: flex;
        flex-direction: column;
        gap: 0.75em;
    }

    .funding-item {
        background: var(--lighter, #f8f8f8);
        border-radius: 4px;
        padding: 0.5em;
    }

    .funding-item.editing .funding-row {
        display: flex;
        align-items: center;
        gap: 0.5em;
        margin-bottom: 0.5em;
    }

    .funding-item.editing .funding-row:last-child {
        margin-bottom: 0;
    }

    /* Compact Funding View */
    .funding-compact {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .funding-compact-info {
        display: flex;
        align-items: center;
        gap: 0.75em;
    }

    .funding-name {
        font-size: 0.85em;
        font-weight: 600;
        color: var(--dark, #333);
    }

    .funding-type {
        font-size: 0.75em;
        padding: 0.2em 0.5em;
        background: var(--lighter, #e0e0e0);
        border-radius: 10px;
        color: var(--off-dark, #666);
        font-weight: 600;
    }

    .funding-compact-actions {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .funding-row {
        display: flex;
        align-items: center;
        gap: 0.5em;
        margin-bottom: 0.5em;
    }

    .funding-row:last-child {
        margin-bottom: 0;
    }

    .funding-name-input {
        flex: 1;
        padding: 0.25em 0.5em;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 4px;
        font-size: 0.85em;
        background: white;
    }

    .funding-amount-input {
        flex: 1;
        padding: 0.25em 0.5em;
        border: 1px solid var(--lighter, #e0e0e0);
        border-radius: 4px;
        font-size: 0.85em;
        background: white;
    }

    .funding-debt-label {
        display: flex;
        align-items: center;
        gap: 0.25em;
        font-size: 0.85em;
        color: var(--dark, #333);
        white-space: nowrap;
    }

    /* Due Diligence Checklist */
    .checklist-controls {
        margin-bottom: 1em;
        padding-bottom: 0.5em;
        border-bottom: 1px solid var(--lighter, #f0f0f0);
    }

    .toggle-completed {
        display: flex;
        align-items: center;
        gap: 0.5em;
        font-size: 0.85em;
        color: var(--dark, #333);
        cursor: pointer;
    }

    .dd-checklist {
        display: flex;
        flex-direction: column;
        gap: 0.75em;
    }

    .checklist-section-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: none;
        border: none;
        padding: 0.5em 0;
        cursor: pointer;
        text-align: left;
        transition: opacity 0.2s ease;
    }

    .checklist-section-header:hover {
        opacity: 0.7;
    }

    .checklist-section-header h5 {
        margin: 0;
        font-size: 0.85em;
        font-weight: 600;
        color: var(--off-dark, #666);
    }

    .collapse-section-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        color: var(--off-dark, #666);
    }

    .collapse-icon {
        transition: transform 0.2s ease;
        font-size: 1.2em;
    }

    .checklist-section-items {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    .checklist-item {
        margin: 0;
        padding: 0.5em 0;
    }

    .checklist-item.completed {
        opacity: 0.5;
    }

    .hide-completed-items .checklist-item.completed {
        display: none;
    }

    /* Funding Collection (UNCONDITIONAL) */
    .funding-collection-list {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .funding-collection-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em;
        background: var(--lighter, #f8f8f8);
        border-radius: 4px;
    }

    .funding-info {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
    }

    .funding-amount {
        font-size: 0.85em;
        color: var(--accent, #4a90e2);
        font-weight: 600;
    }

    .collected-checkbox {
        display: flex;
        align-items: center;
        gap: 0.25em;
        font-size: 0.8em;
        color: var(--off-dark, #666);
        white-space: nowrap;
    }

    /* Toggle Collected Button */
    .toggle-collected-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25em;
        color: var(--off-dark, #999);
        transition: color 0.2s ease, transform 0.2s ease;
        font-size: 1.5em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-collected-btn:hover {
        transform: scale(1.1);
    }

    .toggle-collected-btn.active {
        color: var(--green, #006837);
    }

    .toggle-collected-btn.active:hover {
        color: color-mix(in srgb, var(--green) 85%, var(--dark) 15%);
    }

    /* Outstanding DD Warning */
    .outstanding-dd-warning {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.5em;
        background: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 4px;
        margin-top: 0.5em;
        font-size: 0.85em;
        color: #856404;
    }

    .outstanding-dd-warning i {
        font-size: 1.2em;
    }

    /* Empty State */
    .empty-state-small {
        text-align: center;
        padding: 0.75em;
        color: var(--off-dark, #999);
        font-size: 0.85em;
        font-style: italic;
    }

    /* Input Focus States */
    .milestone-name-input:focus,
    .milestone-days-input:focus,
    .funding-name-input:focus,
    .funding-amount-input:focus,
    .note-date:focus,
    .note-text:focus {
        outline: none;
        border-color: var(--accent, #4a90e2);
    }

}


/* 
------
FOOTER
------
*/



/*
-------------
QUICK ACTION
-------------
*/
@media screen {
    #quick-actions> :first-child {
        padding: .75em 1.5em;
        border-radius: 50px 0px 0px 50px;
        background-color: var(--off-light);
    }

    #quick-actions> :last-child {
        padding: .75em;
        border-radius: 0px 50px 50px 0px;
    }

    .quick-action {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9998;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
    }

    .quick-action-button {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: var(--light);
        border: 1px solid var(--off-light);
        box-shadow: 0 4px 12px var(--shadow);
        cursor: pointer;
        transition: all 200ms ease-out;
    }

    .quick-action-button:hover {
        box-shadow: 0 6px 16px var(--shadow);
        transform: translateY(-2px);
    }

    .quick-action-button:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px var(--shadow);
    }

    .quick-action-button svg,
    .quick-action-button i {
        font-size: 24px;
        width: 24px;
        height: 24px;
        color: var(--text);
        fill: var(--text);
    }

    .quick-action-button[aria-expanded="true"] {
        background-color: var(--light);
    }

    /* Connection status indicator */
    .quick-action-status {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid var(--white);
        background-color: var(--red);
        transition: background-color 300ms ease-out;
        border: 2px solid var(--background);
    }

    .quick-action-status[data-status="connected"] {
        background-color: var(--green);
    }

    .quick-action-status[data-status="disconnected"] {
        background-color: var(--red);
    }

    .quick-action-status[data-status="reconnecting"] {
        background-color: #ffa500;
        animation: pulse 1.5s ease-in-out infinite;
    }

    .quick-action-status[data-status="error"] {
        background-color: var(--red);
        animation: pulse 1s ease-in-out infinite;
    }

    /* Menu container */
    .quick-action-menu {
        display: flex;
        flex-direction: column;
        background-color: var(--light);
        border: 1px solid var(--dark);
        border-radius: 12px;
        overflow: hidden;
        animation: slideInUp 200ms ease-out;
        min-width: 200px;
    }

    .quick-action-menu.hide {
        display: none;
    }

    .quick-action-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .quick-action-menu li {
        display: flex;
        align-items: center;
        line-height: 1;
        gap: 12px;
        padding: 12px 16px;
        cursor: pointer;
        transition: background-color 150ms ease-out;
        border-bottom: 1px solid var(--off-light);
        font-family: var(--body-font);
        font-size: 14px;
        font-weight: 500;
        color: var(--dark);
    }

    .quick-action-menu li:last-child {
        border-bottom: none;
    }

    .quick-action-menu li:hover {
        opacity: .6;
    }

    .quick-action i {
        font-size: 18px;
        fill: var(--text);
        color: var(--text);
    }

    .quick-action-menu li span {
        flex: 1;
    }

    /* Info items (non-interactive) */
    .quick-action-menu li.qa-info-item {
        pointer-events: none;
        padding: 8px 16px;
    }

    .quick-action-menu li.qa-info-item:hover {
        background-color: var(--off-light);
    }

    .qa-portfolio-info svg {
        width: 28px;
        height: 28px;
    }

    .quick-action-button svg {
        transform: scale(1.5);
        transition: transform 250ms ease-out;
    }

    .quick-action-button:hover svg {
        transform: scale(1.55);
    }

    .quick-action-button:active svg {
        transform: scale(1.25);
    }

    .quick-action-menu .qa-portfolio-info {
        background-color: var(--off-dark);
        color: var(--light);
        fill: var(--light);
        text-overflow: ellipsis;
    }


    .quick-action-menu .qa-portfolio-info div {
        width: 100%;
    }

    /* Reconnect button styling */
    #qa-reconnect {
        color: var(--red);
    }

    #qa-reconnect i {
        color: var(--red);
    }
}

@media print {
    div.quick-action {
        display: none !important;
    }
}


/*
-----------------
ANIMATIONS
-----------------
*/

/* Aniamtion Classes */
@media all {

    .highlight {
        animation: highlightFade 2s ease-out 1 forwards;
    }

    .shake {
        --x: 0;
        transform: translateX(var(--x));
        animation: shake-animation 250ms ease-out;
    }

    .slide-in {
        animation: slide-in-left 250ms ease-out 1 forwards;
    }

}

/* Animation Definitions */
@media all {
    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translate(-50%, -60%);
        }

        to {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translate(0, 0);
        }

        25% {
            transform: translate(5px, -7px);
        }

        50% {
            transform: translate(-3px, -12px);
        }

        75% {
            transform: translate(-7px, -5px);
        }
    }

    /* Upload box hover animations */
    @keyframes uploadBoxPulse {

        0%,
        100% {
            border-color: var(--dark-grey);
            opacity: 1;
        }

        50% {
            border-color: color-mix(in srgb, var(--dark-grey) 50%, var(--blue) 50%);
            opacity: 0.85;
        }
    }

    @keyframes uploadIconPulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.15);
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.4;
        }
    }

    @keyframes bounce {
        0% {
            --x: 2px;
        }

        50% {
            --x: -2px;
        }

        100% {
            --x: 2px;
        }
    }

    @keyframes slide-in-left {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }

        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    @keyframes highlightFade {
        0% {
            background-color: yellow;
        }

        50% {
            background-color: yellow;
        }

        to {
            background-color: inherit;
        }
    }

    @keyframes shake-animation {
        0% {
            --x: -2px
        }

        25% {
            --x: 4px
        }

        50% {
            --x: -8px
        }

        75% {
            --x: 8px
        }

        90% {
            --x: -2px
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0%;
        }

        to {
            opacity: 100%
        }
    }
}



/*
------------------
RESPONSIVE CLASSES
------------------
*/
@media (max-width: 600px) {

    /* Your CSS rules for small width screens go here */
    :root {
        font-size: 12px;
    }

    .hide-600 {
        display: none;
    }
}