/* Some normalizing thingies for demo */
        
        img{
        -webkit-touch-callout: none !important; 
        -webkit-user-select: none !important;
                user-select: none !important}

        button {
            appearance: none;
            -mz-appearance: none;
            -moz-appearance: none;
            border: none;
            background: none;
            outline: none;
            font-size: inherit;
            font-family: inherit;
            }
            button::after, button::before,
            a.btn::after, a.btn::before,
            .btn::after, .btn::before,
            a.btn::after, a.btn::before {
            box-sizing: border-box;
            }
        :focus-visible {outline: 3px solid var(--color-teal);
            outline-offset: 3px;
        }
        input,
        textarea,
        select {
            font-size: var(--font-size-primary);
            font-family: inherit
        }
        fieldset {
            border: 0;
            margin: 0;
            padding: 0
        }
         /* common text components */
         h3, h4, h5, h6, 
         p:not(.info-value), li {margin-bottom: calc(var(--primary-radius-and-padding) / 1.7)}
         h1 {
            font-size: 2rem;
            line-height: 1.5;
            font-weight: bold
        }
        h2 {
            font-size: var(--font-size-largest);
            line-height: 1.6;
        }
        h3 {line-height: 1.6; margin-bottom: calc(var(--primary-radius-and-padding) / 1.6)}
        .card:not(.promo) h2, 
        .right-panel-header h2, 
        h4 {
            font-size: var(--font-size-primary);
            font-weight: bold;
        }
        .card:not(.promo) h2.large
        {
            font-size: var(--font-size-large);
        }

        small {display: inline-block}
        small,
        .small {
            font-size: var(--font-size-small);
            font-weight: 500;
            line-height: 1.5
        }
        ul,
        ol {margin-left: var(--primary-radius-and-padding)}

         a.btn,
         .btn {/* use a class so we can apply the same styles to link buttons; for ADA, links should be used for actions that take users somewhere outside of the current page */
            display: block;
            font-size: calc(var(--font-size-primary) + .1rem);
            color: var(--color-none);
            background: var(--color-blue);
            border: 2px solid transparent;
            padding: var(--primary-radius-and-padding-half) var(--primary-radius-and-padding);
            border-radius: var(--primary-radius-and-padding);
            font-family: inherit;
            font-weight: bolder;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            transition: all 0.15s linear;
            border-color: transparent;
            box-shadow: var(--shadows-multi)
        }
            a.btn.compact,
            .btn.compact {
                font-size: calc(var(--font-size-primary) - .1rem);
                color: var(--color-none);
                border: 2px solid transparent;
                padding: calc(var(--primary-radius-and-padding) / 4) var(--primary-radius-and-padding-half);
                border-radius: var(--primary-radius-and-padding);
                box-shadow: var(--shadows-multi)
            }
            a.btn.ultra-compact,
            .btn.ultra-compact {
            font-size: var(--font-size-smallest);
            font-weight: bold;
            padding: 0.25rem 0.625rem 0.25rem 0.625rem;
            border-radius: var(--primary-radius-and-padding);
            white-space: nowrap;
            }
            a.btn.compact.fit-content,
            .btn.compact.fit-content,
            a.btn.ultra-compact.fit-content,
            .btn.ultra-compact.fit-content {
                width: fit-content}
        .btn.primary,
        a.btn.primary,
        .action-btn.primary,
        a.action-btn.primary {
            background: linear-gradient(45deg,var(--color-blue),var(--color-chocolate),var(--color-blue)) 0 0/600%
        }
        .btn.primary i {
            margin-left: -.75rem
        }
        .btn.primary.compact i {
            margin-left: -.35rem
        }
        a.btn.secondary,
         .btn.secondary {
            border: 2px solid var(--color-dark-blue);
            background: inherit;
            color: var(--color-dark-blue);
         }
         a.btn.ghost,
         .btn.ghost {
            border: 2px solid transparent;
            color: var(--color-teal);
            font-weight: 500;
            background: inherit;
            box-shadow: none;
         }
        a.btn.regressive,
        .btn.regressive {
            color: var(--color-red);
            border-color: var(--color-red)
        }
        a.btn.regressive.ghost,
        .btn.regressive.ghost {
            border-color: transparent
        }

        #new-proj-alert {
            position: fixed;
            bottom: 1rem;
            left: 0;
            right: 0;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            z-index: 100;
        }
        

        @media (hover: hover) and (pointer: fine) { /* :hover only for desktop to avoid double-tap on touch screens */
            .btn.new-proj-btn.primary:hover,
            a.btn.new-proj-btn.primary:hover {
                background: var(--color-none);
            }
        }

        @media (prefers-reduced-motion: no-preference) {/* be a good human and add fancy motion stuff to a query */
            .btn.primary,
            a.btn.primary,
            .action-btn.primary,
            a.action-btn.primary {
                -webkit-animation: anime 14s linear infinite;
                animation: anime 14s linear infinite
            }

            @-webkit-keyframes anime {
                0% {background-position: 0% 50%}
                50% {background-position: 100% 50%}
                100% {background-position: 0% 50%}
            }

            @keyframes anime {
                0% {background-position: 0% 50%}
                50% {background-position: 100% 50%}
                100% {background-position: 0% 50%}
            }
            
            #new-proj-alert.springInFromBottom {
                animation: springIn 0.5s ease-out forwards,
                            jiggle 0.35s ease-in-out 5s 2 forwards; /* delay = 2s, iteration-count = 2 */
                }
            @keyframes springIn {
                0% {
                    transform: translateY(150px);
                    opacity: 0;
                }
                40% {
                    transform: translateY(0);
                    opacity: 1;
                }
                55% { transform: translateY(-15px); }
                70% { transform: translateY(10px); }
                85% { transform: translateY(-6px); }
                100% { transform: translateY(0); }
            }
            @keyframes jiggle {
                0% { transform: translateY(0px); }
                25% { transform: translateY(-10px); }
                50% { transform: translateY(5px); }
                75% { transform: translateY(-3px); }
                100% { transform: translateY(0); }
            }
        }
        
        ::selection {
            background: oklch(from var(--color-khaki) l c h / 55%);
            text-shadow: none
        }
        
        hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: var(--border-divider);
            margin: 1em 0;
            padding: 0
        }

        a:where(:not(.btn):not(.action-btn):not(.icon):not(.nav-item):not(.nav-subitem):not(.tertiary-nav-item):not(.select-option-link):not(.to-configure-box):not(.tag-button):not(.day-badge-link)) {
            text-decoration: none;
            font-weight: 500;
            color: var(--color-teal);
            background: linear-gradient(to right, oklch(from var(--color-teal) l c h / 1)),
                        var(--gradient-animated-link-underline);
            background-size: 100% 2px, 0 2px;
            background-position: 100% 100%, 0 100%;
            background-repeat: no-repeat;
            transition: background-size 400ms
        }

        .promo a:where(:not(.btn):not(.action-btn):not(.icon):not(.nav-item):not(.nav-subitem):not(.tertiary-nav-item):not(.to-configure-box):not(.tag-button):not(.day-badge-link)) {
            font-weight: bold;
            color: inherit;
            background: linear-gradient(to right, oklch(from var(--color-full) l c h / 1)),
                        var(--gradient-animated-link-underline);
            background-size: 100% 2px, 0 2px;
            background-position: 100% 100%, 0 100%;
            background-repeat: no-repeat;
            transition: background-size 400ms
        }

        .section-link {font-weight: bold}

        .card {scroll-margin-top: var(--primary-radius-and-padding);}
        .card:not(.kpi) {margin-bottom: var(--primary-radius-and-padding);}

        .card:not(:has(.scrolling-table, .simple-preview-table)),
        .floating-actions .secondary-actions {
            padding: var(--primary-radius-and-padding);
        }

        .card,
        .floating-actions .secondary-actions {
            border-radius: var(--primary-radius-and-padding);
            background-color: var(--color-none)
        }
        .card:not(.card .card),
        .floating-actions .secondary-actions,
        .right-panel {
            box-shadow: var(--shadows-multi)
        }
        .card .card {border: var(--border-divider);}
        .card .card:last-child {margin-bottom: 0;}

        .icon {
            width: 1.75rem;
            height: 1.75rem;
            border-radius: var(--radius-secondary);
            font-size: 1.75rem;
            margin-right: 0.625rem
        }
        .icon-l {
            font-size: 2rem; 
            color: var(--color-blue); 
            margin-bottom: -0.5rem;
            margin-right: .25rem
        }
        .icon-exL {
            font-size: 2.5rem; 
            color: var(--color-blue); 
            margin-bottom: 0.5rem;
        }
        .icon-small {
            width: 1.25rem;
            height: 1.25rem;
            font-size: 1.25rem; 
        }
        .hgi {
            transition: all 0.2s ease;
            }
       
        .hgi-thumbs-down,
        .hgi-thumbs-up {transform: scaleX(-1)}
        .btn i,
        a.btn i  {padding-right: 0.5rem; top: .1875rem;}
        
        a:not(.new-proj-btn):active,
        .btn:active,
        .back-to-top:active {
            transform: translateY(4px);}

        a:not(.nav-item):not(.nav-subitem):not(.btn):focus:not(.action-btn):focus {border-radius: var(--radius-secondary)}
/* IF HUGE ICONS EVER FIXES THEIR BUG, REMOVE THESE OVERRIDES FROM ALL FILES 
===========================================================================
FYI icon list 
.hgi-menu-collapse
.hgi-ai-idea
.hgi-task-add-01
.hgi-user-add-01
.hgi-add-team-02
.hgi-star
.hgi-timer-02
.hgi-contracts
.hgi-shopping-cart-check-in-02
.hgi-edit-02
.hgi-user-edit-01
.hgi-user-remove-01
.hgi-thumbs-down
.hgi-thumbs-up
.hgi-tag-02
.hgi-add-to-list
.hgi-sparkles
.hgi-share-01
.hgi-note-add
.hgi-file-star
.hgi-file-export
.hgi-file-02
.hgi-user-multiple-02
.hgi-store-verified-02
.hgi-chat-edit-01
.hgi-search-02
.hgi-mail-send-02
.hgi-layer-add
.hgi-pause
.hgi-arrow-up-narrow-wide
.hgi-clipboard
.hgi-heart-add
.hgi-add-team-02
.hgi-property-edit
.hgi-crane
.hgi-filter-add
.hgi-hold-locked-01
.hgi-invoice
.hgi-news-01
.hgi-tick-double-04
.hgi-shopping-cart-check-02
.hgi-image-add-02
*/
.hgi-bulk.bulk-misaligned-14:before {left: -14px !important;}
.hgi-bulk.bulk-misaligned-10:before {left: -10px !important;}
.hgi-bulk.bulk-misaligned-9:before {left: -9px !important;}
.hgi-bulk.bulk-misaligned-8:before {left: -8px !important;}
.hgi-bulk.bulk-misaligned-7:before {left: -7px !important;}
.hgi-bulk.bulk-misaligned-6:before {left: -6px !important;}
.hgi-bulk.bulk-misaligned-5:before {left: -5px !important;}
.hgi-bulk.bulk-misaligned-4:before {left: -4px !important;}
.hgi-bulk.bulk-misaligned-3:before {left: -3px !important;}
.hgi-bulk.bulk-misaligned-2:before {left: -2px !important;}
.hgi-bulk.bulk-misaligned0:before {left: 0 !important;}
.hgi-bulk.bulk-misaligned1:before {left: 1px !important;}
.hgi-bulk.bulk-misaligned2:before {left: 2px !important;}
.hgi-bulk.bulk-misaligned3:before {left: 3px !important;}
.hgi-bulk.bulk-misaligned4:before {left: 4px !important;}
.hgi-bulk.bulk-misaligned5:before {left: 5px !important;}
.hgi-bulk.bulk-misaligned6:before {left: 6px !important;}
.hgi-bulk.bulk-misaligned7:before {left: 7px !important;}
.hgi-bulk.bulk-misaligned8:before {left: 8px !important;}
.hgi-bulk.bulk-misaligned9:before {left: 9px !important;}
.hgi-bulk.bulk-misaligned10:before {left: 10px !important;}
.hgi-bulk.bulk-misaligned12:before {left: 12px !important;}

.item-box.specific-callout .hgi-bulk.hgi-file-02:before {left: 1px !important;}

.hgi-bulk.hgi-unfold-more:before {position: relative !important;}
.kpi-header .hgi-bulk.bulk-misaligned3.hgi-edit-02:before {left: 7px !important;}
.floating-actions .hgi.hgi-bulk.hgi-share-01 {left: 6px;}
.hgi-bulk.bulk-misaligned-7.hgi-layer-add,
.hgi-bulk.bulk-misaligned-10.hgi-pause,
.hgi-bulk.bulk-misaligned-8.hgi-clipboard {left:5px}
.hgi-bulk.hgi-arrow-up-narrow-wide {left:4px}
.hgi-bulk.bulk-misaligned-4.hgi-layer-add {left:3px}
.floating-actions .hgi.hgi-bulk.hgi-add-team-02,
.hgi-bulk.bulk-misaligned6.hgi-edit-02,
.hgi-bulk.bulk-misaligned12.hgi-add-team-02,
.hgi-bulk.bulk-misaligned5.hgi-add-team-02 {left:-3px}


/*
hgi-comment-02
hgi-arrow-down-double
*/
.alert-banner .hgi-bulk.hgi-comment-02:before {position: relative !important;}

/* END HUGE ICONS  BUG FIXES
=========================================================================== */

    /* FORM ELEMENTS */
        .form-grid {
            display: grid;
            gap: var(--primary-radius-and-padding);
            margin-bottom: var(--primary-radius-and-padding);
        }
        .form-grid[data-grid="1"] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        .form-grid[data-grid="2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .form-grid[data-grid="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .form-grid[data-grid="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .form-grid[data-grid="auto"] {
        grid-template-columns: auto auto;
        }
        .form-grid.compact {
            gap: var(--primary-radius-and-padding-half);
        }

        /* Form Field Container */
        .form-field {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
        .form-row-2x {
            display: flex;
            column-gap: 1rem;
        }

        .form-row-2x > .form-field {
            flex: 1;
            min-width: 0;
        }

        .form-row-2x .form-input {
            width: 100%;
        }

        .ultra-compact .form-field {
                font-size: var(--font-size-small);
            }
            #update-field.form-field {width: 100%; max-width: 39rem}

        /* Labels */
        .form-label {
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .required-indicator {
            color: var(--color-red);
        }

        .optional::after,
        .optional-rev::before {
            padding-left: calc(var(--primary-radius-and-padding) / 4);
            color: light-dark(oklch(from var(--color-orange) calc(l - .15) c h), oklch(from var(--color-orange) calc(l + .15) c h));
            opacity: .85;
            font-size: var(--font-size-small);
        }
        .optional::after {
            content: '(optional)';
        }
        .optional-rev::before {
            content: '(optional)';
        }

        /* Text Inputs */
        .form-input {
            padding: 0.75rem 1rem;
            border: var(--border-inputs-base);
            border-radius: var(--radius-secondary);
            background: var(--color-none);
            color: var(--color-dark-blue);
            font-size: var(--font-size-primary);
            transition: all 0.2s ease;
            outline: none;
        }
            .compact .form-input {
                padding: 0.5rem 0.75rem;
            }
            .ultra-compact .form-input {
                border: var(--border-inputs-compact);
                font-size: var(--font-size-small);
                padding: 0.25rem 0.5rem;
            }

        /* Search Input */
        form .search-wrapper {
            position: relative;
        }

        .search-icon {
            position: absolute;
            margin-left: .5rem;
            margin-top: 1.5rem;
            transform: translateY(-50%);
            color: var(--color-row-headers);
            pointer-events: none;
        }

        .compact .search-icon {
            margin-top: 1.35rem;
        }
        .ultra-compact .search-icon {
            margin-top: .9rem;
            width: 1rem;
        }

        form .form-input.search {
            padding-left: 2rem;
        }

        /* Custom Select Dropdown */
        .custom-select {
            position: relative;
            width: 100%;
            min-width: 0;
            text-align: left;
        }

        .select-trigger {
            width: 100%;
            min-width: 0;
            padding: 0.75rem 2.5rem 0.75rem 1rem;
            border: var(--border-inputs-base);
            border-radius: var(--radius-secondary);
            background: var(--color-none);
            color: var(--color-dark-blue);
            font-size: var(--font-size-primary);
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
            .compact .select-trigger {
                padding: 0.5rem 2rem 0.5rem .75rem;
            }
            .ultra-compact .select-trigger {
                border: var(--border-inputs-compact);
                font-size: var(--font-size-small);
                padding: 0.25rem 1.5rem 0.25rem .5rem;
            }
        .select-value {
            /* These need to be updated in your existing .select-value rule */
            min-width: 0; /* Critical for flex children */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1 1 0%; /* Use 0% basis to ensure truly equal flex distribution */
        }

        .select-trigger.open {
            border-color: var(--color-blue);
            box-shadow: 0 0 0 3px oklch(from var(--color-blue) l c h / 20%);
        }

        .select-arrow {
            position: absolute;
            flex-shrink: 0;
            width: 1rem;
            height: 1rem;
            font-size: 1rem;
            line-height: 1;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            transition: transform 0.2s ease;
        }
            .compact .select-arrow {
                right: 0.75rem;
                font-size: .75rem;
            }
            .ultra-compact .select-arrow {
                width: .75rem;
                height: .75rem;
                right: 0.5rem;
                font-size: .75rem;
            }
        .search-icon path {
            fill: oklch(from var(--color-dark-blue) l c h / 70%);
        }

        .select-trigger.open .select-arrow {
            transform: translateY(-50%) rotate(180deg);
        }

        /* =========================================================
           Editable-cell affordance (shared)
           Single definition of the border affordance used by both the
           estimate line-item editable cells and the inline status
           pickers (opportunities / jobs / dashboard list rows).
           Line items keep their teal background in data-entry-tables.css;
           only the border affordance lives here so it is not duplicated.
           ========================================================= */
        .line-item-list .form-field:not(:has(.toggle-wrapper)) .form-input,
        .line-item-list .form-field:not(:has(.toggle-wrapper)) .select-trigger,
        .status-picker .select-trigger {
            border: 1px dotted oklch(from var(--color-khaki) l c h / 0%);
        }
        @media (hover: hover) and (pointer: fine) {
            .line-item-list .form-field:not(:has(.toggle-wrapper)) .form-input:hover,
            .line-item-list .form-field:not(:has(.toggle-wrapper)) .select-trigger:hover,
            .status-picker .select-trigger:hover {
                border: 1px dashed oklch(from var(--color-khaki) l c h / 70%);
            }
        }

        /* Inline status picker — bare pill + chevron (no select-box chrome).
           The trigger spans the full cell width so the affordance border is
           consistent regardless of badge length, and the chevron sits inside
           the trigger at its right edge (part of the selector, not floating). */
        .status-picker {
            width: 100%;
        }
        .status-picker .select-trigger {
            width: 100%;
            background: transparent;
            padding: 0.25rem 1.75rem 0.25rem 0.5rem;
            justify-content: flex-start;
        }
        .status-picker .select-arrow {
            right: 0.5rem;
            font-size: 0.7rem;
        }

        .select-options {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: var(--color-none);
            border: 1px solid oklch(from var(--color-khaki) l c h / 40%);
            border-radius: var(--radius-secondary);
            max-height: 21.5rem;
            overflow-y: auto;
            z-index: 100;
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
            transition: all 0.2s ease;
            box-shadow: var(--shadows-multi)
        }
        .modal .select-options,
        .modal .typeahead-results {/* override for smaller areas */
            max-height: 11.75rem; /* there are further tweaks in contain queries */
        }
        .modal .form-field + .form-field {/* add space between form fields in a modal */
            margin-top: var(--primary-radius-and-padding);
        }
        header .select-options {
            top:unset;
            left: unset;
            right: unset;
        }

        .select-options.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* Smart-flip: when JS detects insufficient room below, the dropdown drops up */
        .select-options.dropup {
            top: auto;
            bottom: calc(100% + 4px);
        }

        /* Make [data-menu] containers shrink-wrap so menus can right-align to the button */
        [data-menu] {
        position: relative;
        display: inline-block;           /* shrink to the trigger */
        width: auto;                     /* override any 100% width from form-field/flex */
        }

        /* Specific safety net for the bulk actions block if .form-field forces full width */
        #bulkActionsDropdown.form-field {
        display: inline-block;
        width: auto;
        }

        /* Keep the menu rules you already added */
        [data-menu] .select-options {
        position: absolute;
        inset-inline-end: 0;                 /* right-align to container (now same as button) */
        inset-block-start: calc(100% + 4px); /* below the button */
        width: max-content;
        min-width: 100%;
        max-width: min(90vw, 32rem);
        max-height: min(60vh, 28rem);
        overflow: auto;
        z-index: 500;
        transform-origin: top right;
        }

        /* Optional compact gap for your compact variant */
        [data-menu].compact .select-options {
        inset-block-start: calc(100% + 2px);
        }

        /* If you ever add .dropup, this flips vertically but keeps right edge aligned */
        [data-menu] .select-options.dropup {
        inset-block-start: auto;
        inset-block-end: calc(100% + 4px);
        transform-origin: bottom right;
        }

        .select-option {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: background 0.15s ease;
            border-bottom: 1px solid oklch(from var(--color-khaki) l c h / 20%);
        }
            .compact .select-option {
                padding: 0.55rem .5rem;
            }
            .ultra-compact .select-option {
                padding: 0.55rem .5rem;
                font-size: var(--font-size-small);
            }

        .select-option:last-child {
            border-bottom: none;
        }

        .select-option.selected,
        .multi-select-option.selected {
            background: oklch(from var(--color-khaki) l c h / 75%);
            font-weight: bold;
        }

        /* Multi-Select */
        .multi-select-trigger {
            min-height: 3rem;
            max-height: 3rem;
            padding: 0.5rem 2.5rem 0.5rem 0.5rem;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            overflow: hidden;
            gap: 0.5rem;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            width: 100%;
        }

        .selected-tag {
            display: inline-flex;
            flex-shrink: 0;
            margin-right: calc(var(--primary-radius-and-padding / 4));
            align-items: center;
            flex: 0 0 auto;
            max-width: fit-content;
        }
        .selected-tag small {
            max-width: 10rem;
            display: block;
            overflow: hidden;
            font-weight: 500;
            line-height: 1.5rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0.15rem 0.5rem 0.15rem 0.75rem;
            border-radius: var(--primary-radius-and-padding) 0 0 var(--primary-radius-and-padding);
        }

        .selected-tag button,
        .selected-tag a.tag-button {
            padding: 0.25rem .5rem 0.05rem 0.3rem;
            border-top:none;
            border-left: 1px solid var(--color-none);
            border-right: none;
            border-bottom: none;
            border: 1px solid var(--color-none);
            cursor: pointer;
            font-size: 1em;
            line-height: 1.5rem;
            transition: all 0.2s ease;
            border-radius: 0 var(--primary-radius-and-padding) var(--primary-radius-and-padding) 0;
        }
        .selected-tag small,
        .selected-tag button,
        .tag-count {
            color: inherit;
            background: oklch(from var(--color-dark-blue) l c h / 10%);
        }
        .selected-tag:has(.tag-button) small,
        .selected-tag a.tag-button {
            color: light-dark(oklch(from var(--color-chocolate) calc(l - .1) c h),oklch(from var(--color-chocolate) calc(l + .1) c h));
            background: oklch(from var(--color-chocolate) l c h / 20%);
        }
        .tag-count {
            flex-shrink: 0;
            font-size: var(--font-size-small);
            font-weight: 500;
            padding: 0.15rem 0.5rem;
            border-radius: var(--primary-radius-and-padding);
            margin-right: 0.25rem;
        }

        .multi-select-option {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: background 0.15s ease;
            border-bottom: 1px solid oklch(from var(--color-khaki) l c h / 20%);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .multi-select-option:last-child {
            border-bottom: none;
        }

        .multi-select-checkbox {
            width: 1.25rem;
            height: 1.25rem;
            border: var(--border-inputs-base);
            border-radius: var(--radius-secondary);
            position: relative;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }
        .multi-select-option.selected .multi-select-checkbox {
            background: var(--color-blue);
            border-color: var(--color-blue);
        }

        .multi-select-option.selected .multi-select-checkbox::after {
            content: '';
            position: absolute;
            left: 0.25rem;
            top: 1px;
            width: 6px;
            height: 10px;
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .placeholder-text {
            color: oklch(from var(--color-dark-blue) l c h / 50%);
            font-size: var(--font-size-primary);
        }

        /* Fallback select */
        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            padding-right: 2.5rem;
        }

        /* Typeahead styles */
        .typeahead-container {
            position: relative;
            width: 100%;
        }

        .project-typeahead-wrapper .search-icon {
            position: absolute;
            font-size: 1.5rem;
            color: var(--color-row-headers);
            pointer-events: none;
        }
        
        .typeahead-container .form-input {
            width: 100%;
        }
        
        .typeahead-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            min-width: 17.5rem;
            max-height: 20.625rem;
            overflow-y: auto;
            background: var(--color-none);
            border: 1px solid oklch(from var(--color-khaki) l c h / 40%);
            border-radius: var(--radius-secondary);
            margin-top: 0.25rem;
            box-shadow: var(--shadows-multi);
            display: none;
            z-index: 100;
        }
        
        .typeahead-results.show {
            display: block;
        }

        .typeahead-results.typeahead-line-item {
            min-width: 25rem;
            right: auto;
            width: max-content;
            z-index: 1000;
        }

        .typeahead-result {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: background 0.15s ease;
            border-bottom: 1px solid oklch(from var(--color-khaki) l c h / 20%);
        }
        
        .typeahead-result:last-child {
            border-bottom: none;
        }
        
        .typeahead-result:hover,
        .typeahead-result.highlighted {
            background: oklch(from var(--color-khaki) l c h / 20%);
        }
        
        .typeahead-result strong {
            font-weight: 600;
            background-color: oklch(from var(--color-orange) l c h / 20%);
        }
        
        .select-callout {
            font-weight: 600;
            color: var(--color-blue);
        }

       /* Bulk actions dropdown */
        #bulk-actions-menu.select-options.show {width: max-content;}

        .bulk-actions-wrapper {
            display: flex;
            gap: 1rem;
            align-items: center
        }

        .dropdown-small {
            position: relative
        }

        .bulk-actions-btn {
            padding: 0.5rem 1rem;
            font-size: var(--font-size-small);
            font-weight: 600;
            border: 2px solid var(--color-blue);
            border-radius: var(--radius-secondary);
            background-color: var(--color-none);
            color: var(--color-blue);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.15s linear
        }
        .pinned-dashboard .bulk-actions-btn {padding: 0.35rem .75rem;}
        .bulk-actions-btn.primary {
            color: var(--color-none);
            background-color: var(--color-blue);
        }

        .bulk-actions-btn i {
            top:1px
        }

        .bulk-actions-btn:hover {
            color: var(--color-full);
            background-color: oklch(from var(--color-blue) l c h / 30%)
        }

        /* Disabled state styling */
        .dropdown-small.disabled .bulk-actions-btn {
            opacity: 0.6
        }

        .dropdown-small.disabled .bulk-actions-btn:hover {
            background-color: var(--color-none)
        }

        .actions-expand-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 0.27rem;
            width: max-content;
            max-width: 25rem;
            background-color: var(--color-none);
            border: 1px solid oklch(from var(--color-khaki) l c h / 35%);
            border-radius: var(--radius-secondary);
            box-shadow: var(--shadow-small-base) var(--color-shadows), var(--shadow-large-base) var(--color-shadows);
            display: none;
            z-index: 11
        }

        .dropdown-small.open .actions-expand-menu {
            display: block
        }

        .actions-expand-menu button:first-child {
            border-top-left-radius: var(--radius-secondary);
            border-top-right-radius: var(--radius-secondary);
        }
        .actions-expand-menu button:last-child {
            border-bottom-left-radius: var(--radius-secondary);
            border-bottom-right-radius: var(--radius-secondary);
        }

        .bulk-action-item {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: all 0.15s linear;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            font-size: var(--font-size-primary);
            color: var(--color-dark-blue)
        }
            .compact .bulk-action-item {
                font-size: var(--font-size-small);
                padding: 0.5rem .75rem;}

        .bulk-action-item:hover {
            background-color: oklch(from var(--color-teal) l c h / 15%)
        }

        .bulk-action-item.regressive {
            color: var(--color-red)
        }

        .bulk-action-item.notice,
        .bulk-action-item.take-action {
            color: var(--color-orange)
        }

        .bulk-action-item.advance {
            color: var(--color-green)
        }

        .bulk-action-item i {
            width: 1.25rem
        }
            .compact .bulk-action-item i {width: .75rem; font-size: var(--font-size-primary);}

        /* Checkbox & Radio */
        .checkbox-wrapper,
        .radio-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: var(--radius-secondary);
            transition: background 0.2s ease;
        }
        .checkbox-wrapper:not(:has(.sr-only)),/* do not highlight screen-reader only labels */
        .radio-wrapper:not(:has(.sr-only)){
            background: var(--color-faded-teal);
        }
        .line-item-list .checkbox-wrapper,/* do not highlight labels inside of compact data tables */
        .line-item-list .radio-wrapper{
            background: transparent;
        }
        .checkbox-wrapper.system-required::after,
        .radio-wrapper.system-required::after {
            content: '(required)';
            font-weight: 600;
        }

        .checkbox-input,
        .radio-input {
            width: 1.25rem;
            height: 1.25rem;
            margin: 0;
            cursor: pointer;
            position: relative;
            opacity: 0;
        }

        .checkbox-custom,
        .radio-custom {
            position: absolute;
            width: 1.25rem;
            height: 1.25rem;
            border: var(--border-inputs-base);
            background: var(--color-none);
            transition: all 0.2s ease;
            pointer-events: none;
        }

        .checkbox-custom {
            border-radius: .4rem;
        }

        .radio-custom {
            border-radius: var(--radius-rounded);
        }

        .checkbox-input:checked + .checkbox-custom,
        .radio-input:checked + .radio-custom {
            background: var(--color-blue);
            border-color: var(--color-blue);
        }

        .checkbox-wrapper:has(input[type="checkbox"]:checked),
        .radio-wrapper:has(input[type="radio"]:checked) {
            border-color: var(--color-teal) ;
        }

        .checkbox-custom::after {
            content: '';
            position: absolute;
            left: 0.25rem;
            top: -1px;
            width: 0.375rem;
            height: 10px;
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) scale(0);
            transition: transform 0.2s ease;
        }

        .checkbox-input:checked + .checkbox-custom::after {
            transform: rotate(45deg) scale(1);
        }

        .radio-custom::after {
            content: '';
            position: absolute;
            left: 0.25rem;
            top: 0.25rem;
            width: 0.5rem;
            height: 0.5rem;
            background: var(--color-white);
            border-radius: var(--radius-rounded);
            transform: scale(0);
            transition: transform 0.2s ease;
        }

        .radio-input:checked + .radio-custom::after {
            transform: scale(1);
        }

        /* Toggle Switch */
        .toggle-wrapper {
            width: fit-content;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .toggle-input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }

        .toggle-slider {
            position: relative;
            min-width: 3rem;
            height: 1.85rem;
            background: var(--color-DB-fifteen);
            border-radius: var(--primary-radius-and-padding);
            cursor: pointer;
            transition: all 0.3s ease;
            border:  2px solid var(--color-khaki);
        }
        .compact .toggle-slider {
            min-width: 2.4rem;
            height: 1.3rem;
            border:  1px solid var(--color-khaki);
        }

        .toggle-slider::before {
            content: '';
            position: absolute;
            height: 1.2rem;
            width: 1.2rem;
            left: 0.1rem;
            bottom: 0.1rem;
            background: var(--color-none);
            border-radius: var(--radius-rounded);
            transition: all 0.3s ease;
            box-shadow: var(--shadow-small-base) var(--color-shadows);
            border: 1px solid oklch(from var(--color-dark-blue) l c h / 75%);
        }
        .compact .toggle-slider::before {
            height: .9rem;
            width: .9rem;
            left: .1rem;
            bottom: 0.09rem;
        }

        .toggle-input:checked + .toggle-slider {
            background: var(--color-green);
            border: 1px solid var(--color-green);
        }

        .toggle-input:checked + .toggle-slider::before {
            transform: translateX(1.3rem);
            bottom: 0.1875rem;
        }
        .compact .toggle-input:checked + .toggle-slider::before {
            transform: translateX(1rem);
            bottom: 0.1rem;
        }

        /* Form Group */
        .form-group:has(.form-group-title) {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1.5rem;
            border-radius: var(--radius-secondary);
            border: var(--border-inputs-base);
        }
        .error .form-group:has(.form-group-title) {
            border-color: var(--color-red);
        }
        .form-group {
            padding: 1.5rem 0 .75rem 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .form-group-title {
            font-weight: 600;
            color: var(--color-dark-blue);
            margin-bottom: 0.5rem;
        }

        /* Help Text */
        .help-text {
            font-size: var(--font-size-small);
            color: var(--color-row-headers);
            margin-bottom: 0.25rem;
            display: block;
            transition: all 0.2s ease;
        }

        .error-text::before,/* exclude individual radio buttons */
        .error label:not(.radio-wrapper):not(.checkbox-wrapper)::before {
            content: "Error: ";
            font-weight: 600;
        }
        .error label:not(.radio-wrapper):not(.checkbox-wrapper),
        .error-text {
            color: var(--color-red);
            font-weight: 600;
        }
        /* Error-only message (no default helper text) */
        .error-text {
            font-size: var(--font-size-small);
            color: var(--color-red);
            font-weight: 600;
            margin-bottom: 0.25rem;
            display: none;
        }


        /* Show error message when field has error */
        .form-field.error .error-text {
            display: block;
        }

        /* Error State for Help Text */
        .form-field.error .help-text {
            color: var(--color-red);
            font-weight: 600;
        }

        .form-field.error .help-text::before {
            content: "Error: ";
            font-weight: 600;
        }

        /* Success State for Help Text */
        .form-field.success .help-text {
            color: var(--color-green);
            font-weight: 500;
        }

        /* Error State */
        .form-field.error .form-input,
        .form-field.error .form-select,
        .form-field.error .select-trigger {
            border-color: var(--color-red);
        }

        /* Success State */
        .form-field.success .form-input,
        .form-field.success .form-select,
        .form-field.success .select-trigger {
            border-color: var(--color-green);
        }

        /* Loading State */
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .loading {
            animation: pulse 1.5s ease-in-out infinite;
            pointer-events: none;
        }

        /* Button group */
        .btn-group {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        /* Normalize & apply focus to all custom fields */
        .form-input:focus,
        .select-trigger:focus,
        .checkbox-input:focus + .checkbox-custom,
        .radio-input:focus + .radio-custom,
        .toggle-input:focus + .toggle-slider {
            outline: 3px solid var(--color-teal);
            outline-offset: 3px;
        }

        /* user menu begin */
        /* Hide the checkbox */
        .menu-toggle-helper {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        
        /* Style the label as the trigger button */
        .user-menu-label {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            /* Inherit action-btn styles */
        }

        button.select-option-link {/* make sure user menu buttons match links; we will need a blend of links & buttons for ADA */
            width: 100%;
            text-align: left;
        }
        
        /* Use existing select-trigger open state when checkbox is checked */
        .menu-toggle-helper:checked ~ .user-menu-label .select-trigger {
            border-color: var(--color-blue);
            box-shadow: 0 0 0 3px oklch(from var(--color-blue) l c h / 20%);
        }
        
        /* Rotate arrow when open */
        .menu-toggle-helper:checked ~ .user-menu-label .user-options-dd-btn {
            transform: rotate(180deg);
        }
        
        /* Show dropdown when checkbox is checked */
        .menu-toggle-helper:checked ~ .select-options {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        
        .user-options-container .select-options {
            margin-top: 0.25rem;
            right: var(--primary-radius-and-padding);
            left: auto;
            width: max-content;
            max-width: 25rem;
            z-index: 101;
        }
        
        /* Menu-specific styles */
        .user-name-section-label {
            padding: 0.5rem 1rem 0.25rem;
            font-size: var(--font-size-small);
            color: var(--color-row-headers);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border: none;
        }
        
        /* Make links look like select options */
        .select-option-link {
            display: block;
            color: var(--color-dark-blue);
            text-decoration: none;
            cursor: pointer;
            transition: background 0.15s ease;
            border-bottom: 1px solid oklch(from var(--color-khaki) l c h / 20%);
        }
        .select-option-link,
        .select-options small {
            padding: 0.75rem 1rem;
        }
        
        .select-option-link:last-child {
            border-bottom: none;
        }
        
        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .select-option-link:hover {
                background: oklch(from var(--color-khaki) l c h / 40%);
            }
        }
        
        .select-option-link:focus {
            outline: 2px solid var(--color-blue);
            outline-offset: -2px;
            background: oklch(from var(--color-khaki) l c h / 40%);
        }
        
        /* Icon support */
        .menu-icon {
            display: inline-block;
            width: 1.25rem;
            margin-right: 0.5rem;
            opacity: 0.7;
            vertical-align: middle;
            color: var(--color-dark-blue);
        }
        .disabled,
        .form-input:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .disabled-preview,
        .disabled-preview .form-input:disabled {
            opacity: 0.85;
            cursor: not-allowed;
        }

        .disabled input,
        .disabled select,
        .disabled textarea {
            pointer-events: none;
        }

        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            input[type="checkbox"]:not(:disabled):hover,
            input[type="radio"]:not(:disabled):hover,
            input[type="textarea"]:not(:disabled):hover,
            .form-input:not(:disabled):hover,
            .select-trigger:hover,
            .toggle-wrapper:hover .toggle-slider,
            .checkbox-custom:hover,
            .radio-custom:hover,
            .checkbox-wrapper:not(.disabled):hover .checkbox-custom,
            .checkbox-wrapper:not(.disabled):hover .radio-custom,
            .select-dd:hover,
            .text-input:hover,
            .text-textarea:hover {
                border-color: var(--color-orange);
                box-shadow: var(--shadows-multi)
            }
            .select-trigger:hover .select-arrow {
            color: oklch(from var(--color-orange) l c h / 100%);
            }
            .toggle-wrapper:hover .toggle-slider {background: var(--color-none);}
          
            .select-option:hover,
            .select-option.focused,
            .checkbox-wrapper:not(.disabled):not(:has(.sr-only)):hover,/* do not highlight screen-reader only or disabled labels */
            .radio-wrapper:not(.disabled):not(:has(.sr-only)):hover{
                background: oklch(from var(--color-khaki) l c h / 40%);
            }
            .selected-tag button:hover,
            .selected-tag a.tag-button:hover {
                color: light-dark(oklch(from var(--color-blue) calc(l - .15) c h), oklch(from var(--color-blue) calc(l + .15) c h));
                background: oklch(from var(--color-blue) l c h / 15%);
            }
            .selected-tag button:hover {
            color: light-dark(oklch(from var(--color-red) calc(l - .15) c h), oklch(from var(--color-red) calc(l + .15) c h));
            background: oklch(from var(--color-red) l c h / 15%);
            }
            .selected-tag.show-all button:hover {
            color: var(--color-none);
            background: oklch(from var(--color-blue) l c h / 80%);
            }
            .multi-select-option:hover,
            .multi-select-option.focused {
                background: oklch(from var(--color-blue) l c h / 10%);
            }
            .toggle-wrapper:hover .toggle-slider::before {
                background: var(--color-orange);
                border-color: var(--color-orange);
            }
            .toggle-input:checked:hover + .toggle-slider {
                background: var(--color-orange);
                border: 1px solid var(--color-orange);
            }
            .toggle-input:checked:hover + .toggle-slider::before {
                background: var(--color-none);
            }

        }



/* Section Grids */
        .grid-two-col-even-repeat {
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: var(--primary-radius-and-padding);
        }
        .grid-two-col-even-repeat > .card:only-child,
        .grid-two-col-even-repeat > .card:nth-last-child(1):nth-child(odd) {
            grid-column: 1 / -1;
        }
        .grid-two-col-wide-left {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: var(--primary-radius-and-padding);
            margin-bottom: var(--primary-radius-and-padding);
        }

        .grid-two-col-wide-right {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: var(--primary-radius-and-padding);
        }

        .grid-three-col-even-repeat {
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: var(--primary-radius-and-padding);
        }

        
        /* Page Header Styles */
        .actions-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1rem 1.25rem 2rem
        }

        .logo {
            display: flex;
            align-items: center;
            margin-right: 1rem
        }

        .logo-icon {
            background-color: var(--color-blue);
            color: var(--color-none);
            padding: 0.5rem;
            border-radius: var(--primary-radius-and-padding)
        }

        .logo-text {
            margin-left: 0.5rem;
            font-weight: bold;
            color: var(--color-dark-blue)
        }

        header .search-box {
            position: relative
        }

        header .search-input {
            padding: 0.5rem 1rem 0.5rem 40px;
            background-color: var(--color-faded-teal);
            border: none;
            border-radius: var(--primary-radius-and-padding);
            width: var(--sidebar-width);
            font-size: var(--font-size-primary)
        }

        header .search-icon {
            position: absolute;
            top: -2px;
            color: oklch(from var(--color-dark-blue) l c h / 55%)
        }

        .left-actions,
        .right-actions {
            display: flex;
            align-items: center
        }
        .right-actions .action-btn {
            color: var(--color-full)
        }
        .right-actions .action-btn:not(:last-child) {
            margin-right: .75rem;
        }
        
        .count {
            color: var(--color-none);
            font-size: var(--font-size-smallest);
            font-weight: bold;
            width: 1.1rem;
            height: 1.1rem;
            border-radius: var(--radius-rounded);
            display: flex;
            align-items: center;
            justify-content: center
        }

        .notification {
            margin-top: -1rem;
            margin-left: 2.1rem;
            position: absolute;
            background-color: var(--color-red);
            border: 1px solid var(--color-faded-blue)
        }
            .comments .notification {
                margin-left: var(--primary-radius-and-padding);
            }

        .notification.secondary {background-color: light-dark(var(--color-orange), oklch(from var(--color-orange) calc(l + .15) c h));}
        .has-notification-dot .notification {
            margin-top: -2.2rem;
            right: -0.6rem;
            background-color: var(--color-orange);
        }
        .has-notification-dot .notification #filter-count {font-weight: bolder;}

        .update-entry .notification {
            background-color: var(--color-chocolate);
            color: var(--color-none);
            border-color: var(--color-none);
        }

/* ========================================
PINNED DASHBOARD STYLES
======================================== */
        .pinned-dashboard {
            position: fixed;
            top: 0;
            left: var(--sidebar-width);
            width: calc(100vw - var(--sidebar-width));
            background: oklch(from var(--color-DB-fifteen) l c h / 55%);
            /* Reduced blur for better performance */
            backdrop-filter: blur(1rem) saturate(150%);
            -webkit-backdrop-filter: blur(1rem) saturate(150%);
            border-bottom: 1px solid oklch(from var(--color-khaki) l c h / 25%);
            box-shadow: 
                0 4px 20px light-dark(oklch(from var(--color-dark-blue) l c h / 15%), oklch(from var(--color-black) l c h / 50%)),
                inset 0 1px 0 oklch(from var(--color-none) l c h / 50%);
            z-index: 50;
            transform: translateY(-100%);
            opacity: 0;
            visibility: hidden;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease,
                        visibility 0.3s ease;
        }
        .sidebar.collapsed ~ .pinned-dashboard {
            left: var(--sidebar-width-collapsed);
            width: calc(100vw - var(--sidebar-width-collapsed))
        }
        /* Sidebar collapsed + panel active */
        body.panel-active .sidebar.collapsed ~ .pinned-dashboard {
            width: calc(100vw - var(--sidebar-width-collapsed) - var(--right-panel-width));
        }

        /* Add a gradient fade at the bottom */
        .pinned-dashboard::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 0;
            right: 0;
            height: 20px;
            background: linear-gradient(
                to bottom,
                oklch(from var(--color-none) l c h / 30%) 0%,
                transparent 100%
            );
            pointer-events: none;
        }

        .pinned-dashboard.visible {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        /* Glass overlay gradient for better effect */
        .pinned-dashboard::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(
                    circle at 20% 80%,
                    oklch(from var(--color-orange) l c h / 3%) 0%,
                    transparent 25%
                ),
                radial-gradient(
                    circle at 80% 20%,
                    oklch(from var(--color-teal) l c h / 3%) 0%,
                    transparent 25%
                ),
                radial-gradient(
                    circle at 80% 80%,
                    oklch(from var(--color-blue) l c h / 3%) 0%,
                    transparent 25%
                );
            pointer-events: none;
            z-index: -1;
        }

        /* Light reflection on top edge */
        .pinned-dashboard::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                oklch(from var(--color-none) l c h / 70%) 50%,
                transparent 100%
            );
            pointer-events: none;
            z-index: 2;
        }

        /* Inner container for proper spacing with sidebar */
        .pinned-dashboard-inner {
            transition: margin-left 0.3s ease;
        }

        .sidebar.collapsed ~ .header ~ .main-container .pinned-dashboard .pinned-dashboard-inner {
            margin-left: var(--sidebar-width-collapsed);
        }

        /* Dashboard content layout */
        .pinned-header {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            position: relative;
            z-index: 1;
        }

        /* Top row with search and KPIs */
        .pinned-top-row {
            display: flex;
            gap: 1rem;
            justify-content: space-between;
        }

        /* Compact search box */
        .pinned-name {
            flex: 0 0 auto;
            margin-left: var(--primary-radius-and-padding);
        }
        .pinned-name h4 {
            margin-bottom: 0;
            margin-top: .5rem;
        }
        .pinned-name small {
            color: oklch(from var(--color-dark-blue) l c h / 70%)}

        /* KPI mini cards */
        .pinned-kpis {
            display: flex;
            gap: 1rem;
            flex: 1;
            justify-content: flex-end;
            padding: 0 0.5rem;
        }

        .pinned-kpi {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.25rem;
            padding: 0.5rem 1rem;
            background: oklch(from var(--color-none) l c h / 40%);
            backdrop-filter: blur(1rem) saturate(150%);
            -webkit-backdrop-filter: blur(1rem) saturate(150%);
            border-radius: var(--radius-secondary);
            border: 1px solid oklch(from var(--color-none) l c h / 60%);
            box-shadow: var(--shadow-large-base) var(--color-shadows);
            min-width: max-content;
            transition: all 0.15s linear;
        }

        .pinned-kpi-label {
            font-size: var(--font-size-smallest);
            line-height: 1.2;
            color: var(--color-row-headers);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.025em;
            text-shadow: 0 1px 0 oklch(from var(--color-none) l c h / 30%);
        }

        .pinned-kpi-value {
            font-size: var(--font-size-larger);
            font-weight: bold;
            color: var(--color-dark-blue);
            text-shadow: 0 1px 0 oklch(from var(--color-none) l c h / 50%);
        }

        /* tertiary-navigation in pinned header */
        .pinned-subnav {
            display: flex;
            justify-content: space-between;
            font-weight: 600;
            background: linear-gradient(
                to bottom,
                oklch(from var(--color-none) l c h / 5%) 0%,
                transparent 100%
            );
        }
        .pinned-subnav .action-btn {
            margin-left: var(--primary-radius-and-padding);
        margin-right: calc(var(--primary-radius-and-padding) / 4);}

        .pinned-subnav nav {
            border-left: 1px solid var(--color-DB-fifteen);
        }
        .pinned-subnav .tertiary-nav-item.active {
            font-weight: 800;
            text-underline-offset: calc(1rem - 5px);
        }

        @media (prefers-reduced-motion: no-preference) {/* be a good human and add fancy motion stuff to a query */
            .pinned-dashboard.visible {
                animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            }

            .pinned-dashboard.visible .pinned-kpi {
                animation: fadeInScale 0.4s ease-out backwards;
            }

            .pinned-dashboard.visible .pinned-kpi:nth-child(1) { animation-delay: 0.1s; }
            .pinned-dashboard.visible .pinned-kpi:nth-child(2) { animation-delay: 0.15s; }
            .pinned-dashboard.visible .pinned-kpi:nth-child(3) { animation-delay: 0.2s; }
            .pinned-dashboard.visible .pinned-kpi:nth-child(4) { animation-delay: 0.25s; }

            @keyframes slideDown {
                from {
                    transform: translateY(-100%);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            @keyframes fadeInScale {
                from {
                    opacity: 0;
                    transform: scale(0.95);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        }

        /* Fallback for browsers without backdrop-filter support */
        @supports not (backdrop-filter: blur(1px)) {
            .pinned-dashboard {
                background: oklch(from var(--color-DB-fifteen) l c h / 80%);
                box-shadow: 
                    0 0.5rem 2rem oklch(from var(--color-dark-blue) l c h / 20%);
            }
            
            .pinned-kpi {
                background: oklch(from var(--color-none) l c h / 92%);
                border: 1px solid oklch(from var(--color-khaki) l c h / 30%);
            }
            
        }

        /* Pinned dashboard responsiveness is based on viewport, not container */
        @media (max-width: 1000px) {
            .pinned-top-row {
                flex-wrap: wrap;
            }

            .pinned-name {
                flex: 1 1 100%;
                min-width: 0;
                margin-top: 0.25rem;
            }
            .pinned-kpis {
                padding-left: var(--primary-radius-and-padding);
                justify-content: flex-start;
            }

            .pinned-kpi {
                padding: 0.375rem 0.75rem;
                flex-direction: column
            }
        }

/* ========================================
DRAG & DROP ZONE STYLES
======================================== */
        .upload-zone {
            border-radius: var(--primary-radius-and-padding);
            padding: 3rem;
            text-align: center;
            transition: all 0.15s linear;
            cursor: pointer;
        }            
        .modal .upload-zone,
        .upload-zone.compact {
            padding: 1.5rem;
        }
        .upload-zone,
        .get-started-line-item {
            background-color: var(--color-faded-teal);
            border: 2px dashed oklch(from var(--color-khaki) l c h / 35%)
        }
        .upload-zone:active {
            transform: translateY(6px);
        }
        
        .upload-zone.drag-over,
        .upload-zone.drag-active {
            border-color: var(--color-blue);
            background-color: oklch(from var(--color-blue) l c h / 10%);
            box-shadow: var(--shadow-large-base) var(--color-shadows)
        }

        .upload-zone.error {border: 2px solid var(--color-red)}
        .upload-zone.error p,
        .upload-zone.error i {color: var(--color-red);}
        
        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .upload-zone:hover {
                border-color: var(--color-blue);
                background-color: oklch(from var(--color-blue) l c h / 10%);
                box-shadow: var(--shadow-large-base) var(--color-shadows)
            }
        }
        
        .analysis-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            background-color: var(--color-faded-teal);
            border-radius: var(--radius-secondary);
            margin-bottom: 0.5rem;
        }
        
        .analysis-item i {
            color: var(--color-green);
            margin-right: 1rem;
        }

/* ========================================
RIGHT PANEL STYLES || ALERTS, FILTERS, CONTACTS
======================================== */

        .right-panel {
            border-top-left-radius: var(--primary-radius-and-padding);
            border-bottom-left-radius: var(--primary-radius-and-padding);
            z-index: 1001;
        }

        /* Backdrop */
        .right-panel-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: light-dark(oklch(from var(--color-dark-blue) l c h / 50%), oklch(from var(--color-none) l c h / 20%));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 998;
        }

        .right-panel-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .reminder-panel-icon {
            display: flex;
            align-items: center;
            width: auto;
            justify-content: left;
            padding-bottom: var(--primary-radius-and-padding-half)
        }
        .reminder-panel-icon i {
            padding-right: calc(var(--primary-radius-and-padding) / 4)}

        /* DESKTOP: Fixed panel on right (1200px+) */
        @media (min-width: 1465px) {
            body.panel-active main,
            body.panel-active header > div,
            body.panel-active header > nav,
            body.panel-active .floating-actions,
            body.panel-active footer nav,
            body.panel-active .action-btn.back-to-top,
            body.panel-active .compile {
                margin-right: var(--right-panel-width);
                transition: margin-right 0.3s ease;
            }
            body.panel-active .pinned-dashboard {
                width: calc(100vw - var(--sidebar-width) - var(--right-panel-width));
            }

            .right-panel-backdrop {
                display: none;
            }

            .right-panel {
                position: fixed;
                top: 0;
                right: 0;
                width: var(--right-panel-width);
                height: 100vh;
                background: var(--color-none);
                border-left: 1px solid var(--color-DB-fifteen);
                transform: translateX(100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1001;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .right-panel.active {
                transform: translateX(0);
            }
        }

        /* TABLET/LAPTOP: Overlay panel (801px-1299px) */
        @media (min-width: 768px) and (max-width: 1464px) {
            .right-panel {
                position: fixed;
                top: 0;
                right: 0;
                width: var(--right-panel-width);
                height: 100vh;
                background-color: var(--color-none);
                transform: translateX(100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 999;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .right-panel.active {
                transform: translateX(0);
            }
        }

        /* MOBILE: Bottom sheet (<800px) */
        @media (max-width: 800px) {
            .right-panel {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                height: 90vh;
                max-height: 100vh;
                background: var(--color-none);
                border-radius: var(--primary-radius-and-padding) var(--primary-radius-and-padding) 0 0;
                box-shadow: 0 -4px 24px var(--color-shadows);
                transform: translateY(100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 999;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .right-panel.active {
                transform: translateY(0);
            }

            /* Swipe handle */
            .right-panel::before {
                content: '';
                position: absolute;
                top: 0.75rem;
                left: 50%;
                transform: translateX(-50%);
                width: 3rem;
                height: 0.25rem;
                background: var(--color-DB-fifteen);
                border-radius: var(--radius-rounded);
            }
            .right-panel-header {
                padding-top: 2.5rem;
            }
        }

        /* Panel Header */
        .right-panel-header {
            padding: var(--primary-radius-and-padding-half);
            border-bottom: var(--border-divider);
            box-shadow: var(--shadow-small-base) var(--color-shadows);
            background: var(--color-faded-teal);
            flex-shrink: 0;
        }
        .right-panel-header .section-header {margin-bottom: 0;}

        .right-panel-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .alert-count-badge {
            background: var(--color-red);
            color: var(--color-none);
            font-size: var(--font-size-smallest);
            padding: 0.125rem 0.5rem;
            border-radius: var(--radius-rounded);
            font-weight: 600;
        }

        /* Alert Filters */
        .alert-filters {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            padding: 0.25rem 0;
        }
        #right-companies-panel .alert-filters {padding-top: var(--primary-radius-and-padding-half)}

        .filter-chip {
            padding: calc(var(--primary-radius-and-padding) / 4) var(--primary-radius-and-padding-half);
            font-size: var(--font-size-small);
            border: 1px solid var(--color-DB-fifteen);
            background: var(--color-none);
            border-radius: var(--primary-radius-and-padding);
            cursor: pointer;
            transition: all 0.15s linear;
            white-space: nowrap;
            font-family: inherit;
            color: var(--color-dark-blue);
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .filter-chip.active {
            background: var(--color-blue);
            color: var(--color-none);
            border-color: var(--color-blue);
        }

        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .filter-chip:hover:not(.active) {
                background: var(--color-faded-teal);
                border-color: var(--color-khaki);
            }
        }

        .filter-chip:focus {
            outline: 3px solid var(--color-teal);
            outline-offset: 2px;
        }

        .filter-chip .count {
            color: inherit;
        }

        /* Panel Body */
        .right-panel-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: var(--primary-radius-and-padding-half);
            min-height: 0;
            overscroll-behavior: contain;
            background-color: oklch(from var(--color-none) l c h / 50%);
        }

        .right-panel-body::-webkit-scrollbar {
            width: 6px;
        }

        .right-panel-body::-webkit-scrollbar-thumb {
            background: oklch(from var(--color-khaki) l c h / 40%);
            border-radius: 3px;
        }

        /* Loading Skeleton */
        .alerts-skeleton {
            padding: 0;
        }

        .skeleton-item {
            display: flex;
            gap: 0.75rem;
            padding: 1rem;
            margin-bottom: 0.75rem;
            background: var(--color-faded-teal);
            border-radius: var(--radius-secondary);
            animation: skeleton-pulse 1.5s ease-in-out infinite;
        }

        .skeleton-icon {
            width: 2.5rem;
            height: 2.5rem;
            background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
            background-size: 200% 100%;
            border-radius: var(--radius-secondary);
        }

        .skeleton-content {
            flex: 1;
        }

        .skeleton-title,
        .skeleton-text,
        .skeleton-meta {
            background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
            background-size: 200% 100%;
            border-radius: var(--radius-secondary);
            margin-bottom: 0.5rem;
        }

        .skeleton-title {
            height: 0.875rem;
            width: 60%;
        }

        .skeleton-text {
            height: 0.75rem;
            width: 90%;
        }

        .skeleton-meta {
            height: 0.625rem;
            width: 40%;
            margin-bottom: 0;
        }

        /* Alert Groups */
        .alert-group {
            margin-bottom: 2rem;
        }

        .alert-group:last-child {
            margin-bottom: 0;
        }

        .alert-group-header {
            font-size: var(--font-size-small);
            font-weight: 600;
            text-transform: uppercase;
            color: var(--color-row-headers);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .alert-group-header .urgency-indicator {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: var(--radius-rounded);
            background: currentColor;
        }

        .alert-group-header.critical,
        .reminder-panel-icon.critical { color: var(--color-red); }
        .alert-group-header.warning,
        .reminder-panel-icon.warning { color: var(--color-orange); }
        .alert-group-header.notice,
        .reminder-panel-icon.notice { color: var(--color-khaki); }
        .alert-group-header.info,
        .reminder-panel-icon.info { color: var(--color-blue); }
        .alert-group-header.success,
        .reminder-panel-icon.success { color: var(--color-green); }

        /* Alert Items */
        .alert-item {
            background: var(--color-none);
            border: 1px solid oklch(from var(--color-khaki) l c h / 30%);
            box-shadow: 1px 0 3px var(--color-shadows);
            border-radius: var(--radius-secondary);
            padding: 1rem;
            margin-bottom: 0.75rem;
            transition: all 0.15s linear;
            position: relative;
        }

        .alert-item.unread,
        tr:has(.status-new) td,
        tr:has(.notViewed) td {
            background: var(--color-faded-teal);
        }
        .simple-preview-table tr:has(.notViewed) td {
            background: transparent;
        }
        /* not sure I liked how this looked
        .alert-item.unread.critical {
            border-color: var(--color-red);
        }
        .alert-item.unread.warning {
            border-color: light-dark(oklch(from var(--color-orange) calc(l - .075) c h), oklch(from var(--color-orange) calc(l + .15) c h))
        } */

        .alert-item.unread::before,
        tr:has(.status-new) td:first-child::before,
        tr:has(.status.duplicate) td:first-child::before,
        tr:has(.line-item-incomplete) td:first-child::before,
        tr:has(.status.problematic) td:first-child::before,
        tr:has(.status.needs-review) td:first-child::before,
        tr:has(.update-entry) td:first-child::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0.375rem;
            background: var(--color-blue);
            border-radius: var(--radius-secondary) 0 0 var(--radius-secondary);
        }

        .alert-item.notice::before,
        .alert-item.unread.notics::before {
            background: var(--color-khaki)
        }
        .alert-item.critical::before,
        .alert-item.unread.critical::before {
            background: var(--color-red)
        }
        .alert-item.warning::before,
        .alert-item.unread.warning::before {
            background: light-dark(oklch(from var(--color-orange) calc(l - .075) c h), oklch(from var(--color-orange) calc(l + .15) c h))
        }

        /* Success alert styling */
        .alert-item[data-priority="success"] {
            background: oklch(from var(--color-green) l c h / 10%);
            border-color: var(--color-green);
        }

        .alert-item[data-priority="success"].unread {
            background: oklch(from var(--color-green) l c h / 15%);
            border-color: var(--color-green);
        }

        .alert-item[data-priority="success"].unread::before {
            background: var(--color-green);
        }

        .alert-content {
            /*  display: flex; */
            gap: 0.75rem;
        }

        .alert-details {
            flex: 1;
            min-width: 0;
        }

        .alert-title {
            font-weight: 600;
            font-size: var(--font-size-small);
            color: var(--color-dark-blue);
        }
        .truncate-1-line {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;}
        .truncate-2-lines {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;}

        .alert-description {
            font-size: var(--font-size-small);
            color: var(--color-dark-blue);
            margin-bottom: 0.5rem;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .alert-meta,
        .alert-due {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: var(--font-size-smallest);
            flex-wrap: wrap;
            font-weight: 600;
            color: oklch(from var(--color-dark-blue) l c h / 70%)
        }
        .alert-due {
            justify-content: space-between;
            color: var(--color-dark-blue)
        }

        .alert-meta span:not(:last-child):not(:nth-last-child(2))::after {
            content: '•';
            margin-left: 0.5rem;
            opacity: 0.5;
        }

        .alert-item.critical .alert-due,
        .alert-item.critical .icon {color: var(--color-red)}
        .alert-item.warning .alert-due,
        .alert-item.warning .icon {color: light-dark(oklch(from var(--color-orange) calc(l - .075) c h), oklch(from var(--color-orange) calc(l + .15) c h))}

        /* Alert Actions */
        .alert-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
            flex-wrap: wrap;
        }

        .alert-action-btn {
            padding: calc(var(--primary-radius-and-padding) / 4) var(--primary-radius-and-padding-half);
            font-size: var(--font-size-small);
            border: 1px solid oklch(from var(--color-blue) l c h / 70%);
            background: var(--color-none);
            border-radius: var(--radius-secondary);
            cursor: pointer;
            transition: all 0.15s linear;
            color: var(--color-dark-blue);
            font-weight: 500;
            min-height: 44px;
        }

        .alert-action-btn.primary {
            background: var(--color-blue);
            color: var(--color-none);
            border-color: var(--color-blue);
        }
        .alert-action-btn.secondary {
            background: none;
            border: 1px solid transparent;
        }

        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .alert-action-btn:hover {
                transform: translateY(-1px);
                box-shadow: var(--shadow-small-base) var(--color-shadows);
                border: 1px solid var(--color-blue);
                text-decoration: underline;
                background: oklch(from var(--color-blue) l c h / 20%);
                color: var(--color-dark-blue);
            }


        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--color-row-headers);
        }

        .empty-state-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* Quick Actions Footer */
        .right-panel-footer {
            padding: var(--primary-radius-and-padding-half);
            border-top: var(--border-divider);
            background: var(--color-none);
            box-shadow: var(--shadow-small-base) var(--color-shadows);
            flex-shrink: 0;
        }

        .quick-actions {
            display: flex;
            gap: 0.5rem;
        }

        .quick-action-btn {
            position: relative;
            padding: calc(var(--primary-radius-and-padding) / 4) calc(var(--primary-radius-and-padding) / 3);
            font-size: var(--font-size-smallest);
            border: 1px solid var(--color-DB-fifteen);
            background: var(--color-none);
            border-radius: var(--radius-secondary);
            cursor: pointer;
            transition: all 0.15s linear;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-family: inherit;
            color: var(--color-dark-blue);
            font-weight: 500;
            min-height: 44px;
        }
        .quick-action-btn {min-width: 40px; min-height: 40px; border-color: oklch(from var(--color-khaki) l c h / 50%);font-size: var(--font-size-primary);}
        .quick-action-btn.show-today {font-size: var(--font-size-smallest);}
        .pagination-controls {display: flex;align-items: center;gap: .5rem;}

        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .quick-action-btn:not(:disabled):hover,
            .day-badge:hover,
            .show-more-btn:hover {
                background: var(--color-faded-teal);
                border-color: oklch(from var(--color-teal) l c h / 60%);
                border-style: solid;
                transform: translateY(-2px);
            }
            .day-badge.status-won:hover {color: var(--color-green)}
        }

        @media (prefers-reduced-motion: no-preference) {/* be a good human and add fancy motion stuff to a query */
            /* Animations */
            @keyframes skeleton-pulse {
                0% { background-position: 200% 0; }
                100% { background-position: -200% 0; }
            }
            @keyframes slideInRight {
                from {
                    opacity: 0;
                    transform: translateX(20px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            .alert-item.new-alert {
            animation: slideInRight 0.3s ease-out;
            }
        }
        /* Panel content swap animation */
        .right-panel-body.swap-in {
            animation: panelContentSwap 0.35s ease-out;
        }

        @keyframes panelContentSwap {
            0% {
                opacity: 0;
                transform: translateX(3rem);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }


        /* Project details panel */
        #project-detail-content .panel-floating-actions {
            position: absolute;
            bottom: 5.5rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            z-index: 2;
        }

        #project-detail-content .panel-floating-actions .secondary-actions {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--primary-radius-and-padding-half);
            padding: var(--primary-radius-and-padding-half);
            border-radius: var(--primary-radius-and-padding);
            background-color: var(--color-none);
            box-shadow: var(--shadows-multi);
        }

        #project-detail-content .info-row {
            grid-template-columns: 5rem 1fr;
        }

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
            .right-panel,
            .right-panel-backdrop,
            .filter-chip,
            .skeleton-item {
                transition: none !important;
                animation: none !important;
            }
            
            main.panel-active {
                transition: none !important;
            }
        }

        /* High contrast mode */
        @media (prefers-contrast: high) {
            .right-panel {
                border: 2px solid var(--color-dark-blue);
            }
            
            .alert-item {
                border-width: 2px;
            }
            
            .alert-item.unread {
                border-width: 3px;
            }
            
            .filter-chip,
            .alert-action-btn {
                border-width: 2px;
            }
        }

        /* Support for browsers without inert */
        @supports not (selector([inert])) {
            .right-panel[aria-hidden="true"] {
                display: none !important;
            }
        }

        /* Error state */
        .alerts-error {
            background: oklch(from var(--color-red) l c h / 10%);
            border: 2px solid var(--color-red);
            color: var(--color-dark-blue);
            padding: 1rem;
            border-radius: var(--radius-secondary);
            margin: 1rem;
            text-align: center;
        }

        .alerts-error[role="alert"] {
            font-weight: 500;
        }

        .alerts-error .btn {
            margin-top: 1rem;
        }

        /* Additional fallback */
        .no-inert-support .right-panel[aria-hidden="true"] {
            display: none !important;
        }
        /* New alert animation */
        @keyframes newAlertPulse {
            0% {
                background-color: oklch(from var(--color-blue) l c h / 20%);
                transform: translateX(20px);
                opacity: 0;
            }
            50% {
                background-color: oklch(from var(--color-blue) l c h / 30%);
            }
            100% {
                background-color: oklch(from var(--color-blue) l c h / 5%);
                transform: translateX(0);
                opacity: 1;
            }
        }

        .alert-item.new-alert {
            animation: newAlertPulse 0.6s ease-out;
        }

        /* Smooth transitions for filter changes & other elements that need a fade-in */
        .alert-group,
        .shared-fade-in {
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Loading states for actions */
        .alert-action-btn:active {
            transform: scale(0.95);
        }

        /* Dismiss animation */
        @keyframes dismissAlert {
            to {
                opacity: 0;
                transform: translateX(-20px);
                height: 0;
                padding: 0;
                margin: 0;
            }
        }

        .alert-item.dismissing {
            animation: dismissAlert 0.3s ease-out forwards;
        }

        /* Sound indicator (visual feedback) */
        .sound-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--color-blue);
            opacity: 0;
            pointer-events: none;
            transform: scale(0);
            z-index: 10000;
        }

        .sound-indicator.active {
            animation: soundPulse 0.3s ease-out;
        }

        @keyframes soundPulse {
            0% {
                opacity: 0.6;
                transform: scale(0);
            }
            50% {
                opacity: 0.3;
                transform: scale(1.2);
            }
            100% {
                opacity: 0;
                transform: scale(1.5);
            }
        }

        /* Contact detail panel styles */
        .contact-header {
            display: flex;
            align-items: flex-start;
            gap: var(--primary-radius-and-padding);
            margin-bottom: calc(var(--primary-radius-and-padding) / 3);
        }

        .contact-avatar {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--color-teal), var(--color-blue));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-none);
            font-weight: bold;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .contact-header-info {
            flex: 1;
        }

        .contact-detail-panel h3 {
            margin-bottom: 0.25rem;
            font-size: 1.25rem;
        }

        .contact-header-info .company-name {
            font-size: var(--font-size-primary);
            color: oklch(from var(--color-dark-blue) l c h / 70%);
            margin-bottom: 0.5rem;
        }

        .contact-quick-actions {
            display: flex;
            gap: 0.5rem;
            width: 100%;
        }

        .contact-quick-actions .btn {
            flex: 1;
            justify-content: center;
        }

        .contact-section {
            margin-bottom: var(--primary-radius-and-padding);
            padding-bottom: var(--primary-radius-and-padding);
            border-bottom: var(--border-divider);
        }

        .contact-section:last-child {
            border-bottom: none;
        }

        .contact-section h4 {
            font-size: var(--font-size-small);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: oklch(from var(--color-dark-blue) l c h / 60%);
        }

        .contact-field {
            display: flex;
            flex-direction: column;
            margin-bottom: 0.75rem;
        }

        .contact-field:last-child {
            margin-bottom: 0;
        }

        .contact-field-value {
            font-size: var(--font-size-primary);
            color: var(--color-dark-blue);
        }

        .partner-type-selector {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .partner-type-btn {
            padding: 0.375rem 0.75rem;
            position: relative;
            border-radius: var(--radius-secondary);
            font-size: var(--font-size-smallest);
            font-weight: 600;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.15s ease;
            border: 2px solid transparent;
            background: oklch(from var(--color-dark-blue) l c h / 8%);
            color: oklch(from var(--color-dark-blue) l c h / 60%);
        }
        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .partner-type-btn:hover {
                background: oklch(from var(--color-dark-blue) l c h / 15%);
                text-decoration: underline;
                border-color: oklch(from var(--color-dark-blue) l c h / 60%);
            }
        }

        .partner-type-btn.active-preferred {
            background-color: oklch(from var(--color-green) l c h / 15%);
            color: var(--color-green);
            border-color: var(--color-green);
        }

        .partner-type-btn.active-good {
            background-color: oklch(from var(--color-blue) l c h / 15%);
            color: var(--color-blue);
            border-color: var(--color-blue);
        }

        .partner-type-btn.active-problematic {
            background-color: oklch(from var(--color-orange) l c h / 15%);
            color: var(--color-orange);
            border-color: var(--color-orange);
        }

        .project-history-item {
            padding: 0.75rem;
            background: oklch(from var(--color-dark-blue) l c h / 5%);
            border-radius: var(--radius-secondary);
            margin-bottom: 0.5rem;
        }

        .project-history-item:last-child {
            margin-bottom: 0;
        }

        .project-history-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .project-history-date {
            font-size: var(--font-size-small);
            color: oklch(from var(--color-dark-blue) l c h / 60%);
        }

        .empty-projects {
            text-align: center;
            padding: 1.5rem;
            color: oklch(from var(--color-dark-blue) l c h / 50%);
            font-style: italic;
        }


/* ========================================
FIXED HEADER / DASHBOARD PANEL STYLES
======================================== */


/* ========================================
VIEWS & CUSTOMIZED STYLES
======================================== */
/* 0) VIEW TOGGLE ============= */
    .view-toggle {
        display: flex;
        width: max-content;
        background-color: var(--color-DB-fifteen);
        border-radius: var(--radius-secondary);
        padding: 4px;
        border: 1px solid light-dark(oklch(from var(--color-dark-blue) l c h / 10%), oklch(from var(--color-dark-blue) l c h / 15%));
    }

    .view-toggle button {
        flex: 1 1 0;
        padding: 0.25rem 0.75rem;
        font-weight: 600;
        border: none;
        background-color: transparent;
        border-radius: var(--radius-secondary);
        cursor: pointer;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease-in-out;
        color: var(--color-dark-blue);
        white-space: nowrap;
    }

    .view-toggle button:first-child {margin-right: 2px;}
    .view-toggle button:last-child {margin-left: 2px;}

    .view-toggle button i {
        font-size: 1.2rem;
        top: .2rem;
    }

    .view-toggle button.active {
        background-color: var(--color-none);
        color: var(--color-blue);
        box-shadow: var(--shadow-small-base) var(--color-shadows);
        font-weight: 600;
    }

    .view-toggle button:not(.active):hover {
        background-color: var(--color-orange);
        color: var(--color-none);
    }
    .view-toggle button:not(.active):hover span {text-decoration: underline;}

/* ========================================
DATA TABLES
======================================== */

    #list {overflow: hidden; margin-bottom: var(--primary-radius-and-padding);}

        .data-table-content p,
        .simple-preview-table p {margin-bottom: 0}

        .card:has(.scrolling-table, .simple-preview-table) .section-header {
            padding: var(--primary-radius-and-padding) var(--primary-radius-and-padding) 0 var(--primary-radius-and-padding);
        }
        .card:has(.filters-applied):has(.scrolling-table) .section-header {
            margin-bottom: var(--primary-radius-and-padding-half);
        }
        .filters-applied {padding-bottom: var(--primary-radius-and-padding-half);}

        .clear-filtering {
            display: inline-flex; 
            margin-right: calc(var(--primary-radius-and-padding) / 4);  
            padding-right: calc(var(--primary-radius-and-padding) / 4); 
            border-right: 1px solid oklch(from var(--color-dark-blue) l c h / 30%)
        }
        
        table tr.selected td,
        .line-item-list tr.row-expandable:hover > td {/* this needs to be a solid color because of tables that scroll horizontally */
            background-color: light-dark(oklch(from var(--color-orange) calc(l * 1.52) calc(c * 0.25) h / 1), oklch(from var(--color-orange) calc(l * 0.35) calc(c * 0.2) h / 1))
        }
        /* ---- Group accent palette (project-planning + project-cost-tracking) ----
           One re-usable color sequence for line-item groups:
           chocolate → teal → orange → blue → yellow → purple → khaki → fuchsia.
           Purely positional: colors follow the group's POSITION (1st, 2nd, 3rd...),
           not its name/type, so drag-reordering groups keeps the sequence and
           contrast intact. Each rule sets --group-accent on a group's parent row
           (counted with :nth-child(n of .row-expandable), so collapsed groups and
           variable detail-row counts never break the count) and floods it onto
           every following row via "~ tr"; the NEXT group's rule then overrides
           from its own parent down. Source order = group order—keep ascending.
           Pages consume the variable with their own border/icon rules.

           SPECIFICITY NOTE: the base (parent) selector carries an extra
           .row-expandable (i.e. `tr.row-expandable:nth-child(n of .row-expandable)`)
           that the flood (`~ tr`) selector does NOT. Without it, an earlier group's
           flood — one notch more specific thanks to the trailing `~ tr` — outranks
           the next group's bare base rule, so every parent row would inherit the
           PREVIOUS group's color (off-by-one: groups 1 & 2 both chocolate, and a
           parent disagreeing with its own sub-rows). The class bump lifts the base
           above earlier floods so each parent wins with its own color. Do NOT add
           .row-expandable to the flood selectors or the off-by-one returns.

           CAVEAT (for the live app): this pure-CSS route needs one rule pair per
           group slot, so it caps at however many slots are written here (16 = the
           8-color palette twice). A 17th group gets no accent until more lines are
           added. CSS can't express "loop every 8" for the flood because a cycling
           selector like :nth-child(8n+1 of ...) would put group 9 on the same
           (earlier-in-source) rule as group 1, letting group 8's flood override
           it. Fine for the prototype; the live app should generate these rules in
           JS from a real array (groupIndex % palette.length) instead of
           hand-writing slots. */
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(1 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(1 of .row-expandable) ~ tr { --group-accent: var(--color-chocolate); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(2 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(2 of .row-expandable) ~ tr { --group-accent: var(--color-teal); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(3 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(3 of .row-expandable) ~ tr { --group-accent: var(--color-orange); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(4 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(4 of .row-expandable) ~ tr { --group-accent: var(--color-blue); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(5 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(5 of .row-expandable) ~ tr { --group-accent: var(--color-yellow); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(6 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(6 of .row-expandable) ~ tr { --group-accent: var(--color-purple); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(7 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(7 of .row-expandable) ~ tr { --group-accent: var(--color-khaki); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(8 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(8 of .row-expandable) ~ tr { --group-accent: var(--color-fuchsia); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(9 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(9 of .row-expandable) ~ tr { --group-accent: var(--color-chocolate); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(10 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(10 of .row-expandable) ~ tr { --group-accent: var(--color-teal); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(11 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(11 of .row-expandable) ~ tr { --group-accent: var(--color-orange); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(12 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(12 of .row-expandable) ~ tr { --group-accent: var(--color-blue); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(13 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(13 of .row-expandable) ~ tr { --group-accent: var(--color-yellow); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(14 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(14 of .row-expandable) ~ tr { --group-accent: var(--color-purple); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(15 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(15 of .row-expandable) ~ tr { --group-accent: var(--color-khaki); }
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr.row-expandable:nth-child(16 of .row-expandable),
        :is(#planning-phases-tbody, #cost-tracking-tbody) > tr:nth-child(16 of .row-expandable) ~ tr { --group-accent: var(--color-fuchsia); }

        table tr:not(:last-child) td {
            border-bottom: var(--border-divider)
        }
        table th,
        table td {
            position: relative;
            text-align: left;
            padding: var(--primary-radius-and-padding-half);
            vertical-align: top
        }
        table th div {display: flex}
        table:not(.line-item-list) th:first-child:has(.checkbox-wrapper),
        table:not(.line-item-list) td:first-child:has(.checkbox-wrapper) {padding-left: 0;padding-right: 0} 
        
        table:not(.line-item-list) th:first-child,
        table:not(.line-item-list) td:first-child {padding-left: var(--primary-radius-and-padding)}

        table:not(.line-item-list) td:last-child {
            padding-right: var(--primary-radius-and-padding);
        }

        table th {
            font-size: var(--font-size-small);
            font-weight: bold;
            color: var(--color-row-headers);
            border-bottom: 2px solid oklch(from var(--color-khaki) l c h / 25%);
            user-select: none;
            transition: all 0.15s linear
        }
            .scrolling-table th {padding-top: 0.5rem;padding-bottom: 0;border-top: var(--border-divider);}
            .simple-preview-table th {padding-top: 0.5rem;padding-bottom: 0.5rem}

        table th:not(:last-child):not(:first-child) {
            cursor: pointer
        }

        table th .sort-icon {
            display: inline-block;
            margin-left: 0.25rem;
            top: 0.25rem;
            font-size: 1rem;
            color: oklch(from var(--color-dark-blue) l c h / 65%);
            transition: all 0.15s linear;
            transform: rotate(0deg)
        }

        table th.sorted-asc .sort-icon {
            color: var(--color-blue);
            transform: rotate(0deg)
        }
        
        table th.sorted-desc .sort-icon {
            color: var(--color-blue);
            transform: rotate(180deg)
        }

        tr:has(.status.duplicate) td:first-child::before,
        tr:has(.line-item-incomplete) td:first-child::before,
        tr:has(.status.problematic) td:first-child::before {
            background: var(--color-orange);
        }

        tr:has(.status.needs-review) td, 
        tr:has(+ tr .status.needs-review) td { 
            border-width: 2px;
            border-color: var(--color-chocolate); 
        }
        tr:has(.status.needs-review) td:first-child::before {
            background: var(--color-chocolate);
        }
        tr:has(.update-entry) td:first-child::before,
        tr:has(.status-new.update-entry) td:first-child::before {
            background: var(--color-khaki);
        }

        /* Applied only when hidden rows are being shown */
        .hidden-row td {
            background: var(--color-none) !important;
        }
        .hidden-row td:not(:last-child) {color: oklch(from var(--color-dark-blue) l c h / 70%)}

        .hidden-row td:first-child,
        .hidden-row td .badge,
        .hidden-row a.btn,
        .hidden-row td.activity-col {opacity: .7;}

        /* Hidden/archived projects striped indicator */
        .hidden-row td:not(:first-child)::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 5px,
                oklch(from var(--color-dark-blue) l c h / 20%) 5px,
                oklch(from var(--color-dark-blue) l c h / 20%) 6px
            );
        }

        /* Action buttons - Desktop only */
        .actions-left {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
            
        /* Table status cell with prospect name and viewed by */
        .status-cell {
            display: flex;
            flex-direction: column;
            gap: 0.25rem
        }

        td.status.duplicate::before,
        td.status.problematic::before,
        td.status.hidden-proj::before,
        td.status.favorite::before,
        td.status.needs-review::before,
        td.status.expired::before,
        td.status.expiring::before,
        td.status.notViewed::before {
            z-index: 2;
            position: inherit;
            white-space: nowrap;
        }
        td.status.duplicate,
        td.status.problematic,
        td.status.hidden-proj,
        td.status.favorite,
        td.status.needs-review,
        td.status.expired,
        td.status.expiring,
        td.status.notViewed,
        td.status.duplicate .status-cell,
        td.status.problematic .status-cell,
        td.status.hidden-proj .status-cell,
        td.status.favorite .status-cell,
        td.status.needs-review .status-cell,
        td.status.expired .status-cell,
        td.status.expiring .status-cell,
        td.status.notViewed .status-cell {padding-top: .65rem}
        td.status.duplicate .contact-cell,
        td.status.problematic .contact-cell {padding-top: .5rem}
        td.status.duplicate + td:has(.badge),
        td.status.problematic + td:has(.badge),
        td.status.hidden-proj + td:has(.badge),
        td.status.favorite + td:has(.badge),
        td.status.needs-review + td:has(.badge),
        td.status.expired + td:has(.badge),
        td.status.expiring + td:has(.badge),
        td.status.notViewed + td:has(.badge) {padding-top: 2.95rem}
        tr.unknown-bidder td {padding-top: 2rem}

        .viewed-name {
            white-space: nowrap;
            margin-top: 3px;
            font-style: italic
        }
        
        .viewed-name:before {
            content: "last viewed by "
        }

        /* Prospect/company cells with badges */
        .contact-info {
            display: grid;
            gap: 0.25rem;
        }

        .prospect-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Project cell with address */
        .project-cell {
            display: flex;
            flex-direction: column;
            gap: 0.25rem
        }

        /* Activity column styling */
        .update-indicators {
            display: flex;
            flex-direction: column;
            gap: 0.25rem
        }

        /* Activity type breakdown */
        .update-details {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
            margin-top: 0.125rem;
        }
        
        .update-entry {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: var(--font-size-small);
            font-weight: 600;;
            color: oklch(from var(--color-dark-blue) l c h / 70%)
        }
        
        .update-entry:not(:first-child) {
            padding-top: var(--primary-radius-and-padding-half);
        }

        .update-entry i {
            font-size: var(--font-size-primary);
            color: var(--color-chocolate);
        }

        /* Empty state for no activity */
        .update-empty {
            color: oklch(from var(--color-dark-blue) l c h / 30%);
            font-size: var(--font-size-small);
        }

        /* Action buttons - Base styles for all sizes */
        .table-actions-cell {
            display: flex;
            flex-direction: column;
            gap: 0.5rem
        }

        .table-actions-buttons {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            justify-content: flex-end
        }
        .table-actions-buttons.left-align {
            justify-content: flex-start
        }

        /* Load more section for large tables */
        .load-more-section {
            position: relative;
            clear: both;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding: var(--primary-radius-and-padding);
            border-top: var(--border-divider);
            margin-top: -1px; /* Overlap with last table row border */
        }

        .showing-count {
            font-size: var(--font-size-primary);
            color: oklch(from var(--color-dark-blue) l c h / 70%);
            font-weight: 500;
        }

        .load-more-btn {
            padding: 0.625rem 1.5rem;
            font-size: var(--font-size-primary);
            font-weight: 600;
            border: 1px solid var(--color-blue);
            border-radius: var(--radius-secondary);
            background-color: var(--color-none);
            color: var(--color-blue);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.15s linear;
        }

        /* "removing" row actions */
        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
        /* removing row & badge actions */
            .rowToRemove,
            .badgeToSwap {
                opacity: 0;
                transition: opacity 0.65s ease-out;
            }
        }
        @media (prefers-reduced-motion: no-preference) {
            .data-table-wrapper {
                scroll-behavior: smooth;
            }
            /* removing row actions */
            .rowToRemove {
                animation: poof 1s ease-out forwards;
                pointer-events: none;
            }
            @keyframes poof {
                0% {
                    opacity: 1;
                    transform: scale(1) translateX(0);
                    filter: blur(0);
                }
                50% {
                    opacity: 0.8;
                    transform: scale(1.05) translateX(-10px);
                    filter: blur(1px);
                }
                100% {
                    opacity: 0;
                    transform: scale(0.9) translateX(-30px);
                    filter: blur(4px);
                }
            }
            .badgeToSwap {
                animation: badgePoof 0.75s ease-out forwards;
                pointer-events: none;
            }
            
            @keyframes badgePoof {
                0% {
                    opacity: 1;
                    transform: scale(1);
                    filter: blur(0);
                }
                50% {
                    opacity: 0.6;
                    transform: scale(1.15);
                    filter: blur(1px);
                }
                100% {
                    opacity: 0;
                    transform: scale(0.8);
                    filter: blur(3px);
                }
            }
            /* Gentle green, red & orange highlight for won/lost/shared rows */
            .rowWon td:not(:last-child) {
                animation: gentleGreenGlow 1.5s ease-out forwards;
            }
            .rowLost td:not(:last-child) {
                animation: gentleRedGlow 1.5s ease-out forwards;
            }
            .rowShared td:not(:last-child) {
                animation: gentleOrangeGlow 1.5s ease-out forwards;
            }

            @keyframes gentleGreenGlow {
                0% {
                    background-color: inherit;
                }
                15% {
                    background-color: oklch(from var(--color-green) l c h / 25%);
                }
                100% {
                    background-color: oklch(from var(--color-green) l c h / 0%);
                }
            }
            @keyframes gentleRedGlow {
                0% {
                    background-color: inherit;
                }
                15% {
                    background-color: oklch(from var(--color-red) l c h / 25%);
                }
                100% {
                    background-color: oklch(from var(--color-red) l c h / 0%);
                }
            }
            @keyframes gentleOrangeGlow {
                0% {
                    background-color: inherit;
                }
                15% {
                    background-color: oklch(from var(--color-orange) l c h / 25%);
                }
                100% {
                    background-color: oklch(from var(--color-orange) l c h / 0%);
                }
            }
        }


        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .load-more-btn:hover {
                background-color: oklch(from var(--color-blue) l c h / 10%);
                transform: translateY(-1px);
            }
        }

        .load-more-btn:active {
            transform: translateY(0);
        }

        /* Hide when showing all */
        .load-more-section.hidden {
            display: none;
        }

         /* Auto-archive row styling */
        .auto-archive-message td {
            color: oklch(from var(--color-dark-blue) l c h / 70%);
            text-align: center;
            padding: var(--primary-radius-and-padding-half);
            border-bottom: none;
            background-color: transparent;
        }

        /* Ensure archive message row is not affected by sorting */
        .auto-archive-message {
            position: relative;
        }
        @container main-content (max-width: 800px) {
            .responsive-table .auto-archive-message td {
                text-align: left;
                display: block;
                width: 100%;
                padding: 0;
            }
        }
        /* Owner cell styling */
        .owner-cell {
            display: flex;
            gap: 0.25rem;
            align-items: center;
        }

        .owner-cell .action-btn.compact {
            margin-top: 0.25rem;
        }
        .avatar-photo {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: var(--color-full);
            width: 40px;
            height: 40px;
            border-radius: 40px;
            margin-right: calc(var(--primary-radius-and-padding) / 3);
        }
        .avatar-photo:not(.unassigned-item) {
            background-color: var(--color-faded-blue)
        }

        .avatar-photo img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
        }

        /* BIDDERS TABLE */
        #gcTable th:nth-child(1),
        #gcTable td:nth-child(1) { padding-left:0 ;}
        #gcTable th:last-child,
        #gcTable td:last-child {padding-right:0; right:0;text-align: right; }
        #gcTable th.bidder-actions,
        #gcTable td.bidder-actions {width: 5rem;max-width: 5rem; }
        .company-col {width: 37.5%}
        .contact-col {width: 37.5%}
        .dues-col {width: 7rem;max-width: 7rem;}
        .name-col {width: 25%;}

        #gcTable .table-actions-buttons {
            flex-direction: column;
            align-items: flex-end;
        }
        #gcTable .table-actions-buttons div {
            gap: .5rem;
            display: flex;
        }
        
        /* MAIN CONTENT AREA - Container Query Setup */
        .setting-selectors label {
            font-size: var(--font-size-small);
            color: oklch(from var(--color-dark-blue) l c h / 80%);
            margin-bottom: 0.25rem;
            display: block
        }

        .setting-selectors select {
            width: 100%;
            padding: 0.25rem;
            font-size: var(--font-size-small);
            border: 1px solid var(--color-DB-fifteen);
            border-radius: var(--primary-radius-and-padding);
            background-color: var(--color-none)
        }

        /* Section Headers */
        .section-header,
        .pagination-header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-header {margin-bottom: calc(var(--primary-radius-and-padding) / 1.7)}
        .section-header > .section-header {margin-bottom: 0}
        .card .section-header .btn.primary {width: 90%;}
        .header .section-header {padding-right: 2rem; margin-bottom: .25rem}
        .header .section-header,
        .project-bidder-name {padding-left: 2.1rem}
        .chart .section-header {margin-bottom: .5rem}
        .section-header.tight {justify-content:inherit}
        .section-header h2,
        .section-header h3,
        .section-header h4 {
            min-width: 0;  /* allows text to wrap instead of pushing actions */
        }

        /* Alert banners */
        #limit-warning + #limit-warning {z-index: 1000}
        #limit-warning {font-size: var(--font-size-small);gap: .5rem;}
        #limit-warning i {
            font-size: var(--font-size-large);
        }
        #limit-warning.prototype-message {
            position: relative;
            font-size: var(--font-size-smallest);
        }
        #limit-warning.prototype-message i {
            font-size: var(--font-size-small);
        }

        .alert-banner {
            display: grid;
            grid-template-columns: 2.5rem auto 2.5rem;
            align-items: center;
            font-weight: 500;
            color: var(--color-none);
            margin-bottom: var(--primary-radius-and-padding);
            border-radius: var(--primary-radius-and-padding);
            padding: var(--primary-radius-and-padding-half);
            box-shadow: var(--shadows-multi)
        }
        .pinned-header .alert-banner {
            font-size: var(--font-size-small);
            font-weight: 600;
            border-radius: 0;
            margin-bottom: 0;
            padding: calc(var(--primary-radius-and-padding-half) / 2);
            box-shadow: none
        }
        .alert-banner .icon {
            width: inherit;
            height: inherit;
        }
        .alert-banner p {margin-bottom: 0}
        .alert-banner .action-btn,
        .alert-banner a.action-btn {
            width: 2.5rem;
            height: 2.5rem;
            color: inherit;
            border: 1px solid oklch(from var(--color-none) l c h / 5%);
            box-shadow: var(--shadow-small-base) var(--color-shadows);
            background-color: oklch(from var(--color-none) l c h / 10%)
        }
        .alert-banner a.action-btn,
        header a.action-btn,
        header .action-btn {
            background-color: oklch(from var(--color-none) l c h / 30%)
        }

        .alert-banner.warning,
        .item-box.specific-callout.error {
            color: light-dark(oklch(from var(--color-red) calc(l - .15) c h), oklch(from var(--color-red) calc(l + .15) c h));
            background-color: light-dark(oklch(from var(--color-red) l c h / 20%), oklch(from var(--color-red) l c h / 30%));
            border: 1px solid light-dark(oklch(from var(--color-red) l c h / 50%), oklch(from var(--color-red) l c h / 50%))
        }
        .item-box.specific-callout.error .action-btn {color: inherit;}
        .alert-banner.warning.critical,
        #limit-warning.warning.critical {
            color: var(--color-none);
            background-color: var(--color-red)
        }
        .alert-banner.confirm {
            color: light-dark(oklch(from var(--color-green) calc(l - .15) c h), oklch(from var(--color-green) calc(l + .15) c h));
            background-color: oklch(from var(--color-green) l c h / 30%);
            border: 1px solid light-dark(oklch(from var(--color-green) l c h / 40%), oklch(from var(--color-green) l c h / 40%))
        }
        .alert-banner.confirm.critical {
            color: var(--color-none);
            background-color: var(--color-green)
        }
        .alert-banner.notice {
            color: var(--color-dark-blue);
            background-color: oklch(from var(--color-chocolate) l c h / 25%);
            border: 1px solid light-dark(oklch(from var(--color-chocolate) l c h / 30%), oklch(from var(--color-chocolate) l c h / 30%))
        }
        .alert-banner.ghost {
            color: oklch(from var(--color-dark-blue) l c h / 80%);
            background-color: transparent;
            border: 1px solid var(--color-DB-fifteen)
        }
        .alert-banner.take-action,
        #limit-warning.take-action {
            border: 1px solid light-dark(oklch(from var(--color-orange) calc(l - .15) c h / 50%), oklch(from var(--color-orange) calc(l + .15) c h / 50%))
        }
        .alert-banner.take-action.critical,
        #limit-warning.take-action.critical {
            color: var(--color-none);
            background-color: var(--color-yellow)
        }
        .alert-banner a:where(:not(.btn):not(.action-btn):not(.icon)),
        #limit-warning a {
            font-weight: 700;
            color: inherit;
            background: linear-gradient(to right, currentColor),
                        var(--gradient-animated-link-underline);
            background-size: 100% 2px, 0 2px;
            background-position: 100% 100%, 0 100%;
            background-repeat: no-repeat;
        }


        /* Breadcrumb styles */
        .breadcrumb,
        .breadcrumb-split {
            display: flex;
            align-items: center;
            justify-items: start;
            margin-bottom: var(--primary-radius-and-padding);
            font-size: var(--font-size-small)
        }

/* MODAL SYSTEM STYLES */
        /* Modal Backdrop */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: light-dark(oklch(from var(--color-dark-blue) l c h / 50%), oklch(from var(--color-none) l c h / 20%));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 1099;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .modal-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Modal Container */
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            width: 90%;
            max-width: 32rem;
            max-height: 90vh;
            background: var(--color-none);
            border-radius: var(--primary-radius-and-padding);
            box-shadow: 0 10px 50px light-dark(oklch(from var(--color-dark-blue) l c h / 30%), var(--color-black)),
                        0 0 0 1px light-dark(oklch(from var(--color-dark-blue) l c h / 10%), oklch(from var(--color-khaki) l c h / 30%));
            z-index: 1100;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            flex-direction: column;
        }

        .modal.active {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        /* Modal Header */
        .modal-header {
            padding: calc(var(--primary-radius-and-padding) / 4);
            align-self: end;
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: bold;
            text-align: center;
            color: var(--color-dark-blue);
            margin: 0;
            padding-bottom: var(--primary-radius-and-padding-half);
        }
        .modal-title,
        .modal-footer .btn {text-transform: capitalize; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .modal-close:hover {
                opacity: 1;
                background: oklch(from var(--color-dark-blue) l c h / 10%);
            }
        }

        /* Modal Body */
        .modal-body {
            padding: var(--primary-radius-and-padding);
            overflow-y: auto;
            flex: 1;
            overscroll-behavior: contain;
        }
        /* Note: a previous override set `.modal-body` to overflow: visible while a
           dropdown was open so listboxes could spill past the modal footer. That
           caused content to escape the modal in taller forms. Smart-flip in
           CustomSelect (see forms.js) now drops up when there isn't room below,
           so the modal-body can keep its normal overflow behavior. */
        .modal-message ul {
            text-align: left;
            margin: 1rem 0;
            padding-left: 1.5rem;
            list-style: none;
        }

        .modal-message ul li {
            position: relative;
            padding-left: 1.25rem;
            margin-bottom: 0.5rem;
            line-height: 1.6;
        }

        .modal-message ul li:last-child {
            margin-bottom: 0;
        }

        /* Custom bullet points */
        .modal-message ul li::before {
            content: "•";
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        /* For warning/destructive modals, use red bullets */
        .modal-icon.warning ~ .modal-message ul li::before {
            color: var(--color-red);
        }

        /* Custom scrollbar for modal body */
        .modal-body::-webkit-scrollbar {
            width: 8px;
        }

        .modal-body::-webkit-scrollbar-track {
            background: oklch(from var(--color-khaki) l c h / 20%);
            border-radius: 4px;
        }

        .modal-body::-webkit-scrollbar-thumb {
            background: oklch(from var(--color-dark-blue) l c h / 30%);
            border-radius: 4px;
        }

        .modal-body table th:first-child,
        .modal-body table td:first-child {padding-left: 0;}
        .modal-body table th:last-child,
        .modal-body table td:last-child {padding-right: 0;}
        .modal-body table th,
        .modal-body table td {padding-top: .5rem; padding-bottom: .5rem;}

        /* catch anything with regressive buttons so we can color the icon correctly */
        .modal:has(.regressive) .modal-icon.info {
            background: oklch(from var(--color-red) l c h / 15%);
    color: var(--color-red);}

        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .modal-body::-webkit-scrollbar-thumb:hover {
                background: oklch(from var(--color-dark-blue) l c h / 40%);
            }
        }

        /* Modal Footer */
        .modal-footer {
            padding: var(--primary-radius-and-padding);
            border-top: var(--border-divider);
            display: flex;
            gap: 0.75rem;
            justify-content: flex-end;
            flex-shrink: 0;
            position: relative;
            isolation: isolate; /* Ensures the loading/progress bar doesn't overflow */
        }
        .modal-footer:has(.modal-loading-message),
        .modal-footer:has(.form-field) {
            justify-content: center;
        }

        .modal-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 1rem;
            width: 100%;
        }

        .modal-loading-message .loading-text {
            transition: opacity 0.15s ease;
        }

        /* Progress bar as pseudo-element */
        .modal-footer.loading::before {
            content: '';
            z-index: 10;
            /* This is the key to preventing shift */
            margin-top: -1.5px; /* Half the height - centers it on the border */
        }
        .progress-bar,
        .modal-footer.loading::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 8px;
            background: linear-gradient(90deg, 
                var(--color-orange) 0%, 
                var(--color-teal) 50%, 
                var(--color-green) 100%);
            animation: modalProgressWidth var(--progress-duration, 3s) ease-out forwards;
        }

        @keyframes modalProgressWidth {
            to {
                width: 100%;
            }
        }

        /* Usage Meter - just the bar */
        .usage-meter-track {
            height: 8px;
            background: oklch(from var(--color-dark-blue) l c h / 12%);
            border-radius: 2px;
            overflow: hidden;
        }

        .usage-meter-fill {
            height: 100%;
            background: linear-gradient(90deg, 
                var(--color-orange) 0%, 
                var(--color-teal) 50%, 
                var(--color-green) 100%);
            border-radius: 2px
        }

        .modal-loading-message {
            text-align: center;
            padding: 1rem;
            color: var(--color-dark-blue);
            font-size: var(--font-size-primary);
        }

        /* Optional subtle animation for the message */
        @keyframes breathe {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        .modal-footer.loading .modal-loading-message {
            animation: breathe 2s ease-in-out infinite;
        }

        /* Modal Content Types */
        .modal-icon {
            width: 4rem;
            height: 4rem;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-rounded);
            font-size: 2.5rem;
        }

        .modal-icon.warning {
            background: oklch(from var(--color-red) l c h / 15%);
            color: var(--color-red);
        }

        .modal-icon.notice {
            background: oklch(from var(--color-orange) l c h / 15%);
            color: var(--color-orange);
        }

        .modal-icon.success {
            background: oklch(from var(--color-green) l c h / 15%);
            color: var(--color-green);
        }

        .modal-icon.info {
            background: oklch(from var(--color-blue) l c h / 15%);
            color: var(--color-blue);
        }

        .modal-message {
            text-align: center;
            font-size: var(--font-size-primary);
            line-height: 1.7;
            color: var(--color-dark-blue);
            margin-bottom: 0;
        }

        /* Prevent body scroll when modal is open */
        body.modal-open {
            overflow: hidden;
        }

       /* Animation for shake effect */
        @keyframes itemShake {
            0%, 100% { translate: 0; }
            10%, 30%, 50%, 70%, 90% { translate: -6px 0; }
            20%, 40%, 60%, 80% { translate: 6px 0; }
        }

        .modal.shake {
            animation: itemShake 0.5s ease-in-out;
        }
        .shake {
            animation: itemShake 0.75s ease-out;
        }

        /* Focus trap styles */
        .modal:focus {
            outline: none;
        }

        @media (prefers-reduced-motion: no-preference) {/* be a good human and add fancy motion stuff to a query */
            .confetti-burst {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 1099;
    }

    .confetti-piece {
        position: absolute;
        border-radius: 2px;
        animation: confetti-fall 4s ease-out forwards;/* this #s is the fail-safe; it set the min animation duration. then we need to set again in the JS, which overrides it */
        /* Size will be set via JavaScript */
    }

    @keyframes confetti-fall {
        0% {
            transform: translateY(0) translateX(0) rotate(0deg) scale(1);
            opacity: 1;
        }
        100% {
            transform: translateY(100vh) translateX(var(--drift)) rotate(720deg) scale(0);
            opacity: 0;
        }
            }
            .modal.celebrating {
            animation: celebrate-pulse 0.6s ease-out;
            }

            @keyframes celebrate-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
            }

            .modal.celebrating::before {
            content: '';
            position: absolute;
            inset: -20px;
            background: radial-gradient(circle, rgba(76, 175, 80, 0.2) 0%, transparent 70%);
            animation: success-glow 1s ease-out;
            pointer-events: none;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 600px) {
            .modal {
                width: calc(100% - 2rem);
                margin: 1rem;
            }
            
            .modal-footer {
                flex-direction: column;
            }
            
            .modal-footer .btn {
                width: 100%;
            }
        }

        /* inline editing for card content */
        .inline-edit-show {display: contents;}
   .inline-edit-show input {width: calc(100% - 4rem); min-width: 15rem; max-width: 25rem;}
   .kpi .inline-edit-show input {min-width: inherit; max-width: inherit;}
   .inline-edit-show button#apply-btn {margin-left: var(--primary-radius-and-padding-half)}

   .inline-edit-area button {display: none;}
   .inline-edit-area:hover {text-decoration:underline; text-underline-offset: 0.25rem; cursor: pointer;}
   .inline-edit-area:hover i {display: inline-block;}

        /* KPI Grid - Default 4 columns */
        .kpi-grid,
        .grid-autofit {/* utility class */
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            gap: var(--primary-radius-and-padding);
            margin-bottom: var(--primary-radius-and-padding)
        }

        /* KPI Card Styles */
        .kpi.card {padding: calc(var(--primary-radius-and-padding) / 1.5);
        }
        .kpi-header {
            margin-bottom: 0; 
            font-size: var(--font-size-smallest);
            display: flex;
            align-items: center;
        }
        .kpi-header .icon {
            width: 1.5rem;
            height: 1.5rem;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: left;
            margin-right: 0.25rem
        }
        .kpi .info-label {padding-top: 0;
        }
        .kpi .to-configure-box {margin-top: calc(var(--primary-radius-and-padding) /3);}
        .kpi-grid .card:first-of-type .icon {
            color: var(--color-chocolate)
        }
        .kpi-grid .card:nth-of-type(2) .icon {
            color: var(--color-blue)
        }
        .kpi-grid .card:nth-of-type(3) .icon {
            color: var(--color-khaki)
        }
        .kpi-grid .card:last-of-type .icon {
            color: var(--color-teal)
        }

        .kpi-content-container {
            display: flex;
            align-items: baseline;
            justify-content: space-between
        }

        .content-summary,
        .kpi-content-container .currency-prepend::before,
        .kpi-content-container .percent-append::before {
            font-size: var(--font-size-larger);
            font-weight: bold
        }
        a.content-summary {text-decoration: none;
            font-weight: bold;
            color: var(--color-dark-blue);
            background: linear-gradient(to right, oklch(from var(--color-teal) l c h / 1)),
                        var(--gradient-animated-link-underline);
            background-size: 100% 2px, 0 2px;
            background-position: 100% 100%, 0 100%;
            background-repeat: no-repeat;
            transition: background-size 400ms
        }

        .trend {
            min-width: 3.125rem;
            text-align: center;
            align-self: center
        }

        /* Details Layout */
        .content-details-grid,
        .content-details-grid-reverse,
        .content-details-grid-wide {
            display: grid;
            gap: var(--primary-radius-and-padding);
            margin-bottom: var(--primary-radius-and-padding)
        }
        .content-details-grid-even {
            grid-template-columns: 1fr 1fr;
        }
        .content-details-grid {
            grid-template-columns: 2fr 1fr;
        }
        .content-details-grid-reverse {
            grid-template-columns: 1fr 2fr;}
        .content-details-grid-wide {
            grid-template-columns: 3fr 1fr;}

        .content-details-main {
            display: flex;
            flex-direction: column;
        }

        .content-details-sidebar {
            display: flex;
            flex-direction: column;
        }
        .content-details small {
            width: 100%;
            margin-top: .25rem;
        }
        .content-details small:last-child {
            font-weight: 600;
            color: oklch(from var(--color-dark-blue) l c h / 70%)
        }

        /* Info sections */
        .info-section {
            display: flex;
            flex-direction: column;
            gap: 1rem
        }

        .info-row {
            display: grid;
            grid-template-columns: 140px auto max-content;
            gap: calc(var(--primary-radius-and-padding) / 1.5);
            align-items: start
        }
        #company-detail-content  .info-row {
            grid-template-columns: 5rem 1fr;}
        .info-label {
            padding-top: 5px;
            color: oklch(from var(--color-dark-blue) l c h / 70%)
        }

        .info-value {
            color: var(--color-dark-blue)
        }

        /* Status and Value styles */
        .badge {position: relative;}
        
        .badge,
        .item-box.phase-leader small span:before {
            font-size: var(--font-size-smallest);
            text-transform: uppercase;
            font-weight: bold;
            padding: 5px 10px 4px 10px;
            border-radius: var(--radius-secondary);
            /* white-space: nowrap; */
            width: fit-content
        }
        .badge.compact {
            padding: 2.5px 5px 2px 5px;}
        p.badge {
            font-size: var(--font-size-primary)}
        header p.badge {
            margin-left: var(--primary-radius-and-padding);
        margin-bottom: var(--primary-radius-and-padding-half);}

        /* Contact relationship badge */
        .badge.type-relationship,
        .relationship-badge {
            display: inline-block;
            font-size: var(--font-size-small);
            font-weight: 500;
            text-transform:inherit;
            padding: 0.1875rem 0.5rem;
            border-radius: var(--radius-secondary);
            background-color: oklch(from var(--color-dark-blue) l c h / 8%);
            color: oklch(from var(--color-dark-blue) l c h / 80%);
            white-space: nowrap;
        }

        .badge.completed,
        .status-in-stock,
        .status-new,
        .type-preferred {
            background-color: oklch(from var(--color-green) l c h / 15%);
            color: var(--color-green)
        }
        .status-accepted {
            border: 1px solid var(--color-green);
            color: var(--color-green)
        }
        .status-overdue {
            border: 1px solid var(--color-red);
            color: var(--color-red)
        }
        .status-unread {
            border: 1px solid var(--color-teal);
            color: var(--color-teal)
        }
        .status-warning {
            border: 1px solid light-dark(oklch(from var(--color-orange) calc(l - .075) c h), oklch(from var(--color-orange) calc(l + .15) c h));
            color: light-dark(oklch(from var(--color-orange) calc(l - .075) c h), oklch(from var(--color-orange) calc(l + .15) c h))
        }

        .status-undecided {
            color: oklch(from var(--color-dark-blue) l c h / 75%);
            border: 2px dashed oklch(from var(--color-dark-blue) l c h / 50%);
        }

        .status-draft {
            color: var(--color-chocolate);
            border: 1px solid var(--color-chocolate)
        }

        .status-Critical-Prep,
        .value.none,
        .value.scheduled,
        .status-order-only {
            color: oklch(from var(--color-dark-blue) l c h / 70%);
            border: 1px solid oklch(from var(--color-dark-blue) l c h / 40%)
        }
        .board-card .value.none,
        .board-card .value.scheduled {background-color: var(--color-none);}

        .status-internal-review,
        .status-paused,
        .status-stale {
            border: 1px solid light-dark(oklch(from var(--color-orange) calc(l - .15) c h), oklch(from var(--color-orange) calc(l + .15) c h));
            color: light-dark(oklch(from var(--color-orange) calc(l - .15) c h), oklch(from var(--color-orange) calc(l + .15) c h))
        }

        .status-in-progress {
            border: 1px solid var(--color-purple);
            color: var(--color-purple)
        }

        .status-low-stock,
        .status-expiring-soon,
        .alert-banner.take-action,
        #limit-warning.take-action,
        .confidence-mid,
        .status-negotiating,
        .type-problematic {
            border: 1px solid transparent;
            background-color: oklch(from var(--color-orange) l c h / 15%);
            color: light-dark(oklch(from var(--color-orange) calc(l - .15) c h), oklch(from var(--color-orange) calc(l + .15) c h))
        }

        .status-shared {
            background-color: oklch(from var(--color-chocolate) l c h / 15%);
            color: var(--color-chocolate)
        }

        .status-submitted,
        .status-work-completed,
        .type-good {
            border: 1px solid transparent;
            color: light-dark(oklch(from var(--color-blue) calc(l - .15) c h), oklch(from var(--color-blue) calc(l + .15) c h));
            background: oklch(from var(--color-blue) l c h / 15%);
        }

        .badge.critical,
        .status-expired,
        .status-lost,
        .status-balance-overdue,
        .status-out-of-stock {
            border: 1px solid transparent;
            background-color: oklch(from var(--color-red) l c h / 15%);
            color: light-dark(oklch(from var(--color-red) calc(l - .15) c h), oklch(from var(--color-red) calc(l + .15) c h));
        }

        .badge.my-contact {
            background-color: oklch(from var(--color-full) l c h / 80%);
            color: var(--color-none)
        }

        /* Value Styles */
        .value {
            text-align: center
        }

        .status-won,
        .status-balance-paid,
        .value.high,
        .value.healthy,
        .confidence-high {
            border: 1px solid transparent;
            color: var(--color-none);
            background-color: var(--color-green)
        }
        /* Won celebration emoji. Scoped to the *visible* status only:
           legacy (non-picker) cells, or the picker trigger when its badge is
           won. The status pickers list every status as a hidden option, so an
           unscoped :has(.status-won) would fire on every row. */
        .status-cell:not(:has(.status-picker)):has(.status-won)::after {
            content: "🎉";
            font-family: "Noto Color Emoji", sans-serif;
            font-weight: 400;
            font-style: normal;
            position: absolute;
            margin-left: .5rem
        }
        .status-picker .select-trigger:has(.status-won)::after {
            content: "🎉";
            font-family: "Noto Color Emoji", sans-serif;
            font-weight: 400;
            font-style: normal;
            margin-left: .5rem
        }
            .status-cell:has(.status-won)::after {
                padding-left: .25rem;
                margin-left: 3.25rem
            }
            .status-cell:has(.status-balance-paid)::after {
                margin-left: 6.5rem
            }

        .value.mid,
        .value.at-risk {
            color: var(--color-none);
            background-color: var(--color-orange)
        }

        .value.low {
            color: var(--color-none);
            background-color: oklch(from var(--color-chocolate) l c h / 80%)
        }

        .value.none,
        .value.scheduled {
            color: var(--color-dark-gray);
            background-color: var(--color-faded-gray)
        }

        .value.overdue { color: var(--color-none); background-color: var(--color-red) }
        .value.complete { color: var(--color-none); background-color: var(--color-blue) }

        .value.pending {
            color: var(--color-dark-blue);
            border: 1px solid transparent;
            background-color: oklch(from var(--color-dark-blue) l c h / 15%)
        }

        /* trends */
        .positive,
        .positive-arrow,
        .confidence-good {
            background-color: oklch(from var(--color-green) l c h / 15%);
            color: var(--color-green)
        }
        .positive-arrow::after {content: "➚"; padding-left: 5px}
        .secure::before {content: "➚"; padding-left: 5px}

        .negative,
        .negative-arrow,
        .confidence-low {
            background-color: oklch(from var(--color-red) l c h / 15%);
            color: light-dark(oklch(from var(--color-red) calc(l - .15) c h), oklch(from var(--color-red) calc(l + .15) c h));
        }
        .negative-arrow::after {content: "➘"; padding-left: 5px}

        .neutral {
            background-color: oklch(from var(--color-khaki) l c h / 15%);
            color: var(--color-chocolate)
        }

        /* Action buttons section */
        .actions-section {
            display: flex;
            gap: 1rem;
            flex-shrink: 0;
            flex-wrap: nowrap;
        }

        .action-btn,
        a.action-btn {
            position: relative;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: var(--radius-rounded);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s linear;
            background-color: oklch(from var(--color-dark-blue) l c h / 10%);
            color: var(--color-blue);
            text-decoration: none;
            border: 1px solid oklch(from var(--color-dark-blue) l c h / 20%);
            box-shadow: var(--shadow-small-base) var(--color-shadows);
            flex-shrink: 0
        }
            .action-btn.move-item,
            a.action-btn.move-item {color: var(--color-dark-blue)}

        .action-btn.secondary,
        a.action-btn.secondary {/* overrides base version when we need a more subtile effect */
            background-color: oklch(from var(--color-dark-blue) l c h / 0%);
            border-color:transparent;
        }

        .action-btn.regressive,
        a.action-btn.regressive {
            color: var(--color-red);
            background-color: oklch(from var(--color-red) l c h / 15%);
            }
        .action-btn.take-action,
        a.action-btn.take-action {
            color: var(--color-orange);
            background-color: oklch(from var(--color-orange) l c h / 15%)
        }

        .action-btn.advance,
        a.action-btn.advance {
            color: var(--color-green);
            background-color: oklch(from var(--color-green) l c h / 15%)
        }
        .action-btn.primary.advance,
        a.action-btn.primary.advance {
            background: linear-gradient(45deg,var(--color-green),var(--color-green),var(--color-orange)) 0 0/600%
        }

        .action-btn i,
        a.action-btn i {
            font-size: 1.4rem
        }

        .action-btn.compact,
        .action-btn.ultra-compact,
        button.action-btn.compact,
        button.action-btn.ultra-compact,
        a.action-btn.compact,
        a.action-btn.ultra-compact {/* overrides base version when we need a smaller icon-only link/button */
            width: auto;
            height: auto;
            border: none;
            box-shadow: none;
            border-radius: var(--radius-secondary);
            background-color: oklch(from var(--color-dark-blue) l c h / 0%)
        }
        button.action-btn.compact,
        button.action-btn.ultra-compact,
        a.action-btn.ultra-compact,
        a.action-btn.ultra-compact {
            min-width: 1.5rem;
            min-height: 1.5rem;
        }
        button.action-btn.compact i,
        button.action-btn.ultra-compact i,
        a.action-btn.ultra-compact i,
        a.action-btn.ultra-compact i {
            font-size: calc(var(--font-size-primary) + .2rem);
            margin-right: .3rem;
        }

        .action-btn:not(.compact):not(.ultra-compact),
        a.action-btn:not(.compact):not(.ultra-compact):active {
            box-shadow: none
        }

        .section-header:has(.inline-button) {
            justify-content: initial
        }

        .compile,
        .back-to-top {
            position: fixed;
            bottom:1rem;
            display: none;
            z-index: 100;
        }
        .compile {right: 6rem;}
        .back-to-top {
            width: 4rem;
            height: 4rem;
            background-color: oklch(from var(--color-none) l c h / 80%);
            right: 1rem;
            transition: opacity 0.3s ease;
        }
        .back-to-top.action-btn i {
            font-size: 2rem;
        }

        .user-options-btn {
            width: inherit;
            padding-right: 1rem;
            display: flex;
            border-radius: var(--primary-radius-and-padding);
            transition: all 0.15s linear
        }

        .user-options-btn .user-options-dd-btn {font-size: 1rem;}

        .user-avatar,
        .office-avatar {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-rounded);
            margin-right: 0.5rem;
            font-weight: bold;
            font-size: var(--font-size-small);
            display: flex;
            align-items: center;
            justify-content: center
        }
        .office-avatar {
            background-color: var(--color-orange);
        }
        .office-avatar .nav-icon {
            color: oklch(from var(--color-none) l c h / 70%)
        }
        .user-avatar {/* ideally this is a photo but we need to be sure the fallback color is not the same as the location control, below */
            background-color: var(--color-faded-blue);
        }
        .send-feedback {
            position: fixed;
            left: .75rem;
            bottom:1rem;
            z-index: 100
        }
        .save-cancel-pinned {
            position: fixed;
            right: 0;
            bottom:1rem}
        .save-cancel-pinned .btn {
            display: inline-block;
            margin-right: var(--primary-radius-and-padding);
        }

        /* Floating Actions Panel */
        .floating-actions {
            position: fixed;
            right: var(--primary-radius-and-padding);
            top: 50%;
            transform: translateY(-50%);
            background-color: transparent;
            box-shadow: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease
        }

        /* Secondary actions group styling */
        .floating-actions .secondary-actions {
            padding: 0.75rem;
            display: flex;
            align-items: center;
            flex-direction: column
        }
        .floating-actions,
        .floating-actions .secondary-actions {
            gap: var(--primary-radius-and-padding-half);
            z-index: 100;
        }
        header .section-header .action-btn,
        .floating-actions .action-btn {
            width: 3.5rem;
            height: 3.5rem
        }

        /* Floating primary gradient button */
        .floating-actions .action-btn.primary,
        header .section-header .action-btn.primary  {
            color: var(--color-none);
            border: 1px solid transparent;
            box-shadow: 0 2px 10px oklch(from var(--color-blue) l c h / 40%), 
                        0 0 20px oklch(from var(--color-blue) l c h / 20%);
            z-index: 100;
        }
        
        header .section-header .action-btn i,
        .floating-actions .action-btn i {
            font-size: 1.75rem;
        }

        /* activity styles */
        .activity,
        .pricing-history {
            position: relative;
            padding-left: 2rem
        }

        .activity::before,
        .pricing-history::before {
            content: '';
            position: absolute;
            left: 0.9rem;
            top: 0.5rem;
            bottom: 0.5rem;
            width: 2px;
            background-color: oklch(from var(--color-khaki) l c h / 35%)
        }

        .activity-item,
        .pricing-history-item {
            position: relative;
            margin-bottom: var(--primary-radius-and-padding)
        }

        .activity-item::before,
        .pricing-history-item::before {
            content: '';
            position: absolute;
            top: .25rem;
            left: -1.75rem;
            width: 1rem;
            height: 1rem;
            border-radius: var(--radius-rounded);
            background-color: var(--color-blue);
            border: 2px solid var(--color-none);
            box-shadow: 0 0 0 2px oklch(from var(--color-khaki) l c h / 35%)
        }

        .activity-item.due-date::before {
            background-color: var(--color-red)
        }

        .activity-item.new-activity::before {
            background-color: var(--color-green)
        }

        .activity-date {
            margin-bottom: 0.25rem;
            display: block
        }

        .activity-content {
            margin: 0
        }

        /* Feature Boxes */
         .feature-box.integration {
            border-radius: var(--radius-secondary);
            border: 2px dashed var(--color-teal);
            background-color: var(--color-faded-teal);
            padding: 1.5rem; 
            height: auto; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            text-align: center;
        }
        .feature-box.selected {
            border: 3px solid var(--color-green);
            background-color: oklch(from var(--color-green) l c h / 15%);
        }
        .feature-box.integration button,
        .feature-box.integration .badge {
            margin: var(--primary-radius-and-padding-half) 0;
        }
        .feature-box.integration .badge {
            color: light-dark(oklch(from var(--color-green) calc(l - .1) c h),oklch(from var(--color-green) calc(l + .1) c h));
        }
        .feature-box.integration .badge::before {
            content: "✓"; padding-right: 5px
        }

        /* Note textarea styles */
        .note-textarea {
            width: 100%;
            padding: 1rem;
            line-height: 1.7;
            border: 1px solid oklch(from var(--color-khaki) l c h / 35%);
            border-radius: var(--radius-secondary);
            background-color: var(--color-none);
            color: var(--color-dark-blue);
            resize: vertical;
            min-height: 6.25rem;
            transition: all 0.15s linear
        }

        .note-textarea:focus {
            outline: 3px solid var(--color-teal);
            outline-offset: 2px;
            border-color: var(--color-teal)
        }

        .note-textarea::placeholder {
            color: oklch(from var(--color-dark-blue) l c h / 50%)
        }

        .apply-controls {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1rem
        }

        /* Note display styles */
        .note-item {
            padding: 1rem 0;
            border-bottom: var(--border-divider)
        }

        .note-item:first-child {
            padding-top: 0
        }

        .note-item:last-child {
            border-bottom: none;
            padding-bottom: 0
        }

        .note-author {
            font-weight: 600;
            margin-bottom: 0.25rem
        }

        .note-date {
            color: oklch(from var(--color-dark-blue) l c h / 65%);
            margin-bottom: 0.75rem;
            font-weight: 500;
        }

        .note-text {
            font-size: var(--font-size-primary);
            line-height: 1.7;
            margin: 0
        }
/* BEGIN ONBOARDING & OTHER SHARED STYLES */
        /* Trade type selector */
        .trade-grid {
            margin-top: var(--primary-radius-and-padding-half);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        .preference-grid {
            display: grid;
            grid-template-columns: repeat(1fr);
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .trade-option,
        .preference-option {
            padding: 0.75rem;
            background: var(--color-none);
            border: 2px solid oklch(from var(--color-khaki) l c h / 35%);
            border-radius: var(--radius-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .trade-option {
            text-align: center;
        }
        
        .trade-option:hover,
        .preference-option:hover {
            border-color: var(--color-blue);
            background: var(--color-faded-teal);
        }
        
        .trade-option.selected,
        .preference-option.selected {
            background: var(--color-blue);
            color: var(--color-none);
            border-color: var(--color-blue);
        }
        
        /* Other email link styles */
        .other-email-link {
            text-align: center;
        }
        
        .other-email-link a {
            text-decoration: none;
            font-size: 0.875rem;
            cursor: pointer;
            transition: opacity 0.15s ease;
        }
        
        .other-email-link a:hover {
            opacity: 0.8;
            text-decoration: none;
        }

/* BEGIN DASHBOARD PAGE */
        /* Chart Styles */
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--primary-radius-and-padding)
        }
        
        .chart-container {
            height: 80%;
            position: relative
        }

        .chart-callout {
            position: absolute;
            top: 1.25rem;
            left: 28%;
            background-color: var(--color-dark-blue);
            font-size: var(--font-size-primary);
            color: var(--color-faded-teal);
            padding: 0.25rem .75rem;
            border-radius: var(--primary-radius-and-padding);
            z-index: 10
        }
        .chart-bars {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            height: 15.5rem
        }
        .chart-bar-container {
            display: flex;
            flex-direction: column;
            align-items: center
        }
        .chart-bar {
            width: 2rem;
            border-radius: var(--radius-secondary);
            background-color: var(--color-blue)
        }
        .chart-bar.highlighted {
            background-color: var(--color-khaki);
            box-shadow: var(--shadow-large-base) var(--color-shadows)
        }
        .chart-bar.projection {
            background-color: oklch(from var(--color-khaki) l c h / 40%)
        }
        .chart-label {
            font-size: var(--font-size-smallest);
            color: oklch(from var(--color-dark-blue) l c h / 70%);
            margin-top: 0.5rem
        }

        /* Promo Styles */
        .card.promo {padding-top: var(--primary-radius-and-padding-half)}
        .promo {
            background-color: var(--color-blue);
            color: var(--color-none);
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .promo-title {
            font-size: var(--font-size-largest);
            font-weight: bolder;
            margin-bottom: 12px
        }

        .promo-text {
            font-weight: 500;
            color: oklch(from var(--color-none) l c h / 85%);
            margin-bottom: var(--primary-radius-and-padding)
        }

        .promo .btn,
        .promo a.btn {
            background: var(--color-none)
        }
        .promo :focus {outline: 3px solid var(--color-none);
        }
         .promo .badge {
            background-color: var(--color-none);
            color: var(--color-blue);
            font-size: var(--font-size-smallest);
            display: inline-block;
            margin-bottom: 1.25rem
        }
        .promo .btn.primary,
        .promo a.btn.primary {width: 100%; color: var(--color-full); background: linear-gradient(45deg,var(--color-none),var(--color-khaki),var(--color-none)) 0 0/600%;}

        /* Reminders & Tasks Styles */
         .row-item:not(:last-child) {
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: var(--border-divider);
        }

        .status::before {
            font-size: var(--font-size-small);
            font-weight: bold
        }
        .status p {margin-top: 5px}

        .general-task .status::before,
        .general-task .status::before  {
            color: var(--color-blue);
            white-space: nowrap;
        }
        .confirm-contact .status::before  {
            content: "Confirm Project Contact";
        }
        .get-approval .status::before  {
            content: "Get credit or Up-front Payment(s)";
        }
        .general-task.follow-up .status::before  {
            content: "Change Order";
        }
        .general-task.pricing .status::before  {
            content: "Talk to Steve before bidding";
        }
        .general-task.steve .status::before  {
            content: "Get pricing before bidding";
        }
        .general-task.matt .status::before  {
            content: "Have Matt do the takeoff";
        }  
        .row-item.eval-ITB .status::before,
        .row-item.follow-up .status::before {
            content: "Follow-up on Submitted Bid";
            white-space: nowrap;
        }
        .row-item.eval-ITB .status::before {
            content: "Evaluate ITB"
        }
        .row-item.review-est .status::before {
            content: "Request to Review Estimate"
        }
        .row-item.general-req .status::before {
            content: "Call Chuck about the warehouse"
        }
        .row-item.submit-bid .status::before {
            content: "Submit Bid"
        }
        .overdue .status::before {
            color: var(--color-red)
        }
        .row-item.overdue.eval-ITB .status::before,
        .row-item.overdue.follow-up .status::before {
            content: "⚑ Overdue: Follow-up on Submitted Bid";
            color: var(--color-red);
            white-space: nowrap;
        }
        .row-item.overdue.eval-ITB .status::before {
            content: "⚑ Overdue: Evaluate ITB"
        }
        .row-item.overdue.review-est .status::before {
            content: "⚑ Overdue: Request to Review Estimate"
        }
        .row-item.overdue.submit-bid .status::before {
            content: "⚑ Overdue: Submit Bid"
        }
        .row-item.overdue.invoice .status::before {
            content: "Overdue: Follow-up on Unpaid Invoice"
        }
        .row-item.overdue.billing-prep .status::before {
            content: "Critical Billing Info"
        }
        .due-soon.eval-ITB .status::before,
        .due-soon .status::before {
            content: "⚐ Due soon";
            color: light-dark(oklch(from var(--color-orange) calc(l - .15) c h), oklch(from var(--color-orange) calc(l + .15) c h));
            white-space: nowrap;
        }
        .due-soon.eval-ITB .status::before {
            content: "⚐ Due Soon: Evaluate ITB"
        }
        .due-soon.change-order .status::before {
            content: "Bill for Change Orders"
        }
        .due-soon.add-accounting .status::before {
            content: "Add your accounting teammate"
        }
        .due-soon.consistent-billing .status::before {
            content: "Maintain consistent billing tasks"
        }
        .due-soon.invoice-status .status::before {
            content: "Keep Invoice Statuses Accurate"
        }
        .due-soon.finish-prep .status::before  {
            content: "Finish Critical/Prep for this project";
        }
        .due-soon.review-po .status::before  {
            content: "Double-check the PO builder";
        }
        .favorite::before {
            content: "♥ Favorite";
            color: var(--color-green);
            white-space: nowrap;
            position: absolute;
        }
        .duplicate::before {
            content: "⚐ Potential Duplicate";
            color: var(--color-orange);
            white-space: nowrap;
        }

        .problematic::before {
            content: "⚠️ Problematic";
            color: var(--color-red);
            white-space: nowrap;
        }
        .status-col::before,
        .priority-col::before {
            position: absolute;
        }
        .hidden-proj::before {
            content: "🙈 Hidden";
            color: var(--color-full);
            white-space: nowrap;
        }
        .needs-review::before {
            content: "⚠ Needs Review";
            color: var(--color-chocolate);
            white-space: nowrap;
        }
        .expired:not(:has(.status-won)):before {/* :not is to hide expiring status from won opps as it's not relevant */
            content: "⚑ Expired";
            color: var(--color-red);
            white-space: nowrap;
        }
        .expiring:not(:has(.status-won)):before {/* :not is to hide expiring status from won opps as it's not relevant */
            content: "⚐ Expiring soon";
            color: light-dark(oklch(from var(--color-orange) calc(l - .15) c h), oklch(from var(--color-orange) calc(l + .15) c h));
            white-space: nowrap;
        }
        .notViewed::before {
            content: "⚑ New!";
            color: var(--color-green);
            white-space: nowrap;
        }
        .viewed::before {
            content: "Viewed by Fname L.";
            color: oklch(from var(--color-dark-blue) l c h / 65%)
        }

        .content-wrapper {
            display: flex;
            align-items: flex-start
        }

        .task-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-blue)
        }
        .due-soon .task-icon {
            color: var(--color-orange)
        }
        .overdue .task-icon {
            color: var(--color-red)
        }

        .content-details {
            flex: 1
        }
        
        /* Shortened Opportunities "table" */
        .opps-shortened .content-wrapper {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 3.125rem 3.125rem;
            align-items: center;
            gap: 0.5rem
        }
        .opps-shortened .header-row .content-wrapper {
            font-size: var(--font-size-small);
            font-weight: bold;
            color: var(--color-row-headers)
        }
        .opps-shortened .content-details:not(:first-child),
        .text-nowrap-ellip /* create a utility class */ {
            white-space:nowrap;
            overflow: hidden;
            text-overflow: ellipsis}


        /* Fun banners for locations & other settings */
        .item-box {
            display: grid;
            align-items: center;
            grid-template-columns:2rem auto max-content;
            padding: 1rem; 
            color: var(--color-dark-blue); 
            font-weight: 500;
            border-radius: var(--radius-secondary); 
            margin-bottom: var(--primary-radius-and-padding-half)
        }
        .item-box.compact {padding: 0; }
        .item-box.specific-callout.compact {padding: .5rem; }
        .item-box.specific-callout.ultra-compact {padding: .25rem; font-size: var(--font-size-smallest);}

        .item-box:has(.avatar-photo) {
            grid-template-columns:3.5rem auto 2rem;}
        .item-box.two-col {
            grid-template-columns: auto auto;
        }
        .item-box i {font-size: 1.25rem;}
        .item-box-actions-section {display: inline-flex; justify-content: flex-end; gap:1rem;}
        .item-box.anything {background-color: oklch(from var(--color-chocolate) l c h / 15%);}
        .item-box.specific-callout {background-color: oklch(from var(--color-blue) l c h / 15%);}
        .item-box.specific-callout.company-contact {background-color: oklch(from var(--color-chocolate) l c h / 15%);}
        .item-box.anything span {color: var(--color-chocolate);}
        .item-box.specific-callout span {color: var(--color-blue)}
        .item-box.specific-callout.company-contact span {color: var(--color-chocolate)}
        .item-box.specific-callout :not(.to-configure-box) span,
        .item-box.anything :not(.to-configure-box) span,
        .item-box.item-box.problematic-partner-box span,
        .item-box.item-box.do-not-bid-box span,
        .item-box.item-box.preferred-partner-box span {font-weight: bold;}
        .item-box.specific-callout.open-item span { color: var(--color-full)}

        .item-box.inactive {
            border: 1px dashed oklch(from var(--color-blue) l c h / 85%);
        background-color: var(--color-none);}

    /* Project phase banners & statues & callouts */
    .project-phase-banner {text-align: center;
        font-weight: 500; 
        padding: calc(var(--primary-radius-and-padding) / 4) var(--primary-radius-and-padding);
        color: var(--color-none);
    }
   .project-phase-banner.bid-invite {background-color: var(--color-orange);}
   .item-box.phase-leader {
        background-color: oklch(from var(--color-orange) l c h / 15%); 
        border: 1px solid oklch(from var(--color-orange) l c h / 40%);
    }
    .item-box.phase-leader small span {color: light-dark(oklch(from var(--color-orange) calc(l - .15) c h), oklch(from var(--color-orange) calc(l + .15) c h))}

    .project-phase-banner.opp { background-color: var(--color-chocolate);}
    .item-box.phase-leader.opp { background-color: oklch(from var(--color-chocolate) l c h / 15%);
        border: 1px solid oklch(from var(--color-chocolate) l c h / 40%);
    }
    .item-box.phase-leader.proj-won,
    .item-box.preferred-partner-box { background-color: oklch(from var(--color-green) l c h / 15%);
    }
    .item-box.phase-leader.proj-accepted,
    .item-box.phase-leader.proj-won { 
        border: 1px solid oklch(from var(--color-green) l c h / 40%);
    }
    .item-box.problematic-partner-box { background-color: oklch(from var(--color-orange) l c h / 15%);}
    .item-box.phase-leader.proj-lost,
    .item-box.do-not-bid-box { background-color: oklch(from var(--color-red) l c h / 15%);
    }
    .item-box.phase-leader.proj-lost {
        border: 1px solid oklch(from var(--color-red) l c h / 40%);
    }
    .item-box.phase-leader.proj-submitted {background-color: oklch(from var(--color-blue) l c h / 15%);
        border: 1px solid oklch(from var(--color-blue) l c h / 40%);
    }
    .item-box.phase-leader.job-in-progress {border: 1px solid var(--color-purple)}

    .item-box.phase-leader.proj-accepted,
    .item-box.phase-leader.proj-draft,
    .item-box.phase-leader.proj-review,
    .item-box.phase-leader.proj-ITB {
        background-color: transparent
    }
    .item-box.phase-leader.proj-draft {
            border: 1px solid var(--color-chocolate)
    }
    .item-box.phase-leader.proj-ITB {border: 2px dashed oklch(from var(--color-dark-blue) l c h / 50%)    }
    .item-box.phase-leader.job-critical-prep {border: 1px solid oklch(from var(--color-dark-blue) l c h / 50%)}

    .item-box.phase-leader.opp small span {color: light-dark(oklch(from var(--color-chocolate) calc(l - .1) c h), oklch(from var(--color-chocolate) calc(l + .1) c h))}
    .item-box.phase-leader.proj-accepted small span,
    .item-box.phase-leader.proj-won small span,
    .item-box.preferred-partner-box small span {color: light-dark(oklch(from var(--color-green) calc(l - .1) c h), oklch(from var(--color-green) calc(l + .1) c h))}
    .item-box.phase-leader.proj-lost small span {color: light-dark(oklch(from var(--color-red) calc(l - .15) c h), oklch(from var(--color-red) calc(l + .15) c h))}
    .item-box.problematic-partner-box small span,
    .item-box.phase-leader.job-paused span {color: light-dark(oklch(from var(--color-orange) calc(l - .1) c h), oklch(from var(--color-orange) calc(l + .1) c h))}
    .item-box.do-not-bid-box small span {color: light-dark(oklch(from var(--color-red) calc(l - .1) c h), oklch(from var(--color-red) calc(l + .1) c h))}
    .item-box.phase-leader.proj-submitted span {color: light-dark(oklch(from var(--color-blue) calc(l - .15) c h), oklch(from var(--color-blue) calc(l + .15) c h));}
    .item-box.phase-leader.proj-draft span {color: var(--color-chocolate)}
    .item-box.phase-leader.proj-ITB span,
    .item-box.phase-leader.job-critical-prep span {color: oklch(from var(--color-dark-blue) l c h / 75%)}
    .item-box.phase-leader.job-in-progress span {color: var(--color-purple)}


        .project-phase-banner.phase-new {border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-green);}
        .project-phase-banner.work-in-progress { border-bottom: calc(var(--primary-radius-and-padding) / 4) solid oklch(from var(--color-faded-teal) l c h / 40%);}
        .project-phase-banner.estimate-internal-review,
        .project-phase-banner.estimate-negotiating,
        .project-phase-banner.job-paused  { border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-orange);}
        .project-phase-banner.estimate-submitted {border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-blue);}
        .project-phase-banner.project-won,
        .project-phase-banner.opp.project-won {
            background-color: oklch(from var(--color-green) l c h / 15%);
            color: var(--color-green);
            border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-green);}
        .project-phase-banner.project-lost {
            color: light-dark(oklch(from var(--color-red) calc(l - .15) c h), oklch(from var(--color-red) calc(l + .15) c h));
            background-color: oklch(from var(--color-red) l c h / 30%);
            border-bottom: calc(var(--primary-radius-and-padding) / 4) solid light-dark(oklch(from var(--color-red) calc(l - .15) c h), oklch(from var(--color-red) calc(l + .15) c h));}
   
    .project-phase-banner.job { background-color: var(--color-teal);}
        .project-phase-banner.job-critical-prep { border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-dark-blue);}
        .project-phase-banner.job-in-progress { border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-purple);}
        .project-phase-banner.job-work-completed { border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-blue);}
        .project-phase-banner.job-balance-paid { border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-green);}
        .project-phase-banner.job-balance-overdue { border-bottom: calc(var(--primary-radius-and-padding) / 4) solid var(--color-red);}
    .item-box.phase-leader.job { background-color: oklch(from var(--color-teal) l c h / 15%);
        border: 1px solid oklch(from var(--color-teal) l c h / 40%);
    }
    .item-box.phase-leader.job small span {color: light-dark(oklch(from var(--color-chocolate) calc(l - .1) c h), oklch(from var(--color-chocolate) calc(l + .1) c h))}

   .project-phase-banner.bid-invite::after {content: "Project Invite"; }
   /* Placeholder for temp opportunity phase as estimating was De-prioritized for Alpha; */
   .project-phase-banner.opp::after {content: "Opportunity"; }
   .project-phase-banner.phase-new::after {content: "New Opportunity"; }
   .project-phase-banner.work-in-progress::after {content: "Opportunity; Estimate In-draft"; }
   .project-phase-banner.estimate-internal-review::after {content: "Opportunity; Estimate Awaiting Internal Review"; }
   .project-phase-banner.estimate-submitted::after {content: "Opportunity; Estimate Submitted "; }
   .project-phase-banner.estimate-negotiating::after {content: "Opportunity; Negotiating Final Estimate"; }
   .project-phase-banner.project-won::after {content: "Project Won!"; }
   .project-phase-banner.project-lost::after {content: "Project Lost"; }
   .project-phase-banner.job::after {content: "Work-in-progress"; }
   .project-phase-banner.job-critical-prep::after {content: "WIP; Critical/Prep"; }
   .project-phase-banner.job-in-progress::after {content: "WIP; In-progress"; }
   .project-phase-banner.job-paused::after {content: "WIP; Paused"; }
   .project-phase-banner.job-work-completed::after {content: "WIP; Work Completed"; }
   .project-phase-banner.job-balance-paid::after {content: "WIP; Balance Paid"; }
   .project-phase-banner.job-balance-overdue::after {content: "WIP; Balance Overdue"; }
   
   /* specific labels for phase leaders & project statuses */
   .item-box.phase-leader small span:before {display: block; margin-bottom: .25rem;}
   .item-box.phase-leader small span:before {content: "Invite Phase Owner"}
   .item-box.phase-leader.opp small span:before {content: "Opp. Phase Owner"}
   .item-box.phase-leader.job small span:before {content: "Job Phase Owner"}
   .item-box.phase-leader.proj-accepted small span:before {content: "Accepted"}
   .item-box.phase-leader.proj-draft small span:before {content: "Draft"}
   .item-box.phase-leader.proj-review small span:before {content: "Internal Review"}
   .item-box.phase-leader.proj-submitted small span:before {content: "Submitted"}
   .item-box.phase-leader.proj-negotiating small span:before {content: "Negotiating"}
   .item-box.phase-leader.proj-lost small span:before {content: "Lost"}
   .item-box.phase-leader.proj-won small span:before {content: "Won"}
   .item-box.phase-leader.proj-ITB small span:before {content: "Invite"}
   .item-box.phase-leader small span:before {
            background-color: oklch(from var(--color-full) l c h / 15%);
            color: var(--color-full)
        }

   /* Empty data states & configuration callouts */
   .item-box.specific-callout.open-item,
   .to-configure-box { 
        border: 1px dashed oklch(from var(--color-dark-blue) l c h / 50%);
        background-color: var(--color-faded-teal);
   }
   .to-configure-box {
            display: inline-flex;
            text-decoration: none;
            align-items: center;
            padding: calc(var(--primary-radius-and-padding) / 4) calc(var(--primary-radius-and-padding) / 4);
            margin-bottom: calc(var(--primary-radius-and-padding) / 4);
            color: oklch(from var(--color-dark-blue) l c h / 80%);
            border-radius: var(--radius-secondary);
            font-size: var(--font-size-primary);
            transition: all 0.15s linear;
            width: -webkit-fill-available;
            cursor: pointer;
        }
        .to-configure-box span {text-decoration: underline}

    .compact.to-configure-box {
            font-size: var(--font-size-small);
            padding: calc(var(--primary-radius-and-padding) / 5) calc(var(--primary-radius-and-padding) / 5);
        }
        .compact.to-configure-box .icon {width: 1.5rem;height: 1.5rem;font-size: 1.5rem;}
        
    /* Keyboard shortcut section help callouts */
    kbd {
            background-color: var(--color-faded-teal);
            padding: 0.125rem 0.375rem;
            border-radius: 3px;
            font-family: monospace;
            font-size: var(--font-size-smallest);
            border: 1px solid oklch(from var(--color-khaki) l c h / 35%);
        }
    .estimate-bottom-helpers {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--primary-radius-and-padding);
            }
        .get-started-auto-options {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: var(--primary-radius-and-padding);
            }
        .get-started-auto-options.reverse {
            grid-template-columns: 1fr 2fr;
            }

        /* Utility Classes */
        .hidden {display: none !important}
        .uppers {text-transform: uppercase;}

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

        .bg-chocolate {background-color: var(--color-chocolate);--color-shadows: light-dark(oklch(from var(--color-chocolate) l c h / 15%), var(--color-chocolate));}
        .bg-orange {background-color: var(--color-orange);--color-shadows: light-dark(oklch(from var(--color-chocolate) l c h / 15%), var(--color-chocolate));}
        .bg-blue {background-color: var(--color-blue)}
        .bg-teal {background-color: var(--color-teal)}
        .bg-faded-blue {background-color: var(--color-faded-blue)}
        .bg-khaki {background-color: var(--color-khaki)}
        .bg-DB-fifteen {background-color: var(--color-DB-fifteen)}
        .bg-none {background-color: var(--color-none)}

        .disabled {cursor: not-allowed}

        .padding-one {padding: 1rem}
        .padding-left-quarter {padding-left: calc(var(--primary-radius-and-padding) / 4)}
        .padding-left-half {padding-left: var(--primary-radius-and-padding-half)}
        .padding-left-none {padding-left: 0}
        .padding-bottom-half {padding-bottom: var(--primary-radius-and-padding-half)}
        .padding-bottom-none {padding-bottom: 0}
        
        .padding-top-half {padding-top: var(--primary-radius-and-padding-half)}
        .padding-top-none {padding-top: 0}

        .padding-right-full {padding-right: var(--primary-radius-and-padding)}
        .padding-right-half {padding-right: var(--primary-radius-and-padding-half)}
        .padding-right-quarter {padding-right: calc(var(--primary-radius-and-padding) / 4)}

        .margin-left-full {margin-left: var(--primary-radius-and-padding)}
        .margin-left-one {margin-left: 1rem}
        .margin-left-half {margin-left: .5rem}
        .margin-right-one {margin-right: 1rem}
        .margin-right-half {margin-right: .5rem}
        .margin-right-eighth {margin-right: calc(var(--primary-radius-and-padding) / 8)}
        .margin-right-full {margin-right: var(--primary-radius-and-padding)}
        .margins-primary {margin: var(--primary-radius-and-padding)}

        .margin-bottom-none,
        p.margin-bottom-none {margin-bottom: 0}
        .margin-bottom-half {margin-bottom: var(--primary-radius-and-padding-half)}

        .margin-top-none {margin-top: 0}
        .margin-top-eighth {margin-top: calc(var(--primary-radius-and-padding) / 8)}
        .margin-top-quarter {margin-top: calc(var(--primary-radius-and-padding) / 4)}
        .margin-top-half {margin-top: var(--primary-radius-and-padding-half)}
        .margin-top-full {margin-top: var(--primary-radius-and-padding)}
        .margin-bottom-full {margin-bottom: var(--primary-radius-and-padding)}

        .text-full{color: var(--color-full)}
        .text-red{color: var(--color-red)}
        .text-green{color: var(--color-green)}
        .text-chocolate{color: var(--color-chocolate)}
        .text-blue{color: var(--color-blue)}
        .text-dark-blue-80 {color: oklch(from var(--color-dark-blue) l c h / 80%)}
        .text-orange{color: var(--color-orange)}
        .text-orange-brighter {color: light-dark(oklch(from var(--color-orange) calc(l - .075) c h), oklch(from var(--color-orange) calc(l + .15) c h))}
        .text-khaki{color: var(--color-khaki)}
        .text-faded-blue{color: var(--color-faded-blue)}
        .text-yellow,
        .text-yellow i {color: light-dark(oklch(from var(--color-orange) calc(l + .1) c h), oklch(from var(--color-orange) calc(l + .15) c h));}

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

        .text-nowrap {white-space: nowrap;}
        .text-wrap-anywhere {overflow-wrap: anywhere}

        .text-small {font-size: var(--font-size-small);}
        .font-smallest,
        .text-smallest {font-size: var(--font-size-smallest);}
        .text-large {font-size: var(--font-size-large);}
        .text-larger {font-size: var(--font-size-larger);}
        .text-largest {font-size: var(--font-size-largest);}

        .justify-self-center {justify-self: center}

        .text-thicker {font-weight: 500}
        .text-midweight {font-weight: 600}
        .text-bold {font-weight: 700}
        .text-bolder {font-weight: 800}
        .text-boldest {font-weight: 900}

        .text-icon-align-center {display:flex; align-items:center}

        .inline-icon-text {
            color: oklch(from var(--color-dark-blue) l c h / 70%);
            display: grid;
            grid-template-columns: 1.75rem auto;
            align-items: center
        }
        .inline-icon-text .icon-small {margin-top:-4px}

        .width-max-content {max-width: max-content;}

        .emoji-wrapper {
            font-family: "Noto Color Emoji", sans-serif;
            font-weight: 400;
            font-style: normal
        }

        .demo-item-disabled { /* fake it til ya make it */
            pointer-events: none;  
            cursor: not-allowed
        }
        .flip-horizontal {transform: rotate(180deg)}

        .margin-bag::before{
            content: '%';
            margin-left: .4rem;
            font-weight: 700;
            font-size: .6rem;
            position: absolute;
            margin-top: .35rem
        }

        .currency-prepend::before {content: '$'}
        .percent-append::after {content: '%'}

        .orange-border-1 {border: 1px solid var(--color-orange)}
        .orange-border-2 {border: 2px solid var(--color-orange)}
        .red-border-1 {border: 1px solid var(--color-red)}
        .red-border-2 {border: 2px solid var(--color-red)}
        .blue-border-1 {border: 1px solid var(--color-blue)}
        .blue-border-2 {border: 2px solid var(--color-blue)}
        .green-border-1 {border: 1px solid var(--color-green)}
        .green-border-2 {border: 2px solid var(--color-green)}

        .border-top-left-primary{border-top-left-radius: var(--primary-radius-and-padding)}

        .width-max-content {width: max-content;}

        .dragging {
            opacity: .5;
            box-shadow: var(--shadow-large-base) var(--color-shadows);
            cursor: grabbing;
            }

        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .sidebar.collapsed .nav-item:hover::after {
                opacity: 1;
            }
            
            .nav-item:hover:not(.active),
            .tertiary-nav-item:hover:not(.active)  {
                background-color: oklch(from var(--color-teal) l c h / 15%);
                color: oklch(from var(--color-dark-blue) l c h / 100%);
                cursor: pointer;
            }
            .nav-item:hover:not(.active) {
                border-left: 4px solid var(--color-teal);
            }
            .nav-item:hover:not(.active) .icon {
                color: var(--color-teal);
            }
            .nav-item:hover:not(.active) .count {
                background-color: var(--color-teal);
            }
            
            .tertiary-nav-item:hover:not(.active) {
                border-bottom: 3px solid var(--color-teal);
            }
            .btn.primary:not(.disabled):hover,
            a.btn.primary:not(.disabled):hover,
            .action-btn.primary:not(.disabled):hover,
            a.action-btn.primary:not(.disabled):hover {
                background: oklch(from var(--color-teal) l c h / 15%);
            }
            .btn.primary.compile:not(.disabled):hover {background: var(--color-none)}
            .btn.primary:not(.disabled):hover,
            a.btn.primary:not(.disabled):hover {
                border: 2px solid var(--color-dark-blue);
            }
            .promo .btn.primary:hover,
            .promo a.btn.primary:hover {
                background: oklch(from var(--color-faded-blue) l c h / 85%);
                color: var(--color-dark-blue);
                border: 2px solid var(--color-none);
            }
            .action-btn.primary:not(.disabled):hover,
            a.action-btn.primary:not(.disabled):hover {
                border: 1px solid var(--color-green);
            }
            .btn:not(.disabled):hover,
            a.btn:not(.disabled):hover,
            a.icon:not(.disabled):hover {
                background-color: var(--color-faded-blue);
                color: var(--color-dark-blue);
            }
            .btn:not(.disabled):hover span,
            a.btn:not(.disabled):hover span,
            a.icon:not(.disabled):hover span {
                text-decoration: underline;
                text-underline-offset: .2rem;
                text-decoration-thickness: 2px;
            }
            .btn.regressive:not(.disabled):hover,
            a.btn.regressive:not(.disabled):hover,
            a.icon.regressive:not(.disabled):hover {
                background-color: oklch(from var(--color-red) l c h / 20%);
            }
            .btn.advance:not(.disabled):hover,
            a.btn.advance:not(.disabled):hover,
            a.icon.advance:not(.disabled):hover {
                background-color: oklch(from var(--color-green) l c h / 20%);
            }
            .action-btn:hover,
            .user-options-btn:hover,
            .line-item-list tr.row-expandable:hover .expand-row-cell .action-btn {
                position: relative;
                transform: translateY(-4px);
            }
            .compile:hover {
                position: fixed;
                transform: translateY(-4px);
            }

            .action-btn:hover,
            .user-options-btn:hover,
            .line-item-list tr.row-expandable:hover .expand-row-cell .action-btn {
                background-color: oklch(from var(--color-blue) l c h / 20%);
                transform: translateY(-4px);
                box-shadow: var(--shadow-large-base) var(--color-shadows)
            }
            .line-item-list tr.row-expandable:hover .expand-row-cell .action-btn {
                box-shadow: var(--shadow-large-base) light-dark(oklch(from var(--color-dark-blue) l c h / 15%), oklch(from var(--color-khaki) calc(l - 0.35) c h / 80%))
            }
            .alert-banner.notice .action-btn:hover {
                background-color: oklch(from var(--color-chocolate) l c h / 30%);
                border-color: light-dark(oklch(from var(--color-dark-blue) l c h / 80%), oklch(from var(--color-chocolate) l c h / 80%))}
            .alert-banner.confirm .action-btn:hover {
                background-color: oklch(from var(--color-green) l c h / 40%);
                border-color: var(--color-green)}
            .alert-banner.warning .action-btn:hover {
                background-color: oklch(from var(--color-red) l c h / 40%);
                border-color: var(--color-red)}
            .alert-banner.take-action .action-btn:hover {
                background-color: oklch(from var(--color-orange) l c h / 20%);
                border-color: light-dark(oklch(from var(--color-orange) calc(l - .15) c h / 50%), oklch(from var(--color-orange) calc(l + .15) c h / 50%))}
            .alert-banner.critical .action-btn:hover {
                background-color: oklch(from var(--color-none) l c h / 20%);
                border-color: oklch(from var(--color-none) l c h / 50%)}
            .back-to-top:hover {
                background: oklch(from var(--color-none) l c h / 100%);
            }
            .opps-table th:not(:first-child):not(:last-child):hover {
                color: var(--color-dark-blue);
                background-color: oklch(from var(--color-teal) l c h / 20%);
            }
            .action-btn:hover,
            .user-options-btn:hover,
            .user-options-btn:hover .user-avatar,
            .line-item-list tr.row-expandable:hover .expand-row-cell .action-btn {
                border: 1px solid oklch(from var(--color-dark-blue) l c h / 55%);
            }
            .action-btn.disabled:hover {
                transform:none;
                border: inherit;
            }
            a:where(:not(.btn):not(.action-btn):not(.icon):not(.nav-item):not(.nav-subitem):not(.tertiary-nav-item):not(.select-option-link):not(.to-configure-box):not(.tag-button):not(.day-badge-link)):hover,
            #limit-warning a:hover {
                color: inherit;
                background-size: 0 4px, 100% 4px;
                cursor: pointer;
                }
            .to-configure-box:hover {
                color: inherit;
                background: oklch(from var(--color-khaki) l c h / 40%);
                border-color: var(--color-dark-blue)
                }
            .to-configure-box:hover span {
                text-decoration: underline;
                text-decoration-thickness: 3px;
                text-decoration-color: oklch(from var(--color-dark-blue) l c h / 60%);
                }
            small a:hover,
            .small a:hover,
            a.small:hover {
                background-size: 0 3px, 100% 3px;
                }
            .active:hover {cursor: default}

            .floating-actions .action-btn:hover::before,
            .floating-actions .action-btn:hover::after {
                opacity: 1;
            }            
            .action-btn.regressive:not(.compact):hover {
                background-color: oklch(from var(--color-red) l c h / 40%);
                border-color: var(--color-red);
            }
            .action-btn.take-action:not(.compact):hover {
                background-color: oklch(from var(--color-orange) l c h / 30%);
                border-color: var(--color-orange);
            }
            .action-btn.advance:not(.compact):hover {
                background-color: oklch(from var(--color-green) l c h / 40%);
                border-color: var(--color-green);
            }
            .floating-actions .action-btn:hover {
                transform: translateX(-4px) scale(1.05);
            }
            /* Clear hover effects for compact action buttons */
            .action-btn.compact:hover {
                border: none;
                box-shadow: none;
                background-color: transparent;
            }
            .floating-actions .action-btn.primary:hover {
                color: var(--color-green);
                box-shadow: 0 4px 12px oklch(from var(--color-blue) l c h / 50%), 
                            0 0 24px oklch(from var(--color-blue) l c h / 30%);
            }
            /* Tooltips for desktop only */
            *[data-tooltip]:hover {z-index: 999}
            *[data-tooltip]::before {
                content: attr(data-tooltip);
                position: absolute;
                background-color: var(--color-dark-blue);
                color: var(--color-none);
                padding: 0.5rem .75rem;
                border-radius: var(--radius-secondary);
                font-size: var(--font-size-small);
                font-weight: 500;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s ease;
                box-shadow: 0 2px 8px var(--color-shadows);
                z-index: 200;
                text-transform: none;
                text-align: left;
                width: max-content;
                max-width: 16rem;
                white-space: normal;
                word-wrap: break-word; /* safety net for long words */
            }
                .action-btn[data-tooltip]::before,
                .partner-type-btn[data-tooltip]::before {top: calc(100% + 10px)}
                .badge[data-tooltip]::before {top:2.25rem;left: 10%;}

            *[data-tooltip]::after {
                content: '';
                position: absolute;
                transform: translateX(-50%);
                border: 5px solid transparent;
                border-bottom-color: var(--color-dark-blue);
                opacity: 0;
                transition: opacity 0.2s ease;
                z-index: 100;
            }
                .action-btn[data-tooltip]::after,
                .partner-type-btn[data-tooltip]::after {top: calc(100% + 2px);left: 50%;}
                .badge[data-tooltip]::after {top:1.7rem;left: 35%;}

            *[data-tooltip]:not(:disabled):hover::before,
            *[data-tooltip]:not(:disabled):hover::after {
                opacity: 1;
            }
            /* Full-opacity tooltips on disabled buttons, when desired */
            .show-tt.disabled {
                opacity: 1;
            }

            .show-tt.disabled > * {
                opacity: 0.45;
            }

            .show-tt[data-tooltip]:hover::before,
            .show-tt[data-tooltip]:hover::after {
                opacity: 1;
            }

            /* Override for actions positioned far-right on screen - give right-positioned tooltips */
            *.positioned-right[data-tooltip]::before {
                transform: translateX(-40%);
            }
            /* Override for actions positioned far-left on screen but arrow needs to stay on top - give left-positioned tooltips */
            *.positioned-bottom-left[data-tooltip]::before {
                transform: translateX(40%);
            }
            /* Fix for tooltips inside transformed containers (like right-panel) */
            .right-panel .positioned-right[data-tooltip]::before,
            .badge.positioned-right[data-tooltip]::before {
                left: auto;
                right: 0;
                transform: translateX(0);
            }
            .right-panel .positioned-bottom-left[data-tooltip]::before {
                left: 0;
                transform: translateX(0);
            }
            /* Override for actions positioned far-right on screen - give bottom-right-positioned tooltips */
            *.positioned-bottom-right[data-tooltip]::before {
                bottom: auto;
                top: 50%;
                left: auto;
                right: calc(100% + 10px);
                transform: translateY(-50%);
            }
            *.positioned-bottom-right[data-tooltip]::after {
                bottom: auto;
                top: 50%;
                left: auto;
                right: calc(100% + 2px);
                transform: translateY(-50%);
                border: 5px solid transparent;
                border-left-color: var(--color-dark-blue);
                border-top-color: transparent;
                }
            /* Override for actions positioned far-left on screen - give left-positioned tooltips */
            *.positioned-left[data-tooltip]::before {
                bottom: auto;
                top: 50%;
                right: auto;
                left: calc(100% + 10px);
                transform: translateY(-50%);
            }
            *.positioned-left[data-tooltip]::after {
                bottom: auto;
                top: 50%;
                right: auto;
                left: calc(100% + 2px);
                transform: translateY(-50%);
                border: 5px solid transparent;
                border-left-color: var(--color-dark-blue);
                border-top-color: transparent;
            }
            
        }