@import '_content/BidGlory.UI/BidGlory.UI.orvl5hzccz.bundle.scp.css';

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-lneei1k5q3],
.components-reconnect-repeated-attempt-visible[b-lneei1k5q3],
.components-reconnect-failed-visible[b-lneei1k5q3],
.components-pause-visible[b-lneei1k5q3],
.components-resume-failed-visible[b-lneei1k5q3],
.components-rejoining-animation[b-lneei1k5q3] {
    display: none;
}

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


#components-reconnect-modal[b-lneei1k5q3] {
    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-lneei1k5q3 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-lneei1k5q3] {
    border: 0;
    background-color: var(--brand-sea);
    color: var(--text-inverse);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-lneei1k5q3] {
        background-color: var(--brand-sea-ink);
    }

    #components-reconnect-modal button:active[b-lneei1k5q3] {
        background-color: var(--brand-sea);
    }

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

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

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

@keyframes components-rejoining-animation-b-lneei1k5q3 {
    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/Pages/BidPreview.razor.rz.scp.css */
/* BidPreview on the bid workspace shell (Feature 16264, PBI 16266).

   The shell (BidWorkspaceSidebar.razor.css) lays out the sidebar, the title
   strip and the foot; this file styles only the markup this page puts in
   its slots and its main column. Colours come from theme.css tokens. */

/* The pinned command (foot and phone dock): in the dock it takes the
   room the bid page gives its Total. */
.bws-save[b-yc2xw0cj0e] { flex: 1 1 auto; min-width: 0; }

/* On the rail the pinned command keeps only its last word ("Word",
   "Orders"); its accessible name and tooltip keep the whole label. */
@media (min-width: 1280px) {
    .bws[data-collapsed="true"]:not([data-panel="true"]) .bws-side .bws-save__extra[b-yc2xw0cj0e] { display: none; }
}
@media (min-width: 768px) and (max-width: 1279.98px) and (pointer: fine),
       (min-width: 768px) and (max-width: 1279.98px) and (min-height: 501px) {
    .bws:not([data-open="true"]):not([data-panel="true"]) .bws-side .bws-save__extra[b-yc2xw0cj0e] { display: none; }
}

/* Sidebar: the bid's identity (no pickers here; the bid page has them). */
.bws-identity[b-yc2xw0cj0e] {
    display: grid;
    gap: .35rem;
    padding: .15rem 0;
}
.bws-identity > div[b-yc2xw0cj0e] { min-width: 0; }
.bws-identity .flag-label[b-yc2xw0cj0e] { display: block; }
.bws-identity__value[b-yc2xw0cj0e] {
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Advanced options panel: the two toggle banks one under the other, two
   checkboxes a row in the 400px sidebar (one on a narrow phone). */
.preview-options-panel .preview-toggle-bank + .preview-toggle-bank[b-yc2xw0cj0e] { margin-top: .5rem; }
.preview-options-panel .preview-toggle-grid[b-yc2xw0cj0e] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* app.css nudges every .checkbox-row / .compact-check down (1.55-1.8rem)
   to line up with labelled fields beside it; a list of toggles has none. */
.preview-options-panel .checkbox-row[b-yc2xw0cj0e] { margin-top: 0; min-height: 1.75rem; }
@media (pointer: coarse) {
    .preview-options-panel .checkbox-row[b-yc2xw0cj0e] { min-height: var(--tap-min); }
}
@media (max-width: 359.98px) {
    .preview-options-panel .preview-toggle-grid[b-yc2xw0cj0e] { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: the quick controls two to a row (Selection, Opening/Closing and
   the cover choice keep a whole row) instead of one tall column. */
@media (max-width: 767.98px) {
    .preview-quick-grid[b-yc2xw0cj0e] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .6rem; align-items: end; }
    .preview-quick-grid .preview-scope-strip[b-yc2xw0cj0e],
    .preview-quick-grid .preview-inline-choice[b-yc2xw0cj0e] { grid-column: 1 / -1; }
    .preview-quick-grid .preview-inline-choice > .checkbox-row[b-yc2xw0cj0e] { margin-top: 0; }
    .preview-room-header .status-pill[b-yc2xw0cj0e] { white-space: nowrap; }
}

/* Proposal body: one line per item, no sideways scroll. The shell already
   drops app.css's 1320px floor; fixed layout gives the text columns what
   the fixed-width columns leave and cuts them with an ellipsis (each cell
   keeps its full text as a tooltip). */
.preview-room-section[b-yc2xw0cj0e] { container-type: inline-size; }
.preview-table th[b-yc2xw0cj0e] { top: var(--bws-top, 0px); }
.preview-items-table[b-yc2xw0cj0e] { table-layout: fixed; }
.preview-items-table :is(th, td)[b-yc2xw0cj0e] { overflow: hidden; text-overflow: ellipsis; }
.preview-items-table .c-phase[b-yc2xw0cj0e] { width: 5rem; }
.preview-items-table .c-mfg[b-yc2xw0cj0e] { width: 7.5rem; }
.preview-items-table .c-model[b-yc2xw0cj0e] { width: 8.5rem; }
.preview-items-table .c-qty[b-yc2xw0cj0e] { width: 3.5rem; }
.preview-items-table .c-unit[b-yc2xw0cj0e] { width: 3.25rem; }
.preview-items-table .c-sell[b-yc2xw0cj0e] { width: 5.75rem; }
.preview-items-table .c-total[b-yc2xw0cj0e] { width: 6.25rem; }
.preview-items-table .c-url[b-yc2xw0cj0e] { width: 9rem; }
/* Features shares the leftover width with Description; Description keeps
   the larger share (most lines have no features text). */
.preview-items-table .c-feat[b-yc2xw0cj0e] { width: 16%; }
@container (max-width: 60rem) {
    .preview-items-table .c-feat[b-yc2xw0cj0e] { width: 12%; }
}

/* Narrow (a phone, or a phone held sideways): each item is
   a two- or three-line card — model, mfg and total; the description; then
   phase, quantity and unit price — instead of a table wider than the page. */
@container (max-width: 40rem) {
    .preview-items-table[b-yc2xw0cj0e],
    .preview-items-table tbody[b-yc2xw0cj0e] { display: block; width: 100%; }
    .preview-items-table thead[b-yc2xw0cj0e] { display: none; }
    .preview-items-table tr[b-yc2xw0cj0e] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .45rem;
        row-gap: .1rem;
        padding: .45rem .55rem;
        border-bottom: 1px solid var(--border);
    }
    /* .bid-workspace-table doubled: beats app.css's striped and hovered
       cell fills, so a card is one surface. */
    .preview-items-table.bid-workspace-table tr td[b-yc2xw0cj0e] {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        white-space: nowrap;
    }
    .preview-items-table tr:nth-child(even)[b-yc2xw0cj0e] { background: var(--surface-sunken); }
    .preview-items-table tr:hover[b-yc2xw0cj0e] { background: var(--brand-sea-soft); }
    .preview-items-table .c-model[b-yc2xw0cj0e] { order: 1; font-weight: 700; flex: 0 1 auto; }
    .preview-items-table .c-mfg[b-yc2xw0cj0e] { order: 2; flex: 0 1 auto; color: var(--text-muted); }
    .preview-items-table .c-total[b-yc2xw0cj0e] { order: 3; margin-left: auto; font-weight: 700; flex: none; }
    .preview-items-table .c-desc[b-yc2xw0cj0e] { order: 4; flex: 1 0 100%; }
    .preview-items-table .c-feat[b-yc2xw0cj0e] { order: 5; flex: 1 0 100%; color: var(--text-muted); }
    .preview-items-table .c-phase[b-yc2xw0cj0e] { order: 6; color: var(--text-muted); font-size: .72rem; }
    .preview-items-table .c-qty[b-yc2xw0cj0e] { order: 7; }
    .preview-items-table .c-unit[b-yc2xw0cj0e] { order: 8; }
    .preview-items-table .c-sell[b-yc2xw0cj0e] { order: 9; color: var(--text-muted); }
    .preview-items-table .c-sell[b-yc2xw0cj0e]::before { content: "@ "; }
    .preview-items-table .c-url[b-yc2xw0cj0e] { order: 10; flex: 1 0 100%; color: var(--text-muted); font-size: .72rem; }
}

/* The short tables (system summary, payment plan) fit as they are; on a
   phone their headers may wrap rather than push the page sideways. */
@media (max-width: 767.98px) {
    .preview-payment-plan th[b-yc2xw0cj0e] { white-space: normal; }
    .preview-payment-plan :is(th, td)[b-yc2xw0cj0e] { padding-left: .35rem; padding-right: .35rem; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home page scoped styles. Relies on the global tokens from
   /wwwroot/css/theme.css. */

.home-hero[b-1sivlem6g5] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr);
    gap: 1.25rem;
    align-items: center;
    overflow: hidden;
}

.home-hero__copy[b-1sivlem6g5] {
    min-width: 0;
}

.home-hero__ctas[b-1sivlem6g5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.home-hero__art[b-1sivlem6g5] {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0.25rem;
    /* The frame stays 16:9 although the logo emblem is square.
       Framing it via aspect-ratio keeps the hero panel a
       consistent shape while Grok / swap-in art may vary
       slightly in output dimensions. */
    aspect-ratio: 16 / 9;
    min-height: 14rem;
    max-height: 22rem;
    /* The row is the frame's height, not the image's natural height
       (a square PNG at 100% width is taller than the frame), and the
       frame never grows past its column (min-height would otherwise
       push it ~410px wide and off-centre on a phone). */
    grid-template-rows: minmax(0, 1fr);
    max-width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    /* Subtle tinted bed behind the image so a PNG with a
       transparent background still reads as a framed focal. */
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--brand-sea-soft) 70%, var(--surface)) 0%,
            var(--surface) 100%);
    box-shadow: inset 0 0 0 1px var(--border);
}

.home-hero__art picture[b-1sivlem6g5],
.home-hero__art picture img[b-1sivlem6g5],
.home-hero__art > img[b-1sivlem6g5] {
    width: 100%;
    /* 2/3 of the frame height: the emblem plus the brand brief's
       clear space (1/4 of its width on every side) is 1.5x the
       emblem, so contain never crops it and never stretches it. */
    height: 66.667%;
    display: block;
    object-fit: contain;
    object-position: 50% 42%;
    /* No drop-shadow: the brand brief forbids shadowing the logo. */
}

/* Collapse to single column on small screens — art goes
   underneath the copy so the call-to-action stays above the
   fold. */
@media (max-width: 1024px) {
    .home-hero[b-1sivlem6g5] {
        grid-template-columns: 1fr;
    }
    .home-hero__art[b-1sivlem6g5] {
        order: 2;
    }
    .home-hero__copy[b-1sivlem6g5] {
        order: 1;
    }
}
/* /Components/Pages/ProductDetail.razor.rz.scp.css */
.product-linked-items[b-l1m33ytfkw] {
    min-width: 68rem;
}

.product-linked-items :is(th, td):last-child[b-l1m33ytfkw] {
    width: 13rem;
}

.product-suppliers-table[b-l1m33ytfkw] {
    min-width: 46rem;
}

/* Phone: the card heading's copy took the whole row and squeezed the card's
   one button ("Add linked item", "Add supplier") to 30-45px, its caption
   wrapping a few letters per line. Let the button drop under the copy. */
@media (max-width: 768px) {
    .linked-products-header[b-l1m33ytfkw] {
        flex-wrap: wrap;
    }
}
/* /Components/RecordHistoryPanel.razor.rz.scp.css */
/* Scoped styles for RecordHistoryPanel — collocated, following the
   DeviceJobDetail.razor.css pattern rather than adding a fourth inline
   timeline treatment to the app. Everything here is a token, not a
   literal colour, so the panel follows the theme system. */

.record-history[b-b6xstaqem5] {
    margin-block-start: 1rem;
}

.record-history__head[b-b6xstaqem5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
}

.record-history__title[b-b6xstaqem5] {
    font-size: 1rem;
    margin: 0;
}

.record-history__count[b-b6xstaqem5] {
    font-size: 0.8125rem;
    color: var(--app-ink-muted, #666);
}

/* The table can outgrow a narrow viewport — a long note value is 4,000
   characters wide in the worst case. Scroll it inside its own container
   so the PAGE never scrolls sideways. */
.record-history__table[b-b6xstaqem5] {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.record-history__table th[b-b6xstaqem5],
.record-history__table td[b-b6xstaqem5] {
    text-align: left;
    padding: 0.375rem 0.625rem;
    border-block-end: 1px solid var(--app-border, #e0e0e0);
    vertical-align: top;
}

.record-history__table th[b-b6xstaqem5] {
    font-weight: 600;
    color: var(--app-ink-muted, #666);
    white-space: nowrap;
}

.record-history__when[b-b6xstaqem5] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.record-history__who[b-b6xstaqem5],
.record-history__field[b-b6xstaqem5] {
    white-space: nowrap;
}

.record-history__field[b-b6xstaqem5] {
    font-weight: 600;
}

/* Values are the point of the panel, so give them room — but cap it, or
   one 4,000-character note pushes every other column off screen. */
.record-history__old[b-b6xstaqem5],
.record-history__new[b-b6xstaqem5] {
    max-width: 22rem;
    overflow-wrap: anywhere;
}

.record-history__old[b-b6xstaqem5] {
    color: var(--app-ink-muted, #666);
}

.record-history__row--insert .record-history__field[b-b6xstaqem5],
.record-history__row--delete .record-history__field[b-b6xstaqem5] {
    font-style: italic;
    font-weight: 500;
}

.record-history__row--delete[b-b6xstaqem5] {
    background: var(--status-danger-soft, #ffebee);
}

.record-history__note[b-b6xstaqem5] {
    margin-block-start: 0.5rem;
    margin-block-end: 0;
    font-size: 0.75rem;
    color: var(--app-ink-muted, #666);
}
/* /Components/Shared/BidPaymentPlanEditor.razor.rz.scp.css */
/* PP-3 — scoped styles for the payment-plan editor dialog. Tokens only, so
   the dialog follows the light/dark theme. The one status colour used is the
   danger token on an over-100% percent: that is a validation error on the
   field (the same token .field-error uses), not a repaint of a status. */

/* The dialog backdrop is a grid that sizes the panel to its content, and the
   table below has a 36rem minimum, so on a phone the panel grew past the
   screen and squeezed the header text to one letter per line. Capping the
   panel at the viewport (less the backdrop's 1.25rem padding each side) caps
   its content contribution too; the table then scrolls inside its wrapper. */
.payment-plan-editor[b-08wrohv6rz] {
    max-width: min(52rem, calc(100vw - 2.5rem));
}

.payment-plan-editor__note[b-08wrohv6rz] {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.payment-plan-editor__mode[b-08wrohv6rz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    margin: 0 0 0.85rem;
    padding: 0;
    border: 0;
}

.payment-plan-editor__legend[b-08wrohv6rz] {
    float: none;
    width: auto;
    margin: 0 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

/* Six rows of five inputs outgrow a phone: scroll inside the dialog so the
   page never scrolls sideways. */
.payment-plan-editor__table-wrap[b-08wrohv6rz] {
    max-width: 100%;
    overflow-x: auto;
}

.payment-plan-editor__table[b-08wrohv6rz] {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.payment-plan-editor__table th[b-08wrohv6rz],
.payment-plan-editor__table td[b-08wrohv6rz] {
    padding: 0.35rem 0.45rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.payment-plan-editor__table thead th[b-08wrohv6rz] {
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.payment-plan-editor__label[b-08wrohv6rz] {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.payment-plan-editor__pct-cell[b-08wrohv6rz] {
    width: 5.5rem;
}

.payment-plan-editor__amount-cell[b-08wrohv6rz] {
    width: 9rem;
}

.payment-plan-editor__due-cell[b-08wrohv6rz] {
    width: 10rem;
}

.payment-plan-editor__pct[b-08wrohv6rz],
.payment-plan-editor__amount[b-08wrohv6rz],
.payment-plan-editor__readonly[b-08wrohv6rz] {
    font-variant-numeric: tabular-nums;
}

.payment-plan-editor__readonly[b-08wrohv6rz] {
    display: block;
    padding: 0.25rem 0.5rem;
    color: var(--text);
}

/* Legacy painted the percent red while rows 1-5 exceed 100 (frmJob.vb:5184).
   The selector is deliberately specific: theme.css repaints every dark-theme
   number input with `[data-theme="dark"] input[type="number"]:not(.e-input)`
   (specificity 0,3,1), which otherwise wins and hides the red in dark. */
.payment-plan-editor__table input.payment-plan-editor__pct.payment-plan-editor__pct--over[b-08wrohv6rz],
.payment-plan-editor__table input.payment-plan-editor__pct.payment-plan-editor__pct--over:focus[b-08wrohv6rz] {
    color: var(--status-danger);
    border-color: var(--status-danger);
}

/* Locked rows (row N+1 waits for row N's percent). The same dark-theme input
   rule outranks theme.css's own `.form-control:disabled` repaint, so in dark
   a locked field looked like an open one; restate the dark disabled look
   here (light keeps Bootstrap's grey fill). */
[data-theme="dark"] .payment-plan-editor__table input.form-control:disabled[b-08wrohv6rz] {
    background-color: var(--surface);
    color: var(--text-subtle);
}

.payment-plan-editor__final th[b-08wrohv6rz],
.payment-plan-editor__final td[b-08wrohv6rz] {
    background: var(--surface-sunken);
}

.payment-plan-editor__table tfoot th[b-08wrohv6rz],
.payment-plan-editor__table tfoot td[b-08wrohv6rz] {
    border-bottom: 0;
    padding-top: 0.6rem;
}

.payment-plan-editor__grand[b-08wrohv6rz] {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* PP-8 — the save reminder (legacy dlgPaymentPlanConfirm): one sentence, a
   checkbox and OK. Narrow like the legacy window. */
.payment-plan-reminder[b-08wrohv6rz] {
    max-width: 30rem;
}

.payment-plan-reminder__text[b-08wrohv6rz] {
    margin: 0 0 0.85rem;
    color: var(--text);
}

.payment-plan-reminder__check[b-08wrohv6rz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
}