:root {
    /* ===== Button palette tokens (design-refresh backlog #2) ===== */
    /* Primary — vertical gradient, identical to the module-header gradient */
    --btn-primary-grad:        linear-gradient(180deg, #00AD5E 0%, #009E4F 55%, #007F3E 100%);
    --btn-primary-grad-hover:  linear-gradient(180deg, #009E4F 0%, #008E46 55%, #00773B 100%);
    --btn-primary-grad-active: linear-gradient(180deg, #008E46 0%, #00773B 100%);

    /* Danger */
    --btn-danger:        red;
    --btn-danger-hover:  darkred;
    --btn-danger-active: crimson;

    /* Flat accent chips */
    --btn-accent-success: #23AE58;
    --btn-accent-info:    #23ADD7;
    --btn-accent-warning: #F28C28;

    /* Shared */
    --btn-shadow:           2px 2px 3px rgba(0,0,0,0.20);
    --btn-shadow-hover:     1px 1px 2px rgba(0,0,0,0.20);
    --focus-ring-color:     rgba(34,142,194,0.35);   /* brand accent-blue #228EC2 @ 35% — shared by buttons + form fields */
    --btn-focus-ring-color: var(--focus-ring-color);

    /* ===== /Metrics — Rep Quoting Activity (Nameplate-on-CREED retheme) =====
       Every value is invert-checked: dark mode is invert(100%) hue-rotate(180deg) on
       <html>, so only mid-tone ink survives. Identity pair (--mp-uc/--mp-cu) is
       colorblind-validated all-pairs in BOTH modes. Do not add warm washes — they
       collapse under the invert. Spec:
       docs/superpowers/specs/2026-08-25-metrics-retheme-nameplate-creed-design.md */
    --mp-plane:    #EDF1EE;   /* page field (the global body dot-grid PNG tiles over it) */
    --mp-plate:    #FFFFFF;   /* card / plate / chart surface */
    --mp-rule:     #9AA8A0;   /* interior structural hairline — 2.48:1 light / 3.08:1 dark */
    --mp-grid:     #C6D2CB;   /* gridlines, KPI cell dividers, table row rules */
    --mp-hair:     #DCE5DF;   /* faintest rules (key rows, notes grid) */
    --mp-dot:      #CDD9D2;   /* stat-strip dot separators */
    --mp-ink-1:    #22302A;   /* primary ink */
    --mp-ink-2:    #4C5A53;   /* body ink */
    --mp-ink-3:    #6C7A72;   /* micro-labels + axis ticks (4.50:1 — AA for small bold) */
    --mp-mark:     #0C9543;   /* the measure pen — CREED green (bars/columns, both daily-trend lanes) */
    --mp-uc:       #7571C2;   /* Unit Cooler identity (tuned interior step of .ptChip-uc) */
    --mp-cu:       #0C9543;   /* Condensing Unit identity = card frames = brand green */
    --mp-residual: #7F8F86;   /* 'Unclassified' hollow-outline stroke — never a fill */
    --mp-con:      #C17826;   /* Condenser identity (.ptChip-con interior) — inverts to #BD7422, both bands pass */
    --mp-green-dark: #007F3E; /* micro-label ink on the plane; table header cells */
    --mp-frascold: #005F9C;   /* Frascold brand blue — inverts to #61C0FD (stays blue, 10.5:1 on black) */
    --mp-copeland: #0F3CFF;   /* Copeland brand blue — inverts to #8DBAFF (stays blue, 10.6:1 on black) */
    --mp-chrome-grad: linear-gradient(225deg,#009E4F,#009E4F,#228EC2,#009E4F,#009E4F); /* = .topBar */
    --mp-hover:    #F4FAF6;   /* hover wash (light nicety; the 3px green rail is the real channel) */
    --mp-alert:    #9E2B22;   /* error bar + eyebrow (7.44:1 light / 11.04:1 dark) */
    --mp-tip-bg:   #22302A;   /* tooltip — a dark tooltip is the only one that survives the invert */
    --mp-tip-ink:  #EDF1EE;
    --mp-sans:     'Manrope', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --mp-display:  var(--mp-sans);   /* was Spectral serif; site unified on Manrope */
    --mp-mono:     Consolas, 'SF Mono', Menlo, monospace;
    --mp-wrap:     min(2200px, 100%);   /* full-bleed workspace; the cap only bites on ultrawide monitors */
    --mp-r:        5px;
    --mp-r-xs:     2px;
}

* {
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    transition-property: width, position, left, right, top, bottom, box-shadow;
    transition-duration: 100ms;
    box-sizing: border-box;
}

.christmasLights {
    position: fixed;
    background-image: url('images/christmas_lights.gif');
    background-size: contain;
    background-repeat: repeat-x;
    top: 32px;
    left: 0;
    height: 50px;
    width: 100%;
    pointer-events: none;
    z-index: 99;
}

.darkmode {
    filter: invert(100%) hue-rotate(180deg);
    background-color: ghostwhite;
    /*font-weight: bold;*/ /* makes all text bold */
}
    .darkmode .feedbackContent,
    .darkmode .splashMenu,
    .darkmode .splashMenu2,
    .darkmode .titledGroupTitle,
    .darkmode .tableWrapper {
        filter: invert(10%) hue-rotate(0deg);
    }
    .darkmode .boardBackground {
        filter: invert(10%) hue-rotate(0deg);
    }
    .darkmode .titledGroupTitle{
        background:transparent;
    }
    .darkmode .feedbackContent{
        background-color:ghostwhite;
    }
    .darkmode .listItemContent {
        filter: invert(10%) hue-rotate(0deg);
        background: #E7E7E7
    }

    .darkmode option {
        background: #1e1e1e; /* dark gray panel */
        color: #e0e0e0; /* light text */
    }

    /*.darkmode select {
        background: #1e1e1e;*/ /* dark gray */
        /*color: #e0e0e0;*/ /* light text */
    /*}*/

    .darkmode video,
    .darkmode iframe,
    .darkmode picture,
    .darkmode canvas,
    .darkmode .removeButton,
    .darkmode .feedbackTitle,
    .darkmode .feedbackArrow,
    .darkmode .splashMessage,
    .darkmode .topLogo {
        filter: invert(100%) hue-rotate(180deg);
    }

    .darkmode .removeButton {
        background-color: red;
        filter: invert(100%) hue-rotate(180deg);
    }
    /*html {
    filter: invert(100%) hue-rotate(180deg);*/
    /*    background: black;
*/
    /*}*/
    /*img, video, iframe, picture, canvas {
    filter: invert(100%) hue-rotate(180deg);
}*/
    /*.topLogo {
    filter: invert(100%) hue-rotate(180deg);
}

button {
    filter: invert(100%) hue-rotate(180deg);
}*/
    /* Add this class to make the page read-only */
    .readonly-page, .readonly-page * {
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        background-color: #f5f5f5 !important; /* Optional: subtle visual cue */
        color: #888 !important; /* Optional: dim text */
    }

body {
    overflow: auto;
    background-image: url(Images/dot-grid.png);
    
}

select {
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
    text-align: center;
}

input {
    text-align: center;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(34,142,194,0.85);
    box-shadow: 0 0 0 2px var(--focus-ring-color);
}

    input:disabled {
        background-color: #EFEFEF;
    }

.square-button {
    width: 80px;
    height: 80px;
    background-color: rgb(12, 149, 67);
    color: white;
/*    border: none;
*/    cursor: pointer;
    font-size: 14px;
    margin: 10px 10px 0 0;
    transition: background-color 0.3s;
    border-radius: 5px;
}

    .square-button:hover {
        background-color: darkgreen;
    }

    .square-button.active {
        background-color: #004d00; /* Darker green for active */
    }

/* toolTab container */
.toolTab-container {
    margin-top: 20px;
    display: none;
}

.toolTab-buttons button {
    padding: 10px 20px;
    margin-right: 5px;
    cursor: pointer;
    background-color: rgb(12, 149, 67);
    border: none;
}

    .toolTab-buttons button.active {
        background-color: #aaa;
    }

.toolTabButtons, #toolTabButtons {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.toolTab-content {
    display: none;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    position: relative;
    overflow:hidden;
}

    .toolTab-content.active {
        display: block;
    }

.close-tab-button {
    position: absolute;
    top: 5px;
    right: 10px;
    background-color: var(--btn-danger);
    color: white;
/*    border: none;
*/    cursor: pointer;
    padding: 5px 10px;
    font-size: 12px;
    border-radius:5px;
}

.splash {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: #23AE58;*/
    z-index: 10;
}

.splashBackground {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: red;*/
    background: linear-gradient(225deg,#009E4F,#009E4F,#009E4F,#009E4F,#228EC2,#009E4F,#009E4F,#009E4F,#009E4F) !important;
    animation: fancyGradient 120s forwards;
    transform-origin: center;
}

@keyframes fancyGradient {
    0% {
        transform: rotate(0deg) scale(400%);
    }
/*    50% {
        transform: rotate(360deg) scale(250%);
    }*/
    5% {
        transform: rotate(360deg) scale(200%);
    }
    40% {
        transform: rotate(0deg) scale(400%);
    }
    70% {
        transform: rotate(360deg) scale(300%);
    }
    100% {
        transform: rotate(0deg) scale(400%);
    }
}

.standalone {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #23AE58;
    z-index: 10;
}

.standaloneContainer {
    overflow: scroll;
}

.standaloneContentContainer {
    overflow: auto;
    width: 100%;
    height: 100%;
}

.standaloneSplash {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #23AE58;
    z-index: 10;
}

.standaloneMessage {
    height: 200px;
    width: 100%;
    text-align: center;
    font-size: 10em;
    color: white;
    transition-duration: 1000ms;
    margin-top: 20px;
}

    .standaloneMessage img {
        max-height: 150px;
        padding: 10px;
        position: relative;
        top: 50%;
        transform: translate(0, -50%);
    }

.splashMessage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10em;
    color: white;
    transition-duration: 1000ms;
    transform: translate(-50%, -50%) scale(var(--zoom-scale)); /* ADDED scale */
    transform-origin: center center;
}

    .splashMessage img {
        max-height: 150px;
        padding: 10px;
    }

.splashLoader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.splashLoaderMessage {
    position: absolute;
    top: 80%;
    left: 50%;
    height: 200px;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    text-align: center;
}

.splashMenu {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--zoom-scale)); /* ADDED scale */
    transform-origin: center center;
    background-color: white;
    width: 35vw;
    min-width: 700px;
    border: 3px solid #0C9543;
    border-radius: 10px;
    font-size: 1.1em;
    box-shadow: 10px 10px 3px 0px rgba(0,0,0,0.4);
}

.splashMenu2 {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--zoom-scale)); /* ADDED scale */
    transform-origin: center center;
    background-color: white;
    width: 20vw;
    min-width: 500px;
    border: 3px solid #0C9543;
    border-radius: 10px;
    font-size: 1.1em;
    box-shadow: 10px 10px 3px 0px rgba(0,0,0,0.4);
    max-height: 200px;
}

.menuHeader {
    text-align: center;
    font-size: 1.5em;
    background-color: #0C9543;
    /*background: linear-gradient(90deg,#0C9543,#228EC2,#0C9543) !important;*/
    color: white;
    width: 100%;
    margin-top: -1px;
}

.changeLogHeader {
    text-align: center;
    font-size: 1.5em;
    background-color: #0C9543;
    /*background: linear-gradient(90deg,#0C9543,#228EC2,#0C9543) !important;*/
    color: white;
    width: 100%;
}

.menuItemHolder {
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 50px;
    padding-top: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    grid-column-gap: 0px;
    grid-row-gap: 50px;
}

.changeLogItemHolder {
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 20px;
    padding-top: 0px;
    max-height:150px;
    overflow:auto;
    scrollbar-width:none;
}

.changeLogMessage {
    padding: 5px;
    width: 100%;
    resize: vertical;
    margin-bottom: 10px;
}

.menuItem {
    width: 200px;
    display: grid;
    align-self: center;
    grid-template-columns: 1fr;
    justify-items: center;
    cursor: pointer;
    font-weight: bold;
    /*box-shadow: 10px 10px 3px 0px rgba(0,0,0,0.4);*/
}

    .menuItem img {
        align-self: center;
        cursor: pointer;
    }

    .menuItem label {
        margin-top: 10px;
        margin-bottom: 10px;
        align-self: center;
        cursor: pointer;
    }

.topLogo {
    max-height: 45px;
    padding: 5px;
    margin-top: 2.5px;
}

.topBar {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    /*background-color: #0C9543;*/
    background: linear-gradient(225deg,#009E4F,#009E4F,#228EC2,#009E4F,#009E4F) !important;
    color: white;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
    z-index: 5;
}

    .topBar > label {
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 2.5em;
        line-height: 50px;
    }

.topBarItems {
    width: 100%;
    height: 50px;
    display: grid;
    /* minmax(0, …) instead of a bare fr: grid items default to min-width:auto,
       which lets a track grow past its fr share to fit its content. A long
       project name (or a zoomed-in / narrow viewport) would then push the whole
       bar wider than 100% and, because .topBar is fixed + overflow is hidden,
       clip the right-most element — the logout button — off screen. minmax(0,…)
       removes that floor so the tracks stay proportional and never overflow. */
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 4fr);
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

    .topBarItems > div:nth-child(1) > img {
        height: 30px;
        margin-top: 10px;
        margin-right: 10px;
        cursor: pointer;
    }

        .topBarItems > div:nth-child(1) > img:nth-child(3) {
            height: 25px;
            transform: translate(0, -2.5px);
        }

    .topBarItems > div:nth-child(2) {
        line-height: 50px;
        font-size: 2.5em;
        justify-self: center;
    }

    .topBarItems > div:nth-child(3) {
        /* Right-hand group: project name | email + logout button. Laid out as a
           flex row pinned to the right edge so the logout button can NEVER be
           pushed off screen — only the project name is allowed to shrink. */
        justify-self: stretch;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        line-height: 50px;
        font-size: 1.4em;
        /* justify-content:flex-end pins the logout button to the right, but it
           also makes any un-shrinkable overflow spill LEFT. Clip it at this
           group's own edge so a long name/email can never bleed over the
           centered logo. (The logout button is at the right edge — never clipped.) */
        overflow: hidden;
    }

        /* Logout button: fixed size, always visible, never shrinks or clips. */
        .topBarItems > div:nth-child(3) > img {
            height: 30px;
            cursor: pointer;
            flex: 0 0 auto;
        }

        /* Base for the group's divs: the "|" separator holds its size; the name
           wrapper and email each override below to shrink when space is tight. */
        .topBarItems > div:nth-child(3) > div {
            height: 50px;
            line-height: 50px;
            margin-right: 10px;
            flex: 0 0 auto;
        }

        /* Only the project name may shrink; it truncates with an ellipsis
           instead of shoving the email + logout button off the right edge. */
        .topBarItems > div:nth-child(3) > div.topProjectName {
            flex: 0 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            /* No overflow:hidden here — the name badge below clips itself, and
               clipping here would cut off the trailing badge's drop-shadow. */
        }

        /* If space is STILL tight after the name has fully collapsed, let the
           email truncate too rather than spilling left toward the logo. */
        #topMenuUserEmail {
            flex: 0 1 auto;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

            .topProjectName .projectNameBadge {
                flex: 0 1 auto;
                min-width: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            /* Base Project / Base Version badges keep their full size. */
            .topProjectName .projectBadgeHolder {
                flex: 0 0 auto;
            }

.systemLink {
    display: block;
    border: 1px solid;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    cursor: pointer;
    user-select: none;
}

.listHolder {
    position: absolute;
    top: 50px;
    left: 0px;
    height: calc(100% - 50px);
    width: calc(100% - 0px);
    /* 0, not fit-content: keep wide cards scrolling INSIDE this area instead of
       forcing the whole page to scroll horizontally (which also dragged the
       absolutely/fixed sidebar around). */
    min-width: 0;
    overflow-y: auto;
    overflow-x: auto;
    padding-right: 25px;
    padding-left: 15px;
}

.listItem {
    display: flex;
    margin-bottom: 5px;
    margin-left: 2px;
    margin-right: 7px;
    margin-top: 25px;
    border: 2px solid #0C9543;
    border-radius: 5px;
    background: white;
    box-shadow: 2px 2px 2px 2px rgb(0 0 0 / 40%);
    flex-direction: column;
    /* Let the content compress/wrap as far as it can, but never below its
       minimum (min-content) — so it shrinks first, and only when it genuinely
       can't fit does #listHolder scroll, instead of spilling past the card. */
    min-width: min-content;
    /* Breathing room above a card when the tree scrolls it to the top
       (scrollIntoView honors scroll-margin), matching the ~15px side gap. */
    scroll-margin-top: 15px;
}

.listItemHeader {
    /* Vertical gradient so every module header looks identical regardless of
       its width (a horizontal gradient showed different color slices on wide
       Box headers vs. narrow nested CU headers). */
    background: linear-gradient( 180deg, #00AD5E 0%, #009E4F 55%, #007F3E 100% );
    color: white;
    padding: 5px 10px 5px 10px;
    font-size: 1.2em;
    width: 100%;
    display: flex;
}

.listItemDetailHolder {
    padding: 10px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.listItemDetailHolder {
}

.listItemDetailDrawing {
    width: 50%;
}

.listItemDetailText {
    /* width: 50%; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    text-align: right;
    font-size: 1.3em;
    font-weight: bold;
    border: 2px solid #0C9543;
    border-radius: 3px;
    padding: 15px;
    box-shadow: 15px 15px 10px 0px rgb(0 0 0 / 40%);
    margin: 25px;
}

    .listItemDetailText div:nth-child(2n) {
        text-align: left;
    }

.boardHolder {
    position: absolute;
    top: 50px;
    left: 300px;
    height: calc(100% - 50px);
    width: calc(100% - 0px);
    padding-right: 25px;
    padding-left: 15px;
}

.boardItem {
    display: flex;
    margin-bottom: 7px;
    margin-left: 2px;
    margin-right: 7px;
    margin-top: 25px;
    border: 2px solid #0C9543;
    border-radius: 5px;
    background: white;
    width: fit-content;
    box-shadow: 2px 2px 2px 2px rgb(0 0 0 / 40%);
    flex-direction: row;
}

.boardItemHeader {
    background-color: #0C9543;
    color: white;
    padding: 5px 10px 5px 10px;
    font-size: 1.2em;
    margin-left: -1px;
}

.boardItemContent {
    width: 1920px;
}

.boardItemDetailHolder {
    padding: 10px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: fit-content;
    flex-direction: column;
}

.boardItemDetailHolder {
}

.boardItemDetailDrawing {
    width: fit-content;
}

.boardItemDetailText {
    /* width: 50%; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    text-align: right;
    font-size: 1.3em;
    font-weight: bold;
    border: 2px solid #0C9543;
    border-radius: 3px;
    padding: 15px;
    box-shadow: 15px 15px 10px 0px rgb(0 0 0 / 40%);
    margin: 25px;
}

    .boardItemDetailText div:nth-child(2n) {
        text-align: left;
    }

.boardGroup {
}

.boardGroupHeader {
}

.boardSystem {
}

.boardSystemHeader {
}

.boardSystemDetails {
}

.boardUnitHeader {
}

.boardUnitDetails {
}

.boardItemChildren {
    display: flex;
}

.boardBackground {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0);
}

.itemDetailHolder {
}


.itemDetailDrawing {
    width: 50%;
}

.itemDetailText {
    /* width: 50%; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    text-align: right;
    font-size: 1.3em;
    font-weight: bold;
    border: 2px solid #0C9543;
    border-radius: 3px;
    padding: 15px;
    box-shadow: 15px 15px 10px 0px rgb(0 0 0 / 40%);
    margin: 25px;
}

    .itemDetailText div:nth-child(2n) {
        text-align: left;
    }

.unitDetails {
}

.boxTagContainer {
    margin: 10px;
}

/*Tabs*/
/* Box tabs share the modern Project tab look (see .projectTabs below). */
.boxTabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    margin: 12px 0 12px 5px;
    border-radius: 14px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
    user-select: none;
}

.boxTabContent {
    min-height: 303px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 16px;
    background: rgba(255,255,255,0.60);
    box-shadow: 0 14px 36px rgba(0,0,0,0.10);
    margin: 8px 5px 20px 5px;
    padding: 16px;
    max-width: 100%;
}

div#boxTabContentlist1 {
}

.selectedTab {
    background-color: #32c76d !important;
    border: none !important;
}

.tab {
    float: left;
}

.tabLabel {
    position: relative;
    display: block;
    line-height: 29px;
    height: 29px;
    padding: 0 1.618em;
    background: #0C9543;
    color: #fff;
    cursor: pointer;
    top: 0;
    transition: all 0.25s;
    width: 150px;
    text-align: center;
    border-radius: 5px;
    margin: 5px;
}

    .tabLabel:hover {
        background: #31b064;
    }

.tabContent {
    padding: 5px;
    display: grid;
    width: fit-content;
    max-width: 100%;
}

    .tabContent.tempBoxContent {
    }

.tempBoxContent {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 30px;
}

.tempBoxLocation {
    display: grid;
    width: 200px;
}

.tempBoxTemps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 250px;
    text-align: right;
    grid-column-gap: 10px;
}

.boxStates {
}

.boxCities {
    width: 200px;
}

.boxPercentile {
}

.tempBoxTempSettings {
    display: grid;
    width: 200px;
}

.constructionBoxContent {
    max-width: 100%;
}

.constructionBoxToggle {
    display: flex;
    grid-column-gap: 10px;
    line-height: 20px;
    font-size: 18px;
    margin-bottom: 10px;
}

.constructionBoxViews {
    max-width: 100%;
    margin-left: 10px;
}

.constructionBoxSimpleView {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 40px;
}

.constructionBoxSimpleDimensions {
    display: grid;
}

.constructionBoxAdvanceSettings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 200px;
    justify-content: center;
    align-items: center;
    justify-items: center;
    grid-row-gap: 4px;
    margin-bottom: 10px;
}

.constructionBoxAdvanceView {
    display: flex;
    /* grid-auto-columns: 1fr 1fr; */
    /* grid-auto-flow: column; */
    align-items: flex-start;
    /* grid-column-gap: 25px; */
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
}

.constructionBoxAdvanceDimensions {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

    .constructionBoxAdvanceDimensions table {
        text-align: center;
        margin-right: 25px;
        margin-bottom: 25px;
    }

.constructionBoxAdvanceComputed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 250px;
    padding-top: 25px;
}

.constructionBoxAdvanceImage {
    padding-top: 100px;
    grid-column: span 2;
}

    .constructionBoxAdvanceImage img {
        max-width: 250px;
    }

.prodLoadBoxContent {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
}

.prodBoxProduct {
    display: grid;
    grid-auto-flow: row;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.prodBoxTitle {
    font-weight: bold;
    margin-top: -22px;
    background: white;
    width: fit-content;
    padding-left: 3px;
    padding-right: 3px;
}

.columnOfInputs {
    display: grid;
    grid-template-columns: 1fr;
}

.prodBoxProductContainer {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 20px;
}

.prodBoxWeight {
    width: 173px;
    text-align: center;
}

.prodBoxProductDetails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 5px;
}

    .prodBoxProductDetails span:nth-child(odd) {
        font-weight: bold;
        text-align: right;
    }

    .prodBoxProductDetails span:nth-child(even) {
    }

.prodBoxDetail {
    font-weight: 100 !important;
}

    .prodBoxDetail span {
        font-weight: 100 !important;
    }

.prodBoxProductMessage {
    color: rgb(173 173 173);
    font-size: 12px;
    padding: 7px;
    margin-bottom: -17px;
}

.miscLoadBoxContent {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 25px;
}

.miscBoxInfiltration {
    width: 180px;
}

    .miscBoxInfiltration input {
        width: 175px;
    }

.miscBoxInfiltrationAshraeUsageFactor {
    width: 175px;
}

.miscBoxInfiltrationOther {
    width: 180px;
}

    .miscBoxInfiltrationOther input {
        width: 175px;
    }

.summaryBoxContent {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 25px;
}

.summaryBoxLoadContainer {
}

.summaryBoxLoads {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 1px;
    grid-template-columns: 1fr;
    grid-column-gap: 5px;
}

    .summaryBoxLoads div:nth-child(even) {
        text-align: center;
    }

    .summaryBoxLoads div:nth-child(odd) {
        font-weight: bold;
    }

.titledGroupContainer {
    display: grid;
    grid-auto-flow: row;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 10px;
    min-width: 500px;
    /*max-width:677px;*/
}

.titledGroupTitle {
    font-size: 15px;
    font-weight: bold;
    margin-top: -22px;
    background: white;
    width: fit-content;
    padding-left: 3px;
    padding-right: 3px;
}

.titledGroupContent {
}

.wideSelect {
    width: 147px;
}

.Pending{
    background-color:darkgoldenrod;
}

.Complete{
    background-color:green;
}

.Delayed{
    background-color:red;
}

.currentStatus {
    height: 40px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    line-height: inherit;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: default;
}

.taskButton {
    border: none;
    background-color: gray;
    color: white;
    width: 160px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: default;
}

.smallButton {
    background: var(--btn-primary-grad);
    border: none;
    color: white;
    width: 173px;
    border-radius: 5px;
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    /* Hover: very slight darken + gentle press */
    .smallButton:hover {
        background: var(--btn-primary-grad-hover);
        box-shadow: var(--btn-shadow-hover);
    }

    /* Active: clearly pressed */
    .smallButton:active {
        background: var(--btn-primary-grad-active);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
        transform: translateY(2px);
    }

/* Shared keyboard-focus ring for the canonical buttons (design-refresh backlog #2) */
.smallButton:focus-visible,
.addButton:focus-visible,
.largeAddButton:focus-visible,
.addOptionBtn:focus-visible,
.ucAddOptionBtn:focus-visible,
.fitContentButton:focus-visible,
.deleteButton:focus-visible,
.deleteButtonContact:focus-visible,
.deleteButtonUserInfo:focus-visible,
.removeButton:focus-visible,
.close-tab-button:focus-visible,
.modalCloseButton:focus-visible,
.instructionsClose:focus-visible,
.selectButton:focus-visible,
.revisionButton:focus-visible,
.viewButton:focus-visible {
    outline: 3px solid var(--btn-focus-ring-color);
    outline-offset: 2px;
}

/* Locked report buttons */
.smallButton.lockedButton {
    background: linear-gradient(270deg, #888 0%, #777 55%, #666 100%) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
    position: relative;
    pointer-events: auto;
}

    .smallButton.lockedButton:hover {
        background: linear-gradient(270deg, #888 0%, #777 55%, #666 100%) !important;
        transform: none !important;
    }

    .smallButton.lockedButton:active {
        background: linear-gradient(270deg, #888 0%, #777 55%, #666 100%) !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .lockableButtonWrapper {
        position: relative;
        display: inline-block;
        justify-self: start;
    }

    .requiredHighlight {
        box-shadow: 0 0 8px 3px rgba(255, 0, 0, 0.7) !important;
        transition: box-shadow 0.3s ease-in;
    }

    .requiredHighlight.fadeOutHighlight {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0) !important;
        transition: box-shadow 2s ease-out;
    }

    .lockableButtonWrapper .lockIcon {
        position: absolute;
        top: -6px;
        right: -6px;
        font-size: 13px;
        line-height: 1;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
        pointer-events: none;
        z-index: 1;
    }

.addButton {
    border: none;
    background: var(--btn-primary-grad);
    color: white;
    width: 125px;
    height: 28px;
    line-height: 30px;
    font-size: 0.7em;
    border-radius: 5px;
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    text-align: center;
    margin-left: auto;
    transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .addButton:hover {
        background: var(--btn-primary-grad-hover);
        box-shadow: var(--btn-shadow-hover);
    }

    .addButton:active {
        background: var(--btn-primary-grad-active);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
        transform: translateY(2px);
    }

.removeButton {
    border: none;
    /*background-color: #23AE58;*/
    background-color: var(--btn-danger);
    color: white;
    width: 30px;
    height: 28px;
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
    margin-left: 5px;
    margin-right: -5px;
}

    .removeButton:hover {
        /*background-color: #15a34e;*/
        background-color: var(--btn-danger-hover);
    }

    .removeButton:active {
        /*background-color: #159a4a;*/
        background-color: var(--btn-danger-active);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    }

.revisionButton {
    border: none;
    /*background-color: #23AE58;*/
    background-color: var(--btn-accent-info);
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
    /*    margin-left: 5px;
    margin-right: -5px;*/
}
.viewButton {
    border: none;
    /*background-color: #23AE58;*/
    background-color: var(--btn-accent-warning);
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
    /*    margin-left: 5px;
    margin-right: -5px;*/
}
.selectButton {
    border: none;
    /*background-color: #23AE58;*/
    background-color: var(--btn-accent-success);
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
    /*    margin-left: 5px;
    margin-right: -5px;*/
}

.deleteButton {
    border: none;
    /*background-color: #23AE58;*/
    background-color: var(--btn-danger);
    color: white;
    width: 30px;
    height: 28px;
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
/*    margin-left: 5px;
    margin-right: -5px;*/
}

    .deleteButton:hover {
        /*background-color: #15a34e;*/
        background-color: var(--btn-danger-hover);
    }

    .deleteButton:active {
        /*background-color: #159a4a;*/
        background-color: var(--btn-danger-active);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    }

.deleteButtonContact {
    border: none;
    /*background-color: #23AE58;*/
    background-color: var(--btn-danger);
    color: white;
    width: 30px;
    height: 28px;
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
    /*    margin-left: 5px;
    margin-right: -5px;*/
}

    .deleteButtonContact:hover {
        /*background-color: #15a34e;*/
        background-color: var(--btn-danger-hover);
    }

    .deleteButtonContact:active {
        /*background-color: #159a4a;*/
        background-color: var(--btn-danger-active);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    }

.deleteButtonUserInfo {
    border: none;
    /*background-color: #23AE58;*/
    background-color: var(--btn-danger);
    color: white;
    width: 30px;
    height: 28px;
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
    /*    margin-left: 5px;
    margin-right: -5px;*/
}

    .deleteButtonUserInfo:hover {
        /*background-color: #15a34e;*/
        background-color: var(--btn-danger-hover);
    }

    .deleteButtonUserInfo:active {
        /*background-color: #159a4a;*/
        background-color: var(--btn-danger-active);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    }

    .moreOptions{
        color:darkred;
        display:none;
    }

.addOptionBtn {
    border: none;
    background: var(--btn-primary-grad);
    color: white;
    width: 30px;
    height: 28px;
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    text-align: center;
    margin-left: 5px;
    margin-right: -5px;
    transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .addOptionBtn:hover {
        background: var(--btn-primary-grad-hover);
        box-shadow: var(--btn-shadow-hover);
    }

    .addOptionBtn:active {
        background: var(--btn-primary-grad-active);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
        transform: translateY(2px);
    }

.ucAddOptionBtn {
    border: none;
    background: var(--btn-primary-grad);
    color: white;
    width: 30px;
    height: 28px;
    line-height: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    text-align: center;
    margin-left: 5px;
    margin-right: -5px;
    transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .ucAddOptionBtn:hover {
        background: var(--btn-primary-grad-hover);
        box-shadow: var(--btn-shadow-hover);
    }

    .ucAddOptionBtn:active {
        background: var(--btn-primary-grad-active);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
        transform: translateY(2px);
    }

.cuCustomOptions {
    display: grid;
    height: 30px;
    grid-auto-flow: column;
    width: 500px;
    grid-column-gap: 0px;
    line-height: 50px;
    align-items: center;
    justify-items: end;
    margin-left: calc(100% - 510px);
    padding-top: 10px;
}

.conCustomOptions {
    display: grid;
    height: 30px;
    grid-auto-flow: column;
    width: 500px;
    grid-column-gap: 0px;
    line-height: 50px;
    align-items: center;
    justify-items: end;
    margin-left: calc(100% - 510px);
    padding-top: 10px;
}

.largeAddButton {
    border: none;
    background: var(--btn-primary-grad);
    color: white;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 1.5em;
    border-radius: 5px;
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    text-align: center;
    margin-left: 20px;
    transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .largeAddButton:hover {
        background: var(--btn-primary-grad-hover);
        box-shadow: var(--btn-shadow-hover);
    }

    .largeAddButton:active {
        background: var(--btn-primary-grad-active);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
        transform: translateY(2px);
    }

.addButtonHolder {
    width: 250px;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 25px;
}

.prodBoxTableOfProductsContainers {
    width: 100%;
    text-align: center;
}


/* Toggle switch */
/* The box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 20px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 10px;
        width: 10px;
        left: 4px;
        bottom: 5px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background-color: #0C9543;
}

input:focus-visible + .slider {
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

input:checked + .slider:before {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
}

.standaloneBoxContainer {
    width: 90%;
    min-height: 550px;
    background-color: white;
    position: relative;
    top: 70px;
    left: 50%;
    transform: translate(-50%, 0%);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.2);
    height: fit-content;
}

.cuTagContainer {
    margin: 10px;
    column-span: all;
}

.cuContainer {
    display: grid;
    grid-auto-columns: minmax(677px,1fr) 1fr 1fr;
    grid-auto-flow: column;
    grid-column-gap: 15px;
    min-height: 303px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    margin: 5px;
    padding: 15px;
    max-width: fit-content;
}

.conTagContainer {
    margin: 10px;
    column-span: all;
}

.conContainer {
    display: grid;
    grid-auto-columns: minmax(677px,1fr) 1fr 1fr;
    grid-auto-flow: column;
    grid-column-gap: 15px;
    min-height: 303px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    margin: 5px;
    padding: 15px;
    max-width: fit-content;
}

.drawing {
    grid-column: span 2;
    text-align: center;
}

    .drawing img {
        max-width: 100%;
        height: 175px;
    }

.bottomMargin {
    margin-bottom: 15px;
}

.quadColumnTitledGroup {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 5px;
}

.customNameCell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.customNameCell > input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

.customNameCell:has(.customNameToggle:not(:checked)) > input[type="text"] {
    background: #eee;
    color: #888;
    pointer-events: none;
    user-select: none;
}

.customNameToggle {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #888;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.customNameToggle:hover {
    border-color: #555;
}

.customNameToggle:checked {
    background: #0C9543;
    border-color: #0C9543;
}

.customNameToggle:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.customNameToggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.dualColumnTitledGroup {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 5px;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 5px;
}

.summary {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 1px;
    grid-template-columns: 1fr;
    grid-column-gap: 5px;
}

    .summary div:nth-child(even) {
    }

    .summary div:nth-child(odd) {
    }

.optionGroup {
    grid-column: span 3;
    font-weight: bold;
    text-align: center;
}

.cuUnitCriteria {
    min-height: 240px;
    align-content: flex-start;
}

.cuUnitCriteria select {
    width: 125px;
}

.cuUnitCriteria input:not([type='checkbox']) {
    width: 125px;
}

/* Same fix as .conUnitCriteria .customNameCell: cap the custom-name cell (checkbox + textbox) at the 125px field
   width and at the grid column (max-width:100%), so it lines up with the surrounding fields instead of the textbox
   growing to fill the whole column. The textbox flex-shrinks to share the width with the 16px checkbox. */
.cuUnitCriteria .customNameCell {
    width: 125px;
    max-width: 100%;
    box-sizing: border-box;
}

.cuUnitCriteriaContent {

}

.conUnitCriteria {
    min-height: 240px;
    align-content: flex-start;
}

    .conUnitCriteria select {
        width: 125px;
    }

    .conUnitCriteria input:not([type='checkbox']) {
        width: 125px;
    }

    /* Align the custom-name cell (checkbox + textbox) with the field directly below it (the RAC/Series dropdown).
       Target width is the same 125px the other Unit Criteria fields use, BUT capped at the grid column width via
       max-width:100%. That cap matters: the Series dropdown is a flex item inside .conDesign, so on narrower cards
       it shrinks to its column - while a plain width:125px cell would stay 125px and overflow, ending up wider than
       the dropdown beneath it. Capping at the column makes the cell shrink in lockstep so their right edges meet.
       The textbox (flex:1 1 auto, min-width:0) then shrinks to share whatever width remains with the 16px checkbox. */
    .conUnitCriteria .customNameCell {
        width: 125px;
        max-width: 100%;
        box-sizing: border-box;
    }

.conUnitCriteriaContent {
}

.fitContentButton {
    border: none;
    background: var(--btn-primary-grad);
    color: white;
    border-radius: 5px;
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .fitContentButton:hover {
        background: var(--btn-primary-grad-hover);
        box-shadow: var(--btn-shadow-hover);
    }

    .fitContentButton:active {
        background: var(--btn-primary-grad-active);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
        transform: translateY(2px);
    }

.cuDesign {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
}

    .cuDesign label {
        margin-right: 10px;
    }

.cuPerformanceInput {
}

    .cuPerformanceInput input {
        width: 100px;
    }

    .cuPerformanceInput select {
        width: 100px;
    }

.cuPerformanceInputDetails {
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
}

.cuUnitDetails {
}

    .cuUnitDetails input {
        padding-left: 5px;
        width: 75px;
    }

.cuCoilDetails {
}

    .cuCoilDetails select:nth-child(odd) {
    }

.cuUnitSelection {
    width: calc(100% - 10px) !important;
}

.ucUnitSelection {
/*    width: calc(100% - 10px) !important;
*/
text-align:left;
text-align-last:left;
}

.cuPricingSummary {
    /* was min-height: 650px — sized for the old always-expanded options grid;
       the summary-table era lets the card hug its content */
    min-height: 0;
}


.cuButton {
    height: 30px;
    width: 170px;
    margin-top: 10px;
    line-height: 25px;
}

.conDesign {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
}

    .conDesign label {
        margin-right: 10px;
    }

.conPerformanceInput {
}

    .conPerformanceInput input {
        width: 100px;
    }

    .conPerformanceInput select {
        width: 100px;
    }

.conPerformanceInputDetails {
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
}

.conUnitDetails {
}

    .conUnitDetails input {
        padding-left: 5px;
        width: 75px;
    }

.conCoilDetails {
}

    .conCoilDetails select:nth-child(odd) {
    }

.conUnitSelection {
    width: calc(100% - 10px) !important;
}

.conPricingSummary {
    /* was min-height: 650px — sized for the old always-expanded options grid */
    min-height: 0;
}


.conButton {
    height: 30px;
    width: 170px;
    margin-top: 10px;
    line-height: 25px;
}

.ucContainer {
    display: grid;
    grid-auto-columns: 1.3fr 1fr 1fr;
    grid-auto-flow: column;
    grid-column-gap: 15px;
    min-height: 303px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    margin: 5px;
    padding: 15px;
    width: 100%;
}


    .ucContainer select {
        width: 144px;
    }

    /* Same fix as the CU/CON custom-name cells, using the UC field width (144px, matching the selects above): cap the
       custom-name cell at 144px and at the grid column so the checkbox + textbox lines up with the fields rather than
       the textbox stretching to fill the column. The textbox flex-shrinks to share the 144px with the checkbox. */
    .ucUnitCriteria .customNameCell {
        width: 144px;
        max-width: 100%;
        box-sizing: border-box;
    }

.ucUnit {
    width: 340px !important;
}

.ucTargetCapacityMinus {
    width: 59px !important;
}

.ucTargetCapacityPlus {
    width: 61px !important;
}

.cuTargetCapacityMinus {
    width: 59px !important;
}

.cuTargetCapacityPlus {
    width: 61px !important;
}

.conTargetCapacityMinus {
    width: 59px !important;
}

.conTargetCapacityPlus {
    width: 61px !important;
}

.modalHolder {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
}

.toolsModalHolder {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 5px;
    border: 3px solid #0C9543;
    z-index: 101;
    box-sizing: border-box;
    width: 600px;
}

.mutliSucModal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 5px;
    border: 3px solid #0C9543;
    z-index: 101;
    box-sizing: border-box;
    width: fit-content;
}

.loadingModal {
    width: 420px;
    height: 210px;
}



.toolsModal {
    display: block;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    overflow: hidden; /* prevent scrollbars on background */
}

.toolsModal-content {
    background-color: #fff;
    margin: 5% auto;
    box-sizing: border-box;
    transition: width 0.3s ease, height 0.3s ease;
    width: 600px;
    /*    height: 400px;
*/ overflow: hidden; /* prevent scrollbars inside modal */
    border-radius: 6px;
    padding: 0; /* remove internal white space */
    max-height: 90vh;
}

.toolTab-content.active {
    height: 100%;
}

/* Optional: inner wrapper if you still need structured layout inside */
.toolsModal-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /*overflow: auto;*/ /* only if you want tab content scrollable */
    /*padding: 20px;*/ /* optional: move padding here if needed */
}

.modalHeader {
    text-align: center;
    font-size: 1.3em;
    background-color: #0C9543;
    color: white;
    width: calc(100% + 4px);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-left: -2px;
    margin-top: -1px;
}

.modalContent {
    padding: 10px;
    max-height: 500px;
    overflow: auto;
}

.mutliSucModalContent {
    padding: 10px;
    padding-top: 15px;
    max-height: 500px;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    color: black;
}

    .mutliSucModalContent > div:last-child {
        margin-left: auto;
        margin-right: auto;
        grid-column: 1 / -1;
    }

.genericMessageModal {
    width: 350px;
    height: 180px;
}

/* Yes/No confirmation modal — matches genericMessageModal styling and adds
   a right-aligned button row underneath the message. */
.confirmMessageModal {
    width: 420px;
    min-height: 180px;
}

.confirmMessageModalContent {
    color: black !important;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
}

.confirmMessageModalActions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

    .confirmMessageModalActions > input[type="button"] {
        min-width: 80px;
    }

/* Dismissible message modal (no auto-close). Wider than the auto-close generic modal so longer messages
   (like the missing-models list) don't wrap awkwardly, and uses a column-flex content layout so the OK
   button sits centered UNDER the message text rather than next to it. */
.dismissibleMessageModal {
    width: 560px;
    max-height: 80vh;
    min-height: 220px;
}

.dismissibleMessageModalContent {
    color: black !important;
    padding: 22px 28px 24px 28px; /* top right bottom left - extra side padding so text doesn't kiss the modal border */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    max-height: calc(80vh - 32px - 46px);
    overflow-y: auto;
    box-sizing: border-box;
}

    /* Scope the message body's child spacing without re-styling every paragraph. */
    .dismissibleMessageModalContent .genericMessageModalMessage {
        padding: 0;
        margin: 0;
        line-height: 1.5;
    }

.dismissibleMessageModalActions {
    display: flex;
    justify-content: center;
    text-align: center; /* belt-and-suspenders centering in case a child smallButton has weird float/inline behaviour */
    padding-top: 6px;
}

    .dismissibleMessageModalActions > input[type="button"] {
        min-width: 96px;
        padding: 6px 18px;
    }

.genericMessageHeader {
    text-align: center;
    font-size: 1.3em;
    background-color: #0C9543;
    color: white;
    width: calc(100% + 4px);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-left: -2px;
    margin-top: -1px;
    height: 32px;
}



.loadingModalContent {
    color: black !important;
    height: calc(200px - 37px);
    overflow: hidden;
}

.genericMessageModalContent {
    color: black !important;
    height: calc(180px - 45px);
    overflow: hidden;
    padding: 10px;
    max-height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.genericLoadingModalMessage {
    color: black !important;
    text-align: center;
}

.genericLoadingModalLoader {
    height: 80px !important;
}

    .genericLoadingModalLoader img {
        height: 150px;
        margin-top: -27px;
    }

    .toolsModalHeader {
        text-align: center;
        font-size: 1.3em;
        background-color: #0C9543;
        color: white;
        width: calc(100% + 4px);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        margin-left: -2px;
        margin-top: -1px;
    }

.toolsModalContent {
    padding: 10px;
/*    max-height: 500px;
*/    overflow: auto;
}

.tallModal {
    min-height: 250px;
}

.toolsModalContent > div {
    border-radius: 5px;
    color: white;
    text-align: center;
    width: 100%;
    height: 80px;
    line-height: 40px;
    margin-bottom: 10px;
    cursor: pointer;
}

    .modalContent > div {
        border-radius: 5px;
        color: white;
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        cursor: pointer;
    }

/* The rule above is meant for modals whose direct-child divs are big clickable
   menu rows (fixed 40px, white centered text). The Manage Communication Contacts
   modal uses direct-child divs as structural containers instead, so that rule was
   pinning #manageContactsList to 40px (rows overflowed and the "+ Add Contact"
   button landed on top of them) and painting the intro blurb white-on-white.
   Opt this modal's content divs back out. The ID keeps it from touching any other modal. */
#manageContactsModal .modalContent > div {
    height: auto;
    line-height: normal;
    color: inherit;
    text-align: left;
    cursor: default;
    border-radius: 0;
    margin-bottom: 0;
}

.toolsModalContent > div {
    border-radius: 5px;
    color: white;
    text-align: center;
    width: 100%;
    height: 80px;
    line-height: 40px;
    margin-bottom: 10px;
    cursor: pointer;
}

.pricingSummary {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 1px;
    grid-template-rows: 1fr 14fr 1fr 2fr;
    grid-column-gap: 5px;
    vertical-align: text-top;
}

    .pricingSummary div > * {
        float: right;
    }

.cuListPriceContainer {
    height: 25px;
}

.cuUnitQuantityContainer {
    margin-top: 50px;
    padding-top: 0px;
    height: 25px;
}

    .cuUnitQuantityContainer input {
        width: 80px;
    }

.cuOptions {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr 10fr 2fr;
    text-align: left;
    margin-bottom: 0px;
    overflow: auto;
    height: 450px;
    width: 102%;
}

    .cuOptions > * {
    }

    .cuOptions input:not([type='checkbox']) {
        width: 50px;
    }

.cuFinalPriceContainer {
    margin-top: 20px;
    height: 50px;
    font-size: 1.1em;
}

.conListPriceContainer {
    height: 25px;
}

.conUnitQuantityContainer {
    margin-top: 50px;
    padding-top: 0px;
    height: 25px;
}

    .conUnitQuantityContainer input {
        width: 80px;
    }

.conOptions {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr 10fr 2fr;
    text-align: left;
    margin-bottom: 0px;
    overflow: auto;
    height: 450px;
    width: 102%;
}

    .conOptions > * {
    }

    .conOptions input:not([type='checkbox']) {
        width: 50px;
    }

.conFinalPriceContainer {
    padding-top: 20px;
    height: 50px;
    font-size: 1.1em;
}

/* TEMP (sales verification of DLL coil costing): breakdown rows appended to the Condenser
   pricingSummary grid. Remove with the matching rows in Templates.html and the fill block
   in applyCONPricing once sales signs off. */
/*.conCoilCostBreakdownRow {
    height: 22px;
    font-size: 0.9em;
}

    .conFinalPriceContainer + .conCoilCostBreakdownRow {
        margin-top: 12px;
        padding-top: 6px;
        border-top: 1px solid #c8c8c8;
    }*/

.ucFindUnitsContainer {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 10px;
}

    .ucFindUnitsContainer input {
        width: 144px;
        height: 30px;
    }

.cuFindUnitsContainer {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 10px;
}

    .cuFindUnitsContainer input {
        width: 144px;
        height: 30px;
    }

.conFindUnitsContainer {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 10px;
}

    .conFindUnitsContainer input {
        width: 144px;
        height: 30px;
    }

.ucUnitCoolerListContainer {
    grid-column: span 2 / auto;
}

.ucUnitCoolerList {
   height: 500px;
   overflow: auto;
}

.cuListContainer {
    grid-column: span 2 / auto;
}

.conListContainer {
    grid-column: span 2 / auto;
}

.ucPricingSummary {
    /* was min-height: 480px — sized for the old always-expanded options grid */
    min-height: 0;
}

.ucListPriceContainer {
    height: 25px;
}

.loadContactButton{
    margin-right:5px;
    margin-left:5px;
}

.saveContactButton {
    margin-right: 5px;
    margin-left: 5px;
}

.saveBtn {

}

.REVsaveBtn {
    height: 25px !important;
    margin-bottom: 2px !important;
}

.ucOptions {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr 10fr 2fr;
    text-align: left;
    margin-bottom: 0px;
    overflow: auto;
    height: 425px;
    width: 102%;
}

    .ucOptions > * {
    }

    .ucOptions input:not([type='checkbox']) {
        width: 75px;
    }

.ucUnitQuantityContainer {
    margin-top: 30px;
    padding-top: 10px;
    height: 25px;
}

    .ucUnitQuantityContainer input {
        width: 80px;
    }

.ucFinalPriceContainer {
    padding-top: 20px;
    height: 50px;
    font-size: 1.1em;
}

.newProjectName {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 1.5em;
    text-align: center;
    border: 1px solid #0C9543;
    border-radius: 5px;
    margin-bottom: 15px;
}

.newProjectSeperator {
    height: 10px !important;
}

.userLoadProjectSpinner {
    margin-left: auto;
    margin-right: auto;
}

.userLoadSpinnerContainer {
    width: 100%;
    text-align: center;
    height: fit-content;
}

.cuSelectionTypeContainer {
    text-align: left;
    grid-column: 1 / span 4;
    margin-bottom: 30px;
    line-height: 20px;
}

    .cuSelectionTypeContainer label {
        margin-left: 10px;
        margin-right: 10px;
    }

.ucSelectionTypeContainer {
    text-align: left;
    grid-column: 1 / span 4;
    margin-bottom: 30px;
    line-height: 20px;
}

    .ucSelectionTypeContainer label {
        margin-left: 10px;
        margin-right: 10px;
    }

.conSelectionTypeContainer {
    text-align: left;
    grid-column: 1 / span 4;
    margin-bottom: 30px;
    line-height: 20px;
}

    .conSelectionTypeContainer label {
        margin-left: 10px;
        margin-right: 10px;
    }

.sysBalanceContainer {
    padding: 20px;
    width: 1200px;
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 25px;
}

.addChildMessage {
    text-align: center;
    color: black !important;
}

.smallLoader {
    margin-top: -15px;
    margin-left: 59px;
    margin-bottom: 20px;
    height: 50px;
}

.cuRatingLoader {
    margin-top: 0px !important;
    margin-bottom: -17px !important;
    margin-right: 55px !important;
}

/* Both report loaders (PDF + DOCX) share the same vertical alignment so the spinner sits in the right spot for
   either button. Without the Docx selector here, .cuGenerateReportDocxLoader fell back to the base .smallLoader
   margins (margin-top:-15px / margin-bottom:20px) and rendered ~18px too high. */
.cuGenerateReportLoader,
.cuGenerateReportDocxLoader {
    margin-top: 3px;
    margin-bottom: -20px;
}

.cuFindUnitsLoader {
    height: 50px;
    margin-top: -10px;
    margin-bottom: -20px;
    margin-left: 40px;
    margin-right: 45px;
}

.cuOccupancyContainer {
    display: grid;
    /* Subgrid so the Occupancy label + select inherit the parent quad-column tracks and line up
       with every other label/select row. A private "1fr 1fr" split here drifted out of alignment
       because the parent's content-sized (minmax(auto,1fr)) columns change width between Model
       Rating and Selection modes, and this nested grid didn't track them. */
    grid-template-columns: subgrid;
}

.conRatingLoader {
    margin-top: 0px !important;
    margin-left: 35px !important;
}

.conFindUnitsLoader {
    height: 50px;
    margin-top: -10px;
    margin-bottom: -20px;
    margin-left: 40px;
    margin-right: 45px;
}

.conOccupancyContainer {
    display: grid;
    /* Subgrid: see .cuOccupancyContainer. Shares the parent quad-column tracks so the Occupancy
       row stays aligned with the other dropdowns across Model Rating / Selection modes. */
    grid-template-columns: subgrid;
}

.ucOccupancyContainer {
    display: grid;
    /* Subgrid: see .cuOccupancyContainer. Shares the parent quad-column tracks so the Occupancy
       row stays aligned with the other dropdowns across Model Rating / Selection modes. */
    grid-template-columns: subgrid;
}

.comingSoon {
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
}

.sysBalance {
    width: 500px;
}

.sysBalanceLoader {
    height: 50px;
    margin-top: -13px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 45px;
    float: right;
}

.sysBalanceContent {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 1px;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 5px;
    text-align: left;
}

    .sysBalanceContent div:nth-child(even) {
        
    }
    
    .sysBalanceContent div:nth-child(odd) {
        
    }

    .sysBalance div {
        
        }

.sysBalanceResults {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 1px;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 5px;
}

    .sysBalanceResults div:nth-child(even) {
        /* padding-left: 60px; */
    }

    .sysBalanceResults div:nth-child(odd) {
        /* font-weight: bold; */
    }

.sysBalanceButton {
    margin-top: 15px;
    float: right;
}

.sysBalanceReportButton {
    margin-top: 15px;
    float: right;
}

.projectDetailsContainer {
    min-width: 325px !important;
    width: 325px;
}


.projectProposalNotes {
    width: 300px;
    height: 100px;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    white-space: pre-wrap; /* Preserve newlines */
    overflow-y: auto; /* Allow vertical scrolling */
    border: 1px solid #ccc;
    border-radius: 4px;
}
.darkmode .projectProposalNotes{
    border-color:lightgreen;
}

.projectDetailsContent {

}

    .projectDetailsContent div:nth-child(even) {
        padding-left: 25px;
        margin-bottom: 10px;
    }

    .projectDetailsContent input[type=text] {
        width: 225px;
        text-align: left;
        padding-left: 10px;
        overflow: auto;
        white-space:pre-wrap;
        word-wrap:break-word;
        border-radius:5px;
    }

    .darkmode .projectDetailsContent input[type=text]{
        border-color:lightgreen;
        border-radius:5px;
    }

    .projectDetailsContent textarea {
        width: 250px;
        text-align: left;
        padding-left: 10px;
    }

.projectContainer {
    /*padding: 20px;
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    grid-column-gap: 25px;*/
}

/* =========================
   Project Tabs 
========================= */

.projectTabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    margin: 12px 0;
    margin-left:5px;
    border-radius: 14px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
    user-select: none;
}


    .projectTabs .tab,
    .boxTabs .tab {
        display: flex;
    }

    .projectTabs .tabLabel,
    .boxTabs .tabLabel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        min-width: 110px;
        padding: 0 14px;
        border-radius: 12px;
        background: transparent;
        border: 1px solid transparent;
        color: rgba(0,0,0,0.75);
        font-weight: 800;
        letter-spacing: 0.2px;
        cursor: pointer;
        transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
    }

        .projectTabs .tabLabel:hover,
        .boxTabs .tabLabel:hover {
            background: rgba(0,0,0,0.05);
            border-color: rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }

        .projectTabs .tabLabel.selectedTab,
        .projectTabs .selectedTab,
        .boxTabs .tabLabel.selectedTab,
        .boxTabs .selectedTab {
            background: linear-gradient(90deg,#009E4F,#228EC2,#009E4F);
            color: #fff;
            border-color: rgba(255,255,255,0.35);
            box-shadow: 0 10px 22px rgba(0,0,0,0.18);
        }

        .projectTabs .tabLabel:active,
        .boxTabs .tabLabel:active {
            transform: translateY(0px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.12);
        }


.projectTabContent {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 16px;
    background: rgba(255,255,255,0.60);
    box-shadow: 0 14px 36px rgba(0,0,0,0.10);
    padding: 16px;
    margin: 8px 5px 20px 5px; 
}

    .projectTabContent .tabContent {
        width: 100%;
        max-width: 100%;
    }

    .projectTabContent .titledGroupTitle {
        display: block;
        margin: 0 0 12px 0;
        padding: 0;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        background: transparent;
        color: rgba(0,0,0,0.65);
    }

    .projectTabContent .projectDetailsContent {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 10px 12px;
        align-items: center;
        margin: 0;
    }

        .projectTabContent .projectDetailsContent > div:nth-child(odd) {
            font-weight: 800 !important;
            color: rgba(0,0,0,0.70);
            text-align: right;
            padding-right: 6px;
        }

    .projectTabContent input[type="text"],
    .projectTabContent input[type="number"],
    .projectTabContent select,
    .projectTabContent textarea {
        background: rgba(255,255,255,0.98); /* more solid */
        border: 1px solid rgba(0,0,0,0.35); /* stronger edge */
        color: #000;
        /* subtle inset highlight for definition */
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.25);
        transition: border-color 120ms ease, box-shadow 120ms ease;
    }

        .projectTabContent input[type="text"]:hover,
        .projectTabContent input[type="number"]:hover,
        .projectTabContent select:hover,
        .projectTabContent textarea:hover {
            border-color: rgba(0,0,0,0.45);
        }

        .projectTabContent input[type="text"]:focus,
        .projectTabContent input[type="number"]:focus,
        .projectTabContent select:focus,
        .projectTabContent textarea:focus {
            border-color: rgba(34,142,194,0.85);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.15), 0 0 0 2px rgba(34,142,194,0.25);
        }

    .projectTabContent textarea {
        height: 120px;
        padding: 10px 12px;
        resize: vertical;
    }

/* =========================================================
   INFO tab
========================================================= */


.projectInfoContent {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 12px;
    align-items: stretch;
}

    .projectInfoContent .projectDetailsContainer {
        width: 100% !important;
        min-width: 0 !important;
    }

    .projectInfoContent .projectCustomerContactContainer {
        grid-column: 3 / span 2;
        width: 100% !important;
        min-width: 0 !important;
    }

    .projectInfoContent .projectDetailsContent {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 8px 10px;
        align-items: center;
        min-width: 0;
    }

        .projectInfoContent .projectDetailsContent > div {
            min-height: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            min-width: 0; 
        }

            .projectInfoContent .projectDetailsContent > div:nth-child(odd) {
                justify-content: flex-end;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-right: 6px;
            }

        .projectInfoContent .projectDetailsContent input[type="text"],
        .projectInfoContent .projectDetailsContent input[type="number"],
        .projectInfoContent .projectDetailsContent select {
            width: 100%;
            height: 26px; 
            box-sizing: border-box;
        }

            .darkmode .projectInfoContent .projectDetailsContent input[type="text"]{
                border-color: lightgreen !important;
            }

            .projectInfoContent .projectDetailsContent textarea {
                width: 100%;
                height: 70px;
                box-sizing: border-box;
            }

    .projectInfoContent > .titledGroupContainer {
        display: flex;
        flex-direction: column;
    }

    .projectInfoContent .titledGroupContent {
        flex: 1 1 auto;
    }


.projectActionRow {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

    .projectActionRow > input[type="button"] {
        flex: 1 1 0;
        height: 36px !important;
        border-radius: 12px;
    }

.projectActionRow--right {
    justify-content: flex-end;
}

    .projectActionRow--right > input[type="button"] {
        flex: 0 0 auto;
        min-width: 160px;
    }


.projectCustomerContactContainer {
    grid-column: 1 / -1;
}

    .projectCustomerContactContainer > div {
        gap: 18px !important;
    }

    .projectCustomerContactContainer .projectDetailsContent {
        width: 100% !important;
        min-width: 0;
    }

.projectPricingTableContainer {
    border-radius: 16px;
    padding: 10px;
}



/* =========================================================
   REPORTS TAB
========================================================= */

.projectReportsColumns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

    .projectReportsColumns > .titledGroupContainer {
        position: relative !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

        .projectReportsColumns > .titledGroupContainer:nth-child(1) {
            grid-column: 1 / 2;
        }

        .projectReportsColumns > .titledGroupContainer:nth-child(2) {
            grid-column: 2 / 3;
        }

    .projectReportsColumns .cuTotalPriceContainer {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100%;
    }

        .projectReportsColumns .cuTotalPriceContainer > .cuTotalPriceContainer {
            display: grid !important;
            grid-template-columns: 1fr;
            gap: 8px;
            align-items: start;
        }


.projectReportsContent .projectCustomerContactContainer{
    min-height:250px;
}

.projectReportsColumns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

    .projectReportsColumns > .titledGroupContainer:nth-child(1) {
        grid-column: 1 / 2;
    }

    .projectReportsColumns > .titledGroupContainer:nth-child(2) {
        grid-column: 2 / 3;
    }

    .projectReportsColumns > .titledGroupContainer:nth-child(3) {
        grid-column: 3 / 4;
    }

    .projectReportsColumns > .titledGroupContainer:nth-child(4) {
        grid-column: 4 / 5;
    }

    .projectReportsColumns > .titledGroupContainer {
        height: auto;
        display: block;
    }

.projectReportsContent .projectProposalNotes {
    width: 100%;
    height: 190px;
    resize: vertical;
    font-size: 12px;
}


@media (max-width: 1100px) {
    .projectInfoContent {
        grid-template-columns: 1fr;
    }

    .projectCustomerContactContainer {
        grid-column: auto;
    }
}

/* =========================================================
   ORDER ENTRY TAB
========================================================= */

.projectOrderEntryColumns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}

    .projectOrderEntryColumns > .projectOrderEntryContainer,
    .projectOrderEntryColumns > .projectOEColumnStack > .projectOrderEntryContainer {
        width: 100% !important;
        min-width: 0 !important;
        display: flex;
        flex-direction: column;
        font-size: 0.8em;
    }

/* Column 1 wrapper: stacks Order Info on top of Communications vertically. */
.projectOEColumnStack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.projectOrderEntryContent .projectDetailsContent {
    display: grid;
    /* Fixed label-column width so sibling grids inside a card (top section + sub-sections like Ship-to / Project Address / GC)
       line up at the same x-coordinate. With `auto` each grid sized its label column to its own widest label, causing the
       top "Project Details" section's longer labels (Installing Contractor, Requested Ship Date) to push their inputs farther
       right than the address sub-sections' shorter labels. 140px fits the longest label at 0.95em with a small margin. */
    grid-template-columns: 140px 1fr;
    gap: 3px 6px;
    align-items: center;
    min-width: 0;
}

    .projectOrderEntryContent .projectDetailsContent > div {
        min-height: 20px;
        display: flex;
        align-items: center;
        min-width: 0;
    }

        .projectOrderEntryContent .projectDetailsContent > div:nth-child(odd) {
            justify-content: flex-end;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 4px;
            font-size: 0.95em;
        }

    .projectOrderEntryContent .projectDetailsContent input[type="text"],
    .projectOrderEntryContent .projectDetailsContent input[type="number"],
    .projectOrderEntryContent .projectDetailsContent input[type="date"],
    .projectOrderEntryContent .projectDetailsContent input[type="tel"],
    .projectOrderEntryContent .projectDetailsContent input[type="email"],
    .projectOrderEntryContent .projectDetailsContent select {
        width: 100%;
        height: 20px;
        font-size: 0.95em;
        padding: 0 4px;
        box-sizing: border-box;
    }

/* Sub-sections inside a card (Invoice-to, Ship-to, Project Address, GC, etc.) */
.orderEntrySubSection {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.orderEntrySubTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.8;
}

    .orderEntrySubTitle > span:first-child {
        flex: 0 0 auto;
    }

.oeSubTitleOption {
    font-weight: normal;
    font-size: 0.9em;
    text-transform: none;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

    .oeSubTitleOption input[type="checkbox"] {
        margin: 0;
    }

/* Credit Terms row: dropdown + conditional "Other" text input side-by-side */
.oeCreditTermsRow {
    display: flex;
    gap: 6px;
    width: 100%;
}

    .oeCreditTermsRow select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .oeCreditTermsRow input[type="text"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 20px;
        font-size: 0.95em;
        padding: 0 4px;
        box-sizing: border-box;
    }

/* Greyed-out block when a "same as above" / "different than" toggle disables it */
.oeDisabledBlock {
    opacity: 0.45;
    pointer-events: none;
}

/* Recipients list (Acknowledgement / Submittal) */
.oeRecipientsList {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size:14px;
}

.recipientRow {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 6px;
    align-items: center;
}

    .recipientRow input[type="text"],
    .recipientRow input[type="email"] {
        height: 24px;
        font-size: 1em;
        padding: 0 4px;
        box-sizing: border-box;
        width: 100%;
    }

.recipientRemoveButton {
    width: 26px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
}

    .recipientRemoveButton:hover:not(:disabled) {
        background: rgba(0, 0, 0, 0.06);
    }

    .recipientRemoveButton:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

.oeAddRecipientButton {
    margin-left: auto;
    padding: 1px 8px;
    font-size: 1em;
    height: 24px;
}

/* Report Generator card in the far-right column (Generate Order Write Up). */
.orderEntryReportActions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

    .orderEntryReportActions .lockableButtonWrapper input[type="button"] {
        width: 100%;
        margin: 0;
    }

@media (max-width: 1400px) {
    .projectOrderEntryColumns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 800px) {
    .projectOrderEntryColumns {
        grid-template-columns: 1fr;
    }
}

.projectOptionsContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 15px;
    padding-right: 15px;
}
.projectPricingTable {
    width: 1500px;
    border-radius:10px;
}
    .projectOptionsContainer div:nth-child(even) {
        text-align: right;
    }

    .projectOptionsContainer label {

    }

    .projectOptionsContainer input[type="checkbox"] {
        margin-right: 4px;
        transform: scale(1.1);
    }

/* =========================================================
   Pricing tab � compact multiplier input
========================================================= */

/* Scope tightly to pricing tab */
.projectPricingContent .projectMultiplier {
    height: 14px; /* match compact inputs */
    width: 80px !important; /* fixed, reasonable width */
    font-size: 12px;
    padding: 0 6px;
    border-radius: 4px; /* same subtle rectangle */
    box-sizing: border-box;
}

/* Optional: tighten the container spacing */
.projectPricingContent .projectMultiplierContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.projectPricingContent .projectMultiplier{
    height:26px !important;
}

.darkmode .projectPricingContent .projectMultiplier{
    border-color:lightgreen !important;
}

/* Ensure Apply button doesn't stretch oddly */
.projectPricingContent .projectApplyAllButton {
    height: 26px !important;
    font-size: 12px;
    padding: 0 10px;
    width: 85px;
}


.projectBadgeHolder {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
}

.projectRevBadge {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    line-height: 12px;
    background-color: #23ADD7; 
    height: 16px;
}

.projectVerBadge {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    line-height: 12px;
    background-color: #F28C28;
    height: 16px;
}

.feedbackContainer {
    position: fixed;
    bottom: -1px;
    right: 30px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.4);
    padding: 0px;
    z-index: 9999;
    width: 400px;
    /* tracks the CREED AI panel: body.aiChatOpen scoots it left of the panel */
    transition: right 0.25s ease;
}

.feedbackHeader {
    font-size: 1.2em;
    font-weight: bold;
    /*background-color: #0C9543;*/
    background: linear-gradient(90deg,#009E4F,#009E4F,#228EC2,#009E4F,#009E4F);
    background-size: 200% 200%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: -1px;
    margin-left: -1px;
    width: calc(100% + 2px);
    cursor: pointer;
    user-select: none;
    color: white;
    text-align: center;
    height: 30px;
    line-height: 30px;
    -webkit-animation: feedbackGradient 30s ease infinite;
    -moz-animation: feedbackGradient 30s ease infinite;
    animation: feedbackGradient 30s ease infinite;
}

@-webkit-keyframes feedbackGradient {
    0% {
        background-position: 10% 0%;
    }

    2.5% {
        background-position: 91% 100%;
    }

    5% {
        background-position: 50% 50%;
    }

    95% {
        background-position: 50% 50%;
    }

    97.5% {
        background-position: 91% 100%;
    }

    100% {
        background-position: 10% 0%;
    }
}

@-moz-keyframes feedbackGradient {
    0% {
        background-position: 10% 0%;
    }

    2.5% {
        background-position: 91% 100%;
    }

    5% {
        background-position: 50% 50%;
    }

    95% {
        background-position: 50% 50%;
    }

    97.5% {
        background-position: 91% 100%;
    }

    100% {
        background-position: 10% 0%;
    }
}

@keyframes feedbackGradient {
    0% {
        background-position: 10% 0%;
    }

    2.5% {
        background-position: 91% 100%;
    }

    5% {
        background-position: 50% 50%;
    }

    95% {
        background-position: 50% 50%;
    }

    97.5% {
        background-position: 91% 100%;
    }

    100% {
        background-position: 10% 0%;
    }
}

    .feedbackHeader div {
        display: inline-block;
    }

.feedbackTitle {
    font-size: 1em;
}

.feedbackArrow {
    padding-left: 10px;
    padding-right: 10px;
}

.feedbackContent {
    margin-bottom: 10px;
    padding: 10px;
    display: none;
}

.feedbackMessage {
    padding: 5px;
    width: 100%;
    resize: vertical;
    text-align: center;
    margin-bottom: 10px;
}

.inProgress {
    padding: 5px;
    width: 100%;
    resize: vertical;
    text-align: center;
    margin-bottom: 10px;
}

.feedbackInput {
    margin-bottom: 10px;
}

.feedbackTextArea {
    width: 100%;
    height: 150px;
    resize: none;
}

.feedbackButtonHolder {
    text-align: right;
}

.feedbackSendButton {
    background-color: #0C9543;
    color: white;
    border: none;
    border-radius: 2px;
    padding: 5px 10px;
    cursor: pointer;
    width: 125px;
}

.feedbackSendButton:hover {
    background-color: #228EC2;
}

/* ---- CREED AI chat: full-height right side panel — the project tree
       sidebar's right-hand sibling: same fixed shell, edge accent, and the
       same width mechanics (pushes #listHolder on wide screens, OVERLAYS the
       content at ≤1920px where the wide module cards can't share the row —
       keep the breakpoint in sync with the tree's). Tree + chat exclusion is
       width-driven (applyChatState / applyTreeState): both rails may be open
       at ≤1920px (both overlay) and at ≥2400px (both push, cards keep their
       ~1620px field); in the push zone between, opening one closes the other.
       Opened from the ✦ CREED AI pill in the top bar (the hamburger's
       right-rail mirror). ---- */
.aiChatContainer {
    position: fixed;
    top: 50px; /* below .topBar */
    right: 0;
    bottom: 0;
    width: var(--aiChatWidth, 440px);
    background: #ffffff;
    border-left: 1px solid #d7e2db;
    box-shadow: -14px 0 28px -18px rgba(8, 60, 30, 0.45);
    /* above the tree (4) + topBar (5), BEHIND the splash (10) and modals (100+) */
    z-index: 8;
    display: flex;
    flex-direction: column;
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    transition: transform 0.25s ease;
}
/* Theme.css's `* { font-family: 'Manrope' }` beats inheritance, so re-route
   every panel descendant back to inherit — the container's Manrope then
   actually lands. Later/more-specific rules (Consolas code + changeset rows)
   still win. */
.aiChatContainer * { font-family: inherit; }

/* left-edge gradient accent — mirrors .projectTreeSidebar::after */
.aiChatContainer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #23AE58, #007F3E);
    opacity: 0.35;
    pointer-events: none;
}

/* +3px so the edge-accent sliver (left: -1px) can't peek back in when closed */
body.aiChatClosed .aiChatContainer { transform: translateX(calc(100% + 3px)); box-shadow: none; }

/* ✦ CREED AI pill in the top bar's right cluster (JS-injected) — the panel's
   only reopen affordance, mirroring the hamburger on the left. Selector is
   scoped to beat the topBar group's `> div` base rule (same specificity,
   later in the file wins). */
.topBarItems > div:nth-child(3) > .aiChatTopBtn {
    height: auto;
    line-height: 1;
    align-self: center;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    margin-right: 0; /* last item in the cluster — sits at the bar's right edge */
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: white;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    user-select: none;
    /* contain the hover shimmer sweep (::after) */
    position: relative;
    overflow: hidden;
}
    .topBarItems > div:nth-child(3) > .aiChatTopBtn::before {
        content: "\2726";
        font-size: 12px;
        letter-spacing: normal;
    }
    /* Shimmer band: parked off the left edge; hover sweeps it across once. */
    .topBarItems > div:nth-child(3) > .aiChatTopBtn::after {
        content: "";
        position: absolute;
        top: -4px;
        bottom: -4px;
        left: -60%;
        width: 45%;
        transform: skewX(-20deg);
        background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
        pointer-events: none;
    }
    .topBarItems > div:nth-child(3) > .aiChatTopBtn:hover {
        background: rgba(255, 255, 255, 0.28);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* soft glow (global 100ms transition covers box-shadow) */
    }
        .topBarItems > div:nth-child(3) > .aiChatTopBtn:hover::after { animation: aiChatShimmer 0.7s ease 1 forwards; }
        .topBarItems > div:nth-child(3) > .aiChatTopBtn:hover::before { animation: aiChatTwinkle 0.6s ease; }
/* open = active: filled pill, brand green text */
body.aiChatOpen .topBarItems > div:nth-child(3) > .aiChatTopBtn {
    background: #ffffff;
    color: #0C9543;
    border-color: #ffffff;
}
    /* white-on-white sheen would vanish on the filled pill — tint it green */
    body.aiChatOpen .topBarItems > div:nth-child(3) > .aiChatTopBtn::after {
        background: linear-gradient(105deg, rgba(12,149,67,0) 0%, rgba(12,149,67,0.22) 50%, rgba(12,149,67,0) 100%);
    }
    body.aiChatOpen .topBarItems > div:nth-child(3) > .aiChatTopBtn:hover {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
    }
/* Discovery nudge: while the panel is closed AND has never been opened in
   this browser (body.aiChatNudge — cleared for good on first open, see
   markChatUsed in AiChatUI.js), the shimmer band makes one slow ~2s pass
   every 10s. Frequent enough to be caught in a glance or two by users who
   don't know the feature yet; permanently silent for everyone who does.
   Scoped :not(:hover) so the hover sweep takes over cleanly. */
@media (prefers-reduced-motion: no-preference) {
    body.aiChatClosed.aiChatNudge .topBarItems > div:nth-child(3) > .aiChatTopBtn:not(:hover)::after {
        animation: aiChatIdleSheen 10s linear infinite;
    }
}
/* parked off the left edge for 80% of the cycle, then one unhurried sweep */
@keyframes aiChatIdleSheen {
    0%, 80% { left: -60%; }
    100% { left: 130%; }
}
/* one sweep left-to-right, resting off the right edge until the next hover */
@keyframes aiChatShimmer {
    to { left: 130%; }
}
/* the ✦ twinkles: quick swell + tilt and back */
@keyframes aiChatTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.4) rotate(20deg); }
}

/* Drag-to-resize grip on the panel's left edge (open only). */
.aiChatResize { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 1; }
    .aiChatResize:hover { background: linear-gradient(180deg, #23AE58, #007F3E); opacity: 0.25; }
body.aiChatClosed .aiChatResize { display: none; }

/* Reserve space for the open chat on wide screens; at ≤1920px it overlays
   the content instead — same behavior + breakpoint as the project tree's
   #listHolder rules. (The .treeOpen combo is belt-and-suspenders: the
   mutual-exclusion JS should make treeOpen+aiChatOpen unreachable.) */
body.treeOpen.aiChatOpen #listHolder { left: 300px; width: calc(100% - 300px - var(--aiChatWidth, 440px)); }
body.treeCollapsed.aiChatOpen #listHolder { left: 0; width: calc(100% - var(--aiChatWidth, 440px)); }
@media (max-width: 1920px) {
    body.treeOpen.aiChatOpen #listHolder { left: 0; width: 100%; }
    body.treeCollapsed.aiChatOpen #listHolder { left: 0; width: 100%; }
}

/* The Feedback tab lives bottom-right — scoot it left of the open panel so it
   stays reachable (.feedbackContainer carries the matching right-transition). */
body.aiChatOpen .feedbackContainer { right: calc(var(--aiChatWidth, 440px) + 12px); }

/* Header: white toolbar matching .projectTreeBar — brand title left, collapse
   chevron right. The whole header still click-toggles the panel. */
.aiChatHeader {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 9px 10px 8px 14px;
    border-bottom: 1px solid #e3ece7;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
}
.aiChatTitle {
    order: 1;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7d8a83;
}
    .aiChatTitle::before {
        content: "\2726";
        color: #0C9543;
        margin-right: 7px;
        font-size: 12px;
        letter-spacing: normal;
    }
/* markup order is arrow-then-title; flex `order` puts the chevron on the right */
.aiChatArrow {
    order: 2;
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #7d8a83;
    font-size: 14px;
    line-height: 1;
}
.aiChatHeader:hover .aiChatArrow { background: #eef7f1; color: #0C9543; border-color: #dbeee2; }

/* Conversation strip under the header: switcher + New + Clear (JS-injected). */
.aiChatConvRow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #e3ece7;
    background: #fbfdfc;
}
.aiChatConvSelect {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 12px;
    color: #35443c;
    padding: 4px 6px;
    border: 1px solid #dbe6e0;
    border-radius: 6px;
    background: #ffffff;
}
.aiChatNewChat, .aiChatClear {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #7d8a83;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
    .aiChatNewChat:hover { background: #eef7f1; color: #0C9543; border-color: #dbeee2; }
    .aiChatClear:hover { background: #fdf0f1; color: #b02a37; border-color: #f3d7da; }
/* Content column: tinted canvas; cards float on it, the input dock is white.
   (JS sets inline display:flex on init — the markup ships it hidden.) */
.aiChatContent { padding: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; background: #f7faf8; }
.aiChatMessages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px;
}
    .aiChatMessages::-webkit-scrollbar { width: 8px; }
    .aiChatMessages::-webkit-scrollbar-thumb { background: #d3ded7; border-radius: 4px; }
    .aiChatMessages::-webkit-scrollbar-thumb:hover { background: #b9c9bf; }
/* First-open welcome (JS removes it the moment a bubble lands) */
.aiChatEmpty {
    margin: auto;
    text-align: center;
    color: #a7b3ac;
    font-size: 12.5px;
    line-height: 1.6;
    padding: 0 34px;
}
    .aiChatEmpty::before {
        content: "\2726";
        display: block;
        font-size: 26px;
        color: #23AE58;
        opacity: 0.45;
        margin-bottom: 8px;
    }
.aiChatMsg {
    padding: 8px 12px;
    border-radius: 12px;
    max-width: 88%;
    word-wrap: break-word;
    font-size: 13px;
    line-height: 1.45;
}
.aiChatMsg-user {
    align-self: flex-end;
    background: linear-gradient(180deg, #2aa1d8, #228EC2 60%, #1e7fae);
    color: white;
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 3px rgba(12, 90, 122, 0.3);
}
.aiChatMsg-assistant {
    align-self: flex-start;
    background: #ffffff;
    color: #2c3a33;
    border: 1px solid #e3ece7;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(8, 60, 30, 0.07);
}
    /* messages carrying a table claim the full row — prose keeps its
       readable 88% measure, data gets the space */
    .aiChatMsg-assistant:has(.aiChatTable) { max-width: 100%; }
.aiChatMsg-system { align-self: center; background: transparent; color: #8a968f; font-style: italic; font-size: 12px; text-align: center; }
/* Headstart launch card — rendered IN PLACE of the raw kickoff prompt (the
   full instruction still goes to the model/history; only the display is
   curtained — see HEADSTART_SENTINEL in AiChatUI.js). */
.aiChatMsg-headstart {
    align-self: center;
    text-align: center;
    max-width: 88%;
    background: var(--btn-primary-grad);
    color: white;
    border-radius: 12px;
    padding: 12px 22px;
    box-shadow: 0 2px 10px rgba(8, 60, 30, 0.25);
}
    .aiChatMsg-headstart .aiChatHeadstartTitle { font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
        .aiChatMsg-headstart .aiChatHeadstartTitle::before { content: "\2726"; margin-right: 7px; letter-spacing: normal; }
    .aiChatMsg-headstart .aiChatHeadstartSub { font-size: 11.5px; opacity: 0.9; margin-top: 3px; }
.aiChatMsgText { white-space: pre-wrap; }
.aiChatMsgText > div { margin-bottom: 3px; }
.aiChatMsgText > div:empty { height: 0.4em; margin: 0; }
.aiChatMsgText > div:last-child { margin-bottom: 0; }
/* markdown headings + horizontal rules (## / ---) inside messages */
.aiChatMsgText .aiChatH1, .aiChatMsgText .aiChatH2,
.aiChatMsgText .aiChatH3, .aiChatMsgText .aiChatH4 {
    font-weight: 700;
    color: #2c3a33;
    margin: 9px 0 4px;
}
.aiChatMsgText .aiChatH1 { font-size: 15px; }
.aiChatMsgText .aiChatH2 { font-size: 14px; }
.aiChatMsgText .aiChatH3, .aiChatMsgText .aiChatH4 { font-size: 13px; }
.aiChatMsgText .aiChatH1:first-child, .aiChatMsgText .aiChatH2:first-child,
.aiChatMsgText .aiChatH3:first-child, .aiChatMsgText .aiChatH4:first-child { margin-top: 0; }
.aiChatMsgText .aiChatHr { height: 0; border-top: 1px solid #dbe6e0; margin: 9px 0; }
/* messages get a touch more size on the big build-mode canvas */
body.aiBuildMode .aiChatMsg { font-size: 14px; }
.aiChatTable { border-collapse: collapse; margin: 5px 0; font-size: 0.92em; display: block; overflow-x: auto; max-width: 100%; }
    .aiChatTable th, .aiChatTable td { border: 1px solid #dbe6e0; padding: 3px 7px; text-align: left; white-space: nowrap; }
    .aiChatTable th { background: #eef7f1; font-weight: 600; }
.aiChatList { margin: 4px 0; padding-left: 20px; }
.aiChatMsgText code { background: rgba(8, 60, 30, 0.07); padding: 0 4px; border-radius: 4px; font-family: Consolas, monospace; font-size: 0.9em; }
.aiChatChips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.aiChatChip { font-size: 11px; background: #e8f2f8; color: #0C5A7A; border: 1px solid #d3e5ef; border-radius: 999px; padding: 2px 9px; }
.aiChatChip-error { background: #f8d7da; color: #842029; border-color: #f0c4c9; }
.aiChatChip-busy::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 2px solid #0C5A7A; border-top-color: transparent; border-radius: 50%; vertical-align: -1px; animation: aiChatSpin 0.7s linear infinite; }
@keyframes aiChatSpin { to { transform: rotate(360deg); } }
/* Staged-changes card — a miniature module card (the app's green-header +
   white-body signature), capped list height so an 85-change Headstart build
   can't swallow the panel. */
.aiChatChangeset {
    flex: 0 0 auto;
    margin: 0 10px 8px;
    background: #ffffff;
    border: 1px solid #cfe8da;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(8, 60, 30, 0.1);
    overflow: hidden; /* the full-bleed header honors the corner radius */
}
.aiChatChangesetTitle {
    margin: -8px -10px 8px; /* full-bleed header strip */
    padding: 6px 10px;
    background: var(--btn-primary-grad);
    color: white;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
    .aiChatChangesetTitle::before { content: "\2726"; margin-right: 6px; letter-spacing: normal; }
.aiChatChangesetList { max-height: 180px; overflow-y: auto; }
    .aiChatChangesetList::-webkit-scrollbar { width: 8px; }
    .aiChatChangesetList::-webkit-scrollbar-thumb { background: #d3ded7; border-radius: 4px; }
.aiChatChangesetRow { font-size: 11.5px; font-family: Consolas, monospace; color: #35443c; padding: 2px 0; white-space: pre-wrap; }
.aiChatChangesetButtons { text-align: right; margin-top: 8px; }
/* Input dock */
.aiChatInputRow { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid #e3ece7; background: #ffffff; }
.aiChatInput {
    flex: 1;
    height: 64px;
    min-height: 40px;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
    color: #2c3a33;
    padding: 8px 10px;
    background: #fbfdfc;
    border: 1px solid #dbe6e0;
    border-radius: 8px;
}
    .aiChatInput:disabled { background: #f1f5f2; color: #9aa8a0; }
.aiChatSend, .aiChatApply {
    background: var(--btn-primary-grad); color: white; border: none; border-radius: 6px;
    padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600;
    box-shadow: var(--btn-shadow);
}
    .aiChatSend:hover, .aiChatApply:hover { background: var(--btn-primary-grad-hover); box-shadow: var(--btn-shadow-hover); }
.aiChatStop, .aiChatDiscard {
    background: #ffffff; color: #6c7a72; border: 1px solid #d7e2db; border-radius: 6px;
    padding: 7px 13px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600;
}
    .aiChatStop:hover, .aiChatDiscard:hover { background: #fdf0f1; color: #b02a37; border-color: #f3d7da; }
    /* Apply/Discard are disabled while the assistant is mid-turn */
    .aiChatApply:disabled, .aiChatDiscard:disabled { opacity: 0.5; cursor: not-allowed; }
    .aiChatApply:disabled:hover { background: var(--btn-primary-grad); box-shadow: var(--btn-shadow); }
    .aiChatDiscard:disabled:hover { background: #ffffff; color: #6c7a72; border-color: #d7e2db; }
.aiChatAutoApplyRow { display: block; font-size: 11.5px; color: #6c7a72; margin-top: 8px; cursor: pointer; user-select: none; }
/* answer picker (askUser tool) — the changeset card's sibling; blue header =
   a decision that's yours (vs the green staged-changes card) */
.aiChatQuestion {
    flex: 0 0 auto;
    margin: 0 10px 8px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #cfe0ea;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(12, 90, 122, 0.1);
    overflow: hidden; /* the full-bleed header honors the corner radius */
}
.aiChatQuestionTitle {
    margin: -8px -10px 8px; /* full-bleed header strip */
    padding: 7px 10px;
    background: linear-gradient(180deg, #2aa1d8, #1e7fae);
    color: white;
    font-weight: 600;
    font-size: 12.5px;
}
.aiChatQuestionOption {
    display: block; width: 100%; text-align: left; margin: 4px 0; padding: 7px 10px;
    background: #fbfdfc; border: 1px solid #dbe6e0; border-radius: 6px; cursor: pointer;
    font-family: inherit; transition: background 0.12s ease, border-color 0.12s ease;
}
    .aiChatQuestionOption:hover { background: #e8f2f8; border-color: #228EC2; }
.aiChatQuestionLabel { font-weight: 600; font-size: 12.5px; color: #0C5A7A; }
.aiChatQuestionDetail { font-size: 11.5px; color: #6c7a72; margin-top: 1px; }
/* long/markdown questions render as a body under a generic title strip */
.aiChatQuestionBody { font-size: 12.5px; color: #333d38; margin: 0 0 8px; overflow-x: auto; }
/* "Other…" — dashed = write-your-own; clicking swaps it for the inline field */
.aiChatQuestionOther { border-style: dashed; background: #ffffff; }
.aiChatQuestion-otherOpen .aiChatQuestionOther { display: none; }
.aiChatQuestionOtherRow { display: none; margin: 4px 0 2px; gap: 6px; }
.aiChatQuestion-otherOpen .aiChatQuestionOtherRow { display: flex; }
.aiChatQuestionOtherInput {
    flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-family: inherit; font-size: 12.5px;
    color: #0C5A7A; background: #fbfdfc; border: 1px solid #228EC2; border-radius: 6px;
}
    .aiChatQuestionOtherInput:focus { outline: none; border-color: #1e7fae; box-shadow: 0 0 0 2px rgba(34, 142, 194, 0.18); }
.aiChatQuestionOtherSend {
    flex: 0 0 auto; padding: 7px 12px; border: none; border-radius: 6px; cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: 12px; color: white;
    background: linear-gradient(180deg, #2aa1d8, #1e7fae); /* the card's own blue */
}
    .aiChatQuestionOtherSend:hover { filter: brightness(1.06); }
/* spec-document attach control + pending chip */
.aiChatAttach {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid #dbe6e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    padding: 0;
}
    .aiChatAttach:hover { background: #eef7f1; border-color: #dbeee2; }
.aiChatAttachChip { align-self: flex-start; margin: 0 10px 8px; font-size: 12px; padding: 3px 10px; background: #e8f2f8; border: 1px solid #d3e5ef; border-radius: 999px; display: inline-block; color: #0C5A7A; }
.aiChatAttachChipX { cursor: pointer; font-weight: bold; }

/* ===== New Project modal: side-by-side start options (JS-injected — the
       classic full-width Create button + separator are hidden by the
       injector; the left card calls the same createNewProject()) ===== */
/* `.modalContent > div` forces every direct child to a 40px button row —
   out-specific it (0,2,0 beats 0,1,1) and reset the box so the cards get
   their natural height. */
.modalContent > .aiHeadstartOffer {
    height: auto;
    line-height: normal;
    cursor: default;
    margin-bottom: 10px;
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}
    .aiHeadstartOffer * { font-family: inherit; } /* Manrope universal-rule guard */
.aiHeadstartCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 14px 14px;
    background: #fbfdfc;
    border: 1px solid #d7e2db;
    border-radius: 10px;
    user-select: none;
}
    /* only the Empty card is click-the-card; the AI card has its two buttons */
    .aiHeadstartCard-empty { cursor: pointer; justify-content: center; }
    .aiHeadstartCard-empty:hover { border-color: #0C9543; background: #eef7f1; box-shadow: var(--btn-shadow); }
    /* a confident +, drawn as two CSS bars — text plus glyphs sit at the
       font's math-axis height and never center in a box, at any size.
       Same filled gradient disc as the AI card's ✦: the two options read
       as siblings, one white glyph each. */
    .aiHeadstartCard-empty .aiHeadstartCardIcon { position: relative; background: var(--btn-primary-grad); }
    .aiHeadstartCard-empty .aiHeadstartCardIcon::before,
    .aiHeadstartCard-empty .aiHeadstartCardIcon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #ffffff;
        border-radius: 1px;
    }
    .aiHeadstartCard-empty .aiHeadstartCardIcon::before { width: 16px; height: 3px; }
    .aiHeadstartCard-empty .aiHeadstartCardIcon::after { width: 3px; height: 16px; }
.aiHeadstartCardIcon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 18px;
    background: #eef7f1;
    color: #0C9543;
}
.aiHeadstartCard-ai .aiHeadstartCardIcon { background: var(--btn-primary-grad); color: white; }
.aiHeadstartCardTitle { font-weight: 700; font-size: 13px; color: #35443c; }
.aiHeadstartCardText { font-size: 11.5px; color: #7d8a83; line-height: 1.45; }
.aiHeadstartCardBtns { display: flex; gap: 6px; margin-top: 6px; }
.aiHeadstartCardBtn {
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--btn-primary-grad);
    color: white;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    box-shadow: var(--btn-shadow);
}
    .aiHeadstartCardBtn:hover { background: var(--btn-primary-grad-hover); box-shadow: var(--btn-shadow-hover); }
    .aiHeadstartCardBtn-ghost { background: #ffffff; color: #0C9543; border-color: #9fd4b6; box-shadow: none; }
    .aiHeadstartCardBtn-ghost:hover { background: #eef7f1; box-shadow: none; }

/* ===== ✦ AI Headstart build mode (body.aiBuildMode) =====
   FULL takeover: the chat covers everything right of the project tree — the
   cards are hidden from view but stay fully RENDERED beneath (z-index, not
   display — the tools drive their real DOM and Tabulator needs layout). The
   tree stays as the live heartbeat: nodes appear as equipment lands. Exited
   ONLY via the header's "Exit to project view" button (toggle() no-ops while
   building) — dropping the takeover is the big reveal (body.aiBuildReveal
   pops the finished cards in, staggered). Rail exclusion is bypassed here
   (see applyChatState / applyTreeState). */
body.aiBuildMode.treeOpen .aiChatContainer { left: 300px; right: 0; width: auto; }
body.aiBuildMode.treeCollapsed .aiChatContainer { left: 0; right: 0; width: auto; }
body.aiBuildMode .aiChatResize { display: none; } /* nothing to resize — it's everything */
/* readable document column on the huge canvas; header stays full-bleed.
   (Full-bleed content was tried and reads badly — 1600px prose lines.) */
body.aiBuildMode .aiChatConvRow,
body.aiBuildMode .aiChatContent { width: 100%; max-width: 1160px; align-self: center; }
body.aiBuildMode .feedbackContainer { display: none; } /* no distractions during the magic */
body.aiBuildMode .aiChatArrow { display: none; } /* the Exit button is the way out */

/* BOOM — the reveal: when the takeover drops, the finished project's cards
   pop in staggered (class added by exitBuildMode for ~1.4s). */
body.aiBuildReveal .listItem { animation: aiRevealPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
body.aiBuildReveal .listItem:nth-child(2) { animation-delay: 0.08s; }
body.aiBuildReveal .listItem:nth-child(3) { animation-delay: 0.16s; }
body.aiBuildReveal .listItem:nth-child(4) { animation-delay: 0.24s; }
body.aiBuildReveal .listItem:nth-child(5) { animation-delay: 0.32s; }
body.aiBuildReveal .listItem:nth-child(6) { animation-delay: 0.40s; }
body.aiBuildReveal .listItem:nth-child(n+7) { animation-delay: 0.48s; }
@keyframes aiRevealPop {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* THE CURTAIN CALL (body.aiBuildFinale — the finishHeadstart tool's auto-
   finale): the statelier cousin of aiBuildReveal. Both rails close
   themselves, the modules rise in slowly and deliberately under a brief
   brand-color confetti burst (confettiBurst in AiChatUI). */
@media (prefers-reduced-motion: no-preference) {
    body.aiBuildFinale .listItem { animation: aiFinaleRise 1.25s cubic-bezier(0.16, 0.84, 0.24, 1) backwards; }
    body.aiBuildFinale .listItem:nth-child(2) { animation-delay: 0.45s; }
    body.aiBuildFinale .listItem:nth-child(3) { animation-delay: 0.9s; }
    body.aiBuildFinale .listItem:nth-child(4) { animation-delay: 1.35s; }
    body.aiBuildFinale .listItem:nth-child(5) { animation-delay: 1.8s; }
    body.aiBuildFinale .listItem:nth-child(n+6) { animation-delay: 2.25s; }
}
@keyframes aiFinaleRise {
    from { opacity: 0; transform: translateY(26px) scale(0.99); }
    to { opacity: 1; transform: none; }
}
/* the confetti canvas floats over everything, never intercepts a click */
.aiConfettiCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    pointer-events: none;
}

/* ===== Build-mode ambient — the calm in the negative space =====
   Two soft brand-color orbs drifting in slow orbits + three ✦ motes, painted
   BEHIND the content column (z-index:-1 inside the panel's stacking context;
   the column's tinted background masks the middle, so the motion lives in
   the gutters). Compositor-only (transform/opacity, no filters), hidden
   outside build mode, still under prefers-reduced-motion. */
.aiBuildAmbient {
    display: none;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
body.aiBuildMode .aiBuildAmbient { display: block; }
/* Full-canvas color washes: two diagonal brand gradients, counter-phased
   breathing (22s vs 30s), so the whole canvas slowly shifts hue as they
   crossfade — the "background color changing" layer. Compositor-only
   (opacity), and the content column's own solid background keeps the
   reading surface steady. */
.aiBuildWash {
    /* A rotating RECTANGLE exposes its corners on tall panels — use a huge
       centered SQUARE instead: 150vmax's inscribed circle covers any
       viewport diagonal at any rotation angle, so no edge can ever show. */
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150vmax;
    height: 150vmax;
    margin: -75vmax 0 0 -75vmax;
    will-change: opacity, transform;
}
.aiBuildWash-a {
    background: linear-gradient(135deg, rgba(35, 174, 88, 0.22) 0%, rgba(35, 174, 88, 0.08) 45%, rgba(34, 142, 194, 0.16) 100%);
    animation: aiWashBreatheA 22s ease-in-out infinite alternate, aiWashSpinA 90s linear infinite;
}
.aiBuildWash-b {
    background: linear-gradient(315deg, rgba(34, 142, 194, 0.20) 0%, rgba(34, 142, 194, 0.08) 45%, rgba(35, 174, 88, 0.14) 100%);
    animation: aiWashBreatheB 30s ease-in-out infinite alternate, aiWashSpinB 120s linear infinite;
}
@keyframes aiWashBreatheA { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes aiWashBreatheB { from { opacity: 1; } to { opacity: 0.2; } }
/* counter-rotating hue sweeps — the color boundaries travel the room */
@keyframes aiWashSpinA { to { transform: rotate(360deg); } }
@keyframes aiWashSpinB { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.aiBuildOrb {
    position: absolute;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    will-change: transform;
}
.aiBuildOrb-green {
    left: -220px;
    top: 5%;
    background: radial-gradient(circle, rgba(35, 174, 88, 0.32) 0%, rgba(35, 174, 88, 0) 70%);
    animation: aiOrbDriftA 26s ease-in-out infinite alternate;
}
.aiBuildOrb-blue {
    right: -240px;
    bottom: 0;
    background: radial-gradient(circle, rgba(34, 142, 194, 0.27) 0%, rgba(34, 142, 194, 0) 70%);
    animation: aiOrbDriftB 34s ease-in-out infinite alternate;
}
@keyframes aiOrbDriftA {
    from { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50%  { transform: translate(160px, 260px) scale(1.25); opacity: 1; }
    to   { transform: translate(60px, -120px) scale(0.9); opacity: 0.7; }
}
@keyframes aiOrbDriftB {
    from { transform: translate(0, 0) scale(1.1); opacity: 1; }
    50%  { transform: translate(-220px, -180px) scale(0.85); opacity: 0.7; }
    to   { transform: translate(-70px, 100px) scale(1.2); opacity: 0.95; }
}
/* ✦ motes: faint, rising like dust in light; opacity 0 at both ends of the
   cycle hides the loop reset */
.aiBuildMote {
    position: absolute;
    color: #23AE58; /* green by default; the left pair is overridden blue below */
    font-size: 18px;
    opacity: 0;
    animation: aiMoteFloat 22s linear infinite;
}
    /* nth-of-type: the motes are the ambient's only <span>s (washes/orbs are divs) */
    /* left pair matches the blue orb; right pair (3,4) stays green */
    .aiBuildMote:nth-of-type(1) { left: 11%; top: 78%; color: #228EC2; }
    .aiBuildMote:nth-of-type(2) { left: 6%; top: 48%; animation-delay: 8s; font-size: 13px; color: #228EC2; }
    .aiBuildMote:nth-of-type(3) { right: 8%; top: 68%; animation-delay: 15s; font-size: 16px; }
    .aiBuildMote:nth-of-type(4) { right: 13%; top: 30%; animation-delay: 4s; font-size: 12px; }
@keyframes aiMoteFloat {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    12%  { opacity: 0.45; }
    50%  { opacity: 0.28; }
    88%  { opacity: 0.40; }
    100% { transform: translateY(-260px) rotate(30deg); opacity: 0; }
}
/* Reduced-motion: the ambient build-mode field parks still and faint. */
@media (prefers-reduced-motion: reduce) {
    .aiBuildOrb, .aiBuildMote { animation: none; }
    .aiBuildMote { opacity: 0.08; }
}

/* "Exit to project view" pill in the panel header — build mode only */
.aiChatExitBuild {
    display: none;
    order: 2;
    margin-left: auto;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0C5A7A;
    background: #e8f2f8;
    border: 1px solid #cfe0ea;
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
    .aiChatExitBuild:hover { background: #d9ebf5; border-color: #228EC2; }
body.aiBuildMode .aiChatExitBuild { display: inline-flex; }

/* dark mode: no compensations needed — the panel is a light surface like the
   project tree sidebar, so the global root invert handles it whole. */

.expandCollapse {
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
}

.cuOptionCheckbox {
    margin-right: 12.5px;
}

.conOptionCheckbox {
    margin-right: 12.5px;
}

.ucOptionCheckbox {
    margin-right: 12.5px;
}

.connectEnable {
    width: 155px;
    min-width: 155px;
}

.connectContainer {
    padding: 20px;
    box-sizing: border-box;
}

/* Equipment | Pricing sit side by side on top; the Users list sits beside them when there's
   room and wraps to its own line beneath Equipment when the card is too narrow. flex-wrap does
   the reflow. The toggle sits above this, a plain block child of .connectContainer. */
.connectPanels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 25px;
}

/* Equipment + Pricing as one non-wrapping unit, stretched to EQUAL HEIGHT (align-items:stretch)
   so Equipment's panel matches Pricing's height. That way the Users list, when it wraps to the
   next line, tucks directly beneath Equipment instead of floating below a short table. */
.connectMainRow {
    display: flex;
    flex: none;
    column-gap: 25px;
    align-items: stretch;
}

.connectEquipmentContainer { flex: none; }

/* Cap Pricing's width so its long "Verify Cell Service" sentence (a full-width block below the
   dual-column price grid) wraps instead of stretching the panel wide. 600px fits the 2-col grid. */
.connectPricingContainer { flex: none; max-width: 600px; }

/* Users: a compact panel that sits beside the Equipment+Pricing row, or wraps beneath Equipment
   (left-aligned) when the card is too narrow. Top-aligned when it sits beside. */
.connectUsersContainer { flex: none; min-width: 440px; align-self: flex-start; }

.connectEnableContent {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 1px;
    grid-column-gap: 5px;
    text-align: center;
    padding-top: 5px;
    width: 100%;
}

.connectEquipmentContainer {
    /*margin-left: 20px;*/
    width: 1000px;
    /*grid-auto-flow: column;*/
}

.connectPricingContainer {
    min-height: 325px;
}

.connectPriceContent {

}

.connectCellServiceWarning {
    margin-top: 15px;
    padding: 10px 14px;
    border: 1px solid #f0ad4e;
    border-radius: 5px;
    background-color: rgba(240, 173, 78, 0.12);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    font-size: 0.95em;
}

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

.connectUsersEntryRow {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.connectUserEmailInput {
    flex: 1 1 auto;
    min-width: 0;
}

.connectUserEmailError {
    color: #d9534f;
    margin-bottom: 8px;
    font-size: 0.9em;
}

/* Recipient list: stacked rows; caps its height and scrolls once it fills so the
   panel stays tidy no matter how many people are added. */
.connectUserEmailList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

/* Each recipient reads as a discrete card row — subtle fill + border from the
   theme's neutral treatment, a leading mail glyph, and a trailing remove control.
   Grey-with-alpha stays legible under CREED's invert-based dark mode. */
.connectUserEmailRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid rgba(128,128,128,0.25);
    border-radius: 5px;
    background: rgba(128,128,128,0.10);
}

.connectUserEmailRow::before {
    content: "\2709";           /* envelope — signals "recipient" without a label */
    flex: 0 0 auto;
    font-size: 0.95em;
    opacity: 0.55;
}

.connectUserEmailText {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* Remove: quiet by default, unmistakable danger affordance on hover/focus.
   The X is drawn as two centered bars rather than a text glyph, so it stays optically
   dead-centered in the circle regardless of the font's glyph metrics. */
.connectUserEmailRemove {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}

.connectUserEmailRemove::before,
.connectUserEmailRemove::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}

.connectUserEmailRemove::before { transform: translate(-50%, -50%) rotate(45deg); }
.connectUserEmailRemove::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.connectUserEmailRemove:hover {
    opacity: 1;
    color: #fff;
    background: #d9534f;
}

.connectUserEmailRemove:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 1px;
    opacity: 1;
}

/* Empty state: a quiet, centered invitation rather than a bare line of text. */
.connectUserEmailEmpty {
    padding: 16px 8px;
    text-align: center;
    opacity: 0.55;
    font-style: italic;
}

/* ===== Table Wrapper for Scroll ===== */
.tableWrapper {
    max-height: 670px;
    overflow-y: auto;
    position: relative;
    border: 1px solid #ccc;
    margin-top: 10px;
    margin-right:10px;
    margin-left:10px;
}

/* ===== Header Row Positioned Absolutely ===== */
#loadProjectModal .modalContent thead th {
    position: absolute;
    top: 0;
    background: #fff;
    z-index: 2;
    height: 40px; /* or whatever height your header needs */
    line-height: 40px;
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Push Table Content Down So It Doesn't Overlap ===== */
#loadProjectModal .modalContent tbody {
    display: table-row-group;
    padding-top: 40px; /* doesn't work on tbody � see below */
}

/*  Fix: Use table margin instead */
#loadProjectModal .modalContent table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 40px; /* this is the key! */
}

/* ===== Table Cells ===== */
#loadProjectModal .modalContent th,
#loadProjectModal .modalContent td {
    border: 1px solid #ccc;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Project name column wraps */
    #loadProjectModal .modalContent td.projectName {
        white-space: normal;
        word-wrap: break-word;
    }

.tableWrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/*table {
    width: 100%;
    border-collapse: collapse;*/ /* remove double borders */
    /*table-layout: fixed;
}*/

/* Button styling */
.projectListItem.smallButton {
    width: 100%;
    height: 30px;
    border: none;
    cursor: pointer;
}

.deleteButton {
    height: 30px;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    font-size: 1.2rem;
}

#projectTable td {
    border: 1px solid #e0e0e0; /* Light gray border */
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   
}

    /* Project name cell still wraps nicely */
    #projectTable td.projectName {
        white-space: normal;
        word-wrap: break-word;
    }


#loadProjectModal .modalContent #projectTable td {
    border: 1px solid #e0e0e0;
}

.tableHeader{
    padding-right:12px;
}

/* Indent revision rows visually */
#projectTable #projectTableBody .revisionRow .projectName {
    padding-left: 2em;
    font-style: italic;
    color: #555;
}

.viewOnly {
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    line-height: 50px;
    top: -5px;
    position: relative;
    font-weight: bold;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    color: #F28C28;
}

.versionDisplayContainer {
    text-align: center;
    margin-top: -30px;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.5)
}

/* Right-side instructions modal (inside existing modalHolder) */
.instructionsSidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -10px 0 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 10;
}

/* Instructions modal header */
.instructionsHeader {
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Content inside the instructions panel */
.instructionsContent {
    font-size: 1em;
    line-height: 1.6;
}

/* Close (X) button */
.instructionsClose {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--btn-danger);
    color: white;
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    border-radius: 4px; /* Make it slightly rounded, or set to 0 for sharp corners */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

input:disabled {
    color: gray; /* Text color */
    background-color: #f0f0f0; /* Background color */
    border: 1px solid #ccc; /* Optional: override border style */
}

select:disabled {
    color: gray; /* Text color */
    background-color: #f0f0f0; /* Background color */
    border: 1px solid #ccc; /* Optional: override border style */
}

.tabulator .tabulator-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    
}

#projectTable .tabulator-tableholder {
/*    overflow-y: hidden !important;
*/}
    #projectTable .tabulator-tableholder::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

.deleteButton[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.save-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #4CAF50; /* Matches green accent in your project */
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

    .save-button:hover {
        background-color: #45a049; /* Slightly darker on hover */
        box-shadow: 0 3px 6px rgba(0,0,0,0.25);
    }

/* Make the entire toggle section align left in a clean vertical stack */
.toggle-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
    margin-bottom: 1.5em;
}

/* Each line becomes: label + options toggle */
.toggle-line {
    display: flex;
    align-items: center;
    gap: 1em;
}

/* Reuse your existing toggle-container but make spacing clean */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* Improve label consistency */
.toggle-line .input-label {
    font-weight: 600;
    margin-right: 0.5em;
    color:black;
}

/* Force toggle text to be black */
.toggle-row .input-label,
.toggle-row .toggle-label {
    color: black;
}

/* Make everything inside the modal align cleanly to the left */
.alacarte-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin-top: 1em;
}

    /* Force checkboxes + buttons to align left */
    .alacarte-list input[type="checkbox"],
    .alacarte-list .alaCartePrint {
        margin-left: 0;
        margin-right: auto;
        display: block;
    }

    /* Slight spacing improvement for readability */
    .alacarte-list input[type="checkbox"] {
        transform: scale(1.1);
    }



/* Make the header taller to fit close button */
.modalHeader--tall {
    position: relative;
    padding-right: 40px; /* so text doesn't collide with X */
    min-height: 50px;
    display: flex;
    align-items: center;
}

/* Close button reused from your inline code */
.modalCloseButton {
    border: none;
    background-color: var(--btn-danger);
    color: white;
    width: 30px;
    height: 28px;
    line-height: 28px;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
    text-align: center;
}

/* Canonical modal exit button: the circular, glassy X from the Load Contact modal,
   pulled into one shared class so every modal's top-right close control matches.
   Flex-centering plus line-height:1 keep the glyph centered no matter the app font
   (the old per-modal red squares were sized around the pre-Manrope font and no
   longer fit). Sized to sit inside the standard 28px .modalHeader; add --corner to
   pin it to a modal's top-right corner. */
.modalXClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 999px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    user-select: none;
}

    .modalXClose:hover {
        background: rgba(255,255,255,0.18);
    }

.modalXClose--corner {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 5;
}

/* Pair this with .modalHeader on any modal whose header hosts a corner close
   button. A plain .modalHeader is only as tall as its title, which leaves the
   round X flush against the header's bottom edge; this grows the header and
   vertically centers both the title and the button (the button sits inside the
   header). */
.modalHeader--wClose {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 2px 44px;
}

/* Checkbox rows */
.checkboxGroup {
    padding-left: 15px; /* padding from modal edge */
    margin-top: 10px;
}

.checkboxRow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: black;
    font-size: 1.1em;
}

    /* Ensure checkbox text is black */
    .checkboxRow input + span,
    .checkboxRow {
        color: black !important;
    }

/* Make generate button wider with padding */
.alaCarteButton {
    display: block;
    margin-left: 15px;
    margin-top: 15px;
    padding: 8px 14px;
    width: auto; /* enough to fit text */
}

.radio-container {
    display: flex;
    gap: 1.5em;
    align-items: center;
    color:black;
}

.radio-option {
    display: flex;
    gap: 0.4em;
    cursor: pointer;
}

/* =========================================================
   Account Settings Tabs (toolTab5 = RAE, toolTab7 = general)
   Fully scoped via .acct-tab, self-contained
   Layout: Top Bar | Scroll Area | Footer
========================================================= */

/* Base: let your existing .toolTab-content { display:none } win */
.acct-tab {
    /* DO NOT set display here */
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.82);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
    overflow: hidden;
    padding: 0;
}

    /* When your JS toggles .active, use flex layout */
    .acct-tab.active {
        display: flex;
        height: 100%;
    }


/* Force readable text regardless of inherited styles or darkmode */
.acct-tab,
.acct-tab * {
    color: #111;
}

    /* =====================
   Top Bar (Close)
===================== */

    .acct-tab .acct-topbar {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 12px 12px 8px 12px;
        background: rgba(255,255,255,0.92);
        border-bottom: 1px solid rgba(0,0,0,0.08);
        backdrop-filter: blur(10px);
        z-index: 2;
    }

    .acct-tab .acct-close {
        position: static; /* override global absolute positioning */
        border: 1px solid rgba(255,255,255,0.35);
        border-radius: 999px;
        padding: 6px 14px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(0,0,0,0.14);
        transition: box-shadow 160ms ease, transform 160ms ease;
    }

        .acct-tab .acct-close:hover {
            box-shadow: 0 14px 28px rgba(0,0,0,0.18);
        }

        .acct-tab .acct-close:active {
            transform: translateY(1px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.14);
        }

        .acct-tab .acct-close:focus-visible {
            outline: 3px solid rgba(34,142,194,0.35);
            outline-offset: 3px;
        }

    /* =====================
   Scroll Area (Content)
===================== */

    .acct-tab .acct-scroll {
        flex: 1 1 auto;
        min-height: 0; /* REQUIRED for flex scrolling */
        overflow: auto;
        padding: 12px;
    }

    /* Card holding the settings */
    .acct-tab .acct-card {
        border: 1px solid rgba(0,0,0,0.08);
        background: rgba(255,255,255,0.85);
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* =====================
   Sections & Layout
===================== */

    .acct-tab .acct-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .acct-tab .acct-section-title {
        font-weight: 800;
        color: rgba(0,0,0,0.78);
    }

    /* Two-row grid for toggles */
    .acct-tab .acct-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Row: label + toggle */
    .acct-tab .acct-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px;
        border-radius: 12px;
        background: rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.06);
    }

    .acct-tab .acct-label {
        font-weight: 800;
        white-space: nowrap;
    }

    /* Toggle pill */
    .acct-tab .acct-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,0.75);
        border: 1px solid rgba(0,0,0,0.07);
    }

    /* Toggle labels */
    .acct-tab .acct-toggleText {
        font-weight: 800;
        font-size: 0.95em;
        color: rgba(0,0,0,0.52);
        user-select: none;
    }

        .acct-tab .acct-toggleText.active {
            color: rgba(0,0,0,0.88);
        }

    /* =====================
   Switch Styling
   (uses existing .switch/.slider markup)
===================== */

    .acct-tab .acct-switch {
        width: 54px;
        height: 26px;
    }

    .acct-tab .acct-slider {
        border-radius: 999px;
        background-color: rgba(0,0,0,0.18);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.20);
        transition: background-color 160ms ease, box-shadow 160ms ease;
    }

        .acct-tab .acct-slider:before {
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            border-radius: 999px;
            box-shadow: 0 6px 16px rgba(0,0,0,0.20);
            transition: transform 160ms ease;
        }

    .acct-tab .acct-switch input:checked + .acct-slider {
        background-color: #0C9543;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.18), 0 0 0 3px rgba(12,149,67,0.12);
    }

        .acct-tab .acct-switch input:checked + .acct-slider:before {
            transform: translateX(28px);
        }

    .acct-tab .acct-switch input:focus-visible + .acct-slider {
        box-shadow: 0 0 0 3px rgba(34,142,194,0.25);
    }

    /* =====================
   Radio Buttons
===================== */

    .acct-tab .acct-radioRow {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        border-radius: 12px;
        background: rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.06);
    }

    .acct-tab .acct-radio {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,0.08);
        background: rgba(255,255,255,0.75);
        cursor: pointer;
        user-select: none;
    }

        .acct-tab .acct-radio input[type="radio"] {
            transform: scale(1.05);
        }

    .acct-tab .acct-radioText {
        font-weight: 800;
    }

    /* =====================
   Footer (Save Button)
===================== */

    .acct-tab .acct-footer {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 10px 12px 12px 12px;
        background: rgba(255,255,255,0.92);
        border-top: 1px solid rgba(0,0,0,0.08);
        backdrop-filter: blur(10px);
        z-index: 2;
    }

    /* Override global absolute save-button */
    .acct-tab .acct-save {
        position: static;
        border-radius: 999px;
        padding: 12px 18px;
        font-weight: 900;
        letter-spacing: 0.2px;
        box-shadow: 0 12px 26px rgba(0,0,0,0.16);
        transition: box-shadow 160ms ease, transform 160ms ease;
    }

        .acct-tab .acct-save:hover {
            box-shadow: 0 16px 34px rgba(0,0,0,0.18);
        }

        .acct-tab .acct-save:active {
            transform: translateY(1px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.14);
        }

        .acct-tab .acct-save:focus-visible {
            outline: 3px solid rgba(34,142,194,0.35);
            outline-offset: 3px;
        }

/* =========================================================
   EDVCCalc Tab (toolTab3)
   Fully scoped, self-contained
   Layout: Top Bar | Scroll Area | Footer
========================================================= */

#toolTab3.edvc-tab {
    /* IMPORTANT: don't set display here (tab system controls it) */
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.82);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
    overflow: hidden;
    padding: 0;
}

    /* Only apply flex layout when active (matches your tab behavior) */
    #toolTab3.edvc-tab.active {
        display: flex;
    }

/* Keep text readable even if parent styles/darkmode do odd things */
#toolTab3,
#toolTab3 * {
    color: #111;
}

    /* =====================
   Top Bar
===================== */

    #toolTab3 .edvc-topbar {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 12px 8px 12px;
        background: rgba(255,255,255,0.92);
        border-bottom: 1px solid rgba(0,0,0,0.08);
        backdrop-filter: blur(10px);
        z-index: 2;
    }

    #toolTab3 .edvc-title {
        font-weight: 900;
        font-size: 1.15em;
        letter-spacing: 0.2px;
    }

    #toolTab3 .edvc-close {
        position: static; /* override global absolute close button */
        border: 1px solid rgba(255,255,255,0.35);
        border-radius: 999px;
        padding: 6px 14px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(0,0,0,0.14);
        transition: box-shadow 160ms ease, transform 160ms ease;
    }

        #toolTab3 .edvc-close:hover {
            box-shadow: 0 14px 28px rgba(0,0,0,0.18);
        }

        #toolTab3 .edvc-close:active {
            transform: translateY(1px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.14);
        }

        #toolTab3 .edvc-close:focus-visible {
            outline: 3px solid rgba(34,142,194,0.35);
            outline-offset: 3px;
        }

    /* =====================
   Scroll Area
===================== */

    #toolTab3 .edvc-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 12px;
    }

    #toolTab3 .edvc-card {
        border: 1px solid rgba(0,0,0,0.08);
        background: rgba(255,255,255,0.85);
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }

    /* Two columns */
    #toolTab3 .edvc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

/* Make it stack on smaller widths */
@media (max-width: 900px) {
    #toolTab3 .edvc-grid {
        grid-template-columns: 1fr;
    }
}

#toolTab3 .edvc-col {
    border-radius: 14px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 12px;
}

#toolTab3 .edvc-section-title {
    font-weight: 900;
    margin-bottom: 10px;
    color: rgba(0,0,0,0.78);
}

/* Form grid: label + control */
#toolTab3 .edvc-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    align-items: center;
}

#toolTab3 .edvc-label {
    font-weight: 800;
    color: rgba(0,0,0,0.78);
}

/* Inputs/selects */
#toolTab3 .edvc-control {
    width: 100%;
    height: 32px;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 10px;
    background: rgba(255,255,255,0.90);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    padding: 0 10px;
    text-align: left; /* better UX than centered for forms */
}

    #toolTab3 .edvc-control:disabled {
        background: rgba(0,0,0,0.06);
        color: rgba(0,0,0,0.65);
    }

/* Unit field: input + unit */
#toolTab3 .edvc-unitField {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

#toolTab3 .edvc-unit {
    font-weight: 800;
    color: rgba(0,0,0,0.60);
    user-select: none;
}

/* Volume switch row */
#toolTab3 .edvc-switchRow {
    display: flex;
    align-items: center;
    gap: 10px;
}

#toolTab3 .edvc-helpText {
    font-weight: 800;
    color: rgba(0,0,0,0.55);
}

/* Switch styling (uses your existing switch/slider structure) */
#toolTab3 .edvc-switch {
    width: 54px;
    height: 26px;
}

#toolTab3 .edvc-slider {
    border-radius: 999px;
    background-color: rgba(0,0,0,0.18);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.20);
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

    #toolTab3 .edvc-slider:before {
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(0,0,0,0.20);
        transition: transform 160ms ease;
    }

#toolTab3 .edvc-switch input:checked + .edvc-slider {
    background-color: #0C9543;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.18), 0 0 0 3px rgba(12,149,67,0.12);
}

    #toolTab3 .edvc-switch input:checked + .edvc-slider:before {
        transform: translateX(28px);
    }

#toolTab3 .edvc-switch input:focus-visible + .edvc-slider {
    box-shadow: 0 0 0 3px rgba(34,142,194,0.25);
}

/* Divider inside Results */
#toolTab3 .edvc-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: rgba(0,0,0,0.10);
    margin: 6px 0;
}

/* =====================
   Footer
===================== */

#toolTab3 .edvc-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 12px 12px 12px;
    background: rgba(255,255,255,0.92);
    border-top: 1px solid rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
    z-index: 2;
}

#toolTab3 .edvc-footerNote {
    font-weight: 800;
    color: rgba(0,0,0,0.55);
}

/* =========================
   Darkmode fixes for toolTab3 & toolTab5 dropdowns
   (override the #toolTabX * { color:#111 } rule)
========================= */

.darkmode #toolTab3 select.edvc-control,
.darkmode #toolTab5 select.acct-control,
.darkmode #toolTab3 input.edvc-control,
.darkmode #toolTab5 input.acct-control {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: rgba(255,255,255,0.20) !important;
}

.darkmode #toolTab3 option,
.darkmode #toolTab5 option {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* =========================================================
   Add Child Modal � modern styling (scoped)
========================================================= */

#addChildModal.modalHolder {
    display: none; /* your JS controls this */
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
}

#addChildModal .modal {
    width: min(520px, 92vw);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
    overflow: hidden;
    /* override your global .modal positioning so it plays nice */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* =========================================================
   Add Child Modal Header (scoped, modern, safe)
========================================================= */

#addChildModal .modalHeader {
    /* Layout */
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Typography */
    font-size: 1.15em;
    font-weight: 900;
    letter-spacing: 0.25px;
    color: #ffffff;
    /* Visuals */
    background: linear-gradient( 90deg, #009E4F, #228EC2, #009E4F );
    border-bottom: 1px solid rgba(255,255,255,0.25);
    /* Ensure it stays visible */
    position: relative;
    z-index: 2;
    /* Kill legacy behavior */
    left: auto;
    top: auto;
    transform: none;
    box-sizing: border-box;
}


#addChildModal .modalContent {
    padding: 14px;
    max-height: min(60vh, 520px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: rgba(0,0,0,0.85);
}

/* Make each option look like a modern clickable row */
#addChildModal .addChildModalOption {
    /* keep your existing smallButton behavior, but modernize the presentation */
    width: 100%;
    height: auto;
    line-height: normal;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.90);
    color: rgba(0,0,0,0.85);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    cursor: pointer;
    user-select: none;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

    /* Subtle chevron indicator without changing HTML */
    #addChildModal .addChildModalOption::after {
        content: none;
        font-size: 1.4em;
        line-height: 1;
        opacity: 0.45;
        margin-left: 10px;
    }

    #addChildModal .addChildModalOption:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(0,0,0,0.12);
        background: rgba(255,255,255,0.97);
    }

    #addChildModal .addChildModalOption:active {
        transform: translateY(0px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.10);
    }

    /* Keyboard focus (if divs are focusable via JS/tabindex later) */
    #addChildModal .addChildModalOption:focus-visible {
        outline: 3px solid rgba(34,142,194,0.35);
        outline-offset: 3px;
    }

/* Message area */
#addChildModal #addChildMessage {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.75);
    font-weight: 800;
    text-align: center;
}

#addChildModal.modalHolder.show,
#addChildModal.modalHolder[style*="display: flex"] {
    display: flex !important;
}

/* =========================================================
   Load Contact Modal (scoped)
   Header + Search fixed, list scrolls, min height, red delete
========================================================= */

#loadContactModal.lc-modalHolder {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 100;
}

/* Modal is fixed size (does NOT scroll) */
#loadContactModal .lc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 90vw);
    min-height: 380px; /* prevents resize/jump */
    max-height: 460px; /* keeps it compact */

    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    overflow: hidden; /* key: modal itself doesn't scroll */
    margin: 0;
    display: flex; /* key: fixed top + scroll body */
    flex-direction: column;
}

/* Top area stays fixed */
#loadContactModal .lc-top {
    flex: 0 0 auto;
}

/* Header */
#loadContactModal .lc-header {
    width: 100%;
    margin: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg,#009E4F,#228EC2,#009E4F);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    box-sizing: border-box;
}

#loadContactModal .lc-title {
    font-weight: 900;
    font-size: 1.1em;
    letter-spacing: 0.2px;
}

/* Close button */
#loadContactModal .lc-close {
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    user-select: none;
}

    #loadContactModal .lc-close:hover {
        background: rgba(255,255,255,0.18);
    }

/* Search area (fixed) */
#loadContactModal .lc-searchWrap {
    padding: 10px 12px;
    background: rgba(255,255,255,0.90);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-sizing: border-box;
}

#loadContactModal .lc-search {
    width: 100%;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.95);
    padding: 0 12px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

/* Scroll area is ONLY the list */
#loadContactModal .lc-content {
    flex: 1 1 auto; /* takes remaining space */
    padding: 10px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Optional: hide scrollbar */
#loadContactModal .lc-content {
    scrollbar-width: none;
}

    #loadContactModal .lc-content::-webkit-scrollbar {
        display: none;
    }

/* =========================
   JS-generated rows styling
========================= */

#loadContactModal .contactListItem.smallButton {
    width: 100% !important;
    height: 40px;
    line-height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.85);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease;
}

    #loadContactModal .contactListItem.smallButton:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    }

/* Delete button (RED) */
#loadContactModal .deleteButtonContact {
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 12px;
    border: 1px solid rgba(180,0,0,0.35);
    background: rgba(220,40,40,0.95);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease;
}

    #loadContactModal .deleteButtonContact:hover {
        background: rgba(240,60,60,1);
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.22);
    }

/* =========================================================
   Load User Info Modal (scoped)
   Header + Search fixed, list scrolls, compact modal
========================================================= */

#loadUserInfoModal.lui-modalHolder {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 100;
}

/* Modal shell (does NOT scroll) */
#loadUserInfoModal .lui-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 90vw);
    min-height: 380px;
    max-height: 460px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    overflow: hidden; /* key */
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Fixed top area */
#loadUserInfoModal .lui-top {
    flex: 0 0 auto;
}

/* Header */
#loadUserInfoModal .lui-header {
    width: 100%;
    margin: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg,#009E4F,#228EC2,#009E4F);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    box-sizing: border-box;
}

#loadUserInfoModal .lui-title {
    font-weight: 900;
    font-size: 1.1em;
    letter-spacing: 0.2px;
}

/* Close button */
#loadUserInfoModal .lui-close {
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    user-select: none;
}

    #loadUserInfoModal .lui-close:hover {
        background: rgba(255,255,255,0.18);
    }

/* Search bar (fixed) */
#loadUserInfoModal .lui-searchWrap {
    padding: 10px 12px;
    background: rgba(255,255,255,0.90);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-sizing: border-box;
}

#loadUserInfoModal .lui-search {
    width: 100%;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.95);
    padding: 0 12px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

/* Scrollable list ONLY */
#loadUserInfoModal .lui-content {
    flex: 1 1 auto;
    padding: 10px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Optional: hide scrollbar */
#loadUserInfoModal .lui-content {
    scrollbar-width: none;
}

    #loadUserInfoModal .lui-content::-webkit-scrollbar {
        display: none;
    }

/* =========================
   JS-generated rows (User Info)
   No JS/HTML changes needed
========================= */

#loadUserInfoModal .userInfoListItem.smallButton {
    width: 100% !important;
    height: 40px;
    line-height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.85);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease;
}

    #loadUserInfoModal .userInfoListItem.smallButton:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    }

    #loadUserInfoModal .userInfoListItem.smallButton:active {
        transform: translateY(0px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.10);
    }

/* Delete button (RED) */
#loadUserInfoModal .deleteButtonUserInfo {
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 12px;
    border: 1px solid rgba(180,0,0,0.35);
    background: rgba(220,40,40,0.95);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease;
}

    #loadUserInfoModal .deleteButtonUserInfo:hover {
        background: rgba(240,60,60,1);
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.22);
    }

    #loadUserInfoModal .deleteButtonUserInfo:active {
        transform: translateY(0px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    }

/* =========================
   Load Billing Info modal
========================= */
#loadBillingInfoModal.lbi-modalHolder {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 100;
}

#loadBillingInfoModal .lbi-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 90vw);
    min-height: 380px;
    max-height: 460px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    overflow: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#loadBillingInfoModal .lbi-top {
    flex: 0 0 auto;
}

#loadBillingInfoModal .lbi-header {
    width: 100%;
    margin: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg,#009E4F,#228EC2,#009E4F);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    box-sizing: border-box;
}

#loadBillingInfoModal .lbi-title {
    font-weight: 900;
    font-size: 1.1em;
    letter-spacing: 0.2px;
}

#loadBillingInfoModal .lbi-close {
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    user-select: none;
}

    #loadBillingInfoModal .lbi-close:hover {
        background: rgba(255,255,255,0.18);
    }

#loadBillingInfoModal .lbi-searchWrap {
    padding: 10px 12px;
    background: rgba(255,255,255,0.90);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-sizing: border-box;
}

#loadBillingInfoModal .lbi-search {
    width: 100%;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.95);
    padding: 0 12px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

#loadBillingInfoModal .lbi-content {
    flex: 1 1 auto;
    padding: 10px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-width: none;
}

    #loadBillingInfoModal .lbi-content::-webkit-scrollbar {
        display: none;
    }

#loadBillingInfoModal .billingInfoListItem.smallButton {
    width: 100% !important;
    height: 40px;
    line-height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.85);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    #loadBillingInfoModal .billingInfoListItem.smallButton:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    }

    #loadBillingInfoModal .billingInfoListItem.smallButton:active {
        transform: translateY(0px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.10);
    }

#loadBillingInfoModal .deleteButtonBillingInfo {
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 12px;
    border: 1px solid rgba(180,0,0,0.35);
    background: rgba(220,40,40,0.95);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease;
}

    #loadBillingInfoModal .deleteButtonBillingInfo:hover {
        background: rgba(240,60,60,1);
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.22);
    }

    #loadBillingInfoModal .deleteButtonBillingInfo:active {
        transform: translateY(0px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    }

/* =========================
   Load Shipping Contact modal
========================= */
#loadShippingContactModal.lsc-modalHolder {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 100;
}

#loadShippingContactModal .lsc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 90vw);
    min-height: 380px;
    max-height: 460px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    overflow: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#loadShippingContactModal .lsc-top {
    flex: 0 0 auto;
}

#loadShippingContactModal .lsc-header {
    width: 100%;
    margin: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg,#009E4F,#228EC2,#009E4F);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    box-sizing: border-box;
}

#loadShippingContactModal .lsc-title {
    font-weight: 900;
    font-size: 1.1em;
    letter-spacing: 0.2px;
}

#loadShippingContactModal .lsc-close {
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    user-select: none;
}

    #loadShippingContactModal .lsc-close:hover {
        background: rgba(255,255,255,0.18);
    }

#loadShippingContactModal .lsc-searchWrap {
    padding: 10px 12px;
    background: rgba(255,255,255,0.90);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-sizing: border-box;
}

#loadShippingContactModal .lsc-search {
    width: 100%;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.95);
    padding: 0 12px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

#loadShippingContactModal .lsc-content {
    flex: 1 1 auto;
    padding: 10px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-width: none;
}

    #loadShippingContactModal .lsc-content::-webkit-scrollbar {
        display: none;
    }

#loadShippingContactModal .shippingContactListItem.smallButton {
    width: 100% !important;
    height: 40px;
    line-height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.85);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    #loadShippingContactModal .shippingContactListItem.smallButton:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    }

    #loadShippingContactModal .shippingContactListItem.smallButton:active {
        transform: translateY(0px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.10);
    }

#loadShippingContactModal .deleteButtonShippingContact {
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 12px;
    border: 1px solid rgba(180,0,0,0.35);
    background: rgba(220,40,40,0.95);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease;
}

    #loadShippingContactModal .deleteButtonShippingContact:hover {
        background: rgba(240,60,60,1);
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.22);
    }

    #loadShippingContactModal .deleteButtonShippingContact:active {
        transform: translateY(0px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    }

    .connectEquipmentTable{
        border-radius:5px;
    }

/* =========================================================
   METRICS TAB
========================================================= */
.metrics-tab.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.metrics-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #ddd;
    background: #f8f8f8;
    flex-shrink: 0;
}

.metrics-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.metrics-close {
    background: red;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 0.9em;
}

.metrics-scroll {
    flex: 1;
    overflow: hidden;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}

.metrics-card {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.metrics-summary-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.metrics-summary-card {
    background: linear-gradient(135deg, #f0f4f8, #e8ecf1);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border: 1px solid #dde2e8;
}

.metrics-summary-value {
    font-size: 1.4em;
    font-weight: bold;
    color: #007F3E;
    line-height: 1.2;
}

.metrics-summary-label {
    font-size: 0.75em;
    color: #666;
    margin-top: 2px;
}

.metrics-section-title {
    font-size: 1.05em;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    padding-bottom: 4px;
    flex-shrink: 0;
    border-bottom: 2px solid #007F3E;
}

.metrics-date-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 14px;
    background: #f5f7fa;
    border-radius: 8px;
    border: 1px solid #dde2e8;
    flex-shrink: 0;
}

.metrics-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.metrics-section #metricsTable {
    flex: 1;
    min-height: 0;
}

.metrics-date-label {
    font-weight: bold;
    font-size: 0.9em;
    color: #444;
}

.metrics-date-filter input[type="date"] {
    padding: 4px 8px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-size: 0.9em;
}

.metrics-loading {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 1.1em;
}

/* View Units button in metrics table */
.metricsViewUnitsBtn {
    background: linear-gradient(270deg, #00AD5E 0%, #009E4F 55%, #007F3E 100%);
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    width: 28px;
    height: 24px;
    line-height: 24px;
    padding: 0;
}

    .metricsViewUnitsBtn:hover {
        background: linear-gradient(270deg, #009E4F 0%, #008E46 55%, #00773B 100%);
    }

/* Unit detail modal content */
.metrics-unit-section-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #007F3E;
    margin: 16px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 2px solid #007F3E;
}

    .metrics-unit-section-title:first-child {
        margin-top: 0;
    }

/* System group wrapper */
.metrics-system-group {
    background: #fff;
    border: 2px solid #007F3E;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
}

.metrics-system-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dde2e8;
}

.metrics-system-tag {
    background: #333;
    color: white;
    font-weight: bold;
    font-size: 0.8em;
    padding: 3px 10px;
    border-radius: 4px;
}

.metrics-system-name {
    font-weight: bold;
    font-size: 1.05em;
    color: #222;
}

.metrics-unit-card {
    background: #f8f9fa;
    border: 1px solid #dde2e8;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

    .metrics-unit-card:last-child {
        margin-bottom: 0;
    }

.metrics-unit-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.metrics-unit-tag {
    background: #007F3E;
    color: white;
    font-weight: bold;
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 4px;
}

.metrics-unit-tag-uc {
    background: #2a6db5;
}

.metrics-unit-model {
    font-weight: bold;
    font-size: 1em;
    color: #222;
}

.metrics-unit-info {
    font-size: 0.85em;
    color: #555;
    background: #e8ecf1;
    padding: 2px 8px;
    border-radius: 4px;
}

.metrics-unit-no-options {
    font-size: 0.85em;
    color: #999;
    font-style: italic;
    padding: 4px 0;
}

.metrics-options-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    margin-top: 4px;
    table-layout: fixed;
}

    .metrics-options-table th,
    .metrics-options-table td {
        padding: 4px 8px;
        text-align: left;
        color: #333;
    }

    .metrics-options-table th {
        background: #e8ecf1;
        font-weight: bold;
        color: #444;
        border-bottom: 1px solid #ccc;
    }

    .metrics-options-table td {
        border-bottom: 1px solid #eee;
    }

    .metrics-options-table tr:last-child td {
        border-bottom: none;
    }

    .metrics-options-table th:nth-child(1),
    .metrics-options-table td:nth-child(1) {
        width: 12%;
    }

    .metrics-options-table th:nth-child(2),
    .metrics-options-table td:nth-child(2) {
        width: 58%;
    }

    .metrics-options-table th:nth-child(3),
    .metrics-options-table td:nth-child(3) {
        width: 10%;
        text-align: center;
    }

    .metrics-options-table th:nth-child(4),
    .metrics-options-table td:nth-child(4) {
        width: 20%;
        text-align: right;
    }

/* ================================================================
   Project Units sidebar (left-side panel that lists every CU/UC/CON
   in the loaded project, grouped under their parent System/Box, and
   smooth-scrolls + flashes the corresponding equipment when clicked).
   Hidden by default; opened via the floating toggle button on the
   left edge of the viewport. List view only.
   ================================================================ */

/* Floating toggle button on the left edge - only visible when a project
   is loaded and the list view is active (controlled from JS by display). */
.projectSidebarToggle {
    position: fixed;
    left: 0;
    top: 58px; /* just below the 50px-tall topBar with a small gap */
    /* z-index 97 sits ABOVE the panel (96) so the toggle is NEVER covered by the panel and stays clickable whether
       the sidebar is open or closed. This is the core fix for the "ghost click" bug: previously the open panel (z:96)
       sat on top of the toggle (z:95), so clicks meant for the toggle landed on the panel and did nothing. */
    z-index: 97;
    background-color: #0C9543;
    color: white;
    border: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9em;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.18);
    /* Slide the toggle horizontally when the panel opens/closes (see .panelOpen). Same ease curve + duration as the
       panel slide so the handle travels in lockstep with the panel edge. */
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

    .projectSidebarToggle:hover {
        background-color: #0a7c38;
    }

    /* When the panel is open the toggle rides along to the panel's right edge (panel width = 260px), acting as a
       drawer-pull "close" handle. It stays fully visible and clickable the whole time, so a second click on it
       reliably closes the panel - no more clicks landing on a hidden/covered button. */
    .projectSidebarToggle.panelOpen {
        transform: translateX(260px);
    }

/* The panel itself. Slides in from the left when .open is toggled on.
   IMPLEMENTATION NOTE: the panel is ALWAYS display:flex so the browser can animate it. Hiding it via display:none
   would block transitions entirely (display isn't a transitionable property). Instead the closed state translates
   the panel fully off-screen to the left and fades it out; pointer-events:none prevents it from intercepting
   clicks while hidden. transition-duration sits on the base rule so both opening AND closing animate. */
.projectSidebar {
    position: fixed;
    top: 58px; /* matches the toggle button's top so the panel sits right below the topBar */
    bottom: 16px;
    left: 0;
    width: 260px;
    background: white;
    border: 2px solid #0C9543;
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: 96;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    /* Closed-state baseline: slid all the way off-screen + fully transparent + click-through. */
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    /* Animate the slide AND the fade together. cubic-bezier(0.2, 0.8, 0.2, 1) is a soft "ease-out" curve - quick
       start, gentle settle - which reads as more polished than the default ease. */
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity   0.20s ease-out;
    will-change: transform, opacity; /* hints the browser to use a compositor layer so the slide stays smooth */
}

    .projectSidebar.open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* If a user has prefers-reduced-motion enabled, drop the slide and just snap-fade so the UI doesn't ignore
       their OS setting. The panel still works the same, just without the horizontal motion. */
    @media (prefers-reduced-motion: reduce) {
        .projectSidebar {
            transition: opacity 0.15s linear;
            transform: none;
            left: -280px; /* off-screen via positioning instead of transform when reduced-motion is on */
        }

            .projectSidebar.open {
                left: 0;
            }

        /* Toggle: snap to the panel edge instantly instead of sliding, but stay visible + clickable as the close
           handle (positioned via left so it doesn't depend on transform, which is disabled here). */
        .projectSidebarToggle {
            transition: none;
            transform: none;
        }

            .projectSidebarToggle.panelOpen {
                transform: none;
                left: 260px;
            }
    }

.projectSidebarHeader {
    background-color: #0C9543;
    color: white;
    font-weight: bold;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.projectSidebarClose {
    background: transparent;
    color: white;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

    .projectSidebarClose:hover {
        color: #cdf4dc;
    }

.projectSidebarBody {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px 12px 4px;
    box-sizing: border-box;
}

.projectSidebarEmpty {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.9em;
    text-align: center;
    padding: 12px 8px;
}

/* Each row is either an equipment item (clickable) or a group header (non-clickable).
   Indentation scales with nesting depth via inline padding-left set by the JS builder. */
/* Equipment row layout. Flexbox lets the three pieces (type chip / tag / model) align on a single baseline with
   consistent gaps regardless of which optional pieces are rendered. min-width:0 on the children allows them to
   shrink and ellipsis-truncate cleanly when the sidebar is narrow. */
.projectSidebarItem {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 0.9em;
    color: #222;
    border-radius: 4px;
    border: 1px solid transparent;
    margin: 1px 4px;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 8px;
}

    .projectSidebarItem:hover {
        background-color: rgba(12, 149, 67, 0.10);
        border-color: rgba(12, 149, 67, 0.35);
    }

    /* Type chip - bold green pill with a soft tinted background so it reads as a category marker, not body text.
       Fixed min-width keeps the tag column starting at the same x-offset on every row regardless of CU/UC/CON. */
    .projectSidebarItem .projectSidebarTag {
        display: inline-block;
        min-width: 34px;
        text-align: center;
        font-weight: bold;
        font-size: 0.78em;
        letter-spacing: 0.03em;
        color: #0C9543;
        background-color: rgba(12, 149, 67, 0.12);
        border: 1px solid rgba(12, 149, 67, 0.25);
        padding: 1px 6px;
        border-radius: 10px;
        flex: 0 0 auto;
    }

    /* User-given tag (only rendered when meaningfully different from the default CU/UC/CON). Slightly bolder than
       body text so the user's chosen label is the visual anchor of the row. Can shrink and ellipsis when narrow. */
    .projectSidebarItem .projectSidebarItemTag {
        color: #222;
        font-weight: 600;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Vertical divider that appears BEFORE the model chip whenever a model is rendered. Using ::before instead of
       margin/border on adjacent siblings means the divider only appears when there's actually a model to separate
       from whatever's to its left (works whether the previous sibling is the type chip or the user tag). */
    .projectSidebarItem .projectSidebarItemModel::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 0.95em;
        background-color: rgba(0, 0, 0, 0.18);
        vertical-align: middle;
        margin-right: 8px;
    }

    /* Currently-selected model (only rendered when one is chosen). Muted gray + monospace so it reads as a code
       rather than a name, never competing with the tag for emphasis. Pushed to the right edge via auto-margin so
       the type chip and tag stay grouped together on the left and the model anchors the right side of the row. */
    .projectSidebarItem .projectSidebarItemModel {
        color: rgba(0, 0, 0, 0.6);
        font-family: Consolas, "Courier New", monospace;
        font-size: 0.85em;
        margin-left: auto;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.projectSidebarGroup {
    display: block;
    padding: 8px 10px 4px 10px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 4px;
}

/* Flash highlight applied to the target equipment container when a sidebar row is clicked. */
.projectSidebarFlash {
    outline: 3px solid #0C9543 !important;
    outline-offset: 4px;
    animation: projectSidebarFlashPulse 1.4s ease-in-out;
}

@keyframes projectSidebarFlashPulse {
    0%   { outline-color: rgba(12, 149, 67, 0.0); }
    20%  { outline-color: rgba(12, 149, 67, 1.0); }
    100% { outline-color: rgba(12, 149, 67, 0.0); }
}

/* ===================== Project Tree Sidebar ===================== */
.projectTreeSidebar {
    /* fixed (like the top bar) so page scroll can never drag it off-screen */
    position: fixed;
    top: 50px;
    left: 0;
    width: 300px;
    height: calc(100% - 50px);
    z-index: 4;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #d7e2db;
    box-shadow: 14px 0 28px -18px rgba(8, 60, 30, 0.45);
    transition: transform 100ms ease;
}

/* subtle brand-color seam on the inner edge, for depth against the content */
.projectTreeSidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #23AE58, #007F3E);
    opacity: 0.35;
    pointer-events: none;
}

/* toolbar */
.projectTreeBar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px 10px;
    border-bottom: 1px solid #e3ece7;
}

.projectTreeTitle {
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7d8a83;
}

.projectTreeTools {
    display: flex;
    gap: 4px;
}

.ptIconBtn {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid transparent;
    color: #7d8a83;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.ptIconBtn:hover {
    background: #eef7f1;
    color: #0C9543;
    border-color: #dbeee2;
}

/* section labels */
.ptSection {
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a7b3ac;
    padding: 14px 16px 4px;
}

.projectTreeBody {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0 8px;
}

.projectTreeBody::-webkit-scrollbar {
    width: 8px;
}

.projectTreeBody::-webkit-scrollbar-thumb {
    background: #d8e3dc;
    border-radius: 8px;
    border: 2px solid #ffffff;
}

.ptRow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 14px;
    font-size: 13.5px;
    color: #2c3a32;
    cursor: pointer;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

.ptRow:hover {
    background: #f2faf5;
    border-left-color: #bfe6cd;
}

.ptRow-active {
    background: linear-gradient(90deg, #e6f7ec, #f4fbf7 70%);
    border-left-color: #0C9543;
}

.ptRow-active .ptLabel {
    color: #007F3E;
    font-weight: 600;
}

.ptChev {
    flex: 0 0 12px;
    width: 12px;
    text-align: center;
    color: #9bb1a5;
    font-size: 9px;
    cursor: pointer;
    transition: transform 150ms ease, color 150ms ease;
}

.ptChev-open {
    transform: rotate(90deg);
    color: #0C9543;
}

.ptChev-empty {
    cursor: default;
    visibility: hidden;
}

.ptChip {
    flex: 0 0 auto;
    min-width: 30px;
    text-align: center;
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    border-radius: 5px;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ptChip-project { background: linear-gradient(180deg, #7c7c7c, #636363); }
.ptChip-connect { background: linear-gradient(180deg, #36a0d2, #1f82b8); }
.ptChip-box     { background: linear-gradient(180deg, #36a0d2, #1f82b8); }
.ptChip-group   { background: linear-gradient(180deg, #8a8a8a, #6f6f6f); }
.ptChip-system  { background: linear-gradient(180deg, #16b057, #0a8a40); }
.ptChip-cu      { background: linear-gradient(180deg, #2bbd66, #16a050); }
.ptChip-uc      { background: linear-gradient(180deg, #7e7bcc, #5a55a6); }
.ptChip-con     { background: linear-gradient(180deg, #d2872f, #b06a1d); }

/* Label block: a column holding the primary line and (optionally) the model. */
.ptText {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ptTopLine {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ptLabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ptQty {
    flex: 0 0 auto;
    color: #9aa8a0;
    font-size: 12px;
}

/* Model shown beneath a custom tag — smaller and lighter. */
.ptModel {
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    font-size: 10px;
    line-height: 1.25;
    color: #9aa8a0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nested children get an indented container with a left guide line that spans
   the group; it lights up green when on the path to the active node. */
.ptChildren {
    position: relative;
    margin-left: 19px;
    border-left: 1px solid #e3ece7;
}

.ptChildren-activepath {
    border-left-color: rgba(12, 149, 67, 0.45);
}

/* short horizontal elbow connecting the guide line to each direct child row */
.ptChildren > .ptRow::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    width: 11px;
    height: 1px;
    background: #e3ece7;
}

.ptChildren-activepath > .ptRow::before {
    background: rgba(12, 149, 67, 0.45);
}

/* footer summary */
/* Pinned "Add Item" action at the bottom of the sidebar — same action and
   look as the main content's add button (.largeAddButton), sidebar-sized. */
.projectTreeAdd {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-top: 1px solid #e3ece7;
}

.projectTreeAdd .largeAddButton {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 1.1em;
    margin-left: 0;
}

/* a single divider when the add bar sits directly above the footer */
.projectTreeAdd + .projectTreeFooter {
    border-top: none;
}

.projectTreeFooter {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-top: 1px solid #e3ece7;
    background: #fbfdfc;
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    font-size: 10.5px;
    color: #7d8a83;
}

.projectTreeFooter b {
    color: #007F3E;
    font-weight: 700;
}

.ptDot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cdd9d2;
}

/* Top-bar sidebar toggle — three bars that morph into an X when the sidebar is
   open (body.treeOpen). Sized to match the 30px top-bar icons. */
.menuToggle {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
    vertical-align: top;
}

.menuToggle span {
    position: absolute;
    left: 3px;
    right: 3px;
    height: 3px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform 200ms ease, top 200ms ease, opacity 150ms ease;
}

.menuToggle span:nth-child(1) { top: 8px; }
.menuToggle span:nth-child(2) { top: 14px; }
.menuToggle span:nth-child(3) { top: 20px; }

body.treeOpen .menuToggle span:nth-child(1) { top: 14px; transform: rotate(45deg); }
body.treeOpen .menuToggle span:nth-child(2) { opacity: 0; }
body.treeOpen .menuToggle span:nth-child(3) { top: 14px; transform: rotate(-45deg); }

/* Collapsed: slide the sidebar out and let the list reclaim the width. */
body.treeCollapsed .projectTreeSidebar {
    transform: translateX(-300px);
}

body.treeOpen #listHolder {
    left: 300px;
    width: calc(100% - 300px);
}

body.treeCollapsed #listHolder {
    left: 0;
    width: 100%;
}

/* Narrow screens: the wide equipment cards can't share the row with a 300px
   sidebar, so the open sidebar OVERLAYS the content (no reserved space) and
   auto-closes on select (see navigateToNode). Keep this breakpoint in sync
   with the matchMedia check in ProjectTree.js. */
@media (max-width: 1920px) {
    body.treeOpen #listHolder {
        left: 0;
        width: 100%;
    }
}

/* Brief flash on the target list card when navigated to from the tree. */
.treeHighlight {
    animation: treeHighlightFlash 1.05s ease-out;
}

@keyframes treeHighlightFlash {
    /* background-color omitted at 0%/100% so it interpolates from the card's
       own opaque white. The peak uses an OPAQUE light green (not rgba) so the
       board can't show through the card during the flash. */
    0%   { box-shadow: 0 0 0 3px rgba(12, 149, 67, 0); }
    15%  { box-shadow: 0 0 0 3px rgba(12, 149, 67, 0.9);  background-color: #c8ebd5; }
    100% { box-shadow: 0 0 0 3px rgba(12, 149, 67, 0); }
}

/* ===== Options editor shell (SP1 manage-options UI) ===== */
.optionsEditModal {
    width: 760px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.optionsEditModal .optionsEditBody {
    flex: 1;
    overflow-y: auto;
    max-height: none; /* the flex column governs height, not .modalContent's 500px cap */
}

.optionsEditToolbar {
    padding: 6px 10px 0 10px;
}

.optionsEditToolbar input {
    width: 100%;
    padding: 3px 6px;
}

.optionsEditAddRow {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    border-top: 1px solid #ddd;
}

.optionsEditAddRow input:first-child {
    flex: 1;
}

.optionsEditAddRow input[type="number"] {
    width: 90px;
}

.optionsEditFooter {
    padding: 8px 10px;
    text-align: right;
    border-top: 1px solid #ddd;
}

/* Footnote explaining the "*" prefix on rating-affecting options. Inherits the modal text
   color and dims with opacity so it reads in both light and dark themes. */
.optionsEditRatingNote {
    padding: 8px 10px;
    border-top: 1px solid #ddd;
    font-size: 0.85em;
    font-style: italic;
    opacity: 0.8;
}

.optionsTitleRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -22px;
}

.optionsTitleRow .titledGroupTitle {
    margin-top: 0;
}

.optionsTitleRow .optionsEditBtn {
    width: auto;
    padding: 2px 14px;
}

.optionsSummary {
    min-height: 24px;
}

/* Search-filter hide state. A CLASS (not style.display writes) so custom-row
   cells' inline display:flex survives a hide/show cycle; !important so hiding
   still beats that inline flex. */
.optionSearchHidden {
    display: none !important;
}

/* Summary-era price panel: rows hug content instead of stretching to the old
   650px grid tracks (all three types converted) */
.cuPricingSummary .pricingSummary,
.conPricingSummary .pricingSummary,
.ucPricingSummary .pricingSummary {
    grid-template-rows: auto auto auto auto;
    align-content: start;
}

.optionsSummaryGroup {
    align-content: start;
    row-gap: 4px;
}

/* Inside the edit popup the modal body owns scrolling — let the grid be natural
   height instead of its 450px in-card size (kills the double scrollbar) */
.optionsEditBody .cuOptions,
.optionsEditBody .conOptions,
.optionsEditBody .ucOptions {
    height: auto;
    width: 100%;
}

/* `.modalContent > div` (the addChild modal's 40px white-text button rows) hits
   the options grid host too — out-specific it and reset the box, same trick as
   `.modalContent > .aiHeadstartOffer`. Dark mode: the invert flips #333 to light. */
#optionsEditModal .modalContent > div {
    color: #333;
    text-align: left;
    width: auto;
    height: auto;
    line-height: normal;
    cursor: default;
}

/* ============================================================
   /Metrics — Rep Quoting Activity page (mp*)
   "Nameplate, in CREED's own skin": Nameplate's information
   design (two validated identity hues, one measure pen, honest
   chart forms) wearing CREED chrome (dot-grid paper, 2px green
   .listItem frames, gradient module headers, --btn-shadow).
   Dark mode is the global .darkmode invert — the ONLY .darkmode
   rule in this block is the sanctioned calendar-glyph patch.
   ============================================================ */

/* Font escape — the global `* { font-family:'Manrope' }` is re-routed for the
   whole subtree to the --mp-* tokens; --mp-display (now also Manrope) applies to
   the H1 and KPI numerals at (0,2,0) so it can never tie with `.mpBody *`.
   font-weight:400 on the body neutralizes `.darkmode { font-weight:bold }`
   (inherited from <html>). */
.mpBody {
    margin: 0;
    min-height: 100vh;
    position: relative;   /* containing block for the document-spanning overlays */
    background-color: var(--mp-plane);
    font-family: var(--mp-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--mp-ink-1);
}

    .mpBody * {
        font-family: inherit;
    }

    .mpBody .mpTitle,
    .mpBody .mpTopTitle,
    .mpBody .mpKpiValue {
        font-family: var(--mp-display);
    }

    .mpBody .mpMono,
    .mpBody .mpRowCode {
        font-family: var(--mp-mono);
    }

/* --- chrome bar: byte-identical paint to .topBar, but sticky (NEVER fixed —
   the .darkmode filter on <html> makes it the containing block for fixed
   descendants, so a fixed bar silently scrolls away in dark mode). --- */
.mpTopBar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 50px;
    background: var(--mp-chrome-grad);
    color: white;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
}

.mpTopBarInner {
    position: relative;   /* anchors the centered title */
    max-width: var(--mp-wrap);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 28px;
}

.mpTopBarMeta {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}

/* dark mode toggle: the main app's brightness icon, right end of the chrome bar.
   It inverts with the rest of the page in dark mode, same as the main top bar. */
.mpDarkToggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
}

    .mpDarkToggle img {
        height: 22px;
        display: block;
    }

    .mpDarkToggle:hover img {
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
    }

/* the page title lives IN the chrome bar (the masthead band gave its height
   back); absolutely centered so the logo can't push it off-axis */
.mpTopTitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.01em;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

/* --- masthead (scrolls away between the two sticky bars): a full-bleed white
   band so the title sits on plate, not on the dot grid --- */
.mpMastBand {
    background: var(--mp-plate);
    border-bottom: 1px solid var(--mp-hair);
}

.mpMast {
    max-width: var(--mp-wrap);
    margin: 0 auto;
    padding: 22px 28px 18px;
}

.mpTitle {
    font-weight: 400;
    font-size: 34px;
    line-height: 1.06;
    letter-spacing: 0.005em;
    color: var(--mp-ink-1);
    margin: 0;
}

/* .projectTreeFooter idiom: bold green number, grey noun, dot separator */
.mpStat {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mp-ink-3);
}

    .mpStat b {
        font-weight: 700;
        color: var(--mp-green-dark);
        font-variant-numeric: tabular-nums;
    }

.mpDot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mp-dot);
    display: inline-block;
}

/* --- sticky filter row (top:50px = under the chrome bar) --- */
.mpControlBar {
    position: sticky;
    top: 50px;
    z-index: 20;
    background: var(--mp-plate);
    border-bottom: 1px solid var(--mp-rule);
}

.mpControlInner {
    max-width: var(--mp-wrap);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
}

/* THE most-repeated type object on the page: KPI labels, field labels, axis and
   lane titles, notes terms, eyebrows. .ptSection's spec, contrast-corrected. */
.mpMicro {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mp-ink-3);
}

.mpControlInner input[type=date] {
    font-size: 12px;
    color: var(--mp-ink-1);
    text-align: left; /* deliberate override of CREED's centred-input quirk */
    width: auto;
    padding: 4px 7px;
    border: 1px solid var(--mp-rule);
    border-radius: var(--mp-r-xs);
    background: var(--mp-plate);
}

.mpRangeDash {
    color: var(--mp-ink-3);
}

.mpControlBar .mpApplyBtn,
.mpDataError .mpApplyBtn {
    width: auto;
    height: 28px;
    padding: 0 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--mp-r);
}

.mpControlDivider {
    width: 1px;
    height: 18px;
    background: var(--mp-grid);
    margin-left: auto;
}

.mpCheckLabel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11.5px;
    color: var(--mp-ink-2);
}

    .mpCheckLabel input {
        accent-color: var(--mp-green-dark);
        width: 13px;
        height: 13px;
    }

/* fixed footprint so the Generating label swap can't shrink the button */
#mpReportBtn {
    min-width: 150px;
}

/* working state: cycling ellipsis in a RESERVED-width box (the label would
   re-center and wobble otherwise). Static "…" where content can't animate. */
#mpReportBtn.mpWorking::after {
    content: "…";
    display: inline-block;
    width: 1.1em;
    text-align: left;
    animation: mpDots 1.2s steps(1) infinite;
}

@keyframes mpDots {
    0%, 100% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }
}

.mpWrap {
    max-width: var(--mp-wrap);
    margin: 0 auto;
    padding: 16px 28px 24px;
    transition: opacity 0.4s ease;   /* the refetch dim eases in and out */
}

/* refetch blanking: while busy, card CONTENTS fade out entirely (frames and
   gradient headers stay) so stale numbers never show under the dim */
.mpTableBox,
.mpKey,
.mpKpiValue,
.mpStat {
    transition: opacity 0.4s ease;
}

.mpBusy .mpChartBox,
.mpBusy .mpTableBox,
.mpBusy .mpKey,
.mpBusy .mpKpiValue,
.mpBusy .mpStat {
    opacity: 0;
}

/* indeterminate fetch sweep riding the filter bar's bottom edge */
.mpProgress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

    .mpProgress::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -30%;
        width: 30%;
        border-radius: 1px;
        background: linear-gradient(90deg, transparent, var(--mp-cu), transparent);
        animation: mpSweep 1.6s ease-in-out infinite;
        animation-play-state: paused;
    }

.mpBusy .mpProgress {
    opacity: 1;
}

    .mpBusy .mpProgress::before {
        animation-play-state: running;
    }

@keyframes mpSweep {
    to {
        left: 100%;
    }
}

/* --- the data plate: one instrument register in the .listItem idiom --- */
.mpPlate {
    background: var(--mp-plate);
    border: 2px solid var(--mp-cu);
    border-radius: var(--mp-r);
    box-shadow: var(--btn-shadow);
    margin: 0 0 16px;
    overflow: hidden;
}

.mpPlateGrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mpKpi {
    padding: 12px 18px 10px;
    border-left: 1px solid var(--mp-grid);
}

    .mpKpi:first-child {
        border-left: none;
    }

.mpKpi-hero {
    grid-column: span 2;
}

.mpKpiLabel {
    height: 12px;
    margin-bottom: 7px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mp-ink-3);
}

/* Manrope 600 for the numerals so each stat pops without going heavy.
   Proportional figures: these are stat tiles, not a column. */
.mpKpiValue {
    font-weight: 600;
    font-size: 30px;
    line-height: 1.1;
    color: var(--mp-ink-1);
    font-variant-numeric: proportional-nums;
}

.mpKpi-hero .mpKpiValue {
    font-size: 44px;
    line-height: 1;
}

/* generated observations under the plate, in the masthead stat idiom */
.mpInsights {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: -4px 0 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mp-ink-3);
}

    .mpInsights b {
        font-weight: 700;
        color: var(--mp-green-dark);
        font-variant-numeric: tabular-nums;
    }

    /* an option / series label inside an observation: code + description read as one
       name (a quiet chip), set apart from the figures around it */
    .mpInsightLabel {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        padding: 1px 7px;
        border: 1px solid var(--mp-grid);
        border-radius: var(--mp-r-xs);
        background: var(--mp-plate);
    }

    .mpInsightName {
        color: var(--mp-ink-1);
    }

/* --- cards: white plate, 2px green frame, gradient module header, shadow ---
   overflow:hidden clips the header to the 5px radius. */
.mpCard {
    position: relative;
    background: var(--mp-plate);
    border: 2px solid var(--mp-cu);
    border-radius: var(--mp-r);
    box-shadow: var(--btn-shadow);
    padding: 0 20px 18px;
    margin: 0 0 24px;
    overflow: hidden;
}

.mpCardHead {
    margin: 0 -20px 16px;
    padding: 7px 16px;
    background: var(--btn-primary-grad);
}

.mpPlate .mpCardHead {
    margin: 0;
}

.mpCardHead h2 {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.mpCardDesc {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mp-ink-2);
    max-width: 68ch;
    margin: 0 0 10px;
}

/* stretch (default): the two mix cards share the row's height */
.mpGrid2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

/* Overview at full width: one band — rep | trend | (equipment over brand) — so
   the whole view fits a 1080p viewport. Narrower screens fold the stacked
   column back into the grid (2x2 via display:contents), then to one column. */
.mpGrid3 {
    display: grid;
    /* four tracks: rep | trend | equipment-over-brand | RAE Connect figures */
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 4.4fr) minmax(0, 3.4fr) minmax(0, 2.4fr);
    gap: 20px;
    margin: 0 0 20px;
}

    .mpGrid3 .mpCard {
        margin: 0;
    }

    /* the share-bar key folds to two columns inside the compact band */
    .mpGrid3 .mpKey {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

.mpGridCol {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

    .mpGridCol .mpCard {
        flex: 1;
    }

/* Cards sharing a band stretch to the row height, which leaves shorter cards
   with a void under their content. Center the content block in the slack
   instead: the header stays pinned, and the first element after it plus the
   last element split the leftover via auto margins, so description + chart +
   key travel as one group. When there is no slack the autos are zero and
   nothing moves. */
.mpGrid2 > .mpCard,
.mpGrid3 > .mpCard,
.mpGridCol > .mpCard {
    display: flex;
    flex-direction: column;
}

    .mpGrid2 > .mpCard > .mpCardHead + *,
    .mpGrid3 > .mpCard > .mpCardHead + *,
    .mpGridCol > .mpCard > .mpCardHead + * {
        margin-top: auto;
    }

    .mpGrid2 > .mpCard > :last-child,
    .mpGrid3 > .mpCard > :last-child,
    .mpGridCol > .mpCard > :last-child {
        margin-bottom: auto;
    }

/* RAE Connect card: a stack of figure rows; the whole card is the filter toggle */
.mpConnectCard {
    cursor: pointer;
}

    .mpConnectCard:hover {
        background: var(--mp-hover);
    }

    .mpConnectCard.isFiltering {
        box-shadow: var(--btn-shadow), 0 0 0 3px rgba(12, 149, 67, 0.28);
    }

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

.mpConnectFig {
    padding: 9px 0 8px;
    border-top: 1px solid var(--mp-hair);
}

    .mpConnectFig:first-child {
        border-top: none;
        padding-top: 0;
    }

.mpConnectSub {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--mp-ink-3);
}

/* Activity: rep chart beside the trend + rep table column */
.mpGridActivity {
    gap: 20px;
    margin: 0 0 20px;
}

    .mpGridActivity .mpCard {
        margin: 0;
    }

/* Products: (equipment over brand) | series chart | series table */
.mpGridProducts {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr);
}

/* Top-aligned bands (Compressors/Options, Projects): their cards differ a lot in
   height (a 3-row maker chart beside a 15-row ranking, a short users table beside
   a long projects page), so content sits at the TOP instead of the page's usual
   centering-in-the-slack, and a stacked column sizes to its content (the shared
   flex: 1 split would clip the taller card). The last stacked card takes up any
   leftover height. */
.mpGridTop {
    gap: 20px;
    margin: 0 0 20px;
}

    .mpGridTop .mpCard {
        margin: 0;
    }

    .mpGridTop .mpCard > .mpCardHead + * {
        margin-top: 0;
    }

    .mpGridTop .mpCard > :last-child {
        margin-bottom: 0;
    }

    .mpGridTop .mpGridCol .mpCard {
        flex: 0 0 auto;
    }

        .mpGridTop .mpGridCol .mpCard:last-child {
            flex: 1 0 auto;
        }

/* Compressors: (totals over maker mix) | top compressors; Options: chart | table */
.mpGridComp {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.mpGridOpt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
}

/* Projects: users | projects */
.mpGridProjects {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
}

/* Section heads split a long view into named parts (Compressors / Options). The
   row can carry the section's own controls on the right. */
.mpSectionHead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 8px 0 14px;
    padding: 0 0 7px;
    border-bottom: 1px solid var(--mp-rule);
}

    .mpSectionHead h3 {
        margin: 0;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--mp-ink-1);
    }

    .mpSectionHead .mpOptControls {
        margin: 0;
    }

/* Figure rows (Closure Confidence, Compressor Totals): the Connect card's figure
   idiom laid out across instead of down, hairlines between. */
.mpConfFigs,
.mpCompFigs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 12px;
}

.mpCompFigs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
    margin: 0;
}

    .mpConfFigs .mpConnectFig,
    .mpCompFigs .mpConnectFig {
        padding: 0 14px;
        border-top: none;
        border-left: 1px solid var(--mp-hair);
    }

        .mpConfFigs .mpConnectFig:first-child,
        .mpCompFigs .mpConnectFig:nth-child(2n+1) {
            padding-left: 0;
            border-left: none;
        }

/* headline column of a ledger table (Compressors on the compressor table) */
.mpCard .tabulator .tabulator-cell.mpStrongCell {
    font-weight: 700;
}

/* Share column: a hairline track with the maker-colored fill, figure at the right */
.mpShareCell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mpShareTrack {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--mp-grid);
    overflow: hidden;
}

.mpShareFill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--mp-mark);
}

.mpShareVal {
    flex: 0 0 44px;
    text-align: right;
}

/* a label led by its rep's color dot (Users / Projects); grey = no assigned rep org */
.mpDotCell {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

    .mpDotCell > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.mpRepDot {
    flex: 0 0 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mp-residual);
}

/* "no value" cells: unset confidence / close date, Contact Factory prices */
.mpCard .tabulator .tabulator-cell.mpMutedCell {
    color: var(--mp-ink-3);
}

/* the row behind the active filter (Users table) */
.mpCard .tabulator .tabulator-row.isSelected {
    background: var(--mp-hover);
    box-shadow: inset 3px 0 0 var(--mp-cu);
    font-weight: 700;
}

.mpView.isPending .mpCompBody {
    display: none;
}

.mpCompStatus {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: -4px 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mp-ink-2);
}

    .mpCompStatus:empty {
        display: none;
    }

.mpView.isPending .mpCompStatus {
    margin: 8px 0 20px;
    padding: 18px 20px;
    background: var(--mp-plate);
    border: 1px solid var(--mp-grid);
    border-radius: var(--mp-r);
    font-size: 13px;
}

.mpCompLoading::after {
    content: "…";
    display: inline-block;
    width: 1.1em;
    text-align: left;
    animation: mpDots 1.2s steps(1) infinite;
}

.mpOptControls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 8px;
}

/* status column + the drawer's option codes */
.mpOptStatus-standard,
.mpOptStatus-custom {
    color: var(--mp-ink-3);
}

.mpOptStatus-cf {
    color: var(--mp-alert);
}

.mpDrawerSub {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 0 0 8px;
    font-size: 11.5px;
    color: var(--mp-ink-2);
}

.mpDrawerSubKey {
    color: var(--mp-ink-3);
}

.mpDrawerOpt {
    font-family: var(--mp-mono);
    color: var(--mp-ink-1);
}

    .mpDrawerOpt.isStd {
        color: var(--mp-ink-3);
    }

/* denser Tabulator rows for the one-screen side tables and the projects list */
.mpCard.mpCompact .tabulator .tabulator-cell {
    padding: 4px 8px;
}

.mpCard.mpCompact .tabulator .tabulator-header .tabulator-col-content {
    padding: 5px 8px;
}

/* No CSS height — every renderer computes the SVG's height attribute from its
   row count, so an axis band can never be cropped into a nested scrollbar.
   The opacity-only transition is deliberate: it replaces the global `*` width
   transition (which would fire the ResizeObserver through the whole ramp)
   while letting the refetch blanking fade. */
.mpChartBox {
    position: relative;
    transition: opacity 0.4s ease;
}

    .mpChartBox svg {
        display: block;
        width: 100%;
    }

/* --- SVG hooks (all fills route through --mpFill so hover/print stay CSS-authorable) --- */
.mpChartText {
    font-size: 10px;
    font-weight: 600;
    fill: var(--mp-ink-3);
    font-variant-numeric: tabular-nums;
}

.mpCatLabel {
    font-size: 10.5px;
    fill: var(--mp-ink-2);
}

.mpRowName {
    font-size: 12px;
    fill: var(--mp-ink-1);
}

    .mpRowName.isMuted {
        fill: var(--mp-ink-3);
    }

.mpRowCode {
    font-size: 11.5px;
    fill: var(--mp-ink-2);
}

.mpValueLabel {
    font-size: 10px;
    font-weight: 700;
    fill: var(--mp-ink-1);
    font-variant-numeric: tabular-nums;
}

    /* a value label sitting ON a colored fill (share-bar segments) */
    .mpValueLabel.isOnFill {
        fill: white;
    }

/* SVG twin of the .mpChip enamel text */
.mpChipText {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    fill: white;
}

.mpCountCol {
    font-size: 11.5px;
    font-weight: 600;
    fill: var(--mp-ink-1);
    font-variant-numeric: tabular-nums;
}

.mpLaneKey {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    fill: var(--mp-ink-3);
}

.mpGridLine {
    stroke: var(--mp-grid);
    stroke-width: 1;
}

.mpAxisRule {
    stroke: var(--mp-rule);
    stroke-width: 1;
}

.mpMark {
    fill: var(--mpFill, var(--mp-mark));
}

    .mpMark.isMuted {
        opacity: 0.55;
    }

.mpSeg-hollow {
    fill: var(--mp-plate);
    stroke: var(--mp-residual);
    stroke-width: 1.25;
}

.mpLinePath {
    fill: none;
    stroke: var(--mp-blue);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.mpAreaPath {
    fill: var(--mp-blue);
    opacity: 0.10;
}

.mpWeekTick {
    stroke: var(--mp-grid);
    stroke-width: 1;
}

.mpEmptyNote {
    font-size: 11.5px;
    fill: var(--mp-ink-3);
}

/* row hover/focus: wash is the light-mode nicety (it lands ~1.05:1 after the
   invert — documented, accepted); the 3px green rail is the real channel. */
.mpRow {
    cursor: default;
}

.mpRowBand {
    fill: transparent;
}

.mpRowRail {
    fill: transparent;
}

.mpRow:hover .mpRowBand {
    fill: var(--mp-hover);
}

.mpRow:hover .mpRowRail,
.mpRow:focus-visible .mpRowRail {
    fill: var(--mp-cu);
}

.mpRow:focus {
    outline: none;
}

/* --- enamel chip legend: .ptChip geometry verbatim --- */
.mpChip {
    display: inline-block;
    min-width: 30px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: white;
    padding: 2px 6px;
    border-radius: var(--mp-r);
    box-shadow: 0 1px 0 rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.25);
}

.mpChip-uc {
    background: linear-gradient(180deg, #7e7bcc, #5a55a6);
}

.mpChip-cu {
    background: linear-gradient(180deg, #2bbd66, #16a050);
}

.mpChip-con {
    background: linear-gradient(180deg, #d2872f, #b06a1d);
}

.mpKey {
    margin-top: 14px;
    border-top: 1px solid var(--mp-hair);
}

.mpKeyRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--mp-hair);
    font-size: 11.5px;
}

    .mpKeyRow:last-child {
        border-bottom: 0;
    }

.mpKeyName {
    color: var(--mp-ink-1);
}

.mpKeyVal {
    margin-left: auto;
    font-weight: 600;
    color: var(--mp-ink-1);
    font-variant-numeric: tabular-nums;
}

.mpKeyShare {
    width: 52px;
    text-align: right;
    font-size: 11px;
    color: var(--mp-ink-3);
    font-variant-numeric: tabular-nums;
}

.mpKeySwatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.mpKeySwatch-hollow {
    background: var(--mp-plate);
    border: 1.25px solid var(--mp-residual);
}

/* --- shared dark tooltip (body-level, filled by MetricsCharts via textContent) --- */
.mpTooltip {
    position: absolute;
    display: none;
    background: var(--mp-tip-bg);
    color: var(--mp-tip-ink);
    padding: 7px 11px;
    border-radius: var(--mp-r);
    pointer-events: none;
    z-index: 1000;
    max-width: 320px;
}

.mpTipLabel {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.mpTipValue {
    font-size: 11.5px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* --- Detail card tabs + progressive-disclosure link --- */
.mpTabs {
    display: flex;
    gap: 4px;
    margin: 2px 0 14px;
    border-bottom: 1px solid var(--mp-grid);
}

.mpTab {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mp-ink-3);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 7px 14px 6px;
    cursor: pointer;
}

    .mpTab:hover {
        color: var(--mp-ink-1);
        background: var(--mp-hover);
    }

    .mpTab.isActive {
        color: var(--mp-green-dark);
        border-bottom-color: var(--mp-cu);
    }

.mpViewAll {
    display: block;
    margin: 10px auto 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mp-green-dark);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 10px;
}

    .mpViewAll:hover {
        text-decoration: underline;
    }

/* --- SPA shell: view navigation riding the sticky control bar --- */
.mpNavRow {
    max-width: var(--mp-wrap);
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    padding: 0 28px;
    border-bottom: 1px solid var(--mp-hair);
}

.mpNav {
    display: flex;
    gap: 4px;
}

/* the Detail card's tab object, promoted to primary navigation */
.mpNavTab {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mp-ink-3);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 11px 16px 8px;
    cursor: pointer;
}

    .mpNavTab:hover {
        color: var(--mp-ink-1);
        background: var(--mp-hover);
    }

    .mpNavTab.isActive {
        color: var(--mp-green-dark);
        border-bottom-color: var(--mp-cu);
    }

.mpDefsBtn {
    margin-left: auto;
    align-self: center;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mp-ink-2);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
}

    .mpDefsBtn:hover {
        color: var(--mp-green-dark);
        text-decoration: underline;
    }

/* --- active-filter chips: the shell's statement of what the numbers mean --- */
.mpChipsRow {
    max-width: var(--mp-wrap);
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 28px 9px;
}

.mpFilterChip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: 11px;
    color: var(--mp-ink-1);
    background: var(--mp-plate);
    border: 1px solid var(--mp-rule);
    border-radius: 999px;
    padding: 3px 10px 3px 11px;
    cursor: pointer;
}

    .mpFilterChip:hover {
        border-color: var(--mp-cu);
        background: var(--mp-hover);
    }

    .mpFilterChip .mpFilterKind {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--mp-ink-3);
    }

    .mpFilterChip b {
        font-weight: 600;
    }

    .mpFilterChip .mpChipX {
        font-weight: 700;
        color: var(--mp-ink-3);
    }

    .mpFilterChip:hover .mpChipX {
        color: var(--mp-alert);
    }

.mpChipClearAll {
    margin: 0;
    padding: 3px 8px;
}

.mpChipNote {
    font-size: 10.5px;
    color: var(--mp-ink-3);
}

/* --- navigation affordances on marks and tiles --- */
.mpClickable {
    cursor: pointer;
}

.mpKpiLink {
    cursor: pointer;
    border-radius: var(--mp-r-xs);
}

    .mpKpiLink:hover {
        background: var(--mp-hover);
    }

#mpProjectTable .tabulator-row,
#mpSeriesTable .tabulator-row {
    cursor: pointer;
}

/* --- view switch: a small settle; movement is stripped under reduced motion --- */
@keyframes mpViewIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.mpView.isEntering {
    animation: mpViewIn 0.22s ease backwards;
}

/* --- empty state: nothing matches the range/filters --- */
.mpEmpty {
    text-align: center;
    padding: 44px 20px;
}

    .mpEmpty p {
        margin: 0 0 14px;
        font-size: 13px;
        color: var(--mp-ink-2);
    }

/* slim header-filter inputs: the green header should gain a row, not double */
.mpCard .tabulator .tabulator-header .tabulator-header-filter input {
    padding: 3px 6px;
    font-size: 11px;
    text-align: left; /* deliberate override of CREED's centred-input quirk */
    border: none;
    border-radius: var(--mp-r-xs);
}

/* --- overlays: Data Definitions panel + project drawer. ABSOLUTE and offset to
   the scroll position by JS, never fixed (the .darkmode filter on <html> makes
   it the containing block for fixed descendants, which would pin a fixed panel
   to the document top). Scroll locks while open so the offset stays true. --- */
html.mpNoScroll {
    overflow: hidden;
}

.mpOverlay {
    position: absolute;
    inset: 0;
    z-index: 45; /* above the sticky chrome (30), below the ceremony (50) */
    background: rgba(24, 38, 30, 0.38);
}

.mpPanel {
    position: absolute;
    /* centered with auto margins, NOT translateX(-50%): the entrance animation
       owns the transform property, and a keyframe transform REPLACES the base
       one — a translate-centered panel plays the animation half a width off
       and snaps to center when it ends */
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(720px, calc(100vw - 40px));
    background: var(--mp-plate);
    border: 2px solid var(--mp-cu);
    border-radius: var(--mp-r);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    animation: mpRevealPop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* the project drawer: centered like every panel, just not billboard-wide */
.mpPanel-sm {
    width: min(540px, calc(100vw - 40px));
}

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

.mpPanelClose {
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 2px;
}

    .mpPanelClose:hover {
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    }

.mpPanelBody {
    padding: 4px 20px 18px;
    max-height: min(560px, 72vh);
    overflow: auto;
}

/* --- project drawer content --- */
.mpDrawerMeta {
    margin: 8px 0 2px;
}

.mpDrawerFigs {
    display: flex;
    gap: 36px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--mp-hair);
}

.mpKpiValue-sm {
    font-size: 22px;
}

.mpDrawerSection {
    display: block;
    margin: 14px 0 4px;
}

.mpDrawerLines {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    column-gap: 12px;
}

.mpDrawerLine {
    display: contents;
}

    .mpDrawerLine > span {
        padding: 7px 0;
        border-top: 1px solid var(--mp-hair);
        font-size: 12px;
    }

.mpDrawerQty {
    color: var(--mp-ink-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mpDrawerModel {
    color: var(--mp-ink-1);
}

.mpDrawerSeries {
    color: var(--mp-ink-3);
}

.mpDrawerNone {
    font-size: 12px;
    color: var(--mp-ink-3);
}

/* --- tables: bleed to the card edge; green Tabulator header (the tables are
   the page's one genuinely-CREED component — keep them green). Overrides are
   scoped under .mpCard to out-specify tabulator_site.css (Theme.css loads
   FIRST, so ties lose). Zero !important. --- */
/* Inset table like the main app's module tables (no bleed): padding around it,
   rounded corners, green base edge. No overflow-x on desktop — fitColumns tables
   fit by construction, and an auto scrollbar turns 1px of column rounding into a
   permanent Windows scrollbar track; narrow screens scroll via the 820px breakpoint. */
.mpTableBox {
    margin: 2px 0 0;
}

.mpCard .tabulator {
    border: 1px solid var(--mp-grid);
    border-bottom: 3px solid var(--mp-cu);
    border-radius: var(--mp-r);
    overflow: hidden;
    background: var(--mp-plate);
    font-size: 12px;
}

.mpCard .tabulator .tabulator-header {
    background: var(--mp-green-dark);
    border-bottom: 1px solid var(--mp-green-dark);
    color: white;
}

.mpCard .tabulator .tabulator-header .tabulator-col {
    background: var(--mp-green-dark);
    border-right: 1px solid rgba(255,255,255,0.16);
}

.mpCard .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: white;
}

/* the near-black #090909 sortable hover, out-specified inside the same media query */
@media (hover: hover) and (pointer: fine) {
    .mpCard .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
        background-color: #00743B;
    }
}

/* NO border-left here: a row border adds real width beyond the fitted columns
   and turns into Tabulator's internal 3px horizontal scrollbar. The hover rail
   is an inset box-shadow — same 3px green bar, zero layout width. */
.mpCard .tabulator .tabulator-row {
    background: var(--mp-plate);
    border-bottom: 1px solid var(--mp-grid);
}

.mpCard .tabulator .tabulator-row.tabulator-row-even {
    background: var(--mp-plate); /* kill the #EFEFEF zebra — row rules do the work */
}

.mpCard .tabulator .tabulator-row:hover,
.mpCard .tabulator .tabulator-row.tabulator-selectable:hover {
    background: var(--mp-hover);
    box-shadow: inset 3px 0 0 var(--mp-cu);
}

.mpCard .tabulator .tabulator-cell {
    border-right: none;
    color: var(--mp-ink-1);
    font-variant-numeric: tabular-nums;
}

.mpCard .tabulator .tabulator-footer {
    background: var(--mp-plate);
    border-top: 1px solid var(--mp-rule);
    color: var(--mp-ink-2);
    font-weight: 400;
}

/* --- notes as a parameter register --- */
.mpNotesLead {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--mp-ink-2);
    margin: 0 0 4px;
}

.mpNoteGrid {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 20px;
}

.mpNoteTerm,
.mpNoteDef {
    padding: 12px 0;
    border-top: 1px solid var(--mp-hair);
}

.mpNoteTerm {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mp-ink-3);
}

.mpNoteDef {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--mp-ink-2);
}

    .mpNoteDef b {
        font-weight: 600;
        color: var(--mp-ink-1);
    }

    .mpNoteDef b[id^="mpNote"] {
        font-weight: 700;
        color: var(--mp-green-dark);
        font-variant-numeric: tabular-nums;
    }

.mpFooter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 0 14px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--mp-ink-3);
}

    .mpFooter::before,
    .mpFooter::after {
        content: "";
        width: 40px;
        height: 1px;
        background: var(--mp-grid);
    }

/* --- ceremony: the app's own login splash (.splash + .splashBackground with the
   fancyGradient animation) hosting a staged progress bar. Covers login and the
   first data load, then fades out over the already-painted dashboard. --- */
.mpCeremony {
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    transition: opacity 0.6s ease;
}

.mpCeremonyDone {
    opacity: 0;
    pointer-events: none;
}

.mpCeremonyContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* staged entrance: logo, then the bar, then the status line */
@keyframes mpCeremonyIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.mpCeremonyContent > * {
    animation: mpCeremonyIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.mpCeremonyContent > .mpCeremonyBar {
    animation-delay: 0.18s;
}

.mpCeremonyContent > .mpCeremonyStatus {
    animation-delay: 0.32s;
}

/* exit: the content lifts and fades while the overlay dissolves */
.mpCeremonyDone .mpCeremonyContent {
    opacity: 0;
    transform: translate(-50%, -58%) scale(1.04);
}

    .mpCeremonyContent .topLogo {
        max-height: 64px;
        padding: 0;
    }

.mpCeremonyBar {
    width: 260px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45);
    overflow: hidden;
}

/* ink fill: #22302A survives the invert as a light fill on the dark track */
.mpCeremonyFill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--mp-ink-1);
    transition: width 0.3s ease;
}

.mpCeremonyStatus {
    min-height: 16px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* dashboard reveal under the departing overlay: masthead → plate → cards,
   the aiRevealPop idiom. Sticky bars are deliberately NOT animated —
   transforms on sticky elements glitch their pinning. */
@keyframes mpRevealPop {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.mpReveal .mpMast {
    animation: mpRevealPop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: 0.08s;
}

.mpReveal .mpPlate {
    animation: mpRevealPop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: 0.26s;
}

.mpReveal .mpCard {
    animation: mpRevealPop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: 0.44s;
}

/* denied/error cards get the same entrance */
.mpGateCard {
    animation: mpRevealPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* refetch settle (.mpSettle, ~1s after Apply lands): one green ring pulse on the
   totals plate — the project tree's refresh-flash idiom — while charts and
   tables rise in shorter and faster than the login cascade. */
@keyframes mpDataFlash {
    0% {
        box-shadow: var(--btn-shadow);
    }

    30% {
        box-shadow: var(--btn-shadow), 0 0 0 4px rgba(12, 149, 67, 0.30);
    }

    100% {
        box-shadow: var(--btn-shadow), 0 0 0 6px rgba(12, 149, 67, 0);
    }
}

@keyframes mpSettleIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.mpSettle .mpPlate {
    animation: mpDataFlash 1.3s ease-out;
}

.mpSettle .mpChartBox svg {
    animation: mpSettleIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: 0.1s;
}

.mpSettle .mpTableBox {
    animation: mpSettleIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
    /* Strip MOVEMENT (rotation, rises, scales, cascade) but keep the pure opacity
       crossfade — reduced-motion guards vestibular triggers, not fades, and a hard
       cut is its own kind of jarring. */
    .mpCeremony .splashBackground {
        animation: none;
        transform: scale(400%);   /* the animation's resting pose */
    }

    .mpCeremony {
        transition: opacity 0.5s ease;
    }

    .mpCeremonyFill {
        transition: none;
    }

    .mpCeremonyContent {
        transition: opacity 0.4s ease;   /* fade yes, lift/scale no */
    }

    .mpCeremonyDone .mpCeremonyContent {
        transform: translate(-50%, -50%);   /* cancel the exit lift, keep the fade */
    }

    .mpCeremonyContent > *,
    .mpReveal .mpMast,
    .mpReveal .mpPlate,
    .mpReveal .mpCard,
    .mpGateCard,
    .mpSettle .mpPlate,
    .mpSettle .mpChartBox svg,
    .mpSettle .mpTableBox,
    .mpView.isEntering,
    .mpPanel {
        animation: none;
    }

    /* fetch indicator without the sweep: a static line while busy */
    .mpBusy .mpProgress::before {
        animation: none;
        left: 0;
        width: 100%;
    }

    #mpReportBtn.mpWorking::after {
        animation: none;   /* static ellipsis */
    }
}

/* refetch: dim the previous render instead of flashing a skeleton */
.mpBusy .mpWrap {
    opacity: 0.7;   /* lighter dim — the content blanking carries the signal now */
    pointer-events: none;
}

.mpDataError {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 11px 14px;
    background: var(--mp-plate);
    border: 1px solid var(--mp-rule);
    border-left: 3px solid var(--mp-alert);
    border-radius: var(--mp-r);
}

.mpErrorTag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mp-alert);
}

#mpDataErrorMsg {
    font-size: 12px;
    color: var(--mp-ink-2);
}

/* --- gate screens (on the .standalone green field) --- */
.mpGateStatus {
    text-align: center;
    color: white;
    font-size: 1.1em;
}

.mpGateCard {
    max-width: 460px;
    margin: 16vh auto 0;
    background: white;
    border-radius: 14px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
    padding: 34px 38px;
    text-align: center;
}

    .mpGateCard h1 {
        font-size: 17px;
        font-weight: 600;
        color: var(--mp-ink-1);
        margin: 0 0 8px;
    }

    .mpGateCard p {
        color: var(--mp-ink-2);
        font-size: 12.5px;
        line-height: 1.6;
    }

/* .topLogo puts the mark in the dark-mode counter-invert allowlist, but its
   global rule is 45px + padding — give the gate screens a larger mark.
   (logocropped.png everywhere: the full logo's tagline aliases when shrunk.) */
.mpGateCard .topLogo,
.standaloneMessage .topLogo {
    max-height: 64px;
    padding: 0;
}

.mpGateLink {
    display: inline-block;
    margin-top: 10px;
    background: var(--btn-primary-grad);
    color: white;
    text-decoration: none;
    border-radius: var(--mp-r);
    padding: 8px 22px;
    box-shadow: var(--btn-shadow);
}

.mpGateBtn {
    width: auto;
    padding: 6px 22px;
    margin-top: 10px;
}

/* "Open Rep Dashboard" button in the toolbox Metrics tab topbar (flex row:
   auto left margin pins it against the Close button). */
.mpOpenDashboardBtn {
    width: auto;
    padding: 0 14px;
    height: 26px;
    font-size: 0.85em;
    margin-left: auto;
    margin-right: 10px;
}

/* The one sanctioned .darkmode rule: UA-painted calendar glyph compensation
   (precedented UA-chrome patch — not an authored dark palette). */
.darkmode .mpControlBar input[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* --- breakpoints --- */
@media (max-width: 1500px) {
    /* the 3-up bands fold to 2x2: the stacked columns dissolve into the grid
       so their cards become ordinary grid items; Activity stacks fully */
    .mpGrid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mpGridCol {
        display: contents;
    }

    .mpGridActivity,
    .mpGridComp,
    .mpGridOpt,
    .mpGridProjects {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1180px) {
    .mpGrid2,
    .mpGrid3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .mpPlateGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mpKpi-hero {
        grid-column: span 2;
    }

    .mpKpi:nth-child(2n) {
        border-left: none;
    }

    .mpKpi:nth-child(n+2) {
        border-top: 1px solid var(--mp-grid);
    }
}

@media (max-width: 820px) {
    .mpPlateGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mpKpi-hero {
        grid-column: span 1;
    }

        .mpKpi-hero .mpKpiValue {
            font-size: 34px;
        }

    .mpKpi {
        border-left: none;
        border-top: 1px solid var(--mp-grid);
    }

    .mpWrap {
        padding: 0 16px 40px;
    }

    .mpMast,
    .mpTopBarInner,
    .mpControlInner,
    .mpNavRow,
    .mpChipsRow {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mpNavTab {
        padding: 10px 10px 7px;
    }

    .mpControlInner {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .mpControlDivider {
        margin-left: 0;
    }

    .mpCard {
        padding: 0 16px 16px;
    }

    .mpCardHead {
        margin: 0 -16px 16px;
    }

    .mpTableBox {
        overflow-x: auto;
    }

    .mpNoteGrid {
        grid-template-columns: 1fr;
    }

    .mpNoteTerm {
        padding-bottom: 2px;
    }

    .mpNoteDef {
        border-top: none;
        padding-top: 2px;
    }
}