@import '_content/BidGlory.UI/BidGlory.UI.q66xxxvt57.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/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/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;
}