/* /Components/Bottle.razor.rz.scp.css */
.bottle-card[b-9x86zoh3ye] {
    background: var(--glass, linear-gradient(160deg, #12263b 0%, #0b1a2b 100%));
    border: 1px solid var(--line, #1e3a52);
    border-radius: var(--r-lg, 22px);
    padding: 16px 18px 20px;
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.35));
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-med, 0.3s ease), box-shadow var(--t-med, 0.3s ease);
}

.bottle-card:hover[b-9x86zoh3ye] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.45)),
                0 0 0 1px color-mix(in srgb, var(--pace-color, #29abe2) 40%, transparent);
}

.bottle-card[b-9x86zoh3ye]::after {
    /* glowing top accent tied to pace */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--pace-color, #29abe2), transparent);
    box-shadow: 0 0 14px var(--pace-color, #29abe2);
}

.bottle-head[b-9x86zoh3ye] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.unit-product[b-9x86zoh3ye] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.unit-product-name[b-9x86zoh3ye] { font-size: 0.9rem; font-weight: 700; color: #eaf6ff; }
.unit-area[b-9x86zoh3ye] {
    font-size: 0.66rem; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--cyan, #29abe2);
    background: rgba(41, 171, 226, 0.12);
    border: 1px solid rgba(41, 171, 226, 0.3);
    border-radius: var(--r-pill, 999px);
    padding: 2px 9px;
}

.unit-id[b-9x86zoh3ye] {
    font-size: 1.05rem;
    color: #9ec6e3;
    letter-spacing: 0.5px;
}

.unit-id strong[b-9x86zoh3ye] { color: #eaf6ff; }

.unit-label[b-9x86zoh3ye] {
    font-size: 0.7rem;
    background: #21405b;
    color: #bfe0f5;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.pace-badge[b-9x86zoh3ye] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    padding: 5px 12px;
    border-radius: var(--r-pill, 999px);
    color: #06131f;
    background: var(--pace-color, #29abe2);
    box-shadow: 0 0 16px color-mix(in srgb, var(--pace-color, #29abe2) 55%, transparent);
}

.pace-ahead[b-9x86zoh3ye]   { --pace-color: #37d67a; }
.pace-behind[b-9x86zoh3ye]  { --pace-color: #ff5f5f; }
.pace-ontrack[b-9x86zoh3ye] { --pace-color: #ffb020; }

.bottle-body[b-9x86zoh3ye] {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.bottle-svg[b-9x86zoh3ye] {
    width: 46%;
    max-width: 190px;
    height: auto;
    display: block;
    flex: 0 0 auto;
}

/* ---------- Stage markers (HTML column, aligned to the bottle) ---------- */
.markers[b-9x86zoh3ye] {
    flex: 1;
    min-width: 0;   /* let the column shrink so the % badge never overflows the card */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 12px 0 20px;
}

.marker[b-9x86zoh3ye] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.marker-dot[b-9x86zoh3ye] {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #4a6274;
    flex: 0 0 auto;
    position: relative;
}
.marker-dot[b-9x86zoh3ye]::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: 10px;
    border-top: 1.5px dashed #6fa2c4;
    opacity: 0.6;
}
.marker-dot.on[b-9x86zoh3ye] {
    background: #4fc3f0;
    box-shadow: 0 0 8px rgba(79, 195, 240, 0.7);
}

.marker-text[b-9x86zoh3ye] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex: 1;
    min-width: 0;
}
.marker-stage[b-9x86zoh3ye] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #dfefff;
    letter-spacing: 0.4px;
}
.marker-name[b-9x86zoh3ye] {
    font-size: 0.7rem;
    color: #7ea6c6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marker-badge[b-9x86zoh3ye] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 11px;
    flex: 0 0 auto;
}

/* The water level rises smoothly when the % changes live. */
.water-layer[b-9x86zoh3ye] {
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

/* Continuously drifting ripples on the surface. */
.wave-a[b-9x86zoh3ye] { animation: waveA-b-9x86zoh3ye 6s linear infinite; }
.wave-b[b-9x86zoh3ye] { animation: waveB-b-9x86zoh3ye 9s linear infinite; }
.wave-crest[b-9x86zoh3ye] { animation: waveA-b-9x86zoh3ye 6s linear infinite; }

@keyframes waveA-b-9x86zoh3ye { from { transform: translateX(0); }   to { transform: translateX(100px); } }
@keyframes waveB-b-9x86zoh3ye { from { transform: translateX(0); }   to { transform: translateX(-100px); } }

/* Slow diagonal light sweep across the water for a glossy feel. */
.shimmer[b-9x86zoh3ye] { animation: sweep-b-9x86zoh3ye 5.5s ease-in-out infinite; }
@keyframes sweep-b-9x86zoh3ye {
    0%   { transform: translateX(0) skewX(-12deg); opacity: 0; }
    40%  { opacity: 0.14; }
    100% { transform: translateX(240px) skewX(-12deg); opacity: 0; }
}

.marker-stage[b-9x86zoh3ye] {
    fill: #dfefff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.marker-name[b-9x86zoh3ye] {
    fill: #7ea6c6;
    font-size: 10.5px;
}

.badge-full[b-9x86zoh3ye]    { background: #1a86c7; color: #ffffff; }
.badge-partial[b-9x86zoh3ye] { background: rgba(79, 195, 240, 0.15); color: #9fdcff; border: 1px solid #4fc3f0; }
.badge-empty[b-9x86zoh3ye]   { background: rgba(255, 255, 255, 0.04); color: #5f7a90; border: 1px solid #3a5065; }

.overall[b-9x86zoh3ye] {
    text-align: center;
    margin-top: 6px;
}

.overall-cap[b-9x86zoh3ye] {
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    color: #7ea6c6;
}

.overall-pct[b-9x86zoh3ye] {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(180deg, #bfeeff 0%, #4fc3f0 60%, #1a86c7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 22px rgba(79, 195, 240, 0.4);
    font-variant-numeric: tabular-nums;
}

/* ---------- Compact variant: shorter card for the stacked 3×2 grid ---------- */
.bottle-card.compact[b-9x86zoh3ye] { padding: 12px 15px; justify-content: space-between; }
.bottle-card.compact .bottle-head[b-9x86zoh3ye] { margin-bottom: 2px; }
/* The CA/STD badge by the unit number already signals the variant, so the product
   line is redundant on the floor cards — hide it to free room for OVERALL PROGRESS
   and let the bottle sit higher. */
.bottle-card.compact .unit-product[b-9x86zoh3ye] { display: none; }
.bottle-card.compact .bottle-body[b-9x86zoh3ye] { gap: 4px; }
.bottle-card.compact .bottle-svg[b-9x86zoh3ye] { width: auto; max-width: 116px; max-height: 196px; }
.bottle-card.compact .markers[b-9x86zoh3ye] { padding: 2px 0; }
.bottle-card.compact .marker[b-9x86zoh3ye] { gap: 7px; }
/* Overall progress on one line: "OVERALL PROGRESS   85%" */
.bottle-card.compact .overall[b-9x86zoh3ye] {
    margin-top: 2px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
}
.bottle-card.compact .overall-cap[b-9x86zoh3ye] { font-size: 0.8rem; letter-spacing: 1.2px; }
.bottle-card.compact .overall-pct[b-9x86zoh3ye] { font-size: 1.7rem; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-hlc35lv9x3] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-hlc35lv9x3] {
    flex: 1;
}

.sidebar[b-hlc35lv9x3] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-hlc35lv9x3] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-hlc35lv9x3]  a, .top-row[b-hlc35lv9x3]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-hlc35lv9x3]  a:hover, .top-row[b-hlc35lv9x3]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-hlc35lv9x3]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-hlc35lv9x3] {
        justify-content: space-between;
    }

    .top-row[b-hlc35lv9x3]  a, .top-row[b-hlc35lv9x3]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-hlc35lv9x3] {
        flex-direction: row;
    }

    .sidebar[b-hlc35lv9x3] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-hlc35lv9x3] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-hlc35lv9x3]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-hlc35lv9x3], article[b-hlc35lv9x3] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-hlc35lv9x3] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-hlc35lv9x3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-tl74lakdyp] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-tl74lakdyp] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-tl74lakdyp] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-tl74lakdyp] {
    font-size: 1.1rem;
}

.bi[b-tl74lakdyp] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-tl74lakdyp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-tl74lakdyp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-tl74lakdyp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-tl74lakdyp] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-tl74lakdyp] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-tl74lakdyp] {
        padding-bottom: 1rem;
    }

    .nav-item[b-tl74lakdyp]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-tl74lakdyp]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-tl74lakdyp]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-tl74lakdyp] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-tl74lakdyp] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-tl74lakdyp] {
        display: none;
    }

    .nav-scrollable[b-tl74lakdyp] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xo5lox48tx],
.components-reconnect-repeated-attempt-visible[b-xo5lox48tx],
.components-reconnect-failed-visible[b-xo5lox48tx],
.components-pause-visible[b-xo5lox48tx],
.components-resume-failed-visible[b-xo5lox48tx],
.components-rejoining-animation[b-xo5lox48tx] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xo5lox48tx],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xo5lox48tx],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xo5lox48tx],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xo5lox48tx],
#components-reconnect-modal.components-reconnect-retrying[b-xo5lox48tx],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xo5lox48tx],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xo5lox48tx],
#components-reconnect-modal.components-reconnect-failed[b-xo5lox48tx],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xo5lox48tx] {
    display: block;
}


#components-reconnect-modal[b-xo5lox48tx] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xo5lox48tx 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-xo5lox48tx 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-xo5lox48tx 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-xo5lox48tx]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-xo5lox48tx 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xo5lox48tx {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-xo5lox48tx {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xo5lox48tx {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-xo5lox48tx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-xo5lox48tx] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-xo5lox48tx] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-xo5lox48tx] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-xo5lox48tx] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-xo5lox48tx] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-xo5lox48tx] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-xo5lox48tx 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-xo5lox48tx] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-xo5lox48tx {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/PaceChart.razor.rz.scp.css */
.pace-empty[b-26md6m1w4u] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f7f98;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.vc-shell[b-hc8tlqt833] {
    /* Fills the scaled canvas, whose height fit.js sets to match the viewport
       aspect — so the board fills any screen with no letterbox bars. */
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 600px at 70% -10%, #12314c 0%, transparent 60%),
        linear-gradient(180deg, #08131f 0%, #060d16 100%);
    color: #dce8f3;
}

/* ---------- Top bar ---------- */
.vc-topbar[b-hc8tlqt833] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: linear-gradient(90deg, rgba(12, 34, 55, 0.85) 0%, rgba(16, 52, 85, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(120, 200, 240, 0.15) inset;
    /* No sticky: scale-to-fit means the whole dashboard is always on screen. */
    position: relative;
    z-index: 10;
}

.vc-brand[b-hc8tlqt833] { display: flex; align-items: center; gap: 18px; }

/* Uploaded company logo (white-label). Vector or raster, kept crisp + contained. */
.vc-logo-img[b-hc8tlqt833] {
    height: 58px;
    width: auto;
    max-width: 340px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

.vc-logo[b-hc8tlqt833] { font-size: 1.6rem; font-weight: 800; color: #eaf6ff; letter-spacing: 0.3px; }
.vc-logo span[b-hc8tlqt833] { color: #29abe2; }

.vc-brand-txt[b-hc8tlqt833] { display: flex; flex-direction: column; gap: 3px; }

.vc-tag[b-hc8tlqt833] {
    font-size: 0.76rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6f9ec0;
}

.vc-plant[b-hc8tlqt833] { font-size: 1.3rem; font-weight: 700; color: #eaf6ff; letter-spacing: 0.2px; }
.vc-clock[b-hc8tlqt833] { font-size: 1rem; color: #8fb6d4; font-variant-numeric: tabular-nums; }

.vc-noteslink[b-hc8tlqt833] {
    color: #cfe6f7;
    text-decoration: none;
    font-weight: 700;
    padding: 7px 14px;
    border: 1px solid #24557f;
    border-radius: 10px;
    background: #10314e;
}
.vc-noteslink:hover[b-hc8tlqt833] { background: #1b4667; }

/* ---------- Area tabs (Final Assembly / Sub-Assembly views) ---------- */
.vc-areatabs[b-hc8tlqt833] { display: flex; gap: 10px; }
.vc-areatab[b-hc8tlqt833] {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(13, 35, 56, 0.6);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 1rem; font-weight: 700;
    padding: 9px 18px; border-radius: var(--r-pill);
    cursor: pointer; transition: all var(--t-fast);
}
.vc-areatab:hover[b-hc8tlqt833] { color: #eaf6ff; border-color: var(--cyan); }
.vc-areatab.active[b-hc8tlqt833] {
    color: #04121e;
    background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(41, 171, 226, 0.45);
}
.vc-areatab-count[b-hc8tlqt833] {
    font-size: 0.78rem; font-weight: 800;
    background: rgba(0, 0, 0, 0.18); border-radius: var(--r-pill); padding: 1px 9px;
}
.vc-areatab:not(.active) .vc-areatab-count[b-hc8tlqt833] { background: rgba(41, 171, 226, 0.15); color: var(--cyan); }

/* ---------- KPI strip ---------- */
.vc-kpis[b-hc8tlqt833] {
    display: flex;
    gap: 14px;
    padding: 18px 26px 4px;
    flex-wrap: wrap;
}

.kpi[b-hc8tlqt833] {
    flex: 1 1 160px;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.kpi[b-hc8tlqt833]::before {
    /* soft top light */
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120, 200, 240, 0.5), transparent);
}
.kpi:hover[b-hc8tlqt833] { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.kpi-val[b-hc8tlqt833] {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #eaf6ff, var(--cyan-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.kpi-of[b-hc8tlqt833] { font-size: 1rem; color: var(--text-dim); font-weight: 600; margin-left: 4px; -webkit-text-fill-color: var(--text-dim); }
.kpi-cap[b-hc8tlqt833] { font-size: 0.72rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; }

/* ---------- Configurable tile grid ----------
   The whole dashboard is a 12-column grid; each tile's position and size come
   from data (DashboardWidget rows), so the floor display is arranged in
   VisiAdmin, never hardcoded here. The grid fills the height between the KPI
   strip and the footer. */
.vc-tile-grid[b-hc8tlqt833] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 18px 28px 8px;
}

/* A tile is just a positioned container; its child widget provides the surface. */
.vc-tile[b-hc8tlqt833] { min-width: 0; min-height: 0; display: flex; }
.vc-tile > *[b-hc8tlqt833] { flex: 1; min-width: 0; min-height: 0; }
/* Charts bring their own .chart-card surface — make it fill the tile. */
.vc-tile > .chart-card[b-hc8tlqt833] { height: 100%; }

/* Generic tile surface (used by the Bottles tile + placeholders). */
.tile-card[b-hc8tlqt833] {
    display: flex;
    flex-direction: column;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(6px);
    padding: 16px 18px 12px;
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.tile-card:hover[b-hc8tlqt833] { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.tile-head[b-hc8tlqt833] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    flex: 0 0 auto;
}
.tile-title[b-hc8tlqt833] { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.6px; color: #eaf6ff; }
.tile-sub[b-hc8tlqt833] { font-size: 0.82rem; color: #7ea6c6; }

.tile-placeholder[b-hc8tlqt833] {
    align-items: center;
    justify-content: center;
    color: #5f7f98;
    border-style: dashed;
}

/* ---------- Bottle grid (Final Assembly): equal columns, stacked rows ---------- */
.bottle-grid[b-hc8tlqt833] {
    flex: 1;
    min-height: 0;
    display: grid;
    /* columns set inline from the unit count so every card is exactly equal */
    grid-auto-rows: max-content;  /* rows are exactly the card's content height — same size regardless of unit count */
    gap: 16px;
    align-content: start;   /* pack rows at the top instead of filling the height */
    justify-items: stretch;
    overflow: hidden;
}

/* ---------- Final-assembly floor map: fixed location slots (1,2,3 / 4,5,6) ---------- */
.bottle-grid.location-grid[b-hc8tlqt833] { grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
.floor-slot[b-hc8tlqt833] { height: 100%; min-height: 0; width: 100%; }
/* Occupied slot: the bottle card lives inside the <Bottle> child component, so
   ::deep is required to reach it. Absolutely size it to the slot box (inset:0)
   so it fills the whole slot in both dimensions — same footprint as an open slot. */
.floor-slot:not(.floor-slot-empty)[b-hc8tlqt833] { position: relative; }
.floor-slot:not(.floor-slot-empty)[b-hc8tlqt833]  .bottle-card {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto;
}
.location-grid[b-hc8tlqt833]  .bottle-card.compact .bottle-svg { max-width: 150px; max-height: 300px; }
/* Pop-out floor: instead of stretching rows and absolutely filling each slot
   (which clips when a row is shorter than the card), lay the cards out at their
   NATURAL height in a scrollable grid — so every card is fully drawn, always. */
/* Pop-out floor: full cards at natural height (nothing clipped), two rows in the
   large window. Cards are made a bit more compact — smaller bottle + tighter
   markers — so both rows fit the taller window without scrolling. */
.bottle-grid.location-grid.floor-pop[b-hc8tlqt833] {
    grid-auto-rows: max-content;
    align-content: start;
    overflow: visible;
    gap: 16px;
}
.floor-pop .floor-slot[b-hc8tlqt833] { height: auto; }
.floor-pop .floor-slot:not(.floor-slot-empty)[b-hc8tlqt833]  .bottle-card {
    position: relative; inset: auto; width: 100%; height: auto;
}
.floor-pop .floor-slot-empty[b-hc8tlqt833] { min-height: 300px; }
.floor-pop[b-hc8tlqt833]  .bottle-card.compact .bottle-svg { max-width: 138px; max-height: 234px; }
.floor-pop[b-hc8tlqt833]  .markers { gap: 2px; }
.floor-pop[b-hc8tlqt833]  .overall { margin-top: 2px; }
.floor-slot-empty[b-hc8tlqt833] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 2px dashed var(--line, #1e3a52); border-radius: var(--r-lg, 22px);
    background: rgba(255, 255, 255, 0.015); color: var(--text-faint, #5f7f98);
}
.fse-num[b-hc8tlqt833] { font-size: 2.6rem; font-weight: 800; line-height: 1; opacity: 0.45; }
.fse-lbl[b-hc8tlqt833] { text-transform: uppercase; letter-spacing: 2px; font-size: 0.7rem; }

/* ---------- Sub-Assembly view: in-build board (left) + inventory kanban (right) ---------- */
.vc-subgrid[b-hc8tlqt833] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    padding: 18px 28px 8px;
}
.vc-subgrid > .tile-card[b-hc8tlqt833] { min-height: 0; }

/* Compact in-build grid: 3 across (room for ~9 at 3×3). */
.subassy-grid[b-hc8tlqt833] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-content: start;
    overflow: hidden;
}

/* ---------- Inventory kanban ---------- */
.kanban[b-hc8tlqt833] { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.kb-card[b-hc8tlqt833] {
    --sig: var(--cyan);
    padding: 9px 13px;
    border-radius: var(--r-md);
    background: rgba(13, 35, 56, 0.5);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sig);
    transition: transform var(--t-fast);
}
.kb-card:hover[b-hc8tlqt833] { transform: translateX(2px); }
.kb-card.kb-ok[b-hc8tlqt833] { --sig: #37d67a; }
.kb-card.kb-low[b-hc8tlqt833] { --sig: #ffb020; }
.kb-card.kb-crit[b-hc8tlqt833] { --sig: #ff5f5f; animation: kbPulse-b-hc8tlqt833 1.8s ease-in-out infinite; }
.kb-card.kb-out[b-hc8tlqt833] { --sig: #ff3b3b; animation: kbPulse-b-hc8tlqt833 1.2s ease-in-out infinite; }
@keyframes kbPulse-b-hc8tlqt833 {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 95, 95, 0); border-left-color: var(--sig); }
    50% { box-shadow: 0 0 18px rgba(255, 95, 95, 0.45); border-left-color: #ff9e9e; }
}

.kb-head[b-hc8tlqt833] { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.kb-name[b-hc8tlqt833] { font-size: 0.95rem; font-weight: 800; color: #eaf6ff; }
.kb-count[b-hc8tlqt833] { font-size: 1.08rem; font-weight: 800; color: var(--sig); font-variant-numeric: tabular-nums; }
.kb-of[b-hc8tlqt833] { font-size: 0.76rem; color: var(--text-dim); font-weight: 600; }

.kb-slots[b-hc8tlqt833] { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.kb-slot[b-hc8tlqt833] {
    width: 19px; height: 25px; border-radius: 5px;
    background: rgba(6, 13, 22, 0.55); border: 1px solid var(--line);
}
.kb-slot.filled[b-hc8tlqt833] { background: var(--sig); border-color: transparent; box-shadow: 0 0 8px var(--sig); }
.kb-slot.over[b-hc8tlqt833] { outline: 2px dashed var(--sig); background: transparent; box-shadow: none; }

.kb-status[b-hc8tlqt833] { font-size: 0.63rem; font-weight: 800; letter-spacing: 1px; color: var(--sig); }

/* Sort toggle on the inventory tile. */
.inv-sort[b-hc8tlqt833] { display: inline-flex; gap: 4px; background: rgba(6,13,22,0.5); border-radius: var(--r-pill); padding: 3px; }
.inv-sort-btn[b-hc8tlqt833] {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 0.76rem; font-weight: 700;
    padding: 5px 12px; border-radius: var(--r-pill); transition: all var(--t-fast);
}
.inv-sort-btn:hover[b-hc8tlqt833] { color: #eaf6ff; }
.inv-sort-btn.active[b-hc8tlqt833] { background: var(--cyan); color: #04121e; box-shadow: 0 3px 10px rgba(41,171,226,0.4); }

.cu-card[b-hc8tlqt833] {
    --pace-color: var(--cyan);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.cu-card:hover[b-hc8tlqt833] { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cu-card[b-hc8tlqt833]::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--pace-color), transparent);
    box-shadow: 0 0 12px var(--pace-color);
}
.cu-card.pace-ahead[b-hc8tlqt833] { --pace-color: #37d67a; }
.cu-card.pace-behind[b-hc8tlqt833] { --pace-color: #ff5f5f; }
.cu-card.pace-ontrack[b-hc8tlqt833] { --pace-color: #ffb020; }

.cu-head[b-hc8tlqt833] { display: flex; align-items: center; justify-content: space-between; }
.cu-num[b-hc8tlqt833] { font-size: 1.15rem; font-weight: 800; color: #eaf6ff; }
.cu-pace[b-hc8tlqt833] {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.6px;
    color: var(--pace-color); border: 1px solid var(--pace-color);
    border-radius: var(--r-pill); padding: 2px 8px;
}
.cu-product[b-hc8tlqt833] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cu-prod-name[b-hc8tlqt833] { font-size: 0.82rem; color: var(--text-dim); font-weight: 600; }
.cu-area[b-hc8tlqt833] {
    font-size: 0.62rem; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 800;
    color: var(--cyan); background: rgba(41, 171, 226, 0.12);
    border: 1px solid rgba(41, 171, 226, 0.3); border-radius: var(--r-pill); padding: 2px 8px;
    white-space: nowrap;
}
.cu-dot[b-hc8tlqt833] { cursor: default; }

.cu-bar[b-hc8tlqt833] { height: 12px; border-radius: var(--r-pill); background: rgba(6, 13, 22, 0.7); overflow: hidden; }
.cu-fill[b-hc8tlqt833] {
    height: 100%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, #1e8fce, #6fd3f7);
    box-shadow: 0 0 12px rgba(41, 171, 226, 0.5);
    transition: width var(--t-med);
}

.cu-foot[b-hc8tlqt833] { display: flex; align-items: center; justify-content: space-between; }
.cu-stages[b-hc8tlqt833] { display: flex; gap: 6px; }
/* Numbered stage pips — each dot is a stage, number ties it to the stage order. */
.cu-dot[b-hc8tlqt833] {
    width: 20px; height: 20px; border-radius: 50%;
    background: #24445f; color: #9ec6e3;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 800;
}
.cu-dot.part[b-hc8tlqt833] { background: var(--cyan); color: #04121e; box-shadow: 0 0 8px rgba(41,171,226,0.7); }
.cu-dot.done[b-hc8tlqt833] { background: #37d67a; color: #04121e; box-shadow: 0 0 8px rgba(55,214,122,0.7); }
.cu-pct[b-hc8tlqt833] { font-size: 1.05rem; font-weight: 800; color: var(--cyan-bright); font-variant-numeric: tabular-nums; }

/* Legend for the stage pips (glanceable, no hover needed). */
.cu-legend[b-hc8tlqt833] {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 12px; font-size: 0.78rem; color: var(--text-dim);
}
.cu-legend-item[b-hc8tlqt833] { display: inline-flex; align-items: center; gap: 6px; }
.cu-legend .cu-dot[b-hc8tlqt833] { width: 13px; height: 13px; }
.cu-legend-hint[b-hc8tlqt833] { color: var(--text-faint); font-style: italic; margin-left: auto; }

/* Clickable units → drill-down. */
.unit-click[b-hc8tlqt833] { cursor: pointer; display: flex; min-width: 0; }
.unit-click > *[b-hc8tlqt833] { flex: 1; min-width: 0; }
.cu-card[b-hc8tlqt833] { cursor: pointer; }

.vc-loading[b-hc8tlqt833] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6f9ec0;
    font-size: 1.1rem;
}

/* ---------- Demo control bar ---------- */
.vc-demo[b-hc8tlqt833] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 26px;
    background: rgba(9, 22, 35, 0.7);
    border-top: 1px solid #142c44;
    flex-wrap: wrap;
}

.vc-demo-label[b-hc8tlqt833] { color: #9ec6e3; font-weight: 600; }

.vc-select[b-hc8tlqt833] {
    background: #0d2338;
    color: #eaf6ff;
    border: 1px solid #2a557a;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.9rem;
}

.vc-btn[b-hc8tlqt833] {
    background: linear-gradient(180deg, #29abe2 0%, #1a86c7 100%);
    color: #04121e;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(41, 171, 226, 0.35);
}
.vc-btn:hover[b-hc8tlqt833] { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(41, 171, 226, 0.5); }
.vc-btn:active[b-hc8tlqt833] { transform: translateY(0); }

.vc-demo-hint[b-hc8tlqt833] { color: #5f7f98; font-size: 0.82rem; font-style: italic; }

/* ---------- Footer ---------- */
.vc-footer[b-hc8tlqt833] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 26px;
    background: linear-gradient(90deg, #0c2237 0%, #103455 100%);
    border-top: 1px solid #1b3a58;
    font-size: 0.82rem;
    color: #8fb6d4;
}

.foot-lean[b-hc8tlqt833] { font-size: 1rem; color: #cfe6f6; }
.foot-lean strong[b-hc8tlqt833] { color: #29abe2; }
.foot-mid strong[b-hc8tlqt833] { color: #cfe6f6; }

.foot-live[b-hc8tlqt833] {
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #37d67a;
}
.foot-live .dot[b-hc8tlqt833] {
    width: 9px; height: 9px; border-radius: 50%;
    background: #37d67a;
    box-shadow: 0 0 10px #37d67a;
    animation: pulse-b-hc8tlqt833 1.6s ease-in-out infinite;
}
.foot-live.polling[b-hc8tlqt833] { color: #ffb020; }
.foot-live.polling .dot[b-hc8tlqt833] { background: #ffb020; box-shadow: 0 0 10px #ffb020; }
@keyframes pulse-b-hc8tlqt833 { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- Swappable chart tile (pick which chart shows) ---------- */
.vc-swaptile[b-hc8tlqt833] { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vc-swapbar[b-hc8tlqt833] { display: flex; justify-content: flex-end; margin-bottom: 6px; flex: 0 0 auto; }
.vc-swapbody[b-hc8tlqt833] { flex: 1; min-height: 0; display: flex; }
.vc-swapbody > *[b-hc8tlqt833] { flex: 1; min-height: 0; }

/* ---------- Top-bar info buttons (Notes, Home, …) ---------- */
.vc-topright[b-hc8tlqt833] { display: flex; align-items: center; gap: 16px; }
.vc-topbtns[b-hc8tlqt833] { display: flex; align-items: center; gap: 10px; }
.vc-topbtn[b-hc8tlqt833] {
    color: #eaf6ff; font-weight: 700; font-size: 0.88rem;
    padding: 8px 15px; border-radius: 10px;
    border: 1px solid #24557f; background: #10314e; cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.vc-topbtn:hover[b-hc8tlqt833] { background: #1b4667; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.32); }
.vc-topbtn-icon[b-hc8tlqt833] {
    width: 40px; height: 40px; padding: 0; font-size: 1.2rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- In-app document / web overlay ---------- */
.vc-doc-overlay[b-hc8tlqt833] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(4, 12, 22, 0.72);
    display: flex; align-items: center; justify-content: center;
}
.vc-doc-card[b-hc8tlqt833] {
    width: min(1100px, 92vw); height: min(80vh, 860px);
    background: #0c1f33; border: 1px solid #24557f; border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.vc-doc-head[b-hc8tlqt833] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; background: #103455; border-bottom: 1px solid #1b3a58;
}
.vc-doc-title[b-hc8tlqt833] { font-weight: 700; color: #eaf6ff; }
.vc-doc-close[b-hc8tlqt833] { background: transparent; border: none; color: #cfe6f7; font-size: 1.15rem; cursor: pointer; }
.vc-doc-frame[b-hc8tlqt833] { flex: 1; border: none; width: 100%; background: #fff; }

@media (max-width: 720px) {
    .vc-topbar[b-hc8tlqt833] { flex-wrap: wrap; gap: 6px; }
    .bottle-grid[b-hc8tlqt833] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Notes.razor.rz.scp.css */
.nr-shell[b-qvcn23ckcx] {
    min-height: 100vh;
    background:
        radial-gradient(1100px 560px at 80% -10%, #12314c 0%, transparent 58%),
        linear-gradient(180deg, #08131f 0%, #060d16 100%);
    color: #dce8f3;
    padding: 22px 28px 40px;
}

.nr-top[b-qvcn23ckcx] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.nr-back[b-qvcn23ckcx] {
    color: #8fb6d4;
    text-decoration: none;
    font-weight: 700;
    padding: 8px 14px;
    border: 1px solid #24557f;
    border-radius: 10px;
    background: #10314e;
}
.nr-back:hover[b-qvcn23ckcx] { background: #1b4667; }
.nr-title[b-qvcn23ckcx] { font-size: 1.6rem; font-weight: 800; margin: 0; color: #eaf6ff; }

.nr-tools[b-qvcn23ckcx] { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nr-all[b-qvcn23ckcx] { display: flex; align-items: center; gap: 6px; color: #cfe6f7; font-weight: 700; }
.nr-all input[b-qvcn23ckcx] { width: 18px; height: 18px; }
.nr-date[b-qvcn23ckcx] {
    background: #0d2338; color: #eaf6ff; border: 1px solid #2a557a;
    border-radius: 10px; padding: 8px 10px; font-size: 0.95rem;
}
.nr-export[b-qvcn23ckcx] {
    background: var(--cyan, #29abe2); color: #062033; font-weight: 800;
    text-decoration: none; padding: 9px 16px; border-radius: 10px;
}
.nr-export:hover[b-qvcn23ckcx] { filter: brightness(1.08); }

.nr-empty[b-qvcn23ckcx] { color: #7ea6c6; font-size: 1.1rem; padding: 30px 0; }

.nr-unit[b-qvcn23ckcx] {
    background: rgba(9, 26, 43, 0.72);
    border: 1px solid #1c3a55;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.nr-unit-head[b-qvcn23ckcx] { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.nr-unit-num[b-qvcn23ckcx] { font-size: 1.3rem; font-weight: 800; color: #eaf6ff; }
.nr-unit-lbl[b-qvcn23ckcx] {
    font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700;
    color: var(--cyan, #29abe2); background: rgba(41, 171, 226, 0.14);
    border: 1px solid rgba(41, 171, 226, 0.3); border-radius: 999px; padding: 2px 9px;
}
.nr-unit-count[b-qvcn23ckcx] { margin-left: auto; font-size: 0.85rem; color: #7ea6c6; }

.nr-note[b-qvcn23ckcx] {
    border-top: 1px solid #142f47;
    padding: 10px 0;
}
.nr-note-meta[b-qvcn23ckcx] { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: #7ea6c6; margin-bottom: 4px; }
.nr-time[b-qvcn23ckcx] { font-weight: 700; color: #cfe6f6; }
.nr-where[b-qvcn23ckcx] { color: #8fb6d4; }
.nr-op[b-qvcn23ckcx] { color: #8fb6d4; }
.nr-note-txt[b-qvcn23ckcx] { color: #eaf6ff; white-space: pre-wrap; }
/* /Components/RateChart.razor.rz.scp.css */
/* Title stays left-justified; push the window/expand tools to the right. */
.chart-tools[b-helvfgqq1t] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* .rate-window lives in global app.css — the <select> is RenderTreeBuilder-built
   and never gets this component's scoped-style marker, so a scoped rule here
   would not apply. */

.rate-expand[b-helvfgqq1t] {
    background: #10314e;
    border: 1px solid #24557f;
    color: #cfe6f7;
    border-radius: 7px;
    width: 30px;
    height: 28px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}

.rate-expand:hover[b-helvfgqq1t] {
    background: #1b4667;
}

/* Pop-out overlay */
.rate-overlay[b-helvfgqq1t] {
    position: fixed;
    inset: 0;
    background: rgba(4, 12, 22, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: rate-fade-b-helvfgqq1t .15s ease;
}

.rate-overlay-card[b-helvfgqq1t] {
    width: 78vw;
    height: 80vh;
    background: #0b1f33;
    border: 1px solid #1d456b;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
    animation: rate-pop-b-helvfgqq1t .18s ease;
}

.rate-overlay-body[b-helvfgqq1t] {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: auto;
}

.rate-overlay-body[b-helvfgqq1t]  .chart-svg {
    width: 100%;
    height: 100%;
}

@keyframes rate-fade-b-helvfgqq1t { from { opacity: 0; } to { opacity: 1; } }
@keyframes rate-pop-b-helvfgqq1t { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* /Components/UnitDetail.razor.rz.scp.css */
.ud-overlay[b-rt88yw9uuo] {
    position: fixed;
    inset: 0;
    background: rgba(3, 8, 14, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: udFade-b-rt88yw9uuo 0.18s ease;
}
@keyframes udFade-b-rt88yw9uuo { from { opacity: 0; } to { opacity: 1; } }

.ud-modal[b-rt88yw9uuo] {
    width: min(920px, 92%);
    max-height: 88%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(23, 52, 80, 0.98) 0%, rgba(10, 24, 38, 0.99) 100%);
    border: 1px solid var(--line, #1c3a55);
    border-radius: var(--r-xl, 28px);
    box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,0.45)), 0 0 40px rgba(41,171,226,0.15);
    overflow: hidden;
    animation: udRise-b-rt88yw9uuo 0.22s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes udRise-b-rt88yw9uuo { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- header ---- */
.ud-head[b-rt88yw9uuo] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    background: linear-gradient(90deg, rgba(12,34,55,0.9), rgba(16,52,85,0.7));
    border-bottom: 1px solid var(--line, #1c3a55);
}
.ud-id[b-rt88yw9uuo] { flex: 1; }
.ud-num[b-rt88yw9uuo] { font-size: 1.6rem; font-weight: 800; color: #eaf6ff; }
.ud-label[b-rt88yw9uuo] {
    margin-left: 8px; font-size: 0.72rem; font-weight: 800; color: var(--cyan, #29abe2);
    background: rgba(41,171,226,0.14); border-radius: 999px; padding: 2px 10px; vertical-align: middle;
}
.ud-prod[b-rt88yw9uuo] { margin-top: 4px; font-size: 0.95rem; color: var(--text-dim, #7ea6c6); font-weight: 600; }
.ud-area[b-rt88yw9uuo] {
    margin-left: 6px; font-size: 0.62rem; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 800;
    color: var(--cyan, #29abe2); background: rgba(41,171,226,0.12);
    border: 1px solid rgba(41,171,226,0.3); border-radius: 999px; padding: 2px 8px;
}
.ud-overall[b-rt88yw9uuo] { text-align: right; }
.ud-overall-val[b-rt88yw9uuo] {
    display: block; font-size: 2rem; font-weight: 800; line-height: 1;
    background: linear-gradient(180deg, #eaf6ff, var(--cyan-bright, #4fc3f0));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
}
.ud-overall-cap[b-rt88yw9uuo] { font-size: 0.68rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim, #7ea6c6); }
.ud-close[b-rt88yw9uuo] {
    background: transparent; border: none; color: #7ea6c6; font-size: 1.3rem;
    cursor: pointer; padding: 6px 10px; border-radius: 10px; transition: all 0.15s ease;
}
.ud-close:hover[b-rt88yw9uuo] { color: #eaf6ff; background: rgba(255,255,255,0.08); }

/* ---- body ---- */
.ud-body[b-rt88yw9uuo] { padding: 18px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }

.ud-stage-head[b-rt88yw9uuo] {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 8px;
}
.ud-stage-name[b-rt88yw9uuo] { font-size: 1.05rem; font-weight: 800; color: #cfe6f6; letter-spacing: 0.3px; }
.ud-stage-pct[b-rt88yw9uuo] { font-size: 0.95rem; font-weight: 800; color: var(--cyan-bright, #4fc3f0); }

.ud-steps[b-rt88yw9uuo] { display: flex; flex-direction: column; gap: 2px; }
.ud-step[b-rt88yw9uuo] {
    display: grid;
    grid-template-columns: 2.4fr 60px 1.6fr 54px 110px;
    align-items: center;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(13, 35, 56, 0.4);
}
.ud-step:hover[b-rt88yw9uuo] { background: rgba(41, 171, 226, 0.07); }
.ud-step-name[b-rt88yw9uuo] { font-size: 0.95rem; color: #dce8f3; font-weight: 600; }
.ud-step-dur[b-rt88yw9uuo] { font-size: 0.85rem; color: var(--text-faint, #5f7f98); font-variant-numeric: tabular-nums; }
.ud-step-bar[b-rt88yw9uuo] { height: 8px; border-radius: 999px; background: rgba(6,13,22,0.7); overflow: hidden; }
.ud-step-fill[b-rt88yw9uuo] { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1e8fce, #6fd3f7); }
.ud-step-pct[b-rt88yw9uuo] { font-size: 0.85rem; font-weight: 700; color: #9ec6e3; text-align: right; font-variant-numeric: tabular-nums; }

.ud-step-state[b-rt88yw9uuo] {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    text-align: center; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent;
}
.st-done[b-rt88yw9uuo] { color: #37d67a; background: rgba(55,214,122,0.14); border-color: rgba(55,214,122,0.35); }
.st-run[b-rt88yw9uuo] { color: #4fc3f0; background: rgba(41,171,226,0.14); border-color: rgba(41,171,226,0.35); }
.st-paused[b-rt88yw9uuo] { color: #ffb020; background: rgba(255,176,32,0.14); border-color: rgba(255,176,32,0.35); }
.st-idle[b-rt88yw9uuo] { color: #7ea6c6; background: rgba(126,166,198,0.1); border-color: rgba(126,166,198,0.25); }

/* ---- footer ---- */
.ud-foot[b-rt88yw9uuo] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 26px; border-top: 1px solid var(--line-soft, #142c44);
    font-size: 0.8rem; color: var(--text-faint, #5f7f98);
}
.ud-close-btn[b-rt88yw9uuo] {
    background: linear-gradient(180deg, var(--cyan, #29abe2), var(--cyan-deep, #1a86c7));
    color: #04121e; font-weight: 800; border: none; border-radius: 999px;
    padding: 9px 22px; cursor: pointer; transition: all 0.15s ease;
}
.ud-close-btn:hover[b-rt88yw9uuo] { filter: brightness(1.08); transform: translateY(-1px); }