/* /Layout/MainLayout.razor.rz.scp.css */
/* The signed-in frame: a top bar over a page that fills the rest of the window. */
.portal-shell[b-6rbwg3govv] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--canvas);
}

.portal-topbar[b-6rbwg3govv] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    border-bottom: 1px solid var(--line);
    padding: 8px 24px;
    background: var(--panel);
}

.portal-brand[b-6rbwg3govv] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
}

.portal-logo[b-6rbwg3govv] {
    display: block;
    height: auto;
    width: auto;
    max-height: 38px;
    max-width: 220px;
}

/* The logo that suits the theme: the dark version on dark backgrounds. Only the last part of a selector is scoped,
   so the theme attribute on <html> can be matched here. */
.portal-logo.dark[b-6rbwg3govv],
[data-theme="dark"] .portal-logo.light[b-6rbwg3govv] {
    display: none;
}

[data-theme="dark"] .portal-logo.dark[b-6rbwg3govv] {
    display: block;
}

.portal-brand-label[b-6rbwg3govv] {
    border-left: 1px solid var(--line);
    padding-left: 12px;
    color: var(--brand-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.portal-topbar-actions[b-6rbwg3govv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.portal-main[b-6rbwg3govv] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 24px 24px;
}

@media (max-width: 720px) {
    .portal-topbar[b-6rbwg3govv] {
        padding: 8px 12px;
    }

    .portal-brand-label[b-6rbwg3govv],
    .portal-action-label[b-6rbwg3govv] {
        display: none;
    }

    .portal-main[b-6rbwg3govv] {
        padding: 14px 12px 16px;
    }
}

/* A top bar in the brand colour (Customer portal appearance): white text and icons, and the logo made for dark
   backgrounds (BrandingService.BrandBarLogo). */
.portal-topbar.brand[b-6rbwg3govv] {
    border-bottom-color: transparent;
    background: var(--brand-fill);
    color: #fff;
}

.portal-topbar.brand .portal-brand[b-6rbwg3govv] {
    color: #fff;
}

.portal-topbar.brand .portal-brand-label[b-6rbwg3govv] {
    border-left-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.portal-topbar.brand .icon-button[b-6rbwg3govv] {
    color: #fff;
}

.portal-topbar.brand .icon-button:hover[b-6rbwg3govv] {
    background: rgba(255, 255, 255, .14);
}

.portal-topbar.brand .primary-action[b-6rbwg3govv] {
    border-color: #fff;
    background: #fff;
    color: var(--brand-fill);
}
/* /Pages/Index.razor.rz.scp.css */
/* The home page fills the space under the top bar; on wide screens the jobs area scrolls inside itself. */
.portal-home[b-ucaxft28l3] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 14px;
    min-height: 0;
}

.portal-home[b-ucaxft28l3]  .admin-header {
    padding-bottom: 6px;
}

.portal-stats[b-ucaxft28l3] {
    padding: 16px;
}

.portal-jobs[b-ucaxft28l3] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.portal-jobs[b-ucaxft28l3]  > * {
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 960px) {
    .portal-home[b-ucaxft28l3] {
        height: calc(100dvh - 60px - 44px);
    }
}

/* The refresh icon turns while the page reloads. */
[b-ucaxft28l3] .spin { animation: spin .9s linear infinite; }
/* /Pages/Login.razor.rz.scp.css */
/* As the main app's sign in: the logo that suits the theme. */
.login-brand[b-zk98xfv1jl] {
    justify-content: center;
}

.login-logo[b-zk98xfv1jl] {
    width: auto;
    height: auto;
    max-width: 220px;
    max-height: 90px;
}

.login-logo.dark[b-zk98xfv1jl] {
    display: none;
}

[data-theme="dark"] .login-logo.light[b-zk98xfv1jl] {
    display: none;
}

[data-theme="dark"] .login-logo.dark[b-zk98xfv1jl] {
    display: block;
}

/* Help from the company running the portal, such as who to call, in the design system's sign-in footer; line
   breaks typed in the settings are kept. */
.login-support[b-zk98xfv1jl] {
    white-space: pre-line;
}
/* /Services/Authentication/SetupTwoFactor.razor.rz.scp.css */
/* As the main app: the QR code with the code entry beside it, stacked on narrow screens. */
.two-factor-code[b-iygvqza9pe] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 560px) {
    .two-factor-code[b-iygvqza9pe] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/Dialogs/DialogButtons.razor.rz.scp.css */
.dialog-buttons-bar[b-6n9kfeoj3f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* /Shared/Jobs/CustomerHeaderStats.razor.rz.scp.css */
/* The tiles sit inside the home page's stats panel, so they drop the metric row's own shadow and are a little
   shorter than on the main app's dashboards, leaving the jobs below as much height as possible. */
.customer-header-stats[b-wyhfcnzr4y] {
    width: 100%;
}

.stats-message[b-wyhfcnzr4y] {
    padding: 8px 0;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.portal-metrics[b-wyhfcnzr4y] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    box-shadow: none;
}

.portal-metrics > div[b-wyhfcnzr4y] {
    min-height: 84px;
    gap: 4px;
    padding: 12px 16px;
}

.portal-metrics strong[b-wyhfcnzr4y] {
    font-size: 22px;
}

.metric-label[b-wyhfcnzr4y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.metric-label[b-wyhfcnzr4y]  .ui-icon {
    color: var(--brand);
    font-size: 13px;
}

.metric-warning .metric-label[b-wyhfcnzr4y]  .ui-icon {
    color: var(--warning);
}

.metric-alert .metric-label[b-wyhfcnzr4y]  .ui-icon {
    color: var(--danger);
}

.customer-header-stats[b-wyhfcnzr4y]  .skeleton-metrics {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.customer-header-stats[b-wyhfcnzr4y]  .skeleton-metrics > div {
    min-height: 84px;
}

@media (max-width: 600px) {
    .portal-metrics[b-wyhfcnzr4y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-metrics > div[b-wyhfcnzr4y] {
        min-height: 72px;
        padding: 10px 12px;
    }

    .portal-metrics strong[b-wyhfcnzr4y] {
        font-size: 19px;
    }
}
/* /Shared/Jobs/JobContacts.razor.rz.scp.css */
/* Contact cards as the main app's job sheet shows them; the primary contact is marked in amber. */
.contact-items[b-ttj6eohaty] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-item[b-ttj6eohaty] {
    --contact-accent: var(--line-dark);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--contact-accent);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--panel);
    transition: border-color .14s ease;
}

.contact-item.contact-card-primary[b-ttj6eohaty] {
    --contact-accent: var(--warning);
    background: var(--warning-soft);
}

.contact-item:hover[b-ttj6eohaty] {
    border-color: var(--line-dark);
    border-left-color: var(--contact-accent);
}

.contact-title-row[b-ttj6eohaty] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.contact-name[b-ttj6eohaty] {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-details[b-ttj6eohaty] {
    display: grid;
    gap: 4px;
}

.contact-detail-row[b-ttj6eohaty] {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.35;
}

.contact-detail-row a[b-ttj6eohaty] {
    color: var(--ink-soft);
    text-decoration: none;
}

.contact-detail-row a:hover[b-ttj6eohaty] {
    color: var(--brand);
    text-decoration: underline;
}

.contact-detail-row[b-ttj6eohaty]  .ui-icon {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.contact-card-primary .contact-detail-row[b-ttj6eohaty]  .ui-icon {
    color: var(--contact-accent);
}

.contact-empty-state[b-ttj6eohaty] {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
}

@media (max-width: 720px) {
    .contact-name[b-ttj6eohaty] {
        white-space: normal;
    }
}
/* /Shared/Jobs/JobDetails.razor.rz.scp.css */
/* The chosen job: its progress along the top, then its details beside its contacts and results. On wide screens
   every card scrolls inside the space it's given; on narrower ones they stack and the pane scrolls instead. */
.job-details[b-ohjdzpbn42] {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 14px;
}

.job-details > .loading-state[b-ohjdzpbn42] {
    flex: 1 1 auto;
}

.job-details-grid[b-ohjdzpbn42] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.job-details-main[b-ohjdzpbn42],
.job-details-side[b-ohjdzpbn42],
.job-details-contacts[b-ohjdzpbn42],
.job-details-results[b-ohjdzpbn42] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.job-details-side[b-ohjdzpbn42] {
    gap: 12px;
}

/* The card frame shared by StatusBar, JobInformation, JobContacts and JobResults: the main app's job sheet card,
   a compact heading over a body that scrolls, with an optional footer. It lives here because every card is shown
   inside this component. */
.job-details[b-ohjdzpbn42]  .job-card {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0;
    background: var(--panel);
    box-shadow: none;
}

.job-details[b-ohjdzpbn42]  .status-bar {
    flex: 0 0 auto;
}

.job-details[b-ohjdzpbn42]  .job-card-heading {
    flex: 0 0 auto;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding: 4px 8px 4px 12px;
    background: var(--panel-alt);
}

.job-details[b-ohjdzpbn42]  .job-card-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.job-details[b-ohjdzpbn42]  .job-card-title > .ui-icon {
    flex: 0 0 auto;
    color: var(--brand);
    font-size: 14px;
}

.job-details[b-ohjdzpbn42]  .job-card-title h3 {
    overflow: hidden;
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-details[b-ohjdzpbn42]  .job-card-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.job-details[b-ohjdzpbn42]  .job-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 10px 12px 12px;
}

.job-details[b-ohjdzpbn42]  .job-card-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding: 8px 12px;
}

@media (min-width: 1280px) {
    .job-details[b-ohjdzpbn42] {
        overflow: hidden;
    }

    .job-details-grid[b-ohjdzpbn42] {
        flex: 1 1 auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Contacts take what they need, up to a share of the column; the results have the rest. */
    .job-details-contacts[b-ohjdzpbn42] {
        flex: 0 1 auto;
        max-height: 40%;
    }

    .job-details-results[b-ohjdzpbn42] {
        flex: 1 1 auto;
    }
}
/* /Shared/Jobs/JobInformation.razor.rz.scp.css */
.job-summary[b-kzgwp2i1u2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.job-summary-title[b-kzgwp2i1u2] {
    min-width: 0;
}

.job-summary-title h2[b-kzgwp2i1u2] {
    margin-top: 4px;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.job-summary .tag[b-kzgwp2i1u2] {
    flex: 0 0 auto;
}

.job-facts[b-kzgwp2i1u2] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.job-section[b-kzgwp2i1u2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.job-task[b-kzgwp2i1u2] {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Plain-text descriptions keep the line breaks they were written with. */
.job-description[b-kzgwp2i1u2] {
    color: var(--ink-soft);
    white-space: pre-wrap;
}

.job-footer-label[b-kzgwp2i1u2] {
    margin-right: auto;
    color: var(--muted-dark);
    font-size: 11px;
    font-weight: 700;
}
/* /Shared/Jobs/JobResults.razor.rz.scp.css */
/* Job results as the main app's ResultsList draws them: one card per result, tinted by its type, with the
   customer's own messages on the right. On narrower screens the list keeps a height of its own so the message box
   stays in reach; on wide ones the card fills its column. */
.results-body[b-7vtjza4g1q] {
    display: flex;
    flex-direction: column;
    max-height: 480px;
    min-height: 200px;
}

.results-body[b-7vtjza4g1q]  .empty-admin-state {
    flex: 1 1 auto;
    min-height: 0;
}

@media (min-width: 1280px) {
    .results-body[b-7vtjza4g1q] {
        max-height: none;
        min-height: 0;
    }
}

.chat-list[b-7vtjza4g1q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 2px 6px;
}

.chat-bubble[b-7vtjza4g1q] {
    --result-accent: var(--muted);
    --result-bg: var(--panel);
    position: relative;
    width: 100%;
    max-width: min(92%, 1080px);
    display: block;
    margin: 0;
    border: 1px solid var(--line);
    border-left: 3px solid var(--result-accent);
    padding: 10px 14px 12px;
    color: var(--ink);
    background: var(--result-bg);
    transition: border-color .14s ease;
}

.chat-bubble:hover[b-7vtjza4g1q] {
    border-color: var(--line-dark);
    border-left-color: var(--result-accent);
}

.chat-bubble.you[b-7vtjza4g1q] {
    align-self: flex-end;
    margin-left: auto;
}

.result-type-comment[b-7vtjza4g1q] { --result-accent: var(--muted); --result-bg: var(--panel); }
.result-type-customer-chat[b-7vtjza4g1q] { --result-accent: var(--warning); --result-bg: var(--warning-soft); }
.result-type-email[b-7vtjza4g1q] { --result-accent: var(--danger); --result-bg: var(--danger-soft); }
.result-type-call[b-7vtjza4g1q] { --result-accent: var(--info); --result-bg: var(--info-soft); }
.result-type-github[b-7vtjza4g1q] { --result-accent: var(--purple); --result-bg: var(--purple-soft); }
.result-type-notification[b-7vtjza4g1q] { --result-accent: var(--muted); --result-bg: var(--panel-alt); }
.result-type-ai[b-7vtjza4g1q] { --result-accent: var(--success); --result-bg: var(--success-soft); }
.result-type-checklist[b-7vtjza4g1q] { --result-accent: var(--info); --result-bg: var(--panel); }
.result-type-merged[b-7vtjza4g1q],
.result-type-subjob[b-7vtjza4g1q] { --result-accent: var(--brand); --result-bg: var(--brand-soft); }

.chat-bubble.sent-by-current-user[b-7vtjza4g1q] {
    --result-accent: var(--brand);
    --result-bg: var(--brand-soft);
}

/* Header: who and when. */
.message-header[b-7vtjza4g1q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
}

.staff-and-indicator[b-7vtjza4g1q] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.message-sender[b-7vtjza4g1q] {
    overflow: hidden;
    margin-right: 2px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-date[b-7vtjza4g1q] {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
}

.email-indicator[b-7vtjza4g1q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 3px;
    padding: 3px 7px;
    color: var(--result-accent);
    background: color-mix(in srgb, var(--result-accent) 16%, var(--panel));
    font-size: 10px;
    line-height: 1.3;
}

/* Body text. Email bodies are HTML from the email, so their elements are reached with ::deep. */
.message-content[b-7vtjza4g1q] {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.message-content[b-7vtjza4g1q]  :is(p, div) {
    margin-bottom: 4px;
}

.message-content[b-7vtjza4g1q]  :is(p, div):last-child {
    margin-bottom: 0;
}

.message-content[b-7vtjza4g1q]  img {
    max-width: 100%;
    height: auto;
}

.message-content[b-7vtjza4g1q]  table {
    max-width: 100%;
}

.attachment-wrapper[b-7vtjza4g1q] {
    display: inline-block;
    margin: 9px 6px 0 0;
}

.attachment-wrapper img[b-7vtjza4g1q] {
    max-width: 100%;
    max-height: 260px;
    border: 1px solid var(--line);
    object-fit: contain;
}

/* The message box: one bordered area holding the text, any images waiting to go, and the tools. */
.composer[b-7vtjza4g1q] {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    background: var(--field);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.composer:focus-within[b-7vtjza4g1q] {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.composer[b-7vtjza4g1q]  .form-field textarea {
    min-height: 56px;
    border: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 10px 12px 4px;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
}

.composer[b-7vtjza4g1q]  .form-field textarea:focus {
    box-shadow: none;
}

.composer-toolbar[b-7vtjza4g1q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px 6px 8px;
}

.composer-tools[b-7vtjza4g1q] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.composer-tool[b-7vtjza4g1q] {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0;
    color: var(--muted-dark);
    background: transparent;
    font-size: 16px;
    cursor: pointer;
}

.composer-tool:hover[b-7vtjza4g1q],
.composer-tool:focus-within[b-7vtjza4g1q] {
    color: var(--brand-text);
    background: var(--hover);
}

.composer-hint[b-7vtjza4g1q] {
    margin-left: 8px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachments-preview[b-7vtjza4g1q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 0;
}

.attachment-preview[b-7vtjza4g1q] {
    position: relative;
    display: inline-block;
}

.attachment-image[b-7vtjza4g1q] {
    max-width: 48px;
    max-height: 48px;
    border-radius: var(--radius-sm);
}

.attachment-remove[b-7vtjza4g1q] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    padding: 0;
    color: var(--panel);
    background: var(--ink-soft);
    font-size: 11px;
}

@media (max-width: 720px) {
    .chat-bubble[b-7vtjza4g1q] {
        max-width: 100%;
        padding: 10px 11px 12px;
    }

    .message-header[b-7vtjza4g1q] {
        flex-direction: column;
        gap: 6px;
    }

    .composer-hint[b-7vtjza4g1q] {
        display: none;
    }
}
/* /Shared/Jobs/JobsBaseView.razor.rz.scp.css */
/* Two panes that fill the height the home page gives them. The panes are panels with no padding of their own: the
   list and the job details lay out their own headers and scrolling bodies. */
.jobs-view[b-7rrufa3r9w] {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 26%) minmax(0, 1fr);
    gap: 14px;
}

/* Beats the design system's spacing between neighbouring panels, which is meant for panels stacked in a column. */
.jobs-view > .jobs-pane[b-7rrufa3r9w] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.jobs-detail-pane[b-7rrufa3r9w]  .empty-admin-state {
    flex: 1 1 auto;
}

@media (max-width: 959.98px) {
    .jobs-view[b-7rrufa3r9w] {
        height: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    /* A long list shouldn't push the chosen job far down the page, so it keeps its own scroll here too. */
    .jobs-list-pane[b-7rrufa3r9w] {
        max-height: min(60vh, 520px);
    }

    .jobs-detail-pane[b-7rrufa3r9w] {
        min-height: 320px;
    }
}
/* /Shared/Jobs/JobsList.razor.rz.scp.css */
/* The list fills its pane: the heading and customer choice stay put while the jobs scroll beneath them. */
.jobs-list[b-zk3potewou] {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.jobs-list-header[b-zk3potewou] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
    background: var(--panel-alt);
}

.jobs-list-title[b-zk3potewou] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.jobs-list-title[b-zk3potewou]  .ui-icon {
    color: var(--brand);
    font-size: 14px;
}

.jobs-list-title h3[b-zk3potewou] {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.jobs-list-customer[b-zk3potewou] {
    overflow: hidden;
    color: var(--muted-dark);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jobs-list-body[b-zk3potewou] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px;
}

.jobs-list-body[b-zk3potewou]  .empty-admin-state,
.jobs-list-body .loading-state[b-zk3potewou] {
    flex: 1 1 auto;
    min-height: 160px;
}

.job-items[b-zk3potewou] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One job, marked like the main app's job lists: the chosen one gets the green edge. */
.job-item[b-zk3potewou] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--ink-soft);
    background: var(--panel);
    font: inherit;
    font-size: 12px;
    text-align: left;
    transition: border-color .12s ease, background .12s ease;
}

.job-item:hover[b-zk3potewou] {
    border-color: var(--brand-soft-line);
    background: var(--panel-alt);
}

.job-item.selected[b-zk3potewou] {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 3px 0 var(--brand);
}

.job-item-heading[b-zk3potewou] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.job-item-code[b-zk3potewou] {
    color: var(--ink);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.job-item-heading .tag[b-zk3potewou] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-item-name[b-zk3potewou] {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-item-task[b-zk3potewou] {
    display: block;
    color: var(--muted-dark);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.job-item-facts[b-zk3potewou] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 4px 12px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
    padding-top: 6px;
}

.job-item-facts > span[b-zk3potewou] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-item-facts small[b-zk3potewou] {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
/* /Shared/Jobs/StatusBar.razor.rz.scp.css */
/* Status chips take their colour from the status (--status-colour), used as a tint and a dot so every status sits
   with the theme; the current status is the strongest. A thin line joins the chips into a timeline. The rules match
   the main app's JobSheetProgress. */
.status-bar .progress-card-content[b-9ofxv38yrt] {
    padding: 6px 10px;
}

.progress-strip[b-9ofxv38yrt] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    padding: 3px;
    white-space: nowrap;
}

.progress-segment[b-9ofxv38yrt] {
    --status-colour: var(--brand);
    position: relative;
    min-width: 64px;
    height: 28px;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--status-colour) 28%, var(--line));
    border-radius: 999px;
    padding: 0 12px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--status-colour) 9%, var(--panel));
    cursor: default;
    transition: border-color .15s ease, background-color .15s ease;
}

/* The connector to the previous status. */
.progress-segment + .progress-segment[b-9ofxv38yrt]::before {
    position: absolute;
    top: 50%;
    left: -15px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--line-dark);
    content: "";
}

.progress-segment:hover[b-9ofxv38yrt] {
    border-color: color-mix(in srgb, var(--status-colour) 55%, var(--line));
}

.progress-segment.is-current[b-9ofxv38yrt] {
    z-index: 1;
    border-color: var(--status-colour);
    color: var(--ink);
    background: color-mix(in srgb, var(--status-colour) 16%, var(--panel));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--status-colour) 22%, transparent);
}

.progress-segment:focus-visible[b-9ofxv38yrt] {
    outline: 2px solid var(--brand-ring);
    outline-offset: 2px;
}

.progress-segment-dot[b-9ofxv38yrt] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--status-colour);
}

.progress-segment.is-current .progress-segment-dot[b-9ofxv38yrt] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-colour) 25%, transparent);
}

.progress-segment-label[b-9ofxv38yrt] {
    min-width: 0;
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-segment.is-current .progress-segment-label[b-9ofxv38yrt] {
    font-weight: 800;
}

/* On small screens earlier statuses shrink to their dots; the current one keeps its name. */
@media (max-width: 700px) {
    .progress-strip[b-9ofxv38yrt] {
        gap: 10px;
    }

    .progress-segment[b-9ofxv38yrt] {
        min-width: 22px;
        height: 24px;
        flex: 0 1 26px;
        padding: 0;
    }

    .progress-segment + .progress-segment[b-9ofxv38yrt]::before {
        left: -11px;
        width: 10px;
    }

    .progress-segment-label[b-9ofxv38yrt] {
        font-size: 0;
    }

    .progress-segment.is-current[b-9ofxv38yrt] {
        min-width: 72px;
        flex: 1 1 86px;
        padding: 0 7px;
    }

    .progress-segment.is-current .progress-segment-label[b-9ofxv38yrt] {
        font-size: 10px;
    }
}
/* /Shared/Settings/Settings.razor.rz.scp.css */
/* As the main app's account settings: panels stacked with an even gap, the signed-in user at the top. */
.account-settings[b-3wr9kv5cmo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.account-settings > .panel + .panel[b-3wr9kv5cmo] {
    margin-top: 0;
}

.account-hero[b-3wr9kv5cmo] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.account-identity[b-3wr9kv5cmo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-identity h2[b-3wr9kv5cmo] {
    font-size: 17px;
    overflow-wrap: anywhere;
}

.account-action-grid[b-3wr9kv5cmo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}